mini-coder 0.7.3 → 0.8.0

package/src/tui/highlight.ts

@@ -0,0 +1,189 @@
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import Parser from "tree-sitter";
+import JavaScript from "tree-sitter-javascript";
+import TypeScript from "tree-sitter-typescript";
+import Markdown from "@tree-sitter-grammars/tree-sitter-markdown";
+import { HEADINGS, INLINE_CODE, NORMAL_BG, NORMAL_FG, STYLES, channels, sgrPlain, type Style } from "./theme.ts";
+
+/**
+ * Syntax highlighting for committed scrollback, once, over the whole block.
+ * Grammar queries ship with the grammar packages and are consumed as data, so
+ * a capture name is the only thing that reaches the palette. The colours come
+ * from the TokyoNight `night` palette in `theme.ts`, mapped the way
+ * `folke/tokyonight.nvim` maps capture names to highlight groups. Truecolor only.
+ */
+
+function styleFor(capture: string): Style | undefined {
+  for (let name = capture; ; name = name.slice(0, name.lastIndexOf("."))) {
+    const style = STYLES[name];
+    if (style !== undefined) return style;
+    if (!name.includes(".")) return undefined;
+  }
+}
+
+const require = createRequire(import.meta.url);
+
+/** A grammar package keeps its queries next to its sources. */
+function querySource(pkg: string, ...path: string[]): string {
+  return readFileSync(join(dirname(require.resolve(`${pkg}/package.json`)), ...path), "utf8");
+}
+
+interface Syntax {
+  parser: Parser;
+  query: Parser.Query;
+}
+
+function syntax(language: Parser.Language, ...sources: string[]): Syntax {
+  const parser = new Parser();
+  parser.setLanguage(language);
+  return { parser, query: new Parser.Query(language, sources.join("\n")) };
+}
+
+const JS_QUERIES = querySource("tree-sitter-javascript", "queries", "highlights.scm");
+const TS_QUERIES = querySource("tree-sitter-typescript", "queries", "highlights.scm");
+
+const JAVASCRIPT = syntax(JavaScript, JS_QUERIES);
+/** TypeScript's own query only covers what it adds to JavaScript. */
+const TYPESCRIPT = syntax(TypeScript.typescript, JS_QUERIES, TS_QUERIES);
+const TSX = syntax(TypeScript.tsx, JS_QUERIES, TS_QUERIES);
+
+/** Fence info string to grammar, for the languages we carry. */
+const CODE: Record<string, Syntax | undefined> = {
+  js: JAVASCRIPT,
+  javascript: JAVASCRIPT,
+  jsx: JAVASCRIPT,
+  ts: TYPESCRIPT,
+  typescript: TYPESCRIPT,
+  tsx: TSX,
+};
+
+const MARKDOWN = syntax(
+  Markdown,
+  querySource("@tree-sitter-grammars/tree-sitter-markdown", "tree-sitter-markdown", "queries", "highlights.scm"),
+);
+const MARKDOWN_INLINE = syntax(
+  Markdown.inline,
+  querySource(
+    "@tree-sitter-grammars/tree-sitter-markdown",
+    "tree-sitter-markdown-inline",
+    "queries",
+    "highlights.scm",
+  ),
+);
+
+/** One styled range of a line, in byte offsets into that line. */
+interface Span {
+  start: number;
+  end: number;
+  style: Style;
+}
+
+function spansOf(syntax: Syntax, node: Parser.SyntaxNode, offset = 0): Span[] {
+  const spans: Span[] = [];
+  for (const capture of syntax.query.captures(node)) {
+    const style = styleFor(capture.name);
+    if (style === undefined) continue;
+    spans.push({ start: offset + capture.node.startIndex, end: offset + capture.node.endIndex, style });
+  }
+  return spans;
+}
+
+function parse(syntax: Syntax, text: string): Parser.SyntaxNode {
+  return syntax.parser.parse(text).rootNode;
+}
+
+/**
+ * A style's own attributes, with the defaults spelled out: a span that names no
+ * color must not inherit the color of the span or token before it, and the
+ * fallback is the palette's `Normal`, never the terminal's own pair.
+ */
+function sgr(style: Style): string {
+  let out = "\x1b[";
+  if (style.bold) out += "1;";
+  if (style.italic) out += "3;";
+  if (style.underline) out += "4;";
+  out += `38;2;${channels(style.fg ?? NORMAL_FG)};48;2;${channels(style.bg ?? NORMAL_BG)}m`;
+  return out;
+}
+
+/**
+ * Wraps every span in its color. Spans nest, so the innermost one wins; text
+ * outside any span falls back to `Normal`. The trailing close restores the same
+ * pair, so a span may cross a line break and the last line still ends plain —
+ * and no cell is ever left to the terminal. Because each row is painted on its
+ * own, a span that outlives a line break re-asserts itself on the next line.
+ */
+function paint(text: string, spans: Span[]): string {
+  const events: { at: number; open: boolean; span: Span }[] = [];
+  for (const span of spans) {
+    if (span.end <= span.start) continue;
+    events.push({ at: span.start, open: true, span }, { at: span.end, open: false, span });
+  }
+  events.sort((a, b) => a.at - b.at || Number(a.open) - Number(b.open));
+
+  const active: Span[] = [];
+  let out = "";
+  let plain = true;
+  let at = 0;
+  const emit = (end: number): void => {
+    if (end <= at) return;
+    const style = active.length === 0 ? undefined : active[active.length - 1].style;
+    if (style === undefined) {
+      if (!plain) out += sgrPlain();
+      plain = true;
+    } else {
+      out += sgr(style);
+      plain = false;
+    }
+    const chunk = text.slice(at, end);
+    out += style === undefined ? chunk : chunk.replace(/\n/g, `\n${sgr(style)}`);
+    at = end;
+  };
+  for (const event of events) {
+    emit(event.at);
+    if (event.open) active.push(event.span);
+    else active.splice(active.indexOf(event.span), 1);
+  }
+  emit(text.length);
+  return plain ? out : `${out}${sgrPlain()}`;
+}
+
+/**
+ * Colors one committed block of Markdown. Inline markup is a separate grammar,
+ * run over the ranges the block grammar hands over, as its injections do.
+ */
+export function highlightMarkdown(text: string): string {
+  const root = parse(MARKDOWN, text);
+  let spans = spansOf(MARKDOWN, root);
+  // Two things the grammar's queries predate: a whole heading is colored by its
+  // level, and inline code carries a background. Both replace what covers them.
+  for (const inline of root.descendantsOfType("inline")) {
+    const inlineRoot = parse(MARKDOWN_INLINE, inline.text);
+    spans.push(...spansOf(MARKDOWN_INLINE, inlineRoot, inline.startIndex));
+    for (const code of inlineRoot.descendantsOfType("code_span")) {
+      spans = recolor(spans, code, INLINE_CODE, inline.startIndex);
+    }
+  }
+  for (const heading of root.descendantsOfType(["atx_heading", "setext_heading"])) {
+    const marker = heading.namedChildren.find((child) => /^(atx|setext)_h/.test(child.type))?.type;
+    const level = marker === undefined ? 1 : Number(marker.replace(/\D/g, ""));
+    spans = recolor(spans, heading, HEADINGS[Math.min(level, HEADINGS.length) - 1]);
+  }
+  return paint(text, spans);
+}
+
+/** Replaces every span inside `node` with one span covering the whole node. */
+function recolor(spans: Span[], node: Parser.SyntaxNode, style: Style, offset = 0): Span[] {
+  const start = offset + node.startIndex;
+  const end = offset + node.endIndex;
+  const kept = spans.filter((span) => span.start < start || span.end > end);
+  return [...kept, { start, end, style }];
+}
+
+/** Colors a fenced code block's body, by its fence info string. */
+export function highlightCode(info: string, text: string): string {
+  const grammar = CODE[info.trim().toLowerCase()];
+  return grammar === undefined ? text : paint(text, spansOf(grammar, parse(grammar, text)));
+}

package/src/tui/stream.ts

@@ -0,0 +1,142 @@
+import { highlightCode, highlightMarkdown } from "./highlight.ts";
+import { dim } from "./styles.ts";
+
+/** One logical display line: unwrapped text plus the style its rows inherit. */
+export interface BodyLine {
+  text: string;
+  style?: (text: string) => string;
+  /** Row background, painted across the row's trailing cells by the renderer. */
+  bg?: string;
+}
+
+/**
+ * A text stream projected onto display lines. `feed` and `flush` return the
+ * lines that became final; `pending` returns what is still in flight.
+ */
+export interface StreamRenderer {
+  feed(delta: string): BodyLine[];
+  pending(): BodyLine[];
+  flush(): BodyLine[];
+  reset(): void;
+}
+
+/** A fence opening line, and the info string that names its language. */
+const FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})\s*(\S*)/;
+const FENCE_CLOSE = /^ {0,3}(`{3,}|~{3,})\s*$/;
+
+/**
+ * Commits each complete line, colored. A fenced code block is held until its
+ * closing marker arrives, because neither the fence's language nor its body can
+ * be known before then. A run of prose is held until its block ends, because
+ * block context is what separates a setext heading from a paragraph and spans
+ * may cross lines; a blank line, a fence or the end of the turn ends the block.
+ * The live preview shows the held lines uncolored.
+ */
+export class MarkdownStream implements StreamRenderer {
+  private rest = "";
+  private fence: { marker: string; info: string; lines: string[] } | null = null;
+  private prose: string[] = [];
+
+  feed(delta: string): BodyLine[] {
+    this.rest += delta;
+    const lines = this.rest.split("\n");
+    this.rest = lines.pop()!;
+    return lines.flatMap((line) => this.commit(line));
+  }
+
+  pending(): BodyLine[] {
+    const held = this.fence === null ? this.prose : this.fence.lines;
+    const rest = this.rest === "" ? [] : [this.rest];
+    return [...held, ...rest].map((text) => ({ text }));
+  }
+
+  flush(): BodyLine[] {
+    const fence = this.fence;
+    const lines = fence === null ? this.releaseProse(this.rest) : this.releaseFence(null);
+    if (fence !== null && this.rest !== "") lines.push({ text: highlightMarkdown(this.rest) });
+    this.reset();
+    return lines;
+  }
+
+  reset(): void {
+    this.rest = "";
+    this.fence = null;
+    this.prose = [];
+  }
+
+  private commit(line: string): BodyLine[] {
+    const fence = this.fence;
+    if (fence !== null) {
+      const close = FENCE_CLOSE.exec(line);
+      if (close === null || close[1][0] !== fence.marker[0] || close[1].length < fence.marker.length) {
+        fence.lines.push(line);
+        return [];
+      }
+      return this.releaseFence(line);
+    }
+    const open = FENCE_OPEN.exec(line);
+    if (open !== null) {
+      this.fence = { marker: open[1], info: open[2], lines: [line] };
+      return this.releaseProse("");
+    }
+    if (line.trim() === "") return [...this.releaseProse(""), { text: line }];
+    this.prose.push(line);
+    return [];
+  }
+
+  /**
+   * Emits the held prose as one text, so the grammar sees whole blocks, then
+   * hands back the lines. `tail` is the still incomplete line closing the block.
+   */
+  private releaseProse(tail: string): BodyLine[] {
+    const prose = this.prose;
+    this.prose = [];
+    if (tail !== "") prose.push(tail);
+    if (prose.length === 0) return [];
+    // A block is only a block once its last line ends, so the text needs a
+    // terminating newline. It is not a line itself: the closing reset `paint`
+    // leaves after it belongs to the last one.
+    const lines = highlightMarkdown(`${prose.join("\n")}\n`).split("\n");
+    const reset = lines.pop()!;
+    lines[lines.length - 1] += reset;
+    return lines.map((text) => ({ text }));
+  }
+
+  /** Emits a held block: the fence lines colored, the body by its language. */
+  private releaseFence(closing: string | null): BodyLine[] {
+    const fence = this.fence!;
+    this.fence = null;
+    const lines: BodyLine[] = [{ text: highlightMarkdown(fence.lines.shift()!) }];
+    if (fence.lines.length > 0) {
+      for (const line of highlightCode(fence.info, fence.lines.join("\n")).split("\n")) {
+        lines.push({ text: line });
+      }
+    }
+    if (closing !== null) lines.push({ text: highlightMarkdown(closing) });
+    return lines;
+  }
+}
+
+/** Keeps only the incomplete tail, dimmed; nothing is ever committed. */
+export class TailStream implements StreamRenderer {
+  private rest = "";
+
+  feed(delta: string): BodyLine[] {
+    const text = this.rest + delta;
+    this.rest = text.slice(text.lastIndexOf("\n") + 1);
+    return [];
+  }
+
+  pending(): BodyLine[] {
+    return this.rest === "" ? [] : [{ text: this.rest, style: dim }];
+  }
+
+  flush(): BodyLine[] {
+    this.reset();
+    return [];
+  }
+
+  reset(): void {
+    this.rest = "";
+  }
+}

package/src/tui/styles.ts

@@ -0,0 +1,42 @@
+import { NORMAL_FG, PALETTE, sgrFg } from "./theme.ts";
+
+/**
+ * Inline foreground styling from the palette. The foreground is restored by
+ * re-asserting `Normal`'s, never by resetting: the row's background, set by the
+ * renderer, must survive, and no cell may fall back to the terminal's colours.
+ */
+function foreground(text: string, hex: string): string {
+  return `${sgrFg(hex)}${text}${sgrFg(NORMAL_FG)}`;
+}
+
+/** `Comment`, the colour diff context lines share. */
+export function dim(text: string): string {
+  return foreground(text, PALETTE.comment);
+}
+
+export function red(text: string): string {
+  return foreground(text, PALETTE.red);
+}
+
+export function green(text: string): string {
+  return foreground(text, PALETTE.green);
+}
+
+export function yellow(text: string): string {
+  return foreground(text, PALETTE.yellow);
+}
+
+/** Diff hunk headers; the palette's `blue` sits closest to the old ANSI cyan. */
+export function cyan(text: string): string {
+  return foreground(text, PALETTE.blue);
+}
+
+/** The user's own words; also `Function`, which user rows never collide with. */
+export function blue(text: string): string {
+  return foreground(text, PALETTE.blue);
+}
+
+/** The tool accent: call-line heads. */
+export function teal(text: string): string {
+  return foreground(text, PALETTE.teal);
+}