mixdog 0.9.0 → 0.9.2

package/src/tui/markdown/format-token.test.mjs

@@ -3,10 +3,15 @@ import assert from 'node:assert/strict';
 import { marked } from 'marked';
 import stripAnsi from 'strip-ansi';
 import stringWidth from 'string-width';
-import { formatToken } from './format-token.mjs';
+import {
+  formatToken,
+  highlightCodeBlockToLines,
+  extraColorizers,
+  _highlightCacheSizeForTests,
+} from './format-token.mjs';
 import { setThemeSetting, theme } from '../theme.mjs';
 
-setThemeSetting('mixdog', { persist: false });
+setThemeSetting('basic', { persist: false });
 
 function rgbSgr(value) {
   const m = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(String(value || ''));
@@ -18,22 +23,42 @@ function lexFirst(md, type) {
   return tokens.find((t) => t.type === type) ?? tokens[0];
 }
 
-test('fenced code block renders lang label without ``` fences and indented body', () => {
+test('fenced code block has no ``` fences and shows a language label row', () => {
   const token = lexFirst('```js\nconst x = 1;\n```\n', 'code');
-  const out = formatToken(token);
+  const out = formatToken(token, 0, null, null, 60);
   const plain = stripAnsi(out);
-  assert.ok(plain.includes('js'), 'language label visible');
   assert.ok(!plain.includes('```'), 'no literal fence markers');
-  assert.ok(plain.includes('  const x = 1;'), 'body is two-space indented');
-  assert.ok(out.includes(rgbSgr(theme.mdCodeBlockBorder)), 'lang label uses border color');
+  assert.ok(plain.includes('const x = 1;'), 'body present');
+  // The first non-empty row is the subtle language label; its trimmed text is
+  // exactly the bare lang token (gutter trims away).
+  const rows = plain.split('\n').filter((l) => l.trim().length > 0);
+  assert.equal(rows[0].trim(), 'js', 'first row is the language label');
 });
 
-test('short code line has no terminal-width trailing padding band', () => {
+test('short code line is gutter-indented with no background band', () => {
+  const width = 60;
   const token = lexFirst('```js\nshort\n```\n', 'code');
-  const out = formatToken(token, 0, null, null, 60);
+  const out = formatToken(token, 0, null, null, width);
+  // No background band: codex/claude-code render code with no `48;2;` bg.
+  assert.ok(!out.includes('48;2;'), 'no background SGR');
   const bodyLine = stripAnsi(out).split('\n').find((l) => l.includes('short'));
   assert.ok(bodyLine, 'body line present');
-  assert.equal(bodyLine, '  short', 'body line is only indent + text');
+  assert.ok(bodyLine.startsWith('  short'), 'body is gutter-indented');
+  // Content width only — NOT padded out to the full render width.
+  assert.equal(stringWidth(bodyLine), '  short'.length, 'body row follows content width');
+});
+
+test('code block body lines have no background band and follow content width', () => {
+  const width = 80;
+  const token = lexFirst('```js\na\n\nlonger line\n```\n', 'code');
+  const out = formatToken(token, 0, null, null, width);
+  assert.ok(!out.includes('48;2;'), 'no background SGR anywhere');
+  const plainLines = stripAnsi(out).split('\n').filter((l) => l.length > 0);
+  const widths = plainLines.map((l) => stringWidth(l));
+  assert.ok(widths.length >= 2, 'body lines rendered');
+  // Widths follow content (gutter + visible text), not forced equal to render
+  // width: the longest row stays well under the 80-col render width.
+  assert.ok(Math.max(...widths) < width, 'rows are not padded to the render width');
 });
 
 test('long code line wraps within requested body width', () => {
@@ -41,7 +66,7 @@ test('long code line wraps within requested body width', () => {
   const token = lexFirst(`\`\`\`js\n${long}\n\`\`\`\n`, 'code');
   const width = 20;
   const out = formatToken(token, 0, null, null, width);
-  const bodyLines = stripAnsi(out).split('\n').filter((l) => l.startsWith('  '));
+  const bodyLines = stripAnsi(out).split('\n').filter((l) => l.includes('a'));
   assert.ok(bodyLines.length > 1, 'long line is wrapped into multiple rows');
   for (const line of bodyLines) {
     assert.ok(line.length <= width, `wrapped line "${line}" fits width ${width}`);
@@ -49,6 +74,33 @@ test('long code line wraps within requested body width', () => {
   assert.equal(bodyLines.join('').replace(/\s/g, ''), long, 'wrapped segments preserve content');
 });
 
+test('fenced code expands tabs so width math matches the terminal', () => {
+  // A raw \t counts as ZERO cells in string-width ("Tabs are ignored by
+  // design"), so without normalization the wrap/row math under-counts a
+  // tab-bearing line and the terminal-expanded line bleeds past the viewport
+  // clip. After normalization every rendered row must contain no raw \t and
+  // its visible width must equal its character length (tabs → spaces).
+  const token = lexFirst('```\n\tindented\n```\n', 'code');
+  const out = formatToken(token, 0, null, null, 60);
+  const plain = stripAnsi(out);
+  assert.ok(!plain.includes('\t'), 'no raw tab survives into the rendered string');
+  const bodyLine = plain.split('\n').find((l) => l.includes('indented'));
+  assert.ok(bodyLine, 'body line present');
+  assert.equal(stringWidth(bodyLine), bodyLine.length, 'visible width equals char length (no zero-width tab)');
+});
+
+test('fenced code strips stray C0 control chars except newline', () => {
+  // A bare \x07 (BELL) etc. measures as zero width but can move the terminal
+  // cursor; replace with a space so ink's row accounting holds.
+  const token = lexFirst('```\na\x07b\n```\n', 'code');
+  const out = formatToken(token, 0, null, null, 60);
+  const plain = stripAnsi(out);
+  assert.ok(!/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/.test(plain), 'no raw C0/DEL control survives');
+  const bodyLine = plain.split('\n').find((l) => l.includes('a') && l.includes('b'));
+  assert.ok(bodyLine, 'body line present');
+  assert.equal(stringWidth(bodyLine), bodyLine.length, 'control char became a real space cell');
+});
+
 test('list item fenced code block respects narrowed width and has no fences', () => {
   const long = 'b'.repeat(36);
   const codeTok = lexFirst(`\`\`\`js\n${long}\n\`\`\`\n`, 'code');
@@ -83,6 +135,52 @@ test('blockquote fenced code block respects narrowed width and has no fences', (
   }
 });
 
+test('blockquote fenced code with blank line keeps quote prefix on every code row', () => {
+  const codeTok = lexFirst('```js\na\n\nb\n```\n', 'code');
+  const quoteTok = { type: 'blockquote', tokens: [codeTok] };
+  const outerWidth = 40;
+  const out = formatToken(quoteTok, 0, null, null, outerWidth);
+  const plain = stripAnsi(out);
+  assert.ok(!plain.includes('```'), 'no literal fence markers');
+  const bar = '\u258e';
+  const visibleLines = plain.split('\n').filter((l) => stringWidth(l) > 0);
+  assert.ok(visibleLines.length >= 3, 'two body lines + blank padded row');
+  for (const line of visibleLines) {
+    assert.ok(line.startsWith(bar), `quote bar on every visible row: "${line}"`);
+    assert.ok(stringWidth(line) <= outerWidth, `line fits outer width: "${line}"`);
+  }
+  const blankPadded = visibleLines.find((l) => !l.includes('a') && !l.includes('b'));
+  assert.ok(blankPadded, 'background-padded blank code row is rendered');
+  assert.ok(blankPadded.startsWith(bar), 'blank padded code row keeps quote prefix');
+});
+
+test('two-level nested list code block does not double-subtract list prefix width', () => {
+  const long = 'd'.repeat(40);
+  const codeTok = lexFirst(`\`\`\`js\n${long}\n\`\`\`\n`, 'code');
+  const innerList = {
+    type: 'list',
+    ordered: false,
+    items: [{ type: 'list_item', tokens: [codeTok] }],
+  };
+  const outerList = {
+    type: 'list',
+    ordered: false,
+    items: [{ type: 'list_item', tokens: [innerList] }],
+  };
+  const outerWidth = 30;
+  const singleLevelNested = formatToken(innerList, 2, null, null, outerWidth);
+  const twoLevelNested = formatToken(outerList, 0, null, null, outerWidth);
+  const codeLines = (plain) => plain.split('\n').filter((l) => l.includes('d'));
+  const singleLines = codeLines(stripAnsi(singleLevelNested));
+  const nestedLines = codeLines(stripAnsi(twoLevelNested));
+  assert.equal(
+    nestedLines.length,
+    singleLines.length,
+    'nested list code wraps like one-level nested list at the same outer width',
+  );
+  assert.ok(nestedLines.length > 1, 'code is wrapped under narrow width');
+});
+
 test('js highlighting colors keyword, string, number distinctly', () => {
   const token = lexFirst('```js\nconst n = 42;\nlet s = "hi";\n```\n', 'code');
   const out = formatToken(token);
@@ -91,6 +189,44 @@ test('js highlighting colors keyword, string, number distinctly', () => {
   assert.ok(out.includes(rgbSgr(theme.syntaxString)), 'string colored');
 });
 
+test('highlight cache serves repeat block highlight without changing output', () => {
+  const c = extraColorizers();
+  const text = `const cacheProbe_${Date.now()} = 1;\nlet y = 2;\n`;
+  const sizeBefore = _highlightCacheSizeForTests();
+  const first = highlightCodeBlockToLines(text, 'js', c);
+  assert.equal(_highlightCacheSizeForTests(), sizeBefore + 1, 'first highlight populates cache');
+  const second = highlightCodeBlockToLines(text, 'js', c);
+  assert.deepEqual(second, first);
+  assert.equal(_highlightCacheSizeForTests(), sizeBefore + 1, 'cache hit does not grow entries');
+  assert.ok(first[0].includes('38;2;'), 'highlighted ANSI present');
+});
+
+test('inline codespan is accent-colored with no background band', () => {
+  const tokens = marked.lexer('`hello`');
+  const codespan = tokens[0].tokens[0];
+  assert.equal(codespan.type, 'codespan');
+  const out = formatToken(codespan);
+  // Inline code uses accent color only — no bg box behind the span (a tinted
+  // band behind inline text reads as awkward against body prose).
+  assert.ok(!out.includes('48;2;'), 'no background SGR');
+  assert.ok(stripAnsi(out).includes('hello'));
+  assert.ok(out.includes(rgbSgr(theme.mdCode)), 'inline code accent');
+});
+
+test('kotlin fence resolves and highlights', () => {
+  const token = lexFirst('```kotlin\nfun main() {}\n```\n', 'code');
+  const out = formatToken(token);
+  assert.ok(out.includes(rgbSgr(theme.syntaxKeyword)) || out.includes(rgbSgr(theme.mdCodeBlock)));
+  assert.ok(stripAnsi(out).includes('fun main'));
+});
+
+test('typescript fence uses typescript highlighter', () => {
+  const token = lexFirst('```ts\nconst x: number = 1;\n```\n', 'code');
+  const out = formatToken(token);
+  assert.ok(out.includes('38;2;'));
+  assert.ok(stripAnsi(out).includes('const x'));
+});
+
 test('diff fenced block colors add/remove/hunk/header separately', () => {
   const diff = [
     '```diff',
@@ -142,7 +278,7 @@ test('unknown language falls back to flat code block color', () => {
   const token = lexFirst('```foobarlang\nsome text\n```\n', 'code');
   const out = formatToken(token);
   assert.ok(out.includes(rgbSgr(theme.mdCodeBlock)), 'flat code-block color used');
-  assert.ok(stripAnsi(out).includes('  some text'), 'body still indented');
+  assert.ok(stripAnsi(out).includes('some text'), 'body is flush-left');
 });
 
 test('inline link emits OSC 8 hyperlink with styled label (URL hidden)', () => {
@@ -169,10 +305,12 @@ test('strong and em use distinct mdStrong / mdEmph colors', () => {
   const emTok = lexFirst('*ital*', 'paragraph');
   const strongOut = formatToken(strongTok);
   const emOut = formatToken(emTok);
-  assert.ok(strongOut.includes(rgbSgr(theme.mdStrong)), 'strong colored');
-  assert.ok(emOut.includes(rgbSgr(theme.mdEmph)), 'em colored');
+  // Bold/italic carry weight/style only — NO color tint (codex/claude-code
+  // convention; a colored strong/em clashes per-theme and reads too loud).
   assert.ok(strongOut.includes('\x1b[1m'), 'strong is bold');
   assert.ok(emOut.includes('\x1b[3m'), 'em is italic');
+  assert.ok(!strongOut.includes(rgbSgr(theme.mdStrong)), 'strong is not color-tinted');
+  assert.ok(!emOut.includes(rgbSgr(theme.mdEmph)), 'em is not color-tinted');
 });
 
 test('h1 heading is bold, italic, and underlined', () => {
@@ -200,17 +338,17 @@ test('ordered list markers follow nesting depth (1. / a. / i.)', () => {
 
 test('every palette defines the full extended key set', () => {
   const required = [
-    'mdCodeBlockBorder', 'mdCodeBlockBg', 'mdLink', 'mdLinkText', 'mdStrong', 'mdEmph',
+    'mdCodeBlockBorder', 'mdCodeBlockBg', 'mdCodeSpanBg', 'mdLink', 'mdLinkText', 'mdStrong', 'mdEmph',
     'mdDiffAdded', 'mdDiffRemoved', 'mdDiffHunk', 'mdDiffHeader', 'mdDiffContext',
     'mdDiffAddedBg', 'mdDiffRemovedBg',
     'syntaxComment', 'syntaxKeyword', 'syntaxFunction', 'syntaxVariable',
     'syntaxString', 'syntaxNumber', 'syntaxType', 'syntaxOperator', 'syntaxPunctuation',
   ];
-  for (const id of ['mixdog', 'pi-dark', 'claude-dark', 'dracula', 'tokyonight', 'nord', 'gruvbox', 'catppuccin', 'everforest']) {
+  for (const id of ['basic', 'indigo', 'warm', 'light', 'teal', 'onedark', 'tokyonight', 'kanagawa', 'catppuccin', 'dracula', 'rosepine', 'nord', 'gruvbox', 'everforest']) {
     setThemeSetting(id, { persist: false });
     for (const key of required) {
       assert.ok(/^rgb\(\d+,\s*\d+,\s*\d+\)$/.test(String(theme[key])), `${id}.${key} is an rgb() string`);
     }
   }
-  setThemeSetting('mixdog', { persist: false });
+  setThemeSetting('basic', { persist: false });
 });

package/src/tui/markdown/measure-rendered-rows.mjs

@@ -0,0 +1,85 @@
+/**
+ * Row-height measurement lockstep with Markdown.jsx / StreamingMarkdown.jsx.
+ */
+import stripAnsi from 'strip-ansi';
+import { displayWidth } from '../display-width.mjs';
+import { assistantBodyWidth, measureMarkdownTableRows } from './table-layout.mjs';
+import { renderTokenAnsiSegments } from './render-ansi.mjs';
+import { resolveStreamingMarkdownParts } from './streaming-markdown.mjs';
+
+function wrappedLineRows(line, width) {
+  const text = String(line);
+  const full = displayWidth(text);
+  if (full === 0) return 1;
+  if (full <= width) return 1;
+  let rows = 1;
+  let col = 0;
+  for (const token of text.split(/(\s+)/)) {
+    if (!token) continue;
+    const tw = displayWidth(token);
+    if (tw === 0) continue;
+    if (tw > width) {
+      if (col > 0) { rows++; col = 0; }
+      rows += Math.ceil(tw / width) - 1;
+      col = tw % width || width;
+      continue;
+    }
+    if (col + tw > width) { rows++; col = tw; }
+    else { col += tw; }
+  }
+  return Math.max(1, rows);
+}
+
+function estimateWrappedRowsFallback(text, columns, reserve = 3) {
+  const width = Math.max(8, Number(columns || 80) - reserve);
+  const lines = String(text ?? '').split('\n');
+  return Math.max(1, lines.reduce((sum, line) => sum + wrappedLineRows(line, width), 0));
+}
+
+export function measureMarkdownRenderedRows(text, columns, { trimPartialFences = false } = {}) {
+  const value = String(text ?? '');
+  if (!value) return 1;
+  const bodyWidth = assistantBodyWidth(columns);
+  let segments;
+  try {
+    segments = renderTokenAnsiSegments(value, { width: bodyWidth, trimPartialFences });
+  } catch {
+    return Math.max(1, estimateWrappedRowsFallback(value, columns, 3));
+  }
+  if (!segments.length) return 1;
+  let rows = 0;
+  for (const seg of segments) {
+    if (seg.type === 'table') {
+      rows += Math.max(1, measureMarkdownTableRows(seg.token, bodyWidth));
+      continue;
+    }
+    const plain = stripAnsi(String(seg.ansi ?? ''));
+    for (const line of plain.split('\n')) {
+      rows += wrappedLineRows(line, bodyWidth);
+    }
+  }
+  rows += segments.length - 1;
+  return Math.max(1, rows);
+}
+
+export function measureStreamingMarkdownRenderedRows(text, columns, streamKey) {
+  const value = String(text ?? '');
+  if (!value) return 1;
+  const parts = resolveStreamingMarkdownParts(value, streamKey);
+  if (parts.plain) {
+    return measureMarkdownRenderedRows(value, columns, { trimPartialFences: false });
+  }
+  let rows = 0;
+  let childCount = 0;
+  if (parts.stablePrefix) {
+    rows += measureMarkdownRenderedRows(parts.stablePrefix, columns, { trimPartialFences: false });
+    childCount += 1;
+  }
+  if (parts.unstableSuffix) {
+    rows += measureMarkdownRenderedRows(parts.unstableForRender, columns, { trimPartialFences: true });
+    childCount += 1;
+  }
+  if (childCount === 2) rows += 1;
+  if (childCount === 0) return 1;
+  return Math.max(1, rows);
+}

package/src/tui/markdown/render-ansi.test.mjs

@@ -5,7 +5,7 @@ import { assistantBodyWidth } from './table-layout.mjs';
 import { renderTokenAnsiSegments, lexMarkdown, hasMarkdownSyntax } from './render-ansi.mjs';
 import { setThemeSetting } from '../theme.mjs';
 
-setThemeSetting('mixdog', { persist: false });
+setThemeSetting('basic', { persist: false });
 
 // Mirrors the streaming suffix the <Markdown trimPartialFences> path renders.
 const STREAMING = '```js\nconst x = 1;\n`';

package/src/tui/markdown/streaming-markdown.mjs

@@ -0,0 +1,167 @@
+/**
+ * Pure streaming-markdown layout shared by StreamingMarkdown (render) and row
+ * estimation (measure). Stable-prefix state is keyed by streamKey (assistant id).
+ */
+import { marked } from 'marked';
+import { configureMarked, hasMarkdownSyntax } from './render-ansi.mjs';
+import { trimPartialClosingFences } from './stream-fence.mjs';
+
+const stablePrefixByStreamKey = new Map();
+const STABLE_PREFIX_LRU_MAX = 32;
+
+/** Lockstep with App streaming row estimate (leading/trailing newline trim). */
+export function streamingLayoutText(text) {
+  return String(text ?? '').replace(/^\n+|\n+$/g, '');
+}
+
+function isWhitespaceOnlyText(text) {
+  return !String(text ?? '').trim();
+}
+
+function touchStablePrefixKey(key, value) {
+  if (!key) return;
+  if (stablePrefixByStreamKey.has(key)) stablePrefixByStreamKey.delete(key);
+  stablePrefixByStreamKey.set(key, value);
+  while (stablePrefixByStreamKey.size > STABLE_PREFIX_LRU_MAX) {
+    const oldest = stablePrefixByStreamKey.keys().next().value;
+    if (oldest === undefined) break;
+    stablePrefixByStreamKey.delete(oldest);
+  }
+}
+
+function getStablePrefixKey(key) {
+  if (!key || !stablePrefixByStreamKey.has(key)) return '';
+  const value = stablePrefixByStreamKey.get(key);
+  stablePrefixByStreamKey.delete(key);
+  stablePrefixByStreamKey.set(key, value);
+  return value;
+}
+
+function hasOpenFence(text) {
+  let ticks = 0;
+  let tildes = 0;
+  for (const line of String(text ?? '').split('\n')) {
+    if (/^\s*```/.test(line)) ticks += 1;
+    if (/^\s*~~~/.test(line)) tildes += 1;
+  }
+  return ticks % 2 === 1 || tildes % 2 === 1;
+}
+
+function hasOpenInlineCode(text) {
+  let count = 0;
+  const value = String(text ?? '');
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+    if (ch === '\\') {
+      i += 1;
+      continue;
+    }
+    if (ch !== '`') continue;
+    let run = 1;
+    while (value[i + run] === '`') run += 1;
+    if (run === 1) count += 1;
+    i += run - 1;
+  }
+  return count % 2 === 1;
+}
+
+function hasUnclosedDelimiter(text, marker) {
+  let count = 0;
+  const value = String(text ?? '');
+  for (let i = 0; i < value.length; i++) {
+    if (value[i] === '\\') {
+      i += 1;
+      continue;
+    }
+    if (value.startsWith(marker, i)) {
+      count += 1;
+      i += marker.length - 1;
+    }
+  }
+  return count % 2 === 1;
+}
+
+export function balanceStreamingMarkdown(text) {
+  const value = String(text ?? '');
+  if (!value || hasOpenFence(value)) return value;
+  if (hasOpenInlineCode(value)) return `${value}\``;
+  let rendered = value;
+  if (hasUnclosedDelimiter(rendered, '**')) rendered += '**';
+  if (hasUnclosedDelimiter(rendered, '__')) rendered += '__';
+  return rendered;
+}
+
+export function resetStreamingMarkdownStablePrefix(streamKey) {
+  if (streamKey == null || streamKey === '') return;
+  stablePrefixByStreamKey.delete(String(streamKey));
+}
+
+export function resetAllStreamingMarkdownStablePrefixes() {
+  stablePrefixByStreamKey.clear();
+}
+
+export function resolveStreamingMarkdownParts(text, streamKey) {
+  const t = streamingLayoutText(text);
+  const key = streamKey == null || streamKey === '' ? null : String(streamKey);
+
+  if (!t) {
+    if (key) stablePrefixByStreamKey.delete(key);
+    return {
+      plain: true,
+      stablePrefix: '',
+      unstableSuffix: '',
+      unstableForRender: '',
+    };
+  }
+
+  if (!hasMarkdownSyntax(t)) {
+    if (key) stablePrefixByStreamKey.delete(key);
+    return {
+      plain: true,
+      stablePrefix: '',
+      unstableSuffix: t,
+      unstableForRender: t,
+    };
+  }
+
+  let stablePrefix = key ? getStablePrefixKey(key) : '';
+  if (!t.startsWith(stablePrefix)) {
+    stablePrefix = '';
+  }
+
+  try {
+    configureMarked();
+    const boundary = stablePrefix.length;
+    const tokens = marked.lexer(t.substring(boundary));
+    trimPartialClosingFences(tokens);
+    let lastContentIdx = tokens.length - 1;
+    while (lastContentIdx >= 0 && tokens[lastContentIdx]?.type === 'space') lastContentIdx -= 1;
+    let firstContentIdx = 0;
+    while (firstContentIdx < tokens.length && tokens[firstContentIdx]?.type === 'space') {
+      firstContentIdx += 1;
+    }
+    let advance = 0;
+    for (let i = firstContentIdx; i < lastContentIdx; i++) {
+      advance += tokens[i]?.raw?.length ?? 0;
+    }
+    if (advance > 0) {
+      stablePrefix = t.substring(0, boundary + advance);
+      if (isWhitespaceOnlyText(stablePrefix)) stablePrefix = '';
+      if (key && stablePrefix) touchStablePrefixKey(key, stablePrefix);
+      else if (key && !stablePrefix) stablePrefixByStreamKey.delete(key);
+    }
+  } catch {
+    stablePrefix = '';
+    if (key) stablePrefixByStreamKey.delete(key);
+  }
+
+  if (isWhitespaceOnlyText(stablePrefix)) stablePrefix = '';
+
+  const unstableSuffix = t.substring(stablePrefix.length);
+  return {
+    plain: false,
+    stablePrefix,
+    unstableSuffix,
+    unstableForRender: balanceStreamingMarkdown(unstableSuffix),
+  };
+}

package/src/tui/markdown/streaming-markdown.test.mjs

@@ -0,0 +1,70 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { assistantBodyWidth } from './table-layout.mjs';
+import {
+  measureMarkdownRenderedRows,
+  measureStreamingMarkdownRenderedRows,
+} from './measure-rendered-rows.mjs';
+import { resolveStreamingMarkdownParts, streamingLayoutText } from './streaming-markdown.mjs';
+import { setThemeSetting } from '../theme.mjs';
+
+setThemeSetting('basic', { persist: false });
+
+function measureStreamingLayoutFromParts(text, columns, streamKey) {
+  const parts = resolveStreamingMarkdownParts(text, streamKey);
+  if (parts.plain) {
+    return measureMarkdownRenderedRows(text, columns);
+  }
+  let rows = 0;
+  let childCount = 0;
+  if (parts.stablePrefix) {
+    rows += measureMarkdownRenderedRows(parts.stablePrefix, columns);
+    childCount += 1;
+  }
+  if (parts.unstableSuffix) {
+    rows += measureMarkdownRenderedRows(parts.unstableForRender, columns, { trimPartialFences: true });
+    childCount += 1;
+  }
+  if (childCount === 2) rows += 1;
+  return Math.max(1, rows);
+}
+
+test('streaming row estimate matches shared layout parts at body width', () => {
+  const columns = 40;
+  const bodyWidth = assistantBodyWidth(columns);
+  const cases = [
+    { key: 'bold-wrap', text: `**${'m'.repeat(bodyWidth + 12)}` },
+    { key: 'partial-fence', text: `\`\`\`js\n${'w'.repeat(bodyWidth + 6)}\n\`` },
+  ];
+  for (const { key, text } of cases) {
+    const estimate = measureStreamingMarkdownRenderedRows(text, columns, key);
+    const layout = measureStreamingLayoutFromParts(text, columns, key);
+    assert.strictEqual(estimate, layout, `${key}: estimate must match render layout parts`);
+  }
+});
+
+test('partial code fence streaming measure uses trimPartialFences on unstable suffix', () => {
+  const columns = 48;
+  const bodyWidth = assistantBodyWidth(columns);
+  const streamKey = 'test-stream-fence';
+  const text = `\`\`\`js\n${'n'.repeat(bodyWidth + 8)}\n\``;
+  const estimate = measureStreamingMarkdownRenderedRows(text, columns, streamKey);
+  const parts = resolveStreamingMarkdownParts(text, streamKey);
+  const manual = measureMarkdownRenderedRows(parts.unstableForRender, columns, { trimPartialFences: true });
+  assert.strictEqual(estimate, Math.max(1, manual));
+});
+
+test('leading blank lines do not create an empty stable child or extra gap row', () => {
+  const columns = 40;
+  const streamKey = 'test-leading-blank';
+  const raw = '\n\n**streaming body**';
+  const trimmed = streamingLayoutText(raw);
+  const parts = resolveStreamingMarkdownParts(raw, streamKey);
+  assert.strictEqual(parts.stablePrefix, '', 'leading newlines must not promote whitespace-only stable');
+  assert.ok(parts.unstableSuffix.includes('streaming body'));
+  const estimate = measureStreamingMarkdownRenderedRows(raw, columns, streamKey);
+  const trimmedEstimate = measureStreamingMarkdownRenderedRows(trimmed, columns, streamKey);
+  assert.strictEqual(estimate, trimmedEstimate, 'raw vs trimmed leading newlines must match');
+  const layout = measureStreamingLayoutFromParts(raw, columns, streamKey);
+  assert.strictEqual(estimate, layout);
+});

package/src/tui/markdown/table-layout.mjs

@@ -15,9 +15,9 @@
  * caller (the component resolves it from useStdout()/forceWidth).
  */
 import stripAnsi from 'strip-ansi';
-import stringWidth from 'string-width';
 import wrapAnsi from 'wrap-ansi';
 import { formatToken, padAligned } from './format-token.mjs';
+import { displayWidth } from '../display-width.mjs';
 
 export const SAFETY_MARGIN = 4;
 export const MIN_COLUMN_WIDTH = 3;
@@ -51,10 +51,10 @@ export function hardWrapLines(text, width) {
   const out = [];
   for (const softLine of wrapText(input, max, { hard: true })) {
     let rest = softLine;
-    while (rest.length > 0 && stringWidth(rest) > max) {
+    while (rest.length > 0 && displayWidth(rest) > max) {
       let take = 1;
       for (let i = 1; i <= rest.length; i++) {
-        if (stringWidth(rest.slice(0, i)) <= max) take = i;
+        if (displayWidth(rest.slice(0, i)) <= max) take = i;
         else break;
       }
       out.push(rest.slice(0, take));
@@ -81,10 +81,10 @@ export function buildTableRender(token, terminalWidth) {
     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);
+    return Math.max(...words.map((w) => displayWidth(w)), MIN_COLUMN_WIDTH);
   };
   const getIdealWidth = (tokens) =>
-    Math.max(stringWidth(getPlainText(tokens)), MIN_COLUMN_WIDTH);
+    Math.max(displayWidth(getPlainText(tokens)), MIN_COLUMN_WIDTH);
 
   // Step 1: min (longest word) and ideal (full content) widths per column.
   const minWidths = token.header.map((header, colIndex) => {
@@ -157,7 +157,7 @@ export function buildTableRender(token, terminalWidth) {
         const lineText = contentLineIdx >= 0 && contentLineIdx < lines.length ? lines[contentLineIdx] : '';
         const colWidth = columnWidths[colIndex];
         const align = isHeader ? 'center' : token.align?.[colIndex] ?? 'left';
-        line += ' ' + padAligned(lineText, stringWidth(lineText), colWidth, align) + ' │';
+        line += ' ' + padAligned(lineText, displayWidth(lineText), colWidth, align) + ' │';
       }
       result.push(line);
     }
@@ -184,7 +184,7 @@ export function buildTableRender(token, terminalWidth) {
     const separatorWidth = Math.min(Math.max(0, width - 1), 40);
     const separator = '─'.repeat(separatorWidth);
     const wrapIndent = '  ';
-    const indentWidth = stringWidth(wrapIndent);
+    const indentWidth = displayWidth(wrapIndent);
     const pushFitted = (rawLine) => {
       for (const part of hardWrapLines(rawLine, width)) lines.push(part);
     };
@@ -195,7 +195,7 @@ export function buildTableRender(token, terminalWidth) {
         const rawValue = formatCell(cell.tokens).trimEnd();
         const value = rawValue.replace(/\n+/g, ' ').replace(/\s+/g, ' ').trim();
         const prefix = `${ANSI_BOLD_START}${label}:${ANSI_BOLD_END} `;
-        const prefixWidth = stringWidth(stripAnsi(prefix));
+        const prefixWidth = displayWidth(stripAnsi(prefix));
         const firstValueWidth = Math.max(1, width - prefixWidth);
         const contValueWidth = Math.max(1, width - indentWidth);
         const firstValueLines = hardWrapLines(value, firstValueWidth);
@@ -231,7 +231,7 @@ export function buildTableRender(token, terminalWidth) {
   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))));
+  const maxLineWidth = Math.max(...tableLines.map((l) => displayWidth(stripAnsi(l))));
   if (maxLineWidth > width - SAFETY_MARGIN) {
     return { lines: renderVerticalLines(), useVerticalFormat: true };
   }

package/src/tui/paste-attachments.mjs

@@ -67,17 +67,6 @@ export function imageReferenceIds(input) {
   return new Set([...String(input || '').matchAll(re)].map((m) => Number(m[1]) || 0).filter(Boolean));
 }
 
-export function promptContentText(content) {
-  if (typeof content === 'string') return content;
-  if (!Array.isArray(content)) return String(content ?? '');
-  return content.map((part) => {
-    if (typeof part === 'string') return part;
-    if (part?.type === 'text') return part.text || '';
-    if (part?.type === 'image') return `[image: ${part.mimeType || part.mediaType || part.source?.media_type || 'image'}]`;
-    return part?.text || '';
-  }).filter(Boolean).join('\n');
-}
-
 export function buildPromptContentWithImages(text, pastedImages = {}) {
   const value = String(text ?? '');
   const refs = imageReferenceIds(value);