@pellux/goodvibes-tui 2.0.20 → 2.1.0

package/src/renderer/code-block.ts

@@ -1,34 +1,34 @@
 import { type Line, type Cell, createStyledCell, createEmptyLine } from '@pellux/goodvibes-sdk/platform/types';
 import { UIFactory } from './ui-factory.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { getDisplayWidth, wrapPreservingIndent } from '../utils/terminal-width.ts';
 import { LAYOUT } from './layout.ts';
 import { SyntaxHighlighter, type SyntaxToken as HLToken } from './syntax-highlighter.ts';
-import { UI_TONES } from './ui-primitives.ts';
+import { activeTokens } from './theme.ts';
+import { syntaxStyles } from './syntax-theme.ts';
 
 /**
- * Regex-fallback tokenizer theme. VS Code Dark+ inspired, but the
- * semantic-token hues (string/number/keyword/type/function/operator/
- * property/comment) are pinned to the same values as the tree-sitter
- * Vaporwave palette in syntax-highlighter.ts's TOKEN_STYLES map, so a code
- * block that starts on the regex fallback and gets replaced by the async
- * tree-sitter parse doesn't visibly shift color mid-stream.
- * `accent` and `bg` are chrome (the language-label header bar and the body
- * background), not syntax tokens, and keep their original VS Code Dark+
- * values, folded here from two separate literals (one in the header, one
- * duplicated on the footer line) into a single named source.
+ * Regex-fallback tokenizer colours. The syntax hues come from the same role
+ * map as the tree-sitter path (syntax-theme.ts), so a code block that starts
+ * on the regex fallback and is replaced by the async tree-sitter parse does
+ * not shift colour mid-stream. Text with no role uses the theme's text colour
+ * (never the terminal default, which can vanish on the themed body fill).
  */
-const FALLBACK_THEME = {
-  string: '#00ff88',
-  number: '#ffcc00',
-  keyword: '#d000ff',
-  type: '#ff6b9d',
-  function: UI_TONES.accent.brand,
-  operator: '#ffffff',
-  property: '#87ceeb',
-  comment: '#666666',
-  bg: '#0d0d0d',
-  accent: '#4ec9b0',
-} as const;
+function fallbackTheme() {
+  const styles = syntaxStyles();
+  const tokens = activeTokens();
+  return {
+    string: styles.string.fg,
+    number: styles.number.fg,
+    keyword: styles.keyword.fg,
+    type: styles.type.fg,
+    function: styles.function.fg,
+    operator: styles.operator.fg,
+    property: styles.property.fg,
+    comment: styles.comment.fg,
+    plain: styles.plain.fg,
+    punctuation: tokens.textMuted,
+  };
+}
 
 // ─── Language Keyword Maps ───────────────────────────────────────────────────
 
@@ -81,13 +81,14 @@ type SyntaxToken = { text: string; fg: string; bold?: boolean; italic?: boolean
 // ─── Tokenizers ──────────────────────────────────────────────────────────────
 
 function tokenizeTsJs(line: string): SyntaxToken[] {
+  const th = fallbackTheme();
   const tokens: SyntaxToken[] = [];
   let i = 0;
 
   while (i < line.length) {
     // Line comment
     if (line.slice(i, i + 2) === '//') {
-      tokens.push({ text: line.slice(i), fg: FALLBACK_THEME.comment, italic: true });
+      tokens.push({ text: line.slice(i), fg: th.comment, italic: true });
       break;
     }
     // String (single, double, template)
@@ -98,7 +99,7 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
         if (line[j] === '\\') j++;
         j++;
       }
-      tokens.push({ text: line.slice(i, j + 1), fg: FALLBACK_THEME.string });
+      tokens.push({ text: line.slice(i, j + 1), fg: th.string });
       i = j + 1;
       continue;
     }
@@ -106,7 +107,7 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
     if (/[0-9]/.test(line[i])) {
       let j = i;
       while (j < line.length && /[0-9._xXbBoO]/.test(line[j])) j++;
-      tokens.push({ text: line.slice(i, j), fg: FALLBACK_THEME.number });
+      tokens.push({ text: line.slice(i, j), fg: th.number });
       i = j;
       continue;
     }
@@ -116,13 +117,13 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
       while (j < line.length && /[\w$]/.test(line[j])) j++;
       const word = line.slice(i, j);
       if (TS_JS_KEYWORDS.has(word)) {
-        tokens.push({ text: word, fg: FALLBACK_THEME.keyword, bold: true });
+        tokens.push({ text: word, fg: th.keyword });
       } else if (TS_TYPES.has(word)) {
-        tokens.push({ text: word, fg: FALLBACK_THEME.type });
+        tokens.push({ text: word, fg: th.type });
       } else if (line[j] === '(') {
-        tokens.push({ text: word, fg: FALLBACK_THEME.function });
+        tokens.push({ text: word, fg: th.function });
       } else {
-        tokens.push({ text: word, fg: '' });
+        tokens.push({ text: word, fg: th.plain });
       }
       i = j;
       continue;
@@ -130,7 +131,7 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
     // Operators and punctuation
     const ch = line[i];
     const isOp = '=<>!&|+-*/%^~?:'.includes(ch);
-    tokens.push({ text: ch, fg: isOp ? FALLBACK_THEME.operator : '' });
+    tokens.push({ text: ch, fg: isOp ? th.operator : '' });
     i++;
   }
 
@@ -138,26 +139,27 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
 }
 
 function tokenizePython(line: string): SyntaxToken[] {
+  const th = fallbackTheme();
   const tokens: SyntaxToken[] = [];
   let i = 0;
 
   while (i < line.length) {
     if (line[i] === '#') {
-      tokens.push({ text: line.slice(i), fg: FALLBACK_THEME.comment, italic: true });
+      tokens.push({ text: line.slice(i), fg: th.comment, italic: true });
       break;
     }
     if (line[i] === '"' || line[i] === "'") {
       const q = line[i];
       let j = i + 1;
       while (j < line.length && line[j] !== q) { if (line[j] === '\\') j++; j++; }
-      tokens.push({ text: line.slice(i, j + 1), fg: FALLBACK_THEME.string });
+      tokens.push({ text: line.slice(i, j + 1), fg: th.string });
       i = j + 1;
       continue;
     }
     if (/[0-9]/.test(line[i])) {
       let j = i;
       while (j < line.length && /[0-9._]/.test(line[j])) j++;
-      tokens.push({ text: line.slice(i, j), fg: FALLBACK_THEME.number });
+      tokens.push({ text: line.slice(i, j), fg: th.number });
       i = j;
       continue;
     }
@@ -166,44 +168,45 @@ function tokenizePython(line: string): SyntaxToken[] {
       while (j < line.length && /[\w]/.test(line[j])) j++;
       const word = line.slice(i, j);
       if (PYTHON_KEYWORDS.has(word)) {
-        tokens.push({ text: word, fg: FALLBACK_THEME.keyword, bold: true });
+        tokens.push({ text: word, fg: th.keyword });
       } else if (/^[A-Z]/.test(word)) {
-        tokens.push({ text: word, fg: FALLBACK_THEME.type });
+        tokens.push({ text: word, fg: th.type });
       } else if (line[j] === '(') {
-        tokens.push({ text: word, fg: FALLBACK_THEME.function });
+        tokens.push({ text: word, fg: th.function });
       } else {
-        tokens.push({ text: word, fg: '' });
+        tokens.push({ text: word, fg: th.plain });
       }
       i = j;
       continue;
     }
-    tokens.push({ text: line[i], fg: '' });
+    tokens.push({ text: line[i], fg: th.plain });
     i++;
   }
   return tokens;
 }
 
 function tokenizeBash(line: string): SyntaxToken[] {
+  const th = fallbackTheme();
   const tokens: SyntaxToken[] = [];
   let i = 0;
 
   while (i < line.length) {
     if (line[i] === '#') {
-      tokens.push({ text: line.slice(i), fg: FALLBACK_THEME.comment, italic: true });
+      tokens.push({ text: line.slice(i), fg: th.comment, italic: true });
       break;
     }
     if (line[i] === '"' || line[i] === "'") {
       const q = line[i];
       let j = i + 1;
       while (j < line.length && line[j] !== q) { if (line[j] === '\\') j++; j++; }
-      tokens.push({ text: line.slice(i, j + 1), fg: FALLBACK_THEME.string });
+      tokens.push({ text: line.slice(i, j + 1), fg: th.string });
       i = j + 1;
       continue;
     }
     if (line[i] === '$') {
       let j = i + 1;
       while (j < line.length && /[\w{}_]/.test(line[j])) j++;
-      tokens.push({ text: line.slice(i, j), fg: FALLBACK_THEME.property });
+      tokens.push({ text: line.slice(i, j), fg: th.property });
       i = j;
       continue;
     }
@@ -212,20 +215,21 @@ function tokenizeBash(line: string): SyntaxToken[] {
       while (j < line.length && /[\w-]/.test(line[j])) j++;
       const word = line.slice(i, j);
       if (BASH_KEYWORDS.has(word)) {
-        tokens.push({ text: word, fg: FALLBACK_THEME.keyword, bold: true });
+        tokens.push({ text: word, fg: th.keyword });
       } else {
-        tokens.push({ text: word, fg: '' });
+        tokens.push({ text: word, fg: th.plain });
       }
       i = j;
       continue;
     }
-    tokens.push({ text: line[i], fg: '' });
+    tokens.push({ text: line[i], fg: th.plain });
     i++;
   }
   return tokens;
 }
 
 function tokenizeJson(line: string): SyntaxToken[] {
+  const th = fallbackTheme();
   const tokens: SyntaxToken[] = [];
   let i = 0;
 
@@ -237,9 +241,9 @@ function tokenizeJson(line: string): SyntaxToken[] {
       // JSON key: followed by :
       const rest = line.slice(j + 1).trimStart();
       if (rest.startsWith(':')) {
-        tokens.push({ text: str, fg: FALLBACK_THEME.property });
+        tokens.push({ text: str, fg: th.property });
       } else {
-        tokens.push({ text: str, fg: FALLBACK_THEME.string });
+        tokens.push({ text: str, fg: th.string });
       }
       i = j + 1;
       continue;
@@ -247,32 +251,33 @@ function tokenizeJson(line: string): SyntaxToken[] {
     if (/[0-9-]/.test(line[i])) {
       let j = i;
       while (j < line.length && /[0-9.eE+-]/.test(line[j])) j++;
-      tokens.push({ text: line.slice(i, j), fg: FALLBACK_THEME.number });
+      tokens.push({ text: line.slice(i, j), fg: th.number });
       i = j;
       continue;
     }
     const boolNull = ['true', 'false', 'null'].find(k => line.startsWith(k, i));
     if (boolNull) {
-      tokens.push({ text: boolNull, fg: FALLBACK_THEME.keyword, bold: true });
+      tokens.push({ text: boolNull, fg: th.keyword });
       i += boolNull.length;
       continue;
     }
-    tokens.push({ text: line[i], fg: '244' });
+    tokens.push({ text: line[i], fg: th.punctuation });
     i++;
   }
   return tokens;
 }
 
 function tokenizeYaml(line: string): SyntaxToken[] {
+  const th = fallbackTheme();
   const tokens: SyntaxToken[] = [];
   if (line.trimStart().startsWith('#')) {
-    return [{ text: line, fg: FALLBACK_THEME.comment, italic: true }];
+    return [{ text: line, fg: th.comment, italic: true }];
   }
   const keyMatch = line.match(/^(\s*)([^:]+)(:)(\s*.*)/);
   if (keyMatch) {
-    if (keyMatch[1]) tokens.push({ text: keyMatch[1], fg: '' });
-    tokens.push({ text: keyMatch[2], fg: FALLBACK_THEME.property });
-    tokens.push({ text: keyMatch[3], fg: '244' });
+    if (keyMatch[1]) tokens.push({ text: keyMatch[1], fg: th.plain });
+    tokens.push({ text: keyMatch[2], fg: th.property });
+    tokens.push({ text: keyMatch[3], fg: th.punctuation });
     if (keyMatch[4]) {
       const val = keyMatch[4];
       const trimVal = val.trimStart();
@@ -280,16 +285,41 @@ function tokenizeYaml(line: string): SyntaxToken[] {
       const isStr = /^['"]/.test(trimVal);
       const isBool = trimVal === 'true' || trimVal === 'false' || trimVal === 'null' || trimVal === 'yes' || trimVal === 'no';
       const isNum = /^-?[0-9]/.test(trimVal);
-      const valFg = isStr ? FALLBACK_THEME.string : isBool ? FALLBACK_THEME.keyword : isNum ? FALLBACK_THEME.number : '';
+      const valFg = isStr ? th.string : isBool ? th.keyword : isNum ? th.number : th.plain;
       tokens.push({ text: val, fg: valFg });
     }
     return tokens;
   }
-  return [{ text: line, fg: '' }];
+  return [{ text: line, fg: th.plain }];
 }
 
 function tokenizePlain(line: string): SyntaxToken[] {
-  return [{ text: line, fg: '' }];
+  const th = fallbackTheme();
+  return [{ text: line, fg: th.plain }];
+}
+
+// ─── Line highlighting outside a code block ─────────────────────────────────
+
+/**
+ * Syntax colors for lines of code in `lang` (a fence tag or a file extension),
+ * one token list per line: the tree-sitter result once it is cached, the regex
+ * tokenizer until then. The Changes modal colors diff lines with this.
+ */
+export function highlightCodeLines(codeLines: readonly string[], lang: string): SyntaxToken[][] {
+  const hl = lang ? _sharedHighlighter.highlight(codeLines.join('\n'), lang) : null;
+  const language = detectLanguage(lang);
+  return codeLines.map((line, i) => {
+    const fromTree = hl?.[i];
+    if (fromTree && fromTree.length > 0) return fromTree as HLToken[];
+    switch (language) {
+      case 'ts': return tokenizeTsJs(line);
+      case 'python': return tokenizePython(line);
+      case 'bash': return tokenizeBash(line);
+      case 'json': return tokenizeJson(line);
+      case 'yaml': return tokenizeYaml(line);
+      default: return tokenizePlain(line);
+    }
+  });
 }
 
 // ─── Main Renderer ───────────────────────────────────────────────────────────
@@ -302,6 +332,17 @@ function tokenizePlain(line: string): SyntaxToken[] {
  */
 const _sharedHighlighter = new SyntaxHighlighter();
 
+/**
+ * The shared highlighter's state, for anything that caches drawn code: a line
+ * drawn with the regex placeholder (a miss) is stale once the generation moves
+ * on, and onSyntaxHighlightReady says when to repaint.
+ */
+export function syntaxHighlightGeneration(): number { return _sharedHighlighter.generation; }
+export function syntaxHighlightMisses(): number { return _sharedHighlighter.missCount; }
+export function onSyntaxHighlightReady(listener: () => void): () => void { return _sharedHighlighter.onReady(listener); }
+/** Resolves once no parse is in flight: a frame drawn after it no longer depends on timing or on what drew before. */
+export function settleSyntaxHighlighting(): Promise<void> { return _sharedHighlighter.settle(); }
+
 /**
  * renderCodeBlock - Render lines of code with syntax highlighting and line numbers.
  * Returns Line[] for the cell-based pipeline.
@@ -314,12 +355,18 @@ export function renderCodeBlock(
 ): Line[] {
   const lines: Line[] = [];
   const language = detectLanguage(lang);
-  const leftMargin = LAYOUT.LEFT_MARGIN;
+  // The fill starts at column 3 like every other fill (user messages, the
+  // composer), so code text lands on column 5 after the 2-column padding.
+  const leftMargin = LAYOUT.LEFT_MARGIN - 1;
   const showLineNumbers = opts.showLineNumbers ?? true;
   const lineNumW = showLineNumbers ? String(codeLines.length).length + 1 : 0; // e.g. "10 "
-  const contentStartX = showLineNumbers ? leftMargin + lineNumW + 1 : leftMargin;
-  const BG = FALLBACK_THEME.bg;
-  const LINE_NUM_FG = '238';
+  // Text keeps 2 columns from both edges of the code fill (the Measurements
+  // table's padding rule), and the fill has a blank row above and below it.
+  const PAD = 2;
+  const contentStartX = showLineNumbers ? leftMargin + PAD + lineNumW + 1 : leftMargin + PAD;
+  const palette = activeTokens();
+  const BG = palette.backgroundCode;
+  const LINE_NUM_FG = palette.textFaint;
   const effectiveWidth = width - LAYOUT.RIGHT_MARGIN;
 
   // Try tree-sitter highlight cache first (populated asynchronously).
@@ -340,20 +387,32 @@ export function renderCodeBlock(
   };
 
   // Header bar: language label
-  const langLabel = lang ? ` ${lang} ` : ' code ';
-  const headerLine = createEmptyLine(width);
-  const headerStr = langLabel.padEnd(effectiveWidth - leftMargin);
-  let hx = leftMargin;
-  for (const ch of headerStr) {
-    if (hx >= effectiveWidth) break;
-    headerLine[hx] = createStyledCell(ch, { fg: '#1a1a1a', bg: FALLBACK_THEME.accent, bold: true });
-    hx++;
-  }
-  lines.push(headerLine);
-
-  // Code lines
+  // No header bar: the language (when the fence names one) sits muted on the
+  // right of the first code row, and only when the code leaves room for it.
+  const langLabel = lang;
+  const padLine = createEmptyLine(width);
+  for (let px = leftMargin; px < effectiveWidth; px++) padLine[px] = createStyledCell(' ', { bg: BG });
+  lines.push(padLine);
+
+  // Code lines. A line wider than the text column wraps the way an opened
+  // read or command output does (wrapPreservingIndent: indentation kept,
+  // continuation rows indented like the first): text is never cut at the
+  // fill's edge. Each character keeps its token's style across the wrap, and
+  // a continuation row leaves the line-number column blank.
+  const textEnd = effectiveWidth - PAD;
+  const textWidth = Math.max(8, textEnd - contentStartX);
+  const bodyRow = (): Cell[] => {
+    const line: Cell[] = createEmptyLine(width);
+    // Paint only the code-block body band so body rows match the header/footer width.
+    for (let x = leftMargin; x < effectiveWidth; x++) line[x] = createStyledCell(' ', { bg: BG });
+    return line;
+  };
   for (let i = 0; i < codeLines.length; i++) {
-    const rawLine = codeLines[i];
+    // Control characters (a tab included) take one blank column, as they always have.
+    const rawLine = Array.from(codeLines[i] ?? '').map((ch) => {
+      const code = ch.charCodeAt(0);
+      return code < 32 || code === 127 ? ' ' : ch;
+    }).join('');
     const lineNum = String(i + 1).padStart(lineNumW);
 
     // Select token source: tree-sitter (accurate) or regex (fallback)
@@ -361,43 +420,62 @@ export function renderCodeBlock(
       hlLines && i < hlLines.length && hlLines[i].length > 0
         ? (hlLines[i] as HLToken[])
         : regexTokenize(rawLine);
-
-    const line: Cell[] = createEmptyLine(width);
-    // Paint only the code-block body band so body rows match the header/footer width.
-    for (let x = leftMargin; x < effectiveWidth; x++) {
-      line[x] = createStyledCell(' ', { bg: BG });
+    // Each character's style, when the tokens spell the line (plain otherwise).
+    const chars = Array.from(rawLine);
+    const styles: Array<Pick<SyntaxToken, 'fg' | 'bold' | 'italic'>> = [];
+    const spelled = tokens.map((tk) => tk.text).join('').replace(/[\x00-\x1f\x7f]/g, ' ');
+    if (spelled === rawLine) {
+      for (const token of tokens) for (const _ of Array.from(token.text)) styles.push({ fg: token.fg, bold: token.bold, italic: token.italic });
+    } else {
+      for (let k = 0; k < chars.length; k++) styles.push({ fg: palette.text });
     }
 
-    let cx = leftMargin;
-    if (showLineNumbers) {
-      for (const ch of lineNum) {
-        if (cx >= contentStartX) break;
-        line[cx++] = createStyledCell(ch, { fg: LINE_NUM_FG, bg: BG, dim: true });
+    const parts = getDisplayWidth(rawLine.replace(/\s+$/, '')) <= textWidth ? [rawLine] : wrapPreservingIndent(rawLine, textWidth);
+    let cursor = 0;
+    parts.forEach((part, partIndex) => {
+      const line = bodyRow();
+      let cx = leftMargin + PAD;
+      if (showLineNumbers) {
+        const label = partIndex === 0 ? lineNum : ' '.repeat(lineNumW);
+        for (const ch of label) {
+          if (cx >= contentStartX) break;
+          line[cx++] = createStyledCell(ch, { fg: LINE_NUM_FG, bg: BG });
+        }
+        line[cx++] = createStyledCell(' ', { bg: BG });
       }
-      line[cx++] = createStyledCell(' ', { bg: BG });
-    }
-
-    // Syntax tokens
-    for (const token of tokens) {
-      for (const ch of token.text) {
-        if (cx >= effectiveWidth) break;
+      // A continuation row: the wrap dropped the spaces it broke at and
+      // re-added the indent, so the next source character is the first
+      // non-space after the cursor.
+      const pc = Array.from(part);
+      let lead = 0;
+      if (partIndex > 0) {
+        while (pc[lead] === ' ') lead++;
+        while (chars[cursor] === ' ') cursor++;
+      }
+      cx += lead;
+      for (let k = lead; k < pc.length; k++) {
+        const ch = pc[k]!;
+        const style = styles[cursor] ?? { fg: palette.text };
+        cursor++;
         const cw = getDisplayWidth(ch);
-        const code = ch.charCodeAt(0);
-        if (code < 32 || code === 127) {
-          cx++;
-          continue;
-        }
-        line[cx] = createStyledCell(ch, { fg: token.fg, bg: BG, bold: token.bold, italic: token.italic });
-        // Bound the wide-glyph placeholder against the body's own right edge
-        // (effectiveWidth), not the full line width, otherwise a 2-column
-        // glyph landing on the last body column spills its placeholder cell
-        // into the reserved right-margin band the header/footer stop at.
-        if (cw === 2 && cx + 1 < effectiveWidth) line[cx + 1] = { ...line[cx], char: '' };
+        // A wide glyph that does not fit before the text edge ends the row
+        // rather than drawing half of itself into the padding.
+        if (cx + cw > textEnd) break;
+        line[cx] = createStyledCell(ch, { fg: style.fg, bg: BG, bold: style.bold, italic: style.italic });
+        // Bound the wide-glyph placeholder against the text edge so it never
+        // spills into the padding or the reserved right-margin band.
+        if (cw === 2 && cx + 1 < textEnd) line[cx + 1] = { ...line[cx], char: '' };
         cx += cw;
       }
-    }
-
-    lines.push(line);
+      if (i === 0 && partIndex === 0 && langLabel) {
+        const labelX = textEnd - getDisplayWidth(langLabel);
+        if (labelX > cx + 1) {
+          let lx = labelX;
+          for (const ch of langLabel) line[lx++] = createStyledCell(ch, { fg: palette.textMuted, bg: BG });
+        }
+      }
+      lines.push(line);
+    });
   }
 
   // Footer line

package/src/renderer/command-palette.ts

@@ -0,0 +1,93 @@
+/**
+ * renderCommandPalette, the command palette drawn with the surface kit.
+ *
+ *   ✦ Commands                                                     esc
+ *
+ *   ▏Type a command, setting, model or session          156 commands
+ *
+ *   ✦ suggested                                ┌ preview ────────────┐
+ *     Changes                        /diff      Changes
+ *     Switch model  opus 5.5        /model      /diff [path]
+ *   ✦ session                                   Show the working-tree
+ *     Resume a session             /resume      diff. …
+ *
+ *   ↑↓ move   ⏎ run   tab fill composer                   120 more ↓
+ *
+ * The preview shows what the selected command will do before it runs:
+ * its full description, usage, aliases, category and what Enter will do.
+ */
+
+import type { PaletteEntry, PaletteView } from '../input/command-palette-types.ts';
+import { activeTokens } from './theme.ts';
+import { beginModal, finishModal, scrollCountText, searchRow, type SurfaceLayer } from './surface-kit.ts';
+import { drawList, type KitRow } from './surface-kit-list.ts';
+import { inset, insetLines, type KitInset } from './surface-kit-parts.ts';
+
+function rowsFor(palette: PaletteView): KitRow[] {
+  const selected = palette.getSelected();
+  const rows: KitRow[] = [];
+  const searching = palette.query.trim().length > 0;
+  for (const section of palette.sections()) {
+    if (!searching) rows.push({ header: section.group });
+    for (const entry of section.entries) {
+      rows.push({
+        label: entry.title,
+        desc: palette.describe(entry.id),
+        right: entry.right ?? `/${entry.id}`,
+        selected: entry === selected,
+      });
+    }
+  }
+  if (rows.length === 0) rows.push({ label: `Nothing matches "${palette.query}".`, muted: true });
+  return rows;
+}
+
+function drawPreview(palette: PaletteView, entry: PaletteEntry | null, canvas: Parameters<typeof insetLines>[0], p: KitInset): void {
+  const t = activeTokens();
+  if (!entry) {
+    insetLines(canvas, p, p.l, p.top, [{ text: 'Type to search every command; old view names such as fleet or git find their new homes.', style: { fg: t.textMuted } }]);
+    return;
+  }
+  const blank = { text: '', style: {} };
+  const live = palette.describe(entry.id);
+  insetLines(canvas, p, p.l, p.top, [
+    { text: entry.title, style: { fg: t.text, bold: true } },
+    { text: `/${entry.id}${entry.argsHint ? ` ${entry.argsHint}` : ''}`, style: { fg: t.brand } },
+    ...(live ? [{ text: live, style: { fg: t.textMuted } }] : []),
+    blank,
+    ...(entry.description ? [{ text: entry.description, style: { fg: t.textMuted } }, blank] : []),
+    {
+      text: entry.needsArgs
+        ? `Enter fills the composer: it needs ${entry.argsHint ?? 'arguments'}.`
+        : 'Enter runs it now; tab fills the composer to add arguments.',
+      style: { fg: t.textFaint },
+    },
+    blank,
+    ...(entry.aliases.length > 0 ? [{ text: `Also: ${entry.aliases.map((a) => `/${a}`).join('  ')}`, style: { fg: t.textFaint } }] : []),
+    ...(entry.keywords.length > 0 ? [{ text: `Finds: ${entry.keywords.join(', ')}`, style: { fg: t.textFaint } }] : []),
+    { text: entry.category, style: { fg: t.textFaint } },
+  ]);
+}
+
+export function renderCommandPalette(palette: PaletteView, screenWidth: number, screenHeight: number): SurfaceLayer {
+  const f = beginModal(screenWidth, screenHeight, {
+    title: 'Commands',
+    hints: [['↑↓', 'move'], ['⏎', 'run'], ['tab', 'fill composer']],
+  });
+  const total = palette.entries.length;
+  const shown = palette.flat().length;
+  searchRow(f, f.top, palette.query, 'Type a command, setting, model or session', palette.query ? `${shown} of ${total}` : `${total} commands`);
+
+  const body = f.top + 2;
+  const inner = f.r - f.l + 1;
+  // A preview when there is room for it; below that the list takes the width.
+  const sideBySide = inner >= 70;
+  const x1 = sideBySide ? f.l + Math.floor(inner * 0.55) - 1 : f.r;
+  const result = drawList(f.canvas, { rows: rowsFor(palette), top: body, bottom: f.bottom, x0: f.l, x1, scrollKey: { owner: palette, name: 'list' } });
+  if (sideBySide) {
+    const p = inset(f.canvas, x1 + 3, body, f.r + 2 - (x1 + 3) + 1, f.bottom - body + 1);
+    drawPreview(palette, palette.getSelected(), f.canvas, p);
+  }
+  f.hintRight = scrollCountText(result.above, result.below);
+  return finishModal(f);
+}

package/src/renderer/composer-fragments.ts

@@ -23,9 +23,9 @@ export function renderQueuedMessageList(width: number, items: readonly { readonl
   const bodyBg = activeTheme().collapsedBodyBg;
   const lines: Line[] = [];
   const header = `${items.length} queued: /queue edit·delete until delivered`;
-  lines.push(...renderConversationFragment(header, width, { prefix: ' ⧗ ', prefixFg: t.state.reasoning, text: t.fg.dim, bodyBg, dim: true }));
+  lines.push(...renderConversationFragment(header, width, { prefix: ' ⧗ ', prefixFg: t.state.reasoning, text: t.fg.dim, bodyBg }));
   items.forEach((item, index) => {
-    lines.push(...renderConversationFragment(item.text, width, { prefix: `   ${index + 1}. `, prefixFg: t.state.reasoning, text: t.fg.dim, bodyBg, dim: true }));
+    lines.push(...renderConversationFragment(item.text, width, { prefix: `   ${index + 1}. `, prefixFg: t.state.reasoning, text: t.fg.dim, bodyBg }));
   });
   return lines;
 }
@@ -54,7 +54,7 @@ export function renderMemoryProvenanceChip(width: number, count: number, entries
   const bodyBg = activeTheme().collapsedBodyBg;
   const noun = count === 1 ? 'memory' : 'memories';
   const header = expanded ? `used ${count} ${noun}: Alt+M to hide` : `used ${count} ${noun}: Alt+M to list`;
-  const lines: Line[] = renderConversationFragment(header, width, { prefix: ' ◆ ', prefixFg: t.state.info, text: t.fg.dim, bodyBg, dim: true });
+  const lines: Line[] = renderConversationFragment(header, width, { prefix: ' ◆ ', prefixFg: t.state.info, text: t.fg.dim, bodyBg });
   if (expanded) {
     entries.forEach((entry, index) => {
       const body = entry.record === undefined
@@ -62,7 +62,7 @@ export function renderMemoryProvenanceChip(width: number, count: number, entries
         : entry.record === null
           ? 'no longer available'
           : `${entry.record.summary}  ·  ${entry.record.cls}`;
-      lines.push(...renderConversationFragment(body, width, { prefix: `   ${index + 1}. `, prefixFg: t.state.info, text: t.fg.dim, bodyBg, dim: true }));
+      lines.push(...renderConversationFragment(body, width, { prefix: `   ${index + 1}. `, prefixFg: t.state.info, text: t.fg.dim, bodyBg }));
     });
   }
   return lines;