@modelstatus/cli 0.1.0 → 0.1.25

package/src/tui/views/account.js

@@ -1,16 +1,32 @@
 import React from "react";
 import { Box, Text, useInput } from "ink";
-import { h } from "../ui.js";
+import { h, C, GLYPH } from "../ui.js";
 import { loadConfig, configFilePath } from "../../config.js";
 import { openUrl } from "../../openUrl.js";
 
 const FREE_LIMITS = { projects: 1, usages: 15, channels: 1 };
+// Background paint only when colors are on (mirrors ui.js BG_ON gate; ui handles the rest).
+const BG_ON = process.env.MM_ASCII !== "1" && process.env.TERM !== "dumb" && process.env.NO_COLOR == null;
+
+export const meta = { keys: [{ k: "u", label: "upgrade" }, { k: "g", label: "refresh" }] };
+
+/** label/value row: padded accent label + value. */
+function Row({ label, value, color = C.FG, bold = false }) {
+  return h(
+    Text,
+    {},
+    h(Text, { color: C.ACCENT }, label.padEnd(9)),
+    h(Text, { color, bold }, value),
+  );
+}
 
 export function AccountView({ client, me, refreshMe, apiBase, ui, active }) {
   const [status, setStatus] = React.useState(null);
   const cfg = loadConfig();
   const keyPrefix = cfg.apiKey ? `${cfg.apiKey.slice(0, 12)}…` : "(none)";
 
+  React.useEffect(() => ui?.reportStatus?.({ context: `plan: ${me?.plan ?? "…"}` }), [me, ui]);
+
   async function upgrade() {
     if (me?.plan && me.plan !== "free") return ui.showToast(`already on ${me.plan}`, "yellow");
     setStatus("Starting checkout…");
@@ -51,26 +67,40 @@ export function AccountView({ client, me, refreshMe, apiBase, ui, active }) {
 
   const plan = me?.plan ?? "…";
   const isFree = plan === "free";
+  const endpoint = apiBase || cfg.apiBase || "https://llmstatus.ai";
+
+  const badge = isFree
+    ? h(Text, { color: C.FG_FAINT }, " free ")
+    : h(Text, { backgroundColor: BG_ON ? "#16a34a" : undefined, color: C.ACCENT_INK, bold: true }, " PRO ");
+
   return h(
     Box,
     { flexDirection: "column" },
-    h(Text, { bold: true }, me?.name ?? "Account"),
-    h(Text, {}, h(Text, { color: "cyan" }, "plan      "), h(Text, { color: isFree ? "gray" : "green" }, plan)),
-    h(Text, {}, h(Text, { color: "cyan" }, "retiring  "), `${me?.retiring_window_days ?? 90} day window`),
-    h(Text, {}, h(Text, { color: "cyan" }, "endpoint  "), apiBase || cfg.apiBase || "https://llmstatus.ai"),
-    h(Text, {}, h(Text, { color: "cyan" }, "key       "), keyPrefix),
-    h(Text, { color: "gray" }, `config: ${configFilePath}`),
+    h(
+      Box,
+      { flexDirection: "column", borderStyle: "round", borderColor: C.BORDER, paddingX: 1 },
+      h(
+        Text,
+        {},
+        h(Text, { bold: true, color: C.FG_STRONG }, me?.name ?? "Account"),
+        h(Text, {}, "  "),
+        badge,
+      ),
+      h(Row, { label: "plan", value: plan, color: isFree ? C.FG_DIM : "#16a34a", bold: !isFree }),
+      h(Row, { label: "retiring", value: `${me?.retiring_window_days ?? 90} day window` }),
+      h(Row, { label: "endpoint", value: endpoint }),
+      h(Row, { label: "key", value: keyPrefix }),
+      h(Text, { color: C.FG_FAINT }, `config: ${configFilePath}`),
+    ),
     h(Text, {}, ""),
     isFree
       ? h(
           Box,
           { flexDirection: "column" },
-          h(Text, { color: "yellow" }, `Free plan · up to ${FREE_LIMITS.projects} project, ${FREE_LIMITS.usages} usages, email+in-app alerts.`),
-          h(Text, { color: "gray" }, "Press u to upgrade to Pro ($5/yr): unlimited usages + Slack/Discord/SMS/webhook alerts."),
+          h(Text, { color: "#d97706" }, `Free plan · up to ${FREE_LIMITS.projects} project, ${FREE_LIMITS.usages} usages, email+in-app alerts.`),
+          h(Text, { color: C.FG_DIM }, "Press u to upgrade to Pro ($5/yr): unlimited usages + Slack/Discord/SMS/webhook alerts."),
         )
-      : h(Text, { color: "green" }, "Pro features unlocked. Thanks for supporting LLM Status!"),
-    status ? h(Text, { color: "cyan", marginTop: 1 }, status) : null,
-    h(Text, {}, ""),
-    h(Text, { color: "gray" }, "u upgrade · g refresh · (mm logout from the shell to sign out)"),
+      : h(Text, { color: "#16a34a" }, `${GLYPH.check} Pro features unlocked. Thanks for supporting LLM Status!`),
+    status ? h(Text, { color: C.ACCENT, marginTop: 1 }, status) : null,
   );
 }

package/src/tui/views/add.js

@@ -1,9 +1,18 @@
 import React from "react";
 import { Box, Text, useInput } from "ink";
-import { h, useAsync, cell, clampCursor } from "../ui.js";
+import { h, C, GLYPH, useAsync, clampCursor } from "../ui.js";
 
 const ENV_ORDER = ["prod", "staging", "dev", "other"];
 
+export const meta = {
+  keys: [
+    { k: "m", label: "model" },
+    { k: "p", label: "project" },
+    { k: "e", label: "env" },
+    { k: "enter", label: "save" },
+  ],
+};
+
 export function AddView({ client, ui, active }) {
   const projQ = useAsync(async () => (await client.listProjects()).data || [], []);
   const [modelStr, setModelStr] = React.useState("");
@@ -15,6 +24,8 @@ export function AddView({ client, ui, active }) {
   const projects = projQ.data || [];
   const project = projects[clampCursor(projectIdx, projects.length)] || null;
 
+  React.useEffect(() => ui?.reportStatus?.({ context: "add a usage" }), [ui]);
+
   async function setModel(value) {
     setModelStr(value);
     setResolved(null);
@@ -63,22 +74,33 @@ export function AddView({ client, ui, active }) {
     { isActive: active },
   );
 
-  const match = resolved?.model_id
-    ? h(Text, { color: "green" }, `→ ${resolved.display} (registry match)`)
+  const resolveLine = resolved?.model_id
+    ? h(Text, {}, h(Text, { color: "#16a34a" }, `  ${GLYPH.repl} ${resolved.display} (registry match)`))
     : modelStr
-      ? h(Text, { color: "gray" }, "→ will be tracked as a custom model")
+      ? h(Text, {}, h(Text, { color: C.FG_DIM }, `  ${GLYPH.repl} tracked as a custom model`))
       : null;
 
+  const field = (label, value, placeholder) =>
+    h(
+      Text,
+      {},
+      h(Text, { color: C.ACCENT }, `${label}  `),
+      value
+        ? h(Text, { color: C.FG }, value)
+        : h(Text, { color: C.FG_FAINT }, placeholder),
+    );
+
   return h(
     Box,
-    { flexDirection: "column" },
-    h(Text, { bold: true }, "Add a usage manually"),
+    { flexDirection: "column", borderStyle: "round", borderColor: C.BORDER, paddingX: 1 },
+    h(Text, { color: C.ACCENT, bold: true }, `${GLYPH.spark} Add a usage`),
+    h(Text, { color: C.FG_FAINT }, "Manually track a model you use — e.g. one the scanner can't see (a gateway, a notebook)."),
     h(Text, {}, ""),
-    h(Text, {}, h(Text, { color: "cyan" }, "model "), modelStr || h(Text, { color: "gray" }, "(press m to enter)")),
-    match,
-    h(Text, {}, h(Text, { color: "cyan" }, "project "), project ? project.name : h(Text, { color: "gray" }, "(new: Manual)")),
-    h(Text, {}, h(Text, { color: "cyan" }, "env "), ENV_ORDER[envIdx]),
+    field("model  ", modelStr, "(press m to type one)"),
+    resolveLine,
+    field("project", project ? project.name : "", "(new: Manual)"),
+    field("env    ", ENV_ORDER[envIdx], ""),
     h(Text, {}, ""),
-    h(Text, { color: "gray" }, "m model · p project · e env · enter/s save"),
+    h(Text, { color: C.FG_FAINT }, "m model · p project · e env · ↵ save   (auto-matched to the registry, else tracked as custom)"),
   );
 }

package/src/tui/views/alerts.js

@@ -1,12 +1,30 @@
 import React from "react";
 import { Box, Text, useInput } from "ink";
-import { h, useAsync, cell, clampCursor } from "../ui.js";
+import {
+  h, C, GLYPH, SubTabs, ListRow, StateLine, EmptyCard,
+  cell, cellE, SPINNER, useTick, useAsync, clampCursor,
+} from "../ui.js";
 
 const DELIVERY = ["immediate", "daily", "weekly"];
 const DEFAULT_EVENTS = ["model_deprecated", "model_retired", "replacement_set", "price_changed", "new_model"];
 const CHANNEL_KINDS = ["slack", "discord", "teams", "webhook", "sms"];
 
-export function AlertsView({ client, ui, active }) {
+// Readable label for a rule even when it has no name (seed/sample rules do):
+// fall back to what it watches, so the list never reads "(unnamed)".
+const SCOPE_WORD = { mine: "Models I use", providers: "Providers I use", all: "All models" };
+const ruleLabel = (r) => r.name || SCOPE_WORD[r.scope] || "Custom rule";
+
+// Channel kind → accent pill color.
+const KIND_COLOR = {
+  slack: "#a78bfa",
+  discord: "#5865f2",
+  teams: "#6264a7",
+  sms: C.ACCENT,
+  webhook: C.FG_DIM,
+};
+
+export function AlertsView({ client, ui, active, width = 78, height = 14 }) {
+  const ROWS = Math.max(3, height - 4); // subtabs + blank + footer overhead
   const [tab, setTab] = React.useState(0); // 0 rules, 1 channels
   const [cursor, setCursor] = React.useState(0);
   const rules = useAsync(async () => (await client.listRules()).data || [], []);
@@ -17,6 +35,14 @@ export function AlertsView({ client, ui, active }) {
   const list = tab === 0 ? ruleList : chanList;
   const cur = list[clampCursor(cursor, list.length)] || null;
 
+  const loading = tab === 0 ? rules.loading : channels.loading;
+  const tick = useTick(80, loading);
+
+  React.useEffect(
+    () => ui?.reportStatus?.({ context: `${ruleList.length} rules · ${chanList.length} chan` }),
+    [ruleList, chanList, ui],
+  );
+
   async function newRule() {
     try {
       await client.createRule({
@@ -102,59 +128,85 @@ export function AlertsView({ client, ui, active }) {
     { isActive: active },
   );
 
-  const tabs = h(
-    Box,
-    {},
-    h(Text, { color: tab === 0 ? "black" : "gray", backgroundColor: tab === 0 ? "cyan" : undefined }, " Rules "),
-    h(Text, { color: tab === 1 ? "black" : "gray", backgroundColor: tab === 1 ? "cyan" : undefined }, " Channels "),
-    h(Text, { color: "gray" }, "  (←/→ switch)"),
-  );
+  const subtabs = h(SubTabs, { idx: tab, tabs: ["Rules", "Channels"] });
 
   let body;
-  if (tab === 0) {
-    if (rules.loading) body = h(Text, { color: "gray" }, "Loading rules…");
-    else if (!ruleList.length) body = h(Text, { color: "gray" }, "No alert rules. Press n to create one.");
-    else
+  if (loading) {
+    body = h(StateLine, { kind: "loading", spin: SPINNER[tick % SPINNER.length], text: tab === 0 ? "loading rules…" : "loading channels…" });
+  } else if (tab === 0) {
+    if (!ruleList.length) {
+      body = h(EmptyCard, { title: "No alert rules", lines: ["A rule notifies you when models you use are deprecated/retired or get a replacement.", "Press n for a sensible default (your models · in-app + email · 90/30/7/1-day lead times)."], width });
+    } else {
+      const curIdx = clampCursor(cursor, ruleList.length);
+      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, 12).map((r, i) =>
-          h(
-            Text,
-            { key: r.id, inverse: i === clampCursor(cursor, ruleList.length), color: r.enabled ? "white" : "gray" },
-            `${r.enabled ? "✓" : "·"} ${cell(r.name || "(unnamed)", 26)} ${cell(r.delivery, 10)} ${(r.channels || []).join(",")}`,
-          ),
-        ),
+        ...ruleList.slice(0, ROWS).map((r, i) => {
+          const isCur = 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(" · ");
+          const cells = [
+            { text: `${enabled ? GLYPH.check : GLYPH.dot} `, color: enabled ? C.ACCENT : C.FG_FAINT },
+            { text: cellE(ruleLabel(r), 26), color: isCur ? C.FG_STRONG : enabled ? C.FG : C.FG_FAINT, bold: isCur },
+            { text: " ", color: C.FG },
+            { text: cell(r.delivery, 10), color: C.FG_DIM },
+            { text: " ", color: C.FG },
+            { text: cellE(chanText, rest), color: C.FG_DIM },
+          ];
+          return h(ListRow, { key: r.id, active: isCur, cells, width });
+        }),
       );
+    }
   } else {
-    if (channels.loading) body = h(Text, { color: "gray" }, "Loading channels…");
-    else if (!chanList.length) body = h(Text, { color: "gray" }, "No channels. Press n to add one (Pro).");
-    else
+    if (!chanList.length) {
       body = h(
         Box,
         { flexDirection: "column" },
-        ...chanList.slice(0, 12).map((c, i) =>
-          h(
-            Text,
-            { key: c.id, inverse: i === clampCursor(cursor, chanList.length) },
-            `${cell(c.kind, 10)} ${cell(c.label || c.value, 40)}`,
-          ),
-        ),
+        h(EmptyCard, { title: "No channels", lines: ["Press n to add one (Pro)."], width }),
+        h(Text, { color: "#d97706" }, "  Slack/Discord/SMS/webhook channels need Pro — press 6 → u to upgrade."),
       );
+    } else {
+      const curIdx = clampCursor(cursor, chanList.length);
+      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;
+          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 },
+          ];
+          return h(ListRow, { key: c.id, active: isCur, cells, width });
+        }),
+      );
+    }
   }
 
-  const footer =
-    tab === 0
-      ? "←/→ tab · ↑↓ move · n new · space enable · c cadence · d delete · g refresh"
-      : "←/→ tab · ↑↓ move · n add · t test · g refresh";
-
+  const hint = tab === 0
+    ? "  Rules watch the registry — deprecations · retirements · replacements · new models — and alert your channels."
+    : "  Channels deliver alerts: Slack/Discord/SMS/webhook are Pro; in-app + email are always on.";
   return h(
     Box,
     { flexDirection: "column" },
-    tabs,
-    h(Text, {}, ""),
+    subtabs,
+    h(Text, { color: C.FG_FAINT }, cellE(hint, width)),
     body,
-    h(Text, {}, ""),
-    h(Text, { color: "gray" }, footer),
   );
 }
+
+export const meta = {
+  keys: [
+    { k: "←→", label: "tab" },
+    { k: "↑↓", label: "nav" },
+    { k: "n", label: "new" },
+    { k: "space", label: "enable" },
+    { k: "c", label: "cadence" },
+    { k: "t", label: "test" },
+    { k: "d", label: "delete" },
+    { k: "g", label: "refresh" },
+  ],
+};

package/src/tui/views/inventory.js

@@ -1,21 +1,61 @@
+/* Inventory view — your tracked usages across projects. Body-only: the shell
+ * (app.js) owns window chrome, status bar (fed by reportStatus) and keybar.
+ * Two-pane layout: a health-glyph'd usage list on the left, a detail drawer on
+ * the right for the cursor row. Data loading + key handlers are unchanged. */
 import React from "react";
+import path from "node:path";
 import { Box, Text, useInput } from "ink";
-import { h, useAsync, healthColor, healthGlyph, cell, clampCursor } from "../ui.js";
+import {
+  h, C, GLYPH, ListRow, StateLine, EmptyCard, healthColor, healthGlyph,
+  relativeTime, envTag, cell, cellE, snippetLines, SPINNER, useTick, useAsync, clampCursor,
+} from "../ui.js";
+import { readSnippet } from "../snippet.js";
 
 const ENV_ORDER = ["prod", "staging", "dev", "other"];
 
-export function InventoryView({ client, ui, active }) {
+export const meta = {
+  keys: [
+    { k: "↑↓", label: "nav" },
+    { k: "e", label: "env" },
+    { k: "c", label: "critical" },
+    { k: "d", label: "delete" },
+    { k: "r", label: "rescan" },
+    { k: "n", label: "new" },
+    { k: "g", label: "refresh" },
+  ],
+};
+
+export function InventoryView({ client, ui, dir = ".", active, width = 78, height = 14 }) {
   const q = useAsync(async () => {
     const [u, p] = await Promise.all([client.listUsages(), client.listProjects()]);
     return { usages: u.data || [], projects: p.data || [] };
   }, []);
   const [cursor, setCursor] = React.useState(0);
+  const tick = useTick(80, q.loading);
+  const spin = SPINNER[tick % SPINNER.length];
 
   const usages = q.data?.usages || [];
   const projects = q.data?.projects || [];
   const projName = (id) => projects.find((p) => p.id === id)?.name || "—";
   const cur = usages[clampCursor(cursor, usages.length)] || null;
 
+  // Drill-down code preview for the highlighted usage's source location — same
+  // syntax-highlighted snippet as the Here tab, shown below the list (the side
+  // drawer stays). Reads the local file at source_path:source_line if present;
+  // keyed on scalar fields so it isn't re-read from disk on every re-render.
+  const matchStr = cur ? (cur.custom_model_name || (cur.model_display || "").split("/").pop() || cur.model_display) : null;
+  const snippet = React.useMemo(() => {
+    if (!cur || !cur.source_path) return null;
+    return readSnippet(path.resolve(dir, cur.source_path), cur.source_line, matchStr);
+  }, [cur?.source_path, cur?.source_line, matchStr, dir]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Push health legend + tracked context up to the shell status bar.
+  React.useEffect(() => {
+    const counts = { ok: 0, deprecating: 0, retiring: 0, retired: 0, custom: 0 };
+    for (const u of usages) if (counts[u.health] != null) counts[u.health] += 1;
+    ui?.reportStatus?.({ counts, context: `${usages.length} tracked` });
+  }, [usages, ui]);
+
   async function patch(u, body, label) {
     try {
       await client.patchUsage(u.id, body);
@@ -50,53 +90,115 @@ export function InventoryView({ client, ui, active }) {
     { isActive: active },
   );
 
-  if (q.loading) return h(Text, { color: "gray" }, "Loading inventory…");
-  if (q.error) return h(Text, { color: "red" }, `Error: ${q.error}`);
+  if (q.loading) return h(StateLine, { kind: "loading", spin, text: "loading inventory…" });
+  if (q.error) return h(StateLine, { kind: "error", text: q.error });
   if (!usages.length)
-    return h(
-      Box,
-      { flexDirection: "column" },
-      h(Text, { color: "gray" }, "No tracked usages yet."),
-      h(Text, { color: "gray" }, "Press 2 to Scan a repo, or n to Add one manually."),
-    );
-
-  const view = usages.slice(0, 16);
+    return h(EmptyCard, {
+      icon: GLYPH.spark,
+      title: "No tracked usages yet",
+      lines: ["Press 4 Scan to import a repo, or 5 Add to enter one."],
+      width,
+    });
+
+  // ----- layout: left list pane + right detail drawer -----
+  const drawerW = 34;
+  const leftWidth = Math.max(24, width - drawerW - 2);
+  // left columns: glyph(2) + slug + sp(1) + env(7) + sp(1) + project; rail is col 1.
+  const ENV_W = 7;
+  const FIXED = 2 + 1 + ENV_W + 1; // glyph+sp, sp, env, sp
+  const slugW = Math.max(10, Math.floor((leftWidth - 1 - FIXED) * 0.5));
+  const projW = Math.max(8, leftWidth - 1 - FIXED - slugW);
+
+  // Preview block below the list+drawer: the syntax-highlighted source snippet
+  // when the file is readable locally, else a one-line note (the usage may be
+  // sample data, or its code lives on another machine — the preview reads the
+  // LOCAL file at source_path). Reserve rows only with room to keep the bordered
+  // drawer (~11 rows) intact, so small terminals never overflow + scroll.
+  const srcRef = cur && cur.source_path ? `${cur.source_path}${cur.source_line ? ":" + cur.source_line : ""}` : null;
+  const SNIP = snippet ? Math.max(0, Math.min(8, height - 12)) : 0;
+  const showSnip = SNIP >= 3; // sep + header + ≥1 code line
+  const showNote = !showSnip && !!srcRef && height >= 14; // has a path but no local file
+  const reserve = showSnip ? SNIP : showNote ? 2 : 0;
+  const topH = height - reserve;
+  const VISIBLE = Math.max(3, topH - 2); // header + "…and N more" overhead
+  const c = clampCursor(cursor, usages.length);
+  const start = Math.max(0, Math.min(c - Math.floor(VISIBLE / 2), Math.max(0, usages.length - VISIBLE)));
+  const view = usages.slice(start, start + VISIBLE);
+
+  const header = h(
+    Text,
+    { color: C.FG_FAINT },
+    " " + cell("MODEL", 2 + slugW) + cell("ENV", 1 + ENV_W) + "PROJECT",
+  );
+
+  const rowNodes = view.map((u, i) => {
+    const isCur = start + i === c;
+    const et = envTag(u.environment);
+    const slug = u.model_display || u.custom_model_name || "?";
+    const cells = [
+      { text: `${healthGlyph(u.health)} `, color: healthColor(u.health) },
+      { text: cellE(slug, slugW), color: isCur ? C.FG_STRONG : C.FG, bold: isCur },
+      { text: " ", color: C.FG },
+      { text: cell(et.text, ENV_W), color: et.color },
+      { text: " ", color: C.FG },
+      { text: cellE(projName(u.project_id), projW), color: C.FG_DIM },
+    ];
+    return h(ListRow, { key: u.id, active: isCur, cells, width: leftWidth });
+  });
+
+  const list = h(
+    Box,
+    { flexDirection: "column", width: leftWidth },
+    header,
+    ...rowNodes,
+    usages.length > VISIBLE
+      ? h(Text, { color: C.FG_FAINT }, `  ${start + 1}-${Math.min(start + VISIBLE, usages.length)} of ${usages.length}`)
+      : null,
+  );
+
+  // ----- detail drawer (cursor usage) -----
+  const rt = cur?.retires_date ? relativeTime(cur.retires_date) : null;
+  const where = cur?.location_label || cur?.source_path || "—";
+  const drawer = h(
+    Box,
+    { borderStyle: "round", borderColor: C.BORDER, paddingX: 1, flexDirection: "column", minWidth: drawerW },
+    h(Text, { color: C.ACCENT, bold: true }, " DETAIL "),
+    cur
+      ? h(
+          Box,
+          { flexDirection: "column" },
+          h(Text, { color: C.FG_STRONG, bold: true }, cur.model_display || cur.custom_model_name || "?"),
+          h(
+            Text,
+            {},
+            h(Text, { color: healthColor(cur.health) }, `${healthGlyph(cur.health)} ${cur.health}`),
+          ),
+          h(
+            Text,
+            {},
+            h(Text, { color: C.FG_DIM }, "env "),
+            h(Text, { color: envTag(cur.environment).color }, cur.environment),
+            cur.is_critical ? h(Text, { color: "#ea580c" }, `  ${GLYPH.crit} critical`) : null,
+          ),
+          h(Text, {}, h(Text, { color: C.FG_DIM }, "project "), h(Text, { color: C.FG }, projName(cur.project_id))),
+          h(Text, {}, h(Text, { color: C.FG_DIM }, "where "), h(Text, { color: C.FG_DIM }, where)),
+          rt && rt.text
+            ? h(Text, {}, h(Text, { color: C.FG_DIM }, "retires "), h(Text, { color: rt.color, bold: rt.bold }, rt.text))
+            : null,
+          cur.replacement_slug
+            ? h(Text, { color: "#16a34a" }, `${GLYPH.repl} ${cur.replacement_slug}`)
+            : null,
+          cur.discovered_by ? h(Text, { color: C.FG_FAINT }, `via ${cur.discovered_by}`) : null,
+        )
+      : h(Text, { color: C.FG_DIM }, "—"),
+  );
+
   return h(
     Box,
-    {},
-    // List
-    h(
-      Box,
-      { flexDirection: "column", width: 64 },
-      h(Text, { color: "gray" }, `${cell("MODEL", 24)} ${cell("ENV", 8)} PROJECT`),
-      ...view.map((u, i) =>
-        h(
-          Text,
-          { key: u.id, inverse: i === clampCursor(cursor, usages.length), color: healthColor(u.health) },
-          `${healthGlyph(u.health)} ${cell(u.model_display || u.custom_model_name || "?", 22)} ${cell(u.environment, 8)} ${projName(u.project_id)}`,
-        ),
-      ),
-      usages.length > 16 ? h(Text, { color: "gray" }, `…and ${usages.length - 16} more`) : null,
-    ),
-    // Detail
-    h(
-      Box,
-      { flexDirection: "column", marginLeft: 2, borderStyle: "round", borderColor: "gray", paddingX: 1, minWidth: 36 },
-      cur
-        ? h(
-            Box,
-            { flexDirection: "column" },
-            h(Text, { bold: true }, cur.model_display || cur.custom_model_name || "?"),
-            h(Text, { color: healthColor(cur.health) }, `health: ${cur.health}`),
-            h(Text, {}, `env: ${cur.environment}${cur.is_critical ? "  ·  ⚑ critical" : ""}`),
-            h(Text, { color: "gray" }, `project: ${projName(cur.project_id)}`),
-            h(Text, { color: "gray" }, `where: ${cur.location_label || cur.source_path || "—"}`),
-            cur.retires_date ? h(Text, { color: "magenta" }, `retires: ${cur.retires_date}`) : null,
-            h(Text, { color: "gray" }, `via: ${cur.discovered_by}`),
-          )
-        : h(Text, { color: "gray" }, "—"),
-    ),
+    { flexDirection: "column" },
+    h(Box, { flexDirection: "row" }, list, h(Box, { width: 2 }), drawer),
+    showSnip || showNote ? h(Text, { color: C.BORDER }, "─".repeat(width)) : null,
+    ...(showSnip ? snippetLines(snippet, width, SNIP - 2) : []),
+    showNote ? h(Text, { color: C.FG_FAINT }, cellE(`  ↳ ${srcRef} — not found in this directory; open the repo to preview the code`, width)) : null,
   );
 }
-
-export const inventoryFooter = "↑↓ move · e env · c critical · d delete · r rescan · n new · g refresh";