@duetso/agent 0.1.33 → 0.1.35

package/dist/src/tui/app.js

@@ -1,25 +1,18 @@
 import { BoxRenderable, createCliRenderer, fg, ScrollBoxRenderable, t, TextRenderable, TextareaRenderable, } from "@opentui/core";
 import { formatCompactJson } from "../lib/compact-json.js";
-const COLORS = {
-    user: "#7DD3FC",
-    agent: "#FFFFFF",
-    reasoning: "#9CA3AF",
-    tool: "#A78BFA",
-    system: "#FBBF24",
-    error: "#F87171",
-    hint: "#6B7280",
-    memory: "#6B7280",
-    status: "#34D399",
-    border: "#374151",
-};
-const HINT_IDLE = "Enter: send · Esc: quit · Ctrl+C: force quit";
-const HINT_RUNNING = "Enter: steer · Shift+Enter: queue follow-up · Esc: interrupt and quit · Ctrl+C: force quit";
-const SKILL_AUTOCOMPLETE_LIMIT = 8;
-const SKILL_AUTOCOMPLETE_TOKEN = /^\/([A-Za-z0-9_.-]*)$/;
-const SKILL_AUTOCOMPLETE_DESCRIPTION_WIDTH = 72;
-const SKILL_AUTOCOMPLETE_DESCRIPTION_LINES = 2;
-const QUESTION_OPTION_LIMIT = 8;
-const QUESTION_OPTION_DESCRIPTION_WIDTH = 72;
+import { activeFileAutocompleteToken, activeSkillAutocompleteToken, AUTOCOMPLETE_LIMITS, fileAutocompleteMatches, formatQuestionOptionDescription, formatSkillAutocompleteDescription, moveQuestionOptionSelection, moveSkillAutocompleteSelection, questionPickerAnswerPayload, skillAutocompleteMatches, } from "./autocomplete.js";
+import { buildFileIndex } from "./file-index.js";
+import { historyDisplayBlocks, limitHistoryDisplayBlocks, startupHeaderLines, } from "./history.js";
+import { createSidebar } from "./sidebar.js";
+import { COLORS, HINT_IDLE, HINT_RUNNING } from "./theme.js";
+// Re-exports preserve the historical `tui/app.js` entry point used by tests
+// and external callers; the implementations live in focused leaf modules.
+export { activeFileAutocompleteToken, activeSkillAutocompleteToken, fileAutocompleteMatches, formatQuestionOptionDescription, formatSkillAutocompleteDescription, moveQuestionOptionSelection, moveSkillAutocompleteSelection, questionPickerAnswerPayload, replaceFileAutocompleteToken, replaceSkillAutocompleteToken, skillAutocompleteMatches, } from "./autocomplete.js";
+export { formatSkillAutocompleteItem } from "./autocomplete.js";
+export { historyDisplayBlocks, limitHistoryDisplayBlocks, startupHeaderLines } from "./history.js";
+const SKILL_AUTOCOMPLETE_LIMIT = AUTOCOMPLETE_LIMITS.skill;
+const FILE_AUTOCOMPLETE_LIMIT = AUTOCOMPLETE_LIMITS.file;
+const QUESTION_OPTION_LIMIT = AUTOCOMPLETE_LIMITS.questionOption;
 /**
  * Runs the interactive TUI for a session. Resolves with the most recent
  * terminal event (if any) when the user exits the UI.
@@ -49,84 +42,7 @@ export async function runTui(input) {
         flexShrink: 1,
         height: "100%",
     });
-    // Fixed width keeps the sidebar legible on narrow terminals without
-    // squashing the transcript. The two panels stack vertically inside.
-    const sidebar = new BoxRenderable(renderer, {
-        flexDirection: "column",
-        width: 36,
-        height: "100%",
-        flexShrink: 0,
-    });
-    const todoPanel = new BoxRenderable(renderer, {
-        flexDirection: "column",
-        border: true,
-        borderColor: COLORS.border,
-        padding: 1,
-        flexGrow: 1,
-        flexShrink: 1,
-    });
-    const todoTitle = new TextRenderable(renderer, {
-        content: "todos",
-        fg: COLORS.status,
-        height: 1,
-        flexShrink: 0,
-    });
-    const todoBody = new TextRenderable(renderer, {
-        content: "(none)",
-        fg: COLORS.hint,
-        flexGrow: 1,
-        flexShrink: 1,
-    });
-    todoPanel.add(todoTitle);
-    todoPanel.add(todoBody);
-    const smPanel = new BoxRenderable(renderer, {
-        flexDirection: "column",
-        border: true,
-        borderColor: COLORS.border,
-        padding: 1,
-        flexGrow: 1,
-        flexShrink: 1,
-    });
-    const smTitle = new TextRenderable(renderer, {
-        content: "state machine",
-        fg: COLORS.status,
-        height: 1,
-        flexShrink: 0,
-    });
-    const smBody = new TextRenderable(renderer, {
-        content: "(inactive)",
-        fg: COLORS.hint,
-        flexGrow: 1,
-        flexShrink: 1,
-    });
-    smPanel.add(smTitle);
-    smPanel.add(smBody);
-    const contextPanel = new BoxRenderable(renderer, {
-        flexDirection: "column",
-        border: true,
-        borderColor: COLORS.border,
-        paddingLeft: 1,
-        paddingRight: 1,
-        height: 5,
-        flexShrink: 0,
-    });
-    const contextTitle = new TextRenderable(renderer, {
-        content: "context",
-        fg: COLORS.status,
-        height: 1,
-        flexShrink: 0,
-    });
-    const contextBody = new TextRenderable(renderer, {
-        content: "(waiting for usage)",
-        fg: COLORS.hint,
-        flexGrow: 1,
-        flexShrink: 1,
-    });
-    contextPanel.add(contextTitle);
-    contextPanel.add(contextBody);
-    sidebar.add(todoPanel);
-    sidebar.add(smPanel);
-    sidebar.add(contextPanel);
+    const sidebar = createSidebar(renderer);
     const transcript = new ScrollBoxRenderable(renderer, {
         flexGrow: 1,
         flexShrink: 1,
@@ -176,6 +92,37 @@ export async function runTui(input) {
     for (const row of skillAutocompleteRows) {
         skillAutocompletePanel.add(row);
     }
+    // The @-file picker mirrors the slash picker's structure so the renderer
+    // logic and key handling can stay parallel between the two pickers.
+    const fileAutocompletePanel = new BoxRenderable(renderer, {
+        flexDirection: "column",
+        border: true,
+        borderColor: COLORS.border,
+        paddingLeft: 1,
+        paddingRight: 1,
+        flexShrink: 0,
+    });
+    fileAutocompletePanel.visible = false;
+    const fileAutocompleteTitle = new TextRenderable(renderer, {
+        content: "files",
+        fg: COLORS.status,
+        height: 1,
+        flexShrink: 0,
+    });
+    const fileAutocompleteRows = Array.from({ length: FILE_AUTOCOMPLETE_LIMIT }, () => {
+        const row = new TextRenderable(renderer, {
+            content: "",
+            fg: COLORS.hint,
+            height: 1,
+            flexShrink: 0,
+        });
+        row.visible = false;
+        return row;
+    });
+    fileAutocompletePanel.add(fileAutocompleteTitle);
+    for (const row of fileAutocompleteRows) {
+        fileAutocompletePanel.add(row);
+    }
     const questionPanel = new BoxRenderable(renderer, {
         flexDirection: "column",
         border: true,
@@ -239,10 +186,11 @@ export async function runTui(input) {
     layout.add(status);
     layout.add(hint);
     layout.add(skillAutocompletePanel);
+    layout.add(fileAutocompletePanel);
     layout.add(questionPanel);
     layout.add(inputBox);
     root.add(layout);
-    root.add(sidebar);
+    root.add(sidebar.view);
     renderer.root.add(root);
     inputField.focus();
     // ---- transcript helpers ----------------------------------------------------
@@ -263,7 +211,6 @@ export async function runTui(input) {
     function appendLine(content, fg) {
         if (!content)
             return;
-        // ScrollBox children stack vertically; one Text per logical line keeps wrapping simple.
         const line = new TextRenderable(renderer, { content, fg });
         transcript.add(line);
         scrollToBottomSoon();
@@ -312,14 +259,72 @@ export async function runTui(input) {
     // — swapping the spinner for a check/cross and appending the result —
     // instead of pushing a separate block.
     const activeToolBlocks = new Map();
+    // Tracks the wall-clock start of the current turn so the status line can
+    // surface a live "Ns" / "Nm Ns" elapsed counter while work is in flight.
+    let workingStartedAt;
+    let workingTicker;
+    // Swapped out by memory events so the ticker can keep refreshing while the
+    // human-readable phase ("recalling memories…", etc.) stays accurate.
+    let workingMessage = "working…";
+    function formatElapsed(ms) {
+        const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+        if (totalSeconds < 60)
+            return `${totalSeconds}s`;
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        return `${minutes}m ${seconds}s`;
+    }
+    function refreshWorkingStatus() {
+        refreshActiveToolBlocks();
+        if (workingStartedAt === undefined)
+            return;
+        const elapsed = formatElapsed(Date.now() - workingStartedAt);
+        setStatus(`● ${workingMessage} (${elapsed} · Esc to interrupt, Ctrl+C to force quit)`);
+    }
+    // Sub-second precision for short tool calls keeps fast operations honest;
+    // longer calls fall back to the coarser m/s formatter shared with the
+    // working-status counter.
+    function formatToolDuration(ms) {
+        if (ms < 10_000)
+            return `${(ms / 1000).toFixed(1)}s`;
+        return formatElapsed(ms);
+    }
+    function refreshActiveToolBlocks() {
+        if (activeToolBlocks.size === 0)
+            return;
+        for (const block of activeToolBlocks.values()) {
+            if (block.startedAt === undefined)
+                continue;
+            const elapsed = formatToolDuration(Date.now() - block.startedAt);
+            const header = `[tool ${block.toolName}] ⏳ ${elapsed}`;
+            block.line.content = block.inputBody ? `${header}\n${block.inputBody}` : header;
+        }
+    }
+    function startWorkingTicker() {
+        if (workingTicker !== undefined)
+            return;
+        workingTicker = setInterval(refreshWorkingStatus, 1000);
+    }
+    function stopWorkingTicker() {
+        if (workingTicker !== undefined) {
+            clearInterval(workingTicker);
+            workingTicker = undefined;
+        }
+    }
     function markRunning() {
         running = true;
         setHint(true);
-        setStatus("● working… (Esc to interrupt, Ctrl+C to force quit)");
+        workingMessage = "working…";
+        workingStartedAt = Date.now();
+        refreshWorkingStatus();
+        startWorkingTicker();
     }
     function markIdle() {
         running = false;
         setHint(false);
+        stopWorkingTicker();
+        workingStartedAt = undefined;
+        workingMessage = "working…";
         setStatus("");
     }
     function reportError(error) {
@@ -329,80 +334,11 @@ export async function runTui(input) {
     // ---- session subscription --------------------------------------------------
     function refreshSidebar() {
         const state = input.session.getState();
-        renderTodoSidebar(state?.todos ?? []);
-        renderStateMachineSidebar(state?.stateMachine);
-        renderContextUsageSidebar(latestContextUsage);
-    }
-    function renderTodoSidebar(todos) {
-        if (todos.length === 0) {
-            todoBody.content = "(none)";
-            todoBody.fg = COLORS.hint;
-            return;
-        }
-        const lines = todos.map((todo) => `${todoStatusGlyph(todo.status)} ${todo.content}`);
-        todoBody.content = lines.join("\n");
-        todoBody.fg = COLORS.agent;
-    }
-    function todoStatusGlyph(status) {
-        if (status === "completed")
-            return "✓";
-        if (status === "in_progress")
-            return "●";
-        if (status === "failed")
-            return "✗";
-        return "○";
-    }
-    function renderStateMachineSidebar(session) {
-        if (!session) {
-            smBody.content = "(inactive)";
-            smBody.fg = COLORS.hint;
-            return;
-        }
-        const current = session.currentState;
-        const lines = session.definition.states.map((state) => {
-            const marker = state.name === current ? "▶" : " ";
-            return `${marker} ${state.name}`;
-        });
-        if (session.terminal) {
-            lines.push("", `terminal: ${session.terminal.status}`);
-        }
-        smBody.content = lines.join("\n");
-        smBody.fg = COLORS.agent;
-    }
-    function renderContextUsageSidebar(usage) {
-        if (!usage) {
-            contextBody.content = "(waiting for usage)";
-            contextBody.fg = COLORS.hint;
-            return;
-        }
-        const usedTokens = usage.usage.totalTokens;
-        const percent = Math.min(1, usedTokens / usage.contextWindow);
-        contextBody.content = [
-            progressBar(percent, 25),
-            `${formatTokenCount(usedTokens)} / ${formatTokenCount(usage.contextWindow)}`,
-        ].join("\n");
-        contextBody.fg = usedTokens >= usage.contextWindow ? COLORS.error : COLORS.agent;
-    }
-    function progressBar(value, width) {
-        const clamped = Math.max(0, Math.min(1, value));
-        const filled = Math.round(clamped * width);
-        const empty = width - filled;
-        return `[${"█".repeat(filled)}${"░".repeat(empty)}] ${`${Math.round(clamped * 100)}%`.padStart(4)}`;
-    }
-    function formatTokenCount(tokens) {
-        if (tokens >= 1_000_000)
-            return `${formatCompactNumber(tokens / 1_000_000)}m`;
-        if (tokens >= 1_000)
-            return `${formatCompactNumber(tokens / 1_000)}k`;
-        return String(tokens);
-    }
-    function formatCompactNumber(value) {
-        const rounded = value >= 10 ? Math.round(value) : Math.round(value * 10) / 10;
-        return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
+        sidebar.setTodos(state?.todos ?? []);
+        sidebar.setStateMachine(state?.stateMachine);
+        sidebar.setContextUsage(latestContextUsage);
     }
     const unsubscribe = input.session.subscribe((event) => {
-        // Sidebar mirrors the runner's authoritative state, so refresh it on
-        // every event rather than threading specific updates through each branch.
         refreshSidebar();
         if (event.type === "step") {
             renderStep(event.step);
@@ -418,7 +354,7 @@ export async function runTui(input) {
         }
         else if (event.type === "context_usage") {
             latestContextUsage = event;
-            renderContextUsageSidebar(event);
+            sidebar.setContextUsage(event);
         }
         else if (event.type === "system") {
             appendBlock("[system]", event.message, COLORS.system);
@@ -429,6 +365,7 @@ export async function runTui(input) {
             appendBlock("[question]", event.questions.map((q) => q.question).join("\n"), COLORS.system);
             showQuestions(event.questions);
             renderUsage(event.usage);
+            renderTurnElapsed();
             lastTerminal = event;
             markIdle();
         }
@@ -436,24 +373,22 @@ export async function runTui(input) {
             if (event.error) {
                 appendBlock("[error]", event.error, COLORS.error);
             }
-            else if (event.result) {
-                // Result is also normally streamed via text steps; only show if no streaming happened
-                // for this turn (cheap heuristic: empty transcript-since-last-prompt).
-                // Always-append is fine too — duplicate text is harmless and clearer for short turns.
-            }
             renderUsage(event.usage);
+            renderTurnElapsed();
             lastTerminal = event;
             markIdle();
         }
         else if (event.type === "interrupted") {
             appendLine("[interrupted]", COLORS.system);
             renderUsage(event.usage);
+            renderTurnElapsed();
             lastTerminal = event;
             markIdle();
         }
         else if (event.type === "sleep") {
             appendLine(`[sleeping until ${new Date(event.wakeAt).toLocaleTimeString()}]`, COLORS.system);
             renderUsage(event.usage);
+            renderTurnElapsed();
             lastTerminal = event;
             markIdle();
         }
@@ -487,6 +422,11 @@ export async function runTui(input) {
         const cost = usage.cost.total === 0 ? "" : ` · Cost: $${usage.cost.total.toFixed(4)}`;
         appendLine(`[usage] Tokens: ${parts.join(" ")}${cost}`, COLORS.hint);
     }
+    function renderTurnElapsed() {
+        if (workingStartedAt === undefined)
+            return;
+        appendLine(`● turn finished in ${formatElapsed(Date.now() - workingStartedAt)}`, COLORS.status);
+    }
     function renderTodos(todos) {
         if (todos.length === 0) {
             appendBlock("[todos]", "No todos", COLORS.hint);
@@ -496,7 +436,10 @@ export async function runTui(input) {
     }
     function renderFollowUpQueue(prompts) {
         if (prompts.length === 0) {
-            setStatus(running ? "● working… (Esc to interrupt, Ctrl+C to force quit)" : "");
+            if (running)
+                refreshWorkingStatus();
+            else
+                setStatus("");
             return;
         }
         setStatus(`queued follow-ups: ${prompts.length}`);
@@ -560,7 +503,9 @@ export async function runTui(input) {
         const existing = activeToolBlocks.get(step.toolCallId);
         if (!existing) {
             const inputBody = step.input === undefined ? "" : formatCompactJson(step.input);
-            const header = `[tool ${step.toolName}] ⏳`;
+            const isLive = step.status === "running" || step.status === "pending";
+            const startedAt = isLive ? Date.now() : undefined;
+            const header = isLive ? `[tool ${step.toolName}] ⏳ 0.0s` : `[tool ${step.toolName}] ⏳`;
             const fg = step.status === "error" ? COLORS.error : COLORS.tool;
             const line = new TextRenderable(renderer, {
                 content: inputBody ? `${header}\n${inputBody}` : header,
@@ -568,7 +513,7 @@ export async function runTui(input) {
             });
             beginBlock();
             transcript.add(line);
-            const block = { line, toolName: step.toolName, inputBody };
+            const block = { line, toolName: step.toolName, inputBody, startedAt };
             activeToolBlocks.set(step.toolCallId, block);
             scrollToBottomSoon();
             // The same event may already carry a terminal status (cached/replayed
@@ -583,7 +528,9 @@ export async function runTui(input) {
     function finalizeToolCall(step, block) {
         const isError = step.status === "error";
         const marker = isError ? "✗" : "✓";
-        const header = `[tool ${block.toolName}] ${marker}`;
+        const header = block.startedAt === undefined
+            ? `[tool ${block.toolName}] ${marker}`
+            : `[tool ${block.toolName}] ${marker} ${formatToolDuration(Date.now() - block.startedAt)}`;
         const sections = [block.inputBody ? `${header}\n${block.inputBody}` : header];
         if (step.output && step.output.length > 0) {
             const text = textFromContent(step.output);
@@ -608,7 +555,8 @@ export async function runTui(input) {
     }
     function renderMemoryStatus(event) {
         if (event.status === "running") {
-            setStatus(`● ${event.message} (Esc to interrupt, Ctrl+C to force quit)`);
+            workingMessage = event.message;
+            refreshWorkingStatus();
             return;
         }
         const body = formatMemoryEventBody(event);
@@ -616,7 +564,8 @@ export async function runTui(input) {
             appendBlock(`[memory:${event.phase}]`, body, COLORS.memory);
         }
         if (running) {
-            setStatus("● working… (Esc to interrupt, Ctrl+C to force quit)");
+            workingMessage = "working…";
+            refreshWorkingStatus();
         }
     }
     function formatMemoryEventBody(event) {
@@ -635,6 +584,14 @@ export async function runTui(input) {
     let skillAutocompleteToken;
     let skillAutocompleteItems = [];
     let skillAutocompleteSelectedIndex = 0;
+    // File index loads lazily after the first @ trigger and never re-runs.
+    // Repos large enough to matter would block the first keystroke otherwise;
+    // a stale-by-a-few-files index is a fair trade for a snappy first paint.
+    let fileAutocompleteAllFiles = [];
+    let fileAutocompleteIndexPromise;
+    let fileAutocompleteToken;
+    let fileAutocompleteItems = [];
+    let fileAutocompleteSelectedIndex = 0;
     let pendingQuestions = [];
     let questionOptionSelectedIndex = 0;
     let suppressNextEscapeExit = false;
@@ -644,6 +601,7 @@ export async function runTui(input) {
             if (closingAfterInterrupt)
                 return;
             closingAfterInterrupt = true;
+            stopWorkingTicker();
             setStatus("● interrupting…");
             try {
                 await input.session.interrupt();
@@ -663,6 +621,9 @@ export async function runTui(input) {
     function skillAutocompleteIsOpen() {
         return Boolean(skillAutocompleteToken && skillAutocompleteItems.length > 0);
     }
+    function fileAutocompleteIsOpen() {
+        return Boolean(fileAutocompleteToken && fileAutocompleteItems.length > 0);
+    }
     function questionPickerIsOpen() {
         const question = pendingQuestions[0];
         return Boolean(question && question.options.length > 0);
@@ -677,6 +638,16 @@ export async function runTui(input) {
             row.content = "";
         }
     }
+    function hideFileAutocomplete() {
+        fileAutocompleteToken = undefined;
+        fileAutocompleteItems = [];
+        fileAutocompleteSelectedIndex = 0;
+        fileAutocompletePanel.visible = false;
+        for (const row of fileAutocompleteRows) {
+            row.visible = false;
+            row.content = "";
+        }
+    }
     function hideQuestions() {
         pendingQuestions = [];
         questionOptionSelectedIndex = 0;
@@ -731,6 +702,19 @@ export async function runTui(input) {
         markRunning();
         return true;
     }
+    async function ensureFileIndex() {
+        if (fileAutocompleteAllFiles.length > 0)
+            return fileAutocompleteAllFiles;
+        if (!fileAutocompleteIndexPromise) {
+            fileAutocompleteIndexPromise = buildFileIndex(input.workDir).catch(() => []);
+        }
+        fileAutocompleteAllFiles = await fileAutocompleteIndexPromise;
+        return fileAutocompleteAllFiles;
+    }
+    function refreshAutocomplete() {
+        refreshSkillAutocomplete();
+        refreshFileAutocomplete();
+    }
     function refreshSkillAutocomplete() {
         const token = activeSkillAutocompleteToken(inputField.plainText, inputField.cursorOffset);
         if (!token) {
@@ -754,6 +738,44 @@ export async function runTui(input) {
         }
         renderSkillAutocomplete();
     }
+    function refreshFileAutocomplete() {
+        const token = activeFileAutocompleteToken(inputField.plainText, inputField.cursorOffset);
+        if (!token) {
+            hideFileAutocomplete();
+            return;
+        }
+        // Capture the token id we're looking up so a slow index resolution can
+        // tell whether the user has typed past the original query and bail out.
+        const targetStart = token.start;
+        const targetEnd = token.end;
+        const targetQuery = token.query;
+        void ensureFileIndex().then((files) => {
+            const stillCurrent = fileAutocompleteToken !== undefined
+                ? fileAutocompleteToken.start === targetStart &&
+                    fileAutocompleteToken.end === targetEnd &&
+                    fileAutocompleteToken.query === targetQuery
+                : activeFileAutocompleteToken(inputField.plainText, inputField.cursorOffset)?.query ===
+                    targetQuery;
+            if (!stillCurrent && fileAutocompleteToken === undefined)
+                return;
+            const items = fileAutocompleteMatches(files, targetQuery);
+            if (items.length === 0) {
+                hideFileAutocomplete();
+                return;
+            }
+            const previousToken = fileAutocompleteToken;
+            fileAutocompleteToken = { start: targetStart, end: targetEnd, query: targetQuery };
+            fileAutocompleteItems = items;
+            const queryChanged = !previousToken ||
+                previousToken.start !== targetStart ||
+                previousToken.end !== targetEnd ||
+                previousToken.query !== targetQuery;
+            if (queryChanged || fileAutocompleteSelectedIndex >= items.length) {
+                fileAutocompleteSelectedIndex = 0;
+            }
+            renderFileAutocomplete();
+        });
+    }
     function renderSkillAutocomplete() {
         skillAutocompletePanel.visible = skillAutocompleteItems.length > 0;
         for (const [index, row] of skillAutocompleteRows.entries()) {
@@ -774,6 +796,30 @@ export async function runTui(input) {
             row.visible = true;
         }
     }
+    function renderFileAutocomplete() {
+        fileAutocompletePanel.visible = fileAutocompleteItems.length > 0;
+        for (const [index, row] of fileAutocompleteRows.entries()) {
+            const item = fileAutocompleteItems[index];
+            if (!item) {
+                row.visible = false;
+                row.content = "";
+                continue;
+            }
+            const selected = index === fileAutocompleteSelectedIndex;
+            const nameColor = selected ? COLORS.status : COLORS.user;
+            const pathColor = selected ? COLORS.agent : COLORS.hint;
+            // Show basename + relative directory side-by-side. The directory
+            // portion is the path with the trailing basename removed; for files at
+            // the repo root this collapses to "./" so each row has a consistent
+            // shape.
+            const directory = item.relativePath.includes("/")
+                ? item.relativePath.slice(0, item.relativePath.lastIndexOf("/") + 1)
+                : "./";
+            row.content = t `${fg(nameColor)(item.name)} ${fg(pathColor)(directory)}`;
+            row.fg = selected ? COLORS.agent : COLORS.hint;
+            row.visible = true;
+        }
+    }
     function completeSelectedSkillAutocomplete() {
         const token = skillAutocompleteToken;
         const item = skillAutocompleteItems[skillAutocompleteSelectedIndex];
@@ -788,6 +834,20 @@ export async function runTui(input) {
         hideSkillAutocomplete();
         return true;
     }
+    function completeSelectedFileAutocomplete() {
+        const token = fileAutocompleteToken;
+        const item = fileAutocompleteItems[fileAutocompleteSelectedIndex];
+        if (!token || !item)
+            return false;
+        const insertion = inputField.plainText[token.end]?.match(/\s/)
+            ? `@${item.relativePath}`
+            : `@${item.relativePath} `;
+        inputField.setSelection(token.start, token.end);
+        inputField.deleteSelection();
+        inputField.insertText(insertion);
+        hideFileAutocomplete();
+        return true;
+    }
     const keyHandler = renderer._keyHandler;
     keyHandler.onInternal("keypress", (key) => {
         if (key.name !== "escape")
@@ -802,6 +862,11 @@ export async function runTui(input) {
             hideSkillAutocomplete();
             return;
         }
+        if (fileAutocompleteIsOpen()) {
+            key.preventDefault();
+            hideFileAutocomplete();
+            return;
+        }
         if (questionPickerIsOpen()) {
             key.preventDefault();
             hideQuestions();
@@ -827,7 +892,7 @@ export async function runTui(input) {
                 key.preventDefault();
                 return;
             }
-            if (key.name === "return" || key.name === "enter") {
+            if (key.name === "return" || key.name === "enter" || key.name === "tab") {
                 key.preventDefault();
                 completeSelectedSkillAutocomplete();
                 return;
@@ -839,6 +904,31 @@ export async function runTui(input) {
                 return;
             }
         }
+        if (fileAutocompleteIsOpen()) {
+            if (key.name === "up") {
+                fileAutocompleteSelectedIndex = moveSkillAutocompleteSelection(fileAutocompleteSelectedIndex, fileAutocompleteItems.length, -1);
+                renderFileAutocomplete();
+                key.preventDefault();
+                return;
+            }
+            if (key.name === "down") {
+                fileAutocompleteSelectedIndex = moveSkillAutocompleteSelection(fileAutocompleteSelectedIndex, fileAutocompleteItems.length, 1);
+                renderFileAutocomplete();
+                key.preventDefault();
+                return;
+            }
+            if (key.name === "return" || key.name === "enter" || key.name === "tab") {
+                key.preventDefault();
+                completeSelectedFileAutocomplete();
+                return;
+            }
+            if (key.name === "escape") {
+                key.preventDefault();
+                suppressNextEscapeExit = true;
+                hideFileAutocomplete();
+                return;
+            }
+        }
         if (questionPickerIsOpen()) {
             if (key.name === "up") {
                 questionOptionSelectedIndex = moveQuestionOptionSelection(questionOptionSelectedIndex, Math.min(pendingQuestions[0]?.options.length ?? 0, QUESTION_OPTION_LIMIT), -1);
@@ -861,9 +951,6 @@ export async function runTui(input) {
         }
         if (key.name === "return" || key.name === "enter") {
             lastEnterShift = Boolean(key.shift);
-            // Take over Enter so the textarea does not insert a newline. We submit
-            // the current buffer contents and reset, regardless of shift state —
-            // shift only differentiates steer vs. queued follow-up.
             const value = inputField.plainText.trim();
             inputField.clear();
             key.preventDefault();
@@ -881,20 +968,16 @@ export async function runTui(input) {
             return;
         }
     };
-    inputField.onContentChange = () => refreshSkillAutocomplete();
-    inputField.onCursorChange = () => refreshSkillAutocomplete();
+    inputField.onContentChange = () => refreshAutocomplete();
+    inputField.onCursorChange = () => refreshAutocomplete();
     function submit(message, shiftEnter) {
         appendBlock("you:", message, COLORS.user);
         hideQuestions();
         if (running) {
-            // Mid-turn: Enter → steer, Shift+Enter → queued follow-up.
             const behavior = shiftEnter ? "follow_up" : "steer";
             void input.session.prompt({ message, behavior }).catch(reportError);
-            // Keep status as "working"; the existing turn continues.
             return;
         }
-        // Idle: dispatch a prompt against the already-set-up session. Setup
-        // happens before the TUI starts so skills are visible right away.
         void input.session.prompt({ message, behavior: "follow_up" }).catch(reportError);
         markRunning();
     }
@@ -910,7 +993,7 @@ export async function runTui(input) {
         description: skill.description,
         path: skill.baseDir,
     }));
-    refreshSkillAutocomplete();
+    refreshAutocomplete();
     renderSetupIntro(skills, agentFiles);
     refreshSidebar();
     const resumeHistoryLines = input.resumeHistoryLines ?? Number.POSITIVE_INFINITY;
@@ -933,8 +1016,6 @@ export async function runTui(input) {
         markRunning();
     }
     else {
-        // No initial prompt — wait for the user. Setup already ran above, so
-        // the skill summary is rendered before the user types.
         markIdle();
     }
     // ---- run renderer until the user quits -------------------------------------
@@ -966,204 +1047,6 @@ export async function runTui(input) {
         return COLORS.agent;
     }
 }
-export function historyDisplayBlocks(history) {
-    const blocks = [];
-    const activeToolBlockIndexes = new Map();
-    for (const message of history) {
-        if (!("role" in message))
-            continue;
-        if (message.role === "user") {
-            const text = userMessageText(message.content);
-            if (text)
-                blocks.push({ kind: "user", content: `you:\n${text}` });
-        }
-        else if (message.role === "assistant") {
-            for (const block of message.content) {
-                if (block.type === "text") {
-                    blocks.push({ kind: "agent", content: block.text });
-                }
-                else if (block.type === "thinking") {
-                    const trimmed = block.thinking.trim();
-                    if (trimmed)
-                        blocks.push({ kind: "reasoning", content: `[reasoning]\n${trimmed}` });
-                }
-                else if (block.type === "toolCall") {
-                    const input = block.arguments === undefined ? "" : `\n${formatCompactJson(block.arguments)}`;
-                    activeToolBlockIndexes.set(block.id, blocks.length);
-                    blocks.push({ kind: "tool", content: `[tool ${block.name}] ⏳${input}` });
-                }
-            }
-            if (message.errorMessage) {
-                blocks.push({ kind: "error", content: `[error]\n${message.errorMessage}` });
-            }
-        }
-        else if (message.role === "toolResult") {
-            const text = textFromHistoryContent(message.content);
-            const existingIndex = activeToolBlockIndexes.get(message.toolCallId);
-            const marker = message.isError ? "✗" : "✓";
-            const label = message.isError ? "[error]" : "[result]";
-            if (existingIndex !== undefined) {
-                const existing = blocks[existingIndex];
-                const [, ...inputLines] = existing.content.split("\n");
-                const input = inputLines.length > 0 ? `\n${inputLines.join("\n")}` : "";
-                existing.kind = message.isError ? "error" : "tool";
-                existing.content = text
-                    ? `[tool ${message.toolName}] ${marker}${input}\n${label}\n${text}`
-                    : `[tool ${message.toolName}] ${marker}${input}`;
-                activeToolBlockIndexes.delete(message.toolCallId);
-            }
-            else {
-                const content = text
-                    ? `[tool ${message.toolName}] ${marker}\n${label}\n${text}`
-                    : `[tool ${message.toolName}] ${marker}`;
-                blocks.push({ kind: message.isError ? "error" : "tool", content });
-            }
-        }
-    }
-    return blocks;
-}
-export function startupHeaderLines(input) {
-    const lines = [
-        `[duet] v${input.packageVersion}`,
-        `[cwd] ${input.workDir}`,
-        `[session] ${input.sessionId}`,
-        input.modelSource
-            ? `[model] ${input.modelName} — ${input.modelSource}`
-            : `[model] ${input.modelName}`,
-        input.memoryModelSource
-            ? `[memory model] ${input.memoryModelName} — ${input.memoryModelSource}`
-            : `[memory model] ${input.memoryModelName}`,
-    ];
-    if (input.newVersionNotice)
-        lines.push(input.newVersionNotice);
-    return lines;
-}
-export function limitHistoryDisplayBlocks(blocks, maxLines) {
-    if (maxLines <= 0)
-        return { blocks: [], omittedLines: countHistoryLines(blocks) };
-    const selected = [];
-    let remaining = maxLines;
-    let omittedLines = 0;
-    for (let index = blocks.length - 1; index >= 0; index--) {
-        const block = blocks[index];
-        const lines = block.content.split("\n");
-        if (lines.length <= remaining) {
-            selected.unshift(block);
-            remaining -= lines.length;
-            continue;
-        }
-        if (remaining > 0) {
-            selected.unshift({ ...block, content: lines.slice(-remaining).join("\n") });
-            omittedLines += lines.length - remaining;
-            remaining = 0;
-        }
-        else {
-            omittedLines += lines.length;
-        }
-    }
-    return { blocks: selected, omittedLines };
-}
-export function activeSkillAutocompleteToken(text, cursorOffset) {
-    const boundedOffset = Math.max(0, Math.min(cursorOffset, text.length));
-    const tokenStart = text.slice(0, boundedOffset).search(/(?:^|\s)\/[^\s]*$/);
-    if (tokenStart < 0)
-        return undefined;
-    const start = text[tokenStart] === "/" ? tokenStart : tokenStart + 1;
-    const tokenEnd = text.slice(boundedOffset).search(/\s/);
-    const end = tokenEnd < 0 ? text.length : boundedOffset + tokenEnd;
-    const token = text.slice(start, end);
-    const match = token.match(SKILL_AUTOCOMPLETE_TOKEN);
-    if (!match)
-        return undefined;
-    return { start, end, query: text.slice(start + 1, boundedOffset) };
-}
-export function skillAutocompleteMatches(skills, query, limit = SKILL_AUTOCOMPLETE_LIMIT) {
-    const normalizedQuery = query.toLocaleLowerCase();
-    return [...skills]
-        .filter((skill) => skill.name.toLocaleLowerCase().startsWith(normalizedQuery))
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .slice(0, limit);
-}
-export function formatSkillAutocompleteItem(item) {
-    const path = item.path ? ` (${item.path})` : "";
-    const lines = [`/${item.name}${path}`, formatSkillAutocompleteDescription(item.description)];
-    return lines.filter((line) => line.length > 0).join("\n");
-}
-export function formatSkillAutocompleteDescription(description) {
-    if (!description)
-        return "";
-    const wrapped = wrapText(description, SKILL_AUTOCOMPLETE_DESCRIPTION_WIDTH);
-    const visible = wrapped.slice(0, SKILL_AUTOCOMPLETE_DESCRIPTION_LINES);
-    if (wrapped.length > visible.length) {
-        const lastIndex = visible.length - 1;
-        visible[lastIndex] = `${visible[lastIndex].replace(/\s+$/, "")}...`;
-    }
-    return visible.join("\n");
-}
-function wrapText(text, width) {
-    const words = text.trim().split(/\s+/);
-    const lines = [];
-    let current = "";
-    for (const word of words) {
-        if (!current) {
-            current = word;
-            continue;
-        }
-        if (current.length + 1 + word.length <= width) {
-            current = `${current} ${word}`;
-            continue;
-        }
-        lines.push(current);
-        current = word;
-    }
-    if (current)
-        lines.push(current);
-    return lines;
-}
-export function moveSkillAutocompleteSelection(selectedIndex, itemCount, direction) {
-    if (itemCount <= 0)
-        return 0;
-    return (selectedIndex + direction + itemCount) % itemCount;
-}
-export function moveQuestionOptionSelection(selectedIndex, itemCount, direction) {
-    if (itemCount <= 0)
-        return 0;
-    return (selectedIndex + direction + itemCount) % itemCount;
-}
-export function questionPickerAnswerPayload(questions, selectedIndex) {
-    const firstQuestion = questions[0];
-    const selectedOption = firstQuestion?.options[selectedIndex];
-    if (!firstQuestion || !selectedOption)
-        return undefined;
-    return { [firstQuestion.question]: selectedOption.label };
-}
-export function formatQuestionOptionDescription(description) {
-    if (!description)
-        return "";
-    return wrapText(description, QUESTION_OPTION_DESCRIPTION_WIDTH).join("\n");
-}
-export function replaceSkillAutocompleteToken(text, token, skillName) {
-    const insertion = text[token.end]?.match(/\s/) ? `/${skillName}` : `/${skillName} `;
-    const nextText = `${text.slice(0, token.start)}${insertion}${text.slice(token.end)}`;
-    return { text: nextText, cursorOffset: token.start + insertion.length };
-}
-function countHistoryLines(blocks) {
-    return blocks.reduce((count, block) => count + block.content.split("\n").length, 0);
-}
-function userMessageText(content) {
-    if (typeof content === "string")
-        return content;
-    return content
-        .filter((block) => block.type === "text" && typeof block.text === "string")
-        .map((block) => block.text)
-        .join("");
-}
-function textFromHistoryContent(content) {
-    return content
-        .filter((block) => block.type === "text")
-        .map((block) => block.text)
-        .join("\n");
-}
 function restoreWindowGlobal(previousWindow) {
     // OpenTUI installs `window.requestAnimationFrame` for browser-style
     // animation compatibility. In Bun, the presence of `window` can send fetch