u-foo 2.5.13 → 2.5.15

package/src/ui/format/markdownRenderer.js

@@ -1,10 +1,13 @@
 /**
- * Shared blessed-compatible markdown renderer for TUI output.
+ * Shared markdown renderer for TUI log output.
  *
- * Used by both ucode TUI and ufoo chat to render agent responses
- * with fenced code blocks, headings, quotes, bullets, inline code, etc.
+ * Produces either blessed tags (chat / legacy) or chalk ANSI (Ink ucode).
+ * Terminals cannot change font size, so headings/emphasis use color + weight
+ * instead of literal `#` / `**` markers.
  */
 
+const chalk = require("chalk");
+
 function stripLeakedEscapeTags(text = "") {
   const source = String(text == null ? "" : text);
   const withoutClosedTags = source.replace(/\{[^{}\n]*escape[^{}\n]*\}/gi, "");
@@ -12,35 +15,157 @@ function stripLeakedEscapeTags(text = "") {
   return withoutDanglingEscape.replace(/\{\s*\/?\s*e?s?c?a?p?e?[^{}\n]*$/gi, "");
 }
 
-function renderMarkdownLines(text = "", state = {}, escapeFn = (value) => String(value || "")) {
-  const renderState = state && typeof state === "object" ? state : {};
-  if (typeof renderState.inCodeBlock !== "boolean") {
-    renderState.inCodeBlock = false;
+function createBlessedAdapters(escapeFn = (value) => String(value || "")) {
+  const escape = (value) => escapeFn(value);
+  return {
+    escape,
+    bold: (value) => `{bold}{white-fg}${escape(value)}{/white-fg}{/bold}`,
+    italic: (value) => `{italic}{gray-fg}${escape(value)}{/gray-fg}{/italic}`,
+    code: (value) => `{yellow-fg}${escape(value)}{/yellow-fg}`,
+    heading: (level, value) => {
+      const depth = Math.max(1, Math.min(6, Number(level) || 1));
+      if (depth <= 2) return `{cyan-fg}{bold}${value}{/bold}{/cyan-fg}`;
+      if (depth === 3) return `{blue-fg}{bold}${value}{/bold}{/blue-fg}`;
+      return `{bold}${value}{/bold}`;
+    },
+    quoteMarker: () => "{gray-fg}│{/gray-fg}",
+    bulletMarker: () => "{gray-fg}•{/gray-fg}",
+    orderedMarker: (value) => `{gray-fg}${escape(value)}.{/gray-fg}`,
+    rule: () => "{gray-fg}────────────────────────{/gray-fg}",
+    fenceOpen: (language) => (
+      language
+        ? `{gray-fg}┌ code:${escape(language)}{/gray-fg}`
+        : "{gray-fg}┌ code{/gray-fg}"
+    ),
+    fenceClose: () => "{gray-fg}└{/gray-fg}",
+    fenceBody: (value) => `{gray-fg}│{/gray-fg} {white-fg}${escape(value)}{/white-fg}`,
+    error: (value) => `{red-fg}${value}{/red-fg}`,
+  };
+}
+
+function createAnsiAdapters() {
+  // Ink always paints into a TTY-capable stdout; force color so bold/heading
+  // styles survive even when chalk's autodetection thinks we're non-TTY
+  // (e.g. piped test harnesses that still render Ink).
+  const paint = typeof chalk.Instance === "function"
+    ? new chalk.Instance({ level: Math.max(Number(chalk.level) || 0, 2) })
+    : chalk;
+  return {
+    escape: (value) => String(value || ""),
+    // Bold gets weight + brighter foreground so it reads even when the
+    // terminal theme barely differentiates ANSI bold.
+    bold: (value) => paint.bold.whiteBright(String(value || "")),
+    italic: (value) => paint.italic.dim(String(value || "")),
+    code: (value) => paint.yellow(String(value || "")),
+    heading: (level, value) => {
+      const depth = Math.max(1, Math.min(6, Number(level) || 1));
+      const text = String(value || "");
+      if (depth <= 2) return paint.bold.cyan(text);
+      if (depth === 3) return paint.bold.blue(text);
+      return paint.bold(text);
+    },
+    quoteMarker: () => paint.gray("│"),
+    bulletMarker: () => paint.gray("•"),
+    orderedMarker: (value) => paint.gray(`${value}.`),
+    rule: () => paint.gray("────────────────────────"),
+    fenceOpen: (language) => (
+      language
+        ? paint.gray(`┌ code:${language}`)
+        : paint.gray("┌ code")
+    ),
+    fenceClose: () => paint.gray("└"),
+    fenceBody: (value) => `${paint.gray("│")} ${paint.white(String(value || ""))}`,
+    error: (value) => paint.red(String(value || "")),
+  };
+}
+
+/**
+ * Apply inline markdown to a single line.
+ * Scans left-to-right so **bold** wins over nested `code`/`*` patterns
+ * (LLMs often emit **`name`** which previously left literal asterisks).
+ */
+function renderInlineMarkdown(input = "", adapters = createBlessedAdapters()) {
+  const source = String(input || "");
+  if (!source) return "";
+
+  const escape = adapters.escape || ((value) => String(value || ""));
+  const styleBold = adapters.bold || escape;
+  const styleItalic = adapters.italic || escape;
+  const styleCode = adapters.code || escape;
+
+  if (!source.includes("`") && !source.includes("*") && !source.includes("_")) {
+    return escape(source);
   }
 
-  const renderInlineCode = (input = "") => {
-    const source = String(input || "");
-    if (!source) return "";
-    if (!source.includes("`")) return escapeFn(source);
-
-    let out = "";
-    let cursor = 0;
-    const pattern = /`([^`\n]+)`/g;
-    let match = pattern.exec(source);
-    while (match) {
-      const index = Number(match.index) || 0;
-      if (index > cursor) {
-        out += escapeFn(source.slice(cursor, index));
+  const renderInner = (chunk) => renderInlineMarkdown(chunk, adapters);
+
+  let out = "";
+  let i = 0;
+  while (i < source.length) {
+    // **bold** / __bold__
+    if (source.startsWith("**", i) || source.startsWith("__", i)) {
+      const mark = source.slice(i, i + 2);
+      const close = source.indexOf(mark, i + 2);
+      if (close !== -1) {
+        const inner = source.slice(i + 2, close);
+        out += styleBold(renderInner(inner));
+        i = close + 2;
+        continue;
       }
-      out += `{yellow-fg}${escapeFn(match[1])}{/yellow-fg}`;
-      cursor = index + match[0].length;
-      match = pattern.exec(source);
     }
-    if (cursor < source.length) {
-      out += escapeFn(source.slice(cursor));
+
+    // `code`
+    if (source[i] === "`") {
+      const close = source.indexOf("`", i + 1);
+      if (close !== -1) {
+        let inner = source.slice(i + 1, close);
+        // Code that is only a bold/italic wrapper → treat as emphasis.
+        const boldOnly = inner.match(/^\*\*(.+)\*\*$/) || inner.match(/^__(.+)__$/);
+        const italicOnly = !boldOnly && (inner.match(/^\*(.+)\*$/) || inner.match(/^_(.+)_$/));
+        if (boldOnly) out += styleBold(renderInner(boldOnly[1]));
+        else if (italicOnly) out += styleItalic(renderInner(italicOnly[1]));
+        else out += styleCode(inner);
+        i = close + 1;
+        continue;
+      }
     }
-    return out;
-  };
+
+    // *italic* / _italic_ (single delimiter; avoid ** / __)
+    if (
+      (source[i] === "*" && source[i + 1] !== "*")
+      || (source[i] === "_" && source[i + 1] !== "_")
+    ) {
+      const mark = source[i];
+      const close = source.indexOf(mark, i + 1);
+      if (close !== -1 && source[close + 1] !== mark) {
+        const inner = source.slice(i + 1, close);
+        if (inner && !inner.includes("\n")) {
+          out += styleItalic(renderInner(inner));
+          i = close + 1;
+          continue;
+        }
+      }
+    }
+
+    // Accumulate plain run until the next markup candidate.
+    let next = source.length;
+    for (const ch of ["*", "_", "`"]) {
+      const at = source.indexOf(ch, i + 1);
+      if (at !== -1 && at < next) next = at;
+    }
+    // Also stop at `**` start from current if we failed to parse above.
+    out += escape(source.slice(i, next));
+    i = next === i ? i + 1 : next;
+  }
+
+  return out;
+}
+
+function renderMarkdownLinesWithAdapters(text = "", state = {}, adapters = createBlessedAdapters()) {
+  const renderState = state && typeof state === "object" ? state : {};
+  if (typeof renderState.inCodeBlock !== "boolean") {
+    renderState.inCodeBlock = false;
+  }
 
   const lines = String(text || "").split(/\r?\n/);
   const out = [];
@@ -51,71 +176,89 @@ function renderMarkdownLines(text = "", state = {}, escapeFn = (value) => String
     if (fenceMatch) {
       if (!renderState.inCodeBlock) {
         const language = String(fenceMatch[3] || "").trim();
-        const label = language
-          ? `┌ code:${escapeFn(language)}`
-          : "┌ code";
-        out.push(`{gray-fg}${label}{/gray-fg}`);
+        out.push(adapters.fenceOpen(language));
         renderState.inCodeBlock = true;
       } else {
-        out.push("{gray-fg}└{/gray-fg}");
+        out.push(adapters.fenceClose());
         renderState.inCodeBlock = false;
       }
       continue;
     }
 
     if (renderState.inCodeBlock) {
-      out.push(`{gray-fg}│{/gray-fg} {white-fg}${escapeFn(raw)}{/white-fg}`);
-    } else {
-      const headingMatch = raw.match(/^(\s*)(#{1,6})\s+(.*)$/);
-      if (headingMatch) {
-        const indent = escapeFn(headingMatch[1] || "");
-        const marks = escapeFn(headingMatch[2] || "");
-        const content = renderInlineCode(headingMatch[3] || "");
-        out.push(`${indent}{cyan-fg}${marks}{/cyan-fg} {bold}${content}{/bold}`);
-        continue;
-      }
+      out.push(adapters.fenceBody(raw));
+      continue;
+    }
 
-      const quoteMatch = raw.match(/^(\s*)>\s?(.*)$/);
-      if (quoteMatch) {
-        const indent = escapeFn(quoteMatch[1] || "");
-        const content = renderInlineCode(quoteMatch[2] || "");
-        out.push(`${indent}{gray-fg}▍{/gray-fg} ${content}`);
-        continue;
-      }
+    if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(raw)) {
+      out.push(adapters.rule());
+      continue;
+    }
 
-      const bulletMatch = raw.match(/^(\s*)([-*+])\s+(.*)$/);
-      if (bulletMatch) {
-        const indent = escapeFn(bulletMatch[1] || "");
-        const content = renderInlineCode(bulletMatch[3] || "");
-        out.push(`${indent}{gray-fg}•{/gray-fg} ${content}`);
-        continue;
-      }
+    const headingMatch = raw.match(/^(\s*)(#{1,6})\s+(.*)$/);
+    if (headingMatch) {
+      const indent = adapters.escape(headingMatch[1] || "");
+      const level = String(headingMatch[2] || "#").length;
+      const content = adapters.heading(
+        level,
+        renderInlineMarkdown(headingMatch[3] || "", adapters),
+      );
+      out.push(`${indent}${content}`);
+      continue;
+    }
 
-      const orderedMatch = raw.match(/^(\s*)(\d+)\.\s+(.*)$/);
-      if (orderedMatch) {
-        const indent = escapeFn(orderedMatch[1] || "");
-        const order = escapeFn(orderedMatch[2] || "");
-        const content = renderInlineCode(orderedMatch[3] || "");
-        out.push(`${indent}{gray-fg}${order}.{/gray-fg} ${content}`);
-        continue;
-      }
+    const quoteMatch = raw.match(/^(\s*)>\s?(.*)$/);
+    if (quoteMatch) {
+      const indent = adapters.escape(quoteMatch[1] || "");
+      const content = renderInlineMarkdown(quoteMatch[2] || "", adapters);
+      out.push(`${indent}${adapters.quoteMarker()} ${content}`);
+      continue;
+    }
 
-      const errorMatch = raw.match(/^(\s*)(Error:\s+.*)$/i);
-      if (errorMatch) {
-        const indent = escapeFn(errorMatch[1] || "");
-        const content = renderInlineCode(errorMatch[2] || "");
-        out.push(`${indent}{red-fg}${content}{/red-fg}`);
-        continue;
-      }
+    const bulletMatch = raw.match(/^(\s*)([-*+])\s+(.*)$/);
+    if (bulletMatch) {
+      const indent = adapters.escape(bulletMatch[1] || "");
+      const content = renderInlineMarkdown(bulletMatch[3] || "", adapters);
+      out.push(`${indent}${adapters.bulletMarker()} ${content}`);
+      continue;
+    }
+
+    const orderedMatch = raw.match(/^(\s*)(\d+)\.\s+(.*)$/);
+    if (orderedMatch) {
+      const indent = adapters.escape(orderedMatch[1] || "");
+      const content = renderInlineMarkdown(orderedMatch[3] || "", adapters);
+      out.push(`${indent}${adapters.orderedMarker(orderedMatch[2] || "")} ${content}`);
+      continue;
+    }
 
-      out.push(renderInlineCode(raw));
+    const errorMatch = raw.match(/^(\s*)(Error:\s+.*)$/i);
+    if (errorMatch) {
+      const indent = adapters.escape(errorMatch[1] || "");
+      const content = renderInlineMarkdown(errorMatch[2] || "", adapters);
+      out.push(`${indent}${adapters.error(content)}`);
+      continue;
     }
+
+    out.push(renderInlineMarkdown(raw, adapters));
   }
 
   return out;
 }
 
+function renderMarkdownLines(text = "", state = {}, escapeFn = (value) => String(value || "")) {
+  return renderMarkdownLinesWithAdapters(text, state, createBlessedAdapters(escapeFn));
+}
+
+function renderMarkdownLinesAnsi(text = "", state = {}) {
+  return renderMarkdownLinesWithAdapters(text, state, createAnsiAdapters());
+}
+
 module.exports = {
   stripLeakedEscapeTags,
+  renderInlineMarkdown,
   renderMarkdownLines,
+  renderMarkdownLinesAnsi,
+  renderMarkdownLinesWithAdapters,
+  createBlessedAdapters,
+  createAnsiAdapters,
 };

package/src/ui/ink/ChatApp.js

@@ -457,7 +457,13 @@ const CHAT_LOG_ROW_PALETTE = {
 // margin-top on the next entry, because per-item rendering can't know a
 // group's end until the following entry arrives.
 function decorateStaticLogEntry(prev, entry) {
-  const row = buildChatLogLineModel(entry);
+  const markdownState = prev && prev.markdownState && typeof prev.markdownState === "object"
+    ? { inCodeBlock: Boolean(prev.markdownState.inCodeBlock) }
+    : { inCodeBlock: false };
+  const sourceText = entry && typeof entry === "object" && entry.text != null
+    ? String(entry.text)
+    : entry;
+  const row = buildChatLogLineModel(sourceText, { markdownState });
   const continuation = Boolean(
     prev
     && (row.kind === "plain" || row.kind === "spacer")
@@ -468,7 +474,7 @@ function decorateStaticLogEntry(prev, entry) {
   // block, and only when the previous block was a transcript group (whose
   // old dynamic renderer contributed a trailing marginBottom).
   const marginBefore = Boolean(!continuation && prev && STATIC_GROUPABLE_KINDS.has(prev.groupKind));
-  return { entry, row, groupKind, continuation, marginBefore };
+  return { entry, row, groupKind, continuation, marginBefore, markdownState };
 }
 
 function createInkStreamState({
@@ -713,8 +719,9 @@ function buildInternalLogRows(lines = [], width = 80, maxRows = 20) {
     let rendered = [classified.text];
     if (classified.markdown) {
       try {
-        rendered = fmt.renderLogLinesWithMarkdown(classified.text, markdownState, (value) => String(value || ""))
-          .map(stripInternalLogMarkup);
+        // Share ucode's ANSI markdown renderer so Ink can show bold/code
+        // without blessed tags (which would otherwise be stripped).
+        rendered = fmt.renderLogLinesWithMarkdownAnsi(classified.text, markdownState);
       } catch {
         rendered = [classified.text];
       }
@@ -2484,7 +2491,17 @@ function createChatApp({ React, ink, props, interactive = true }) {
       exit,
     ]);
 
-    const onArrowUpAtTop = useCallback(() => {
+    const onArrowUpAtTop = useCallback((currentValue) => {
+      // Clear @-target before history so Up from an empty ›@agent prompt
+      // restores the bare › prompt instead of recalling a prior draft.
+      const inputValue = currentValue != null ? currentValue : state.draft;
+      if (fmt.shouldClearAgentSelectionOnUp({
+        agentSelectionMode: state.agentSelectionMode,
+        inputValue,
+      })) {
+        dispatch({ type: "agents/clearTarget" });
+        return;
+      }
       if (state.inputHistory.length > 0) {
         const next = Math.max(0, state.historyIndex - 1);
         if (next !== state.historyIndex || state.draft !== state.inputHistory[next]) {
@@ -2492,10 +2509,8 @@ function createChatApp({ React, ink, props, interactive = true }) {
           dispatch({ type: "draft/set", value: state.inputHistory[next] || "" });
           setCompletionSuppressedDraft(state.inputHistory[next] || "");
           setDraftVersion((v) => v + 1);
-          return;
         }
       }
-      if (state.agentSelectionMode) dispatch({ type: "agents/clearTarget" });
     }, [state.inputHistory, state.historyIndex, state.draft, state.agentSelectionMode]);
 
     const onArrowDownAtBottom = useCallback((currentValue) => {
@@ -2985,7 +3000,23 @@ function createChatApp({ React, ink, props, interactive = true }) {
           });
           return;
         }
-        if (key.return || key.tab) { acceptCompletion(); return; }
+        if (key.return) {
+          // Final/leaf completions submit immediately; parents only fill draft.
+          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) void submit(cmd);
+            return;
+          }
+          acceptCompletion();
+          return;
+        }
+        if (key.tab) {
+          acceptCompletion();
+          return;
+        }
         if (key.escape) {
           setCompletionSuppressedDraft(null);
           dispatch({ type: "draft/clear" });