mini-coder 0.5.3 → 0.5.5

package/src/ui/conversation.test.ts

@@ -64,7 +64,15 @@ async function renderBufferRows(
   node: Node | null,
   cols = PREVIEW_WIDTH,
   rows = 24,
-): Promise<Array<{ text: string; fgColors: Array<string | null> }>> {
+): Promise<
+  Array<{
+    text: string;
+    fgColors: Array<string | null>;
+    bold: boolean[];
+    italic: boolean[];
+    underline: boolean[];
+  }>
+> {
   if (!node) {
     return [];
   }
@@ -79,16 +87,28 @@ async function renderBufferRows(
     throw new Error("Expected cel-tui to produce a render buffer");
   }
 
-  const snapshot: Array<{ text: string; fgColors: Array<string | null> }> = [];
+  const snapshot: Array<{
+    text: string;
+    fgColors: Array<string | null>;
+    bold: boolean[];
+    italic: boolean[];
+    underline: boolean[];
+  }> = [];
   for (let y = 0; y < rows; y++) {
     let text = "";
     const fgColors: Array<string | null> = [];
+    const bold: boolean[] = [];
+    const italic: boolean[] = [];
+    const underline: boolean[] = [];
     for (let x = 0; x < cols; x++) {
       const cell = buffer.get(x, y);
       text += cell.char;
       fgColors.push(cell.fgColor);
+      bold.push(cell.bold);
+      italic.push(cell.italic);
+      underline.push(cell.underline);
     }
-    snapshot.push({ text, fgColors });
+    snapshot.push({ text, fgColors, bold, italic, underline });
   }
 
   cel.stop();
@@ -119,18 +139,20 @@ afterEach(() => {
 });
 
 describe("ui/conversation", () => {
-  test("renderAssistantMessage preserves visible paragraph order in streamed markdown", () => {
+  test("renderAssistantMessage keeps raw markdown markers visible in assistant text", () => {
     // Arrange
-    const message = fauxAssistantMessage("First paragraph\n\nSecond paragraph");
+    const message = fauxAssistantMessage(
+      "# Heading\n\nUse **bold** and `code`.\n- item",
+    );
 
     // Act
     const text = collectText(renderAssistantMessage(message, RENDER_OPTS));
-    const firstParagraphIndex = text.indexOf("First paragraph");
-    const secondParagraphIndex = text.indexOf("Second paragraph");
 
     // Assert
-    expect(firstParagraphIndex).toBeGreaterThanOrEqual(0);
-    expect(secondParagraphIndex).toBeGreaterThan(firstParagraphIndex);
+    expect(text).toContain("# Heading");
+    expect(text).toContain("Use **bold** and `code`.");
+    expect(text).toContain("- item");
+    expect(text).not.toContain("Use bold and code.");
   });
 
   test("renderAssistantMessage with reasoning enabled shows thinking blocks", () => {
@@ -196,18 +218,131 @@ describe("ui/conversation", () => {
     expect(height).toBe(6);
   });
 
-  test("renderAssistantMessage keeps markdown paragraph spacing inside a single text block", () => {
+  test("renderAssistantMessage syntax-highlights markdown tokens with theme-derived colors", async () => {
     // Arrange
-    const message = fauxAssistantMessage("First paragraph\n\nSecond paragraph");
+    const theme = {
+      ...DEFAULT_THEME,
+      accentText: "color14",
+      secondaryAccentText: "color09",
+      diffAdded: "color10",
+      mutedText: "color13",
+    } satisfies typeof DEFAULT_THEME;
+    const message = fauxAssistantMessage("# Heading\n- item\n> quote\n`code`");
 
     // Act
-    const height = measureRenderedHeight(
-      renderAssistantMessage(message, RENDER_OPTS),
-      PREVIEW_WIDTH,
+    const rows = await renderBufferRows(
+      renderAssistantMessage(message, {
+        ...RENDER_OPTS,
+        theme,
+      }),
+      32,
+      12,
     );
+    const headingRow = rows.find((row) => row.text.includes("# Heading"));
+    const bulletRow = rows.find((row) => row.text.includes("- item"));
+    const quoteRow = rows.find((row) => row.text.includes("> quote"));
+    const codeRow = rows.find((row) => row.text.includes("`code`"));
 
     // Assert
-    expect(height).toBe(3);
+    expect(headingRow).toBeDefined();
+    expect(bulletRow).toBeDefined();
+    expect(quoteRow).toBeDefined();
+    expect(codeRow).toBeDefined();
+    expect(headingRow?.fgColors[headingRow.text.indexOf("#")]).toBe(
+      theme.accentText ?? null,
+    );
+    expect(bulletRow?.fgColors[bulletRow.text.indexOf("-")]).toBe(
+      theme.secondaryAccentText ?? null,
+    );
+    expect(quoteRow?.fgColors[quoteRow.text.indexOf(">")]).toBe(
+      theme.mutedText ?? null,
+    );
+    expect(quoteRow?.italic[quoteRow.text.indexOf(">")]).toBe(true);
+    expect(codeRow?.fgColors[codeRow.text.indexOf("`")]).toBe(
+      theme.diffAdded ?? null,
+    );
+  });
+
+  test("renderAssistantMessage syntax-highlights markdown emphasis and links with style cues", async () => {
+    // Arrange
+    const theme = {
+      ...DEFAULT_THEME,
+      accentText: "color14",
+      diffAdded: "color10",
+    } satisfies typeof DEFAULT_THEME;
+    const message = fauxAssistantMessage(
+      "*italic* **bold** [label](https://example.com)",
+    );
+
+    // Act
+    const rows = await renderBufferRows(
+      renderAssistantMessage(message, {
+        ...RENDER_OPTS,
+        theme,
+      }),
+      64,
+      12,
+    );
+    const contentRow = rows.find((row) =>
+      row.text.includes("*italic* **bold** [label](https://example.com)"),
+    );
+
+    // Assert
+    expect(contentRow).toBeDefined();
+    expect(contentRow?.italic[contentRow.text.indexOf("*italic*")]).toBe(true);
+    expect(contentRow?.bold[contentRow.text.indexOf("**bold**")]).toBe(true);
+    expect(contentRow?.fgColors[contentRow.text.indexOf("label")]).toBe(
+      theme.diffAdded ?? null,
+    );
+    expect(
+      contentRow?.fgColors[contentRow.text.indexOf("https://example.com")],
+    ).toBe(theme.accentText ?? null);
+    expect(
+      contentRow?.underline[contentRow.text.indexOf("https://example.com")],
+    ).toBe(true);
+  });
+
+  test("renderAssistantMessage with adjacent text blocks preserves markdown structure across the block boundary", async () => {
+    // Arrange
+    const singleBlock = {
+      content: [fauxText("```js\nconst x = 1;\n```")],
+    };
+    const splitBlocks = {
+      content: [fauxText("```js\n"), fauxText("const x = 1;\n```")],
+    };
+
+    // Act
+    const singleRows = await renderBufferRows(
+      renderAssistantMessage(singleBlock, RENDER_OPTS),
+      40,
+      12,
+    );
+    const splitRows = await renderBufferRows(
+      renderAssistantMessage(splitBlocks, RENDER_OPTS),
+      40,
+      12,
+    );
+    const singleHeight = measureRenderedHeight(
+      renderAssistantMessage(singleBlock, RENDER_OPTS),
+      40,
+    );
+    const splitHeight = measureRenderedHeight(
+      renderAssistantMessage(splitBlocks, RENDER_OPTS),
+      40,
+    );
+    const singleRow = singleRows.find((row) =>
+      row.text.includes("const x = 1;"),
+    );
+    const splitRow = splitRows.find((row) => row.text.includes("const x = 1;"));
+
+    // Assert
+    expect(singleRow).toBeDefined();
+    expect(splitRow).toBeDefined();
+    expect(singleHeight).toBe(splitHeight);
+    expect(singleRow?.fgColors[singleRow.text.indexOf("const")]).not.toBe(null);
+    expect(splitRow?.fgColors[splitRow.text.indexOf("const")]).toBe(
+      singleRow?.fgColors[singleRow.text.indexOf("const")],
+    );
   });
 
   test("buildConversationLogNodes with a pending shell result keeps the streamed call and result append-only", () => {
@@ -926,6 +1061,37 @@ describe("ui/conversation", () => {
     expect(text).not.toContain("seq 1 25");
   });
 
+  test("renderToolResult for a wrapped shell preview keeps the summary directly below the visible tail", async () => {
+    // Arrange
+    const output = [
+      "line 1",
+      "line 2",
+      "line 3",
+      "line 4",
+      "this is a very long wrapped line that will take more than six rendered rows in the preview width so it gets dropped entirely",
+      "tail A",
+      "tail B",
+    ].join("\n");
+
+    // Act
+    const rows = await renderBufferRows(
+      renderToolResult("shell", { command: "demo" }, output, false, {
+        ...RENDER_OPTS,
+        previewWidth: 24,
+      }),
+      24,
+      20,
+    );
+    const tailRowIndex = rows.findIndex((row) => row.text.includes("tail B"));
+    const summaryRowIndex = rows.findIndex(
+      (row) => row.text.includes("And ") && row.text.includes(" lines more"),
+    );
+
+    // Assert
+    expect(tailRowIndex).toBeGreaterThan(-1);
+    expect(summaryRowIndex).toBe(tailRowIndex + 1);
+  });
+
   test("renderToolResult for shell output in verbose mode shows the full stored output", () => {
     // Arrange
     const output = Array.from({ length: 25 }, (_, i) => `line ${i + 1}`).join(

package/src/ui/conversation.ts

@@ -9,7 +9,6 @@
  */
 
 import {
-  Markdown,
   SyntaxHighlight,
   type SyntaxHighlightTheme,
 } from "@cel-tui/components";
@@ -142,11 +141,15 @@ type ToolRenderLineKind =
   | "summary"
   | "error";
 
-interface HighlightedToolBodySpec {
+type SyntaxThemeVariant = "markdown" | "shell";
+
+interface HighlightedBodySpec {
   /** Full raw source content to syntax-highlight. */
   text: string;
   /** Registered lextide language id. */
   language: string;
+  /** Semantic theme variant for this highlighted content. */
+  themeVariant: SyntaxThemeVariant;
 }
 
 interface ToolBlockSpec {
@@ -157,7 +160,7 @@ interface ToolBlockSpec {
   /** Logical body lines for the tool block. */
   bodyLines: readonly ToolRenderLine[];
   /** Optional syntax-highlighted body rendered from the full unsplit source. */
-  highlightedBody?: HighlightedToolBodySpec;
+  highlightedBody?: HighlightedBodySpec;
   /** Whether `/verbose` preview rules apply to the body. */
   previewBody: boolean;
 }
@@ -222,16 +225,25 @@ function renderUserMessage(msg: UserMessage, theme: Theme): Node {
   ]);
 }
 
-/** Render a markdown block with stable internal paragraph spacing. */
-function renderMarkdownBlock(content: string): Node | null {
-  const children = Markdown(content).map((node) => {
-    if (node.type === "text" && node.content === "") {
-      return node;
-    }
-    return HStack({ padding: { x: 1 } }, [VStack({ flex: 1 }, [node])]);
-  });
+/** Render a syntax-highlighted raw markdown block. */
+function renderMarkdownTextBlock(content: string, theme: Theme): Node | null {
+  if (content === "") {
+    return null;
+  }
 
-  return children.length > 0 ? VStack({ gap: 0 }, children) : null;
+  const children = getHighlightedBodyLines(
+    {
+      text: content,
+      language: "markdown",
+      themeVariant: "markdown",
+    },
+    theme,
+  );
+  if (children.length === 0) {
+    return null;
+  }
+
+  return HStack({ padding: { x: 1 } }, [VStack({ flex: 1 }, children)]);
 }
 
 function getAssistantErrorMessage(
@@ -270,12 +282,38 @@ function renderThinkingBlock(
   ]);
 }
 
+function coalesceAdjacentTextBlocks(
+  content: AssistantMessage["content"],
+): AssistantMessage["content"] {
+  const coalesced: AssistantMessage["content"] = [];
+
+  for (const block of content) {
+    if (block.type !== "text") {
+      coalesced.push(block);
+      continue;
+    }
+
+    const previous = coalesced.at(-1);
+    if (previous?.type === "text") {
+      coalesced[coalesced.length - 1] = {
+        ...previous,
+        text: previous.text + block.text,
+      };
+      continue;
+    }
+
+    coalesced.push({ ...block });
+  }
+
+  return coalesced;
+}
+
 function renderAssistantContentBlock(
   block: AssistantMessage["content"][number],
   opts: ConversationRenderOpts,
 ): Node | null {
   if (block.type === "text" && block.text) {
-    return renderMarkdownBlock(block.text);
+    return renderMarkdownTextBlock(block.text, opts.theme);
   }
   if (block.type === "thinking" && block.thinking) {
     return renderThinkingBlock(block.thinking, opts);
@@ -297,7 +335,7 @@ export function renderAssistantMessage(
   assistant: AssistantMessage | AssistantRenderState,
   opts: ConversationRenderOpts,
 ): Node | null {
-  const children = assistant.content
+  const children = coalesceAdjacentTextBlocks(assistant.content)
     .map((block) => {
       return renderAssistantContentBlock(block, opts);
     })
@@ -388,7 +426,13 @@ type SyntaxThemeTokenColor = NonNullable<
 const graphemeSegmenter = new Intl.Segmenter(undefined, {
   granularity: "grapheme",
 });
-const shellSyntaxThemeCache = new WeakMap<Theme, SyntaxThemeRegistration>();
+const syntaxThemeCache: Record<
+  SyntaxThemeVariant,
+  WeakMap<Theme, SyntaxThemeRegistration>
+> = {
+  markdown: new WeakMap(),
+  shell: new WeakMap(),
+};
 
 function colorToHex(color: Color | undefined): string | undefined {
   return color ? ANSI_COLOR_HEX[color] : undefined;
@@ -414,14 +458,11 @@ function pushSyntaxTokenColor(
   });
 }
 
-function getShellSyntaxTheme(theme: Theme): SyntaxThemeRegistration {
-  const cached = shellSyntaxThemeCache.get(theme);
-  if (cached) {
-    return cached;
-  }
-
-  const tokenColors: SyntaxThemeTokenColor[] = [];
-  pushSyntaxTokenColor(tokenColors, ["comment", "quote"], theme.mutedText);
+function pushShellSyntaxTokenColors(
+  tokenColors: SyntaxThemeTokenColor[],
+  theme: Theme,
+): void {
+  pushSyntaxTokenColor(tokenColors, "comment", theme.mutedText);
   pushSyntaxTokenColor(
     tokenColors,
     ["keyword", "storage"],
@@ -472,12 +513,47 @@ function getShellSyntaxTheme(theme: Theme): SyntaxThemeRegistration {
     ["entity.name.tag", "name", "tag"],
     theme.accentText,
   );
+}
+
+function pushMarkdownSyntaxTokenColors(
+  tokenColors: SyntaxThemeTokenColor[],
+  theme: Theme,
+): void {
+  pushSyntaxTokenColor(tokenColors, "quote", theme.mutedText, "italic");
+  pushSyntaxTokenColor(tokenColors, "section", theme.accentText, "bold");
+  pushSyntaxTokenColor(
+    tokenColors,
+    "bullet",
+    theme.secondaryAccentText,
+    "bold",
+  );
+  pushSyntaxTokenColor(tokenColors, ["code", "string"], theme.diffAdded);
+  pushSyntaxTokenColor(tokenColors, "link", theme.accentText, "underline");
+  pushSyntaxTokenColor(tokenColors, "strong", undefined, "bold");
+  pushSyntaxTokenColor(tokenColors, "emphasis", undefined, "italic");
+}
+
+function getSyntaxTheme(
+  theme: Theme,
+  variant: SyntaxThemeVariant,
+): SyntaxThemeRegistration {
+  const cache = syntaxThemeCache[variant];
+  const cached = cache.get(theme);
+  if (cached) {
+    return cached;
+  }
+
+  const tokenColors: SyntaxThemeTokenColor[] = [];
+  if (variant === "shell") {
+    pushShellSyntaxTokenColors(tokenColors, theme);
+  } else {
+    pushMarkdownSyntaxTokenColors(tokenColors, theme);
+  }
 
   const syntaxTheme: SyntaxThemeRegistration = {
-    ...(colorToHex(theme.toolText) ? { fg: colorToHex(theme.toolText) } : {}),
     tokenColors,
   };
-  shellSyntaxThemeCache.set(theme, syntaxTheme);
+  cache.set(theme, syntaxTheme);
   return syntaxTheme;
 }
 
@@ -508,7 +584,7 @@ function splitHighlightedTextNode(
   return children;
 }
 
-function normalizeHighlightedToolLine(line: Node): Node {
+function normalizeHighlightedLine(line: Node): Node {
   if (line.type !== "hstack") {
     return line;
   }
@@ -519,8 +595,8 @@ function normalizeHighlightedToolLine(line: Node): Node {
   return HStack(line.props, children);
 }
 
-function getHighlightedToolBodyLines(
-  spec: HighlightedToolBodySpec,
+function getHighlightedBodyLines(
+  spec: HighlightedBodySpec,
   theme: Theme,
 ): Node[] {
   if (spec.text === "") {
@@ -528,9 +604,9 @@ function getHighlightedToolBodyLines(
   }
 
   const highlighted = SyntaxHighlight(spec.text, spec.language, {
-    theme: getShellSyntaxTheme(theme),
+    theme: getSyntaxTheme(theme, spec.themeVariant),
   });
-  return highlighted.children.map((line) => normalizeHighlightedToolLine(line));
+  return highlighted.children.map((line) => normalizeHighlightedLine(line));
 }
 
 /** Render a single styled text node for a tool line. */
@@ -644,6 +720,7 @@ function renderToolBodyFromNodes(
     body: VStack(
       {
         height: UI_TOOL_PREVIEW_ROWS,
+        justifyContent: "end",
       },
       [...previewLines],
     ),
@@ -663,7 +740,7 @@ function renderToolBody(
 ): { body: Node | null; summary?: ToolRenderLine } {
   if (spec.highlightedBody) {
     return renderToolBodyFromNodes(
-      getHighlightedToolBodyLines(spec.highlightedBody, opts.theme),
+      getHighlightedBodyLines(spec.highlightedBody, opts.theme),
       spec.previewBody,
       opts,
     );
@@ -720,6 +797,7 @@ function buildShellToolCallSpec(args: Record<string, unknown>): ToolBlockSpec {
         : {
             text: command,
             language: "bash",
+            themeVariant: "shell",
           },
     previewBody: true,
   };

package/src/ui/help.test.ts

@@ -24,7 +24,7 @@ describe("ui/help", () => {
     );
   });
 
-  test("buildHelpText includes the current Escape input-focus note", () => {
+  test("buildHelpText describes the current Escape behavior", () => {
     const helpState: HelpRenderState = {
       providers: new Map(),
       model: null,
@@ -37,8 +37,13 @@ describe("ui/help", () => {
 
     const text = buildHelpText(helpState);
 
-    expect(text).toContain("Escape blurs the input first");
-    expect(text).toContain("Tab re-focuses the input");
-    expect(text).toContain("Escape again interrupts the current turn");
+    expect(text).toContain(
+      "Escape closes the current overlay and returns focus to the input",
+    );
+    expect(text).toContain(
+      "With no overlay open, Escape interrupts the current turn",
+    );
+    expect(text).toContain("Otherwise Escape does nothing");
+    expect(text).not.toContain("Escape blurs the input first");
   });
 });

package/src/ui/help.ts

@@ -79,9 +79,11 @@ export function buildHelpText(state: HelpRenderState): string {
   const providerNames = Array.from(state.providers.keys());
   lines.push("");
   lines.push("Note:");
-  lines.push("  While a turn is running, Escape blurs the input first.");
-  lines.push("  Tab re-focuses the input.");
-  lines.push("  Escape again interrupts the current turn.");
+  lines.push(
+    "  Escape closes the current overlay and returns focus to the input.",
+  );
+  lines.push("  With no overlay open, Escape interrupts the current turn.");
+  lines.push("  Otherwise Escape does nothing.");
 
   lines.push("");
   lines.push(