interference-agent 0.1.0 → 0.2.3

package/src/tui/App.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { Box, Text, Static, useInput, useApp } from "ink";
-import { Spinner } from "@inkjs/ui";
+import { Spinner } from "./Spinner.tsx";
 import TextInput from "ink-text-input";
 import type { ModelMessage } from "ai";
 import { runTurn } from "../agent/loop.ts";
@@ -34,7 +34,10 @@ import { QuestionDialog } from "./QuestionDialog.tsx";
 import { setAnswerHandler, type QuestionSpec, type Answers } from "../tools/question.ts";
 import { ToolStep } from "./ToolStep.tsx";
 import { MarkdownText } from "./MarkdownText.tsx";
-import { USER_BAR, ASSISTANT_BAR } from "./theme.ts";
+import { reasoningSummary } from "./reasoning.ts";
+import { placeholderFor } from "./placeholders.ts";
+import { checkForUpdate, CURRENT_VERSION } from "../version.ts";
+import { USER_BAR, ASSISTANT_BAR, THINKING, THINKING_BODY } from "./theme.ts";
 import { Panel } from "./Panel.tsx";
 
 type HistoryItem = {
@@ -77,6 +80,8 @@ export default function App({ session }: { session: Session }) {
   const [gitBranch, setGitBranch] = useState("");
   const [todos, setTodosState] = useState<Todo[]>(session.todos ?? []);
   const [questions, setQuestions] = useState<QuestionSpec[] | null>(null);
+  const [phIdx, setPhIdx] = useState(0); // indice esempio placeholder (it. 25)
+  const [update, setUpdate] = useState<string | null>(null); // versione più recente (it. 28)
   const { toasts, addToast } = useToast();
   const confirmResolveRef = useRef<((v: boolean) => void) | null>(null);
   const answerResolveRef = useRef<((a: Answers) => void) | null>(null);
@@ -86,6 +91,11 @@ export default function App({ session }: { session: Session }) {
 
   useEffect(() => { sessionRef.current = session; }, [session]);
 
+  // Controllo aggiornamenti (it. 28): non bloccante, throttled, silenzioso offline.
+  useEffect(() => {
+    checkForUpdate().then(setUpdate).catch(() => {});
+  }, []);
+
   // Todos: ripristina dalla sessione e ri-renderizza ad ogni update del tool.
   useEffect(() => {
     setTodos(session.todos ?? []);
@@ -182,6 +192,12 @@ export default function App({ session }: { session: Session }) {
 
   const nextId = (): number => Date.now() + Math.random();
 
+  // Titolo leggibile dal primo messaggio (collassa spazi, cap ~40 char).
+  const deriveTitle = (text: string): string => {
+    const t = text.replace(/\s+/g, " ").trim();
+    return t.length > 40 ? t.slice(0, 40).trimEnd() + "…" : t;
+  };
+
   async function doCompact() {
     const pct = getUsagePercent(messagesRef.current);
     if (!shouldCompact(messagesRef.current)) {
@@ -216,6 +232,10 @@ export default function App({ session }: { session: Session }) {
     setHistory((h) => [...h, userMsg]);
 
     nextTurn();
+    // Auto-title alla prima interazione (se non già rinominata dall'utente).
+    if (!sessionRef.current.meta.title) {
+      sessionRef.current.meta.title = deriveTitle(userText);
+    }
     messagesRef.current.push({ role: "user", content: userText });
     aborterRef.current = new AbortController();
     let acc = "";
@@ -320,6 +340,7 @@ export default function App({ session }: { session: Session }) {
       setReasoning("");
       setToolSteps([]);
       setBusy(false);
+      setPhIdx((i) => i + 1); // ruota l'esempio del placeholder
       aborterRef.current = null;
 
       if (messageQueue.length > 0) {
@@ -444,7 +465,7 @@ ${args ? `Additional context: ${args}` : ""}`;
             return "";
           },
           doRename: async (name) => {
-            sessionRef.current.meta.id = name;
+            sessionRef.current.meta.title = name;
             await saveSession(sessionRef.current);
             return `Session renamed to '${name}'.`;
           },
@@ -487,20 +508,36 @@ ${args ? `Additional context: ${args}` : ""}`;
               messagesRef.current = loaded.messages;
               sessionRef.current = loaded;
               setTodos(loaded.todos ?? []);
-              // Rebuild history from messages
+              // Ricostruisci la history dai messaggi salvati. Il content può essere
+              // una stringa o un ARRAY di parti ({type:"text"|"reasoning"|...}):
+              // estraiamo testo e reasoning invece di stringificare (era reso come JSON grezzo).
               const items: HistoryItem[] = [];
               let nid = Date.now();
               for (const m of loaded.messages) {
-                if (m.role === "user" || m.role === "assistant") {
-                  const content = typeof m.content === "string" ? m.content : JSON.stringify(m.content);
-                  items.push({ id: nid++, role: m.role as "user" | "assistant", content });
+                if (m.role !== "user" && m.role !== "assistant") continue;
+                let text = "";
+                let reasoning = "";
+                if (typeof m.content === "string") {
+                  text = m.content;
+                } else if (Array.isArray(m.content)) {
+                  for (const p of m.content as Array<{ type?: string; text?: string }>) {
+                    if (p?.type === "text" && p.text) text += p.text;
+                    else if (p?.type === "reasoning" && p.text) reasoning += p.text;
+                  }
                 }
+                if (!text && !reasoning) continue; // salta i messaggi solo-tool
+                items.push({
+                  id: nid++,
+                  role: m.role as "user" | "assistant",
+                  content: text,
+                  reasoning: reasoning || undefined,
+                });
               }
               setHistory(items);
               setStreaming("");
               setReasoning("");
               setToolSteps([]);
-              addToast(`Resumed session ${id.slice(0, 12)} (${loaded.meta.turnCount} turns)`, "success");
+              addToast(`Resumed '${loaded.meta.title || id.slice(0, 12)}' (${loaded.meta.turnCount} turns)`, "success");
             } else {
               addToast(`Session ${id.slice(0, 12)} not found`, "error");
             }
@@ -537,6 +574,7 @@ ${args ? `Additional context: ${args}` : ""}`;
               provider={currentProvider().label}
               model={currentModel()}
               sessionCount={0}
+              update={update}
             />
           )}
 
@@ -592,6 +630,13 @@ ${args ? `Additional context: ${args}` : ""}`;
             <SlashAutocomplete filter={draft.slice(1)} selected={acIdx} />
           )}
 
+          {/* Avviso comandi/stato: subito SOPRA l'input (stile opencode), non nel footer */}
+          {statusText && !confirmPreview && !questions && !showSessions && (
+            <Box paddingLeft={1}>
+              <Text dimColor>{statusText}</Text>
+            </Box>
+          )}
+
           {!confirmPreview && !questions && !showSessions && (
             <Box borderStyle="round" borderColor="gray" paddingX={1}>
               <Text color="white" bold>{"› "}</Text>
@@ -601,7 +646,7 @@ ${args ? `Additional context: ${args}` : ""}`;
                   if (val !== draft) setAcIdx(0);
                   setDraft(val);
                 }}
-                placeholder={busy ? `working… (${messageQueue.length} queued)` : "Type a message (/ for commands)"}
+                placeholder={busy ? `working… (${messageQueue.length} queued)` : placeholderFor(sessionRef.current.meta.mode, phIdx)}
                 onSubmit={onSubmit}
               />
             </Box>
@@ -614,7 +659,7 @@ ${args ? `Additional context: ${args}` : ""}`;
             thinking={currentThinking()}
             contextPct={messagesRef.current.length > 0 ? getUsagePercent(messagesRef.current) : 0}
             busy={busy}
-            statusLine={statusText}
+            statusLine=""
             turnCount={sessionRef.current.meta.turnCount}
             cost={formatCost(getTotalCost())}
             gitBranch={gitBranch}
@@ -657,7 +702,9 @@ function RoleBlock({
   );
 }
 
-function ReasoningBlock({ text, live }: { text: string; live?: boolean }) {
+// Fase PENSIERO: header ambra "✻ Thinking/Thought · durata" + corpo attenuato.
+// Distinta dall'esecuzione (icone tool, bianco) e dalla risposta (markdown bianco pieno).
+function ReasoningBlock({ text, live, ms }: { text: string; live?: boolean; ms?: number }) {
   const [elapsed, setElapsed] = useState(0);
 
   useEffect(() => {
@@ -667,25 +714,23 @@ function ReasoningBlock({ text, live }: { text: string; live?: boolean }) {
     return () => clearInterval(timer);
   }, [live]);
 
-  const shown = live
-    ? text.length > 500 ? "…" + text.slice(-500) : text
-    : text.length > 600 ? text.slice(0, 600) + " …" : text;
+  const title = reasoningSummary(text);
+  const titlePart = title ? `: ${title}` : live ? "…" : "";
+  const header = live
+    ? `✻ Thinking${titlePart}${elapsed > 0 ? ` · ${elapsed}s` : ""}`
+    : `✻ Thought${titlePart}${ms ? ` · ${(ms / 1000).toFixed(1)}s` : ""}`;
+
+  // Live: coda in streaming. History: testo dall'inizio, capato.
+  const body = live
+    ? text.length > 400 ? "…" + text.slice(-400) : text
+    : text.length > 700 ? text.slice(0, 700) + " …" : text;
 
   return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      borderColor="gray"
-      borderTop={false}
-      borderRight={false}
-      borderBottom={false}
-      paddingLeft={1}
-      marginBottom={1}
-    >
-      <Text dimColor bold>
-        ┄ thinking{live && elapsed > 0 ? ` ${elapsed}s` : ""}
+    <Box flexDirection="column" paddingLeft={3} marginBottom={1}>
+      <Text color={THINKING} bold>
+        {header}
       </Text>
-      <Text dimColor>{shown}</Text>
+      <Text color={THINKING_BODY}>{body}</Text>
     </Box>
   );
 }
@@ -702,9 +747,7 @@ function MsgBlock({ item }: { item: HistoryItem }) {
   }
   return (
     <Box flexDirection="column">
-      {item.reasoning && (
-        <Text dimColor>┄ thought{item.reasoningMs ? ` · ${secs(item.reasoningMs)}` : ""}</Text>
-      )}
+      {item.reasoning && <ReasoningBlock text={item.reasoning} ms={item.reasoningMs} />}
       <RoleBlock
         color={ASSISTANT_BAR}
         content={item.content}

package/src/tui/ConfirmDialog.tsx

@@ -1,5 +1,6 @@
 import { useState, type FC } from "react";
 import { Box, Text, useInput } from "ink";
+import { BG_ELEMENT } from "./theme.ts";
 
 interface Props {
   tool: string;
@@ -33,11 +34,19 @@ export const ConfirmDialog: FC<Props> = ({ tool, preview, onResolve }) => {
         <Text dimColor>{preview.slice(0, 300)}</Text>
       </Box>
       <Box gap={2}>
-        <Text color={selected === "allow" ? "green" : undefined} bold={selected === "allow"}>
-          {selected === "allow" ? "▸ Allow" : "  Allow"}
+        <Text
+          backgroundColor={selected === "allow" ? BG_ELEMENT : undefined}
+          color={selected === "allow" ? "green" : undefined}
+          bold={selected === "allow"}
+        >
+          {" Allow "}
         </Text>
-        <Text color={selected === "deny" ? "red" : undefined} bold={selected === "deny"}>
-          {selected === "deny" ? "▸ Deny" : "  Deny"}
+        <Text
+          backgroundColor={selected === "deny" ? BG_ELEMENT : undefined}
+          color={selected === "deny" ? "red" : undefined}
+          bold={selected === "deny"}
+        >
+          {" Deny "}
         </Text>
         <Text dimColor>(←→ arrows, Enter, y/n)</Text>
       </Box>

package/src/tui/DiffView.tsx

@@ -1,19 +1,25 @@
 export interface DiffLine {
   type: "same" | "add" | "remove";
   text: string;
+  oldNo?: number; // numero riga nel file vecchio (1-based) — same/remove
+  newNo?: number; // numero riga nel file nuovo (1-based) — same/add
 }
 
 export function computeDiff(oldLines: string[], newLines: string[]): DiffLine[] {
   const result: DiffLine[] = [];
   let oi = 0;
   let ni = 0;
+  // Numeri di riga 1-based: oi/ni sono indici 0-based → +1 al push.
+  const same = (t: string) => result.push({ type: "same", text: t, oldNo: oi + 1, newNo: ni + 1 });
+  const rem = (t: string) => result.push({ type: "remove", text: t, oldNo: oi + 1 });
+  const add = (t: string) => result.push({ type: "add", text: t, newNo: ni + 1 });
 
   while (oi < oldLines.length && ni < newLines.length) {
     const old = oldLines[oi]!;
     const nw = newLines[ni]!;
 
     if (old === nw) {
-      result.push({ type: "same", text: old });
+      same(old);
       oi++;
       ni++;
       continue;
@@ -21,32 +27,32 @@ export function computeDiff(oldLines: string[], newLines: string[]): DiffLine[]
 
     const oldEnd = findEnd(oldLines, newLines, oi, ni);
     if (oldEnd.oi === oi) {
-      result.push({ type: "add", text: nw });
+      add(nw);
       ni++;
       continue;
     }
     if (oldEnd.ni === ni) {
-      result.push({ type: "remove", text: old });
+      rem(old);
       oi++;
       continue;
     }
 
     while (oi < oldEnd.oi) {
-      result.push({ type: "remove", text: oldLines[oi]! });
+      rem(oldLines[oi]!);
       oi++;
     }
     while (ni < oldEnd.ni) {
-      result.push({ type: "add", text: newLines[ni]! });
+      add(newLines[ni]!);
       ni++;
     }
   }
 
   while (oi < oldLines.length) {
-    result.push({ type: "remove", text: oldLines[oi]! });
+    rem(oldLines[oi]!);
     oi++;
   }
   while (ni < newLines.length) {
-    result.push({ type: "add", text: newLines[ni]! });
+    add(newLines[ni]!);
     ni++;
   }
 
@@ -71,17 +77,11 @@ function findEnd(
 
 export function formatDiff(diff: DiffLine[]): string {
   const lines: string[] = [];
+  const no = (n?: number) => String(n ?? "").padStart(4, " ");
   for (const d of diff.slice(0, 80)) {
-    switch (d.type) {
-      case "add":
-        lines.push(`+ ${d.text}`);
-        break;
-      case "remove":
-        lines.push(`- ${d.text}`);
-        break;
-      default:
-        lines.push(`  ${d.text}`);
-    }
+    const num = d.type === "add" ? no(d.newNo) : no(d.oldNo);
+    const mark = d.type === "add" ? "+" : d.type === "remove" ? "-" : " ";
+    lines.push(`${num} ${mark} ${d.text}`);
   }
   if (diff.length > 80) lines.push(`… and ${diff.length - 80} more lines`);
   return lines.join("\n");

package/src/tui/MarkdownText.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import type { ReactNode } from "react";
+import { tokenizeLine, normalizeLang } from "./syntax.ts";
 
 // Rendering markdown minimale per il terminale (no dipendenze):
 // - fenced code ``` → blocco dim
@@ -32,14 +33,35 @@ export function MarkdownText({ content }: { content: string }) {
   const lines = content.split("\n");
   const blocks: ReactNode[] = [];
   let inFence = false;
+  let lang = "";
+  let fenceLines = 0;
 
   lines.forEach((line, i) => {
-    if (line.trimStart().startsWith("```")) {
-      inFence = !inFence;
+    const t = line.trimStart();
+    if (t.startsWith("```")) {
+      if (!inFence) {
+        inFence = true;
+        lang = normalizeLang(t.slice(3));
+        fenceLines = 0;
+      } else {
+        inFence = false;
+        lang = "";
+      }
       return; // nascondi i marker di fence
     }
     if (inFence) {
-      blocks.push(<Text key={i} dimColor>  {line}</Text>);
+      if (++fenceLines > 200) return; // cap di sicurezza
+      const toks = tokenizeLine(line, lang);
+      blocks.push(
+        <Text key={i}>
+          {"  "}
+          {toks.map((tk, j) => (
+            <Text key={j} color={tk.color} dimColor={tk.dim}>
+              {tk.text}
+            </Text>
+          ))}
+        </Text>,
+      );
       return;
     }
     const heading = /^(#{1,6})\s+(.*)$/.exec(line);

package/src/tui/ModelPicker.tsx

@@ -1,6 +1,7 @@
 import { useState, type FC } from "react";
 import { Box, Text, useInput } from "ink";
 import { currentModel, setModel, setProvider, PROVIDERS, type ProviderId } from "../config.ts";
+import { SelectRow } from "./SelectRow.tsx";
 
 export const ModelPicker: FC<{ onCancel: () => void }> = ({ onCancel }) => {
   const current = currentModel();
@@ -30,13 +31,13 @@ export const ModelPicker: FC<{ onCancel: () => void }> = ({ onCancel }) => {
     <Box flexDirection="column" borderStyle="round" borderColor="blue" padding={1}>
       <Box marginBottom={1}><Text bold>Select model</Text></Box>
       {flat.map((m, i) => (
-        <Box key={m.id}>
-          <Text color={i === idx ? "cyan" : undefined} bold={i === idx}>
-            {i === idx ? "▸ " : "  "}{m.label}
-          </Text>
-          <Text dimColor> · {m.provider}</Text>
-          {m.id === current && <Text color="cyan"> (active)</Text>}
-        </Box>
+        <SelectRow
+          key={m.id}
+          label={m.label}
+          meta={`· ${m.provider}`}
+          selected={i === idx}
+          current={m.id === current}
+        />
       ))}
       <Box marginTop={1}><Text dimColor>↑↓ j/k navigate · Enter select · Esc cancel</Text></Box>
     </Box>

package/src/tui/Panel.tsx

@@ -1,35 +1,39 @@
 import { Box, Text, useStdout } from "ink";
-import { PANEL, padRight, panelWidth } from "./theme.ts";
+import { BG_PANEL, BG_ELEMENT, padRight, panelWidth } from "./theme.ts";
 
 // Pannello con sfondo REALE: ogni riga è un <Text backgroundColor> riempito di
 // spazi fino alla larghezza, così il colore si vede (il bg dei <Box> in Ink non
 // riempie il padding). Barra laterale opzionale come primo carattere della riga.
+// level: "element" (#1e1e1e, messaggi/selezione) | "panel" (#141414, blocchi/dialog).
 export function Panel({
   content,
   bar,
   barColor,
   bold,
+  level = "element",
 }: {
   content: string;
   bar?: string;
   barColor?: string;
   bold?: boolean;
+  level?: "panel" | "element";
 }) {
   const { stdout } = useStdout();
   const w = panelWidth(stdout?.columns);
+  const bg = level === "panel" ? BG_PANEL : BG_ELEMENT;
   const prefix = bar ? `${bar} ` : "";
   const lines = content.split("\n");
 
   return (
     <Box flexDirection="column" marginBottom={1}>
       {lines.map((ln, i) => (
-        <Text key={i} backgroundColor={PANEL} color="white" bold={bold}>
+        <Text key={i} backgroundColor={bg} color="white" bold={bold}>
           {bar && i === 0 ? (
-            <Text backgroundColor={PANEL} color={barColor} bold>
+            <Text backgroundColor={bg} color={barColor} bold>
               {prefix}
             </Text>
           ) : (
-            <Text backgroundColor={PANEL}>{bar ? "  " : ""}</Text>
+            <Text backgroundColor={bg}>{bar ? "  " : ""}</Text>
           )}
           {padRight(ln, w - prefix.length)}
         </Text>

package/src/tui/SelectRow.tsx

@@ -0,0 +1,40 @@
+import { Text, useStdout } from "ink";
+import { BG_ELEMENT, padRight, panelWidth } from "./theme.ts";
+
+// Riga di selezione stile opencode (it. 24): selezione = sfondo a riga piena,
+// `●` per il valore corrente (vs `  `). Niente pointer `▸`.
+export function SelectRow({
+  label,
+  meta,
+  selected,
+  current,
+  color = "white",
+}: {
+  label: string;
+  meta?: string;
+  selected: boolean;
+  current?: boolean;
+  color?: string;
+}) {
+  const { stdout } = useStdout();
+  const w = Math.min(panelWidth(stdout?.columns), 72);
+  const marker = current ? "● " : "  ";
+
+  if (selected) {
+    const text = `${marker}${label}${meta ? "  " + meta : ""}`;
+    return (
+      <Text backgroundColor={BG_ELEMENT} color="white" bold>
+        {padRight(text, w)}
+      </Text>
+    );
+  }
+  return (
+    <Text>
+      <Text color={current ? color : undefined} bold={current}>
+        {marker}
+        {label}
+      </Text>
+      {meta ? <Text dimColor>{"  " + meta}</Text> : null}
+    </Text>
+  );
+}

package/src/tui/SessionList.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, type FC } from "react";
 import { Box, Text, useInput } from "ink";
 import { listSessions, loadSession, type SessionMeta } from "../session/store.ts";
+import { SelectRow } from "./SelectRow.tsx";
 
 interface Props {
   onSelect: (sessionId: string) => void;
@@ -56,13 +57,11 @@ export const SessionList: FC<Props> = ({ onSelect, onCancel }) => {
         <Text bold>Sessions ({sessions.length})</Text>
       </Box>
       {sessions.slice(0, PAGE_SIZE).map((s, i) => (
-        <Box key={s.id}>
-          <Text color={i === idx ? "cyan" : undefined} bold={i === idx}>
-            {i === idx ? "▸" : " "}
-          </Text>
-          <Text dimColor>{s.id.slice(0, 12)}</Text>
-          <Text> {s.mode} · {s.turnCount}t · {s.updatedAt.slice(0, 10)}</Text>
-        </Box>
+        <SelectRow
+          key={s.id}
+          label={s.title || `(untitled ${s.id.slice(0, 8)})`}
+          selected={i === idx}
+        />
       ))}
       <Box marginTop={1}>
         <Text dimColor>↑↓ j/k navigate · Enter select · Esc/q cancel</Text>

package/src/tui/Spinner.tsx

@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+import { Text } from "ink";
+
+// Spinner d'interferenza (it. 26), eco del mark animato del brand
+// (logo/interference-mark-animated.svg): due sorgenti `◉` i cui fronti d'onda `‹ ›`
+// si espandono verso il centro e interferiscono in `✕`, poi svaniscono e ripartono.
+// Tutti i frame larghi 7 → niente jitter.
+const FRAMES = [
+  "◉     ◉",
+  "◉‹   ›◉",
+  "◉‹‹ ››◉",
+  "◉‹‹✕››◉",
+  "◉‹ ✕ ›◉",
+  "◉  ✕  ◉",
+  "◉  ·  ◉",
+];
+
+// Variante compatta (3 col) per le righe inline dei tool.
+const FRAMES_INLINE = ["‹✕›", "·✕·", " ✕ ", "‹ ›"];
+
+function useFrame(frames: string[], ms: number): string {
+  const [i, setI] = useState(0);
+  useEffect(() => {
+    const t = setInterval(() => setI((x) => (x + 1) % frames.length), ms);
+    return () => clearInterval(t);
+  }, [frames, ms]);
+  return frames[i]!;
+}
+
+export function Spinner({ label }: { label?: string }) {
+  const frame = useFrame(FRAMES, 110);
+  return (
+    <Text>
+      <Text color="white">{frame}</Text>
+      {label ? <Text dimColor>{" " + label}</Text> : null}
+    </Text>
+  );
+}
+
+export function SpinnerInline() {
+  const frame = useFrame(FRAMES_INLINE, 130);
+  return <Text dimColor>{frame}</Text>;
+}

package/src/tui/ThinkingPicker.tsx

@@ -1,6 +1,7 @@
 import { useState, type FC } from "react";
 import { Box, Text, useInput } from "ink";
 import { currentProvider, currentThinking, type ThinkingLevel } from "../config.ts";
+import { SelectRow } from "./SelectRow.tsx";
 
 interface Props {
   onSelect: (level: ThinkingLevel) => void;
@@ -40,14 +41,13 @@ export const ThinkingPicker: FC<Props> = ({ onSelect, onCancel }) => {
         <Text bold>Thinking level · {provider.label}</Text>
       </Box>
       {levels.map((l, i) => (
-        <Box key={l}>
-          <Text color={i === idx ? "magenta" : undefined} bold={i === idx}>
-            {i === idx ? "▸ " : "  "}
-            {l}
-          </Text>
-          {l === current && <Text dimColor> (current)</Text>}
-          {HINT[l] && <Text dimColor> — {HINT[l]}</Text>}
-        </Box>
+        <SelectRow
+          key={l}
+          label={l}
+          meta={HINT[l]}
+          selected={i === idx}
+          current={l === current}
+        />
       ))}
       <Box marginTop={1}>
         <Text dimColor>↑↓ j/k navigate · Enter select · Esc cancel</Text>