@modelstatus/cli 0.1.85 → 0.1.87

package/src/tui/signin.js

@@ -12,6 +12,19 @@ import { h } from "./ui.js";
 
 const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
+// One in-flight device-auth session per apiBase, held OUTSIDE the component.
+// SignIn is remounted on every signed-out Account-tab visit (and after a game
+// round-trip); without this, each mount minted a NEW device code and popped
+// ANOTHER browser tab — and an approval made in the browser after the user
+// switched tabs landed on a code nobody was polling. A remount now resumes the
+// pending session (same code, same URL, no extra tab) and picks the approval up.
+// Sessions clear on approval/denial/expiry/start-failure (and g re-mints one).
+// apiBase -> { device_code, user_code, verification_url, interval, deadline, opened }
+const authSessions = new Map();
+
+/** Test hook: forget all pending device-auth sessions. */
+export function _resetAuthSessions() { authSessions.clear(); }
+
 export function SignIn({ apiBase, onSuccess, onSkip }) {
   const { exit } = useApp();
   const [phase, setPhase] = React.useState("starting"); // starting | polling | error
@@ -35,19 +48,38 @@ export function SignIn({ apiBase, onSuccess, onSkip }) {
 
     const start = async () => {
       try {
-        const s = await client.authStart({ client_name: "mm CLI" });
+        // Resume the session a previous mount left in flight (tab switch, game
+        // round-trip) — same code, same browser tab, and an approval made while
+        // we weren't looking gets picked up on the first poll. Mint a fresh one
+        // only when none is pending or the old one passed its deadline.
+        let s = authSessions.get(apiBase);
+        if (!s || Date.now() > s.deadline) {
+          const fresh = await client.authStart({ client_name: "mm CLI" });
+          s = {
+            device_code: fresh.device_code,
+            user_code: fresh.user_code,
+            verification_url: fresh.verification_url,
+            interval: Math.max(1, fresh.interval || 3) * 1000,
+            deadline: Date.now() + (fresh.expires_in || 600) * 1000,
+            opened: false,
+          };
+          // Cache even if this mount was cancelled mid-start — the code is
+          // already minted, so let the next visit resume it instead of orphaning it.
+          authSessions.set(apiBase, s);
+        }
         if (cancelled) return;
         setCode(s.user_code);
         setUrl(s.verification_url);
         setPhase("polling");
-        openUrl(s.verification_url); // best-effort, no error if it fails
-
-        const interval = Math.max(1, s.interval || 3) * 1000;
-        const deadline = Date.now() + (s.expires_in || 600) * 1000;
+        if (!s.opened) {
+          s.opened = true;
+          openUrl(s.verification_url); // best-effort, ONCE per session (o re-opens)
+        }
 
         const poll = async () => {
           if (cancelled) return;
-          if (Date.now() > deadline) {
+          if (Date.now() > s.deadline) {
+            authSessions.delete(apiBase);
             setError("The login request expired.");
             setPhase("error");
             return;
@@ -60,6 +92,7 @@ export function SignIn({ apiBase, onSuccess, onSkip }) {
           }
           if (cancelled) return;
           if (res?.status === "approved") {
+            authSessions.delete(apiBase);
             const cfg = loadConfig();
             cfg.apiKey = res.api_key;
             cfg.apiBase = apiBase;
@@ -68,20 +101,23 @@ export function SignIn({ apiBase, onSuccess, onSkip }) {
             return;
           }
           if (res?.status === "denied") {
+            authSessions.delete(apiBase);
             setError("Authorization was denied.");
             setPhase("error");
             return;
           }
           if (res?.status === "expired") {
+            authSessions.delete(apiBase);
             setError("The login request expired. Press q and run mm login again.");
             setPhase("error");
             return;
           }
-          pollTimer = setTimeout(poll, interval);
+          pollTimer = setTimeout(poll, s.interval);
         };
         poll();
       } catch (e) {
         if (cancelled) return;
+        authSessions.delete(apiBase); // a failed start isn't resumable
         setError(e?.message || String(e));
         setPhase("error");
       }

package/src/tui/views/account.js

@@ -28,6 +28,18 @@ export function AccountView({ client, me, refreshMe, apiBase, ui, active }) {
 
   React.useEffect(() => ui?.reportStatus?.({ context: `plan: ${me?.plan ?? "…"}` }), [me, ui]);
 
+  // The upgrade poll below is a self-rescheduling setTimeout chain — without
+  // cleanup it outlives the view (keeps hitting /me every 4s for up to 10min,
+  // sets state on an unmounted component, and holds the event loop open AFTER
+  // quit, hanging the user's shell). Cancel it the moment the view unmounts.
+  const pollTimerRef = React.useRef(null);
+  const mountedRef = React.useRef(true);
+  React.useEffect(() => () => {
+    mountedRef.current = false;
+    if (pollTimerRef.current) clearTimeout(pollTimerRef.current);
+    pollTimerRef.current = null;
+  }, []);
+
   async function upgrade() {
     // Without a loaded account a checkout would just fire at an unreachable
     // endpoint and die with a raw fetch error — say what to do instead.
@@ -40,9 +52,11 @@ export function AccountView({ client, me, refreshMe, apiBase, ui, active }) {
       setStatus("Complete checkout in your browser… (polling /me)");
       const deadline = Date.now() + 10 * 60 * 1000;
       const tick = async () => {
+        if (!mountedRef.current) return;
         if (Date.now() > deadline) return setStatus("Timed out — press u to retry.");
         try {
           const m = await client.me();
+          if (!mountedRef.current) return;
           if (m?.account?.plan && m.account.plan !== "free") {
             setStatus(null);
             ui.showToast(`upgraded to ${m.account.plan}!`);
@@ -52,9 +66,12 @@ export function AccountView({ client, me, refreshMe, apiBase, ui, active }) {
         } catch {
           /* keep polling */
         }
-        setTimeout(tick, 4000);
+        if (!mountedRef.current) return;
+        pollTimerRef.current = setTimeout(tick, 4000);
       };
-      setTimeout(tick, 4000);
+      // A second u press replaces (not stacks) any poll chain already running.
+      if (pollTimerRef.current) clearTimeout(pollTimerRef.current);
+      pollTimerRef.current = setTimeout(tick, 4000);
     } catch (e) {
       setStatus(e.status === 503 ? "Billing isn't configured on this server." : `checkout failed: ${e.message} — press u to retry.`);
     }

package/src/tui/views/alerts.js

@@ -125,11 +125,20 @@ export function AlertsView({ client, ui, active, width = 78, height = 14 }) {
             .patchRule(cur.id, { delivery: DELIVERY[(DELIVERY.indexOf(cur.delivery) + 1) % 3] })
             .then(() => rules.reload())
             .catch((e) => ui.showToast(e.message, "red"));
-        if (input === "d")
-          return client.deleteRule(cur.id).then(() => {
-            ui.showToast("rule deleted");
-            rules.reload();
-          }).catch((e) => ui.showToast(e.message, "red"));
+        if (input === "d") {
+          // One stray keypress shouldn't silently delete a rule — confirm with a
+          // single y, same pattern as InventoryView's d (inventory.js).
+          return ui.askPrompt(`Delete ${ruleLabel(cur)}? type y`, {
+            onSubmit: (v) => {
+              if (String(v || "").trim().toLowerCase() !== "y") return ui.showToast("delete cancelled");
+              client.deleteRule(cur.id).then(() => {
+                ui.showToast("rule deleted");
+                setCursor((c) => clampCursor(c, ruleList.length - 1));
+                rules.reload();
+              }).catch((e) => ui.showToast(e.message, "red"));
+            },
+          });
+        }
       } else {
         if (input === "n") return addChannel();
         if (input === "t" && cur) return testChannel(cur);
@@ -150,14 +159,18 @@ export function AlertsView({ client, ui, active, width = 78, height = 14 }) {
     if (!ruleList.length) {
       body = h(EmptyCard, { title: "No alert rules yet", lines: ["Stay ahead of your model timeline — a heads-up 90, 30, 7, and 1 day before anything you use is deprecated or retired.", "Press n to set the sensible default (your models · in-app + email · those lead times)."], width });
     } else {
+      // Window the list around the cursor (same as whatsnew.js) — a fixed
+      // slice(0, ROWS) lets the selection walk below the visible page and
+      // space/c/d act on a row the user can't see.
       const curIdx = clampCursor(cursor, ruleList.length);
+      const start = Math.max(0, Math.min(curIdx - ROWS + 1, ruleList.length - ROWS));
       const fixed = 2 + 26 + 1 + 10 + 1; // glyph + name + gap + delivery + gap
       const rest = Math.max(8, width - 1 - fixed);
       body = h(
         Box,
         { flexDirection: "column" },
-        ...ruleList.slice(0, ROWS).map((r, i) => {
-          const isCur = i === curIdx;
+        ...ruleList.slice(start, start + ROWS).map((r, i) => {
+          const isCur = start + i === curIdx;
           const enabled = !!r.enabled;
           const leads = r.leadTimes || r.lead_times || [];
           const chanText = [(r.channels || []).join(","), leads.length ? leads.join("/") + "d" : ""].filter(Boolean).join(" · ");
@@ -182,13 +195,15 @@ export function AlertsView({ client, ui, active, width = 78, height = 14 }) {
         h(Text, { color: "#d97706" }, "  Slack/Discord/SMS/webhook channels need Pro — press 7 → u to upgrade."),
       );
     } else {
+      // Windowed around the cursor like the rules list above.
       const curIdx = clampCursor(cursor, chanList.length);
+      const start = Math.max(0, Math.min(curIdx - ROWS + 1, chanList.length - ROWS));
       const rest = Math.max(8, width - 1 - 10); // after the 10-wide kind pill
       body = h(
         Box,
         { flexDirection: "column" },
-        ...chanList.slice(0, ROWS).map((c, i) => {
-          const isCur = i === curIdx;
+        ...chanList.slice(start, start + ROWS).map((c, i) => {
+          const isCur = start + i === curIdx;
           const cells = [
             { text: cell(c.kind, 10), color: KIND_COLOR[c.kind] || C.FG_DIM, bold: true },
             { text: cellE(c.label || c.value, rest), color: C.FG },

package/src/tui/views/whatsnew.js

@@ -7,6 +7,7 @@ import React from "react";
 import { Box, Text, useInput } from "ink";
 import {
   h, C, GLYPH, SubTabs, ListRow, StateLine, cellE, clampCursor, SPINNER, useTick, useAsync,
+  useSearch, SearchBar,
 } from "../ui.js";
 import { collectFrom } from "../../sources/index.js";
 import { loadConfig, setConfigValue } from "../../config.js";
@@ -21,11 +22,11 @@ const TABS = ["Registry", "Alerts", "Drift", "Fixes", "Releases"];
 // Notifications: mark read · Drift: rescan + archive). Published via ui.setKeys()
 // so the keybar never advertises a key that's dead on the current section.
 const TAB_KEYS = [
-  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "m", label: "mark all seen" }, { k: "g", label: "refresh" }],
-  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "o", label: "mark read" }, { k: "g", label: "refresh" }],
-  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "r", label: "rescan" }, { k: "a", label: "archive" }],
-  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "o", label: "open in editor" }, { k: "g", label: "refresh" }],
-  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }],
+  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "/", label: "search" }, { k: "m", label: "mark all seen" }, { k: "g", label: "refresh" }],
+  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "/", label: "search" }, { k: "o", label: "mark read" }, { k: "g", label: "refresh" }],
+  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "/", label: "search" }, { k: "r", label: "rescan" }, { k: "a", label: "archive" }],
+  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "/", label: "search" }, { k: "o", label: "open in editor" }, { k: "g", label: "refresh" }],
+  [{ k: "←→", label: "section" }, { k: "↑↓", label: "nav" }, { k: "/", label: "search" }],
 ];
 
 // The static fallback must match the default (Registry) section exactly —
@@ -35,8 +36,12 @@ export const meta = { keys: TAB_KEYS[0] };
 export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14 }) {
   const [tab, setTab] = React.useState(0);
   const [cursor, setCursor] = React.useState(0);
+  const search = useSearch();
   const lastSeen = loadConfig().lastEventsSeenAt || null;
   React.useEffect(() => { ui?.setKeys?.(TAB_KEYS[tab]); }, [tab, ui]);
+  // Re-window from the top whenever the filter changes so the cursor never sits
+  // below the (now shorter) visible list.
+  React.useEffect(() => { setCursor(0); }, [search.query]);
 
   const reg = useAsync(async () => {
     const [ev, m, p] = await Promise.all([
@@ -89,11 +94,46 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
     }
   }
 
+  // One `/` filter, applied per-section over the fields each row actually shows
+  // (so e.g. typing "deprecated" on Registry narrows to model_deprecated events,
+  // "claude" to a provider's models). Computed once here and reused by both the
+  // key handler — so m/o/a act on the row you can SEE — and the render below.
+  const q = search.query.toLowerCase().trim();
+  const regEvents = reg.data?.events || [];
+  const regName = (e) => (e.model_id ? reg.data?.models.get(e.model_id) : reg.data?.provs.get(e.provider_id)) || "";
+  const regFiltered = q ? regEvents.filter((e) => `${e.event_type} ${regName(e)} ${String(e.published_at || "").slice(0, 10)}`.toLowerCase().includes(q)) : regEvents;
+  const notifAll = notif.data || [];
+  const notifFiltered = q ? notifAll.filter((n) => `${n.title} ${String(n.when || "").slice(0, 10)}`.toLowerCase().includes(q)) : notifAll;
+  const fixesFiltered = q ? fixes.filter((f) => `${path.basename(f.dir)} ${f.file} ${f.from} ${f.to}`.toLowerCase().includes(q)) : fixes;
+  const relFiltered = q ? CHANGELOG.filter((e) => `v${e.version} ${e.date} ${e.title} ${(e.items || []).join(" ")}`.toLowerCase().includes(q)) : CHANGELOG;
+  const driftAdded = q && drift?.added ? drift.added.filter((c) => `${c.display || c.model_string} ${c.location_label || ""}`.toLowerCase().includes(q)) : drift?.added || [];
+  const driftGone = q && drift?.gone ? drift.gone.filter((u) => `${u.model_display || u.custom_model_name || ""} ${u.source_path || ""}`.toLowerCase().includes(q)) : drift?.gone || [];
+
   useInput(
     (input, key) => {
       if (!active) return;
-      if (key.leftArrow) return (setTab((t) => (t + TABS.length - 1) % TABS.length), setCursor(0));
-      if (key.rightArrow) return (setTab((t) => (t + 1) % TABS.length), setCursor(0));
+      // While typing a filter, keys feed the query — not the section commands.
+      // No trailing return: ↑↓ still scroll the filtered list as you refine it
+      // (matches the Scan/Inventory search feel). Mirrors the useSearch ref guard.
+      if (search.isSearchingNow()) {
+        if (key.escape) { search.clear(); ui?.setCapturing?.(false); return; }
+        if (key.return) { search.confirm(); ui?.setCapturing?.(false); return; }
+        if (key.backspace || key.delete) return search.backspace();
+        if (input && !key.ctrl && !key.meta && !key.leftArrow && !key.rightArrow) return search.type(input);
+      }
+      // "/" opens the filter (any trailing chars typed in the same burst seed it).
+      if (typeof input === "string" && input.startsWith("/")) {
+        search.open();
+        ui?.setCapturing?.(true);
+        const rest = input.slice(1);
+        if (rest) search.type(rest);
+        return;
+      }
+      if (key.leftArrow) return (setTab((t) => (t + TABS.length - 1) % TABS.length), setCursor(0), search.clear());
+      if (key.rightArrow) return (setTab((t) => (t + 1) % TABS.length), setCursor(0), search.clear());
+      // esc / backspace drops a confirmed filter (when not mid-typing — that's
+      // handled above) before falling through to the section commands.
+      if ((key.escape || key.backspace || key.delete) && search.query) return search.clear();
       if (key.downArrow || input === "j") return setCursor((c) => c + 1);
       if (key.upArrow || input === "k") return setCursor((c) => Math.max(0, c - 1));
       // g refreshes whichever section is showing — the universal retry across tabs
@@ -111,7 +151,7 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
           ui.showToast("marked all as seen");
         }
       } else if (tab === 1) {
-        const list = notif.data || [];
+        const list = notifFiltered;
         const cur = list[clampCursor(cursor, list.length)];
         if (input === "o" && cur)
           client.readNotification(cur.id).then(() => {
@@ -119,14 +159,14 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
             notif.reload();
           }).catch((e) => ui.showToast(e.message, "red"));
       } else if (tab === 3) {
-        const cur = fixes[clampCursor(cursor, fixes.length)];
+        const cur = fixesFiltered[clampCursor(cursor, fixesFiltered.length)];
         if (input === "o" && cur) {
           openLocation(path.resolve(cur.dir, cur.file), cur.line);
           ui.showToast(`opened ${cur.file}:${cur.line}`);
         }
       } else if (tab === 2) {
         if (input === "r") return runDrift();
-        const gone = drift?.gone || [];
+        const gone = driftGone;
         // Same visible-rows clamp as the render — archive only what's on screen.
         const cur = gone[clampCursor(cursor, Math.min(gone.length, 7))];
         if (input === "a" && cur)
@@ -157,8 +197,8 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
     if (reg.loading) body = h(StateLine, { kind: "loading", spin, text: "loading registry changes…" });
     else if (reg.error) body = h(StateLine, { kind: "error", text: `couldn't load registry changes — ${reg.error}`, hint: "g retries" });
     else {
-      const events = reg.data.events;
-      if (!events.length) body = h(Text, { color: C.FG_DIM }, "  No registry changes recorded yet.");
+      const events = regFiltered;
+      if (!events.length) body = h(Text, { color: C.FG_DIM }, q ? `  No changes match "${search.query}".` : "  No registry changes recorded yet.");
       else {
         const start = clampCursor(cursor, events.length);
         body = h(
@@ -181,10 +221,10 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
       }
     }
   } else if (tab === 1) {
-    const list = notif.data || [];
+    const list = notifFiltered;
     if (notif.loading) body = h(StateLine, { kind: "loading", spin, text: "loading alerts…" });
     else if (notif.error) body = h(StateLine, { kind: "error", text: `couldn't load alerts — ${notif.error}`, hint: "g retries" });
-    else if (!list.length) body = h(Text, { color: C.FG_DIM }, "  No alerts yet. Press 6 to set up alert rules.");
+    else if (!list.length) body = h(Text, { color: C.FG_DIM }, q ? `  No alerts match "${search.query}".` : "  No alerts yet. Press 6 to set up alert rules.");
     else {
       // Window the list around the cursor so ↑↓ can reach every row — a fixed
       // slice(0, ROWS) lets the selection walk below the visible page and `o`
@@ -206,14 +246,15 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
       );
     }
   } else if (tab === 3) {
-    if (!fixes.length) {
-      body = h(Text, { color: C.FG_DIM }, "  No fixes applied yet. Press f on the Here tab (or run mm fix) to rewrite dying model ids.");
+    if (!fixesFiltered.length) {
+      body = h(Text, { color: C.FG_DIM }, q ? `  No fixes match "${search.query}".` : "  No fixes applied yet. Press f on the Here tab (or run mm fix) to rewrite dying model ids.");
     } else {
       // Windowed like the Alerts section so ↑↓ reaches every row — minus 4 rows
       // reserved for the selected fix's diff underneath.
+      const fixesV = fixesFiltered;
       const FROWS = Math.max(3, ROWS - 4);
-      const cur = clampCursor(cursor, fixes.length);
-      const start = Math.max(0, Math.min(cur - FROWS + 1, fixes.length - FROWS));
+      const cur = clampCursor(cursor, fixesV.length);
+      const start = Math.max(0, Math.min(cur - FROWS + 1, fixesV.length - FROWS));
       const ago = (ts) => {
         const m = Math.max(0, Math.round((Date.now() - ts) / 60000));
         if (m < 1) return "now";
@@ -225,7 +266,7 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
       body = h(
         Box,
         { flexDirection: "column" },
-        ...fixes.slice(start, start + FROWS).map((f, i) => {
+        ...fixesV.slice(start, start + FROWS).map((f, i) => {
           const cells = [
             { text: `${GLYPH.check} `, color: "#16a34a" },
             { text: cellE(`${path.basename(f.dir)} · ${f.file}:${f.line}`, 38), color: C.FG },
@@ -238,7 +279,7 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
         // The selected fix's diff — same red/green visual as the f preview + the fix PR.
         h(Text, { key: "drule" }, ""),
         ...(() => {
-          const sel = fixes[cur];
+          const sel = fixesV[cur];
           if (!sel) return [];
           if (!sel.before || !sel.after) return [h(Text, { key: "dnone", color: C.FG_DIM }, "  (diff not recorded for this entry — older fix)")];
           const w = Math.max(20, width - 4);
@@ -251,14 +292,17 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
       );
     }
   } else if (tab === 4) {
+    const relV = relFiltered;
+    if (!relV.length) { body = h(Text, { color: C.FG_DIM }, `  No releases match "${search.query}".`); }
+    else {
     const RROWS = Math.max(3, ROWS - 5); // reserve rows for the selected entry's bullets
-    const cur = clampCursor(cursor, CHANGELOG.length);
-    const start = Math.max(0, Math.min(cur - RROWS + 1, CHANGELOG.length - RROWS));
-    const sel = CHANGELOG[cur];
+    const cur = clampCursor(cursor, relV.length);
+    const start = Math.max(0, Math.min(cur - RROWS + 1, relV.length - RROWS));
+    const sel = relV[cur];
     body = h(
       Box,
       { flexDirection: "column" },
-      ...CHANGELOG.slice(start, start + RROWS).map((e, i) => {
+      ...relV.slice(start, start + RROWS).map((e, i) => {
         const cells = [
           { text: cellE(`v${e.version}`, 16), color: C.ACCENT },
           { text: cellE(e.date, 12), color: C.FG_FAINT },
@@ -272,12 +316,14 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
             h(Text, { key: `rb${i}`, color: C.FG_DIM }, cellE(`  • ${it.replace(/\`/g, "")}`, Math.max(24, width - 2))))
         : []),
     );
+    }
   } else {
     if (!drift) body = h(Text, { color: C.FG_DIM }, `  Press r to scan ${dir} and compare against tracked usages.`);
     else if (drift.loading) body = h(StateLine, { kind: "loading", spin, text: "scanning for drift…" });
     else if (drift.error) body = h(StateLine, { kind: "error", text: `drift scan failed — ${drift.error}`, hint: "r rescans" });
     else {
-      const gone = drift.gone || [];
+      const added = driftAdded;
+      const gone = driftGone;
       // Clamp the archive cursor to the VISIBLE rows — `a` must never act on a
       // row below the 7 shown.
       const curGone = clampCursor(cursor, Math.min(gone.length, 7));
@@ -287,12 +333,13 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
         h(
           Text,
           {},
-          h(Text, { color: "#16a34a" }, `${drift.added.length} new in code`),
+          h(Text, { color: "#16a34a" }, `${added.length} new in code`),
           h(Text, { color: C.FG_DIM }, `  ·  ${drift.present} still present  ·  `),
           h(Text, { color: "#dc2626" }, `${gone.length} gone from code`),
+          q ? h(Text, { color: C.FG_FAINT }, `  ·  filter "${search.query}"`) : null,
         ),
         h(Text, {}, ""),
-        ...drift.added.slice(0, 5).map((c, i) => {
+        ...added.slice(0, 5).map((c, i) => {
           const cells = [
             { text: "+ ", color: "#16a34a" },
             { text: cellE(c.display || c.model_string, 24), color: "#16a34a" },
@@ -301,7 +348,7 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
           ];
           return h(ListRow, { key: "a" + i, active: false, cells, width });
         }),
-        drift.added.length > 5 ? h(Text, { color: C.FG_DIM }, `  … ${drift.added.length - 5} more new`) : null,
+        added.length > 5 ? h(Text, { color: C.FG_DIM }, `  … ${added.length - 5} more new`) : null,
         ...gone.slice(0, 7).map((u, i) => {
           const cells = [
             { text: "- ", color: "#dc2626" },
@@ -316,11 +363,18 @@ export function WhatsNewView({ client, dir, ui, active, width = 78, height = 14
     }
   }
 
+  const visibleCount = tab === 0 ? regFiltered.length
+    : tab === 1 ? notifFiltered.length
+    : tab === 2 ? driftAdded.length + driftGone.length
+    : tab === 3 ? fixesFiltered.length
+    : relFiltered.length;
+
   return h(
     Box,
     { flexDirection: "column" },
     h(SubTabs, { idx: tab, tabs: TABS }),
     h(Text, {}, ""),
     body,
+    search.active ? h(SearchBar, { searching: search.searching, query: search.query, count: visibleCount }) : null,
   );
 }