s-app-scoder-agent 0.5.0 → 0.7.0

package/dist/tui/commands.js

@@ -0,0 +1,222 @@
+/**
+ * Slash commands shared by the classic REPL (src/index.ts) and the Ink TUI
+ * (src/tui/app.tsx). Pure parsing/formatting only — each frontend executes
+ * the command against its own context, so both stay in sync on the surface.
+ */
+export const SLASH_COMMANDS = [
+    { cmd: "/help", desc: "show this command list" },
+    { cmd: "/sessions", desc: "list saved sessions — /sessions resume <id|last>" },
+    { cmd: "/diff", desc: "show diffs: /diff turn | session | branch" },
+    { cmd: "/theme", desc: "switch palette: /theme <name> — /theme list (mission|paper|mono|light|high-contrast|solarized)" },
+    { cmd: "/clear", desc: "clear the conversation and reset agent context" },
+    { cmd: "/cost", desc: "token usage of the current session" },
+    { cmd: "/model", desc: "show the active model & provider" },
+    { cmd: "/skills", desc: "list discovered skills (SKILL.md)" },
+    { cmd: "/skill", desc: "load a skill into context: /skill <name>" },
+    { cmd: "/mcp", desc: "MCP servers & tools: /mcp [server] [tool] [json|text]" },
+    { cmd: "/review", desc: "prompt gate: rewrite + user approval — /review <prompt>" },
+    { cmd: "/permission", desc: "view or switch permission mode: /permission <auto|ask|readonly>" },
+    { cmd: "/undo", desc: "revert files: /undo [files|edit] — edit also trims the turn back for re-send" },
+    { cmd: "/exit", desc: "quit (aliases: /quit, exit, quit)" },
+];
+/** Parse "/cmd arg…"; returns null when the input is not a slash command. */
+export function parseSlashCommand(input) {
+    const m = /^\/([a-zA-Z][a-zA-Z0-9]*)(?:\s+(.*\S))?\s*$/.exec(input.trim());
+    if (!m)
+        return null;
+    return { cmd: "/" + m[1].toLowerCase(), arg: m[2] ?? "" };
+}
+/**
+ * Tab completion for a partial input starting with "/".
+ * Returns the completed command (with trailing space) plus all candidates,
+ * or null when the input is not completable.
+ */
+export function completeSlashCommand(input) {
+    const trimmed = input.trim();
+    if (!trimmed.startsWith("/"))
+        return null;
+    const partial = trimmed.toLowerCase();
+    const matches = SLASH_COMMANDS.filter((c) => c.cmd.startsWith(partial) && partial.length >= 1);
+    if (matches.length === 0)
+        return null;
+    // Exact match — complete to it (e.g. typing "/help" + Tab still completes).
+    if (matches.length === 1)
+        return { completed: matches[0].cmd + " ", candidates: matches };
+    // Common prefix of all matches (e.g. "/sk" → "/skill" prefix of /skills+/skill).
+    let prefix = matches[0].cmd;
+    for (const m of matches.slice(1)) {
+        let i = 0;
+        while (i < prefix.length && i < m.cmd.length && prefix[i] === m.cmd[i])
+            i++;
+        prefix = prefix.slice(0, i);
+    }
+    return { completed: prefix + (matches.length === 1 ? " " : ""), candidates: matches };
+}
+import { suggest } from "./at-complete.js";
+/** Build providers from runtime context (called once per keystroke burst). */
+export function completionProviders(sources) {
+    return [
+        {
+            id: "commands",
+            match: (t) => t.startsWith("/") && !t.slice(1).includes(" "),
+            candidates: (t) => SLASH_COMMANDS.filter((c) => c.cmd.startsWith(t.toLowerCase()))
+                .map((c) => ({ label: c.cmd, desc: c.desc, insert: c.cmd + " " })),
+        },
+        {
+            id: "files",
+            match: (t) => t.startsWith("@") && t.length > 1,
+            candidates: (t) => suggest(sources.files, t.slice(1)).map((f) => ({ label: f, insert: "@" + f + (f.endsWith("/") ? "" : " ") })),
+        },
+        {
+            id: "skills",
+            match: (t) => t.startsWith("@") && t.length > 1,
+            candidates: (t) => {
+                const q = t.slice(1).toLowerCase();
+                return sources.skills
+                    .filter((s) => s.toLowerCase().includes(q))
+                    .slice(0, 4)
+                    .map((s) => ({ label: `@${s}`, desc: "skill", insert: `@${s} ` }));
+            },
+        },
+        {
+            id: "agents",
+            match: (t) => t.startsWith("@") && t.length > 1,
+            candidates: (t) => {
+                const q = t.slice(1).toLowerCase();
+                return sources.agents
+                    .filter((a) => a.toLowerCase().includes(q))
+                    .slice(0, 4)
+                    .map((a) => ({ label: `@${a}`, desc: "agent", insert: `@${a} ` }));
+            },
+        },
+    ];
+}
+/**
+ * Ghost text: when the current input has exactly ONE candidate across all
+ * providers and it extends the typed token, return the remainder to render
+ * dim after the cursor (Tab accepts). Returns null otherwise.
+ */
+export function ghostText(value, providers) {
+    const tokens = value.split(/\s/);
+    const token = tokens[tokens.length - 1] ?? "";
+    if (!token || value.endsWith(" "))
+        return null;
+    const all = [];
+    for (const p of providers) {
+        if (!p.match(token))
+            continue;
+        all.push(...p.candidates(token));
+        if (all.length > 1)
+            return null;
+    }
+    if (all.length !== 1)
+        return null;
+    const insert = all[0].insert;
+    // Ghost shows only the unread part of a plain extension (no replacement).
+    if (!insert.toLowerCase().startsWith(token.toLowerCase()))
+        return null;
+    const rest = insert.slice(token.length);
+    if (!rest)
+        return null;
+    return { rest, insert };
+}
+/** Format the /help listing (shared so both frontends render identically). */
+export function formatSlashHelp(commandName) {
+    const rows = SLASH_COMMANDS.map((c) => `  ${c.cmd.padEnd(12)} ${c.desc}`).join("\n");
+    return `Commands (${commandName}):\n${rows}\n  Anything else is sent to the agent as a task.\n  Tab completes commands; ↑/↓ recalls history.`;
+}
+/**
+ * Tab completion for `/mcp` arguments: server name, then tool name.
+ * Input forms: "/mcp " → servers; "/mcp srv " → srv's tools; "/mcp srv par" → tools starting "par".
+ * Returns the completed text or null.
+ */
+export function completeMcpArg(input, servers) {
+    const m = /^\/mcp\s+(\S*)$/.exec(input);
+    if (m) {
+        // Đang gõ tên server.
+        const partial = m[1].toLowerCase();
+        const hits = servers.filter((s) => s.name.toLowerCase().startsWith(partial));
+        if (hits.length === 1)
+            return `/mcp ${hits[0].name} `;
+        if (hits.length > 1) {
+            let prefix = hits[0].name;
+            for (const h of hits.slice(1)) {
+                let i = 0;
+                while (i < prefix.length && i < h.name.length && prefix[i] === h.name[i])
+                    i++;
+                prefix = prefix.slice(0, i);
+            }
+            return `/mcp ${prefix}`;
+        }
+        return null;
+    }
+    const tm = /^\/mcp\s+(\S+)\s+(\S*)$/.exec(input);
+    if (tm) {
+        // Đang gõ tên tool (bỏ prefix mcp__srv__ khi gõ).
+        const srv = servers.find((s) => s.name.toLowerCase() === tm[1].toLowerCase());
+        if (!srv)
+            return null;
+        const partial = tm[2].toLowerCase().replace(/^mcp__\S+?__/, "");
+        const hits = srv.tools.filter((t) => t.name.toLowerCase().startsWith(partial));
+        if (hits.length === 1)
+            return `/mcp ${srv.name} ${hits[0].name} `;
+        if (hits.length > 1) {
+            let prefix = hits[0].name;
+            for (const h of hits.slice(1)) {
+                let i = 0;
+                while (i < prefix.length && i < h.name.length && prefix[i] === h.name[i])
+                    i++;
+                prefix = prefix.slice(0, i);
+            }
+            return `/mcp ${srv.name} ${prefix}`;
+        }
+    }
+    return null;
+}
+/**
+ * Parse a `/mcp` exec invocation into (fullName, args).
+ *
+ * Forms:
+ *   /mcp                                  → list (no exec)
+ *   /mcp server tool {"k":"v"}            → mcp__server__tool
+ *   /mcp mcp__server__tool {"k":"v"}      → as-is (full name)
+ *   /mcp server tool free text            → args resolved from the tool's
+ *                                           first string parameter (see
+ *                                           Agent.callMcpTool `__text`)
+ * The JSON part is optional; non-JSON text is passed as the `__text` shorthand.
+ */
+export function parseMcpExec(arg) {
+    const trimmed = arg.trim();
+    if (!trimmed)
+        return null; // list mode
+    const tokens = trimmed.split(/\s+/);
+    let fullName;
+    let rest;
+    if (tokens[0].startsWith("mcp__")) {
+        fullName = tokens[0];
+        rest = trimmed.slice(tokens[0].length).trim();
+    }
+    else {
+        if (tokens.length < 2)
+            return { error: "usage: /mcp <server> <tool> [json-args] — list servers with bare /mcp" };
+        fullName = `mcp__${tokens[0]}__${tokens[1]}`;
+        // Preserve the JSON part verbatim (it may contain spaces).
+        const m = /^(\S+)\s+(\S+)(?:\s+([\s\S]*))?$/.exec(trimmed);
+        rest = m?.[3] ?? "";
+    }
+    if (!rest)
+        return { fullName, args: {} };
+    try {
+        const parsed = JSON.parse(rest);
+        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+            return { error: "json args must be an object, e.g. {\"prompt\": \"...\"}" };
+        }
+        return { fullName, args: parsed };
+    }
+    catch {
+        // Not JSON — treat the rest as the value of the tool's first required
+        // string parameter (discoverable from its inputSchema via /mcp listing),
+        // e.g. `/mcp exec mcp__srv__tool phân tích project`.
+        return { fullName, args: { __text: rest } };
+    }
+}

package/dist/tui/image.js

@@ -0,0 +1,149 @@
+/**
+ * T7: image render trong chat — detect terminal protocol + halfblock preview.
+ * Không thêm dependency: halfblock qua unicode upper-half ▀ với truecolor
+ * (iTerm2/kitty hỗ trợ COLORTERM=truecolor). Terminal không hỗ trợ → fallback
+ * link text. ponytail: 40px width cố định, không đo cell size thật — nâng
+ * cấp khi cần aspect ratio chuẩn.
+ */
+import { inflateSync } from "node:zlib";
+export function detectImageCaps(env = process.env) {
+    const truecolor = env.COLORTERM === "truecolor" || env.COLORTERM === "24bit";
+    const iterm = env.TERM_PROGRAM === "iTerm.app";
+    const kitty = env.TERM === "xterm-kitty" || env.KITTY_WINDOW_ID !== undefined;
+    return { truecolor, iterm, kitty };
+}
+const IMG_MAGIC = [
+    { ext: "png", test: (b) => b.length > 8 && b[0] === 0x89 && b[1] === 0x50 },
+    { ext: "jpg", test: (b) => b.length > 3 && b[0] === 0xff && b[1] === 0xd8 },
+    { ext: "gif", test: (b) => b.length > 6 && b.toString("ascii", 0, 3) === "GIF" },
+    { ext: "bmp", test: (b) => b.length > 2 && b[0] === 0x42 && b[1] === 0x4d },
+];
+/** Detect image từ magic bytes (đuôi file không đáng tin). */
+export function detectImageBytes(buf) {
+    return IMG_MAGIC.find((m) => m.test(buf))?.ext ?? null;
+}
+/** Decode PNG/JPG size (width/height) — chỉ PNG (IHDR) và JPEG (SOF markers). */
+export function imageSize(buf) {
+    if (detectImageBytes(buf) === "png" && buf.length > 24) {
+        return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) };
+    }
+    if (detectImageBytes(buf) === "jpg") {
+        let i = 2;
+        while (i + 9 < buf.length) {
+            if (buf[i] !== 0xff)
+                break;
+            const marker = buf[i + 1];
+            const len = buf.readUInt16BE(i + 2);
+            if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+                return { height: buf.readUInt16BE(i + 5), width: buf.readUInt16BE(i + 7) };
+            }
+            i += 2 + len;
+        }
+    }
+    return null;
+}
+/**
+ * Render buffer ảnh thành mảng dòng "▀" (2 pixel ảnh / 1 dòng terminal).
+ * Trả về null khi terminal không truecolor (caller fallback link).
+ */
+export function halfblockRows(buf, maxCols = 40) {
+    const png = detectImageBytes(buf) === "png";
+    if (!png)
+        return null; // ponytail: chỉ decode PNG thuần (zlib builtin); JPG → null
+    const size = imageSize(buf);
+    if (!size || size.width === 0 || size.height === 0)
+        return null;
+    // Decode IDAT: zlib inflate + unfilter scanlines.
+    let rows;
+    try {
+        rows = decodePngPixels(buf, size.width, size.height);
+    }
+    catch {
+        return null;
+    }
+    const w = size.width;
+    const cols = Math.min(maxCols, w);
+    const step = w / cols; // downsample theo cột
+    const out = [];
+    for (let py = 0; py < size.height; py += 2) {
+        let line = "";
+        for (let cx = 0; cx < cols; cx++) {
+            const px = Math.min(w - 1, Math.floor(cx * step));
+            const top = pixelAt(rows, w, px, py);
+            const bot = py + 1 < size.height ? pixelAt(rows, w, px, py + 1) : [0, 0, 0];
+            line += `\x1b[38;2;${top[0]};${top[1]};${top[2]};48;2;${bot[0]};${bot[1]};${bot[2]}m▀`;
+        }
+        out.push({ text: line + "\x1b[0m" });
+    }
+    return out;
+}
+function pixelAt(rows, w, x, y) {
+    const o = (y * w + x) * 3;
+    return [rows[o], rows[o + 1], rows[o + 2]];
+}
+/** PNG IDAT decode (zlib builtin) + unfilter — RGB/RGBA 8-bit không interlace. */
+function decodePngPixels(buf, w, h) {
+    // Scan chunks: gather IDAT data.
+    let off = 8;
+    const idat = [];
+    let bitDepth = 8;
+    let colorType = 2;
+    while (off + 8 <= buf.length) {
+        const len = buf.readUInt32BE(off);
+        const type = buf.toString("ascii", off + 4, off + 8);
+        if (type === "IHDR") {
+            bitDepth = buf[off + 16];
+            colorType = buf[off + 17];
+        }
+        if (type === "IDAT")
+            idat.push(buf.subarray(off + 8, off + 8 + len));
+        if (type === "IEND")
+            break;
+        off += 12 + len;
+    }
+    if (bitDepth !== 8 || (colorType !== 2 && colorType !== 6))
+        throw new Error("unsupported png");
+    const bpp = colorType === 6 ? 4 : 3;
+    const raw = inflateSync(Buffer.concat(idat));
+    const stride = w * bpp;
+    const px = new Uint8Array(w * h * 3);
+    let prev = new Uint8Array(stride);
+    for (let y = 0; y < h; y++) {
+        const f = raw[y * (stride + 1)];
+        const line = raw.subarray(y * (stride + 1) + 1, (y + 1) * (stride + 1));
+        const cur = new Uint8Array(stride);
+        for (let x = 0; x < stride; x++) {
+            const a = x >= bpp ? cur[x - bpp] : 0;
+            const b = prev[x];
+            const c = x >= bpp ? prev[x - bpp] : 0;
+            let v = line[x];
+            switch (f) {
+                case 1:
+                    v += a;
+                    break;
+                case 2:
+                    v += b;
+                    break;
+                case 3:
+                    v += (a + b) >> 1;
+                    break;
+                case 4: {
+                    const p = a + b - c;
+                    const pa = Math.abs(p - a), pb = Math.abs(p - b), pc = Math.abs(p - c);
+                    v += pa <= pb && pa <= pc ? a : pb <= pc ? b : c;
+                    break;
+                }
+            }
+            cur[x] = v & 0xff;
+        }
+        for (let x = 0; x < w; x++) {
+            const so = x * bpp;
+            const do_ = (y * w + x) * 3;
+            px[do_] = cur[so];
+            px[do_ + 1] = cur[so + 1];
+            px[do_ + 2] = cur[so + 2];
+        }
+        prev = cur;
+    }
+    return px;
+}

package/dist/tui/input.js

@@ -0,0 +1,214 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * T2: Input component — ↑/↓ history, Tab slash-command completion, @ fuzzy
+ * file autocomplete, ghost text. Tách khỏi app.tsx.
+ */
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { applySuggestion, atQuery, fileIndex, suggest } from "./at-complete.js";
+import { completeSlashCommand, completionProviders, ghostText, completeMcpArg } from "./commands.js";
+import { applyNormalKey } from "./vim.js"; // T5
+import { theme } from "./theme.js";
+export function Input({ valueRef, value, onChange, onSubmit, historyRef, skillNames, agentRef, config, atSources, modalRef }) {
+    const histIdx = useRef(null);
+    const draft = useRef("");
+    // ── T5: vim normal/insert mode ──
+    // Insert là mode mặc định (chat input); Esc → normal, i/a/A → insert.
+    // Cursor position chỉ có ý nghĩa khi normal mode; insert luôn ở cuối.
+    const [vimMode, setVimMode] = useState("insert");
+    const [cursor, setCursor] = useState(null); // null = insert (cuối)
+    const vimRef = useRef({ mode: "insert", cursor: 0 });
+    vimRef.current = { mode: vimMode, cursor: cursor ?? value.length };
+    // ── T-01: `@` fuzzy file autocomplete ──────────────────────────────────────
+    // Overlay state kept out of React re-render hot path: suggestions are sync
+    // (fuzzysort over cached index ≤5s TTL) so we can compute inside useInput.
+    const [atState, setAtState] = useState(null);
+    const atStateRef = useRef(atState);
+    const workdir = config?.workdir ?? process.cwd();
+    const refreshAt = useCallback((v) => {
+        const at = atQuery(v);
+        if (!at) {
+            if (atStateRef.current) {
+                atStateRef.current = null;
+                setAtState(null);
+            }
+            return;
+        }
+        const suggestions = suggest(fileIndex(workdir), at.query);
+        const prev = atStateRef.current;
+        // Keep selection when the query narrows (still points at same entry).
+        const idx = prev && prev.at.start === at.start && suggestions[prev.idx] === prev.suggestions[prev.idx] ? prev.idx : 0;
+        const next = suggestions.length > 0 ? { at, suggestions, idx } : null;
+        atStateRef.current = next;
+        setAtState(next);
+    }, [workdir]);
+    const acceptAt = useCallback((sel) => {
+        const st = atStateRef.current;
+        if (!st || sel === undefined)
+            return;
+        const v = applySuggestion(valueRef.current, st.at, sel);
+        valueRef.current = v;
+        onChange(v);
+        atStateRef.current = null;
+        setAtState(null);
+    }, [onChange, valueRef]);
+    useInput((input, key) => {
+        if (modalRef.current)
+            return; // T-03: modal owns the keyboard
+        const current = valueRef.current;
+        // T5: vim mode — Esc → normal (nếu không có @ overlay), normal keys qua keymap.
+        if (key.escape && !atStateRef.current) {
+            setCursor(vimRef.current.cursor);
+            setVimMode("normal");
+            return;
+        }
+        if (vimRef.current.mode === "normal" && input.length === 1 && !key.ctrl && !key.meta) {
+            const r = applyNormalKey(current, vimRef.current.cursor, input);
+            if (!r.unhandled) {
+                valueRef.current = r.value;
+                onChange(r.value);
+                setCursor(r.cursor);
+                setVimMode(r.mode);
+                return;
+            }
+            if (key.return) {
+                setVimMode("insert");
+                setCursor(null);
+                histIdx.current = null;
+                onSubmit(current);
+                return;
+            }
+            // Phím lạ trong normal mode (mũi tên, ctrl...) — fall through với
+            // cursor giữ nguyên, xử lý như insert bên dưới.
+        }
+        else if (vimRef.current.mode === "normal") {
+            return; // normal mode bỏ qua paste chunks
+        }
+        // T-01: Esc closes the @ overlay (before submit semantics).
+        if (key.escape) {
+            if (atStateRef.current) {
+                atStateRef.current = null;
+                setAtState(null);
+            }
+            return;
+        }
+        if (key.return) {
+            histIdx.current = null;
+            onSubmit(current);
+            return;
+        }
+        // ↑/↓ message history recall — but T-01 @ overlay takes precedence.
+        if (key.upArrow || key.downArrow) {
+            if (atStateRef.current) {
+                const st = atStateRef.current;
+                const idx = key.upArrow ? Math.max(0, st.idx - 1) : Math.min(st.suggestions.length - 1, st.idx + 1);
+                const next = { ...st, idx };
+                atStateRef.current = next;
+                setAtState(next);
+                return;
+            }
+            const hist = historyRef.current;
+            if (hist.length === 0)
+                return;
+            if (histIdx.current === null) {
+                if (key.downArrow)
+                    return;
+                draft.current = current;
+                histIdx.current = hist.length - 1;
+            }
+            else if (key.upArrow) {
+                histIdx.current = Math.max(0, histIdx.current - 1);
+            }
+            else {
+                histIdx.current += 1;
+                if (histIdx.current >= hist.length) {
+                    histIdx.current = null;
+                    onChange(draft.current);
+                    valueRef.current = draft.current;
+                    return;
+                }
+            }
+            const v = hist[histIdx.current];
+            valueRef.current = v;
+            onChange(v);
+            return;
+        }
+        // Tab — complete slash command (and /skill, /mcp arguments)
+        if (key.tab) {
+            const argMatch = /^\/skill\s+(\S*)$/.exec(current);
+            if (argMatch) {
+                const partial = argMatch[1].toLowerCase();
+                const hits = skillNames.filter((n) => n.toLowerCase().startsWith(partial));
+                if (hits.length > 0) {
+                    const v = "/skill " + hits[0] + (hits.length === 1 ? " " : "");
+                    valueRef.current = v;
+                    onChange(v);
+                }
+                return;
+            }
+            if (/^\/mcp\s/.test(current)) {
+                // /mcp completion cần danh sách server/tools — async qua mcpStatus().
+                const agent = agentRef.current;
+                if (agent) {
+                    void agent.mcpStatus().then((servers) => {
+                        const v = completeMcpArg(current, servers);
+                        if (v) {
+                            valueRef.current = v;
+                            onChange(v);
+                        }
+                    });
+                }
+                return;
+            }
+            // T-02: Tab accepts ghost text (unique candidate extension).
+            if (!atStateRef.current && ghostRef.current) {
+                const v = ghostRef.current.insert;
+                valueRef.current = v;
+                onChange(v);
+                return;
+            }
+            // T-01: Tab accepts the active @ suggestion (dirs keep trailing slash).
+            if (atStateRef.current) {
+                acceptAt(atStateRef.current.suggestions[atStateRef.current.idx]);
+                return;
+            }
+            const comp = completeSlashCommand(current);
+            if (comp) {
+                valueRef.current = comp.completed;
+                onChange(comp.completed);
+            }
+            return;
+        }
+        if (key.backspace || key.delete) {
+            const next = current.slice(0, -1);
+            valueRef.current = next;
+            onChange(next);
+            refreshAt(next);
+            return;
+        }
+        if (input.length > 0 && !key.ctrl && !key.meta && !key.escape && !key.upArrow && !key.downArrow && !key.tab) {
+            // A chunk may contain several pasted chars — even a trailing newline
+            // (terminal pastes / PTY writes deliver "exit\r" as one chunk).
+            const parts = input.split(/[\r\n]+/);
+            const next = current + parts[0];
+            valueRef.current = next;
+            onChange(next);
+            refreshAt(next);
+            if (parts.length > 1)
+                onSubmit(next); // newline in the chunk = submit
+        }
+        // T5: bất kỳ phím gõ nào trong insert mode cũng đưa cursor về cuối.
+        if (vimRef.current.mode === "insert")
+            setCursor(null);
+    });
+    // Live candidates hint while a slash command is partially typed.
+    const hint = value.startsWith("/") && !value.includes(" ") ? completeSlashCommand(value) : null;
+    const candidates = hint && hint.candidates.length > 1 ? hint.candidates.map((c) => c.cmd).join("  ") : null;
+    const at = atState;
+    // T-02 ghost text: unique extension of the last token, dim after cursor.
+    const providers = useMemo(() => completionProviders(atSources), [atSources]);
+    const ghost = useMemo(() => (atState ? null : ghostText(value, providers)), [value, providers, atState]);
+    const ghostRef = useRef(ghost);
+    ghostRef.current = ghost;
+    return (_jsxs(Box, { flexDirection: "column", children: [at && (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [at.suggestions.map((s, i) => (_jsxs(Text, { color: i === at.idx ? theme.brand : undefined, bold: i === at.idx, children: [i === at.idx ? "▸ " : "  ", s] }, s))), _jsx(Text, { dimColor: true, children: "  \u2191/\u2193 select \u00B7 tab/enter accept \u00B7 esc close" })] })), _jsxs(Box, { children: [_jsxs(Text, { color: theme.brand, bold: true, children: ["\u276F", " "] }), vimMode === "normal" && cursor !== null ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: value.slice(0, cursor) }), _jsx(Text, { backgroundColor: "gray", color: "black", children: value[cursor] ?? " " }), _jsx(Text, { children: value.slice(cursor + 1) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { children: value }), ghost && _jsx(Text, { dimColor: true, children: ghost.rest }), _jsx(Text, { dimColor: true, children: "\u258C" })] }))] }), candidates && _jsxs(Text, { dimColor: true, children: ["  ", candidates, "  (tab completes)"] }), vimMode === "normal" && _jsx(Text, { dimColor: true, children: "  -- NORMAL -- h/l/w/b/e \u00B7 x \u00B7 i/a/A insert \u00B7 \u23CE send" })] }));
+}