hoomanjs 1.13.0 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoomanjs",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Hackable Bun-powered AI agent toolkit for building local CLI, ACP, MCP, and channel-driven workflows.",
   "author": {
     "name": "Vaibhav Pandey",
@@ -61,17 +61,20 @@
     "@mozilla/readability": "^0.6.0",
     "@strands-agents/sdk": "^1.0.0-rc.3",
     "chromadb": "^3.4.3",
+    "cli-highlight": "^2.1.11",
     "cli-spinners": "^3.4.0",
     "commander": "^14.0.3",
     "fastq": "^1.20.1",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.9",
     "ink": "^7.0.0",
+    "ink-ansi": "^1.0.0",
     "ink-select-input": "^6.2.0",
     "ink-text-input": "^6.0.0",
     "jsdom": "^29.0.2",
     "lodash": "^4.18.1",
     "luxon": "^3.7.2",
+    "marked": "^18.0.2",
     "ollama": "^0.6.3",
     "openai": "^6.34.0",
     "react": "^19.2.5",

package/src/chat/app.tsx

@@ -30,7 +30,7 @@ import { Transcript } from "./components/Transcript.tsx";
 import type { ApprovalRequest, ChatLine } from "./types.ts";
 import { getTodoViewState, type TodoViewState } from "../core/tools/todo.ts";
 import { attachmentPathsToPromptBlocks } from "../core/utils/attachments.ts";
-import type { PromptSubmission } from "./components/prompt-input/usePromptInputController.ts";
+import type { PromptSubmission } from "./components/prompt-input/hooks/usePromptInputController.ts";
 
 type ChatAppProps = {
   agent: Agent;

package/src/chat/components/ChatMessage.tsx

@@ -1,6 +1,7 @@
 import { Box, Text } from "ink";
 import type { ChatLine } from "../types.ts";
 import { lineColor } from "./shared.ts";
+import { MarkdownMessage } from "./markdown/MarkdownMessage.tsx";
 import { ReasoningStrip } from "./ReasoningStrip.tsx";
 import { ThinkingStatus } from "./ThinkingStatus.tsx";
 
@@ -17,7 +18,9 @@ export function ChatMessage({ line, liveReasoning = "" }: ChatMessageProps) {
         ? "Assistant"
         : (line.title ?? "System");
   const isPendingAssistant = line.role === "assistant" && !line.done;
-  const text = line.content.trim() || (line.done ? "(empty)" : "");
+  const rawText =
+    line.role === "assistant" ? line.content : line.content.trim();
+  const text = rawText || (line.done ? "(empty)" : "");
   const shouldShowBody = Boolean(text) || !isPendingAssistant;
 
   return (
@@ -32,15 +35,15 @@ export function ChatMessage({ line, liveReasoning = "" }: ChatMessageProps) {
         <ReasoningStrip text={liveReasoning} maxVisibleLines={2} />
       ) : null}
       {shouldShowBody ? (
-        <Text
-          color={
-            line.role === "user" || line.role === "assistant"
-              ? undefined
-              : lineColor(line)
-          }
-        >
-          {text}
-        </Text>
+        line.role === "assistant" ? (
+          <MarkdownMessage streaming={isPendingAssistant}>
+            {text}
+          </MarkdownMessage>
+        ) : (
+          <Text color={line.role === "user" ? undefined : lineColor(line)}>
+            {text}
+          </Text>
+        )
       ) : null}
     </Box>
   );

package/src/chat/components/Composer.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from "ink";
 import { PromptInput } from "./PromptInput.tsx";
-import type { PromptSubmission } from "./prompt-input/usePromptInputController.ts";
+import type { PromptSubmission } from "./prompt-input/hooks/usePromptInputController.ts";
 
 type ComposerProps = {
   input: string;

package/src/chat/components/PromptInput.tsx

@@ -4,7 +4,7 @@ import { splitLineAtCursor } from "./prompt-input/render.ts";
 import {
   usePromptInputController,
   type PromptSubmission,
-} from "./prompt-input/usePromptInputController.ts";
+} from "./prompt-input/hooks/usePromptInputController.ts";
 
 export type PromptInputProps = {
   value: string;

package/src/chat/components/QueuedPrompts.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text, useStdout } from "ink";
-import type { PromptSubmission } from "./prompt-input/usePromptInputController.ts";
+import type { PromptSubmission } from "./prompt-input/hooks/usePromptInputController.ts";
 
 type QueuedPromptsProps = {
   prompts: readonly { id: string; prompt: PromptSubmission }[];

package/src/chat/components/markdown/BlockRenderer.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import { Box, Text, useWindowSize } from "ink";
+import type { Token, Tokens } from "marked";
+import { CodeBlock } from "./CodeBlock.tsx";
+import { inlineToPlainText, renderInlineTokens } from "./InlineRenderer.tsx";
+import { MarkdownTable } from "./MarkdownTable.tsx";
+
+type BlockRendererProps = {
+  tokens: Token[];
+  streaming?: boolean;
+  depth?: number;
+};
+
+function blockToPlainText(token: Token): string {
+  switch (token.type) {
+    case "paragraph":
+      return inlineToPlainText(token.tokens);
+    case "text":
+      return token.text ?? "";
+    case "code":
+      return token.text ?? "";
+    case "heading":
+      return inlineToPlainText(token.tokens);
+    case "blockquote":
+      return (token.tokens ?? [])
+        .map((child) => blockToPlainText(child))
+        .join("\n");
+    case "list":
+      return token.items
+        .map((item: Tokens.ListItem) =>
+          (item.tokens ?? [])
+            .map((child: Token) => blockToPlainText(child))
+            .join(" "),
+        )
+        .join("\n");
+    default:
+      return token.raw ?? "";
+  }
+}
+
+function renderBlock(
+  token: Token,
+  key: string,
+  depth: number,
+  columns: number,
+  streaming: boolean,
+): React.ReactNode | null {
+  switch (token.type) {
+    case "paragraph":
+      return (
+        <Box key={key} marginBottom={1}>
+          <Text wrap="wrap">
+            {renderInlineTokens(token.tokens, { keyPrefix: key })}
+          </Text>
+        </Box>
+      );
+    case "heading": {
+      const headingColor = token.depth <= 2 ? "cyan" : "white";
+      return (
+        <Box key={key} marginBottom={1}>
+          <Text bold color={headingColor} wrap="wrap">
+            {renderInlineTokens(token.tokens, { keyPrefix: key })}
+          </Text>
+        </Box>
+      );
+    }
+    case "code":
+      return (
+        <CodeBlock
+          key={key}
+          code={token.text ?? ""}
+          language={token.lang}
+          streaming={streaming}
+        />
+      );
+    case "blockquote": {
+      const lines = (token.tokens ?? [])
+        .map((child) => blockToPlainText(child))
+        .join("\n")
+        .split("\n");
+      return (
+        <Box key={key} flexDirection="column" marginBottom={1}>
+          {lines.map((line, index) => (
+            <Text key={`${key}-${index}`} color="gray" italic>
+              {`│ ${line || " "}`}
+            </Text>
+          ))}
+        </Box>
+      );
+    }
+    case "list":
+      return (
+        <Box key={key} flexDirection="column" marginBottom={1}>
+          {token.items.map((item: Tokens.ListItem, index: number) => {
+            const marker = token.ordered
+              ? `${(token.start ?? 1) + index}.`
+              : "-";
+            const checkbox =
+              item.task === true ? (item.checked ? "[x] " : "[ ] ") : "";
+            const itemTokens = item.tokens ?? [];
+            const [head, ...tail] = itemTokens as Token[];
+            const isInlineHead =
+              head?.type === "text" || head?.type === "paragraph";
+            const headNode =
+              head && isInlineHead ? (
+                <Text wrap="wrap">
+                  {head.type === "paragraph"
+                    ? renderInlineTokens(head.tokens, {
+                        keyPrefix: `${key}-item-${index}-paragraph`,
+                      })
+                    : (head.text ??
+                      renderInlineTokens(head.tokens, {
+                        keyPrefix: `${key}-item-${index}-text`,
+                      }))}
+                </Text>
+              ) : head ? (
+                renderBlock(
+                  head,
+                  `${key}-item-${index}-head`,
+                  depth + 1,
+                  columns,
+                  streaming,
+                )
+              ) : (
+                <Text> </Text>
+              );
+            return (
+              <Box key={`${key}-item-${index}`} flexDirection="column">
+                <Box flexDirection="row">
+                  <Text>{`${"  ".repeat(depth)}${marker} ${checkbox}`}</Text>
+                  <Box flexDirection="column" flexGrow={1}>
+                    {headNode}
+                  </Box>
+                </Box>
+                {tail.length > 0 ? (
+                  <Box
+                    marginLeft={Math.max(2, depth * 2 + 4)}
+                    flexDirection="column"
+                  >
+                    {tail.map((nestedToken: Token, nestedIndex: number) =>
+                      renderBlock(
+                        nestedToken,
+                        `${key}-item-${index}-tail-${nestedIndex}`,
+                        depth + 1,
+                        columns,
+                        streaming,
+                      ),
+                    )}
+                  </Box>
+                ) : null}
+              </Box>
+            );
+          })}
+        </Box>
+      );
+    case "table":
+      return <MarkdownTable key={key} token={token as Tokens.Table} />;
+    case "hr":
+      return (
+        <Box key={key} marginBottom={1}>
+          <Text color="gray">
+            {"─".repeat(Math.max(8, Math.min(columns - 4, 48)))}
+          </Text>
+        </Box>
+      );
+    case "space":
+      return null;
+    case "text":
+    case "escape":
+      return (
+        <Box key={key} marginBottom={1}>
+          <Text wrap="wrap">{token.text ?? token.raw ?? ""}</Text>
+        </Box>
+      );
+    case "html":
+    case "def":
+    case "del":
+      return null;
+    default:
+      return (
+        <Box key={key} marginBottom={1}>
+          <Text wrap="wrap">{token.raw ?? ""}</Text>
+        </Box>
+      );
+  }
+}
+
+export function BlockRenderer({
+  tokens,
+  streaming = false,
+  depth = 0,
+}: BlockRendererProps) {
+  const { columns } = useWindowSize();
+  return (
+    <Box flexDirection="column">
+      {tokens.map((token, index) =>
+        renderBlock(
+          token,
+          `block-${depth}-${index}`,
+          depth,
+          columns,
+          streaming,
+        ),
+      )}
+    </Box>
+  );
+}

package/src/chat/components/markdown/CodeBlock.tsx

@@ -0,0 +1,100 @@
+import { createRequire } from "node:module";
+import type React from "react";
+import { useMemo } from "react";
+import { Box, Text } from "ink";
+import { highlight, supportsLanguage } from "cli-highlight";
+
+type CodeBlockProps = {
+  code: string;
+  language?: string;
+  streaming?: boolean;
+};
+
+type InkAnsiComponent = React.ComponentType<{
+  children?: React.ReactNode;
+}>;
+
+const localRequire = createRequire(import.meta.url);
+const ANSI_RE = /\u001b\[[0-9;]*m/g;
+let cachedInkAnsi: InkAnsiComponent | null | undefined;
+
+function stripAnsi(value: string): string {
+  return value.replace(ANSI_RE, "");
+}
+
+function getInkAnsi(): InkAnsiComponent | null {
+  if (cachedInkAnsi !== undefined) {
+    return cachedInkAnsi;
+  }
+  try {
+    const moduleValue = localRequire("ink-ansi") as
+      | InkAnsiComponent
+      | { default?: InkAnsiComponent };
+    cachedInkAnsi =
+      typeof moduleValue === "function"
+        ? moduleValue
+        : (moduleValue.default ?? null);
+  } catch {
+    cachedInkAnsi = null;
+  }
+  return cachedInkAnsi;
+}
+
+function renderCodeLines(lines: string[], color?: string) {
+  return lines.map((line, index) => (
+    <Text key={index} color={color}>
+      {line || " "}
+    </Text>
+  ));
+}
+
+export function CodeBlock({
+  code,
+  language,
+  streaming = false,
+}: CodeBlockProps) {
+  const trimmedLanguage = language?.trim() || undefined;
+  const normalizedCode = useMemo(() => code.replace(/\r\n/g, "\n"), [code]);
+  const plainLines = useMemo(
+    () => normalizedCode.split("\n"),
+    [normalizedCode],
+  );
+  const highlightedLines = useMemo(() => {
+    if (streaming || !trimmedLanguage || !supportsLanguage(trimmedLanguage)) {
+      return null;
+    }
+    try {
+      return highlight(normalizedCode, {
+        language: trimmedLanguage,
+        ignoreIllegals: true,
+      }).split("\n");
+    } catch {
+      return null;
+    }
+  }, [normalizedCode, streaming, trimmedLanguage]);
+
+  if (highlightedLines) {
+    const InkAnsiText = getInkAnsi();
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Text color="gray">{`\`\`\`${trimmedLanguage}`}</Text>
+        {highlightedLines.map((line, index) =>
+          InkAnsiText ? (
+            <InkAnsiText key={index}>{line || " "}</InkAnsiText>
+          ) : (
+            <Text key={index}>{stripAnsi(line) || " "}</Text>
+          ),
+        )}
+        <Text color="gray">```</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text color="gray">{`\`\`\`${trimmedLanguage ?? ""}`}</Text>
+      {renderCodeLines(plainLines, "white")}
+      <Text color="gray">```</Text>
+    </Box>
+  );
+}

package/src/chat/components/markdown/InlineRenderer.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { Text } from "ink";
+import type { Token } from "marked";
+
+function plainFromToken(token: Token): string {
+  switch (token.type) {
+    case "text":
+      return token.text ?? "";
+    case "codespan":
+      return token.text ?? "";
+    case "escape":
+      return token.text ?? "";
+    case "link": {
+      const label = inlineToPlainText(token.tokens);
+      return label || token.href || "";
+    }
+    case "strong":
+    case "em":
+    case "del":
+      return inlineToPlainText(token.tokens);
+    case "image":
+      return token.text || token.href || "";
+    case "br":
+      return "\n";
+    default:
+      return token.raw ?? "";
+  }
+}
+
+export function inlineToPlainText(tokens: Token[] | undefined): string {
+  if (!tokens || tokens.length === 0) {
+    return "";
+  }
+  return tokens.map((token) => plainFromToken(token)).join("");
+}
+
+type RenderInlineOptions = {
+  keyPrefix?: string;
+};
+
+export function renderInlineTokens(
+  tokens: Token[] | undefined,
+  options: RenderInlineOptions = {},
+): React.ReactNode[] {
+  if (!tokens || tokens.length === 0) {
+    return [];
+  }
+  const prefix = options.keyPrefix ?? "inline";
+  return tokens.flatMap((token, index) => {
+    const key = `${prefix}-${index}`;
+    switch (token.type) {
+      case "text":
+        return [token.text ?? ""];
+      case "escape":
+        return [token.text ?? token.raw ?? ""];
+      case "codespan":
+        return [
+          <Text key={key} color="green">
+            {token.text ?? ""}
+          </Text>,
+        ];
+      case "strong":
+        return [
+          <Text key={key} bold>
+            {renderInlineTokens(token.tokens, { keyPrefix: key })}
+          </Text>,
+        ];
+      case "em":
+        return [
+          <Text key={key} italic>
+            {renderInlineTokens(token.tokens, { keyPrefix: key })}
+          </Text>,
+        ];
+      case "del":
+        return [
+          <Text key={key} dimColor>
+            {renderInlineTokens(token.tokens, { keyPrefix: key })}
+          </Text>,
+        ];
+      case "link": {
+        const href = token.href ?? "";
+        const text = inlineToPlainText(token.tokens).trim();
+        const label = text || href;
+        const shouldShowHref = Boolean(href) && label !== href;
+        return [
+          <Text key={`${key}-label`} color="blue" underline>
+            {label}
+          </Text>,
+          ...(shouldShowHref
+            ? [
+                <Text key={`${key}-href`} color="gray">
+                  {` (${href})`}
+                </Text>,
+              ]
+            : []),
+        ];
+      }
+      case "image": {
+        const label = token.text?.trim() || "image";
+        const href = token.href ?? "";
+        return [
+          <Text key={`${key}-img-label`} color="magenta">
+            {`[${label}]`}
+          </Text>,
+          ...(href
+            ? [
+                <Text key={`${key}-img-href`} color="gray">
+                  {` (${href})`}
+                </Text>,
+              ]
+            : []),
+        ];
+      }
+      case "br":
+        return [<Text key={key}>{"\n"}</Text>];
+      default: {
+        const fallback = plainFromToken(token);
+        return fallback ? [fallback] : [];
+      }
+    }
+  });
+}

package/src/chat/components/markdown/MarkdownMessage.tsx

@@ -0,0 +1,35 @@
+import { Box } from "ink";
+import { BlockRenderer } from "./BlockRenderer.tsx";
+import { useMarkdownTokens } from "./hooks/useMarkdownTokens.ts";
+
+type MarkdownMessageProps = {
+  children: string;
+  streaming?: boolean;
+};
+
+export function MarkdownMessage({
+  children,
+  streaming = false,
+}: MarkdownMessageProps) {
+  const content = children ?? "";
+  const {
+    fullTokens,
+    stablePrefix,
+    unstableSuffix,
+    stableTokens,
+    unstableTokens,
+  } = useMarkdownTokens(content, streaming);
+
+  if (!streaming) {
+    return <BlockRenderer tokens={fullTokens} />;
+  }
+
+  return (
+    <Box flexDirection="column">
+      {stablePrefix ? <BlockRenderer tokens={stableTokens} /> : null}
+      {unstableSuffix ? (
+        <BlockRenderer tokens={unstableTokens} streaming />
+      ) : null}
+    </Box>
+  );
+}

package/src/chat/components/markdown/MarkdownTable.tsx

@@ -0,0 +1,23 @@
+import { Box, Text, useWindowSize } from "ink";
+import type { Tokens } from "marked";
+import { useMarkdownTableLayout } from "./hooks/useMarkdownTableLayout.ts";
+
+type MarkdownTableProps = {
+  token: Tokens.Table;
+};
+
+export function MarkdownTable({ token }: MarkdownTableProps) {
+  const { columns } = useWindowSize();
+  const layout = useMarkdownTableLayout(token, columns);
+  if (layout.lines.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {layout.lines.map((line, index) => (
+        <Text key={index}>{line}</Text>
+      ))}
+    </Box>
+  );
+}

package/src/chat/components/markdown/hooks/useMarkdownTableLayout.ts

@@ -0,0 +1,242 @@
+import { useMemo } from "react";
+import type { Token, Tokens } from "marked";
+import { inlineToPlainText } from "../InlineRenderer.tsx";
+
+const MIN_COLUMN_WIDTH = 3;
+const MAX_ROW_LINES = 4;
+const SAFETY_MARGIN = 4;
+
+type TableLayout = {
+  mode: "horizontal" | "vertical";
+  lines: string[];
+};
+
+function displayWidth(value: string): number {
+  return Array.from(value).length;
+}
+
+function longestWordWidth(value: string): number {
+  const words = value.split(/\s+/).filter(Boolean);
+  if (words.length === 0) {
+    return MIN_COLUMN_WIDTH;
+  }
+  return Math.max(...words.map((word) => displayWidth(word)), MIN_COLUMN_WIDTH);
+}
+
+function wrapText(value: string, width: number): string[] {
+  if (width <= 0) {
+    return [value];
+  }
+  const normalized = value.replace(/\r\n/g, "\n").trimEnd();
+  const sourceLines = normalized.length > 0 ? normalized.split("\n") : [""];
+  const wrapped = sourceLines.flatMap((line) => {
+    const words = line.split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+      return [""];
+    }
+    const output: string[] = [];
+    let current = "";
+    for (const word of words) {
+      const candidate = current ? `${current} ${word}` : word;
+      if (displayWidth(candidate) <= width) {
+        current = candidate;
+        continue;
+      }
+      if (current) {
+        output.push(current);
+      }
+      if (displayWidth(word) <= width) {
+        current = word;
+        continue;
+      }
+      let remaining = word;
+      while (displayWidth(remaining) > width) {
+        output.push(Array.from(remaining).slice(0, width).join(""));
+        remaining = Array.from(remaining).slice(width).join("");
+      }
+      current = remaining;
+    }
+    if (current) {
+      output.push(current);
+    }
+    return output.length > 0 ? output : [""];
+  });
+  return wrapped.length > 0 ? wrapped : [""];
+}
+
+function padAligned(
+  value: string,
+  width: number,
+  align: "left" | "center" | "right" | null | undefined,
+): string {
+  const padding = Math.max(0, width - displayWidth(value));
+  if (align === "center") {
+    const leftPad = Math.floor(padding / 2);
+    return `${" ".repeat(leftPad)}${value}${" ".repeat(padding - leftPad)}`;
+  }
+  if (align === "right") {
+    return `${" ".repeat(padding)}${value}`;
+  }
+  return `${value}${" ".repeat(padding)}`;
+}
+
+function rowToCells(row: Array<{ tokens?: Token[] }>): string[] {
+  return row.map((cell) => inlineToPlainText(cell.tokens).trim());
+}
+
+function getVerticalLayout(
+  header: string[],
+  rows: string[][],
+  terminalWidth: number,
+): TableLayout {
+  const lines: string[] = [];
+  const separator = "─".repeat(Math.min(Math.max(terminalWidth - 1, 10), 40));
+  rows.forEach((row, rowIndex) => {
+    if (rowIndex > 0) {
+      lines.push(separator);
+    }
+    row.forEach((cell, columnIndex) => {
+      const label = header[columnIndex] || `Column ${columnIndex + 1}`;
+      const compact = cell.replace(/\s+/g, " ").trim();
+      const wrapped = wrapText(
+        compact,
+        Math.max(10, terminalWidth - displayWidth(label) - 3),
+      );
+      lines.push(`${label}: ${wrapped[0] ?? ""}`);
+      for (let index = 1; index < wrapped.length; index += 1) {
+        lines.push(`  ${wrapped[index]}`);
+      }
+    });
+  });
+  return { mode: "vertical", lines };
+}
+
+export function useMarkdownTableLayout(
+  token: Tokens.Table,
+  terminalWidth: number,
+): TableLayout {
+  return useMemo(() => {
+    const header = rowToCells(token.header);
+    const rows = token.rows.map((row) => rowToCells(row));
+    const columnCount = header.length;
+    if (columnCount === 0) {
+      return { mode: "horizontal", lines: [] };
+    }
+
+    const minWidths = header.map((_, columnIndex) => {
+      let max = longestWordWidth(header[columnIndex] ?? "");
+      for (const row of rows) {
+        max = Math.max(max, longestWordWidth(row[columnIndex] ?? ""));
+      }
+      return max;
+    });
+    const idealWidths = header.map((_, columnIndex) => {
+      let max = Math.max(
+        displayWidth(header[columnIndex] ?? ""),
+        MIN_COLUMN_WIDTH,
+      );
+      for (const row of rows) {
+        max = Math.max(max, displayWidth(row[columnIndex] ?? ""));
+      }
+      return max;
+    });
+
+    const borderOverhead = 1 + columnCount * 3;
+    const availableWidth = Math.max(
+      terminalWidth - borderOverhead - SAFETY_MARGIN,
+      columnCount * MIN_COLUMN_WIDTH,
+    );
+    const totalMin = minWidths.reduce((sum, width) => sum + width, 0);
+    const totalIdeal = idealWidths.reduce((sum, width) => sum + width, 0);
+
+    let columnWidths: number[];
+    if (totalIdeal <= availableWidth) {
+      columnWidths = idealWidths;
+    } else if (totalMin <= availableWidth) {
+      const remaining = availableWidth - totalMin;
+      const overflows = idealWidths.map(
+        (ideal, index) => ideal - minWidths[index]!,
+      );
+      const totalOverflow = overflows.reduce(
+        (sum, overflow) => sum + overflow,
+        0,
+      );
+      columnWidths = minWidths.map((minWidth, index) => {
+        if (totalOverflow === 0) {
+          return minWidth;
+        }
+        const extra = Math.floor(
+          (overflows[index]! / totalOverflow) * remaining,
+        );
+        return minWidth + extra;
+      });
+    } else {
+      const ratio = availableWidth / totalMin;
+      columnWidths = minWidths.map((width) =>
+        Math.max(Math.floor(width * ratio), MIN_COLUMN_WIDTH),
+      );
+    }
+
+    const maxRowLines = [header, ...rows]
+      .map((row) =>
+        row.reduce((max, cell, index) => {
+          const wrapped = wrapText(cell, columnWidths[index]!);
+          return Math.max(max, wrapped.length);
+        }, 1),
+      )
+      .reduce((max, count) => Math.max(max, count), 1);
+
+    if (maxRowLines > MAX_ROW_LINES) {
+      return getVerticalLayout(header, rows, terminalWidth);
+    }
+
+    function border(type: "top" | "middle" | "bottom"): string {
+      const chars = {
+        top: ["┌", "─", "┬", "┐"],
+        middle: ["├", "─", "┼", "┤"],
+        bottom: ["└", "─", "┴", "┘"],
+      }[type] as [string, string, string, string];
+      const [left, line, cross, right] = chars;
+      return `${left}${columnWidths
+        .map((width) => line.repeat(width + 2))
+        .join(cross)}${right}`;
+    }
+
+    function renderRow(
+      row: string[],
+      isHeader: boolean,
+      align: Array<"left" | "center" | "right" | null | undefined>,
+    ): string[] {
+      const cells = row.map((cell, index) =>
+        wrapText(cell, columnWidths[index]!),
+      );
+      const lineCount = Math.max(...cells.map((lines) => lines.length), 1);
+      const output: string[] = [];
+      for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
+        let line = "│";
+        for (let columnIndex = 0; columnIndex < row.length; columnIndex += 1) {
+          const value = cells[columnIndex]?.[lineIndex] ?? "";
+          const cellAlign = isHeader ? "center" : align[columnIndex];
+          line += ` ${padAligned(value, columnWidths[columnIndex]!, cellAlign)} │`;
+        }
+        output.push(line);
+      }
+      return output;
+    }
+
+    const alignments = token.align ?? [];
+    const lines: string[] = [
+      border("top"),
+      ...renderRow(header, true, alignments),
+      border("middle"),
+    ];
+    rows.forEach((row, rowIndex) => {
+      lines.push(...renderRow(row, false, alignments));
+      if (rowIndex < rows.length - 1) {
+        lines.push(border("middle"));
+      }
+    });
+    lines.push(border("bottom"));
+    return { mode: "horizontal", lines };
+  }, [terminalWidth, token]);
+}

package/src/chat/components/markdown/hooks/useMarkdownTokens.ts

@@ -0,0 +1,46 @@
+import { useMemo, useRef } from "react";
+import { type Token } from "marked";
+import { lexMarkdown, splitStreamingMarkdown } from "../lexer.ts";
+
+export type MarkdownTokenPlan = {
+  fullTokens: Token[];
+  stablePrefix: string;
+  unstableSuffix: string;
+  stableTokens: Token[];
+  unstableTokens: Token[];
+};
+
+export function useMarkdownTokens(
+  content: string,
+  streaming: boolean,
+): MarkdownTokenPlan {
+  const stablePrefixRef = useRef("");
+  const fullTokens = useMemo(() => lexMarkdown(content), [content]);
+
+  const streamSegments = streaming
+    ? splitStreamingMarkdown(content, stablePrefixRef.current)
+    : { stablePrefix: "", unstableSuffix: "" };
+
+  const stableTokens = useMemo(
+    () => lexMarkdown(streamSegments.stablePrefix),
+    [streamSegments.stablePrefix],
+  );
+  const unstableTokens = useMemo(
+    () => lexMarkdown(streamSegments.unstableSuffix),
+    [streamSegments.unstableSuffix],
+  );
+
+  if (!streaming) {
+    stablePrefixRef.current = "";
+  } else {
+    stablePrefixRef.current = streamSegments.stablePrefix;
+  }
+
+  return {
+    fullTokens,
+    stablePrefix: streamSegments.stablePrefix,
+    unstableSuffix: streamSegments.unstableSuffix,
+    stableTokens,
+    unstableTokens,
+  };
+}

package/src/chat/components/markdown/lexer.ts

@@ -0,0 +1,100 @@
+import { marked, type Token } from "marked";
+
+const TOKEN_CACHE_MAX = 500;
+const tokenCache = new Map<string, Token[]>();
+let markedConfigured = false;
+
+const MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /;
+
+function hashContent(input: string): string {
+  let hash = 5381;
+  for (let index = 0; index < input.length; index += 1) {
+    hash = (hash * 33) ^ input.charCodeAt(index);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+function hasMarkdownSyntax(value: string): boolean {
+  const sample = value.length > 500 ? value.slice(0, 500) : value;
+  return MD_SYNTAX_RE.test(sample);
+}
+
+function paragraphToken(value: string): Token[] {
+  return [
+    {
+      type: "paragraph",
+      raw: value,
+      text: value,
+      tokens: [
+        {
+          type: "text",
+          raw: value,
+          text: value,
+        },
+      ],
+    } as Token,
+  ];
+}
+
+function lexer(content: string): Token[] {
+  configureMarked();
+  if (!hasMarkdownSyntax(content)) {
+    return paragraphToken(content);
+  }
+  return marked.lexer(content);
+}
+
+export function configureMarked(): void {
+  if (markedConfigured) {
+    return;
+  }
+  markedConfigured = true;
+  marked.use({ gfm: true, breaks: false });
+}
+
+export function lexMarkdown(content: string): Token[] {
+  const key = hashContent(content);
+  const hit = tokenCache.get(key);
+  if (hit) {
+    tokenCache.delete(key);
+    tokenCache.set(key, hit);
+    return hit;
+  }
+  const tokens = lexer(content);
+  if (tokenCache.size >= TOKEN_CACHE_MAX) {
+    const oldest = tokenCache.keys().next().value;
+    if (oldest !== undefined) {
+      tokenCache.delete(oldest);
+    }
+  }
+  tokenCache.set(key, tokens);
+  return tokens;
+}
+
+export function splitStreamingMarkdown(
+  content: string,
+  stablePrefix: string,
+): { stablePrefix: string; unstableSuffix: string } {
+  configureMarked();
+  let currentStablePrefix = stablePrefix;
+  if (!content.startsWith(currentStablePrefix)) {
+    currentStablePrefix = "";
+  }
+  const boundary = currentStablePrefix.length;
+  const tokens = lexer(content.slice(boundary));
+  let lastContentIndex = tokens.length - 1;
+  while (lastContentIndex >= 0 && tokens[lastContentIndex]?.type === "space") {
+    lastContentIndex -= 1;
+  }
+  let advance = 0;
+  for (let index = 0; index < lastContentIndex; index += 1) {
+    advance += tokens[index]?.raw.length ?? 0;
+  }
+  if (advance > 0) {
+    currentStablePrefix = content.slice(0, boundary + advance);
+  }
+  return {
+    stablePrefix: currentStablePrefix,
+    unstableSuffix: content.slice(currentStablePrefix.length),
+  };
+}

package/src/chat/components/prompt-input/hooks/usePromptInputController.ts

@@ -0,0 +1,4 @@
+export {
+  usePromptInputController,
+  type PromptSubmission,
+} from "../usePromptInputController.ts";

package/src/chat/components/shared.ts

@@ -5,7 +5,7 @@ export function lineColor(line: ChatLine): string {
     case "user":
       return "cyan";
     case "assistant":
-      return "white";
+      return "blue";
     case "tool":
       return "gray";
     case "system":