jaitus 0.3.0

package/src/tui/entries.js

@@ -0,0 +1,366 @@
+// ─── Transcript entries ─────────────────────────────────────────────────────────
+//
+// An entry keeps its SOURCE, not its pixels. Rows are built on demand for the current
+// width and cached against that width, so resizing the terminal re-lays every message
+// correctly instead of showing yesterday's line breaks — and scrolling costs nothing,
+// because the row count is already known.
+//
+// This is also where every visual decision about "what a message looks like" lives.
+// The app below just stacks whatever comes out.
+
+import { palette, mix, ramp } from './theme.js';
+import { renderMarkdown, inlineSpans } from './markdown.js';
+import { ansiToRows, wrapRows, wrapRow, truncateRow, stringWidth, plain } from './ansi.js';
+import { highlightLine, languageForPath } from './highlight.js';
+import { wordRows, wordSize } from './wordmark.js';
+import { MASCOT_ROWS } from '../brand.js';
+
+let nextId = 1;
+
+/** Icons per tool, with ASCII twins for consoles that cannot draw them. */
+const TOOL_ICON = {
+  run_command: ['❯', '$'],
+  read_file: ['◇', '-'],
+  read_image: ['▧', '-'],
+  list_files: ['▤', '-'],
+  write_file: ['◆', '+'],
+  edit_file: ['◈', '~'],
+  search: ['✦', '*'],
+  web_fetch: ['⬡', '%'],
+  web_search: ['⬢', '?'],
+  task: ['⬗', '@'],
+  background_run: ['◉', 'o'],
+  background_read: ['◎', 'o'],
+  todo_write: ['☰', '='],
+};
+
+const STATUS_STYLE = (p) => ({
+  waiting: { color: p.dim, mark: ['·', '.'] },
+  running: { color: p.brand, mark: ['▸', '>'] },
+  ok: { color: p.teal, mark: ['✓', '+'] },
+  failed: { color: p.red, mark: ['✗', 'x'] },
+  denied: { color: p.yellow, mark: ['⊘', '!'] },
+});
+
+const useAscii = () => process.env.JAITUS_ASCII === '1';
+const pick = (pair) => (useAscii() ? pair[1] : pair[0]);
+
+export function makeEntry(kind, data) {
+  return { id: nextId++, kind, data, at: Date.now(), _w: -1, _rows: null };
+}
+
+/** Rows for this entry at this width, cached. */
+export function rowsFor(entry, width) {
+  if (entry._w === width && entry._rows) return entry._rows;
+  const build = BUILDERS[entry.kind] || BUILDERS.raw;
+  let rows;
+  try {
+    rows = build(entry.data, width, entry);
+  } catch (error) {
+    // A renderer must never be able to take the session down. Showing the raw text is
+    // a bad day; a crashed transcript is an unrecoverable one.
+    rows = [[{ t: plain(entry.data?.text ?? entry.data?.ansi ?? ''), color: palette().text }]];
+    rows.push([{ t: `  (render failed: ${error.message})`, color: palette().red, dimColor: true }]);
+  }
+  entry._w = width;
+  entry._rows = rows;
+  return rows;
+}
+
+/** Drop cached rows everywhere — after a theme change, which recolours everything. */
+export function invalidate(entries) {
+  for (const entry of entries) { entry._w = -1; entry._rows = null; }
+}
+
+const BUILDERS = {
+  // ── The brand, opening the conversation ──────────────────────────────────────
+  //
+  // The mark and the logotype used to live only on the welcome screen, which meant the
+  // branding survived exactly as long as it took to type the first message — one
+  // keystroke and the product had no name on screen anywhere except six characters of
+  // header. It is an ordinary transcript entry now: it opens the scrollback, it scrolls
+  // with everything above it, and it is never pinned, so it costs nothing in the
+  // working area and it never disappears.
+  //
+  // Degrading is done by DROPPING pieces, never by squashing them. A logotype drawn
+  // narrower than its own geometry is a different logotype, so a terminal too narrow
+  // for the letterforms gets the name as text rather than a compressed mark.
+  banner(data, width) {
+    const p = palette();
+    const version = data.version ? `v${data.version}` : '';
+    const tagline = `a coding agent in your terminal${version ? `  ${pick(['·', '-'])}  ${version}` : ''}`;
+    const chip = { t: ' J ', color: '#ffffff', backgroundColor: p.brand, bold: true };
+    // One row: the chip, the name, and the tagline only if it fits whole. A tagline
+    // truncated mid-word reads as a rendering bug, not as a small terminal.
+    const oneLine = () => {
+      const row = [chip, { t: '  ' }, { t: 'JAITUS', color: p.brand, bold: true }];
+      if (width >= 12 + tagline.length) row.push({ t: '   ' }, { t: tagline, color: p.dim });
+      return [row];
+    };
+
+    // A raster console draws block elements as tofu, so there the brand is the coral
+    // chip and the name in caps — still the identity, just not drawn.
+    if (useAscii()) return oneLine();
+
+    const mascot = MASCOT_ROWS();
+    const markWidth = Math.max(...mascot.map((row) => [...row].length));
+    const wordWidth = wordSize('JAITUS').width;
+    const GAP = 2;
+
+    if (width < wordWidth + 2) return oneLine();
+
+    // Both pieces are four terminal rows — the mascot is drawn in quadrant cells and the
+    // letterforms on a pixel grid rendered with half-blocks — so they lock up on one
+    // baseline with no fudge factor.
+    const withMark = width >= markWidth + GAP + wordWidth + 2;
+    const markInk = ramp(p.brandDeep, p.brand, mascot.length);
+    const word = wordRows('JAITUS', (column, total) =>
+      mix(p.brand, p.teal, total > 1 ? column / (total - 1) : 0));
+
+    const rows = [];
+    for (let y = 0; y < Math.max(mascot.length, word.length); y++) {
+      const row = [];
+      if (withMark) {
+        row.push({ t: (mascot[y] ?? '').padEnd(markWidth, ' '), color: markInk[y] || p.brand });
+        row.push({ t: ' '.repeat(GAP) });
+      }
+      row.push(...(word[y] || []));
+      rows.push(row);
+    }
+    // Flush left, not indented under the logotype: the welcome draws the same lockup
+    // with the same tagline at the same column, so pressing Enter for the first time
+    // swaps one for the other with nothing moving sideways.
+    rows.push([{ t: tagline, color: p.dim }]);
+    return rows;
+  },
+
+  // ── What the user said ───────────────────────────────────────────────────────
+  user(data, width) {
+    const p = palette();
+    const bar = { t: pick(['▌', '|']), color: p.brand };
+    const inner = Math.max(12, width - 2);
+    const body = wrapRow([{ t: String(data.text || ''), color: p.text, bold: true }], inner);
+    const rows = body.map((row) => [bar, { t: ' ' }, ...row]);
+    if (data.attachments?.length) {
+      rows.push([bar, { t: ' ' }, { t: data.attachments.map((a) => `⧉ ${a}`).join('  '), color: p.purple }]);
+    }
+    return rows;
+  },
+
+  // ── What the model said ──────────────────────────────────────────────────────
+  assistant(data, width) {
+    const p = palette();
+    const inner = Math.max(16, width - 2);
+    const body = renderMarkdown(String(data.text || ''), inner, { compact: !!data.compact });
+    if (!body.length) return [];
+    // A lead mark on the first row only: it identifies the speaker without spending a
+    // whole line on a name label, and the indent keeps the column under it aligned.
+    return body.map((row, index) => (index === 0
+      ? [{ t: pick(['● ', '* ']), color: p.teal }, ...row]
+      : [{ t: '  ' }, ...row]));
+  },
+
+  // ── A tool call ──────────────────────────────────────────────────────────────
+  tool(data, width) {
+    const p = palette();
+    const styles = STATUS_STYLE(p);
+    const style = styles[data.status] || styles.running;
+    const icon = pick(TOOL_ICON[data.name] || ['⚙', '*']);
+    const rows = [];
+
+    const head = [
+      { t: `${pick(style.mark)} `, color: style.color },
+      { t: `${icon} `, color: data.status === 'ok' ? p.dim : style.color },
+      { t: prettyName(data.name), color: data.status === 'failed' ? p.red : p.muted, bold: data.status === 'running' },
+      { t: '  ' },
+      { t: String(data.label || ''), color: data.status === 'ok' ? p.dim : p.text },
+    ];
+    if (data.took != null) head.push({ t: `  ${data.took}s`, color: p.faint });
+    if (data.status === 'running') head.push({ t: '  …', color: p.brand });
+    rows.push(truncateRow(head, width));
+
+    if (data.error) {
+      for (const row of wrapRow([{ t: String(data.error), color: p.red }], Math.max(10, width - 4))) {
+        rows.push([{ t: '    ' }, ...row]);
+      }
+    }
+
+    // A preview is a sample, never the whole output: a 4000-line test run in the
+    // transcript buries the answer that follows it.
+    const preview = previewLines(data);
+    if (preview.lines.length) {
+      const language = data.name === 'run_command' ? 'sh' : languageForPath(data.file || data.label);
+      let state = {};
+      for (const line of preview.lines) {
+        const tinted = highlightLine(line.replace(/\t/g, '  '), language, state);
+        state = tinted.state;
+        const spans = tinted.spans.length ? tinted.spans : [{ t: '' }];
+        rows.push([{ t: `    ${pick(['│', '|'])} `, color: p.lineSoft }, ...truncateRow(spans, Math.max(8, width - 6))]);
+      }
+      if (preview.more > 0) {
+        rows.push([{ t: `    ${pick(['│', '|'])} `, color: p.lineSoft }, { t: `+${preview.more} more line${preview.more === 1 ? '' : 's'}`, color: p.faint, italic: true }]);
+      }
+    }
+    return rows;
+  },
+
+  // ── A file diff ──────────────────────────────────────────────────────────────
+  diff(data, width) {
+    const p = palette();
+    const rows = [];
+    const lines = String(data.patch || '').split('\n');
+    const added = lines.filter((l) => l.startsWith('+') && !l.startsWith('+++')).length;
+    const removed = lines.filter((l) => l.startsWith('-') && !l.startsWith('---')).length;
+
+    rows.push([
+      { t: `${pick(['◈', '~'])} `, color: p.brand },
+      { t: String(data.file || 'diff'), color: p.text, bold: true },
+      { t: '  ' },
+      { t: `+${added}`, color: p.addFg },
+      { t: ' ' },
+      { t: `-${removed}`, color: p.delFg },
+    ]);
+
+    const language = languageForPath(data.file);
+    const shown = lines.slice(0, data.max || 40);
+    for (const line of shown) {
+      if (/^(diff |index |--- |\+\+\+ )/.test(line)) continue;
+      if (line.startsWith('@@')) {
+        rows.push([{ t: '    ' }, { t: truncate(line, width - 4), color: p.hunkFg, dimColor: true }]);
+        continue;
+      }
+      const sign = line[0];
+      const body = line.slice(1);
+      if (sign === '+') {
+        rows.push([{ t: '    ' }, { t: '+ ', color: p.addFg, backgroundColor: p.addBg }, { t: truncate(body, width - 6), color: p.addFg, backgroundColor: p.addBg }]);
+      } else if (sign === '-') {
+        rows.push([{ t: '    ' }, { t: '- ', color: p.delFg, backgroundColor: p.delBg }, { t: truncate(body, width - 6), color: p.delFg, backgroundColor: p.delBg }]);
+      } else {
+        const tinted = highlightLine(body.replace(/\t/g, '  '), language, {});
+        rows.push([{ t: '      ' }, ...truncateRow(tinted.spans.length ? tinted.spans : [{ t: body }], Math.max(8, width - 6))]);
+      }
+    }
+    if (lines.length > shown.length) {
+      rows.push([{ t: '    ' }, { t: `… ${lines.length - shown.length} more lines`, color: p.faint, italic: true }]);
+    }
+    return rows;
+  },
+
+  // ── Something went wrong ─────────────────────────────────────────────────────
+  //
+  // Errors get the most deliberate treatment in this file. The previous surface
+  // printed a failure as one dim line that scrolled past, and a session where the
+  // gateway is rejecting every request looked identical to a session where the model
+  // had nothing to say.
+  error(data, width) {
+    const p = palette();
+    const rows = [];
+    const bar = { t: pick(['▌', '|']), color: p.red };
+    const inner = Math.max(12, width - 2);
+
+    rows.push([bar, { t: ' ' }, { t: `${pick(['✗', 'x'])} ${data.title || 'Error'}`, color: p.red, bold: true }]);
+    for (const row of wrapRow([{ t: String(data.message || ''), color: p.text }], inner)) {
+      rows.push([bar, { t: ' ' }, ...row]);
+    }
+    if (data.hint) {
+      for (const row of wrapRow(inlineSpans(String(data.hint), { color: p.yellow }), inner)) {
+        rows.push([bar, { t: ' ' }, ...row]);
+      }
+    }
+    if (data.detail) {
+      for (const row of wrapRow([{ t: String(data.detail), color: p.muted }], inner)) {
+        rows.push([bar, { t: ' ' }, ...row]);
+      }
+    }
+    // The stack is the difference between "it broke" and a bug report. Shown folded by
+    // default so it does not swamp the answer, and always present in the entry so
+    // /copy and /export carry it even when the screen does not.
+    if (data.stack && data.expanded) {
+      for (const line of String(data.stack).split('\n').slice(1, 12)) {
+        rows.push([bar, { t: ' ' }, { t: truncate(line.trim(), inner), color: p.faint }]);
+      }
+    } else if (data.stack) {
+      rows.push([bar, { t: ' ' }, { t: `${pick(['▸', '>'])} ${countFrames(data.stack)} stack frames — /debug shows them`, color: p.faint, italic: true }]);
+    }
+    return rows;
+  },
+
+  // ── A checklist ──────────────────────────────────────────────────────────────
+  todo(data, width) {
+    const p = palette();
+    const items = Array.isArray(data.items) ? data.items : [];
+    const done = items.filter((t) => t?.status === 'completed').length;
+    const rows = [[
+      { t: `${pick(['☰', '='])} `, color: p.purple },
+      { t: 'plan', color: p.muted, bold: true },
+      { t: `  ${done}/${items.length}`, color: p.dim },
+      { t: '  ' },
+      { t: bar(done, items.length, Math.min(24, Math.max(6, width - 24))), color: done === items.length && items.length ? p.teal : p.brand },
+    ]];
+    for (const item of items.slice(0, 20)) {
+      const status = item?.status || 'pending';
+      const mark = status === 'completed' ? pick(['✔', 'x']) : status === 'in_progress' ? pick(['◐', '>']) : pick(['○', ' ']);
+      const color = status === 'completed' ? p.teal : status === 'in_progress' ? p.brand : p.dim;
+      const text = String(item?.task || item?.content || '');
+      const body = wrapRow([{ t: text, color: status === 'completed' ? p.dim : p.text, strikethrough: status === 'completed' }], Math.max(10, width - 6));
+      body.forEach((row, index) => rows.push(index === 0
+        ? [{ t: '  ' }, { t: `${mark} `, color }, ...row]
+        : [{ t: '    ' }, ...row]));
+    }
+    return rows;
+  },
+
+  // ── A one-line aside ─────────────────────────────────────────────────────────
+  notice(data, width) {
+    const p = palette();
+    const tone = { info: p.blue, ok: p.teal, warn: p.yellow, dim: p.dim }[data.tone || 'dim'] || p.dim;
+    const mark = { info: pick(['›', '>']), ok: pick(['✓', '+']), warn: pick(['!', '!']), dim: ' ' }[data.tone || 'dim'];
+    return wrapRow([{ t: `${mark} `, color: tone }, { t: String(data.text || ''), color: data.tone === 'dim' ? p.dim : p.muted }], width, '  ');
+  },
+
+  // ── Whatever the rest of the CLI printed ─────────────────────────────────────
+  raw(data, width) {
+    return wrapRows(ansiToRows(data.ansi ?? data.text ?? ''), width, '  ');
+  },
+};
+
+function prettyName(name) {
+  return String(name || '')
+    .replace(/^mcp__/, '')
+    .replace(/_/g, ' ');
+}
+
+function truncate(text, width) {
+  const value = String(text ?? '');
+  if (stringWidth(value) <= width) return value;
+  return `${value.slice(0, Math.max(0, width - 1))}…`;
+}
+
+function countFrames(stack) {
+  return String(stack).split('\n').filter((line) => /^\s*at\s/.test(line)).length;
+}
+
+function bar(value, total, width) {
+  const ratio = total > 0 ? value / total : 0;
+  const filled = Math.round(ratio * width);
+  const [on, off] = useAscii() ? ['#', '.'] : ['█', '░'];
+  return on.repeat(filled) + off.repeat(Math.max(0, width - filled));
+}
+
+/**
+ * Head and tail of a tool's output.
+ *
+ * The middle of a long output is almost never the interesting part: a failing test run
+ * puts the command at the top and the failure at the bottom, and a build puts the error
+ * last. Showing both ends beats showing the first twenty lines of a stack trace.
+ */
+function previewLines(data) {
+  const raw = String(data.preview ?? data.detail ?? '').replace(/\r\n?/g, '\n').trimEnd();
+  if (!raw) return { lines: [], more: 0 };
+  const limit = data.previewLimit ?? (data.status === 'failed' ? 12 : 6);
+  const all = raw.split('\n');
+  if (all.length <= limit) return { lines: all, more: 0 };
+  const head = Math.ceil(limit / 2);
+  const tail = limit - head;
+  return { lines: [...all.slice(0, head), ...all.slice(all.length - tail)], more: all.length - limit };
+}

package/src/tui/highlight.js

@@ -0,0 +1,211 @@
+// ─── Syntax tinting ─────────────────────────────────────────────────────────────
+//
+// Not a syntax highlighter in the editor sense, and deliberately so: a real grammar
+// per language is thousands of lines and a dependency tree, for output that is read in
+// fifteen-line fragments. What actually helps at that size is separating the five
+// things the eye looks for — comments, strings, numbers, keywords, and the name being
+// called — and that generalises across every C-family, script and markup language with
+// one tokenizer and a keyword table.
+//
+// It never throws and never mangles: unknown input falls through as plain text, and the
+// concatenation of every token always equals the input exactly. A highlighter that can
+// silently drop a character from the code it is showing you is worse than none.
+
+import { palette } from './theme.js';
+
+const COMMON = 'if else for while return function class new this null true false undefined break continue switch case default try catch finally throw typeof instanceof delete void in of do';
+
+const LANGS = {
+  js: {
+    line: ['//'], block: [['/*', '*/']], strings: ['"', "'", '`'],
+    keywords: `${COMMON} const let var async await import export from as extends super static get set yield => require module exports`,
+    types: 'Promise Array Object String Number Boolean Map Set Symbol JSON Math Date RegExp Error console process',
+  },
+  ts: {
+    line: ['//'], block: [['/*', '*/']], strings: ['"', "'", '`'],
+    keywords: `${COMMON} const let var async await import export from as extends super static get set yield interface type enum implements readonly public private protected namespace declare satisfies keyof infer`,
+    types: 'Promise Array Object String Number Boolean Map Set Symbol JSON Math Date RegExp Error string number boolean any unknown never void',
+  },
+  py: {
+    line: ['#'], block: [['"""', '"""'], ["'''", "'''"]], strings: ['"', "'"],
+    keywords: 'def class return if elif else for while import from as with try except finally raise yield lambda pass break continue global nonlocal assert async await in is not and or None True False del',
+    types: 'self int str float bool list dict set tuple bytes object Exception print len range enumerate zip open',
+  },
+  go: {
+    line: ['//'], block: [['/*', '*/']], strings: ['"', '`'],
+    keywords: 'func package import return if else for range switch case default type struct interface map chan go defer var const nil true false break continue select fallthrough',
+    types: 'string int int64 int32 float64 bool byte rune error any make new len cap append copy panic recover',
+  },
+  rust: {
+    line: ['//'], block: [['/*', '*/']], strings: ['"'],
+    keywords: 'fn let mut const static struct enum impl trait for while loop if else match return pub use mod crate self super where async await move ref dyn unsafe as in break continue',
+    types: 'String str Vec Option Result Some None Ok Err i32 i64 u32 u64 f64 bool usize Box Rc Arc',
+  },
+  c: {
+    line: ['//'], block: [['/*', '*/']], strings: ['"', "'"],
+    keywords: `${COMMON} struct enum union typedef sizeof static const extern inline goto public private protected namespace using template virtual override final`,
+    types: 'int char float double long short unsigned signed void bool size_t std string vector map',
+  },
+  sh: {
+    line: ['#'], block: [], strings: ['"', "'"],
+    keywords: 'if then else elif fi for while do done case esac function return export local source alias set unset exit trap shift read echo printf',
+    types: 'cd ls cat grep sed awk find git npm node docker curl mkdir rm cp mv chmod sudo',
+  },
+  sql: {
+    line: ['--'], block: [['/*', '*/']], strings: ["'", '"'],
+    keywords: 'select from where insert into values update set delete create table alter drop index join left right inner outer on group by order limit offset having union distinct as and or not null primary key foreign references default',
+    types: 'int varchar text timestamp boolean decimal serial uuid jsonb count sum avg min max',
+  },
+  css: {
+    line: [], block: [['/*', '*/']], strings: ['"', "'"],
+    keywords: 'important media supports keyframes import from to and not only',
+    types: 'display flex grid color background border margin padding width height position font',
+  },
+  yaml: { line: ['#'], block: [], strings: ['"', "'"], keywords: 'true false null yes no on off', types: '' },
+  json: { line: [], block: [], strings: ['"'], keywords: 'true false null', types: '' },
+};
+
+const ALIASES = {
+  javascript: 'js', mjs: 'js', cjs: 'js', jsx: 'js', node: 'js',
+  typescript: 'ts', tsx: 'ts',
+  python: 'py', py3: 'py',
+  golang: 'go',
+  rs: 'rust',
+  'c++': 'c', cpp: 'c', cc: 'c', h: 'c', hpp: 'c', java: 'c', cs: 'c', csharp: 'c', kotlin: 'c', swift: 'c', php: 'c',
+  bash: 'sh', zsh: 'sh', shell: 'sh', console: 'sh', ps1: 'sh', powershell: 'sh', fish: 'sh',
+  postgres: 'sql', mysql: 'sql', psql: 'sql',
+  scss: 'css', less: 'css',
+  yml: 'yaml', toml: 'yaml', ini: 'yaml', env: 'yaml', dotenv: 'yaml',
+  html: 'css', xml: 'css', vue: 'css', svelte: 'js',
+};
+
+const cache = new Map();
+function spec(language) {
+  const key = String(language || '').toLowerCase().trim();
+  const resolved = LANGS[key] ? key : LANGS[ALIASES[key]] ? ALIASES[key] : null;
+  if (!resolved) return null;
+  if (!cache.has(resolved)) {
+    const raw = LANGS[resolved];
+    cache.set(resolved, {
+      ...raw,
+      keywordSet: new Set(raw.keywords.split(/\s+/).filter(Boolean)),
+      typeSet: new Set(raw.types.split(/\s+/).filter(Boolean)),
+    });
+  }
+  return cache.get(resolved);
+}
+
+export function isKnownLanguage(language) { return !!spec(language); }
+
+/**
+ * Tint one line. Returns spans whose `t` values concatenate back to `line` exactly.
+ *
+ * `state` carries whether the previous line ended inside a block comment or a template
+ * string, so a multi-line comment stays one colour instead of restarting at each line.
+ * Callers thread the returned state into the next call.
+ */
+export function highlightLine(line, language, state = {}) {
+  const p = palette();
+  const lang = spec(language);
+  const text = String(line ?? '');
+  if (!lang) return { spans: text ? [{ t: text, color: p.text }] : [], state };
+
+  const spans = [];
+  let i = 0;
+  let next = { ...state };
+  const push = (t, color, extra) => { if (t) spans.push({ t, color, ...(extra || {}) }); };
+
+  // A block comment or template string left open by the previous line closes here.
+  if (next.openBlock) {
+    const close = next.openBlock;
+    const at = text.indexOf(close);
+    if (at === -1) { push(text, p.synComment, { italic: true }); return { spans, state: next }; }
+    push(text.slice(0, at + close.length), p.synComment, { italic: true });
+    i = at + close.length;
+    next = { ...next, openBlock: null };
+  }
+  if (next.openString) {
+    const quote = next.openString;
+    const at = findClose(text, i, quote);
+    if (at === -1) { push(text.slice(i), p.synString); return { spans, state: next }; }
+    push(text.slice(i, at + quote.length), p.synString);
+    i = at + quote.length;
+    next = { ...next, openString: null };
+  }
+
+  while (i < text.length) {
+    const rest = text.slice(i);
+
+    const lineComment = lang.line.find((token) => rest.startsWith(token));
+    if (lineComment) { push(text.slice(i), p.synComment, { italic: true }); i = text.length; break; }
+
+    const block = lang.block.find(([open]) => rest.startsWith(open));
+    if (block) {
+      const [open, close] = block;
+      const at = text.indexOf(close, i + open.length);
+      if (at === -1) { push(text.slice(i), p.synComment, { italic: true }); next.openBlock = close; i = text.length; break; }
+      push(text.slice(i, at + close.length), p.synComment, { italic: true });
+      i = at + close.length;
+      continue;
+    }
+
+    const quote = lang.strings.find((q) => rest.startsWith(q));
+    if (quote) {
+      const at = findClose(text, i + quote.length, quote);
+      if (at === -1) {
+        push(text.slice(i), p.synString);
+        // Only a backtick legitimately spans lines; an unterminated ' or " is a typo,
+        // and carrying it forward would paint the rest of the file green.
+        if (quote === '`') next.openString = quote;
+        i = text.length;
+        break;
+      }
+      push(text.slice(i, at + quote.length), p.synString);
+      i = at + quote.length;
+      continue;
+    }
+
+    const number = /^(0[xXbBoO][0-9a-fA-F_]+|\d[\d_]*(\.\d[\d_]*)?([eE][+-]?\d+)?)/.exec(rest);
+    if (number) { push(number[0], p.synNumber); i += number[0].length; continue; }
+
+    const word = /^[A-Za-z_$@][\w$]*/.exec(rest);
+    if (word) {
+      const w = word[0];
+      const after = text.slice(i + w.length);
+      const color = lang.keywordSet.has(w) ? p.synKeyword
+        : lang.typeSet.has(w) ? p.synType
+        : /^\s*\(/.test(after) ? p.synFunc
+        : /^[A-Z]/.test(w) ? p.synType
+        : p.text;
+      push(w, color, lang.keywordSet.has(w) ? { bold: true } : undefined);
+      i += w.length;
+      continue;
+    }
+
+    const punct = /^[^\w\s$@]+/.exec(rest);
+    if (punct) { push(punct[0], p.synPunct); i += punct[0].length; continue; }
+
+    const space = /^\s+/.exec(rest);
+    if (space) { push(space[0], p.text); i += space[0].length; continue; }
+
+    push(rest[0], p.text);
+    i += 1;
+  }
+
+  return { spans, state: next };
+}
+
+/** Index of the closing quote at or after `from`, honouring backslash escapes. */
+function findClose(text, from, quote) {
+  for (let i = from; i < text.length; i++) {
+    if (text[i] === '\\') { i += 1; continue; }
+    if (text.startsWith(quote, i)) return i;
+  }
+  return -1;
+}
+
+/** Guess a language from a file path, for diffs and read_file previews. */
+export function languageForPath(file) {
+  const ext = String(file || '').toLowerCase().split('.').pop();
+  return LANGS[ext] ? ext : ALIASES[ext] || null;
+}

package/src/tui/logo.js

@@ -0,0 +1,93 @@
+// ─── The mark, as pixels ────────────────────────────────────────────────────────
+//
+// The brand badge is a 125×125 RGB image. A terminal cell is roughly twice as tall as
+// it is wide, so drawing one pixel per cell would give a logo stretched to twice its
+// height. The half-block trick fixes that and doubles the vertical resolution at the
+// same time: print `▀` with the FOREGROUND set to the upper pixel and the BACKGROUND to
+// the lower one, and each cell carries two pixels of the source.
+//
+// This is deliberately not sixel. Sixel paints real pixels, but it paints them *outside*
+// Ink's model of the screen — Ink would erase the image on its next frame and would not
+// know the rows were occupied. Half-blocks are just text with colour on it, so they live
+// in the component tree like anything else, survive every redraw, and work in any
+// terminal that can do colour at all rather than the handful that speak a graphics
+// protocol.
+
+import { pixels, SIZE } from '../logo-data.js';
+
+const UPPER = '▀';
+
+let cache = null;
+
+/**
+ * The mark as rows of spans, `cells` wide.
+ *
+ * Downscaled by area average rather than nearest-neighbour: at 16 cells across, one
+ * output pixel covers an 8×8 block of the source, and picking a single sample out of it
+ * turns the badge's gradient into noise. Fully transparent blocks become spaces with no
+ * background so the mark sits on the terminal's own ground instead of in a black box.
+ */
+export function markRows(cells = 16) {
+  const wide = Math.max(4, Math.min(40, Math.round(cells)));
+  if (cache?.cells === wide) return cache.rows;
+
+  const src = pixels();
+  const outW = wide;
+  // Aspect ratio, carefully. A terminal cell is about twice as tall as it is wide, and
+  // a half-block cell holds two pixels stacked — so one source pixel occupies a square
+  // of screen and `pixelRows = cells × (srcH / srcW)` is already correct. Multiplying by
+  // two on top of that (the obvious-looking "two pixels per row") draws the mark at
+  // double height, which is exactly how a round badge comes out as an oval.
+  const outH = Math.max(2, 2 * Math.round((wide * SIZE.height) / SIZE.width / 2)); // even
+  const rows = [];
+
+  const sample = (ox, oy) => {
+    // The source rectangle this output pixel covers.
+    const x0 = Math.floor((ox * src.width) / outW);
+    const x1 = Math.max(x0 + 1, Math.floor(((ox + 1) * src.width) / outW));
+    const y0 = Math.floor((oy * src.height) / outH);
+    const y1 = Math.max(y0 + 1, Math.floor(((oy + 1) * src.height) / outH));
+    let r = 0; let g = 0; let b = 0; let on = 0; let n = 0;
+    for (let y = y0; y < y1; y++) {
+      for (let x = x0; x < x1; x++) {
+        const i = y * src.width + x;
+        n += 1;
+        if (!src.opaque[i]) continue;
+        on += 1;
+        r += src.rgb[i * 3];
+        g += src.rgb[i * 3 + 1];
+        b += src.rgb[i * 3 + 2];
+      }
+    }
+    // Mostly-transparent blocks read as transparent. Averaging a half-covered block
+    // against nothing would ring the mark with a dark halo.
+    if (!on || on / n < 0.35) return null;
+    return `#${[r / on, g / on, b / on].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('')}`;
+  };
+
+  for (let cy = 0; cy < outH / 2; cy++) {
+    const row = [];
+    for (let cx = 0; cx < outW; cx++) {
+      const top = sample(cx, cy * 2);
+      const bottom = sample(cx, cy * 2 + 1);
+      if (!top && !bottom) row.push({ t: ' ' });
+      else if (top && bottom) row.push({ t: UPPER, color: top, backgroundColor: bottom });
+      else if (top) row.push({ t: UPPER, color: top });
+      // Only the lower half is lit: draw the lower half-block instead of a background,
+      // so a transparent upper half stays transparent.
+      else row.push({ t: '▄', color: bottom });
+    }
+    rows.push(row);
+  }
+
+  cache = { cells: wide, rows };
+  return rows;
+}
+
+/** How many terminal rows `markRows(cells)` will occupy. */
+export function markHeight(cells = 16) {
+  return markRows(cells).length;
+}
+
+/** Drop the cache — the sampling does not depend on the theme, but a resize may. */
+export function forgetMark() { cache = null; }