@pmndrs/pine 0.0.0-stage → 0.1.1

package/src/tui/code-pane.js

@@ -0,0 +1,398 @@
+import os from "node:os";
+import path from "node:path";
+import { ScrollView, truncateToWidth, visibleWidth, VStack, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { errText } from "../util.js";
+import { highlightCode } from "./highlight.js";
+import { halfBlocks, isImageFile, prepare } from "./picture.js";
+import { c } from "./theme.js";
+export const PANE_VIEWS = ["changes", "files", "output"];
+const tilde = (p) => (p === os.homedir() ? "~" : p.startsWith(`${os.homedir()}/`) ? `~${p.slice(os.homedir().length)}` : p);
+const plain = (s) => s.replace(/\t/g, "  ").replace(/[\x00-\x08\x0b-\x1f\x7f]/g, "");
+const size = (n) => (n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${Math.round(n / 1024)} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`);
+const took = (ms) => (ms === undefined ? "" : ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(1)} s`);
+/** The lines of a diff as git prints it, in colours, without the lines that only name the file. */
+export function diffLines(diff) {
+    const out = [];
+    for (const raw of diff.replace(/\n$/, "").split("\n")) {
+        const line = plain(raw);
+        if (/^(diff --git |index |--- |\+\+\+ |new file mode|deleted file mode|old mode|new mode|similarity index)/.test(line))
+            continue;
+        if (line.startsWith("@@"))
+            out.push(c.cyan(line));
+        else if (line.startsWith("+"))
+            out.push(c.green(line));
+        else if (line.startsWith("-"))
+            out.push(c.red(line));
+        else if (/^(rename |Binary files |\\ )/.test(line))
+            out.push(c.gray(line));
+        else
+            out.push(line);
+    }
+    return out;
+}
+/** Lines that react to a click, each cut to the width or, where it says so, wrapped. */
+class Rows {
+    rows = [];
+    owner = [];
+    cache;
+    invalidate() {
+        this.cache = undefined;
+    }
+    handleMouse(e) {
+        const row = this.rows[this.owner[e.y]];
+        if (!row?.run || e.button !== "left" || (e.type !== "press" && e.type !== "click" && e.type !== "release"))
+            return undefined;
+        if (e.type === "click")
+            row.run();
+        return { handled: true, render: true };
+    }
+    render(width) {
+        if (this.cache?.width === width && this.cache.rows === this.rows)
+            return this.cache.lines;
+        const lines = [];
+        this.owner = [];
+        this.rows.forEach((row, i) => {
+            const gutter = row.gutter ?? "";
+            const room = Math.max(8, width - 1 - visibleWidth(gutter));
+            const parts = row.wrap && visibleWidth(row.text) > room ? wrapTextWithAnsi(row.text, room) : [truncateToWidth(row.text, room)];
+            parts.forEach((part, n) => {
+                lines.push(` ${n === 0 ? gutter : " ".repeat(visibleWidth(gutter))}${part}`);
+                this.owner.push(i);
+            });
+        });
+        this.cache = { width, rows: this.rows, lines };
+        return lines;
+    }
+}
+export class CodePane {
+    /** What goes into the layout. */
+    component;
+    client;
+    redraw;
+    close;
+    target;
+    states = new Map();
+    rows = new Rows();
+    scroll;
+    hits = [];
+    timer;
+    width = 60;
+    /** Counts loads, so that an answer that arrives late does not overwrite a newer one. */
+    turn = 0;
+    constructor(opts) {
+        this.client = opts.client;
+        this.redraw = opts.redraw;
+        this.close = opts.close;
+        this.target = opts.target;
+        this.scroll = new ScrollView(this.rows, { follow: "none", overscroll: "contain", scrollbar: "auto" });
+        const head = {
+            invalidate() { },
+            render: (w) => this.renderHead(w),
+            handleMouse: (e) => {
+                if (e.y !== 0 || e.button !== "left" || (e.type !== "press" && e.type !== "click" && e.type !== "release"))
+                    return undefined;
+                const hit = this.hits.find((h) => e.x >= h.from && e.x < h.to);
+                if (!hit)
+                    return undefined;
+                if (e.type === "click")
+                    hit.run();
+                return { handled: true, render: true };
+            },
+        };
+        this.component = new VStack([
+            { component: head, basis: "auto", grow: 0, shrink: 0 },
+            { component: this.scroll, basis: 0, grow: 1, shrink: 1, minSize: 1 },
+        ]);
+    }
+    get state() {
+        const t = this.target();
+        if (!t)
+            return undefined;
+        const key = `${t.agent}:${t.session}`;
+        let s = this.states.get(key);
+        if (!s) {
+            if (this.states.size > 40)
+                this.states.clear();
+            s = { view: "changes", dirs: new Map(), expanded: new Set([""]) };
+            this.states.set(key, s);
+        }
+        return s;
+    }
+    get view() {
+        return this.state?.view ?? "changes";
+    }
+    /** Show one of the views, from its top level. Without a view: whatever was shown last, read again. */
+    show(view) {
+        const s = this.state;
+        if (!s)
+            return this.build();
+        if (view) {
+            s.view = view;
+            s.diff = undefined;
+            s.file = undefined;
+            s.call = undefined;
+        }
+        this.scroll.scrollToStart();
+        void this.load(true);
+    }
+    /** The conversation shown changed its folder: what was read from the old one is not shown any more. */
+    forget(target) {
+        const view = this.states.get(`${target.agent}:${target.session}`)?.view;
+        this.states.delete(`${target.agent}:${target.session}`);
+        if (view && this.state)
+            this.state.view = view;
+        this.show();
+    }
+    /** Something happened that may have changed what is shown (a tool ran, a task ended): read it again in a moment. */
+    touch() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => void this.load(false), 350);
+        this.timer.unref?.();
+    }
+    stop() {
+        clearTimeout(this.timer);
+    }
+    // ---- reading ---------------------------------------------------------------------------------
+    async load(visibly) {
+        const t = this.target();
+        const s = this.state;
+        if (!t || !s)
+            return this.build();
+        const turn = ++this.turn;
+        if (visibly) {
+            s.loading = "reading …";
+            this.build();
+        }
+        try {
+            if (s.view === "changes") {
+                const changes = await this.client.changes(t.agent, t.session);
+                const diff = s.diff ? await this.client.diff(t.agent, t.session, s.diff.file).catch(() => undefined) : undefined;
+                if (turn !== this.turn)
+                    return;
+                s.changes = changes;
+                s.root = changes.root;
+                if (s.diff)
+                    Object.assign(s.diff, { lines: diff ? diffLines(diff.diff) : [], truncated: diff?.truncated });
+            }
+            else if (s.view === "files") {
+                const dirs = new Map();
+                for (const dir of [...s.expanded].sort()) {
+                    const got = await this.client.tree(t.agent, t.session, dir).catch(() => undefined);
+                    if (got)
+                        dirs.set(dir, got.entries);
+                }
+                const root = s.root ?? (await this.client.folder(t.agent, t.session).then((f) => f.folder ?? f.workspace).catch(() => undefined));
+                const file = s.file ? await this.fileRows(t, s.file.path) : undefined;
+                if (turn !== this.turn)
+                    return;
+                s.dirs = dirs;
+                s.root = root;
+                if (s.file)
+                    s.file.rows = file;
+            }
+            else {
+                const tasks = (await this.client.history(t.agent, t.session, 8)).filter((x) => x.depth === 0).reverse();
+                const calls = [];
+                for (const task of tasks) {
+                    if (task.meta?.stats && !task.meta.stats.tools.length)
+                        continue;
+                    const got = await this.client.output(task.id).catch(() => undefined);
+                    let n = 0;
+                    for (const entry of got?.entries ?? [])
+                        if (entry.kind === "tool")
+                            calls.push({ task: task.id, n: n++, entry });
+                }
+                if (turn !== this.turn)
+                    return;
+                s.calls = calls;
+            }
+            s.error = undefined;
+        }
+        catch (e) {
+            if (turn !== this.turn)
+                return;
+            s.error = errText(e);
+        }
+        s.loading = undefined;
+        this.build();
+    }
+    async fileRows(t, file) {
+        if (isImageFile(file)) {
+            const got = await this.client.workspaceImage(t.agent, file, t.session).catch(() => undefined);
+            if (!got)
+                return [{ text: c.gray("this picture cannot be shown") }];
+            const p = await prepare(got.bytes, got.mime, path.basename(file));
+            // As half blocks: a real picture can only be drawn at the left edge of the screen.
+            const blocks = p.pixels ? halfBlocks(p.pixels, Math.max(8, Math.min(this.width - 3, 80)), 30) : [];
+            return [...blocks.map((text) => ({ text })), { text: c.gray(`${p.widthPx}×${p.heightPx}`) }];
+        }
+        const got = await this.client.file(t.agent, t.session, file);
+        if (got.binary || got.text === undefined)
+            return [{ text: c.gray(`a binary file, ${size(got.size)}`) }];
+        const lines = highlightCode(plain(got.text.replace(/\n$/, "")), path.extname(file).slice(1) || path.basename(file).toLowerCase());
+        const digits = String(lines.length).length;
+        const rows = lines.map((text, i) => ({ text, gutter: c.gray(`${String(i + 1).padStart(digits)} `), wrap: true }));
+        if (got.truncated)
+            rows.push({ text: c.gray(`… the first 256 KB of ${size(got.size)}`) });
+        return rows;
+    }
+    // ---- drawing ---------------------------------------------------------------------------------
+    go(change, top = true) {
+        const s = this.state;
+        if (!s)
+            return;
+        change(s);
+        if (top)
+            this.scroll.scrollToStart();
+        void this.load(false);
+        this.build();
+    }
+    back(label, undo) {
+        return { text: `${c.accent("‹ back")} ${c.gray("·")} ${c.bold(label)}`, run: () => this.go(undo) };
+    }
+    build() {
+        const s = this.state;
+        const rows = [];
+        if (!s)
+            rows.push({ text: c.gray("Switch to a conversation tab: this pane shows the folder a conversation works in."), wrap: true });
+        else if (s.error)
+            rows.push({ text: c.red(s.error), wrap: true });
+        else if (s.view === "changes")
+            this.changesRows(s, rows);
+        else if (s.view === "files")
+            this.filesRows(s, rows);
+        else
+            this.outputRows(s, rows);
+        this.rows.rows = rows;
+        this.redraw();
+    }
+    changesRows(s, rows) {
+        const ch = s.changes;
+        if (!ch)
+            return void rows.push({ text: c.gray(s.loading ?? "") });
+        if (!ch.repo)
+            return void rows.push({ text: c.gray("This folder is not in a git repository, so there are no changes to show. Files lists what is in it."), wrap: true });
+        if (s.diff) {
+            const file = s.diff.file;
+            const entry = ch.files.find((f) => f.path === file);
+            rows.push(this.back(file, (x) => (x.diff = undefined)));
+            if (entry)
+                rows.push({ text: c.gray(`${STATUS[entry.status] ?? entry.status}${counts(entry) ? ` · ${counts(entry)}` : ""}`) });
+            rows.push({ text: "" });
+            if (!s.diff.lines)
+                rows.push({ text: c.gray("reading …") });
+            else if (!s.diff.lines.length)
+                rows.push({ text: c.gray(entry ? "nothing to show for this file (a folder, or a binary file)" : "no difference to the last commit any more") });
+            else
+                for (const text of s.diff.lines)
+                    rows.push({ text, wrap: true });
+            if (s.diff.truncated)
+                rows.push({ text: c.gray("… the diff goes on; this is its first 200 000 characters") });
+            return;
+        }
+        if (!ch.files.length)
+            return void rows.push({ text: c.gray("Nothing has changed since the last commit.") });
+        const letter = { M: c.yellow, A: c.green, "?": c.green, D: c.red, R: c.cyan };
+        for (const f of ch.files) {
+            const n = counts(f);
+            rows.push({ text: `${(letter[f.status] ?? c.gray)(f.status === "?" ? "+" : f.status)} ${plain(f.path)}${n ? `  ${n}` : ""}`, run: () => this.go((x) => (x.diff = { file: f.path })) });
+        }
+        if (ch.more)
+            rows.push({ text: c.gray("… and more; the first 300 are listed") });
+    }
+    filesRows(s, rows) {
+        if (s.file) {
+            rows.push(this.back(s.file.path, (x) => (x.file = undefined)));
+            rows.push({ text: "" });
+            rows.push(...(s.file.rows ?? [{ text: c.gray("reading …") }]));
+            return;
+        }
+        if (!s.dirs.has(""))
+            return void rows.push({ text: c.gray(s.loading ?? "this folder cannot be read") });
+        const walk = (dir, depth) => {
+            for (const e of s.dirs.get(dir) ?? []) {
+                const rel = dir ? `${dir}/${e.name}` : e.name;
+                const pad = "  ".repeat(depth);
+                if (e.dir) {
+                    const open = s.expanded.has(rel);
+                    rows.push({ text: `${pad}${c.accent(open ? "▾" : "▸")} ${c.bold(plain(e.name))}/`, run: () => this.go((x) => void (open ? x.expanded.delete(rel) : x.expanded.add(rel)), false) });
+                    if (open)
+                        walk(rel, depth + 1);
+                }
+                else
+                    rows.push({ text: `${pad}  ${plain(e.name)} ${c.gray(size(e.size))}`, run: () => this.go((x) => (x.file = { path: rel })) });
+            }
+        };
+        walk("", 0);
+        if (!rows.length)
+            rows.push({ text: c.gray("This folder is empty.") });
+    }
+    outputRows(s, rows) {
+        if (!s.calls)
+            return void rows.push({ text: c.gray(s.loading ?? "") });
+        const mark = (e) => (e.ok === undefined ? c.yellow("●") : e.ok ? c.green("✓") : c.red("✗"));
+        const open = s.call && s.calls.find((x) => x.task === s.call.task && x.n === s.call.n);
+        if (open) {
+            const e = open.entry;
+            rows.push(this.back(e.tool ?? "tool", (x) => (x.call = undefined)));
+            rows.push({ text: `${mark(e)} ${c.gray(`task #${open.task}${e.ms !== undefined ? ` · ${took(e.ms)}` : ""}${e.ok === undefined ? " · still running" : ""}`)}` });
+            if (e.subject)
+                rows.push({ text: c.yellow(plain(e.subject).replace(/\n/g, " ")), wrap: true });
+            rows.push({ text: "" });
+            const text = plain(e.result ?? "");
+            const body = /^diff --git /m.test(text) ? diffLines(text) : text.split("\n");
+            if (!text.trim())
+                rows.push({ text: c.gray(e.ok === undefined ? "no output yet" : "(no output)") });
+            else
+                for (const line of body.slice(0, 4000))
+                    rows.push({ text: e.ok === false ? c.red(line) : line, wrap: true });
+            if (body.length > 4000)
+                rows.push({ text: c.gray(`… ${body.length - 4000} more lines`) });
+            return;
+        }
+        if (!s.calls.length)
+            return void rows.push({ text: c.gray("No tool has run in this conversation yet. What the agent's commands and other tools print is listed here."), wrap: true });
+        // The newest on top: that is the one looked for.
+        [...s.calls].reverse().forEach((call) => {
+            const e = call.entry;
+            rows.push({ text: `${mark(e)} ${c.bold(e.tool ?? "")} ${c.gray(plain(e.subject ?? "").replace(/\s+/g, " "))}${e.ms !== undefined ? c.gray(`  ${took(e.ms)}`) : ""}`, run: () => this.go((x) => (x.call = { task: call.task, n: call.n })) });
+        });
+    }
+    renderHead(width) {
+        this.width = width;
+        const s = this.state;
+        let text = " ";
+        let at = 1;
+        this.hits = [];
+        const add = (styled, run) => {
+            const w = visibleWidth(styled);
+            if (run)
+                this.hits.push({ from: at, to: at + w, run });
+            text += styled;
+            at += w;
+        };
+        for (const view of PANE_VIEWS) {
+            const label = ` ${view[0].toUpperCase()}${view.slice(1)} `;
+            add(s?.view === view ? c.bgAccent(label) : c.gray(label), () => this.show(view));
+            add(" ");
+        }
+        const right = [
+            { styled: c.gray(" ↻ "), run: () => this.show() },
+            { styled: c.gray(" × "), run: () => this.close() },
+        ];
+        const rightWidth = right.reduce((n, r) => n + visibleWidth(r.styled), 0);
+        text += " ".repeat(Math.max(0, width - at - rightWidth));
+        at = Math.max(at, width - rightWidth);
+        for (const r of right)
+            add(r.styled, r.run);
+        const where = s?.root ? tilde(s.root) : "";
+        const ch = s?.view === "changes" ? s.changes : undefined;
+        // What is asked for first comes first; the folder's name is what gets cut when the pane is narrow.
+        const info = [...(ch?.repo ? [`${ch.branch || "no branch"}`, ch.files.length ? `${ch.files.length}${ch.more ? "+" : ""} changed` : "clean"] : []), ...(s?.view === "output" && s.calls ? [`${s.calls.length} tool call${s.calls.length === 1 ? "" : "s"}`] : []), where].filter(Boolean).join(" · ");
+        return [truncateToWidth(text, width), truncateToWidth(` ${c.gray(info)}`, width), c.gray("─".repeat(width))];
+    }
+}
+const STATUS = { M: "changed", A: "added", D: "deleted", R: "renamed", "?": "new, not tracked by git yet" };
+function counts(f) {
+    return [f.added ? c.green(`+${f.added}`) : "", f.removed ? c.red(`−${f.removed}`) : ""].filter(Boolean).join(" ");
+}

package/src/tui/highlight.d.ts

@@ -0,0 +1,8 @@
+/** The language highlight.js knows for the word after a code block's opening fence, if any. */
+export declare function languageOf(lang: string | undefined): string | undefined;
+/**
+ * A code block as lines, coloured when its language is known. A block without a language, or in
+ * one highlight.js does not know, comes back as it is: guessing the language colours plain text
+ * at random.
+ */
+export declare function highlightCode(code: string, lang?: string): string[];

package/src/tui/highlight.js

@@ -0,0 +1,86 @@
+import { createRequire } from "node:module";
+// Colours for code in an answer. highlight.js knows the languages and says what each piece of a
+// text is (a keyword, a string, a removed line of a diff); here that becomes one of the terminal's
+// own sixteen colours, so code follows the terminal's palette like the rest of the UI.
+/** What highlight.js calls a piece of code -> the colour it gets (an SGR foreground code). */
+const COLOUR = {
+    keyword: "35", literal: "35", "selector-tag": "35", "meta-keyword": "35", doctag: "35",
+    built_in: "36", type: "36", "builtin-name": "36", attr: "36", attribute: "36", variable: "36", "template-variable": "36", "selector-class": "36", "selector-id": "36", "selector-attr": "36", "selector-pseudo": "36",
+    string: "32", regexp: "32", "meta-string": "32", addition: "32",
+    number: "33", symbol: "33", bullet: "33", link: "33",
+    title: "34", section: "34", name: "34",
+    comment: "90", meta: "90", quote: "90",
+    deletion: "31",
+};
+/** Names a code block may carry that highlight.js knows under another name. */
+const ALIAS = { tsx: "typescript", mts: "typescript", cts: "typescript", jsx: "javascript", mjs: "javascript", cjs: "javascript", jsonc: "json", json5: "json", jsonl: "json", vue: "xml", svelte: "xml", mdx: "markdown", fish: "bash", shellscript: "bash", terminal: "shell", "objective-c": "objectivec", "c++": "cpp", "c#": "csharp", tf: "ini", hcl: "ini", env: "ini", dotenv: "ini" };
+const ENTITY = { "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#x27;": "'", "&#39;": "'" };
+let lib;
+function hljs() {
+    if (lib === undefined) {
+        try {
+            lib = createRequire(import.meta.url)("highlight.js");
+        }
+        catch {
+            lib = null;
+        }
+    }
+    return lib;
+}
+/** highlight.js's answer (text with <span class="hljs-..."> around the pieces) as coloured lines. */
+function toLines(html) {
+    const lines = [];
+    const open = [];
+    const colour = () => open.findLast((x) => x !== undefined);
+    let line = "";
+    for (const m of html.matchAll(/<span class="([^"]*)">|<\/span>|&(?:amp|lt|gt|quot|#x27|#39);|\n|[^<&\n]+|[<&]/g)) {
+        const piece = m[0];
+        if (m[1] !== undefined) {
+            const now = m[1].split(/\s+/).map((name) => COLOUR[name.replace(/^hljs-/, "")]).find(Boolean);
+            open.push(now);
+            if (now)
+                line += `\x1b[${now}m`;
+        }
+        else if (piece === "</span>") {
+            const was = open.pop();
+            if (was)
+                line += `\x1b[${colour() ?? "39"}m`;
+        }
+        else if (piece === "\n") {
+            // A colour that runs over the end of a line (a long comment, a string) ends with the line and starts again on the next.
+            lines.push(colour() ? `${line}\x1b[39m` : line);
+            line = colour() ? `\x1b[${colour()}m` : "";
+        }
+        else
+            line += ENTITY[piece] ?? piece;
+    }
+    lines.push(colour() ? `${line}\x1b[39m` : line);
+    return lines;
+}
+/** The language highlight.js knows for the word after a code block's opening fence, if any. */
+export function languageOf(lang) {
+    const word = (lang ?? "").trim().split(/[\s,{:]/)[0].toLowerCase().replace(/^\./, "");
+    if (!word)
+        return undefined;
+    const name = ALIAS[word] ?? word;
+    return hljs()?.getLanguage(name) ? name : undefined;
+}
+/**
+ * A code block as lines, coloured when its language is known. A block without a language, or in
+ * one highlight.js does not know, comes back as it is: guessing the language colours plain text
+ * at random.
+ */
+export function highlightCode(code, lang) {
+    const plain = () => code.split("\n");
+    if (process.env.NO_COLOR || code.length > 200_000)
+        return plain();
+    const language = languageOf(lang);
+    if (!language)
+        return plain();
+    try {
+        return toLines(hljs().highlight(code, { language, ignoreIllegals: true }).value);
+    }
+    catch {
+        return plain();
+    }
+}

package/src/tui/picture.d.ts

@@ -0,0 +1,141 @@
+import { type Component } from "@earendil-works/pi-tui";
+/**
+ * Pictures in the conversation. Display only: nothing here is sent to a model.
+ *
+ * Two ways to draw one. A terminal with the Kitty graphics protocol (kitty, Ghostty, WezTerm) gets
+ * the real picture. Every other terminal gets coloured half blocks: each character cell shows two
+ * pixels, one as the colour of "▀" and one as its background. For that the picture has to be
+ * decoded and scaled, which macOS's own `sips` does; it also turns jpg, gif and webp into the png
+ * the Kitty protocol wants.
+ */
+export interface Pixels {
+    width: number;
+    height: number;
+    /** width * height * 3 bytes, rows from the top. */
+    rgb: Uint8Array;
+}
+export interface Prepared {
+    name: string;
+    widthPx: number;
+    heightPx: number;
+    /** Base64 png, scaled down to at most 1200 pixels on its longer side. */
+    png?: string;
+    /** A small copy for the half-block drawing. */
+    pixels?: Pixels;
+}
+/** Read an uncompressed 24 or 32 bit BMP, the simplest format sips writes. Transparent parts are shown on dark grey. */
+export declare function parseBmp(b: Buffer): Pixels | undefined;
+/**
+ * Make a picture ready to draw. Returns what could be made: without sips (not macOS) a png still
+ * shows on a Kitty-protocol terminal, and anything else is shown as a line of text.
+ */
+export declare function prepare(bytes: Buffer, mime: string, name: string): Promise<Prepared>;
+/** Draw a picture with half blocks, at most `maxCols` cells wide and `maxRows` lines high. */
+export declare function halfBlocks(p: Pixels, maxCols: number, maxRows: number, trueColor?: boolean): string[];
+/**
+ * The lines of a screen, with every real picture that `covered` says something lies over drawn as
+ * text instead. `covered` gets the picture's place: its first line and column, its width and height.
+ * Returns the same array when no picture is covered.
+ */
+export declare function picturesAsText(lines: string[], covered: (row: number, col: number, width: number, height: number) => boolean): string[];
+/** One picture in the conversation: a thumbnail that a click enlarges and a second click shrinks again. */
+export declare class Picture implements Component {
+    private p;
+    private large;
+    private images;
+    private cache?;
+    constructor(prepared: Prepared);
+    invalidate(): void;
+    handleMouse(e: any): {
+        handled: boolean;
+        render: boolean;
+    } | undefined;
+    /** The drawing itself, without a caption: the real picture where the terminal can show one, half blocks otherwise, nothing if neither works. */
+    body(width: number, large?: boolean): string[];
+    blocks(id: number, cols: number): string[];
+    render(width: number): string[];
+}
+/** A place in the conversation that is filled in later, so a picture lands where it belongs however long it takes to load. */
+export declare class Slot implements Component {
+    inner?: Component;
+    invalidate(): void;
+    handleMouse(e: any): import("@earendil-works/pi-tui").TuiMouseEventResult | undefined;
+    render(width: number): string[];
+}
+/** Whether videos can be played in the conversation (ffmpeg is installed). */
+export declare const canPlayVideo: boolean;
+export interface PreparedVideo {
+    file: string;
+    name: string;
+    seconds?: number;
+    poster: Prepared;
+}
+/** Get a video file ready to show: a still from its start, and how long it runs. */
+export declare function prepareVideo(file: string, name: string): Promise<PreparedVideo>;
+/** A png from raw pixels (3 bytes each, rows from the top): what the Kitty graphics protocol takes. Fast, lightly compressed. */
+export declare function pngFromRgb(rgb: Uint8Array, width: number, height: number): Buffer;
+/**
+ * One video in the conversation. It plays at the size it is shown in. The picture itself is the
+ * size switch (click to enlarge, click to shrink), the first word of the caption is play and pause.
+ *
+ * Frames are drawn the way pictures are: as real images where the terminal has the Kitty graphics
+ * protocol (each frame replaces the last under one image id), as half blocks everywhere else.
+ */
+export declare class Video implements Component {
+    private v;
+    private still;
+    private redraw;
+    private open;
+    private child?;
+    private ticker?;
+    private frame?;
+    /** The current frame as a real image, on terminals that can show one. */
+    private shown?;
+    private imageId;
+    private paused;
+    private large;
+    /** Seconds of the video shown so far. */
+    private position;
+    private width;
+    private captionRow;
+    /** The lines the frame takes on screen. */
+    private shownRows;
+    private playTo;
+    private openFrom;
+    constructor(video: PreparedVideo, redraw: () => void, open: (file: string) => void);
+    invalidate(): void;
+    get state(): "idle" | "playing" | "paused";
+    /** The cells a frame fills: the same room the still takes at the current size, in the video's own shape. */
+    private size;
+    /**
+     * The pixels to decode a frame at. For half blocks: one pixel per half cell. For real images: as
+     * many pixels as those cells have on screen, up to a width that a terminal takes ten times a second.
+     */
+    private pixels;
+    /** Play, or go on after a pause. At the end it starts over. */
+    play(): void;
+    pause(): void;
+    /** Decode from `from` seconds on, at the current size. `hold`: show one frame and stay paused there. */
+    private start;
+    /** Back to the still. */
+    stop(): void;
+    private resize;
+    handleMouse(e: any): {
+        handled: boolean;
+        render: boolean;
+    } | undefined;
+    blocks(_id: number, cols: number): string[];
+    render(width: number): string[];
+}
+/** Stop whatever video is playing, for example when the UI closes. */
+export declare function stopVideos(): void;
+export declare const isVideoFile: (name: string) => boolean;
+export declare const isImageFile: (name: string) => boolean;
+export declare const mimeOf: (name: string) => "" | "image/gif" | "image/jpeg" | "image/png" | "image/webp";
+export interface PictureRef {
+    caption: string;
+    target: string;
+    remote: boolean;
+}
+/** The pictures an answer points at with ![caption](target). Code blocks are left alone. */
+export declare function picturesIn(markdown: string, max?: number): PictureRef[];