kritya 0.8.2-beta

package/dist/ui/Markdown.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useStdout } from "ink";
+import stringWidth from "string-width";
+import { tokenizeLine } from "./highlight.js";
+import { parseInline, tokensWidth, wrapInline } from "./inline.js";
+import { parseMermaidTree, renderMermaidTree } from "./mermaid.js";
+import { terminalColumns } from "./viewport.js";
+import { COLUMN_GAP, columnWidths, detectTable, dropPartialTrailingTable, isTableRow, shouldStack, } from "./table.js";
+const TOKEN_COLORS = {
+    keyword: "magenta",
+    string: "green",
+    comment: "gray",
+    number: "cyan",
+    plain: undefined,
+};
+function CodeLine({ line }) {
+    if (!line)
+        return _jsx(Text, { children: " " });
+    return (_jsx(Text, { children: tokenizeLine(line).map((t, i) => (_jsx(Text, { color: TOKEN_COLORS[t.kind], bold: t.kind === "keyword", children: t.text }, i))) }));
+}
+function Inline({ tokens }) {
+    if (!tokens.length)
+        return _jsx(_Fragment, { children: " " });
+    return (_jsx(_Fragment, { children: tokens.map((t, i) => (_jsx(Text, { bold: t.bold, italic: t.italic, dimColor: t.dim, color: t.code ? "yellow" : undefined, children: t.text }, i))) }));
+}
+function InlineText({ text, ...style }) {
+    return (_jsx(Text, { ...style, children: _jsx(Inline, { tokens: parseInline(text) }) }));
+}
+/** Wrapped text with a marker on the first line and a hanging indent under it. */
+function Marked({ text, width, marker, indent, ...style }) {
+    const lines = wrapInline(text, width - stringWidth(marker));
+    return (_jsx(Box, { flexDirection: "column", children: lines.map((tokens, i) => (_jsxs(Text, { ...style, children: [i === 0 ? marker : indent, _jsx(Inline, { tokens: tokens })] }, i))) }));
+}
+/**
+ * Minimal terminal markdown: fenced code blocks (syntax-highlighted), headers,
+ * bullets, quotes, rules, tables, and inline emphasis. Deliberately
+ * lightweight — not a full implementation.
+ */
+export function Markdown({ text, streaming = false }) {
+    const { stdout } = useStdout();
+    const width = Math.max(20, terminalColumns(stdout) - 2);
+    const blocks = React.useMemo(() => renderBlocks(text, width, streaming), [text, width, streaming]);
+    return _jsx(Box, { flexDirection: "column", children: blocks });
+}
+function renderBlocks(text, width, streaming) {
+    let lines = text.split("\n");
+    if (streaming && !hasOpenFence(lines))
+        lines = dropPartialTrailingTable(lines);
+    const blocks = [];
+    let inCode = false;
+    let codeLang = "";
+    let codeLines = [];
+    let key = 0;
+    const flushCode = () => {
+        if (!codeLines.length)
+            return;
+        if (codeLang === "mermaid") {
+            const tree = parseMermaidTree(codeLines);
+            if (tree) {
+                const treeLines = renderMermaidTree(tree);
+                blocks.push(_jsx(Box, { flexDirection: "column", children: treeLines.map((l, i) => (_jsx(Text, { children: l }, i))) }, key++));
+                codeLines = [];
+                return;
+            }
+        }
+        // Size the frame to the code, not to the terminal — a two-line snippet
+        // in a wide terminal was drawing a box the full width of the screen.
+        const longest = Math.max(...codeLines.map((l) => stringWidth(l)));
+        blocks.push(_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, width: Math.min(width, longest + 4), children: codeLines.map((l, i) => (_jsx(CodeLine, { line: l }, i))) }, key++));
+        codeLines = [];
+    };
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line.trimStart().startsWith("```")) {
+            if (inCode) {
+                flushCode();
+            }
+            else {
+                codeLang = line.trim().slice(3).trim().toLowerCase();
+            }
+            inCode = !inCode;
+            continue;
+        }
+        if (inCode) {
+            codeLines.push(line);
+            continue;
+        }
+        if (isTableRow(line)) {
+            const found = detectTable(lines, i);
+            if (found) {
+                blocks.push(_jsx(TableBlock, { table: found.table, width: width }, key++));
+                i = found.next - 1;
+                continue;
+            }
+        }
+        if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+            blocks.push(_jsx(Text, { dimColor: true, children: "─".repeat(width) }, key++));
+        }
+        else if (/^#{1,6}\s/.test(line)) {
+            blocks.push(_jsx(InlineText, { text: line.replace(/^#{1,6}\s/, ""), bold: true, color: "magenta" }, key++));
+        }
+        else if (/^\s*>\s?/.test(line)) {
+            blocks.push(_jsx(Marked, { text: line.replace(/^\s*>\s?/, ""), width: width, marker: "\u2502 ", indent: "\u2502 ", dimColor: true }, key++));
+        }
+        else if (/^\s*[-*]\s/.test(line)) {
+            const [, pad, rest] = /^(\s*)[-*]\s+([\s\S]*)$/.exec(line);
+            blocks.push(_jsx(Marked, { text: rest, width: width, marker: `${pad}• `, indent: `${pad}  ` }, key++));
+        }
+        else if (/^\s*\d{1,3}[.)]\s/.test(line)) {
+            const [, pad, number, rest] = /^(\s*)(\d{1,3}[.)])\s+([\s\S]*)$/.exec(line);
+            blocks.push(_jsx(Marked, { text: rest, width: width, marker: `${pad}${number} `, indent: `${pad}${" ".repeat(number.length + 1)}` }, key++));
+        }
+        else {
+            // Paragraphs wrap through the same path as everything else: Ink's own
+            // wrapping carries the break's space onto the next line, which shows up
+            // as a stray leading space at column zero.
+            const [, pad, rest] = /^(\s*)([\s\S]*)$/.exec(line);
+            blocks.push(_jsx(Marked, { text: rest || " ", width: width, marker: pad, indent: pad }, key++));
+        }
+    }
+    if (inCode)
+        flushCode();
+    return blocks;
+}
+function hasOpenFence(lines) {
+    return lines.filter((l) => l.trimStart().startsWith("```")).length % 2 === 1;
+}
+function TableBlock({ table, width }) {
+    if (shouldStack(table, width))
+        return _jsx(StackedTable, { table: table, width: width });
+    const widths = columnWidths(table, width);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Row, { cells: table.header, widths: widths, align: table.align, bold: true }), _jsx(Text, { dimColor: true, children: widths.map((w) => "─".repeat(w)).join(" ".repeat(COLUMN_GAP)) }), table.rows.map((cells, i) => (_jsx(Row, { cells: cells, widths: widths, align: table.align }, i)))] }));
+}
+function Row({ cells, widths, align, bold, }) {
+    const wrapped = widths.map((w, i) => wrapInline(cells[i] ?? "", w));
+    const height = Math.max(1, ...wrapped.map((lines) => lines.length));
+    return (_jsx(Box, { flexDirection: "row", children: wrapped.map((lines, col) => (_jsx(Box, { flexDirection: "column", width: widths[col], marginRight: col < widths.length - 1 ? COLUMN_GAP : 0, children: Array.from({ length: height }, (_, r) => {
+                const tokens = lines[r] ?? [];
+                const pad = Math.max(0, widths[col] - tokensWidth(tokens));
+                const lead = align[col] === "right" ? pad : align[col] === "center" ? Math.floor(pad / 2) : 0;
+                return (_jsxs(Text, { bold: bold, wrap: "truncate", children: [lead ? " ".repeat(lead) : "", tokens.length ? _jsx(Inline, { tokens: tokens }) : " "] }, r));
+            }) }, col))) }));
+}
+/** Too narrow (or too many columns) for a grid: one labelled block per row. */
+function StackedTable({ table, width }) {
+    return (_jsx(Box, { flexDirection: "column", children: table.rows.map((cells, i) => (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: cells.map((cell, col) => cell ? (_jsxs(Box, { flexDirection: "column", children: [table.header[col] ? _jsx(InlineText, { text: table.header[col], bold: true }) : null, wrapInline(cell, Math.max(1, width - 2)).map((tokens, r) => (_jsxs(Text, { children: ["  ", _jsx(Inline, { tokens: tokens })] }, r)))] }, col)) : null) }, i))) }));
+}

package/dist/ui/McpTrustPrompt.js

@@ -0,0 +1,42 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text } from "ink";
+import { SelectList } from "./SelectList.js";
+/**
+ * First-use approval for servers declared by the workspace's .mcp.json.
+ *
+ * Deliberately one server at a time. Approving the whole file as a batch means
+ * that a branch adding a useful server and a hostile one offers only "both" or
+ * "neither" — and someone who wants the useful one takes both. Per-server, the
+ * hostile one can be refused on its own, so the safe answer stops costing
+ * anything.
+ */
+function targetFor(cfg) {
+    return cfg.url ?? [cfg.command, ...(cfg.args ?? [])].filter(Boolean).join(" ");
+}
+export function McpTrustPrompt({ servers, onComplete, }) {
+    const names = Object.keys(servers);
+    const [index, setIndex] = useState(0);
+    const [approved, setApproved] = useState([]);
+    const name = names[index];
+    const cfg = servers[name];
+    const isRemote = Boolean(cfg.url);
+    const decide = (trust) => {
+        const next = trust ? [...approved, name] : approved;
+        if (index + 1 < names.length) {
+            setApproved(next);
+            setIndex(index + 1);
+        }
+        else {
+            onComplete(next);
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["New MCP server", names.length > 1 ? ` (${index + 1} of ${names.length})` : ""] }), _jsx(Text, { children: "This workspace's .mcp.json declares a server not previously approved. It will run as a child process (or contact a remote endpoint) with your credentials, and its tools may be called automatically. Review before trusting." }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: name }), _jsx(Text, { dimColor: true, children: targetFor(cfg) }), isRemote ? (_jsx(Text, { color: "yellow", children: "\u26A0 remote endpoint \u2014 requests, and any token you hold for it, leave this machine" })) : null, cfg.cwd ? _jsxs(Text, { dimColor: true, children: ["runs in: ", cfg.cwd] }) : null] }), _jsx(Box, { marginTop: 1, children: _jsx(SelectList
+                // Keyed by name so the highlight resets to the top for each server:
+                // holding Enter through a list shouldn't carry a "trust" choice
+                // forward onto a server the user hasn't looked at.
+                , { items: [
+                        { label: `Trust and load "${name}"`, value: "trust" },
+                        { label: "Don't trust (skip it this session)", value: "no" },
+                    ], onSelect: (v) => decide(v === "trust"), onCancel: () => onComplete(approved) }, name) })] }));
+}

package/dist/ui/ModelPicker.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { CURATED_MODELS } from "../config/models.js";
+import { SelectList } from "./SelectList.js";
+export function ModelPicker({ current, customModels, onSelect, onCancel, }) {
+    const items = [
+        ...CURATED_MODELS.map((m) => ({
+            label: m.label + (m.id === current ? " (current)" : ""),
+            value: m.id,
+            hint: m.note ? `${m.id} · ${m.note}` : m.id,
+        })),
+        ...customModels.map((m) => ({
+            label: (m.label ?? m.id) + (m.id === current ? " (current)" : ""),
+            value: m.id,
+            hint: `${m.id} · custom`,
+        })),
+    ];
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "magenta", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "magenta", children: ["Select model", " ", _jsx(Text, { dimColor: true, children: "(Esc to cancel, or /model <id> for any NVIDIA model)" })] }), _jsx(SelectList, { items: items, onSelect: onSelect, onCancel: onCancel })] }));
+}

package/dist/ui/PermissionPrompt.js

@@ -0,0 +1,27 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { SelectList } from "./SelectList.js";
+const MAX_DIFF_LINES = 30;
+export function PermissionPrompt({ toolName, summary, diff, warning, onDecision, }) {
+    useInput((input) => {
+        const c = input.toLowerCase();
+        if (c === "y")
+            onDecision("yes");
+        else if (c === "a" && !warning)
+            onDecision("always");
+        else if (c === "n")
+            onDecision("no");
+    });
+    const diffLines = diff ? diff.split("\n") : [];
+    const shown = diffLines.slice(0, MAX_DIFF_LINES);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: warning ? "red" : "yellow", paddingX: 1, children: [_jsxs(Text, { bold: true, color: warning ? "red" : "yellow", children: [warning ? "⚠ Dangerous command" : "Permission required", ": ", toolName] }), warning && _jsxs(Text, { color: "red", children: ["This looks like ", warning, ". Review carefully."] }), _jsx(Text, { children: summary }), shown.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [shown.map((line, i) => (_jsx(Text, { color: line.startsWith("+") ? "green" : line.startsWith("-") ? "red" : undefined, dimColor: !line.startsWith("+") && !line.startsWith("-"), children: line || " " }, i))), diffLines.length > MAX_DIFF_LINES && (_jsxs(Text, { dimColor: true, children: ["\u2026 (", diffLines.length - MAX_DIFF_LINES, " more lines)"] }))] })), _jsx(Box, { marginTop: 1, children: _jsx(SelectList, { items: warning
+                        ? [
+                            { label: "Yes, run it once (y)", value: "yes" },
+                            { label: "No (n)", value: "no" },
+                        ]
+                        : [
+                            { label: "Yes (y)", value: "yes" },
+                            { label: `Yes, always allow ${toolName} this session (a)`, value: "always" },
+                            { label: "No (n)", value: "no" },
+                        ], onSelect: (v) => onDecision(v), onCancel: () => onDecision("no") }) })] }));
+}

package/dist/ui/SelectList.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+export function SelectList({ items, onSelect, onCancel, }) {
+    const [rawIndex, setIndex] = useState(0);
+    // Items can shrink under us (e.g. a live filter above the list).
+    const index = items.length ? Math.min(rawIndex, items.length - 1) : 0;
+    useInput((_input, key) => {
+        if (!items.length) {
+            if (key.escape && onCancel)
+                onCancel();
+            return;
+        }
+        if (key.upArrow)
+            setIndex((index - 1 + items.length) % items.length);
+        else if (key.downArrow)
+            setIndex((index + 1) % items.length);
+        else if (key.return)
+            onSelect(items[index].value);
+        else if (key.escape && onCancel)
+            onCancel();
+    });
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item, i) => (_jsxs(Text, { color: i === index ? "green" : undefined, children: [i === index ? "❯ " : "  ", item.label, item.hint ? _jsxs(Text, { dimColor: true, children: [" \u2014 ", item.hint] }) : null] }, item.value))) }));
+}

package/dist/ui/Spinner.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Text } from "ink";
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export function Spinner({ label }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), 80);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsxs(Text, { color: "yellow", children: [FRAMES[frame], " ", _jsx(Text, { dimColor: true, children: label })] }));
+}

package/dist/ui/StatusLine.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import path from "node:path";
+/** The single dim status bar pinned to the bottom of the screen. */
+export function StatusLine({ killed, killReason, dryRunMode, planMode, acceptEdits, autoApprovedCount, model, workflow, branch, tasks, ctxPct, budgetPct, budgetStopped, phase, elapsed, totalUsage, totalCost, verbose, workspace, }) {
+    return (_jsxs(Text, { dimColor: true, children: [killed ? (_jsxs(Text, { bold: true, color: "red", children: ["\u26D4 KILLED", killReason ? ` (${killReason})` : "", " \u00B7", " "] })) : (""), dryRunMode ? (_jsx(Text, { color: "cyan", children: "dry-run \u00B7 " })) : planMode ? (_jsx(Text, { color: "cyan", children: "plan \u00B7 " })) : acceptEdits ? (_jsxs(Text, { color: "green", children: ["accept edits (", autoApprovedCount, " auto-approved) \u00B7 "] })) : (""), model, workflow ? (_jsxs(Text, { color: "magenta", children: [" ", "\u00B7 \u2691 ", workflow.name, ":", workflow.phase] })) : (""), branch ? ` · ⎇ ${branch}` : "", tasks.length > 0
+                ? ` · tasks ${tasks.filter((t) => t.status === "done").length}/${tasks.length}`
+                : "", ctxPct > 0 ? ` · ctx ${ctxPct}%` : "", budgetPct > 0 ? (_jsxs(Text, { color: budgetStopped ? "red" : budgetPct >= 80 ? "yellow" : undefined, children: [" ", "\u00B7 budget ", budgetPct, "%"] })) : (""), phase === "working" && elapsed > 0 ? ` · ${elapsed}s` : "", " \u00B7", " ", totalUsage.estimated ? "~" : "", totalUsage.promptTokens.toLocaleString(), " in", (totalUsage.cachedPromptTokens ?? 0) > 0
+                ? ` (${Math.round(((totalUsage.cachedPromptTokens ?? 0) / totalUsage.promptTokens) * 100)}% cached)`
+                : "", " ", "/ ", totalUsage.completionTokens.toLocaleString(), " out", totalCost > 0 ? ` · $${totalCost.toFixed(4)}` : "", verbose ? " · verbose" : "", " \u00B7 ", path.basename(workspace)] }));
+}

package/dist/ui/TranscriptItem.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { Banner } from "./Banner.js";
+import { Markdown } from "./Markdown.js";
+import { toolOutputPreview } from "./toolOutputPreview.js";
+import { terminalColumns } from "./viewport.js";
+/** Renders one line of the transcript — a user message, assistant reply, tool call, info line, or banner. */
+export function TranscriptItem({ item, verbose, stdout }) {
+    return (_jsxs(Box, { marginBottom: item.kind === "tool" ? 0 : 1, flexDirection: "column", children: [item.kind === "user" && (_jsxs(Text, { children: [_jsxs(Text, { bold: true, color: "green", children: ["\u276F", " "] }), item.text] })), item.kind === "assistant" && _jsx(Markdown, { text: item.text }), item.kind === "tool" && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [item.error ? _jsx(Text, { color: "red", children: "\u2717" }) : _jsx(Text, { color: "green", children: "\u2713" }), " ", item.summary, item.resultSummary && !verbose ? ` — ${item.resultSummary}` : ""] }), item.output && item.output.trim() && (item.resultSummary === undefined || verbose) && (_jsx(Text, { dimColor: true, children: toolOutputPreview(item.output, verbose, Math.max(20, terminalColumns(stdout) - 6), item.error)
+                            .split("\n")
+                            .map((l) => `    ${l}`)
+                            .join("\n") }))] })), item.kind === "info" && _jsx(Text, { dimColor: true, children: item.text }), item.kind === "banner" && _jsx(Banner, { subtitle: item.subtitle })] }));
+}

package/dist/ui/TrustPrompt.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { SelectList } from "./SelectList.js";
+const MAX_PREVIEW_LINES = 40;
+export function TrustPrompt({ workspace, preview, onDecision, }) {
+    const lines = preview.split("\n");
+    const shown = lines.slice(0, MAX_PREVIEW_LINES);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "Untrusted workspace settings" }), _jsxs(Text, { children: [workspace, " ships content that would take effect automatically: settings `allow` rules or `hooks`, a `.env` file, and/or custom slash commands. Everything you would be approving is shown below \u2014 review it before trusting this workspace."] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [shown.map((line, i) => (_jsx(Text, { dimColor: true, children: line || " " }, i))), lines.length > MAX_PREVIEW_LINES && (_jsxs(Text, { dimColor: true, children: ["\u2026 (", lines.length - MAX_PREVIEW_LINES, " more lines)"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(SelectList, { items: [
+                        { label: "Trust this workspace", value: "trust" },
+                        { label: "Don't trust (just this session)", value: "no" },
+                    ], onSelect: (v) => onDecision(v === "trust"), onCancel: () => onDecision(false) }) })] }));
+}

package/dist/ui/highlight.js

@@ -0,0 +1,137 @@
+// Shared keyword set across the languages an agent CLI shows most:
+// TS/JS, Python, Go, Rust, Java, shell.
+const KEYWORDS = new Set([
+    "const",
+    "let",
+    "var",
+    "function",
+    "def",
+    "class",
+    "if",
+    "else",
+    "elif",
+    "for",
+    "while",
+    "return",
+    "import",
+    "from",
+    "export",
+    "async",
+    "await",
+    "try",
+    "catch",
+    "except",
+    "finally",
+    "new",
+    "type",
+    "interface",
+    "enum",
+    "struct",
+    "impl",
+    "fn",
+    "pub",
+    "match",
+    "switch",
+    "case",
+    "break",
+    "continue",
+    "true",
+    "false",
+    "null",
+    "None",
+    "nil",
+    "undefined",
+    "this",
+    "self",
+    "static",
+    "void",
+    "public",
+    "private",
+    "extends",
+    "implements",
+    "lambda",
+    "yield",
+    "in",
+    "of",
+    "not",
+    "and",
+    "or",
+    "package",
+    "func",
+    "go",
+    "chan",
+    "defer",
+    "then",
+    "fi",
+    "do",
+    "done",
+    "echo",
+]);
+const WORD_RE = /[A-Za-z_$][A-Za-z0-9_$]*/y;
+const NUMBER_RE = /\d[\d_]*(\.\d+)?([eE][+-]?\d+)?[a-zA-Z]*/y;
+/**
+ * Language-agnostic single-line tokenizer for terminal syntax highlighting.
+ * Strings win over comments (a "//" inside quotes is not a comment); block
+ * comments are approximated as line comments.
+ */
+export function tokenizeLine(line) {
+    const tokens = [];
+    let plain = "";
+    const flush = () => {
+        if (plain) {
+            tokens.push({ text: plain, kind: "plain" });
+            plain = "";
+        }
+    };
+    let i = 0;
+    while (i < line.length) {
+        const ch = line[i];
+        if (ch === '"' || ch === "'" || ch === "`") {
+            flush();
+            let j = i + 1;
+            while (j < line.length && line[j] !== ch) {
+                if (line[j] === "\\")
+                    j++;
+                j++;
+            }
+            j = Math.min(j + 1, line.length);
+            tokens.push({ text: line.slice(i, j), kind: "string" });
+            i = j;
+            continue;
+        }
+        if ((ch === "/" && (line[i + 1] === "/" || line[i + 1] === "*")) || ch === "#") {
+            flush();
+            tokens.push({ text: line.slice(i), kind: "comment" });
+            break;
+        }
+        if (/[A-Za-z_$]/.test(ch)) {
+            WORD_RE.lastIndex = i;
+            const m = WORD_RE.exec(line);
+            flush();
+            tokens.push({ text: m[0], kind: KEYWORDS.has(m[0]) ? "keyword" : "plain" });
+            i += m[0].length;
+            continue;
+        }
+        if (/\d/.test(ch)) {
+            NUMBER_RE.lastIndex = i;
+            const m = NUMBER_RE.exec(line);
+            flush();
+            tokens.push({ text: m[0], kind: "number" });
+            i += m[0].length;
+            continue;
+        }
+        plain += ch;
+        i++;
+    }
+    flush();
+    // Merge adjacent plain tokens (word followed by punctuation, etc.).
+    const merged = [];
+    for (const t of tokens) {
+        const last = merged[merged.length - 1];
+        if (last && last.kind === "plain" && t.kind === "plain")
+            last.text += t.text;
+        else
+            merged.push({ ...t });
+    }
+    return merged;
+}