moqi-tui 0.2.0

package/lib/tui/text.js

@@ -0,0 +1,173 @@
+/**
+ * Width-aware text helpers.
+ *
+ * Every measurement in the app goes through {@link displayWidth}, which ignores
+ * SGR escapes and counts East Asian wide characters as two columns. Without
+ * that, styled or CJK content silently breaks the column arithmetic the whole
+ * layout depends on.
+ * @module
+ */
+const ESC = '';
+const BEL = '';
+/** Matches an ANSI escape sequence (CSI or OSC), which occupies no columns. */
+const ANSI_PATTERN = `${ESC}\\[[0-9;?]*[ -/]*[@-~]|${ESC}\\][^${BEL}${ESC}]*(?:${BEL}|${ESC}\\\\)`;
+function ansiRegex() {
+    return new RegExp(ANSI_PATTERN, 'g');
+}
+/** Remove every escape sequence, leaving the printable text. */
+export function stripAnsi(text) {
+    return text.replace(ansiRegex(), '');
+}
+/** Whether a code point renders two columns wide. */
+function isWide(code) {
+    return ((code >= 0x1100 && code <= 0x115f) ||
+        (code >= 0x2e80 && code <= 0x303e) ||
+        (code >= 0x3041 && code <= 0x33ff) ||
+        (code >= 0x3400 && code <= 0x4dbf) ||
+        (code >= 0x4e00 && code <= 0x9fff) ||
+        (code >= 0xa000 && code <= 0xa4cf) ||
+        (code >= 0xac00 && code <= 0xd7a3) ||
+        (code >= 0xf900 && code <= 0xfaff) ||
+        (code >= 0xfe30 && code <= 0xfe6f) ||
+        (code >= 0xff00 && code <= 0xff60) ||
+        (code >= 0xffe0 && code <= 0xffe6) ||
+        (code >= 0x1f300 && code <= 0x1f64f) ||
+        (code >= 0x1f900 && code <= 0x1f9ff) ||
+        (code >= 0x20000 && code <= 0x3fffd));
+}
+/** Whether a code point is a zero-width joiner, selector, or combining mark. */
+function isZeroWidth(code) {
+    return (code === 0x200b ||
+        code === 0x200c ||
+        code === 0x200d ||
+        code === 0xfe0f ||
+        (code >= 0x0300 && code <= 0x036f) ||
+        (code >= 0x1ab0 && code <= 0x1aff) ||
+        (code >= 0x20d0 && code <= 0x20ff));
+}
+/** Width of one code point in terminal columns. */
+function charWidth(code) {
+    if (isZeroWidth(code))
+        return 0;
+    return isWide(code) ? 2 : 1;
+}
+/** Printable width of a string in terminal columns, ignoring escapes. */
+export function displayWidth(text) {
+    let width = 0;
+    for (const char of stripAnsi(text)) {
+        const code = char.codePointAt(0);
+        if (code === undefined)
+            continue;
+        width += charWidth(code);
+    }
+    return width;
+}
+/** The escape sequence starting at `index`, when there is one. */
+function escapeAt(text, index) {
+    if (text[index] !== ESC)
+        return undefined;
+    const regex = ansiRegex();
+    regex.lastIndex = index;
+    const match = regex.exec(text);
+    if (match === null || match.index !== index)
+        return undefined;
+    return match[0];
+}
+/**
+ * Cut a string to `limit` columns, appending an ellipsis when it did not fit.
+ * Escape sequences pass through so styling is never severed mid-code, and a
+ * reset is appended when the cut text carried any styling.
+ */
+export function truncate(text, limit) {
+    if (limit <= 0)
+        return '';
+    if (displayWidth(text) <= limit)
+        return text;
+    const budget = limit <= 1 ? limit : limit - 1;
+    let out = '';
+    let width = 0;
+    let index = 0;
+    let styled = false;
+    while (index < text.length) {
+        const escape = escapeAt(text, index);
+        if (escape !== undefined) {
+            out += escape;
+            styled = true;
+            index += escape.length;
+            continue;
+        }
+        const code = text.codePointAt(index);
+        if (code === undefined)
+            break;
+        const char = String.fromCodePoint(code);
+        const width0 = charWidth(code);
+        if (width + width0 > budget)
+            break;
+        out += char;
+        width += width0;
+        index += char.length;
+    }
+    const reset = styled ? `${ESC}[0m` : '';
+    const tail = limit <= 1 ? '' : '…';
+    return `${out}${reset}${tail}`;
+}
+/** Pad a string on the right to `width` columns. */
+export function padEnd(text, width) {
+    const pad = width - displayWidth(text);
+    return pad > 0 ? text + ' '.repeat(pad) : text;
+}
+/**
+ * Hard-wrap plain text to `width` columns, breaking on spaces where possible
+ * and mid-word only when a single word cannot fit on a line of its own.
+ */
+export function wrap(text, width) {
+    if (width < 1)
+        return text.split('\n');
+    const out = [];
+    for (const paragraph of text.split('\n')) {
+        if (paragraph === '') {
+            out.push('');
+            continue;
+        }
+        let line = '';
+        for (const word of paragraph.split(' ')) {
+            const candidate = line === '' ? word : `${line} ${word}`;
+            if (displayWidth(candidate) <= width) {
+                line = candidate;
+                continue;
+            }
+            if (line !== '') {
+                out.push(line);
+                line = '';
+            }
+            let rest = word;
+            while (displayWidth(rest) > width) {
+                const head = cut(rest, width);
+                out.push(head);
+                rest = rest.slice(head.length);
+            }
+            line = rest;
+        }
+        out.push(line);
+    }
+    return out;
+}
+/** Take exactly as many code points as fit in `width` columns, no ellipsis. */
+export function cut(text, width) {
+    let out = '';
+    let used = 0;
+    let index = 0;
+    while (index < text.length) {
+        const code = text.codePointAt(index);
+        if (code === undefined)
+            break;
+        const char = String.fromCodePoint(code);
+        const w = charWidth(code);
+        if (used + w > width)
+            break;
+        out += char;
+        used += w;
+        index += char.length;
+    }
+    return out;
+}

package/lib/tui/theme.js

@@ -0,0 +1,183 @@
+/**
+ * Palette and text styling for the terminal app.
+ *
+ * The colors default to the Rose Pine-ish pair the original Go client used,
+ * kept as explicit light/dark variants so the app reads on either terminal
+ * background. Everything emits truecolor SGR directly: the app already owns
+ * the screen, so there is no styling library between it and the escape codes.
+ *
+ * Which palette is in force is swappable at runtime — see {@link applyTheme}
+ * and the table in `themes.ts`. That is deliberately orthogonal to the
+ * light/dark question: a theme supplies both variants, and the terminal's own
+ * background still decides which of the two is drawn.
+ * @module
+ */
+import { DEFAULT_PALETTE, DEFAULT_THEME, findTheme, THEMES } from "./themes.js";
+/**
+ * Copy a palette entry into a fresh object.
+ *
+ * The exported constants have to be objects this module owns, not the table's
+ * own, because {@link applyTheme} writes through them — sharing them with the
+ * table would let one theme switch overwrite the palette it came from.
+ */
+function seed(color) {
+    return { light: color.light, dark: color.dark };
+}
+export const colAccent = seed(DEFAULT_PALETTE.accent);
+export const colMuted = seed(DEFAULT_PALETTE.muted);
+export const colBorder = seed(DEFAULT_PALETTE.border);
+export const colText = seed(DEFAULT_PALETTE.text);
+export const colWarn = seed(DEFAULT_PALETTE.warn);
+export const colOK = seed(DEFAULT_PALETTE.ok);
+export const colGreen = seed(DEFAULT_PALETTE.green);
+export const colGold = seed(DEFAULT_PALETTE.gold);
+export const colRose = seed(DEFAULT_PALETTE.rose);
+export const colInvert = seed(DEFAULT_PALETTE.invert);
+/** Which palette {@link applyTheme} last installed. */
+let active = DEFAULT_THEME;
+/**
+ * Install a named palette, returning false when there is no such theme.
+ *
+ * Every other module imported the color constants by name, so the switch has
+ * to happen *through* those objects rather than by replacing them: an import
+ * binding points at the object that existed when the module was evaluated,
+ * and reassigning the constant here would leave every call site drawing with
+ * the old palette. Writing the two fields in place is what makes a theme
+ * change a one-line operation instead of a rewrite of every view.
+ *
+ * An unknown name is reported rather than thrown: it arrives from `/theme
+ * <name>` or from a state file written by a future version, and neither is a
+ * reason to take the app down.
+ */
+export function applyTheme(name) {
+    const theme = findTheme(name);
+    if (theme === undefined)
+        return false;
+    const pairs = [
+        [colAccent, theme.colors.accent],
+        [colMuted, theme.colors.muted],
+        [colBorder, theme.colors.border],
+        [colText, theme.colors.text],
+        [colWarn, theme.colors.warn],
+        [colOK, theme.colors.ok],
+        [colGreen, theme.colors.green],
+        [colGold, theme.colors.gold],
+        [colRose, theme.colors.rose],
+        [colInvert, theme.colors.invert],
+    ];
+    for (const [target, source] of pairs) {
+        target.light = source.light;
+        target.dark = source.dark;
+    }
+    active = theme.name;
+    return true;
+}
+/** The name of the palette currently installed. */
+export function activeTheme() {
+    return active;
+}
+/** Every palette {@link applyTheme} will accept, in the order to list them. */
+export function listThemes() {
+    return THEMES;
+}
+/**
+ * Whether this terminal is being treated as dark. `MOQI_THEME` wins; the
+ * `COLORFGBG` convention decides otherwise; dark is the fallback because it is
+ * the common default and the safer miss.
+ */
+function detectDark() {
+    const forced = process.env['MOQI_THEME'];
+    if (forced === 'light')
+        return false;
+    if (forced === 'dark')
+        return true;
+    const fgbg = process.env['COLORFGBG'];
+    if (fgbg !== undefined) {
+        const background = fgbg.split(';').pop();
+        if (background !== undefined && /^\d+$/.test(background)) {
+            const value = Number(background);
+            // 0-6 and 8 are the dark background slots in the COLORFGBG convention.
+            return value <= 6 || value === 8;
+        }
+    }
+    return true;
+}
+let dark = detectDark();
+/**
+ * Re-read the environment, so a change of terminal background applies without
+ * a restart. This is about the light/dark variant only — the choice of
+ * palette is {@link applyTheme}'s.
+ */
+export function refreshTheme() {
+    dark = detectDark();
+}
+/** Whether styling currently targets a dark background. */
+export function isDark() {
+    return dark;
+}
+/** Resolve an adaptive color against the active background. */
+export function resolve(color) {
+    return dark ? color.dark : color.light;
+}
+/** Whether color should be emitted at all. Honors the NO_COLOR convention. */
+const colorEnabled = process.env['NO_COLOR'] === undefined && process.env['TERM'] !== 'dumb';
+function channels(hex) {
+    const value = hex.replace('#', '');
+    return [
+        Number.parseInt(value.slice(0, 2), 16),
+        Number.parseInt(value.slice(2, 4), 16),
+        Number.parseInt(value.slice(4, 6), 16),
+    ];
+}
+const ESC = '';
+/** Clears every attribute set by {@link style}. */
+export const RESET = `${ESC}[0m`;
+/**
+ * Build the SGR prefix for a style, or an empty string when the style would
+ * emit nothing (color disabled and no text attributes).
+ */
+function prefix(options) {
+    const codes = [];
+    if (options.bold === true)
+        codes.push('1');
+    if (options.dim === true)
+        codes.push('2');
+    if (options.italic === true)
+        codes.push('3');
+    if (options.underline === true)
+        codes.push('4');
+    if (options.strike === true)
+        codes.push('9');
+    if (colorEnabled) {
+        if (options.fg !== undefined) {
+            const [r, g, b] = channels(resolve(options.fg));
+            codes.push(`38;2;${r};${g};${b}`);
+        }
+        if (options.bg !== undefined) {
+            const [r, g, b] = channels(resolve(options.bg));
+            codes.push(`48;2;${r};${g};${b}`);
+        }
+    }
+    if (codes.length === 0)
+        return '';
+    return `${ESC}[${codes.join(';')}m`;
+}
+/**
+ * Wrap text in a style. Each line is styled independently so a styled block
+ * survives being split, padded, or placed beside other cells.
+ */
+export function style(text, options) {
+    const open = prefix(options);
+    if (open === '')
+        return text;
+    return text
+        .split('\n')
+        .map((line) => (line === '' ? line : `${open}${line}${RESET}`))
+        .join('\n');
+}
+export const muted = (text) => style(text, { fg: colMuted });
+export const warn = (text) => style(text, { fg: colWarn });
+export const ok = (text) => style(text, { fg: colOK });
+export const bold = (text) => style(text, { fg: colText, bold: true });
+export const accent = (text) => style(text, { fg: colAccent });
+export const selected = (text) => style(text, { fg: colInvert, bg: colAccent, bold: true });

package/lib/tui/themes.js

@@ -0,0 +1,153 @@
+/**
+ * The palettes `/theme` can choose between.
+ *
+ * This is a data module on purpose: `theme.ts` owns the colour objects every
+ * other module imports by name, and it would grow unreadable if five full
+ * palettes sat between the `style()` machinery and the SGR encoder. Keeping
+ * the table here means adding a palette is an edit to one list of hex pairs
+ * and nothing else.
+ *
+ * Every palette carries both a light and a dark variant because the variant
+ * is picked separately, from the terminal background — a user on a light
+ * terminal must get a readable Nord, not a dark one washed out.
+ * @module
+ */
+/**
+ * The palette the app has always shipped, and still starts with.
+ *
+ * Its values are reproduced here byte for byte from the constants in
+ * `theme.ts`, so selecting `rose-pine` after wandering through the others
+ * restores exactly the original rendering rather than something close to it.
+ */
+const rosePine = {
+    name: 'rose-pine',
+    description: 'The default: muted purples on a soft ink background',
+    colors: {
+        accent: { light: '#7A3E9D', dark: '#C4A7E7' },
+        muted: { light: '#6B6B6B', dark: '#6E6A86' },
+        border: { light: '#D0CCD8', dark: '#393552' },
+        text: { light: '#1F1D2E', dark: '#E0DEF4' },
+        warn: { light: '#B4637A', dark: '#EB6F92' },
+        ok: { light: '#286983', dark: '#9CCFD8' },
+        green: { light: '#56949F', dark: '#3E8FB0' },
+        gold: { light: '#EA9D34', dark: '#F6C177' },
+        rose: { light: '#D7827E', dark: '#EA9A97' },
+        invert: { light: '#FFFFFF', dark: '#191724' },
+    },
+};
+/**
+ * Gruvbox, in its medium contrast form.
+ *
+ * The light variant is the published `gruvbox-light` set rather than the dark
+ * one lightened: Gruvbox ships two hand-tuned halves and mixing them gives
+ * the washed-out result the palette was designed to avoid.
+ */
+const gruvbox = {
+    name: 'gruvbox',
+    description: 'Warm retro earth tones, medium contrast',
+    colors: {
+        accent: { light: '#8F3F71', dark: '#D3869B' },
+        muted: { light: '#7C6F64', dark: '#928374' },
+        border: { light: '#D5C4A1', dark: '#504945' },
+        text: { light: '#3C3836', dark: '#EBDBB2' },
+        warn: { light: '#9D0006', dark: '#FB4934' },
+        ok: { light: '#427B58', dark: '#8EC07C' },
+        green: { light: '#79740E', dark: '#B8BB26' },
+        gold: { light: '#B57614', dark: '#FABD2F' },
+        rose: { light: '#AF3A03', dark: '#FE8019' },
+        invert: { light: '#FBF1C7', dark: '#282828' },
+    },
+};
+/**
+ * Nord: Polar Night behind Frost and Aurora.
+ *
+ * Nord only specifies a dark scheme, so the light variant darkens the Aurora
+ * accents until they carry against Snow Storm — the published hues sit far
+ * too pale on a white terminal to read as anything but noise.
+ */
+const nord = {
+    name: 'nord',
+    description: 'Cool arctic blues, low saturation',
+    colors: {
+        accent: { light: '#5E81AC', dark: '#88C0D0' },
+        muted: { light: '#616E88', dark: '#4C566A' },
+        border: { light: '#D8DEE9', dark: '#3B4252' },
+        text: { light: '#2E3440', dark: '#ECEFF4' },
+        warn: { light: '#99414A', dark: '#BF616A' },
+        ok: { light: '#3B7C7B', dark: '#8FBCBB' },
+        green: { light: '#5A7247', dark: '#A3BE8C' },
+        gold: { light: '#9A7B2E', dark: '#EBCB8B' },
+        rose: { light: '#A05A3F', dark: '#D08770' },
+        invert: { light: '#ECEFF4', dark: '#2E3440' },
+    },
+};
+/**
+ * Solarized, both halves.
+ *
+ * Solarized is the one palette here whose accents are deliberately identical
+ * in light and dark — that symmetry is the whole point of its design — so
+ * only the greys and the base background differ between the two variants.
+ */
+const solarized = {
+    name: 'solarized',
+    description: "Schoonover's balanced pairing; both variants share their accents",
+    colors: {
+        accent: { light: '#268BD2', dark: '#268BD2' },
+        muted: { light: '#93A1A1', dark: '#586E75' },
+        border: { light: '#EEE8D5', dark: '#073642' },
+        text: { light: '#586E75', dark: '#93A1A1' },
+        warn: { light: '#DC322F', dark: '#DC322F' },
+        ok: { light: '#2AA198', dark: '#2AA198' },
+        green: { light: '#859900', dark: '#859900' },
+        gold: { light: '#B58900', dark: '#B58900' },
+        rose: { light: '#CB4B16', dark: '#CB4B16' },
+        invert: { light: '#FDF6E3', dark: '#002B36' },
+    },
+};
+/**
+ * A greyscale, high-contrast palette for anyone the coloured ones fail.
+ *
+ * It trades the colour coding away rather than trying to keep it: every slot
+ * is a grey chosen for contrast against the base, and the semantic roles are
+ * separated by lightness alone. That loses the green-tick/red-cross reading
+ * at a glance, but the app never relies on colour by itself — a failed tool
+ * call still prints its own glyph and its error text — so what is left is
+ * legible where a hue-based palette is not.
+ */
+const mono = {
+    name: 'mono',
+    description: 'Greyscale, maximum contrast; no colour coding at all',
+    colors: {
+        accent: { light: '#000000', dark: '#FFFFFF' },
+        muted: { light: '#5A5A5A', dark: '#9A9A9A' },
+        border: { light: '#A6A6A6', dark: '#5F5F5F' },
+        text: { light: '#0D0D0D', dark: '#F2F2F2' },
+        warn: { light: '#000000', dark: '#FFFFFF' },
+        ok: { light: '#333333', dark: '#C8C8C8' },
+        green: { light: '#333333', dark: '#C8C8C8' },
+        gold: { light: '#1C1C1C', dark: '#E4E4E4' },
+        rose: { light: '#4A4A4A', dark: '#B4B4B4' },
+        invert: { light: '#FFFFFF', dark: '#000000' },
+    },
+};
+/** The name the app starts with when nothing has been chosen or persisted. */
+export const DEFAULT_THEME = 'rose-pine';
+/**
+ * The colours the exported constants in `theme.ts` are seeded with.
+ *
+ * They are seeded from the table rather than written out a second time so the
+ * default and the `rose-pine` entry cannot drift apart: if they did, `/theme
+ * rose-pine` would quietly stop being a way back to how the app started.
+ */
+export const DEFAULT_PALETTE = rosePine.colors;
+/**
+ * Every palette, in the order `/theme` lists them: the default first, then
+ * the rest alphabetically, with the accessibility option last so it reads as
+ * the deliberate escape hatch it is.
+ */
+export const THEMES = [rosePine, gruvbox, nord, solarized, mono];
+/** Look a palette up by name, or `undefined` when no such palette exists. */
+export function findTheme(name) {
+    const wanted = name.trim().toLowerCase();
+    return THEMES.find((theme) => theme.name === wanted);
+}

package/lib/tui/tooldetail.js

@@ -0,0 +1,140 @@
+/**
+ * What a tool call says about itself, and what came back.
+ *
+ * A tool row used to carry only the tool's name — `bash` four times over said
+ * nothing about what the agent was doing. The raw `arguments` JSON is already
+ * on the call (and its result already in the session log), so the readable
+ * summary is a pair of pure functions over strings: no Harness types, no I/O,
+ * replayable in a dependency-free suite next to the stream projection.
+ *
+ * @module moqi-tui/tui/tooldetail
+ */
+/** Stored detail/results are capped here; the renderer truncates to width. */
+const DETAIL_LIMIT = 200;
+/**
+ * Argument keys that name what a call does, most specific first. A tool's own
+ * key wins when present; otherwise the first string value speaks for the call.
+ */
+const PREFERRED_KEYS = [
+    'command',
+    'cmd',
+    'script',
+    'file_path',
+    'path',
+    'filePath',
+    'pattern',
+    'query',
+    'url',
+    'prompt',
+    'description',
+    'objective',
+    'content',
+    'name',
+];
+/** One line, whitespace folded, bounded. */
+function oneline(text) {
+    return text.replace(/\s+/g, ' ').trim().slice(0, DETAIL_LIMIT);
+}
+/**
+ * Summarize what a tool call does from its raw `arguments` JSON — the exact
+ * string the model produced, parsed leniently. `bash` becomes
+ * `bash  docker ps --format {{.Names}}`; a read becomes its path; anything
+ * unrecognized falls back to its first string-valued argument, then to the
+ * compact JSON, then to nothing rather than to noise.
+ */
+export function describeToolCall(name, rawArguments) {
+    if (rawArguments === undefined)
+        return '';
+    let parsed;
+    try {
+        parsed = JSON.parse(rawArguments);
+    }
+    catch {
+        return oneline(rawArguments);
+    }
+    if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        return typeof parsed === 'string' ? oneline(parsed) : '';
+    }
+    const record = parsed;
+    for (const key of PREFERRED_KEYS) {
+        const value = record[key];
+        if (typeof value === 'string' && value.trim() !== '')
+            return oneline(value);
+    }
+    for (const value of Object.values(record)) {
+        if (typeof value === 'string' && value.trim() !== '')
+            return oneline(value);
+    }
+    return '';
+}
+/**
+ * The one-line face of a tool result: its text content folded to a single
+ * line, or the failure's identity when the result block says the tool erred.
+ * `content` is the result block's content array; each text block contributes.
+ *
+ * @returns the summary, or `undefined` when the result says nothing readable.
+ */
+export function summarizeResult(content, error) {
+    const text = content
+        .map((block) => block?.text)
+        .filter((part) => typeof part === 'string')
+        .join(' ');
+    const line = oneline(text);
+    if (line !== '')
+        return line;
+    if (error !== undefined) {
+        const who = oneline([error.name, error.code].filter(Boolean).join(' '));
+        if (who !== '')
+            return who;
+    }
+    return undefined;
+}
+/**
+ * Fold one session-log event onto the live tool rows of the turn in flight.
+ *
+ * `tool/call` fills a row's detail (the deltas name it, the log says what it
+ * does); `tool/result` settles the row — `ok` or `error` — and attaches its
+ * outcome underneath the very call that produced it, in flow. Rows are keyed
+ * by call id and never created here: only stream deltas and block ends, which
+ * observe the same calls, add rows, so an event from an earlier turn logged
+ * before the sync point finds no row and is ignored.
+ */
+export function applyToolEvent(tools, event) {
+    const data = event.data;
+    if (data === undefined)
+        return;
+    if (event.type === 'tool/call') {
+        const row = tools.find((tool) => tool.id === String(data['callId']));
+        if (row === undefined)
+            return;
+        const name = typeof data['name'] === 'string' ? data['name'] : undefined;
+        if (row.name === 'tool' && name !== undefined)
+            row.name = name;
+        if (row.detail === undefined || row.detail === '') {
+            const detail = describeToolCall(name ?? row.name, str(data['arguments']));
+            if (detail !== '')
+                row.detail = detail;
+        }
+        return;
+    }
+    if (event.type === 'tool/result') {
+        const message = data['message'];
+        const block = Array.isArray(message?.content)
+            ? (message?.content)[0]
+            : undefined;
+        if (block === undefined)
+            return;
+        const row = tools.find((tool) => tool.id === String(block.toolCallId));
+        if (row === undefined)
+            return;
+        const error = data['error'];
+        row.status = block.isError === true || error !== undefined ? 'error' : 'ok';
+        const summary = summarizeResult(Array.isArray(block.content) ? block.content : [], error !== undefined ? error : undefined);
+        if (summary !== undefined)
+            row.result = summary;
+    }
+}
+/** `unknown` to `string | undefined`, the only coercion event fields need. */
+function str(value) {
+    return typeof value === 'string' ? value : undefined;
+}