refactor(web): the browser picker uses core, and stops being the worse one

Both UIs are React, so it is easy to assume they already share what matters.
They did not. The Ink picker called `core/catalog`'s `filterModels` and `rank`
and `core/format`'s helpers; the browser picker reimplemented filtering inline
and skipped the rest. The copy was not merely duplicated, it was WORSE:

  filtering   core.filterModels          vs  inline copy, no free-only filter
  sorting     core.rank (benchmark)      vs  none — whatever order the registry
                                             happened to return
  a free model            "free"         vs  "$0.00/M"
  a 1M-context model      "1M"           vs  "1000K"

The "$0.00" case is the one worth pausing on: that file's own header says "a
catalog with no prices shows no prices, rather than '$0.00', which would read as
free" — and eleven lines down it rendered exactly that. The rule was written
once and enforced in one of the two places it applies.

Root cause was a hand-written type. `web/src/api.ts` mirrored `NormalizedModel`
as a narrower `CatalogModel` — id, name, context, pricing, tools — so the
browser could not call `rank`, which sorts on `benchmarks`, a field the server
was already sending and the type simply hid. Same for `CatalogCapabilities`,
whose mirror had silently lost `requiresAuth`. Both are now type-only imports
from `src/ports/`: they erase, cost the bundle nothing, and cannot drift.

Verified in a browser against the live OpenRouter catalog: ranked by benchmark
rather than registry order, "1.1M context" not "1100K", a working free-only
filter (14 of 342), and free models rendering as "free".

What stays local to each UI is presentation, which is the right seam: the
browser keeps `priceLabel`, because `formatPrice` correctly returns "free" and
appending "/M in" to that gives "free/M in", which is not a thing anyone says.

770 tests. Bundle unchanged at 69.6 kB — core is pure and tree-shakes.

Signed-off-by: jellologic <31935831+jellologic@users.noreply.github.com>

Author: jellologic

web/src/api.ts

@@ -208,20 +208,26 @@ export type DoctorReport = {
   summary: { counts: Record<string, number>; exitCode: number }
 }
 
-export type CatalogModel = {
-  id: string
-  name: string
-  description?: string
-  context: number | null
-  pricing: { prompt: number; completion: number } | null
-  /** TRI-STATE. null is UNKNOWN, false is CONFIRMED ABSENT. Do not collapse. */
-  tools: boolean | null
-}
+/**
+ * A catalog row, RE-EXPORTED FROM CORE rather than mirrored here.
+ *
+ * This used to be a hand-written subset — id, name, context, pricing, tools —
+ * and the subset was the bug. The server sends the whole `NormalizedModel`
+ * (the catalog endpoint spreads its result), so the browser was already
+ * receiving `benchmarks` and simply could not see them: the picker could not
+ * call core's `rank`, which sorts on the coding benchmark, and so showed models
+ * in whatever order the provider happened to list them.
+ *
+ * A type-only import — it erases, costs the bundle nothing, and cannot drift.
+ */
+import type { CatalogCapabilities, NormalizedModel } from '../../src/ports/catalog'
+
+export type CatalogModel = NormalizedModel
 
 export type CatalogResult = {
   id: string
   label: string
-  capabilities: { pricing: boolean; benchmarks: boolean; toolSupportKnown: boolean }
+  capabilities: CatalogCapabilities
   models: CatalogModel[]
   fromCache: boolean
   stale: boolean

web/src/routes/ModelPicker.tsx

@@ -2,6 +2,12 @@ import { useEffect, useMemo, useState } from 'react'
 import { css } from '../../styled-system/css'
 import { ApiError, api, type CatalogModel, type CatalogResult } from '../api'
 import { Banner, Button, inputStyle } from '../ui'
+// The SAME filtering, ranking and formatting the Ink picker uses. These are
+// properties of the data, not of the widget, and the browser had drifted:
+// its own copy dropped the free-only filter, never sorted at all, and rendered
+// a free model as "$0.00/M" — the exact thing this file's header forbids.
+import { filterModels, rank } from '../../../src/core/catalog'
+import { formatContext, formatPrice } from '../../../src/core/format'
 
 /**
  * The browsable model list, for providers that publish one.
@@ -15,6 +21,20 @@ import { Banner, Button, inputStyle } from '../ui'
  *   * Nothing missing is rendered as a number. A catalog with no prices shows
  *     no prices, rather than "$0.00", which would read as free.
  */
+/**
+ * The per-million price pair, or just "free".
+ *
+ * `formatPrice` already returns "free" for zero — appending "/M in" to that
+ * gives "free/M in", which is not a thing anyone says. The FORMATTING is
+ * core's; only this bit of phrasing is the browser's, which is exactly the
+ * split that should exist between them.
+ */
+function priceLabel(pricing: { prompt: number; completion: number }): string {
+  const input = formatPrice(pricing.prompt)
+  const output = formatPrice(pricing.completion)
+  return input === 'free' && output === 'free' ? 'free' : `${input}/M in · ${output}/M out`
+}
+
 export function ModelPicker({
   catalogId,
   tier,
@@ -30,6 +50,7 @@ export function ModelPicker({
   const [error, setError] = useState<string | null>(null)
   const [query, setQuery] = useState('')
   const [toolsOnly, setToolsOnly] = useState(true)
+  const [freeOnly, setFreeOnly] = useState(false)
 
   useEffect(() => {
     let live = true
@@ -44,17 +65,12 @@ export function ModelPicker({
 
   const rows = useMemo(() => {
     if (!data) return []
-    const terms = query.toLowerCase().split(/\s+/).filter(Boolean)
-    // The filter is inert when the catalog cannot speak to tool support, which
-    // is what stops it hiding everything.
-    const filterActive = toolsOnly && data.capabilities.toolSupportKnown
-    return data.models.filter((m) => {
-      if (filterActive && m.tools === false) return false
-      if (terms.length === 0) return true
-      const hay = `${m.id} ${m.name}`.toLowerCase()
-      return terms.every((t) => hay.includes(t))
-    })
-  }, [data, query, toolsOnly])
+    // `rank` before display, exactly as the terminal picker does: models with a
+    // published coding benchmark first and best-first, then everything else
+    // alphabetically. Registry order is arbitrary — it put the useful models
+    // wherever the provider happened to list them.
+    return filterModels(data.models, { query, toolsOnly, freeOnly }, data.capabilities).sort(rank)
+  }, [data, query, toolsOnly, freeOnly])
 
   return (
     <div
@@ -127,6 +143,12 @@ export function ModelPicker({
               tools only
             </label>
           ) : null}
+          {data?.capabilities.pricing ? (
+            <label className={css({ display: 'flex', gap: '1.5', alignItems: 'center', cursor: 'pointer' })}>
+              <input type="checkbox" checked={freeOnly} onChange={(e) => setFreeOnly(e.target.checked)} />
+              free only
+            </label>
+          ) : null}
           {data?.stale ? <span className={css({ color: 'warn' })}>stale cache</span> : null}
           {data?.fromCache && !data.stale ? <span>cached</span> : null}
         </div>
@@ -174,12 +196,8 @@ export function ModelPicker({
               <div className={css({ fontSize: '11.5px', color: 'faint', mt: '0.5' })}>
                 {m.name}
                 {/* Absent data stays absent. "$0.00" would read as free. */}
-                {m.pricing
-                  ? ` · $${(m.pricing.prompt * 1_000_000).toFixed(2)}/M in · $${(
-                      m.pricing.completion * 1_000_000
-                    ).toFixed(2)}/M out`
-                  : ''}
-                {m.context ? ` · ${Math.round(m.context / 1000)}K context` : ''}
+                {m.pricing ? ` · ${priceLabel(m.pricing)}` : ''}
+                {m.context ? ` · ${formatContext(m.context)} context` : ''}
               </div>
             </button>
           ))}