u-foo 2.5.13 → 2.5.15

package/src/ui/ink/UcodeApp.js

@@ -18,6 +18,34 @@ const { runInk } = require("../runInk");
 const fmt = require("../format");
 const { createMultilineInput } = require("./MultilineInput");
 
+// Throttle for the live thinking-chain status line: rapid thinking_delta
+// chunks would otherwise re-render the footer on every SSE event.
+const THINKING_STATUS_THROTTLE_MS = 120;
+
+// Log line kinds drive the color treatment of scrollback rows. Kind is pure
+// presentation metadata — the stored text never changes.
+const LOG_LINE_TEXT_PROPS = {
+  user: { color: "green", bold: true },
+  assistant: {},
+  system: { color: "gray", dimColor: true },
+  error: { color: "red" },
+  tool: {},
+  toolDetail: { color: "gray", dimColor: true },
+  bus: { color: "cyan" },
+};
+
+// Only assistant prose gets markdown. Error rows are app-generated
+// (`Error: …`) and already painted red via resolveLogLineTextProps — running
+// them through the MD Error: line rule would wrap chalk ANSI and break the
+// plain-text body the Ink color prop expects.
+const MARKDOWN_LOG_KINDS = new Set(["assistant"]);
+
+// Resolve a log line kind to ink <Text> props. Unknown/missing kinds (e.g.
+// the banner, which already carries chalk ANSI styling) render uncolored.
+function resolveLogLineTextProps(kind) {
+  return LOG_LINE_TEXT_PROPS[kind] || LOG_LINE_TEXT_PROPS.assistant;
+}
+
 function createUcodeApp({ React, ink, props, interactive = true }) {
   const { useEffect, useState, useCallback, useRef } = React;
   const { Box, Text, useInput, useApp, useStdout } = ink;
@@ -74,11 +102,25 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
     // visual row (i.e. moveCursorVertically returned moved=false).
     const [inputHistory, setInputHistory] = useState([]);
     const [historyIndex, setHistoryIndex] = useState(0);
+    const [completionIndex, setCompletionIndex] = useState(0);
+    const [completionWindowStart, setCompletionWindowStart] = useState(0);
+    const [completionSuppressedDraft, setCompletionSuppressedDraft] = useState(null);
+    const POPUP_PAGE_SIZE = 8;
     const { exit } = useApp();
     const { stdout } = useStdout();
     const lineSeqRef = useRef(banner.length + 1);
     const mergeIdRef = useRef(0);
     const toolMergeScopeRef = useRef(0);
+    // thinkingTailRef accumulates raw thinking_delta text for the live
+    // status line; the collapsed tail is pushed through a throttled
+    // trailing flush (thinkingTimerRef) so fast streams don't re-render
+    // the footer on every chunk.
+    const thinkingTailRef = useRef("");
+    const thinkingFlushAtRef = useRef(0);
+    const thinkingTimerRef = useRef(null);
+    // Persist fence/open-code state across streamed assistant log lines so
+    // ``` blocks stay styled even when deltas arrive one line at a time.
+    const markdownStateRef = useRef({ inCodeBlock: false });
 
     const targetAgent = agentSelectionMode && selectedAgentIndex >= 0
       ? agents[selectedAgentIndex]
@@ -180,6 +222,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
         if (transition.moved) {
           setHistoryIndex(transition.nextHistoryIndex);
           setDraft(transition.nextValue);
+          setCompletionSuppressedDraft(transition.nextValue || null);
           setDraftVersion((v) => v + 1);
           return;
         }
@@ -196,22 +239,31 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       }
     }, [inputHistory, historyIndex, agents, agentSelectionMode, selectedAgentIndex]);
 
-    const onArrowUpAtStart = useCallback(() => {
-      // History first: if we're already on the top visual row, walk back
-      // through the recent history before doing anything else.
+    const onArrowUpAtStart = useCallback((currentValue) => {
+      // While @-targeting an agent with an empty draft, Up clears the
+      // selection before walking input history — otherwise history eats the
+      // key and the ›@agent prefix sticks.
+      const inputValue = currentValue != null ? currentValue : draft;
+      if (fmt.shouldClearAgentSelectionOnUp({
+        agentSelectionMode,
+        inputValue,
+      })) {
+        setAgentSelectionMode(false);
+        setSelectedAgentIndex(-1);
+        return;
+      }
+      // History: if we're already on the top visual row, walk back through
+      // the recent history before doing anything else.
       if (inputHistory.length > 0) {
         const nextIndex = Math.max(0, historyIndex - 1);
         if (nextIndex !== historyIndex || draft !== inputHistory[nextIndex]) {
           setHistoryIndex(nextIndex);
-          setDraft(inputHistory[nextIndex] || "");
+          const nextValue = inputHistory[nextIndex] || "";
+          setDraft(nextValue);
+          setCompletionSuppressedDraft(nextValue || null);
           setDraftVersion((v) => v + 1);
-          return;
         }
       }
-      if (agentSelectionMode) {
-        setAgentSelectionMode(false);
-        setSelectedAgentIndex(-1);
-      }
     }, [inputHistory, historyIndex, draft, agentSelectionMode]);
 
     const onArrowSideAtEmpty = useCallback((direction) => {
@@ -225,11 +277,73 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       setSelectedAgentIndex(next);
     }, [agents, agentSelectionMode, selectedAgentIndex]);
 
-    const appendLogLine = useCallback((text) => {
+    const { UCODE_COMMAND_REGISTRY, UCODE_COMMAND_TREE } = require("../../code/commands");
+    const { listSessionSummaries } = require("../../code/sessionStore");
+    const { suggestUcodeModels, applyUcodeModelCommand } = require("../../code/modelCommand");
+    let resumeSessions = [];
+    try {
+      resumeSessions = listSessionSummaries(props.workspaceRoot || process.cwd(), { limit: 40 });
+    } catch {
+      resumeSessions = [];
+    }
+    const modelSuggestions = suggestUcodeModels(props.state || {});
+
+    const completions = fmt.buildCompletions({
+      text: draft,
+      agents: agents.map((a) => String((a && (a.fullId || a.id || a.nickname)) || "")).filter(Boolean),
+      agentLabels: agents.map((a) => getAgentLabel(a)),
+      commands: UCODE_COMMAND_REGISTRY,
+      commandTree: UCODE_COMMAND_TREE,
+      argumentLists: {
+        "/resume": resumeSessions,
+        "/model": modelSuggestions,
+      },
+      limit: 20,
+    });
+    const completionsOpen = completions.length > 0 && draft !== completionSuppressedDraft;
+
+    useEffect(() => {
+      if (completions.length === 0) {
+        if (completionIndex !== 0) setCompletionIndex(0);
+        if (completionWindowStart !== 0) setCompletionWindowStart(0);
+      } else if (completionIndex >= completions.length) {
+        setCompletionIndex(completions.length - 1);
+        setCompletionWindowStart(Math.max(0, completions.length - POPUP_PAGE_SIZE));
+      }
+    }, [completions.length, completionIndex, completionWindowStart]);
+
+    const acceptCompletion = useCallback(() => {
+      if (!completionsOpen) return false;
+      const item = completions[Math.max(0, Math.min(completions.length - 1, completionIndex))];
+      if (item) {
+        setDraft(item.replace);
+        setCompletionSuppressedDraft(item.hasChildren ? null : item.replace);
+        setDraftVersion((v) => v + 1);
+      }
+      setCompletionIndex(0);
+      return true;
+    }, [completionsOpen, completions, completionIndex]);
+
+    const appendLogLine = useCallback((text, kind = "assistant") => {
+      const raw = String(text == null ? "" : text);
+      let renderedLines = [raw];
+      if (MARKDOWN_LOG_KINDS.has(kind)) {
+        try {
+          renderedLines = fmt.renderLogLinesWithMarkdownAnsi(raw, markdownStateRef.current);
+          if (!Array.isArray(renderedLines) || renderedLines.length === 0) {
+            renderedLines = [raw];
+          }
+        } catch {
+          renderedLines = [raw];
+        }
+      }
       setLogLines((prev) => {
-        const id = `l-${lineSeqRef.current}`;
-        lineSeqRef.current += 1;
-        const next = prev.concat([{ id, text: String(text || "") }]);
+        const next = prev.slice();
+        for (const line of renderedLines) {
+          const id = `l-${lineSeqRef.current}`;
+          lineSeqRef.current += 1;
+          next.push({ id, text: String(line || ""), kind });
+        }
         return next.length > 1000 ? next.slice(-1000) : next;
       });
     }, []);
@@ -246,7 +360,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
     const flushActiveMerge = useCallback(() => {
       setActiveMerge((current) => {
         if (!current) return null;
-        appendLogLine(renderMergeText(current));
+        appendLogLine(renderMergeText(current), "tool");
         return null;
       });
     }, [appendLogLine, renderMergeText]);
@@ -257,7 +371,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       const resObj = payload && typeof payload === "object" ? payload : (entry && entry.result) || {};
       const phase = String((entry && entry.phase) || "").trim().toLowerCase();
       const isError = phase === "error" || resObj.ok === false;
-      const detail = tool === "bash" ? fmt.normalizeBashToolCommand(entry && entry.args, resObj) : "";
+      const detail = fmt.normalizeToolLogDetail(tool, entry && entry.args, resObj);
       const errorText = String((entry && entry.error) || resObj.error || "").trim();
       const toolEntry = fmt.normalizeToolMergeEntry({ tool, detail, isError, errorText });
 
@@ -273,7 +387,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       });
     }, []);
 
-    const appendLogText = useCallback((text) => {
+    const appendLogText = useCallback((text, kind = "assistant") => {
       // Multi-line text → split into separate log entries so <Static> keys
       // stay stable when streaming arrives line-by-line. Always promote any
       // in-flight tool group first so it freezes above the new text.
@@ -281,7 +395,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       if (!raw) return;
       flushActiveMerge();
       const lines = raw.split(/\r?\n/);
-      for (const line of lines) appendLogLine(line);
+      for (const line of lines) appendLogLine(line, kind);
     }, [appendLogLine, flushActiveMerge]);
 
     const expandLastMerge = useCallback(() => {
@@ -299,7 +413,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       const lines = fmt.buildMergedToolExpandedLines(candidate.entries);
       for (let i = 0; i < lines.length; i += 1) {
         const branch = i === lines.length - 1 ? "└" : "│";
-        appendLogLine(`${branch} ${lines[i]}`);
+        appendLogLine(`${branch} ${lines[i]}`, "toolDetail");
       }
       candidate.expanded = true;
       if (active && active.id === candidate.id) setActiveMerge(null);
@@ -315,7 +429,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       if (!normalized) return;
       toolMergeScopeRef.current += 1;
       flushActiveMerge();
-      appendLogLine(`› ${normalized}`);
+      appendLogLine(`› ${normalized}`, "user");
 
       const runtimeWorkspace = String(
         (props.state && props.state.workspaceRoot) || props.workspaceRoot || process.cwd()
@@ -325,7 +439,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       try {
         result = props.runSingleCommand(normalized, runtimeWorkspace);
       } catch (err) {
-        appendLogText(`Error: ${err && err.message ? err.message : "command parse failed"}`);
+        appendLogText(`Error: ${err && err.message ? err.message : "command parse failed"}`, "error");
         return;
       }
       if (!result || typeof result !== "object") return;
@@ -342,6 +456,37 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
         case "error":
           appendLogText(result.output || "");
           return;
+        case "status": {
+          try {
+            const { summarizeSessionUsage, formatSessionUsageStatus } = require("../../code/usageStore");
+            const usageSummary = summarizeSessionUsage({
+              workspaceRoot: runtimeWorkspace,
+              sessionId: (props.state && props.state.sessionId) || "",
+            });
+            appendLogText(formatSessionUsageStatus(usageSummary), "system");
+          } catch (err) {
+            appendLogText(`Error: ${err && err.message ? err.message : "status failed"}`, "error");
+          }
+          return;
+        }
+        case "model": {
+          const applied = applyUcodeModelCommand(props.state || {}, result);
+          appendLogText(applied.output || "", applied.ok ? "system" : "error");
+          if (applied.ok && result.action === "set" && typeof props.persistSessionState === "function") {
+            try {
+              const persisted = props.persistSessionState(props.state);
+              if (persisted && persisted.ok === false) {
+                appendLogText(
+                  `Error: failed to persist session ${(props.state && props.state.sessionId) || ""}: ${persisted.error || "unknown error"}`,
+                  "error"
+                );
+              }
+            } catch {
+              // persist is best-effort after a successful model switch
+            }
+          }
+          return;
+        }
         case "ubus": {
           setStatus({ message: "Checking bus messages...", type: "typing", showTimer: false, startedAt: Date.now() });
           try {
@@ -350,26 +495,26 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
               workspaceRoot: runtimeWorkspace,
               onMessageReceived: (msg) => {
                 const nickname = extractAgentNickname(msg && msg.from) || (msg && msg.from) || "bus";
-                appendLogText(`${nickname}: ${(msg && msg.task) || ""}`);
+                appendLogText(`${nickname}: ${(msg && msg.task) || ""}`, "bus");
               },
             });
             if (!ubusResult || !ubusResult.ok) {
-              appendLogText(`Error: ${(ubusResult && ubusResult.error) || "ubus failed"}`);
+              appendLogText(`Error: ${(ubusResult && ubusResult.error) || "ubus failed"}`, "error");
               return;
             }
             const exchanges = Array.isArray(ubusResult.messageExchanges) ? ubusResult.messageExchanges : [];
             if (exchanges.length > 0) {
               for (const exchange of exchanges) {
                 const nickname = extractAgentNickname(exchange && exchange.from) || (exchange && exchange.from) || "bus";
-                appendLogText(`@${nickname} ${(exchange && exchange.reply) || ""}`);
+                appendLogText(`@${nickname} ${(exchange && exchange.reply) || ""}`, "bus");
               }
             } else if (Number(ubusResult.handled) === 0) {
-              appendLogText("ubus: no pending messages.");
+              appendLogText("ubus: no pending messages.", "system");
             }
             if (typeof props.persistSessionState === "function") {
               const persisted = props.persistSessionState(props.state);
               if (!persisted || persisted.ok === false) {
-                appendLogText(`Error: failed to persist session ${(props.state && props.state.sessionId) || ""}: ${(persisted && persisted.error) || "unknown error"}`);
+                appendLogText(`Error: failed to persist session ${(props.state && props.state.sessionId) || ""}: ${(persisted && persisted.error) || "unknown error"}`, "error");
               }
             }
           } finally {
@@ -379,15 +524,39 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
         }
         case "resume": {
           if (typeof props.resumeSessionState !== "function") {
-            appendLogText("Error: resume unsupported");
+            appendLogText("Error: resume unsupported", "error");
             return;
           }
           const resumed = props.resumeSessionState(props.state, result.sessionId, runtimeWorkspace);
           if (!resumed || !resumed.ok) {
-            appendLogText(`Error: ${(resumed && resumed.error) || "resume failed"}`);
+            appendLogText(`Error: ${(resumed && resumed.error) || "resume failed"}`, "error");
             return;
           }
-          appendLogText(`Resumed session ${resumed.sessionId} (${resumed.restoredMessages} messages).`);
+          // Rebuild the visible log from the restored session transcript so
+          // the user sees prior turns instead of only a status toast.
+          markdownStateRef.current = { inCodeBlock: false };
+          const history = fmt.buildUcodeSessionLogEntries(
+            Array.isArray(props.state && props.state.nlMessages) ? props.state.nlMessages : [],
+            { markdownState: markdownStateRef.current, idPrefix: "h", startSeq: 0 },
+          );
+          const bannerEntries = banner.concat([""]).map((line, idx) => ({
+            id: `b-${idx}`,
+            text: line,
+          }));
+          const notice = {
+            id: `h-resume-${Date.now().toString(36)}`,
+            text: `Resumed session ${resumed.sessionId} (${resumed.restoredMessages} messages).`,
+            kind: "system",
+          };
+          const nextLines = bannerEntries.concat(history.entries).concat([notice]);
+          setLogLines(nextLines.length > 1000 ? nextLines.slice(-1000) : nextLines);
+          lineSeqRef.current = Math.max(
+            bannerEntries.length + 1,
+            Number(history.nextSeq) || 0,
+            nextLines.length,
+          );
+          setActiveMerge(null);
+          lastMergeRef.current = null;
           return;
         }
         case "tool": {
@@ -413,7 +582,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
           backgroundTasksRef.current.set(jobId, taskRecord);
           bumpBackground();
           setStatus({ message: "", type: "thinking", showTimer: false, startedAt: 0 });
-          appendLogText(`[${jobId}] started in background.`);
+          appendLogText(`[${jobId}] started in background.`, "system");
 
           const bgState = {
             workspaceRoot: props.state && props.state.workspaceRoot,
@@ -434,13 +603,13 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
               taskRecord.finishedAt = Date.now();
               taskRecord.summary = String(props.formatNlResult(nlResult, false) || "").trim();
               const title = taskRecord.status === "done" ? "done" : "failed";
-              appendLogText(`[${jobId}] ${title}: ${taskRecord.summary || "no summary"}`);
+              appendLogText(`[${jobId}] ${title}: ${taskRecord.summary || "no summary"}`, "system");
             })
             .catch((err) => {
               taskRecord.status = "failed";
               taskRecord.finishedAt = Date.now();
               taskRecord.summary = err && err.message ? String(err.message) : "background task failed";
-              appendLogText(`[${jobId}] failed: ${taskRecord.summary}`);
+              appendLogText(`[${jobId}] failed: ${taskRecord.summary}`, "system");
             })
             .finally(() => {
               bumpBackground();
@@ -458,6 +627,16 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
             showTimer: true,
             startedAt,
           });
+          const cancelThinkingFlush = () => {
+            if (thinkingTimerRef.current) {
+              clearTimeout(thinkingTimerRef.current);
+              thinkingTimerRef.current = null;
+            }
+          };
+          const flushThinkingStatus = () => {
+            thinkingFlushAtRef.current = Date.now();
+            setNlStatus(collapseThinkingTail(thinkingTailRef.current) || "Thinking...");
+          };
           setNlStatus("Waiting for model...");
           let streamBuf = "";
           let sawStreamText = false;
@@ -469,10 +648,28 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
               signal: abortController.signal,
               onPhase: (event) => {
                 if (!event || typeof event !== "object") return;
-                if (event.type === "request_start") setNlStatus("Waiting for model...");
-                else if (event.type === "thinking_delta") setNlStatus("Thinking...");
-                else if (event.type === "text_delta") setNlStatus("Generating response...");
-                else if (event.type === "tool_request") {
+                if (event.type === "request_start") {
+                  cancelThinkingFlush();
+                  setNlStatus("Waiting for model...");
+                } else if (event.type === "thinking_delta") {
+                  thinkingTailRef.current += String(event.text || "");
+                  const elapsed = Date.now() - thinkingFlushAtRef.current;
+                  if (elapsed >= THINKING_STATUS_THROTTLE_MS) {
+                    cancelThinkingFlush();
+                    flushThinkingStatus();
+                  } else if (!thinkingTimerRef.current) {
+                    // Trailing flush guarantees the final tail lands even
+                    // when the stream ends inside a throttle window.
+                    thinkingTimerRef.current = setTimeout(() => {
+                      thinkingTimerRef.current = null;
+                      flushThinkingStatus();
+                    }, THINKING_STATUS_THROTTLE_MS - elapsed);
+                  }
+                } else if (event.type === "text_delta") {
+                  cancelThinkingFlush();
+                  setNlStatus("Generating response...");
+                } else if (event.type === "tool_request") {
+                  cancelThinkingFlush();
                   const label = fmt.TOOL_LABELS[String(event.name || "").toLowerCase()] ||
                     `Calling ${event.name}`;
                   setNlStatus(`${label}...`);
@@ -509,10 +706,12 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
               },
             });
           } catch (err) {
-            appendLogText(`Error: ${err && err.message ? err.message : "agent loop failed"}`);
+            appendLogText(`Error: ${err && err.message ? err.message : "agent loop failed"}`, "error");
             return;
           } finally {
             pendingTaskRef.current = null;
+            cancelThinkingFlush();
+            thinkingTailRef.current = "";
             setStatus({ message: "", type: "thinking", showTimer: false, startedAt: 0 });
           }
           if (streamBuf) {
@@ -534,7 +733,8 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
             const persisted = props.persistSessionState(props.state);
             if (persisted && persisted.ok === false) {
               appendLogText(
-                `Error: failed to persist session ${(props.state && props.state.sessionId) || ""}: ${persisted.error || "unknown error"}`
+                `Error: failed to persist session ${(props.state && props.state.sessionId) || ""}: ${persisted.error || "unknown error"}`,
+                "error"
               );
             }
           } catch {
@@ -579,7 +779,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
           signal: abortController.signal,
           onMessageReceived: (msg) => {
             const nickname = extractAgentNickname(msg && msg.from) || (msg && msg.from) || "bus";
-            appendLogText(`${nickname}: ${(msg && msg.task) || ""}`);
+            appendLogText(`${nickname}: ${(msg && msg.task) || ""}`, "bus");
             setStatus({
               message: "Working on task...",
               type: "thinking",
@@ -593,7 +793,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
           const nextError = String((ubusResult && ubusResult.error) || "ubus failed");
           if (nextError !== autoBusErrorRef.current) {
             autoBusErrorRef.current = nextError;
-            appendLogText(`Error: ${nextError}`);
+            appendLogText(`Error: ${nextError}`, "error");
           }
           return;
         }
@@ -602,12 +802,12 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
         const exchanges = Array.isArray(ubusResult.messageExchanges) ? ubusResult.messageExchanges : [];
         for (const exchange of exchanges) {
           const nickname = extractAgentNickname(exchange && exchange.from) || (exchange && exchange.from) || "bus";
-          appendLogText(`@${nickname} ${(exchange && exchange.reply) || ""}`);
+          appendLogText(`@${nickname} ${(exchange && exchange.reply) || ""}`, "bus");
         }
         if (Number(ubusResult.handled) > 0 && typeof props.persistSessionState === "function") {
           const persisted = props.persistSessionState(props.state);
           if (!persisted || persisted.ok === false) {
-            appendLogText(`Error: failed to persist session ${(props.state && props.state.sessionId) || ""}: ${(persisted && persisted.error) || "unknown error"}`);
+            appendLogText(`Error: failed to persist session ${(props.state && props.state.sessionId) || ""}: ${(persisted && persisted.error) || "unknown error"}`, "error");
           }
         }
       } finally {
@@ -627,7 +827,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
         autoBusQueuedRef.current = true;
         runChainRef.current = runChainRef.current
           .then(() => runAutoBusOnce())
-          .catch((err) => appendLogText(`Error: ${err && err.message ? err.message : "ubus failed"}`))
+          .catch((err) => appendLogText(`Error: ${err && err.message ? err.message : "ubus failed"}`, "error"))
           .finally(() => {
             autoBusQueuedRef.current = false;
           });
@@ -651,7 +851,7 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
       // Serialize executions so streaming tasks don't interleave.
       runChainRef.current = runChainRef.current
         .then(() => executeLine(value))
-        .catch((err) => appendLogText(`Error: ${err && err.message ? err.message : err}`));
+        .catch((err) => appendLogText(`Error: ${err && err.message ? err.message : err}`, "error"));
     }, [draft, executeLine, appendLogText]);
 
     useEffect(() => {
@@ -680,18 +880,107 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
 
     const statusText = useMemoStatusText(React, status, spinnerTick, getBackgroundSuffix());
 
-    // Top-level only catches Ctrl+C and Ctrl+O (expand last tool group);
-    // the editor handles all text editing.
+    // Top-level catches Ctrl+C / Ctrl+O, plus completion popup navigation
+    // while a slash/agent menu is open.
     useInput((input, key) => {
       if (key.ctrl && input === "c") { exit(); return; }
       if (key.ctrl && input === "o") { expandLastMerge(); return; }
+      if (!completionsOpen) return;
+      if (key.upArrow) {
+        setCompletionIndex((i) => {
+          const next = (i - 1 + completions.length) % completions.length;
+          setCompletionWindowStart((ws) => {
+            if (next < ws) return next;
+            if (next === completions.length - 1) {
+              return Math.max(0, completions.length - POPUP_PAGE_SIZE);
+            }
+            return ws;
+          });
+          return next;
+        });
+        return;
+      }
+      if (key.downArrow) {
+        setCompletionIndex((i) => {
+          const next = (i + 1) % completions.length;
+          setCompletionWindowStart((ws) => {
+            if (next === 0) return 0;
+            if (next >= ws + POPUP_PAGE_SIZE) return next - POPUP_PAGE_SIZE + 1;
+            return ws;
+          });
+          return next;
+        });
+        return;
+      }
+      if (key.return) {
+        // Leaf completions (e.g. /resume <session>) run immediately on Enter.
+        // Parents with children only fill the draft so the next menu can open.
+        const item = completions[Math.max(0, Math.min(completions.length - 1, completionIndex))];
+        if (item && !item.hasChildren) {
+          const cmd = String(item.replace || "").trim();
+          setCompletionIndex(0);
+          setCompletionSuppressedDraft(null);
+          if (cmd) submit(cmd);
+          return;
+        }
+        acceptCompletion();
+        return;
+      }
+      if (key.tab) {
+        acceptCompletion();
+        return;
+      }
+      if (key.escape) {
+        setCompletionSuppressedDraft(null);
+        setDraft("");
+        setDraftVersion((v) => v + 1);
+      }
     }, { isActive: interactive });
 
     return h(Box, { flexDirection: "column", width: "100%" },
       h(Box, { flexDirection: "column", width: "100%" },
-        ...logLines.map((item) =>
-          h(Text, { key: item.id }, item.text || " ")
-        )
+        ...(() => {
+          // Re-render raw markdown at paint time so leftover ** / ### from
+          // older append paths or nested `**code**` patterns still resolve.
+          const mdState = { inCodeBlock: false };
+          return logLines.map((item, idx) => {
+            let text = item.text || " ";
+            if (MARKDOWN_LOG_KINDS.has(item.kind) && /(?:\*\*|__|^\s*#{1,6}\s|^\s*`{3})/m.test(text)) {
+              try {
+                const rendered = fmt.renderLogLinesWithMarkdownAnsi(text, mdState);
+                if (Array.isArray(rendered) && rendered.length > 0) {
+                  text = rendered.length === 1 ? rendered[0] : rendered.join("\n");
+                }
+              } catch {
+                // keep original
+              }
+            } else if (MARKDOWN_LOG_KINDS.has(item.kind) && mdState.inCodeBlock) {
+              try {
+                const rendered = fmt.renderLogLinesWithMarkdownAnsi(text, mdState);
+                if (Array.isArray(rendered) && rendered[0] != null) text = rendered[0];
+              } catch {
+                // keep original
+              }
+            }
+            const textEl = h(Text, { ...resolveLogLineTextProps(item.kind) }, text || " ");
+            // Give user turns a blank line above/below so › prompts don't
+            // sit flush against system/tool rows. Multi-line user blocks
+            // only pad the outer edges.
+            if (item.kind === "user") {
+              const prev = logLines[idx - 1];
+              const next = logLines[idx + 1];
+              const marginTop = !prev || prev.kind !== "user" ? 1 : 0;
+              const marginBottom = !next || next.kind !== "user" ? 1 : 0;
+              return h(Box, {
+                key: item.id,
+                width: "100%",
+                marginTop,
+                marginBottom,
+              }, textEl);
+            }
+            return h(Text, { key: item.id, ...resolveLogLineTextProps(item.kind) }, text || " ");
+          });
+        })()
       ),
       activeMerge ? h(Box, null,
         h(Text, { color: activeMerge.entries.some((e) => e.isError) ? "red" : "cyan" },
@@ -703,20 +992,62 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
         h(Box, { flexGrow: 1 }),
         h(Text, { color: "gray" }, `v${fmt.UCODE_VERSION}`),
       ),
+      completionsOpen ? (() => {
+        const start = Math.min(completionWindowStart, Math.max(0, completions.length - POPUP_PAGE_SIZE));
+        const end = Math.min(completions.length, start + POPUP_PAGE_SIZE);
+        const visible = completions.slice(start, end);
+        const cols = Math.max(8, size.cols || 80);
+        // Frame the popup with a top rule; MultilineInput's borderTop is the
+        // matching bottom rule, so we intentionally omit a trailing ─ here.
+        return h(Box, { flexDirection: "column", width: "100%" },
+          h(Text, { color: "gray" }, "─".repeat(cols)),
+          ...visible.map((s, idxInWindow) => {
+            const idx = start + idxInWindow;
+            const selected = idx === completionIndex;
+            // Keep label+description in one Text. Splitting into sibling
+            // Text nodes with wrap:"truncate" lets Yoga shrink the label
+            // and mid-cut commands (e.g. "/help" → "/he p").
+            const line = s.description
+              ? `${s.label}  ${s.description}`
+              : String(s.label || "");
+            return h(Box, { key: `cmp-${idx}`, width: "100%" },
+              h(Text, {
+                color: selected ? "cyan" : "gray",
+                inverse: selected,
+                wrap: "truncate",
+              }, line),
+            );
+          }),
+        );
+      })() : null,
       h(Box, { width: "100%" },
         h(MultilineInput, {
           value: draft,
           valueVersion: draftVersion,
-          onChange: (next) => setDraft(next),
-          onSubmit: (value) => submit(value),
+          onChange: (next) => {
+            if (completionSuppressedDraft !== null && next !== completionSuppressedDraft) {
+              setCompletionSuppressedDraft(null);
+            }
+            setDraft(next);
+          },
+          onSubmit: (value) => {
+            setCompletionSuppressedDraft(null);
+            submit(value);
+          },
           onCancel: () => {
+            if (completionsOpen) {
+              setCompletionSuppressedDraft(null);
+              setDraft("");
+              setDraftVersion((v) => v + 1);
+              return;
+            }
             // If a task is in flight, Esc requests cancellation. Otherwise
             // it clears the agent selection (matches blessed). The text
             // value is left alone so the user doesn't lose what they typed.
             const pending = pendingTaskRef.current;
             if (pending && pending.abortController && !pending.abortController.signal.aborted) {
               try { pending.abortController.abort(); } catch { /* ignore */ }
-              appendLogLine("⚙ Cancellation requested. Stopping the current task...");
+              appendLogLine("⚙ Cancellation requested. Stopping the current task...", "system");
               setStatus({
                 message: "Cancelling...",
                 type: "waiting",
@@ -736,11 +1067,12 @@ function createUcodeApp({ React, ink, props, interactive = true }) {
           onArrowRightAtEmpty: () => onArrowSideAtEmpty("right"),
           width: Math.max(20, (size.cols || 80) - 4),
           interactive,
+          interceptArrowsAndEnter: completionsOpen,
           placeholder: "",
           promptPrefix: targetAgent ? `›@${getAgentLabel(targetAgent)} ` : "› ",
-          // The agents footer is rendered below the input. Matching chat's
-          // IME parking contract keeps the hardware cursor aligned with the
-          // inverse caret instead of drifting to the bottom of the frame.
+          // Completions render ABOVE the input. Only the Agents footer is
+          // below — counting popup rows here parks the hardware cursor up
+          // into the menu (ghost block on /status etc.).
           linesBelowInput: 1,
           // During model/tool activity ucode redraws the status line every
           // spinner frame. Keeping the hardware cursor hidden avoids a
@@ -813,7 +1145,7 @@ function runUcodeInkTui(props = {}) {
   });
 }
 
-module.exports = { runUcodeInkTui, createUcodeApp, computeStatusText };
+module.exports = { runUcodeInkTui, createUcodeApp, computeStatusText, collapseThinkingTail, resolveLogLineTextProps };
 
 function inferStatusType(text = "", requestedType = "") {
   const type = String(requestedType || "").trim().toLowerCase();
@@ -837,6 +1169,27 @@ function inferStatusType(text = "", requestedType = "") {
  * combination while a task is in flight, mirroring updateStatus() in the
  * blessed implementation.
  */
+function collapseThinkingTail(text, maxChars = 80) {
+  const collapsed = String(text || "").replace(/\s+/g, " ").trim();
+  const parsed = Number(maxChars);
+  const limit = Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : 80;
+  if (!collapsed) return "";
+
+  // Prefer the latest markdown emphasis / section so the status line shows the
+  // current thought instead of a mid-word tail of an earlier heading.
+  let candidate = collapsed;
+  const boldParts = collapsed.match(/\*\*[^*]+\*\*/g);
+  if (boldParts && boldParts.length > 0) {
+    candidate = boldParts[boldParts.length - 1].replace(/\*/g, "").trim() || candidate;
+  } else {
+    const clauses = collapsed.split(/(?<=[.!?。！？])\s+/).map((part) => part.trim()).filter(Boolean);
+    if (clauses.length > 1) candidate = clauses[clauses.length - 1];
+  }
+
+  if (candidate.length <= limit) return candidate;
+  return `…${candidate.slice(-(limit - 1))}`;
+}
+
 function computeStatusText(status, spinnerTick, backgroundSuffix = "") {
   const message = String((status && status.message) || "");
   const suffix = String(backgroundSuffix || "");