mixdog 0.9.0 → 0.9.2

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

@@ -5,19 +5,20 @@
  *   - chalk is forced to truecolor (level 3) so colors render regardless of the
  *     ambient TTY detection (we control the surface).
  *   - The `permission`/code accent and blockquote bar come from our theme.mjs.
- *   - `code` (fenced) is emitted as a block-colored plain text + EOL (no
- *     syntax highlighter dependency); `codespan` (inline) gets the accent color.
+ *   - `code` (fenced) uses cli-highlight + theme syntax palette; `codespan`
+ *     (inline) gets the accent color.
  *   - `table` is NOT handled here — the React component (MarkdownTable.jsx)
  *     renders tables with proper ink Box layout (hybrid split).
  *   - 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 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.
@@ -26,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.
@@ -80,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),
@@ -99,8 +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),
   };
   return _extra;
 }
@@ -124,14 +107,65 @@ function decodeEntities(s) {
 }
 
 // ── Fenced code block rendering ─────────────────────────────────────────────
-// Compact language label (no ``` fences), two-space-indented wrapped body.
-// Diff/patch languages
-// (and code text that clearly looks like a unified diff) get colored +/-/@@
-// lines; other known languages get a conservative regex highlighter; unknown
-// languages fall back to the flat `mdCodeBlock` body color.
-const CODE_BLOCK_INDENT = '  ';
+// Gutter-indented, syntax-highlighted body with NO background band and no ```
+// fences (codex/claude-code convention). 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));
@@ -167,24 +201,17 @@ function hardWrapAnsiLines(text, width) {
   return out.length > 0 ? out : [''];
 }
 
-/** Wrap one logical code line (ANSI content, no indent) and prefix each segment. */
-function wrapIndentedCodeLine(ansiContent, maxLineWidth) {
-  const indentW = stringWidth(CODE_BLOCK_INDENT);
-  const contentMax = Math.max(1, maxLineWidth - indentW);
-  const segments = hardWrapAnsiLines(ansiContent, contentMax);
-  return segments.map((seg) => `${CODE_BLOCK_INDENT}${seg}`);
-}
-
-/** Tint code lines without padding to terminal width (no trailing bg band). */
-function tintCodeLines(lines, codeBg) {
-  return lines.map((line) => codeBg(line)).join(EOL);
+/** Wrap one logical code line (ANSI content) to max visible width. */
+function wrapCodeLine(ansiContent, maxLineWidth) {
+  const contentMax = Math.max(1, maxLineWidth);
+  return hardWrapAnsiLines(ansiContent, contentMax);
 }
 
 /** 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. */
@@ -266,34 +293,81 @@ function colorizeDiffStatTrailer(line, c) {
     .replace(/(\d+)(\s+deletions?\(-\))/g, (_, n, rest) => `${c.diffRemoved(n)}${c.diffContext(rest)}`);
 }
 
-function renderDiffBody(text, c, bandWidth) {
+function collectDiffBodyLines(text, c, bandWidth) {
   const lines = [];
   for (const line of String(text ?? '').split(EOL)) {
     const colored = colorizeDiffLine(line, c);
-    lines.push(...wrapIndentedCodeLine(colored, bandWidth));
+    lines.push(...wrapCodeLine(colored, bandWidth));
+  }
+  return lines;
+}
+
+// ── 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 tintCodeLines(lines, c.codeBg);
-}
-
-// ── Lightweight syntax highlighting (regex token classes, no parser) ────────
-const KEYWORDS = {
-  js: ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'new', 'class', 'extends', 'super', 'this', 'import', 'export', 'from', 'default', 'async', 'await', 'yield', 'try', 'catch', 'finally', 'throw', 'typeof', 'instanceof', 'in', 'of', 'void', 'delete', 'null', 'undefined', 'true', 'false'],
-  py: ['def', 'class', 'return', 'if', 'elif', 'else', 'for', 'while', 'import', 'from', 'as', 'with', 'try', 'except', 'finally', 'raise', 'pass', 'break', 'continue', 'lambda', 'yield', 'global', 'nonlocal', 'async', 'await', 'and', 'or', 'not', 'in', 'is', 'None', 'True', 'False', 'self'],
-  sh: ['if', 'then', 'else', 'elif', 'fi', 'for', 'while', 'do', 'done', 'case', 'esac', 'function', 'return', 'in', 'export', 'local', 'echo', 'cd', 'set', 'unset', 'read', 'source'],
-  css: [],
-  go: ['package', 'import', 'func', 'return', 'if', 'else', 'for', 'range', 'switch', 'case', 'default', 'break', 'continue', 'fallthrough', 'goto', 'defer', 'go', 'select', 'chan', 'map', 'struct', 'interface', 'type', 'var', 'const', 'nil', 'true', 'false', 'iota', 'string', 'int', 'int64', 'float64', 'bool', 'byte', 'rune', 'error'],
-  rust: ['fn', 'let', 'mut', 'const', 'static', 'return', 'if', 'else', 'match', 'for', 'while', 'loop', 'break', 'continue', 'struct', 'enum', 'trait', 'impl', 'mod', 'use', 'pub', 'crate', 'self', 'super', 'where', 'as', 'dyn', 'move', 'ref', 'unsafe', 'async', 'await', 'type', 'true', 'false', 'Some', 'None', 'Ok', 'Err', 'Box', 'Vec', 'String', 'usize', 'isize', 'i32', 'u32', 'i64', 'u64', 'f64', 'bool'],
-  java: ['public', 'private', 'protected', 'class', 'interface', 'enum', 'extends', 'implements', 'abstract', 'final', 'static', 'void', 'new', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'default', 'break', 'continue', 'try', 'catch', 'finally', 'throw', 'throws', 'import', 'package', 'this', 'super', 'instanceof', 'synchronized', 'volatile', 'transient', 'native', 'int', 'long', 'short', 'byte', 'char', 'float', 'double', 'boolean', 'true', 'false', 'null'],
-  c: ['auto', 'break', 'case', 'char', 'const', 'continue', 'default', 'do', 'double', 'else', 'enum', 'extern', 'float', 'for', 'goto', 'if', 'inline', 'int', 'long', 'register', 'return', 'short', 'signed', 'sizeof', 'static', 'struct', 'switch', 'typedef', 'union', 'unsigned', 'void', 'volatile', 'while', 'class', 'namespace', 'template', 'public', 'private', 'protected', 'virtual', 'new', 'delete', 'using', 'nullptr', 'true', 'false', 'bool'],
-  ruby: ['def', 'end', 'class', 'module', 'if', 'elsif', 'else', 'unless', 'case', 'when', 'then', 'while', 'until', 'for', 'in', 'do', 'begin', 'rescue', 'ensure', 'raise', 'return', 'yield', 'break', 'next', 'redo', 'retry', 'self', 'nil', 'true', 'false', 'and', 'or', 'not', 'require', 'require_relative', 'attr_accessor', 'attr_reader', 'attr_writer', 'puts', 'lambda', 'proc'],
-  sql: ['select', 'from', 'where', 'insert', 'into', 'values', 'update', 'set', 'delete', 'create', 'alter', 'drop', 'table', 'view', 'index', 'join', 'inner', 'left', 'right', 'outer', 'full', 'on', 'group', 'by', 'order', 'having', 'limit', 'offset', 'distinct', 'as', 'and', 'or', 'not', 'null', 'is', 'in', 'between', 'like', 'union', 'all', 'primary', 'key', 'foreign', 'references', 'default', 'constraint', 'unique', 'count', 'sum', 'avg', 'min', 'max'],
-  yaml: [],
-  toml: [],
+  return cliHighlightModule;
+}
+
+/** Internal family → highlight.js language id (when alias alone is insufficient). */
+const FAMILY_TO_HLJS = {
+  js: 'javascript',
+  ts: 'typescript',
+  tsx: 'tsx',
+  jsx: 'jsx',
+  json: 'json',
+  sh: 'bash',
+  py: 'python',
+  css: 'css',
+  html: 'xml',
+  go: 'go',
+  rust: 'rust',
+  java: 'java',
+  c: 'cpp',
+  ruby: 'ruby',
+  sql: 'sql',
+  yaml: 'yaml',
+  toml: 'ini',
+  kotlin: 'kotlin',
+  swift: 'swift',
+  php: 'php',
+  csharp: 'csharp',
+  dockerfile: 'dockerfile',
+  protobuf: 'protobuf',
+  scala: 'scala',
+  dart: 'dart',
+  lua: 'lua',
+  perl: 'perl',
+  r: 'r',
+  objc: 'objectivec',
+  powershell: 'powershell',
+  makefile: 'makefile',
+  nginx: 'nginx',
+  ini: 'ini',
+  vim: 'vim',
+  haskell: 'haskell',
+  elixir: 'elixir',
+  clojure: 'clojure',
 };
 
 export const LANG_FAMILY = {
   js: 'js', javascript: 'js', mjs: 'js', cjs: 'js',
-  ts: 'js', typescript: 'js', jsx: 'js', tsx: 'js',
+  ts: 'ts', typescript: 'ts', jsx: 'jsx', tsx: 'tsx',
   json: 'json', json5: 'json',
   bash: 'sh', sh: 'sh', shell: 'sh', zsh: 'sh',
   python: 'py', py: 'py',
@@ -308,96 +382,226 @@ export const LANG_FAMILY = {
   sql: 'sql',
   yaml: 'yaml', yml: 'yaml',
   toml: 'toml',
+  kotlin: 'kotlin', kt: 'kotlin', kts: 'kotlin',
+  swift: 'swift',
+  php: 'php',
+  csharp: 'csharp', cs: 'csharp', 'c#': 'csharp',
+  dockerfile: 'dockerfile', docker: 'dockerfile',
+  graphql: 'graphql', gql: 'graphql',
+  protobuf: 'protobuf', proto: 'protobuf',
+  scala: 'scala',
+  dart: 'dart',
+  lua: 'lua',
+  perl: 'perl', pl: 'perl',
+  r: 'r', rl: 'r',
+  objc: 'objc', 'objective-c': 'objc', 'obj-c': 'objc',
+  powershell: 'powershell', ps1: 'powershell', ps: 'powershell', pwsh: 'powershell',
+  makefile: 'makefile', make: 'makefile',
+  nginx: 'nginx',
+  ini: 'ini',
+  vim: 'vim',
+  haskell: 'haskell', hs: 'haskell',
+  elixir: 'elixir', ex: 'elixir', exs: 'elixir',
+  clojure: 'clojure', clj: 'clojure',
 };
 
-// Families whose comment lines / inline comments start with `#`.
-const HASH_COMMENT_FAMILIES = new Set(['sh', 'py', 'yaml', 'toml']);
+const HIGHLIGHT_CACHE_MAX = 300;
+const highlightCache = new Map();
 
-/** Highlight a single line for a c-like / scripting family (token scan). */
-export function highlightCodeLine(line, family, c) {
-  const kw = new Set(KEYWORDS[family === 'json' ? 'js' : family] ?? []);
-  // Comment lines (whole-line) for the common families.
-  if (family === 'js' && /^\s*\/\//.test(line)) return c.synComment(line);
-  if (HASH_COMMENT_FAMILIES.has(family) && /^\s*#/.test(line)) return c.synComment(line);
-  if (family === 'html' && /^\s*<!--/.test(line)) return c.synComment(line);
-
-  // Token regex: strings, numbers, comments, identifiers, punctuation.
-  const TOKEN_RE = /(`(?:\\.|[^`\\])*`|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|(\/\/[^\n]*|#[^\n]*)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_$][A-Za-z0-9_$]*)|([{}()[\].,;:=+\-*/%<>!&|^~?]+)/g;
-  let out = '';
-  let last = 0;
-  let m;
-  TOKEN_RE.lastIndex = 0;
-  while ((m = TOKEN_RE.exec(line)) !== null) {
-    if (m.index > last) out += c.body(line.slice(last, m.index));
-    const [, str, comment, num, ident, punct] = m;
-    if (str !== undefined) {
-      out += c.synString(str);
-    } else if (comment !== undefined) {
-      // `#` is only a comment for sh/py; for js treat as body.
-      if (comment.startsWith('//') ? family === 'js' : HASH_COMMENT_FAMILIES.has(family)) {
-        out += c.synComment(comment);
-      } else {
-        out += c.body(comment);
-      }
-    } else if (num !== undefined) {
-      out += c.synNumber(num);
-    } else if (ident !== undefined) {
-      if (kw.has(ident)) out += c.synKeyword(ident);
-      else if (line[TOKEN_RE.lastIndex] === '(') out += c.synFunction(ident);
-      else out += c.body(ident);
-    } else if (punct !== undefined) {
-      out += c.synOperator(punct);
+/** @internal Test-only introspection for highlight LRU cache. */
+export function _highlightCacheSizeForTests() {
+  return highlightCache.size;
+}
+
+let _hljsThemeVersion = -1;
+let _hljsTheme = null;
+
+/** Map highlight.js token classes to chalk truecolor fns from the active theme. */
+function buildCliHighlightTheme(c) {
+  const plain = (s) => c.body(s);
+  return {
+    default: plain,
+    keyword: c.synKeyword,
+    built_in: c.synType,
+    type: c.synType,
+    literal: c.synKeyword,
+    number: c.synNumber,
+    regexp: c.synString,
+    string: c.synString,
+    subst: plain,
+    symbol: plain,
+    class: c.synType,
+    function: c.synFunction,
+    title: c.synFunction,
+    params: c.synVariable,
+    comment: c.synComment,
+    doctag: c.synComment,
+    meta: c.synComment,
+    section: c.synType,
+    tag: c.synPunct,
+    name: c.synFunction,
+    builtin: c.synType,
+    attr: c.synType,
+    attribute: c.synType,
+    variable: c.synVariable,
+    selector: c.synKeyword,
+    template: c.synVariable,
+    bullet: plain,
+    code: plain,
+    emphasis: plain,
+    strong: plain,
+    formula: plain,
+    link: plain,
+    quote: plain,
+    addition: c.synString,
+    deletion: c.synString,
+  };
+}
+
+function getCliHighlightTheme() {
+  const version = getThemeVersion();
+  if (_hljsTheme && _hljsThemeVersion === version) return _hljsTheme;
+  _hljsThemeVersion = version;
+  _hljsTheme = buildCliHighlightTheme(extraColorizers());
+  return _hljsTheme;
+}
+
+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;
+  return null;
+}
+
+/** Resolve a fenced info-string to a highlight.js language id. */
+function resolveHljsLanguage(lang) {
+  const normalized = normalizeLang(lang);
+  if (!normalized) return null;
+  const viaFamily = hljsLanguageFromFamily(LANG_FAMILY[normalized]);
+  if (viaFamily) return viaFamily;
+  const { supportsLanguage } = getCliHighlight();
+  return supportsLanguage(normalized) ? normalized : null;
+}
+
+/**
+ * Highlight source with cli-highlight; returns null when language is unsupported
+ * or highlighting fails (caller falls back to flat body color).
+ */
+function highlightCodeText(text, hljsLang) {
+  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;
+  const cacheKey = `${hljsLang}|${getThemeVersion()}|${src}`;
+  const cached = highlightCache.get(cacheKey);
+  if (cached !== undefined) {
+    highlightCache.delete(cacheKey);
+    highlightCache.set(cacheKey, cached);
+    return cached;
+  }
+  try {
+    const out = highlight(src, {
+      language: hljsLang,
+      theme: getCliHighlightTheme(),
+      ignoreIllegals: true,
+    });
+    if (highlightCache.size >= HIGHLIGHT_CACHE_MAX) {
+      const first = highlightCache.keys().next().value;
+      if (first !== undefined) highlightCache.delete(first);
     }
-    last = TOKEN_RE.lastIndex;
+    highlightCache.set(cacheKey, out);
+    return out;
+  } catch {
+    return null;
   }
-  if (last < line.length) out += c.body(line.slice(last));
-  return out;
 }
 
-function renderHighlightedBody(text, family, c, bandWidth) {
+/** Highlight a single line (tool expanded output); uses the same theme map. */
+export function highlightCodeLine(line, family, c) {
+  const hljsLang = hljsLanguageFromFamily(family);
+  const highlighted = highlightCodeText(line, hljsLang);
+  if (highlighted != null) return highlighted;
+  return line ? c.body(line) : '';
+}
+
+/**
+ * Highlight a multi-line block in one cli-highlight call; returns one ANSI string per line.
+ * On miss, each line is flat-colored with `c.body`.
+ */
+export function highlightCodeBlockToLines(text, family, c) {
+  const hljsLang = hljsLanguageFromFamily(family);
+  const raw = String(text ?? '');
+  const highlighted = hljsLang ? highlightCodeText(raw, hljsLang) : null;
+  if (highlighted != null) {
+    return highlighted.split(EOL);
+  }
+  return raw.split(EOL).map((line) => (line ? c.body(line) : ''));
+}
+
+function collectFlatBodyLines(text, codeBlock, bandWidth) {
   const lines = [];
   for (const line of String(text ?? '').split(EOL)) {
-    const colored = line ? highlightCodeLine(line, family, c) : '';
-    lines.push(...wrapIndentedCodeLine(colored, bandWidth));
+    const colored = codeBlock(line);
+    lines.push(...wrapCodeLine(colored, bandWidth));
   }
-  return tintCodeLines(lines, c.codeBg);
+  return lines;
 }
 
+function collectHighlightedBodyLines(text, hljsLang, bandWidth) {
+  const highlighted = highlightCodeText(text, hljsLang);
+  const { codeBlock } = colorizers();
+  const source = highlighted != null
+    ? highlighted
+    : String(text ?? '').split(EOL).map(codeBlock).join(EOL);
+  const lines = [];
+  for (const line of source.split(EOL)) {
+    lines.push(...wrapCodeLine(line, bandWidth));
+  }
+  return lines;
+}
+
+/** Left gutter that keeps code visually distinct from prose (no bg band). */
+const CODE_GUTTER = '  ';
+
 /**
- * Render a fenced `code` token: compact language label, wrapped indented body,
- * and language-aware coloring (no visible ``` fence lines).
+ * Render a fenced `code` token (codex/claude-code convention): 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 body;
+  let bodyLines;
   if (DIFF_LANGS.has(lang) || (!lang && looksLikeUnifiedDiff(text))) {
-    body = renderDiffBody(text, c, bandWidth);
+    bodyLines = collectDiffBodyLines(text, c, contentWidth);
   } else {
+    const hljsLang = resolveHljsLanguage(lang);
     const family = LANG_FAMILY[lang];
-    // Any known family except markdown-in-markdown routes through the regex
-    // highlighter (html/json/yaml/toml included). 'md' stays flat (no nested
-    // markdown highlighter); unknown langs fall back to the flat body color.
-    if (family && family !== 'md') {
-      body = renderHighlightedBody(text, family, c, bandWidth);
+    if (hljsLang && family !== 'md') {
+      bodyLines = collectHighlightedBodyLines(text, hljsLang, contentWidth);
     } else {
-      // Unknown/plain language: flat code-block body color, still indented.
-      const lines = [];
-      for (const line of text.split(EOL)) {
-        const colored = codeBlock(line);
-        lines.push(...wrapIndentedCodeLine(colored, bandWidth));
-      }
-      body = tintCodeLines(lines, c.codeBg);
+      bodyLines = collectFlatBodyLines(text, codeBlock, contentWidth);
     }
   }
-  const langLine = lang
-    ? `${c.codeBg(c.fenceBorder(lang))}${EOL}`
-    : '';
-  return `${langLine}${body}${body ? 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) {
@@ -445,41 +649,48 @@ 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 (claude-code policy): 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('');
       return inner
         .split(EOL)
-        .map((line) =>
-          stripAnsi(line).trim()
-            ? `${bar} ${quoteText(chalk.italic(line))}`
-            : line,
-        )
+        .map((line) => {
+          // Padded fenced-code blank rows are space-only; trim() would drop the quote bar.
+          if (displayWidth(stripAnsi(line)) === 0) return line;
+          return `${bar} ${chalk.italic(line)}`;
+        })
         .join(EOL);
     }
     case 'code':
-      // Fenced block: compact lang label + wrapped indented, colored body.
+      // Fenced block: flush-left wrapped body with syntax highlighting.
       return renderCodeBlock(token, width);
     case 'codespan':
-      // inline code
+      // inline code — accent color only (no background tint; a bg box behind
+      // inline spans reads as awkward against body text, matches claude-code's
+      // codespan = color-only treatment).
       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 (matches codex/claude-code; 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
@@ -504,12 +715,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
@@ -598,7 +809,8 @@ function formatListItem(token, listBaseIndent, orderedListNumber, parent, depth
         out += `${markerPrefix.trimEnd()}${EOL}`;
         firstBlock = false;
       }
-      out += formatToken(child, nestedListIndent, null, token, childWidth, depth + 1);
+      // Pass outer `width` so the nested list subtracts only its own marker prefix once.
+      out += formatToken(child, nestedListIndent, null, token, width, depth + 1);
       continue;
     }