@modelstatus/cli 0.1.0 → 0.1.25

package/src/tui/views/local.js

@@ -0,0 +1,229 @@
+/* Free local-repo view — the TUI's default front door, no sign-in required.
+ * Streams a cooperative filesystem scan (engine in scan-stream.js) and keeps the
+ * result cached, so returning to this tab does NOT rescan (press g to force one).
+ * List is scrollable (j/k/↑↓), filterable (/), with a full-width detail panel for
+ * the highlighted row; ↵ drills into that model's usage locations and ↵ opens the
+ * selected one in your editor. Body-only; the shell (app.js) owns chrome. */
+import React from "react";
+import fs from "node:fs";
+import path from "node:path";
+import { Box, Text, useInput } from "ink";
+import {
+  h, C, GLYPH, healthColor, healthGlyph, relativeTime, cellE, rpad, fmtNum, clampCursor,
+  SPINNER, SweepBar, ListRow, StateLine, ModelDetailBar, SearchBar, distinctRefs,
+  useTick, useCursorList, useSearch,
+} from "../ui.js";
+import { useStreamingScan, countHealth } from "../scan-stream.js";
+import { readSnippet } from "../snippet.js";
+import { openLocation } from "../../openUrl.js";
+import { addGlobalIgnore } from "../../sources/filesystem.js";
+
+export const meta = {
+  keys: [
+    { k: "↑↓", label: "scroll" },
+    { k: "↵", label: "refs" },
+    { k: "e", label: "exclude" },
+    { k: "/", label: "search" },
+    { k: "p", label: "pause" },
+    { k: "g", label: "rescan" },
+  ],
+};
+
+const PANEL_H = 6; // bottom detail-panel rows (collapsed)
+
+const agoText = (ms) => {
+  const s = Math.max(0, Math.round(ms / 1000));
+  if (s < 60) return `${s}s ago`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const hr = Math.round(m / 60);
+  if (hr < 24) return `${hr}h ago`;
+  return `${Math.round(hr / 24)}d ago`;
+};
+
+export function LocalView({ dir, ui, width = 78, height = 14, active = true, fresh = false }) {
+  const scan = useStreamingScan(dir, { fresh });
+  const running = scan.phase === "registry" || scan.phase === "scanning";
+  const tick = useTick(80, running);
+  const spin = SPINNER[tick % SPINNER.length];
+  const search = useSearch();
+  const [focus, setFocus] = React.useState("list"); // list | refs
+  const [refIdx, setRefIdx] = React.useState(0);
+  const refIdxRef = React.useRef(0); // synchronous mirror of refIdx for the input handler
+
+  const { snapshot, rows, custom, refsBySlug, customRefs, candidateCount, filesScanned, dirsSeen, catalogsSkipped, scannedAt, fromCache, phase } = scan;
+
+  const items = React.useMemo(() => {
+    const known = rows.map((r) => ({ slug: r.model.slug, model: r.model, health: r.health, count: r.count, refs: refsBySlug.get(r.model.slug) || [] }));
+    const cust = [...custom.entries()].map(([name, n]) => ({ slug: name, model: null, health: "custom", count: n, refs: customRefs.get(name) || [] }));
+    return [...known, ...cust];
+  }, [rows, custom, refsBySlug, customRefs]);
+
+  const q = search.query.toLowerCase();
+  const filtered = q ? items.filter((it) => it.slug.toLowerCase().includes(q)) : items;
+
+  const FIXED = 3; // strip + showing line + search line
+  const wantPanel = filtered.length > 0;
+  const focusedPanel = Math.min(22, Math.max(PANEL_H, height - FIXED - 2)); // room for refs + snippet
+  const panelH = wantPanel ? (focus === "refs" ? focusedPanel : PANEL_H) : 0;
+  const pageSize = Math.max(1, height - FIXED - panelH);
+  const nav = useCursorList(filtered.length, pageSize);
+  React.useEffect(() => { nav.reset(); setFocus("list"); refIdxRef.current = 0; setRefIdx(0); }, [search.query]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const cur = filtered[nav.cursor];
+  const drefs = cur ? distinctRefs(cur.refs) : [];
+  // Syntax-highlighted snippet of the highlighted reference (drill-in view only).
+  // Key off the selected ref's scalar fields, NOT the `drefs` array — distinctRefs
+  // returns a fresh array each render, which would defeat the memo and re-read the
+  // file from disk on every unrelated re-render (toast, status, resize).
+  const selRef = focus === "refs" && drefs.length ? drefs[clampCursor(refIdx, drefs.length)] : null;
+  const snippet = React.useMemo(() => {
+    if (!selRef || !selRef.source_path) return null;
+    return readSnippet(path.resolve(dir, selRef.source_path), selRef.source_line, selRef.model_string);
+  }, [selRef?.source_path, selRef?.source_line, selRef?.model_string, dir]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const openRef = (r) => {
+    if (!r) return;
+    const abs = path.resolve(dir, r.source_path || r.location_label || "");
+    if (r.source_path && !fs.existsSync(abs)) return ui?.showToast?.("file moved — press g to rescan", "#d97706");
+    openLocation(abs, r.source_line);
+    ui?.showToast?.(`opened ${r.source_path || r.location_label}${r.source_line ? ":" + r.source_line : ""}`);
+  };
+  // Exclude a reference's path from future scans. Prefilled with its top-level
+  // dir (e.g. "modelmanager") so excluding a whole project is one keystroke +
+  // Enter; editable for finer globs. Persists to the global ignore + rescans.
+  const excludeRef = (r) => {
+    if (!r) return;
+    const rel = (r.source_path || r.location_label || "").replace(/\\/g, "/");
+    const seg = rel.split("/")[0] || rel; // top-level project dir (one-Enter case)
+    ui?.askPrompt?.("Exclude path/glob from scans", {
+      initial: seg,
+      onSubmit: (pat) => {
+        setFocus("list");
+        if (addGlobalIgnore(pat)) {
+          ui?.showToast?.(`excluded "${(pat || "").trim()}" — rescanning`);
+          scan.reload();
+        } else {
+          ui?.showToast?.(`couldn't exclude "${(pat || "").trim()}"`, "#dc2626");
+        }
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    const counts = countHealth(rows);
+    counts.custom = custom.size;
+    ui?.reportStatus?.({ counts, context: snapshot ? `registry · ${fmtNum(snapshot.models.length)} models` : "scanning…" });
+  }, [rows, custom, snapshot, phase, ui]);
+
+  // Tell the shell when backspace should back out *within* this view (drilled
+  // into refs, or an active filter) rather than stepping to the previous tab.
+  const setHandlesBack = ui?.setHandlesBack;
+  React.useEffect(() => {
+    setHandlesBack?.(focus === "refs" || !!search.query);
+    return () => setHandlesBack?.(false);
+  }, [setHandlesBack, focus, search.query]);
+
+  useInput(
+    (input, key) => {
+      if (!active) return;
+      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) return search.type(input);
+        return;
+      }
+      if (focus === "refs") {
+        if (key.escape || key.leftArrow || key.backspace || key.delete) return setFocus("list");
+        // refIdx read from a ref (not closure state) so a same-tick j/k + open/e
+        // acts on the row the user actually has highlighted.
+        if (key.downArrow || input === "j") { refIdxRef.current = clampCursor(refIdxRef.current + 1, drefs.length); return setRefIdx(refIdxRef.current); }
+        if (key.upArrow || input === "k") { refIdxRef.current = clampCursor(refIdxRef.current - 1, drefs.length); return setRefIdx(refIdxRef.current); }
+        if (key.return || input === "o") return openRef(drefs[clampCursor(refIdxRef.current, drefs.length)]);
+        if (input === "e") return excludeRef(drefs[clampCursor(refIdxRef.current, drefs.length)]);
+        return;
+      }
+      if (typeof input === "string" && input.startsWith("/")) {
+        search.open();
+        ui?.setCapturing?.(true);
+        const rest = input.slice(1);
+        if (rest) search.type(rest);
+        return;
+      }
+      if ((key.escape || key.backspace || key.delete) && search.query) return search.clear();
+      if (key.return || key.rightArrow) {
+        if (drefs.length) { setFocus("refs"); refIdxRef.current = 0; setRefIdx(0); } // drill in → refs + snippet
+        return;
+      }
+      if (key.downArrow || input === "j") return nav.down();
+      if (key.upArrow || input === "k") return nav.up();
+      if (input === "e") return excludeRef(drefs[0]); // exclude the highlighted model's location (editable)
+      if (input === "p" && running) return scan.togglePause();
+      if (input === "g") return scan.reload();
+    },
+    { isActive: active },
+  );
+
+  if (phase === "error") return h(StateLine, { kind: "error", text: scan.error });
+
+  // ----- strip (1 line) -----
+  const counters = `${fmtNum(filesScanned)} files · ${fmtNum(dirsSeen)} dirs · ${fmtNum(candidateCount)} refs${catalogsSkipped ? ` · ${catalogsSkipped} catalog${catalogsSkipped === 1 ? "" : "s"} skipped` : ""}`;
+  const attention = rows.filter((r) => r.health !== "ok").length;
+  let strip;
+  if (phase === "registry") strip = h(StateLine, { kind: "loading", spin, text: "fetching the signed registry…" });
+  else if (phase === "scanning" && scan.paused)
+    strip = h(Box, {}, h(Text, { color: "#d97706" }, ` ${GLYPH.pause} paused  `), h(Text, { color: C.FG_DIM }, `${counters}  ·  p resume`));
+  else if (phase === "scanning")
+    strip = h(Box, {}, h(Text, { color: C.ACCENT }, ` ${spin}  `), h(SweepBar, { tick }), h(Text, { color: C.FG }, `  ${counters}`), h(Text, { color: C.FG_FAINT }, "  ·  p pause"));
+  else
+    strip = h(
+      Box,
+      {},
+      h(Text, { color: "#16a34a" }, ` ${GLYPH.check} `),
+      h(Text, { color: C.FG_DIM }, fromCache ? `loaded last scan${scannedAt ? ` (${agoText(Date.now() - scannedAt)})` : ""} · ${fmtNum(candidateCount)} refs · g rescan` : `scanned ${counters}`),
+      attention > 0
+        ? h(Text, { color: "#d97706" }, `   ${GLYPH.warn} ${attention} need attention`)
+        : h(Text, { color: "#16a34a" }, "   all current"),
+    );
+
+  // ----- list rows (full width) -----
+  const slugW = Math.max(16, width - 1 - 2 - 1 - 8 - 1 - 5);
+  const view = filtered.slice(nav.start, nav.start + pageSize);
+  const rowNodes = view.map((it, i) => {
+    const realIdx = nav.start + i;
+    const isCur = realIdx === nav.cursor;
+    const rt = it.model ? relativeTime(it.model.retires_date) : { text: "", color: C.FG_FAINT, bold: false };
+    const cells = [
+      { text: `${healthGlyph(it.health)} `, color: healthColor(it.health) },
+      { text: cellE(it.slug, slugW), color: isCur && focus === "list" ? C.FG_STRONG : it.model ? C.FG : C.FG_FAINT, bold: isCur && focus === "list" },
+      { text: " ", color: C.FG },
+      { text: rpad(rt.text, 8), color: rt.color, bold: rt.bold },
+      { text: " ", color: C.FG },
+      { text: rpad(`(${it.count})`, 5), color: C.FG_DIM },
+    ];
+    return h(ListRow, { key: it.slug + realIdx, active: isCur, cells, width });
+  });
+
+  const emptyDone = phase === "done" && filtered.length === 0;
+  const showingLine = h(
+    Text,
+    { color: C.FG_FAINT },
+    filtered.length > pageSize
+      ? `  ${nav.start + 1}-${Math.min(nav.end, filtered.length)} of ${filtered.length}${search.query ? ` · filter "${search.query}"` : ""}`
+      : filtered.length
+        ? `  ${filtered.length} model${filtered.length === 1 ? "" : "s"} in use${search.query ? ` · filter "${search.query}"` : ""}`
+        : "",
+  );
+
+  return h(
+    Box,
+    { flexDirection: "column" },
+    strip,
+    emptyDone ? h(Text, { color: C.FG_DIM }, search.query ? `  no matches for "${search.query}"` : "  No AI model references found here.") : null,
+    ...rowNodes,
+    showingLine,
+    cur ? h(ModelDetailBar, { title: cur.slug, health: cur.health, model: cur.model, refs: cur.refs, width, height: panelH, refCursor: focus === "refs" ? clampCursor(refIdx, drefs.length) : -1, snippet }) : null,
+    h(SearchBar, { searching: search.searching, query: search.query, count: filtered.length }),
+  );
+}

package/src/tui/views/scan.js

@@ -1,73 +1,185 @@
+/* Scan view — THE hero screen (matches the marketing mockup). Walks the repo,
+ * resolves each reference against the signed registry for rich health +
+ * retirement display, and lets you select + upload to your inventory. Server
+ * model_ids are resolved only at upload time so uploads stay correct.
+ * Scrollable (j/k/↑↓), filterable (/), with a full-width detail panel; ↵ drills
+ * into the highlighted model's usage locations and ↵ opens one in your editor. */
 import React from "react";
+import fs from "node:fs";
 import path from "node:path";
 import { Box, Text, useInput } from "ink";
-import { h, useAsync, cell, clampCursor } from "../ui.js";
-import { collectFrom } from "../../sources/index.js";
-
-export function ScanView({ client, dir, ui, active }) {
-  const load = useAsync(async () => {
-    const patterns = await client.detectionPatterns();
-    const cands = await collectFrom(["filesystem"], { root: dir }, patterns);
-    const uniq = [...new Set(cands.map((c) => c.model_string))];
-    const resolved = uniq.length ? (await client.resolve(uniq)).data || [] : [];
+import {
+  h, C, GLYPH, layout, ListRow, StateLine, EmptyCard, ModelDetailBar, SearchBar, distinctRefs,
+  healthColor, healthGlyph, relativeTime, envTag, cellE, cellL, cell, rpad, fmtNum,
+  SPINNER, useTick, useAsync, useCursorList, useSearch, clampCursor,
+} from "../ui.js";
+import { HEALTH_RANK, countHealth, useStreamingScan } from "../scan-stream.js";
+import { resolveLocal, computeHealth } from "../../registry/local.js";
+import { addGlobalIgnore } from "../../sources/filesystem.js";
+import { readSnippet } from "../snippet.js";
+import { track } from "../../telemetry.js";
+import { openUrl, openLocation } from "../../openUrl.js";
+
+export const meta = {
+  keys: [
+    { k: "↑↓", label: "nav" },
+    { k: "space", label: "select" },
+    { k: "↵", label: "refs" },
+    { k: "e", label: "exclude" },
+    { k: "/", label: "search" },
+    { k: "g", label: "rescan" },
+    { k: "u", label: "upload" },
+  ],
+};
+
+const PANEL_H = 6;
+
+export function ScanView({ client, dir, ui, active, width = 78, height = 14, fresh = false }) {
+  // Reuse the SHARED cached scan engine (same module-level cache as the Here
+  // tab) instead of re-walking the repo on every visit. Switching to Scan after
+  // Here is now instant; `g` forces a fresh walk for both.
+  const scan = useStreamingScan(dir, { fresh });
+  const running = scan.phase === "registry" || scan.phase === "scanning";
+
+  const [items, setItems] = React.useState([]);
+  const [projectIdx, setProjectIdx] = React.useState(0);
+  const [busy, setBusy] = React.useState(false);
+  const [focus, setFocus] = React.useState("list"); // list | refs
+  const [refIdx, setRefIdx] = React.useState(0);
+  const refIdxRef = React.useRef(0); // synchronous mirror for the input handler
+  const tick = useTick(80, running || busy);
+  const search = useSearch();
+
+  // Upload-target projects (cheap; independent of the scan).
+  const projQ = useAsync(() => client.listProjects().then((r) => r.data || []).catch(() => []), []);
+  const projects = projQ.data || [];
+  const project = projects[clampCursor(projectIdx, projects.length)] || null;
+
+  // Selectable per-(model, location) rows derived from the cached scan's
+  // candidates — resolved locally for display/health; server model_ids are
+  // looked up only at upload time.
+  const rows = React.useMemo(() => {
+    if (!scan.snapshot) return [];
+    const resolved = resolveLocal(scan.snapshot, [...new Set(scan.candidates.map((c) => c.model_string))]);
     const byStr = new Map(resolved.map((r) => [r.input.toLowerCase(), r]));
     const seen = new Set();
-    const rows = [];
-    for (const c of cands) {
+    const out = [];
+    const today = new Date();
+    for (const c of scan.candidates) {
       const r = byStr.get(c.model_string.toLowerCase());
-      const model_id = r?.model_id ?? null;
-      const k = `${model_id ?? "custom:" + c.model_string}|${c.location_label}`;
-      if (seen.has(k)) continue;
-      seen.add(k);
-      rows.push({ ...c, model_id, display: model_id ? r.display : c.model_string, selected: true });
+      const slug = r?.model_slug || null;
+      const model = r?.model || null;
+      const key = `${slug || "custom:" + c.model_string}|${c.location_label}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push({ ...c, key, slug, model, display: slug || c.model_string, health: model ? computeHealth(model, 90, today) : "custom", selected: true });
     }
-    const projects = (await client.listProjects()).data || [];
-    return { rows, projects };
-  }, [dir]);
+    out.sort(
+      (a, b) =>
+        HEALTH_RANK[a.health] - HEALTH_RANK[b.health] ||
+        String(a.model?.retires_date || "9999-99-99").localeCompare(String(b.model?.retires_date || "9999-99-99")),
+    );
+    return out;
+  }, [scan.candidates, scan.snapshot]);
 
-  const [items, setItems] = React.useState([]);
-  const [cursor, setCursor] = React.useState(0);
-  const [projectIdx, setProjectIdx] = React.useState(0);
-  const [busy, setBusy] = React.useState(false);
+  // Mirror rows into selectable items. Keyed on the row SET (not the array
+  // identity) so unrelated re-renders don't wipe the user's selections; a real
+  // rescan changes the set and re-syncs (all selected by default).
+  const rowsKey = rows.map((r) => r.key).join("|");
+  React.useEffect(() => { setItems(rows.map((r) => ({ ...r }))); }, [rowsKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  const selCount = items.filter((i) => i.selected).length;
+
+  const q = search.query.toLowerCase();
+  const filtered = q ? items.filter((it) => it.display.toLowerCase().includes(q) || (it.location_label || "").toLowerCase().includes(q)) : items;
+
+  const FIXED = 2; // showing line + footer/search line
+  const wantPanel = filtered.length > 0;
+  const focusedPanel = Math.min(22, Math.max(PANEL_H, height - FIXED - 2)); // room for refs + snippet
+  const panelH = wantPanel ? (focus === "refs" ? focusedPanel : PANEL_H) : 0;
+  const pageSize = Math.max(1, height - FIXED - panelH);
+  const nav = useCursorList(filtered.length, pageSize);
+  React.useEffect(() => { nav.reset(); setFocus("list"); refIdxRef.current = 0; setRefIdx(0); }, [search.query]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const cur = filtered[nav.cursor];
+  const refs = cur ? items.filter((it) => (cur.model ? it.slug === cur.slug : it.model_string === cur.model_string)) : [];
+  const drefs = distinctRefs(refs);
+  // Key the memo off the selected ref's scalar fields, not the fresh `drefs`
+  // array (which changes identity every render and would re-read from disk).
+  const selRef = focus === "refs" && drefs.length ? drefs[clampCursor(refIdx, drefs.length)] : null;
+  const snippet = React.useMemo(() => {
+    if (!selRef || !selRef.source_path) return null;
+    return readSnippet(path.resolve(dir, selRef.source_path), selRef.source_line, selRef.model_string);
+  }, [selRef?.source_path, selRef?.source_line, selRef?.model_string, dir]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(() => {
-    if (load.data) setItems(load.data.rows.map((r) => ({ ...r })));
-  }, [load.data]);
+    const counts = countHealth(items);
+    const ctx = `${project ? project.name + " · " : ""}${selCount}/${items.length} sel`;
+    ui?.reportStatus?.({ counts, context: ctx });
+  }, [items, selCount, project, ui]);
 
-  const projects = load.data?.projects || [];
-  const project = projects[projectIdx] || null;
-  const selCount = items.filter((i) => i.selected).length;
+  // Tell the shell when backspace should back out *within* this view (drilled
+  // into refs, or an active filter) rather than stepping to the previous tab.
+  const setHandlesBack = ui?.setHandlesBack;
+  React.useEffect(() => {
+    setHandlesBack?.(focus === "refs" || !!search.query);
+    return () => setHandlesBack?.(false);
+  }, [setHandlesBack, focus, search.query]);
+
+  function openRef(r) {
+    if (!r) return;
+    const abs = path.resolve(dir, r.source_path || r.location_label || "");
+    if (r.source_path && !fs.existsSync(abs)) return ui?.showToast?.("file moved — press g to rescan", "#d97706");
+    openLocation(abs, r.source_line);
+    ui?.showToast?.(`opened ${r.source_path || r.location_label}${r.source_line ? ":" + r.source_line : ""}`);
+  }
+  function excludeRef(r) {
+    if (!r) return;
+    const rel = (r.source_path || r.location_label || "").replace(/\\/g, "/");
+    const seg = rel.split("/")[0] || rel;
+    ui?.askPrompt?.("Exclude path/glob from scans", {
+      initial: seg,
+      onSubmit: (pat) => {
+        setFocus("list");
+        if (addGlobalIgnore(pat)) {
+          ui?.showToast?.(`excluded "${(pat || "").trim()}" — rescanning`);
+          scan.reload();
+        } else {
+          ui?.showToast?.(`couldn't exclude "${(pat || "").trim()}"`, "#dc2626");
+        }
+      },
+    });
+  }
 
   async function createProject(name) {
     if (!name?.trim()) return;
     try {
       await client.createProject(name.trim());
       ui.showToast(`project "${name.trim()}" created`);
-      load.reload();
+      projQ.reload();
     } catch (e) {
-      ui.showToast(e.message, "red");
+      ui.showToast(e.message, "#dc2626");
     }
   }
 
   async function upload() {
     const selected = items.filter((r) => r.selected);
-    if (!selected.length) return ui.showToast("nothing selected", "yellow");
+    if (!selected.length) return ui.showToast("nothing selected", "#d97706");
     setBusy(true);
     try {
       let projectId = project?.id;
       if (!projectId) projectId = (await client.createProject(path.basename(path.resolve(dir)))).id;
-      const usages = selected.map((r) => ({
-        model_id: r.model_id ?? undefined,
-        custom_model_name: r.model_id ? undefined : r.model_string,
-        environment: r.environment,
-        location_label: r.location_label,
-        source_path: r.source_path,
-        source_line: r.source_line,
-      }));
+      const uniq = [...new Set(selected.filter((r) => r.slug).map((r) => r.model_string))];
+      const ids = uniq.length ? (await client.resolve(uniq)).data || [] : [];
+      const idByStr = new Map(ids.map((r) => [r.input.toLowerCase(), r.model_id]));
+      const usages = selected.map((r) => {
+        const mid = idByStr.get(r.model_string.toLowerCase());
+        return { model_id: mid ?? undefined, custom_model_name: mid ? undefined : r.model_string, environment: r.environment, location_label: r.location_label, source_repo: (process.env.GITHUB_REPOSITORY || "").trim() || undefined, source_path: r.source_path, source_line: r.source_line };
+      });
       const res = await client.bulkUpload(projectId, usages);
+      track("usages_uploaded", { count: usages.length, created: res.created, updated: res.updated, source: "tui" });
       ui.showToast(`uploaded ${usages.length} → ${res.created} new, ${res.updated} updated`);
     } catch (e) {
-      ui.showToast(e.message, "red");
+      ui.showToast(e.message, "#dc2626");
     } finally {
       setBusy(false);
     }
@@ -76,50 +188,97 @@ export function ScanView({ client, dir, ui, active }) {
   useInput(
     (input, key) => {
       if (!active || busy) return;
-      if (key.downArrow || input === "j") return setCursor((c) => clampCursor(c + 1, items.length));
-      if (key.upArrow || input === "k") return setCursor((c) => clampCursor(c - 1, items.length));
-      if (input === " ")
-        return setItems((its) => its.map((it, i) => (i === clampCursor(cursor, items.length) ? { ...it, selected: !it.selected } : it)));
+      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) return search.type(input);
+        return;
+      }
+      if (focus === "refs") {
+        if (key.escape || key.leftArrow || key.backspace || key.delete) return setFocus("list");
+        if (key.downArrow || input === "j") { refIdxRef.current = clampCursor(refIdxRef.current + 1, drefs.length); return setRefIdx(refIdxRef.current); }
+        if (key.upArrow || input === "k") { refIdxRef.current = clampCursor(refIdxRef.current - 1, drefs.length); return setRefIdx(refIdxRef.current); }
+        if (key.return || input === "o") return openRef(drefs[clampCursor(refIdxRef.current, drefs.length)]);
+        if (input === "e") return excludeRef(drefs[clampCursor(refIdxRef.current, drefs.length)]);
+        return;
+      }
+      if (typeof input === "string" && input.startsWith("/")) {
+        search.open();
+        ui?.setCapturing?.(true);
+        const rest = input.slice(1);
+        if (rest) search.type(rest);
+        return;
+      }
+      if ((key.escape || key.backspace || key.delete) && search.query) return search.clear();
+      if (key.return || key.rightArrow) {
+        if (drefs.length) { setFocus("refs"); refIdxRef.current = 0; setRefIdx(0); } // drill in → refs + snippet
+        return;
+      }
+      if (key.downArrow || input === "j") return nav.down();
+      if (key.upArrow || input === "k") return nav.up();
+      if (input === " ") {
+        const c = filtered[nav.cursor];
+        if (c) setItems((its) => its.map((it) => (it.key === c.key ? { ...it, selected: !it.selected } : it)));
+        return;
+      }
+      if (input === "e") return excludeRef(drefs[0]); // exclude the highlighted model's location (editable)
       if (input === "a") return setItems((its) => its.map((it) => ({ ...it, selected: true })));
       if (input === "x") return setItems((its) => its.map((it) => ({ ...it, selected: false })));
       if (input === "p") return setProjectIdx((i) => (projects.length ? (i + 1) % projects.length : 0));
-      if (input === "P") return ui.askPrompt("New project name", { onSubmit: createProject });
-      if (input === "g") return load.reload();
+      if (input === "P") return ui.askPrompt("New project", { onSubmit: createProject });
+      if (input === "g") return scan.reload();
       if (input === "u") return upload();
+      if (input === "l") {
+        if (cur?.slug) openUrl(`https://llmstatus.ai/registry/${encodeURIComponent(cur.slug)}`);
+        else ui.showToast("no registry page for a custom model", "#d97706");
+      }
     },
     { isActive: active },
   );
 
-  if (load.loading) return h(Text, { color: "gray" }, `Scanning ${dir} …`);
-  if (load.error) return h(Text, { color: "red" }, `Error: ${load.error}`);
+  if (scan.phase === "error") return h(StateLine, { kind: "error", text: scan.error });
+  if (running && !items.length) return h(StateLine, { kind: "scanning", spin: SPINNER[tick % SPINNER.length], text: `scanning ${dir}…` });
   if (!items.length)
-    return h(
-      Box,
-      { flexDirection: "column" },
-      h(Text, { color: "gray" }, `No model usage found in ${dir}.`),
-      h(Text, { color: "gray" }, "Press g to re-scan."),
-    );
+    return h(EmptyCard, { icon: GLYPH.spark, title: `No model usage found in ${path.basename(dir)}`, lines: ["Press g to rescan, or 5 Add to enter one manually."], width });
+
+  const L = layout(width);
+  const view = filtered.slice(nav.start, nav.start + pageSize);
+  const rowNodes = view.map((it, i) => {
+    const realIdx = nav.start + i;
+    const isCur = realIdx === nav.cursor;
+    const rt = relativeTime(it.model?.retires_date);
+    const et = envTag(it.environment);
+    const loc = (it.source_path || it.location_label || "") + (it.source_line ? ":" + it.source_line : "");
+    const cells = [
+      { text: `${it.selected ? GLYPH.selOn : GLYPH.selOff} `, color: it.selected ? C.ACCENT : C.FG_FAINT },
+      { text: `${healthGlyph(it.health)} `, color: healthColor(it.health) },
+      { text: cellE(it.display, L.slug), color: isCur && focus === "list" ? C.FG_STRONG : it.slug ? C.FG : C.FG_FAINT, bold: isCur && focus === "list" },
+    ];
+    if (!L.dropLoc) { cells.push({ text: " ", color: C.FG }); cells.push({ text: cellL(loc, L.loc), color: C.FG_DIM }); }
+    cells.push({ text: " ", color: C.FG });
+    cells.push({ text: cell(et.text, L.env), color: et.color });
+    cells.push({ text: " ", color: C.FG });
+    cells.push({ text: rpad(rt.text, L.rel), color: rt.color, bold: rt.bold });
+    return h(ListRow, { key: it.key + realIdx, active: isCur, selected: it.selected, cells, width });
+  });
+
+  const showingLine = h(
+    Text,
+    { color: C.FG_FAINT },
+    `  ${fmtNum(filtered.length)} ref${filtered.length === 1 ? "" : "s"}${filtered.length > pageSize ? ` · ${nav.start + 1}-${Math.min(nav.end, filtered.length)}` : ""}${search.query ? ` · filter "${search.query}"` : ""}${scan.fromCache ? " · cached · g rescan" : ""}`,
+  );
+  const footer = busy
+    ? h(Text, { color: C.ACCENT }, ` ${SPINNER[tick % SPINNER.length]} uploading…`)
+    : h(SearchBar, { searching: search.searching, query: search.query, count: filtered.length });
 
-  const view = items.slice(0, 16);
   return h(
     Box,
     { flexDirection: "column" },
-    h(
-      Text,
-      { color: "gray" },
-      `${items.length} found · ${selCount} selected · target project: `,
-      h(Text, { color: "cyan" }, project ? project.name : `(new: ${path.basename(path.resolve(dir))})`),
-    ),
-    h(Text, {}, ""),
-    ...view.map((it, i) =>
-      h(
-        Text,
-        { key: i, inverse: i === clampCursor(cursor, items.length), color: it.model_id ? "green" : "gray" },
-        `${it.selected ? "◉" : "○"} ${cell(it.display || it.model_string, 26)} ${cell(it.location_label, 28)} ${it.environment}`,
-      ),
-    ),
-    items.length > 16 ? h(Text, { color: "gray" }, `…and ${items.length - 16} more`) : null,
-    h(Text, {}, ""),
-    h(Text, { color: "gray" }, "space toggle · a all · x none · p project · P new-project · u upload · g rescan"),
+    filtered.length === 0 ? h(Text, { color: C.FG_DIM }, `  no matches for "${search.query}"`) : null,
+    ...rowNodes,
+    showingLine,
+    cur ? h(ModelDetailBar, { title: cur.display, health: cur.health, model: cur.model, refs, width, height: panelH, refCursor: focus === "refs" ? clampCursor(refIdx, drefs.length) : -1, snippet }) : null,
+    footer,
   );
 }