mixdog 0.9.1 → 0.9.3

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

@@ -12,13 +12,13 @@
  *   - Hyperlinks/issue-ref linkify are dropped (no OSC-8 dependency); link text
  *     is shown plainly with its URL.
  */
+import { createRequire } from 'node:module';
 import { Chalk } from 'chalk';
-import { highlight, supportsLanguage } from 'cli-highlight';
 import stripAnsi from 'strip-ansi';
-import stringWidth from 'string-width';
 import wrapAnsi from 'wrap-ansi';
 import { theme, getThemeVersion } from '../theme.mjs';
 import { BLOCKQUOTE_BAR, HR_LINE } from '../figures.mjs';
+import { displayWidth } from '../display-width.mjs';
 
 // Force truecolor so chalk emits 24-bit SGR even when the ambient level is 0.
 // ink's <Text> passes these escapes through verbatim.
@@ -27,26 +27,12 @@ const chalk = new Chalk({ level: 3 });
 // Use \n unconditionally (os.EOL's \r breaks segment mapping).
 const EOL = '\n';
 
-/** Parse an `rgb(r,g,b)` theme string into a chalk colorizer. */
 function rgbColor(str) {
   const m = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(String(str || ''));
   if (!m) return (s) => s;
   return chalk.rgb(Number(m[1]), Number(m[2]), Number(m[3]));
 }
 
-/**
- * Parse an `rgb(r,g,b)` theme string into a TRUECOLOR BACKGROUND wrapper. Emits
- * `48;2;R;G;B` … `49` (bg reset) around the string so AnsiText (case 48) maps it
- * to an ink backgroundColor, giving a code line a tinted band. Returns identity
- * when the string is not a valid rgb() so a missing key never corrupts output.
- */
-function rgbBg(str) {
-  const m = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(String(str || ''));
-  if (!m) return (s) => s;
-  const open = `\x1b[48;2;${+m[1]};${+m[2]};${+m[3]}m`;
-  return (s) => `${open}${s}\x1b[49m`;
-}
-
 // Colorizers are derived from the active theme's md* keys. They are cached and
 // rebuilt only when the theme version changes, so a `/theme` switch takes
 // effect on the next render without recomputing a chalk fn per token.
@@ -81,8 +67,6 @@ export function extraColorizers() {
     fenceBorder: rgbColor(theme.mdCodeBlockBorder ?? theme.mdHr),
     link: rgbColor(theme.mdLink ?? theme.code),
     linkText: rgbColor(theme.mdLinkText ?? theme.mdCode),
-    strong: rgbColor(theme.mdStrong ?? theme.mdHeading),
-    emph: rgbColor(theme.mdEmph ?? theme.mdHeading),
     // diff/patch
     diffAdded: rgbColor(theme.mdDiffAdded ?? theme.success),
     diffRemoved: rgbColor(theme.mdDiffRemoved ?? theme.error),
@@ -100,9 +84,6 @@ export function extraColorizers() {
     synOperator: rgbColor(theme.syntaxOperator ?? theme.mdCodeBlock),
     synPunct: rgbColor(theme.syntaxPunctuation ?? theme.mdCodeBlock),
     body: fallbackBody,
-    // Truecolor background band for fenced code blocks (per-line wrap).
-    codeBg: rgbBg(theme.mdCodeBlockBg ?? theme.background),
-    codeSpanBg: rgbBg(theme.mdCodeSpanBg ?? theme.mdCodeBlockBg ?? theme.background),
   };
   return _extra;
 }
@@ -126,12 +107,65 @@ function decodeEntities(s) {
 }
 
 // ── Fenced code block rendering ─────────────────────────────────────────────
-// Flush-left wrapped body with per-line background band (no ``` fences / lang row).
-// Diff/patch languages (and bodies that look like unified diffs) keep the diff
-// highlighter; other languages use cli-highlight (highlight.js) themed from our
-// syntax* palette; unknown languages fall back to flat `mdCodeBlock` body color.
+// Gutter-indented, syntax-highlighted body with NO background band and no ```
+// fences. Diff/patch languages (and bodies that look like unified diffs) keep
+// the diff highlighter; other languages use
+// cli-highlight (highlight.js) themed from our syntax* palette; unknown
+// languages fall back to flat `mdCodeBlock` body color.
 const DIFF_LANGS = new Set(['diff', 'patch', 'udiff', 'git-diff', 'gitdiff']);
 
+// Fixed tab size for fenced-code rendering. The exact value is cosmetic; what
+// matters for correctness is that NO raw \t byte survives into the rendered
+// string. string-width counts a tab as ZERO cells ("Tabs are ignored by
+// design"; \p{Control} is a zero-width cluster), so our wrap/row math believes
+// a tab-bearing code line is narrower than it is. ink clips the transcript
+// viewport at the measured height, but the terminal then EXPANDS the surviving
+// tab to the next tab stop — adding physical columns/rows AFTER the clip, which
+// makes a code line near the bottom edge bleed THROUGH into the prompt box on
+// scroll-up. Expanding tabs to literal spaces here makes the measurement and
+// the terminal agree, so the clip holds.
+const CODE_TAB_SIZE = 2;
+
+/**
+ * Normalize raw fenced-code source for terminal rendering:
+ *   - CRLF / lone CR → LF (so wrap sees real logical lines);
+ *   - TAB → spaces, column-aware to the next CODE_TAB_SIZE stop, so width math
+ *     matches what the terminal draws and the viewport clip is not bypassed;
+ *   - other C0 control chars (and DEL) except LF → single space, so stray
+ *     control bytes cannot trigger terminal-side cursor moves / extra rows.
+ */
+function normalizeCodeText(text) {
+  const input = String(text ?? '');
+  if (input.length === 0) return input;
+  const normalizedEol = input.replace(/\r\n?/g, '\n');
+  let out = '';
+  let col = 0;
+  for (const ch of normalizedEol) {
+    if (ch === '\n') {
+      out += ch;
+      col = 0;
+      continue;
+    }
+    if (ch === '\t') {
+      const advance = CODE_TAB_SIZE - (col % CODE_TAB_SIZE);
+      out += ' '.repeat(advance);
+      col += advance;
+      continue;
+    }
+    const cp = ch.codePointAt(0);
+    if (cp != null && (cp <= 0x1f || cp === 0x7f)) {
+      // Remaining C0 control / DEL: replace with a space so it cannot move the
+      // terminal cursor after ink has already accounted for the row.
+      out += ' ';
+      col += 1;
+      continue;
+    }
+    out += ch;
+    col += displayWidth(ch);
+  }
+  return out;
+}
+
 /** Wrap text to width, ANSI-aware (lockstep with table-layout hard wrap). */
 function wrapTextToWidth(text, width, options) {
   if (width <= 0) return [text];
@@ -153,10 +187,10 @@ function hardWrapAnsiLines(text, width) {
   const out = [];
   for (const softLine of wrapTextToWidth(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));
@@ -173,37 +207,11 @@ function wrapCodeLine(ansiContent, maxLineWidth) {
   return hardWrapAnsiLines(ansiContent, contentMax);
 }
 
-/** Visible terminal width of an ANSI-colored line (codes excluded). */
-function visibleLineWidth(line) {
-  return stringWidth(stripAnsi(String(line ?? '')));
-}
-
-/** Max visible width across lang label + body lines (content-based, not terminal). */
-function codeBlockContentWidth(langLine, bodyLines) {
-  const all = [...(langLine ? [langLine] : []), ...bodyLines];
-  if (all.length === 0) return 0;
-  return Math.max(1, ...all.map(visibleLineWidth));
-}
-
-/** Apply code-block bg to one line, padded to a shared compact block width. */
-function tintCodeLineToBlockWidth(line, codeBg, blockWidth) {
-  const w = visibleLineWidth(line);
-  const pad = Math.max(0, blockWidth - w);
-  return codeBg(`${line ?? ''}${' '.repeat(pad)}`);
-}
-
-function tintCodeBlockBody(langLine, bodyLines, codeBg) {
-  const blockWidth = codeBlockContentWidth(langLine, bodyLines);
-  const langOut = langLine ? tintCodeLineToBlockWidth(langLine, codeBg, blockWidth) : '';
-  const bodyOut = bodyLines.map((line) => tintCodeLineToBlockWidth(line, codeBg, blockWidth)).join(EOL);
-  return { langOut, bodyOut };
-}
-
 /** Reduce render width by a visible prefix (list marker, blockquote bar, etc.). */
 function contentWidthAfterPrefix(width, prefix) {
   const base = Number(width) || 0;
   if (base <= 0) return 0;
-  return Math.max(8, base - stringWidth(String(prefix ?? '')));
+  return Math.max(8, base - displayWidth(String(prefix ?? '')));
 }
 
 /** Normalize a fenced info-string to a bare lowercase language token. */
@@ -295,6 +303,27 @@ function collectDiffBodyLines(text, c, bandWidth) {
 }
 
 // ── cli-highlight (highlight.js) ────────────────────────────────────────────
+const requireCliHighlight = createRequire(import.meta.url);
+/** @type {{ highlight: typeof import('cli-highlight').highlight, supportsLanguage: typeof import('cli-highlight').supportsLanguage } | null} */
+let cliHighlightModule = null;
+
+function getCliHighlight() {
+  if (cliHighlightModule) return cliHighlightModule;
+  try {
+    const clihl = requireCliHighlight('cli-highlight');
+    cliHighlightModule = {
+      highlight: clihl.highlight,
+      supportsLanguage: clihl.supportsLanguage,
+    };
+  } catch {
+    cliHighlightModule = {
+      highlight: null,
+      supportsLanguage: () => false,
+    };
+  }
+  return cliHighlightModule;
+}
+
 /** Internal family → highlight.js language id (when alias alone is insufficient). */
 const FAMILY_TO_HLJS = {
   js: 'javascript',
@@ -439,6 +468,7 @@ function getCliHighlightTheme() {
 
 function hljsLanguageFromFamily(family) {
   if (!family || family === 'md') return null;
+  const { supportsLanguage } = getCliHighlight();
   const mapped = FAMILY_TO_HLJS[family];
   if (mapped && supportsLanguage(mapped)) return mapped;
   if (supportsLanguage(family)) return family;
@@ -451,6 +481,7 @@ function resolveHljsLanguage(lang) {
   if (!normalized) return null;
   const viaFamily = hljsLanguageFromFamily(LANG_FAMILY[normalized]);
   if (viaFamily) return viaFamily;
+  const { supportsLanguage } = getCliHighlight();
   return supportsLanguage(normalized) ? normalized : null;
 }
 
@@ -459,7 +490,8 @@ function resolveHljsLanguage(lang) {
  * or highlighting fails (caller falls back to flat body color).
  */
 function highlightCodeText(text, hljsLang) {
-  if (!hljsLang || !supportsLanguage(hljsLang)) return null;
+  const { highlight, supportsLanguage } = getCliHighlight();
+  if (!hljsLang || !supportsLanguage(hljsLang) || typeof highlight !== 'function') return null;
   const src = String(text ?? '');
   if (!src.trim()) return null;
   if (!/[A-Za-z0-9]/.test(src)) return null;
@@ -531,31 +563,45 @@ function collectHighlightedBodyLines(text, hljsLang, bandWidth) {
   return lines;
 }
 
+/** Left gutter that keeps code visually distinct from prose (no bg band). */
+const CODE_GUTTER = '  ';
+
 /**
- * Render a fenced `code` token: flush-left wrapped body with background band
- * and language-aware coloring (no visible ``` fence lines or lang label).
+ * Render a fenced `code` token: an optional
+ * subtle language label row, then the wrapped, syntax/diff/flat-highlighted
+ * body. Every row is left-indented by a 2-col gutter. NO background band, no
+ * full-width padding, and no visible ``` fence lines.
  */
 function renderCodeBlock(token, width = 0) {
   const { codeBlock } = colorizers();
   const c = extraColorizers();
   const lang = normalizeLang(token.lang);
-  const text = decodeEntities(token.text ?? '');
-  const bandWidth = Math.max(8, Number(width) || 80);
+  const text = normalizeCodeText(decodeEntities(token.text ?? ''));
+  const renderWidth = Math.max(8, Number(width) || 80);
+  // Wrap content to the render width minus the left gutter so `gutter + content`
+  // never overruns the available width.
+  const contentWidth = Math.max(1, renderWidth - CODE_GUTTER.length);
 
   let bodyLines;
   if (DIFF_LANGS.has(lang) || (!lang && looksLikeUnifiedDiff(text))) {
-    bodyLines = collectDiffBodyLines(text, c, bandWidth);
+    bodyLines = collectDiffBodyLines(text, c, contentWidth);
   } else {
     const hljsLang = resolveHljsLanguage(lang);
     const family = LANG_FAMILY[lang];
     if (hljsLang && family !== 'md') {
-      bodyLines = collectHighlightedBodyLines(text, hljsLang, bandWidth);
+      bodyLines = collectHighlightedBodyLines(text, hljsLang, contentWidth);
     } else {
-      bodyLines = collectFlatBodyLines(text, codeBlock, bandWidth);
+      bodyLines = collectFlatBodyLines(text, codeBlock, contentWidth);
     }
   }
-  const { bodyOut } = tintCodeBlockBody(null, bodyLines, c.codeBg);
-  return `${bodyOut}${bodyOut ? EOL : ''}`;
+  // Indent every body row by the gutter (no bg band).
+  const indentedBody = bodyLines.map((line) => `${CODE_GUTTER}${line ?? ''}`);
+  // Language label: a subtle (syntax-comment colored) metadata row above the
+  // body. Its trimmed visible text is exactly the bare lang token, so consumers
+  // can detect the label by trimmed equality.
+  const langLine = lang ? `${CODE_GUTTER}${c.synComment(lang)}` : null;
+  const rows = [...(langLine ? [langLine] : []), ...indentedBody].join(EOL);
+  return `${rows}${rows ? EOL : ''}`;
 }
 
 function numberToLetter(n) {
@@ -603,11 +649,13 @@ function getListNumber(depth, orderedListNumber) {
  * marked token switch (minus table / hyperlink deps).
  */
 export function formatToken(token, listBaseIndent = 0, orderedListNumber = null, parent = null, width = 0, depth = 0) {
-  const { accent, codeBlock, headingAccent, quoteBorder, quoteText, hrLine } = colorizers();
+  const { accent, codeBlock, hrLine } = colorizers();
   const ex = extraColorizers();
   switch (token.type) {
     case 'blockquote': {
-      const bar = quoteBorder(BLOCKQUOTE_BAR);
+      // Block structure carries no color: a dim bar plus
+      // body-colored italic text. Color is reserved for inline codespan/link.
+      const bar = chalk.dim(BLOCKQUOTE_BAR);
       const quotePrefix = `${BLOCKQUOTE_BAR} `;
       const innerWidth = contentWidthAfterPrefix(width, quotePrefix);
       const inner = (token.tokens ?? []).map((t) => formatToken(t, 0, null, null, innerWidth)).join('');
@@ -615,8 +663,8 @@ export function formatToken(token, listBaseIndent = 0, orderedListNumber = null,
         .split(EOL)
         .map((line) => {
           // Padded fenced-code blank rows are space-only; trim() would drop the quote bar.
-          if (stringWidth(stripAnsi(line)) === 0) return line;
-          return `${bar} ${quoteText(chalk.italic(line))}`;
+          if (displayWidth(stripAnsi(line)) === 0) return line;
+          return `${bar} ${chalk.italic(line)}`;
         })
         .join(EOL);
     }
@@ -624,20 +672,24 @@ export function formatToken(token, listBaseIndent = 0, orderedListNumber = null,
       // Fenced block: flush-left wrapped body with syntax highlighting.
       return renderCodeBlock(token, width);
     case 'codespan':
-      // inline code
-      return ex.codeSpanBg(accent(decodeEntities(token.text)));
+      // inline code — accent color only (no background tint; a bg box behind
+      // inline spans reads as awkward against body text).
+      return accent(decodeEntities(token.text));
     case 'em':
-      return ex.emph(chalk.italic((token.tokens ?? []).map((t) => formatToken(t, 0, null, parent)).join('')));
+      // Italic only — no color tint (a colored em clashes per-theme and
+      // reads loud against body prose).
+      return chalk.italic((token.tokens ?? []).map((t) => formatToken(t, 0, null, parent)).join(''));
     case 'strong':
-      return ex.strong(chalk.bold((token.tokens ?? []).map((t) => formatToken(t, 0, null, parent)).join('')));
+      // Bold only — no color tint (stays body-colored, just heavier weight).
+      return chalk.bold((token.tokens ?? []).map((t) => formatToken(t, 0, null, parent)).join(''));
     case 'heading':
       switch (token.depth) {
         case 1:
           return (
-            chalk.bold.italic.underline(headingAccent((token.tokens ?? []).map((t) => formatToken(t)).join(''))) + EOL + EOL
+            chalk.bold.italic.underline((token.tokens ?? []).map((t) => formatToken(t)).join('')) + EOL + EOL
           );
         default: // h2+
-          return chalk.bold(headingAccent((token.tokens ?? []).map((t) => formatToken(t)).join(''))) + EOL + EOL;
+          return chalk.bold((token.tokens ?? []).map((t) => formatToken(t)).join('')) + EOL + EOL;
       }
     case 'hr': {
       // Span the available content width with a box-drawing rule. width is only
@@ -662,12 +714,12 @@ export function formatToken(token, listBaseIndent = 0, orderedListNumber = null,
       const OSC8_OPEN = (url) => `\x1b]8;;${url}\x07`;
       const OSC8_CLOSE = '\x1b]8;;\x07';
       if (plain && plain !== href) {
-        const styledLabel = ex.linkText(chalk.underline(linkText));
+        const styledLabel = ex.linkText(linkText);
         return `${OSC8_OPEN(href)}${styledLabel}${OSC8_CLOSE}`;
       }
       // No distinct label (empty or equal to href): show the URL itself as the
       // clickable, visible text.
-      return `${OSC8_OPEN(href)}${ex.link(chalk.underline(href))}${OSC8_CLOSE}`;
+      return `${OSC8_OPEN(href)}${ex.link(href)}${OSC8_CLOSE}`;
     }
     case 'list':
       return token.items

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

@@ -11,7 +11,7 @@ import {
 } 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 || ''));
@@ -23,31 +23,42 @@ function lexFirst(md, type) {
   return tokens.find((t) => t.type === type) ?? tokens[0];
 }
 
-test('fenced code block has no ``` fences and flush-left 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('```'), 'no literal fence markers');
-  assert.ok(plain.includes('const x = 1;'), 'body is flush-left');
-  assert.ok(!plain.trimStart().startsWith('js'), 'no language label row');
+  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: fenced code renders with no `48;2;` bg SGR.
+  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 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 share one compact background 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, 80);
+  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 >= 3, 'body lines rendered');
-  assert.equal(new Set(widths).size, 1, 'every row uses the same content width');
-  assert.equal(Math.max(...widths), stringWidth('longer line'), 'width follows longest rendered line');
+  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', () => {
@@ -63,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');
@@ -163,12 +201,14 @@ test('highlight cache serves repeat block highlight without changing output', ()
   assert.ok(first[0].includes('38;2;'), 'highlighted ANSI present');
 });
 
-test('inline codespan emits truecolor background band', () => {
+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);
-  assert.ok(out.includes('48;2;'), 'background SGR present');
+  // 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');
 });
@@ -265,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 (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', () => {
@@ -302,11 +344,11 @@ test('every palette defines the full extended key set', () => {
     '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`';