mixdog 0.8.1 → 0.9.0

package/src/tui/components/AnsiText.jsx

@@ -1,34 +1,39 @@
 /**
  * components/AnsiText.jsx — render ANSI SGR text as ink <Text> spans.
  *
- * Claude Code parses ANSI into styled Text nodes instead of relying on raw
+ * Parses ANSI into styled Text nodes instead of relying on raw
  * escape passthrough. This keeps markdown emphasis/code colors stable when an
  * inner span resets color back to the default.
  */
 import React from 'react';
 import { Text } from 'ink';
-import { theme } from '../theme.mjs';
+import { theme, getThemeVersion } from '../theme.mjs';
 
 const ANSI_RE = /\x1b\[([0-9;]*)m/g;
 
-const ANSI_COLORS = {
-  30: theme.subtle,
-  31: theme.error,
-  32: theme.success,
-  33: theme.warning,
-  34: theme.code,
-  35: 'ansi:magenta',
-  36: 'ansi:cyan',
-  37: theme.text,
-  90: theme.subtle,
-  91: theme.error,
-  92: theme.success,
-  93: theme.warning,
-  94: theme.code,
-  95: 'ansi:magentaBright',
-  96: 'ansi:cyanBright',
-  97: theme.statusText,
-};
+// Resolve the named SGR (30-37/90-97) → theme color map at call time so a
+// live `/theme` switch is honored. `theme` is mutated in-place on switch, so
+// reading the keys per parse keeps colors in sync without a module reload.
+function ansiColorMap() {
+  return {
+    30: theme.subtle,
+    31: theme.error,
+    32: theme.success,
+    33: theme.warning,
+    34: theme.code,
+    35: 'ansi:magenta',
+    36: 'ansi:cyan',
+    37: theme.text,
+    90: theme.subtle,
+    91: theme.error,
+    92: theme.success,
+    93: theme.warning,
+    94: theme.code,
+    95: 'ansi:magentaBright',
+    96: 'ansi:cyanBright',
+    97: theme.statusText,
+  };
+}
 
 const ANSI_BG_COLORS = {
   40: 'ansi:black',
@@ -74,7 +79,7 @@ function rgbCode(codes, index) {
   return `rgb(${r},${g},${b})`;
 }
 
-function applySgr(state, codes, defaultColor) {
+function applySgr(state, codes, defaultColor, ansiColors) {
   if (!codes.length) codes = [0];
   for (let i = 0; i < codes.length; i++) {
     const code = codes[i];
@@ -133,8 +138,8 @@ function applySgr(state, codes, defaultColor) {
         state.backgroundColor = undefined;
         break;
       default:
-        if (ANSI_COLORS[code]) {
-          state.color = ANSI_COLORS[code];
+        if (ansiColors[code]) {
+          state.color = ansiColors[code];
         } else if (ANSI_BG_COLORS[code]) {
           state.backgroundColor = ANSI_BG_COLORS[code];
         }
@@ -147,6 +152,7 @@ function parseAnsi(text, defaultColor) {
   const source = String(text ?? '');
   const spans = [];
   const state = defaultState(defaultColor);
+  const ansiColors = ansiColorMap();
   let lastIndex = 0;
   let match;
 
@@ -159,7 +165,7 @@ function parseAnsi(text, defaultColor) {
       .split(';')
       .filter(Boolean)
       .map((n) => Number(n));
-    applySgr(state, codes, defaultColor);
+    applySgr(state, codes, defaultColor, ansiColors);
     lastIndex = ANSI_RE.lastIndex;
   }
 
@@ -171,9 +177,13 @@ function parseAnsi(text, defaultColor) {
 }
 
 export function AnsiText({ children, defaultColor, wrap }) {
+  // ansiColorMap() reads live theme.* keys, so the parsed spans depend on the
+  // active theme. Include the theme version in the memo deps so a /theme switch
+  // re-parses with the new palette instead of reusing stale span colors.
+  const themeVersion = getThemeVersion();
   const spans = React.useMemo(
     () => parseAnsi(children, defaultColor),
-    [children, defaultColor],
+    [children, defaultColor, themeVersion],
   );
 
   return (
@@ -183,9 +193,10 @@ export function AnsiText({ children, defaultColor, wrap }) {
           key={index}
           color={span.style.color}
           backgroundColor={span.style.backgroundColor}
-          // Windows Terminal's synthetic bold makes Korean markdown text look
-          // slightly fuzzy. Keep the color emphasis, but avoid the font weight.
-          bold={false}
+          // Honor SGR bold only on spans that chalk/markdown set (e.g. **strong**,
+          // headings). Do not force bold globally — avoids fuzzy Korean body text
+          // when models emit no bold codes.
+          bold={span.style.bold}
           dimColor={span.style.dimColor}
           italic={span.style.italic}
           underline={span.style.underline}

package/src/tui/components/ContextPanel.jsx

@@ -171,11 +171,13 @@ function ContextUsageView({ detail, columns }) {
   const barWidth = Math.max(12, Math.min(34, innerWidth - stringWidth(summaryText) - stringWidth(pctText) - 5));
   const builtInToolTokens = bucketTokens(schema, ['code', 'web', 'mutation', 'channels', 'setup', 'other']);
   const builtInToolCount = bucketCount(schema, ['code', 'web', 'mutation', 'channels', 'setup', 'other']);
-  const projectTokens = semanticTokens(semantic, ['project', 'workspace', 'environment', 'other']);
+  const sessionTokens = semanticTokens(semantic, ['workspace', 'environment', 'other']);
   const compactionLine = metricValue([
     compaction.stage && compaction.stage !== 'pending' ? compaction.stage : '',
     compaction.state,
+    compaction.type ? `type ${compaction.type}` : '',
     compaction.triggerTokens ? `trigger ${formatTokens(compaction.triggerTokens)}` : '',
+    compaction.boundaryTokens ? `boundary ${formatTokens(compaction.boundaryTokens)}` : '',
   ]);
   const sourceLine = metricValue([
     usage.effective ? `effective ${formatTokens(windowTokens)}` : `window ${formatTokens(windowTokens)}`,
@@ -192,7 +194,7 @@ function ContextUsageView({ detail, columns }) {
     { label: 'MCP', tokens: bucketTokens(schema, ['mcp']), meta: `${mcp.connected || 0}/${mcp.configured || 0} servers` },
     { label: 'Skills', tokens: bucketTokens(schema, ['skills']), meta: `${extensions.skills || 0} skills` },
     { label: 'Memory', tokens: semanticTokens(semantic, ['memory']) + bucketTokens(schema, ['memory']), meta: 'core + recall tools' },
-    { label: 'Project', tokens: projectTokens, meta: 'mixdog.md · workspace' },
+    { label: 'Session', tokens: sessionTokens, meta: 'workspace · environment' },
     { label: 'Workflow', tokens: semanticTokens(semantic, ['workflow']) + bucketTokens(schema, ['agents']), meta: 'workflow · agents' },
     { label: 'System', tokens: semanticTokens(semantic, ['system']), meta: 'rules · role catalog' },
     { label: 'Overhead', tokens: finiteNumber(request.overheadTokens), meta: 'request frame' },
@@ -223,7 +225,7 @@ function ContextUsageView({ detail, columns }) {
   );
 }
 
-export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fillHeight = false, detail = null }) {
+export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fillHeight = false, detail = null, description = '' }) {
   const safeRows = Array.isArray(rows) ? rows : [];
   const labelWidth = Math.min(
     safeRows.reduce((w, row) => Math.max(w, String(row.label || '').length), 0),
@@ -231,6 +233,11 @@ export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fill
   );
   const valueWidth = Math.max(0, columns - labelWidth - 8);
   const isContextUsage = detail?.type === 'context';
+  // Standard panel rhythm: title row, blank, description/hint row, blank, content.
+  const panelDescription = truncateText(
+    String(description || (isContextUsage ? 'Live context window usage by category.' : '')).replace(/\s+/g, ' ').trim(),
+    Math.max(0, columns - 4),
+  );
 
   return (
     <Box flexDirection="column" flexShrink={0} width="100%" height={fillHeight ? '100%' : undefined}>
@@ -242,10 +249,13 @@ export function ContextPanel({ rows, title = 'Context Usage', columns = 80, fill
         width="100%"
         height={fillHeight ? '100%' : undefined}
       >
-        <Box flexDirection="row" justifyContent="space-between" marginBottom={1}>
+        <Box flexDirection="row" justifyContent="space-between">
           <Text color={theme.panelTitle}>{title}</Text>
           <Text color={theme.subtle}>Esc back</Text>
         </Box>
+        <Text> </Text>
+        <Text color={theme.subtle}>{panelDescription || ' '}</Text>
+        <Text> </Text>
         {isContextUsage ? (
           <ContextUsageView detail={detail} columns={columns} />
         ) : (

package/src/tui/components/Markdown.jsx

@@ -1,93 +1,52 @@
 /**
  * components/Markdown.jsx — markdown → ink, hybrid renderer.
  *
- * Ported from Claude Code (refs/claude-code/src/components/Markdown.tsx):
- *   - marked.lexer() produces the token stream (same lib + config as CC).
+ * Markdown → ink hybrid renderer:
+ *   - marked.lexer() produces the token stream.
  *   - Non-table tokens are rendered to ANSI strings via formatToken and emitted
- *     through <AnsiText>, matching CC's span-based <Ansi> behavior.
+ *     through <AnsiText> as styled spans.
  *   - Tables are rendered by the MarkdownTable component (proper Box layout).
- *   - Adjacent non-table tokens are coalesced into one <Text> (CC's
- *     nonTableContent buffer) so block spacing matches.
+ *   - Block tokens are emitted as separate Ink children so lists, code fences,
+ *     and tables keep their markdown block boundaries.
  *
- * Syntax highlighting from CC is dropped, but token cache + streaming-split are
+ * Syntax highlighting is omitted, but token cache + streaming-split are
  * kept so partial markdown does not repaint stable text on every delta.
  */
 import React, { useRef } from 'react';
 import { Box, Text } from 'ink';
 import { marked } from 'marked';
-import { formatToken } from '../markdown/format-token.mjs';
+import {
+  configureMarked,
+  hasMarkdownSyntax,
+  renderTokenAnsiSegments,
+} from '../markdown/render-ansi.mjs';
+import { trimPartialClosingFences } from '../markdown/stream-fence.mjs';
 import { AnsiText } from './AnsiText.jsx';
 import { MarkdownTable } from './MarkdownTable.jsx';
 import { theme } from '../theme.mjs';
 
-let _configured = false;
-function configureMarked() {
-  if (_configured) return;
-  _configured = true;
-  // Disable strikethrough: models use ~ for "approximate" (~100), not <del>.
-  marked.use({ tokenizer: { del() { return undefined; } } });
-}
-
-const TOKEN_CACHE_MAX = 500;
-const tokenCache = new Map();
-const MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /;
-
-function hasMarkdownSyntax(text) {
-  const sample = text.length > 500 ? text.slice(0, 500) : text;
-  return MD_SYNTAX_RE.test(sample);
-}
-
-function cachedLexer(content) {
-  const text = String(content ?? '');
-  if (!hasMarkdownSyntax(text)) {
-    return [{
-      type: 'paragraph',
-      raw: text,
-      text,
-      tokens: [{ type: 'text', raw: text, text }],
-    }];
-  }
-  const hit = tokenCache.get(text);
-  if (hit) {
-    tokenCache.delete(text);
-    tokenCache.set(text, hit);
-    return hit;
-  }
-  const tokens = marked.lexer(text);
-  if (tokenCache.size >= TOKEN_CACHE_MAX) {
-    const first = tokenCache.keys().next().value;
-    if (first !== undefined) tokenCache.delete(first);
-  }
-  tokenCache.set(text, tokens);
-  return tokens;
-}
-
-function renderMarkdownElements(content) {
-  configureMarked();
-  const tokens = cachedLexer(String(content ?? ''));
+function renderMarkdownElements(content, trimPartialFences = false, tableWidth) {
+  // `tableWidth` is the App's body/content width; it doubles as the hr fill
+  // width. Fall back to 80 when not provided so an hr still spans a sane rule.
+  const segments = renderTokenAnsiSegments(content, { trimPartialFences, width: tableWidth || 80 });
   const result = [];
-  let buffer = '';
   let idx = 0;
-  const flush = () => {
-    if (buffer) {
-      // CC trims the coalesced non-table block (MarkdownBody: nonTableContent
-      // .trim()) so leading/trailing blank lines from token EOLs don't bleed
-      // into the surrounding gap={1} spacing. defaultColor={theme.text}
-      // keeps ANSI resets on the same dark-theme foreground instead of the
-      // terminal profile's default foreground.
-      result.push(<AnsiText key={`md_${idx++}`} defaultColor={theme.text}>{buffer.trim()}</AnsiText>);
-      buffer = '';
-    }
-  };
-  for (const token of tokens) {
-    if (token.type === 'table') {
-      flush();
-      result.push(<MarkdownTable key={`md_${idx++}`} token={token} />);
+  for (const segment of segments) {
+    if (segment.type === 'table') {
+      // Pass the App's body width as forceWidth so the table is laid out at the
+      // SAME width the row-height estimator measures (measureMarkdownTableRows).
+      // Without it MarkdownTable falls back to useStdout().columns, which on
+      // win32 is frameColumns+1 — a 1-col gap that can flip the table between
+      // horizontal and vertical layout and top-clip streaming output.
+      result.push(<MarkdownTable key={`md_${idx++}`} token={segment.token} forceWidth={tableWidth} />);
     } else {
-      buffer += formatToken(token);
+      // defaultColor={theme.text} keeps ANSI resets on the same dark-theme
+      // foreground instead of the terminal profile's default foreground.
+      result.push(
+        <AnsiText key={`md_${idx++}`} defaultColor={theme.text}>{segment.ansi}</AnsiText>,
+      );
     }
   }
-  flush();
   return result;
 }
 
@@ -145,15 +104,18 @@ function balanceStreamingMarkdown(text) {
   return rendered;
 }
 
-export function Markdown({ children }) {
+export function Markdown({ children, themeEpoch = 0, trimPartialFences = false, columns }) {
   const elements = React.useMemo(() => {
     try {
-      return renderMarkdownElements(children);
+      return renderMarkdownElements(children, trimPartialFences, columns);
     } catch {
       // Never throw into the render tree — fall back to raw text.
       return [<Text key="md_0" color={theme.text}>{String(children ?? '')}</Text>];
     }
-  }, [children]);
+  // themeEpoch is a memo dep so a /theme switch re-renders to ANSI with the new
+  // md* colors (formatToken re-resolves its colorizers on the active theme).
+  // columns is a dep so a resize re-lays-out tables at the new forceWidth.
+  }, [children, themeEpoch, trimPartialFences, columns]);
 
   return (
     <Box flexDirection="column" gap={1}>
@@ -162,13 +124,13 @@ export function Markdown({ children }) {
   );
 }
 
-export function StreamingMarkdown({ children }) {
+export function StreamingMarkdown({ children, themeEpoch = 0, columns }) {
   const stablePrefixRef = useRef('');
   const text = String(children ?? '');
 
   if (!hasMarkdownSyntax(text)) {
     stablePrefixRef.current = '';
-    return <Markdown>{text}</Markdown>;
+    return <Markdown themeEpoch={themeEpoch} columns={columns}>{text}</Markdown>;
   }
 
   if (!text.startsWith(stablePrefixRef.current)) {
@@ -179,7 +141,11 @@ export function StreamingMarkdown({ children }) {
   try {
     configureMarked();
     const boundary = stablePrefix.length;
+    // Lex the still-streaming suffix and trim any partial closing fence so an
+    // open code block does not grow-then-shrink as the final backtick(s)
+    // stream in. Operates on a fresh lex so the shared tokenCache is untouched.
     const tokens = marked.lexer(text.substring(boundary));
+    trimPartialClosingFences(tokens);
     let lastContentIdx = tokens.length - 1;
     while (lastContentIdx >= 0 && tokens[lastContentIdx]?.type === 'space') lastContentIdx--;
     let advance = 0;
@@ -198,8 +164,8 @@ export function StreamingMarkdown({ children }) {
   const unstableSuffix = text.substring(stablePrefix.length);
   return (
     <Box flexDirection="column" gap={1}>
-      {stablePrefix ? <Markdown>{stablePrefix}</Markdown> : null}
-      {unstableSuffix ? <Markdown>{balanceStreamingMarkdown(unstableSuffix)}</Markdown> : null}
+      {stablePrefix ? <Markdown themeEpoch={themeEpoch} columns={columns}>{stablePrefix}</Markdown> : null}
+      {unstableSuffix ? <Markdown themeEpoch={themeEpoch} columns={columns} trimPartialFences>{balanceStreamingMarkdown(unstableSuffix)}</Markdown> : null}
     </Box>
   );
 }

package/src/tui/components/MarkdownTable.jsx

@@ -1,11 +1,10 @@
 /**
  * components/MarkdownTable.jsx — GFM table → ink Box layout.
  *
- * Ported from Claude Code (refs/claude-code/src/components/MarkdownTable.tsx),
- * adapted for this CLI:
+ * GFM table layout for ink:
  *   - <Ansi> → <Text> (ink 7 has no <Ansi>; <Text> passes ANSI escapes through).
  *   - useTerminalSize() → ink useStdout().stdout.columns.
- *   - stringWidth / wrapAnsi from the npm packages (same libs CC vendors).
+ *   - stringWidth / wrapAnsi from npm packages.
  *   - formatCell uses our format-token.formatToken (no highlight arg).
  *
  * The width-fitting algorithm (ideal vs min widths, proportional shrink, hard
@@ -13,29 +12,7 @@
  */
 import React from 'react';
 import { Text, useStdout } from 'ink';
-import stripAnsi from 'strip-ansi';
-import stringWidth from 'string-width';
-import wrapAnsi from 'wrap-ansi';
-import { formatToken, padAligned } from '../markdown/format-token.mjs';
-
-const SAFETY_MARGIN = 4;
-const MIN_COLUMN_WIDTH = 3;
-const MAX_ROW_LINES = 4;
-const ANSI_BOLD_START = '\x1b[1m';
-const ANSI_BOLD_END = '\x1b[22m';
-
-/** Wrap text to width, ANSI-aware, returning lines (CC wrapText). */
-function wrapText(text, width, options) {
-  if (width <= 0) return [text];
-  const trimmedText = String(text).trimEnd();
-  const wrapped = wrapAnsi(trimmedText, width, {
-    hard: options?.hard ?? false,
-    trim: false,
-    wordWrap: true,
-  });
-  const lines = wrapped.split('\n').filter((line) => line.length > 0);
-  return lines.length > 0 ? lines : [''];
-}
+import { buildTableRender } from '../markdown/table-layout.mjs';
 
 export function MarkdownTable({ token, forceWidth }) {
   // App owns resize reflow and there is no <Static> transcript anymore, so table
@@ -43,162 +20,10 @@ export function MarkdownTable({ token, forceWidth }) {
   const actualTerminalWidth = useStdout()?.stdout?.columns ?? 80;
   const terminalWidth = forceWidth ?? actualTerminalWidth;
 
-  const formatCell = (tokens) => tokens?.map((t) => formatToken(t)).join('') ?? '';
-  const getPlainText = (tokens) => stripAnsi(formatCell(tokens));
-
-  const getMinWidth = (tokens) => {
-    const text = getPlainText(tokens);
-    const words = text.split(/\s+/).filter((w) => w.length > 0);
-    if (words.length === 0) return MIN_COLUMN_WIDTH;
-    return Math.max(...words.map((w) => stringWidth(w)), MIN_COLUMN_WIDTH);
-  };
-  const getIdealWidth = (tokens) =>
-    Math.max(stringWidth(getPlainText(tokens)), MIN_COLUMN_WIDTH);
-
-  // Step 1: min (longest word) and ideal (full content) widths per column.
-  const minWidths = token.header.map((header, colIndex) => {
-    let maxMinWidth = getMinWidth(header.tokens);
-    for (const row of token.rows) maxMinWidth = Math.max(maxMinWidth, getMinWidth(row[colIndex]?.tokens));
-    return maxMinWidth;
-  });
-  const idealWidths = token.header.map((header, colIndex) => {
-    let maxIdeal = getIdealWidth(header.tokens);
-    for (const row of token.rows) maxIdeal = Math.max(maxIdeal, getIdealWidth(row[colIndex]?.tokens));
-    return maxIdeal;
-  });
-
-  // Step 2: available space.
-  const numCols = token.header.length;
-  const borderOverhead = 1 + numCols * 3;
-  const availableWidth = Math.max(terminalWidth - borderOverhead - SAFETY_MARGIN, numCols * MIN_COLUMN_WIDTH);
-
-  // Step 3: fit column widths into available space.
-  const totalMin = minWidths.reduce((s, w) => s + w, 0);
-  const totalIdeal = idealWidths.reduce((s, w) => s + w, 0);
-  let needsHardWrap = false;
-  let columnWidths;
-  if (totalIdeal <= availableWidth) {
-    columnWidths = idealWidths;
-  } else if (totalMin <= availableWidth) {
-    const extraSpace = availableWidth - totalMin;
-    const overflows = idealWidths.map((ideal, i) => ideal - minWidths[i]);
-    const totalOverflow = overflows.reduce((s, o) => s + o, 0);
-    columnWidths = minWidths.map((min, i) => {
-      if (totalOverflow === 0) return min;
-      return min + Math.floor((overflows[i] / totalOverflow) * extraSpace);
-    });
-  } else {
-    needsHardWrap = true;
-    const scaleFactor = availableWidth / totalMin;
-    columnWidths = minWidths.map((w) => Math.max(Math.floor(w * scaleFactor), MIN_COLUMN_WIDTH));
-  }
-
-  // Step 4: max row lines → decide vertical fallback.
-  const calculateMaxRowLines = () => {
-    let maxLines = 1;
-    for (let i = 0; i < token.header.length; i++) {
-      const wrapped = wrapText(formatCell(token.header[i].tokens), columnWidths[i], { hard: needsHardWrap });
-      maxLines = Math.max(maxLines, wrapped.length);
-    }
-    for (const row of token.rows) {
-      for (let i = 0; i < row.length; i++) {
-        const wrapped = wrapText(formatCell(row[i]?.tokens), columnWidths[i], { hard: needsHardWrap });
-        maxLines = Math.max(maxLines, wrapped.length);
-      }
-    }
-    return maxLines;
-  };
-  const useVerticalFormat = calculateMaxRowLines() > MAX_ROW_LINES;
-
-  const renderRowLines = (cells, isHeader) => {
-    const cellLines = cells.map((cell, colIndex) =>
-      wrapText(formatCell(cell.tokens), columnWidths[colIndex], { hard: needsHardWrap }),
-    );
-    const maxLines = Math.max(...cellLines.map((l) => l.length), 1);
-    const verticalOffsets = cellLines.map((l) => Math.floor((maxLines - l.length) / 2));
-    const result = [];
-    for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
-      let line = '│';
-      for (let colIndex = 0; colIndex < cells.length; colIndex++) {
-        const lines = cellLines[colIndex];
-        const offset = verticalOffsets[colIndex];
-        const contentLineIdx = lineIdx - offset;
-        const lineText = contentLineIdx >= 0 && contentLineIdx < lines.length ? lines[contentLineIdx] : '';
-        const width = columnWidths[colIndex];
-        const align = isHeader ? 'center' : token.align?.[colIndex] ?? 'left';
-        line += ' ' + padAligned(lineText, stringWidth(lineText), width, align) + ' │';
-      }
-      result.push(line);
-    }
-    return result;
-  };
-
-  const renderBorderLine = (type) => {
-    const [left, mid, cross, right] = {
-      top: ['┌', '─', '┬', '┐'],
-      middle: ['├', '─', '┼', '┤'],
-      bottom: ['└', '─', '┴', '┘'],
-    }[type];
-    let line = left;
-    columnWidths.forEach((width, colIndex) => {
-      line += mid.repeat(width + 2);
-      line += colIndex < columnWidths.length - 1 ? cross : right;
-    });
-    return line;
-  };
-
-  const renderVerticalFormat = () => {
-    const lines = [];
-    const headers = token.header.map((h) => getPlainText(h.tokens));
-    const separatorWidth = Math.min(terminalWidth - 1, 40);
-    const separator = '─'.repeat(separatorWidth);
-    const wrapIndent = '  ';
-    token.rows.forEach((row, rowIndex) => {
-      if (rowIndex > 0) lines.push(separator);
-      row.forEach((cell, colIndex) => {
-        const label = headers[colIndex] || `Column ${colIndex + 1}`;
-        const rawValue = formatCell(cell.tokens).trimEnd();
-        const value = rawValue.replace(/\n+/g, ' ').replace(/\s+/g, ' ').trim();
-        const firstLineWidth = terminalWidth - stringWidth(label) - 3;
-        const subsequentLineWidth = terminalWidth - wrapIndent.length - 1;
-        const firstPassLines = wrapText(value, Math.max(firstLineWidth, 10));
-        const firstLine = firstPassLines[0] || '';
-        let wrappedValue;
-        if (firstPassLines.length <= 1 || subsequentLineWidth <= firstLineWidth) {
-          wrappedValue = firstPassLines;
-        } else {
-          const remainingText = firstPassLines.slice(1).map((l) => l.trim()).join(' ');
-          wrappedValue = [firstLine, ...wrapText(remainingText, subsequentLineWidth)];
-        }
-        lines.push(`${ANSI_BOLD_START}${label}:${ANSI_BOLD_END} ${wrappedValue[0] || ''}`);
-        for (let i = 1; i < wrappedValue.length; i++) {
-          if (!wrappedValue[i].trim()) continue;
-          lines.push(`${wrapIndent}${wrappedValue[i]}`);
-        }
-      });
-    });
-    return lines.join('\n');
-  };
-
-  if (useVerticalFormat) {
-    return <Text>{renderVerticalFormat()}</Text>;
-  }
-
-  const tableLines = [];
-  tableLines.push(renderBorderLine('top'));
-  tableLines.push(...renderRowLines(token.header, true));
-  tableLines.push(renderBorderLine('middle'));
-  token.rows.forEach((row, rowIndex) => {
-    tableLines.push(...renderRowLines(row, false));
-    if (rowIndex < token.rows.length - 1) tableLines.push(renderBorderLine('middle'));
-  });
-  tableLines.push(renderBorderLine('bottom'));
-
-  // Safety: if any line would overflow (resize race), fall back to vertical.
-  const maxLineWidth = Math.max(...tableLines.map((l) => stringWidth(stripAnsi(l))));
-  if (maxLineWidth > terminalWidth - SAFETY_MARGIN) {
-    return <Text>{renderVerticalFormat()}</Text>;
-  }
-
-  return <Text>{tableLines.join('\n')}</Text>;
+  // The entire layout (column fit, vertical fallback, bordered box, overflow
+  // re-fallback) lives in the pure markdown/table-layout.mjs module so the
+  // renderer and the App.jsx row-height estimator share one source of truth and
+  // can never drift. The component just draws the lines it returns verbatim.
+  const { lines } = buildTableRender(token, terminalWidth);
+  return <Text>{lines.join('\n')}</Text>;
 }

package/src/tui/components/Message.jsx

@@ -1,42 +1,59 @@
 /**
  * components/Message.jsx — transcript message rows.
  *
- * Ported from Claude Code:
- *   - AssistantTextMessage.tsx: `● <markdown>` where the dot is `BLACK_CIRCLE`
- *     in the `text` color (white, NOT claude-orange), in a 2-wide gutter, and
+ * Transcript message rows:
+ *   - Assistant: `● <markdown>` where the dot is `BLACK_CIRCLE`
+ *     in the `text` color (not the orange title accent), in a 2-wide gutter, and
  *     the markdown sits in a column box beside it (flexDirection row).
- *   - UserPromptMessage.tsx: text on a `userMessageBackground` background with
- *     `paddingRight={1}` (no prompt glyph — CC uses the bg to distinguish input
+ *   - User: text on a `userMessageBackground` background with
+ *     `paddingRight={1}` (no prompt glyph — the bg distinguishes input
  *     from assistant/tool rows).
  *
  * The dot uses `minWidth={2}` so wrapped markdown lines align under the text,
- * not under the dot (CC's NoSelect minWidth={2} behavior).
+ * not under the dot (2-wide gutter alignment).
  */
 import React from 'react';
 import { Box, Text, useAnimation } from 'ink';
 import { theme, TURN_MARKER } from '../theme.mjs';
 import { Markdown, StreamingMarkdown } from './Markdown.jsx';
+import { assistantBodyWidth } from '../markdown/table-layout.mjs';
 import { THEREFORE } from '../figures.mjs';
 import { formatDuration } from '../time-format.mjs';
 
-export const AssistantMessage = React.memo(function AssistantMessage({ text, streaming = false }) {
+// `themeEpoch` is a memo-busting prop (threaded from App): the active theme
+// mutates `theme` in-place, so a /theme switch must re-render this memoized row
+// and recompute its markdown colors. It is forwarded into Markdown so the
+// token/AnsiText caches include it as a dep.
+export const AssistantMessage = React.memo(function AssistantMessage({ text, streaming = false, columns = 80, themeEpoch = 0 }) {
+  // The body column needs an EXPLICIT numeric width. Without it, ink/Yoga
+  // measures the wrapped markdown body before the row's available width is
+  // resolved and caches its height as a single row — so a multi-line assistant
+  // message renders only its LAST wrapped line (the head lines are clipped) and
+  // streaming height jitters as the measure flips. Reserve the 2-col gutter
+  // (BLACK CIRCLE in minWidth={2}) plus one right-edge safety cell. Letting an
+  // assistant line reach the terminal's last column can auto-wrap/scroll on
+  // Windows Terminal/conhost and make the next redraw appear to lose leading
+  // CJK characters even though the backing transcript is intact.
+  const bodyWidth = assistantBodyWidth(columns);
   return (
     <Box flexDirection="row" marginTop={1}>
       <Box flexShrink={0} minWidth={2}>
         <Text color={theme.text}>{TURN_MARKER}</Text>
       </Box>
-      <Box flexDirection="column" flexGrow={1}>
-        {streaming ? <StreamingMarkdown>{text}</StreamingMarkdown> : <Markdown>{text}</Markdown>}
+      <Box flexDirection="column" flexShrink={0} width={bodyWidth}>
+        {streaming
+          ? <StreamingMarkdown themeEpoch={themeEpoch} columns={bodyWidth}>{text}</StreamingMarkdown>
+          : <Markdown themeEpoch={themeEpoch} columns={bodyWidth}>{text}</Markdown>}
       </Box>
     </Box>
   );
 });
 
-export const UserMessage = React.memo(function UserMessage({ text, attached = false, columns }) {
+export const UserMessage = React.memo(function UserMessage({ text, attached = false, columns, themeEpoch = 0 }) {
   // `attached` = the previous transcript row is also a user message (consecutive
   // steering prompts). Those stack flush together; a user message that follows
   // an assistant/tool row gets a one-row gap above it.
-  // The background band fills the row edge-to-edge (CC's user bubble reads as a
+  // The background band fills the row edge-to-edge (user bubble reads as a
   // full-width band, not a text-hugging tag). An explicit numeric width is more
   // robust than "100%" here — it guarantees the band even if a parent's width
   // context is ambiguous. paddingLeft aligns the body under the 2-col gutter.