s-app-scoder-agent 0.9.2 → 0.9.6

package/dist/tui/markdown/parse.js

@@ -0,0 +1,139 @@
+import { splitOutsideCodeSpans } from "./inline.js";
+const TABLE_CELL_RX = /^\s*\|.*\|\s*$/;
+const TABLE_SEP_RX = /^\s*\|[\s:|-]+\|\s*$/;
+const HR_RX = /^\s*(-{3,}|\*{3,}|_{3,})\s*$/;
+/** Split one table row into cells: \| escapes and `code|spans` are safe. */
+export function parseTableRow(line) {
+    const trimmed = line.trim().replace(/^\|/, "").replace(/\|$/, "");
+    return splitOutsideCodeSpans(trimmed, "|").map((c) => c.trim());
+}
+/** Parse the GFM separator row (`:---`, `:--:`, `--:`) into alignments. */
+export function parseTableAlign(line) {
+    return parseTableRow(line).map((cell) => {
+        const c = cell.replace(/\s/g, "");
+        const left = c.startsWith(":");
+        const right = c.endsWith(":");
+        if (left && right)
+            return "center";
+        if (right)
+            return "right";
+        return "left";
+    });
+}
+/** Fenced code block (```lang … ```) — EOF closes an unclosed fence. */
+const matchFence = (lines, i) => {
+    if (!lines[i].startsWith("```"))
+        return null;
+    const lang = lines[i].slice(3).trim().toLowerCase();
+    const code = [];
+    let j = i + 1;
+    while (j < lines.length && !lines[j].startsWith("```"))
+        code.push(lines[j++]);
+    j++; // consume closing fence (or EOF)
+    let block;
+    if (lang === "mermaid" && code.length > 0)
+        block = { kind: "mermaid", lines: code };
+    else if ((lang === "chart" || lang.startsWith("chart:")) && code.length > 0)
+        block = { kind: "chart", lang, source: code.join("\n") };
+    else if ((lang === "timeline" || lang === "events") && code.length > 0)
+        block = { kind: "timeline", source: code.join("\n") };
+    else
+        block = { kind: "code", lang, lines: code };
+    return { blocks: [block], next: j };
+};
+const matchHeading = (lines, i) => {
+    const h = /^(#{1,6})\s+(.*)$/.exec(lines[i]);
+    if (!h)
+        return null;
+    return { blocks: [{ kind: "heading", level: h[1].length, text: h[2].trim() }], next: i + 1 };
+};
+const matchHr = (lines, i) => HR_RX.test(lines[i]) ? { blocks: [{ kind: "hr" }], next: i + 1 } : null;
+/** GFM table: header row | separator row (with alignment) | body rows. */
+const matchTable = (lines, i) => {
+    if (!TABLE_CELL_RX.test(lines[i]))
+        return null;
+    if (i + 1 >= lines.length || !TABLE_SEP_RX.test(lines[i + 1]))
+        return null;
+    const header = parseTableRow(lines[i]);
+    const align = parseTableAlign(lines[i + 1]);
+    let j = i + 2;
+    const rows = [];
+    while (j < lines.length && TABLE_CELL_RX.test(lines[j]))
+        rows.push(parseTableRow(lines[j++]));
+    return { blocks: [{ kind: "table", header, align, rows }], next: j };
+};
+function parseListItem(line) {
+    const bullet = /^(\s*)[-*]\s+(.*)$/.exec(line);
+    if (bullet) {
+        const depth = Math.floor(bullet[1].replace(/\t/g, "  ").length / 2);
+        const body = bullet[2];
+        const task = /^\[([ xX])\]\s+(.*)$/.exec(body);
+        if (task) {
+            return { depth, marker: null, checked: task[1].toLowerCase() === "x", text: task[2] };
+        }
+        return { depth, marker: null, text: body };
+    }
+    const numbered = /^(\s*)(\d+\.)\s+(.*)$/.exec(line);
+    if (numbered) {
+        const depth = Math.floor(numbered[1].replace(/\t/g, "  ").length / 2);
+        return { depth, marker: numbered[2], text: numbered[3] };
+    }
+    return null;
+}
+/** Consecutive list items (bullets, task lists, numbered) → one list block. */
+const matchList = (lines, i) => {
+    if (!parseListItem(lines[i]))
+        return null;
+    const items = [];
+    let j = i;
+    while (j < lines.length) {
+        const item = parseListItem(lines[j]);
+        if (!item)
+            break;
+        items.push(item);
+        j++;
+    }
+    return { blocks: [{ kind: "list", items }], next: j };
+};
+/** Consecutive `>` lines → one quote block. */
+const matchQuote = (lines, i) => {
+    if (!/^>\s?/.test(lines[i]))
+        return null;
+    const quoted = [];
+    let j = i;
+    while (j < lines.length && /^>\s?/.test(lines[j]))
+        quoted.push(lines[j++].replace(/^>\s?/, ""));
+    return { blocks: [{ kind: "quote", text: quoted.join("\n") }], next: j };
+};
+const MATCHERS = [matchFence, matchHeading, matchHr, matchTable, matchList, matchQuote];
+/** Parse markdown text into blocks. Never throws — unknown input → paragraph. */
+export function parseMarkdown(text) {
+    const lines = text.split("\n");
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Blank line → single spacer (collapsed).
+        if (line.trim() === "") {
+            if (blocks.length > 0 && blocks[blocks.length - 1].kind !== "spacer") {
+                blocks.push({ kind: "spacer" });
+            }
+            i++;
+            continue;
+        }
+        let matched = null;
+        for (const matcher of MATCHERS) {
+            matched = matcher(lines, i);
+            if (matched)
+                break;
+        }
+        if (matched) {
+            blocks.push(...matched.blocks);
+            i = matched.next;
+            continue;
+        }
+        blocks.push({ kind: "paragraph", text: line });
+        i++;
+    }
+    return blocks;
+}

package/dist/tui/markdown/render.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Block AST → Ink elements. All layout decisions (clip/pad/wrap) go through
+ * text-width.ts so borders and columns stay aligned with Unicode content.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { theme } from "../theme.js";
+import { boxBorderStyle, charset } from "../charset.js";
+import { measure, wrapCells } from "../text-width.js";
+import { renderInline } from "./inline-render.js";
+import { TableView } from "./table.js";
+import { ChartPreview, MermaidPreview, TimelinePreview, parseChartSpec, parseTimelineSpec, } from "./diagram.js";
+const MAX_CODE_LINES = 60;
+// ── Syntax highlighting (JS/TS/JSON/shell keyword sets) ─────────────────────
+const KEYWORDS = new Set(["const", "let", "var", "function", "async", "await", "return",
+    "if", "else", "for", "while", "do", "switch", "case", "break", "continue",
+    "try", "catch", "finally", "throw", "class", "extends", "import", "export",
+    "from", "default", "new", "typeof", "instanceof", "void", "in", "of",
+    "interface", "type", "enum", "implements", "private", "public", "protected",
+    "readonly", "abstract", "override", "declare", "namespace", "module"]);
+const TYPE_KEYWORDS = new Set(["string", "number", "boolean", "any", "unknown", "never",
+    "null", "undefined", "void", "object", "true", "false", "Promise", "Array",
+    "Record", "Partial", "Required", "Omit", "Pick", "keyof", "infer"]);
+/**
+ * Highlight one logical line. `inBlockComment` carries multi-line comment
+ * state across lines (returned so the caller can thread it through the block).
+ * Node keys derive from nodes.length — no separate counter.
+ */
+function highlightLine(line, inBlockComment) {
+    const nodes = [];
+    const keyed = (color, text, bold = false) => {
+        nodes.push(_jsx(Text, { color: color, bold: bold, children: text }, `n${nodes.length}`));
+    };
+    if (inBlockComment) {
+        const end = line.indexOf("*/");
+        if (end === -1) {
+            return { nodes: [_jsx(Text, { color: theme.thinking, children: line }, "bc")], inBlockComment: true };
+        }
+        keyed(theme.thinking, line.slice(0, end + 2));
+        const rest = highlightLine(line.slice(end + 2), false);
+        nodes.push(...rest.nodes.map((n, i) => (typeof n === "object" && n !== null ? React.cloneElement(n, { key: `r${i}` }) : n)));
+        return { nodes, inBlockComment: false };
+    }
+    const re = /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\/\/[^\n]*|\/\*[\s\S]*?(?:\*\/|$))|(\b0x[\da-fA-F]+|\d+\.?\d*(?:[eE][+-]?\d+)?\b)|(\w+)/g;
+    let last = 0;
+    let openComment = false;
+    for (const m of line.matchAll(re)) {
+        if (m.index > last)
+            nodes.push(line.slice(last, m.index));
+        const tok = m[0];
+        if (m[1])
+            keyed(theme.code, tok);
+        else if (m[2]) {
+            keyed(theme.thinking, tok);
+            if (tok.startsWith("/*") && !tok.endsWith("*/"))
+                openComment = true;
+        }
+        else if (m[3])
+            keyed("magenta", tok);
+        else if (KEYWORDS.has(tok))
+            keyed("cyan", tok, true);
+        else if (TYPE_KEYWORDS.has(tok))
+            keyed("yellow", tok);
+        else
+            nodes.push(tok);
+        last = m.index + tok.length;
+    }
+    if (last < line.length)
+        nodes.push(line.slice(last));
+    return { nodes, inBlockComment: openComment };
+}
+// ── Block renderers ──────────────────────────────────────────────────────────
+function CodeBlock({ lang, lines, width }) {
+    const gutter = String(Math.min(lines.length, MAX_CODE_LINES)).length;
+    const codeWidth = Math.max(8, width - gutter - 6); // gutter + "│ " + border + padding
+    const shown = lines.slice(0, MAX_CODE_LINES);
+    const elements = [];
+    let inBlockComment = false;
+    shown.forEach((sourceLine, i) => {
+        const wrapped = wrapCells(sourceLine === "" ? " " : sourceLine, codeWidth);
+        wrapped.forEach((segment, wi) => {
+            const hl = highlightLine(segment, inBlockComment);
+            inBlockComment = hl.inBlockComment;
+            elements.push(_jsxs(Text, { children: [wi === 0
+                        ? _jsxs(Text, { dimColor: true, children: [String(i + 1).padStart(gutter, " "), " ", charset.v, " "] })
+                        : _jsxs(Text, { dimColor: true, children: [" ".repeat(gutter), " ", charset.cont, " "] }), hl.nodes] }, `${i}-${wi}`));
+        });
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: boxBorderStyle(), borderColor: theme.border, paddingX: 1, marginTop: 1, children: [lang && _jsx(Text, { dimColor: true, bold: true, children: lang }), lines.length === 0 ? _jsx(Text, { dimColor: true, children: "(empty)" }) : elements, lines.length > MAX_CODE_LINES && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", lines.length - MAX_CODE_LINES, " more lines (omitted)"] }))] }));
+}
+function ListBlock({ items, width }) {
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item, i) => {
+            const indent = "  ".repeat(item.depth);
+            const marker = item.checked !== undefined
+                ? (item.checked ? `${charset.taskDone} ` : `${charset.taskTodo} `)
+                : item.marker
+                    ? `${item.marker} `
+                    : `${charset.bullet} `;
+            const prefixWidth = measure(indent + marker);
+            const bodyWidth = Math.max(8, width - prefixWidth);
+            const wrappedLines = wrapCells(item.text, bodyWidth);
+            return (_jsx(Box, { flexDirection: "column", children: wrappedLines.map((l, wi) => (_jsxs(Text, { children: [wi === 0 ? (_jsxs(Text, { color: item.marker ? "cyan" : theme.accent, children: [indent, marker] })) : (_jsx(Text, { children: " ".repeat(prefixWidth) })), item.checked
+                            ? _jsx(Text, { dimColor: true, strikethrough: true, children: renderInline(l, `l${i}-${wi}`) })
+                            : renderInline(l, `l${i}-${wi}`)] }, wi))) }, i));
+        }) }));
+}
+function QuoteBlock({ text, width }) {
+    const bodyWidth = Math.max(8, width - 2);
+    return (_jsx(Box, { flexDirection: "column", children: text.split("\n").flatMap((line, li) => wrapCells(line, bodyWidth).map((segment, wi) => (_jsxs(Text, { dimColor: true, children: [_jsxs(Text, { color: theme.dim, children: [charset.v, " "] }), _jsx(Text, { italic: true, children: renderInline(segment, `q${li}-${wi}`) })] }, `${li}-${wi}`)))) }));
+}
+/** Render one block; returns null for spacers handled by margin. */
+export function renderBlock(block, width, key) {
+    switch (block.kind) {
+        case "spacer":
+            return _jsx(Text, { children: " " }, key);
+        case "hr":
+            return _jsx(Text, { dimColor: true, children: charset.h.repeat(Math.min(width, 60)) }, key);
+        case "heading":
+            return (_jsx(Text, { bold: true, color: block.level <= 2 ? "magenta" : "cyan", children: renderInline(block.text, `h${key}`) }, key));
+        case "paragraph":
+            return (_jsx(Box, { flexDirection: "column", children: wrapCells(block.text, width).map((l, wi) => (_jsx(Text, { children: renderInline(l, `p${key}-${wi}`) }, wi))) }, key));
+        case "code":
+            return _jsx(CodeBlock, { lang: block.lang, lines: block.lines, width: width }, key);
+        case "table":
+            return _jsx(TableView, { header: block.header, align: block.align, rows: block.rows, width: width }, key);
+        case "list":
+            return _jsx(ListBlock, { items: block.items, width: width }, key);
+        case "quote":
+            return _jsx(QuoteBlock, { text: block.text, width: width }, key);
+        case "mermaid":
+            return (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(MermaidPreview, { source: block.lines, width: width }) }, key));
+        case "chart": {
+            const chart = parseChartSpec(block.source, block.lang);
+            return chart
+                ? _jsx(Box, { flexDirection: "column", children: _jsx(ChartPreview, { spec: chart, width: width }) }, key)
+                : _jsx(Text, { dimColor: true, children: "  (invalid chart data)" }, key);
+        }
+        case "timeline": {
+            const events = parseTimelineSpec(block.source);
+            return events.length > 0
+                ? _jsx(Box, { flexDirection: "column", children: _jsx(TimelinePreview, { events: events, width: width }) }, key)
+                : _jsx(Text, { dimColor: true, children: "  (empty timeline)" }, key);
+        }
+    }
+}

package/dist/tui/markdown/table.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "../theme.js";
+import { charset } from "../charset.js";
+import { clipCells, measure, padEndCells, padStartCells, wrapCells } from "../text-width.js";
+import { inlineToPlain } from "./inline.js";
+import { renderInline } from "./inline-render.js";
+const MAX_CELL = 40;
+const MIN_CELL = 4;
+const MAX_ROWS = 50;
+/** Below this pane width (or when columns can't fit even at MIN_CELL), degrade. */
+const MIN_TABLE_WIDTH = 28;
+/** Pad a plain-text cell per alignment; returns text of exactly `width` cells. */
+function alignCell(plain, width, align) {
+    const clipped = clipCells(plain, width);
+    const missing = width - measure(clipped);
+    if (missing <= 0)
+        return clipped;
+    if (align === "right")
+        return padStartCells(clipped, width);
+    if (align === "center") {
+        const left = Math.floor(missing / 2);
+        return " ".repeat(left) + clipped + " ".repeat(missing - left);
+    }
+    return padEndCells(clipped, width);
+}
+/** Column widths: natural content widths, proportionally shrunk to fit. */
+function columnWidths(spec, cols, available) {
+    const natural = [];
+    for (let c = 0; c < cols; c++) {
+        const cells = [spec.header[c] ?? "", ...spec.rows.map((r) => r[c] ?? "")];
+        natural.push(Math.min(MAX_CELL, Math.max(...cells.map((t) => measure(inlineToPlain(t))), 1)));
+    }
+    const overhead = cols * 2 + (cols + 1); // 2 padding cells + 1 border per column
+    const totalNatural = natural.reduce((a, b) => a + b, 0);
+    if (totalNatural + overhead <= available)
+        return natural;
+    const budget = available - overhead;
+    if (cols * MIN_CELL > budget)
+        return null; // cannot fit even minimal columns
+    const shrunk = natural.map((n) => Math.max(MIN_CELL, Math.floor((n / totalNatural) * budget)));
+    return shrunk;
+}
+/** One physical border line: ┌───┬───┐ / ├───┼───┤ / └───┴───┘ */
+function borderLine(widths, chars) {
+    return chars.l + widths.map((w) => chars.h.repeat(w + 2)).join(chars.m) + chars.r;
+}
+export function TableView({ header, align, rows, width }) {
+    const cols = header.length;
+    const available = Math.max(12, width - 2);
+    const widths = columnWidths({ header, align, rows }, cols, available);
+    // Degrade: pane too narrow / too many columns → key-value per row.
+    if (widths === null || available < MIN_TABLE_WIDTH) {
+        return _jsx(KeyValueTable, { header: header, rows: rows, width: width });
+    }
+    const alignOf = (c) => align[c] ?? "left";
+    const lines = [];
+    let k = 0;
+    const vSep = `${charset.v} `;
+    lines.push(_jsx(Text, { color: theme.table, children: borderLine(widths, { l: charset.tl, m: charset.teeDown, r: charset.tr, h: charset.h }) }, k++));
+    // Header row — cells may wrap; bold.
+    const headerWrapped = header.map((h, c) => wrapCells(inlineToPlain(h), widths[c]));
+    const headerHeight = Math.max(...headerWrapped.map((w) => w.length));
+    for (let r = 0; r < headerHeight; r++) {
+        lines.push(_jsxs(Text, { bold: true, color: theme.table, children: [`${charset.v} `, header.map((_, c) => alignCell(headerWrapped[c][r] ?? "", widths[c], alignOf(c))).join(` ${charset.v} `), ` ${charset.v}`] }, k++));
+    }
+    lines.push(_jsx(Text, { color: theme.table, children: borderLine(widths, { l: charset.teeRight, m: charset.cross, r: charset.teeLeft, h: charset.h }) }, k++));
+    const shown = rows.slice(0, MAX_ROWS);
+    for (const row of shown) {
+        // Wrap each cell; row height = tallest cell.
+        const wrapped = Array.from({ length: cols }, (_, c) => wrapCells(inlineToPlain(row[c] ?? ""), widths[c]));
+        const height = Math.max(...wrapped.map((w) => w.length), 1);
+        for (let r = 0; r < height; r++) {
+            lines.push(_jsxs(Text, { children: [_jsx(Text, { color: theme.table, children: vSep }), Array.from({ length: cols }, (_, c) => {
+                        const plain = wrapped[c][r] ?? "";
+                        const missing = Math.max(0, widths[c] - measure(plain));
+                        const a = alignOf(c);
+                        const lead = a === "right" ? missing : a === "center" ? Math.floor(missing / 2) : 0;
+                        const trail = missing - lead;
+                        // First physical line of a single-line cell renders inline markdown;
+                        // wrapped/extra lines render plain (markers already stripped).
+                        const content = r === 0 && plain === inlineToPlain(row[c] ?? "")
+                            ? renderInline(row[c] ?? "", `t${k}-${c}`)
+                            : plain;
+                        return (_jsxs(Text, { children: [" ".repeat(lead), content, " ".repeat(trail)] }, c));
+                    }).flatMap((node, c) => (c === 0 ? [node] : [_jsx(Text, { color: theme.table, children: ` ${charset.v} ` }, `s${c}`), node])), _jsx(Text, { color: theme.table, children: ` ${charset.v}` })] }, k++));
+        }
+    }
+    if (rows.length > MAX_ROWS) {
+        lines.push(_jsxs(Text, { dimColor: true, children: [charset.v, " ", "… " + (rows.length - MAX_ROWS) + " more rows"] }, k++));
+    }
+    lines.push(_jsx(Text, { color: theme.table, children: borderLine(widths, { l: charset.bl, m: charset.teeUp, r: charset.br, h: charset.h }) }, k++));
+    return _jsx(Box, { flexDirection: "column", marginTop: 1, children: lines });
+}
+/** Narrow-pane fallback: one labelled mini-record per row. */
+function KeyValueTable({ header, rows, width }) {
+    const labelWidth = Math.min(20, Math.max(...header.map((h) => measure(inlineToPlain(h))), 1));
+    const valueWidth = Math.max(8, width - labelWidth - 5);
+    const shown = rows.slice(0, MAX_ROWS);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.table, bold: true, children: [" table \u00B7 ", rows.length, " row", rows.length === 1 ? "" : "s", " \u00D7 ", header.length, " cols"] }), shown.map((row, ri) => (_jsxs(Box, { flexDirection: "column", children: [ri > 0 && _jsxs(Text, { dimColor: true, children: ["  ", charset.h.repeat(Math.min(20, width - 2))] }), header.map((h, c) => {
+                        const value = row[c] ?? "";
+                        if (value.trim() === "")
+                            return null;
+                        return (_jsxs(Text, { children: ["  ", _jsx(Text, { color: theme.table, children: padEndCells(clipCells(inlineToPlain(h), labelWidth), labelWidth) }), ` ${charset.v} `, renderInline(clipCells(inlineToPlain(value), valueWidth), `kv${ri}-${c}`)] }, c));
+                    })] }, ri))), rows.length > MAX_ROWS && _jsxs(Text, { dimColor: true, children: ["  \u2026 ", rows.length - MAX_ROWS, " more rows"] })] }));
+}