pi-ui-extend 0.1.1

package/dist/app/extension-ui-controller.js

@@ -0,0 +1,532 @@
+import { ANSI_RESET, colorize, THEMES } from "../theme.js";
+import { isToastKind } from "../ui.js";
+import { ellipsizeDisplay, sanitizeText } from "./render-text.js";
+const CUSTOM_UI_WIDGET_KEY = "pix-custom-ui";
+export class ExtensionUiController {
+    host;
+    extensionWidgets = new Map();
+    terminalInputHandlers = new Set();
+    activeCustomUi;
+    aboveInputRenderer = {
+        set: (key, content) => {
+            this.setAboveInputWidget(key, content);
+        },
+        clear: (key) => {
+            this.clearAboveInputWidget(key);
+        },
+    };
+    constructor(host) {
+        this.host = host;
+    }
+    get widgets() {
+        return this.extensionWidgets;
+    }
+    createExtensionTheme() {
+        const colors = this.host.theme.colors;
+        const foreground = (color) => extensionForegroundColor(colors, String(color));
+        const background = (color) => extensionBackgroundColor(colors, String(color));
+        const prefix = (options) => (colorize("", options).replace(new RegExp(`${escapeRegExp(ANSI_RESET)}$`), ""));
+        return {
+            fg: (color, text) => colorize(text, { foreground: foreground(color) }),
+            bg: (color, text) => colorize(text, { background: background(color) }),
+            bold: (text) => colorize(text, { bold: true }),
+            italic: (text) => text,
+            underline: (text) => text,
+            inverse: (text) => `\x1b[7m${text}${ANSI_RESET}`,
+            strikethrough: (text) => colorize(text, { strikethrough: true }),
+            getFgAnsi: (color) => prefix({ foreground: foreground(color) }),
+            getBgAnsi: (color) => prefix({ background: background(color) }),
+            getColorMode: () => "truecolor",
+            getThinkingBorderColor: () => (text) => colorize(text, { foreground: colors.accent }),
+            getBashModeBorderColor: () => (text) => colorize(text, { foreground: colors.info }),
+            style: (text, options) => colorize(text, {
+                ...(options.foreground === undefined ? {} : { foreground: foreground(options.foreground) }),
+                ...(options.background === undefined ? {} : { background: background(options.background) }),
+                ...(options.bold === undefined ? {} : { bold: options.bold }),
+            }),
+        };
+    }
+    setWidget(key, content, options) {
+        const existing = this.extensionWidgets.get(key);
+        if (existing)
+            this.invalidateWidget(existing);
+        if (content === undefined) {
+            this.extensionWidgets.delete(key);
+            if (this.host.isRunning())
+                this.host.render();
+            return;
+        }
+        if (!Array.isArray(content) && typeof content !== "function")
+            return;
+        this.extensionWidgets.set(key, {
+            key,
+            placement: options?.placement === "belowEditor" ? "belowEditor" : "aboveEditor",
+            content: content,
+        });
+        if (this.host.isRunning())
+            this.host.render();
+    }
+    clearWidgets() {
+        this.cancelActiveCustomUi();
+        for (const widget of this.extensionWidgets.values())
+            this.invalidateWidget(widget);
+        this.extensionWidgets.clear();
+    }
+    suppressWidget(key) {
+        const widget = this.extensionWidgets.get(key);
+        if (!widget)
+            return;
+        this.invalidateWidget(widget);
+        this.extensionWidgets.delete(key);
+    }
+    handleTerminalInput(data) {
+        if (this.activeCustomUi) {
+            if (data === "\u0003")
+                return { consume: false };
+            try {
+                const result = this.activeCustomUi.component.handleInput?.(data);
+                if (result && typeof result === "object") {
+                    return {
+                        consume: result.consume !== false,
+                        ...(result.data !== undefined ? { data: result.data } : {}),
+                    };
+                }
+            }
+            catch (error) {
+                this.rejectActiveCustomUi(error);
+            }
+            return { consume: true };
+        }
+        let current = data;
+        for (const handler of [...this.terminalInputHandlers]) {
+            const result = handler(current);
+            if (result?.data !== undefined)
+                current = result.data;
+            if (result?.consume === true)
+                return { consume: true };
+        }
+        return current === data ? { consume: false } : { consume: false, data: current };
+    }
+    renderActiveCustomUi(width) {
+        const active = this.activeCustomUi;
+        if (!active)
+            return undefined;
+        try {
+            return active.component.render(width);
+        }
+        catch (error) {
+            return [`${active.key}: custom UI render failed: ${String(error)}`];
+        }
+    }
+    activeCustomUiUsesEditor() {
+        const active = this.activeCustomUi;
+        if (!active)
+            return false;
+        try {
+            return active.component.usesEditor?.() === true;
+        }
+        catch {
+            return false;
+        }
+    }
+    handleCustomUiMouse(event) {
+        const active = this.activeCustomUi;
+        if (!active)
+            return false;
+        try {
+            return active.component.handleMouse?.(event) === true;
+        }
+        catch (error) {
+            this.rejectActiveCustomUi(error);
+            return true;
+        }
+    }
+    widgetTuiHandle() {
+        return {
+            requestRender: () => {
+                if (this.host.isRunning())
+                    this.host.render();
+            },
+            showToast: this.host.toastNotifier.show,
+            toast: this.host.toastNotifier,
+            showMenu: this.host.menuController.show,
+            menu: this.host.menuController,
+            pix: {
+                delegatedEditorInput: true,
+                inputMouse: true,
+            },
+        };
+    }
+    createExtensionUIContext() {
+        const notify = (message, type) => {
+            this.host.showToast(message, isToastKind(type) ? type : "info");
+        };
+        const extensionTheme = this.createExtensionTheme();
+        const renderIfRunning = () => {
+            if (this.host.isRunning())
+                this.host.render();
+        };
+        return {
+            select: async (title, options, opts) => await this.selectDialog(title, options, opts),
+            confirm: async (title, message, opts) => await this.confirmDialog(title, message, opts),
+            input: async (title, placeholder, opts) => await this.inputDialog(title, placeholder, opts),
+            notify,
+            toast: this.host.toastNotifier,
+            aboveInput: this.aboveInputRenderer,
+            renderAboveInput: (key, content) => {
+                this.setAboveInputWidget(key, content);
+            },
+            showMenu: this.host.menuController.show,
+            menu: this.host.menuController,
+            onTerminalInput: (handler) => {
+                const terminalInputHandler = handler;
+                this.terminalInputHandlers.add(terminalInputHandler);
+                return () => {
+                    this.terminalInputHandlers.delete(terminalInputHandler);
+                };
+            },
+            setStatus: (_key, text) => {
+                if (text)
+                    this.host.showToast(text, "info");
+                this.host.restoreSessionStatus();
+                renderIfRunning();
+            },
+            setWorkingMessage: (message) => {
+                if (message)
+                    this.host.showToast(message, "info");
+                this.host.restoreSessionStatus();
+                renderIfRunning();
+            },
+            setWorkingVisible: () => undefined,
+            setWorkingIndicator: () => undefined,
+            setHiddenThinkingLabel: () => undefined,
+            setWidget: ((key, content, options) => {
+                this.setWidget(key, content, options);
+            }),
+            setFooter: () => undefined,
+            setHeader: () => undefined,
+            setTitle: (title) => {
+                process.title = title;
+            },
+            custom: (async (factory) => await this.showCustomUi(factory)),
+            pasteToEditor: (text) => {
+                this.host.setInput(text);
+                renderIfRunning();
+            },
+            setEditorText: (text) => {
+                this.host.setInput(text);
+                renderIfRunning();
+            },
+            getEditorText: () => this.host.getInput(),
+            editor: async (title, prefill) => await this.editorDialog(title, prefill),
+            addAutocompleteProvider: () => undefined,
+            setEditorComponent: () => undefined,
+            getEditorComponent: () => undefined,
+            get theme() {
+                return extensionTheme;
+            },
+            getAllThemes: () => Object.keys(THEMES).map((themeName) => ({ name: themeName, path: undefined })),
+            getTheme: () => undefined,
+            setTheme: () => ({ success: false, error: "Theme switching is not implemented in pix extension UI yet." }),
+            getToolsExpanded: () => this.host.entries.some((entry) => entry.kind === "tool" && entry.expanded),
+            setToolsExpanded: (expanded) => {
+                for (const entry of this.host.entries) {
+                    if (entry.kind === "tool") {
+                        entry.expanded = expanded;
+                        this.host.deleteConversationEntry(entry.id);
+                    }
+                }
+                renderIfRunning();
+            },
+        };
+    }
+    setAboveInputWidget(key, content) {
+        this.setWidget(key, content, { placement: "aboveEditor" });
+    }
+    clearAboveInputWidget(key) {
+        this.setWidget(key, undefined, { placement: "aboveEditor" });
+    }
+    async selectDialog(title, options, opts) {
+        if (opts?.signal?.aborted)
+            return undefined;
+        return await this.withDialogAutoDismiss(this.host.menuController.select(title, options, { preserveStatus: true }), opts, () => {
+            this.host.menuController.close();
+        });
+    }
+    async confirmDialog(title, message, opts) {
+        if (opts?.signal?.aborted)
+            return false;
+        const selected = await this.withDialogAutoDismiss(this.host.menuController.show([
+            { value: true, label: "Yes", description: message },
+            { value: false, label: "No" },
+        ], { title, searchable: false, preserveStatus: true }), opts, () => {
+            this.host.menuController.close();
+        });
+        return selected === true;
+    }
+    async inputDialog(title, placeholder, opts) {
+        if (opts?.signal?.aborted)
+            return undefined;
+        return await this.editorBackedDialog({
+            title,
+            initialValue: "",
+            mode: "input",
+            ...(placeholder === undefined ? {} : { placeholder }),
+            ...(opts === undefined ? {} : { opts }),
+        });
+    }
+    async editorDialog(title, prefill = "") {
+        return await this.editorBackedDialog({
+            title,
+            initialValue: prefill,
+            mode: "editor",
+        });
+    }
+    async editorBackedDialog(options) {
+        if (options.opts?.signal?.aborted)
+            return undefined;
+        if (!this.host.isRunning())
+            return undefined;
+        if (this.activeCustomUi)
+            throw new Error("Another extension custom UI is already active.");
+        const savedInput = this.host.getInput();
+        this.host.setInput(options.initialValue);
+        const promise = this.showCustomUi((_tui, _theme, _keybindings, done) => {
+            let settled = false;
+            const finish = (value) => {
+                if (settled)
+                    return;
+                settled = true;
+                done(value);
+            };
+            return {
+                render: (width) => this.renderEditorBackedDialog(options, width),
+                usesEditor: () => true,
+                handleInput: (data) => {
+                    if (data === "\x1b") {
+                        finish(undefined);
+                        return { consume: true };
+                    }
+                    if (data === "\r" || data === "\n") {
+                        finish(this.host.getInput());
+                        return { consume: true };
+                    }
+                    return { consume: false, data };
+                },
+            };
+        }, { savedInput });
+        return await this.withDialogAutoDismiss(promise, options.opts, () => {
+            this.cancelActiveCustomUi();
+        });
+    }
+    renderEditorBackedDialog(options, width) {
+        const hint = options.mode === "editor"
+            ? "Enter accepts · Shift+Enter inserts newline · Esc cancels"
+            : "Enter accepts · Esc cancels";
+        return [
+            this.dialogLine(options.title, width),
+            ...(options.placeholder ? [this.dialogLine(`Placeholder: ${options.placeholder}`, width)] : []),
+            this.dialogLine(hint, width),
+        ];
+    }
+    dialogLine(text, width) {
+        return ellipsizeDisplay(sanitizeText(text), Math.max(1, width));
+    }
+    async withDialogAutoDismiss(promise, opts, cancel) {
+        let timeout;
+        const abort = () => {
+            cancel();
+        };
+        if (opts?.signal)
+            opts.signal.addEventListener("abort", abort, { once: true });
+        if (opts?.timeout !== undefined && opts.timeout >= 0) {
+            timeout = setTimeout(abort, opts.timeout);
+            timeout.unref?.();
+        }
+        try {
+            return await promise;
+        }
+        finally {
+            if (timeout)
+                clearTimeout(timeout);
+            opts?.signal?.removeEventListener("abort", abort);
+        }
+    }
+    async showCustomUi(factory, options = {}) {
+        if (!this.host.isRunning())
+            return undefined;
+        if (this.activeCustomUi)
+            throw new Error("Another extension custom UI is already active.");
+        const savedInput = options.savedInput ?? this.host.getInput();
+        return await new Promise((resolve, reject) => {
+            let settled = false;
+            const done = (value) => {
+                if (settled)
+                    return;
+                settled = true;
+                this.finishActiveCustomUi(value, { resolve: true });
+                resolve(value);
+            };
+            void (async () => {
+                try {
+                    const component = await factory(this.widgetTuiHandle(), this.createExtensionTheme(), {}, done);
+                    if (settled) {
+                        component.dispose?.();
+                        return;
+                    }
+                    this.activeCustomUi = {
+                        key: CUSTOM_UI_WIDGET_KEY,
+                        component,
+                        savedInput,
+                        resolve: (value) => {
+                            if (settled)
+                                return;
+                            settled = true;
+                            resolve(value);
+                        },
+                        reject: (error) => {
+                            if (settled)
+                                return;
+                            settled = true;
+                            reject(error);
+                        },
+                    };
+                    if (this.host.isRunning())
+                        this.host.render();
+                }
+                catch (error) {
+                    if (settled)
+                        return;
+                    settled = true;
+                    reject(error);
+                }
+            })();
+        });
+    }
+    cancelActiveCustomUi() {
+        this.finishActiveCustomUi(undefined, { resolve: true });
+    }
+    rejectActiveCustomUi(error) {
+        this.finishActiveCustomUi(error, { resolve: false });
+    }
+    finishActiveCustomUi(value, options) {
+        const active = this.activeCustomUi;
+        if (!active)
+            return;
+        this.activeCustomUi = undefined;
+        if (this.host.getInput() !== active.savedInput)
+            this.host.setInput(active.savedInput);
+        try {
+            active.component.dispose?.();
+        }
+        catch {
+            // Ignore extension cleanup failures while closing focused UI.
+        }
+        try {
+            active.component.invalidate?.();
+        }
+        catch {
+            // Ignore extension invalidation failures while closing focused UI.
+        }
+        if (options.resolve)
+            active.resolve(value);
+        else
+            active.reject(value);
+        if (this.host.isRunning())
+            this.host.render();
+    }
+    invalidateWidget(widget) {
+        try {
+            widget.component?.dispose?.();
+        }
+        catch {
+            // Ignore widget cleanup failures; extensions can re-register on the next session event.
+        }
+        try {
+            widget.component?.invalidate?.();
+        }
+        catch {
+            // Ignore widget invalidation failures for the same reason.
+        }
+    }
+}
+function extensionForegroundColor(colors, color) {
+    switch (color) {
+        case "accent":
+        case "borderAccent":
+        case "customMessageLabel":
+        case "mdHeading":
+        case "mdLink":
+        case "mdListBullet":
+        case "selectedAccent":
+        case "toolTitle":
+            return colors.accent;
+        case "success":
+            return colors.success;
+        case "error":
+            return colors.error;
+        case "warning":
+            return colors.warning;
+        case "info":
+        case "bashMode":
+            return colors.info;
+        case "muted":
+        case "dim":
+        case "border":
+        case "borderMuted":
+            return colors.muted;
+        case "selectedText":
+        case "popupSelectedForeground":
+            return colors.popupSelectedForeground;
+        case "inputText":
+            return colors.inputForeground;
+        case "toolDiffAdded":
+            return colors.success;
+        case "toolDiffRemoved":
+            return colors.error;
+        case "syntaxComment":
+            return colors.muted;
+        case "syntaxKeyword":
+        case "syntaxFunction":
+        case "syntaxType":
+            return colors.accent;
+        case "syntaxString":
+            return colors.success;
+        case "syntaxNumber":
+            return colors.warning;
+        case "thinkingText":
+        case "userMessageText":
+        case "customMessageText":
+        case "toolOutput":
+        case "text":
+        default:
+            return colors.foreground;
+    }
+}
+function extensionBackgroundColor(colors, color) {
+    switch (color) {
+        case "selectedBg":
+        case "popupSelectedBackground":
+            return colors.popupSelectedBackground;
+        case "popupHeaderBackground":
+        case "headerBg":
+            return colors.popupHeaderBackground;
+        case "inputBg":
+            return colors.inputBackground;
+        case "toolErrorBg":
+            return colors.error;
+        case "toolPendingBg":
+            return colors.warning;
+        case "toolSuccessBg":
+            return colors.success;
+        case "userMessageBg":
+            return colors.userMessageBackground;
+        case "customMessageBg":
+        case "popupBg":
+        default:
+            return colors.popupBackground;
+    }
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/dist/app/file-link-opener.d.ts

@@ -0,0 +1,2 @@
+import type { RenderedLink } from "./file-links.js";
+export declare function openFileLink(link: RenderedLink): boolean;

package/dist/app/file-link-opener.js

@@ -0,0 +1,66 @@
+import { existsSync } from "node:fs";
+import { spawn } from "node:child_process";
+import { delimiter, join } from "node:path";
+import { fileURLToPath } from "node:url";
+export function openFileLink(link) {
+    const filePath = link.filePath ?? filePathFromUrl(link.url);
+    if (!filePath)
+        return false;
+    const target = zedTarget(filePath, link.line, link.column);
+    const candidates = zedCommandCandidates();
+    if (trySpawnCandidates(candidates, [target]))
+        return true;
+    if (process.platform === "darwin")
+        return spawnDetached("open", ["-a", "Zed", filePath]);
+    return false;
+}
+function filePathFromUrl(url) {
+    if (!url.startsWith("file://"))
+        return undefined;
+    try {
+        return fileURLToPath(url);
+    }
+    catch {
+        return undefined;
+    }
+}
+function zedTarget(filePath, line, column) {
+    if (line === undefined)
+        return filePath;
+    return column === undefined ? `${filePath}:${line}` : `${filePath}:${line}:${column}`;
+}
+function zedCommandCandidates() {
+    const candidates = [process.env.ZED_CLI, "zed", "zeditor"];
+    if (process.platform === "darwin")
+        candidates.push("/opt/homebrew/bin/zed", "/usr/local/bin/zed");
+    return candidates.filter((candidate) => Boolean(candidate));
+}
+function trySpawnCandidates(candidates, args) {
+    for (const command of candidates) {
+        if (command.includes("/") && !existsSync(command))
+            continue;
+        if (!command.includes("/") && !commandOnPath(command))
+            continue;
+        if (spawnDetached(command, args))
+            return true;
+    }
+    return false;
+}
+function commandOnPath(command) {
+    const pathEntries = process.env.PATH?.split(delimiter) ?? [];
+    const extensions = process.platform === "win32"
+        ? (process.env.PATHEXT?.split(";") ?? [".EXE", ".CMD", ".BAT", ".COM"])
+        : [""];
+    return pathEntries.some((entry) => extensions.some((extension) => existsSync(join(entry, `${command}${extension}`))));
+}
+function spawnDetached(command, args) {
+    try {
+        const child = spawn(command, args, { detached: true, stdio: "ignore" });
+        child.on("error", () => { });
+        child.unref();
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/app/file-links.d.ts

@@ -0,0 +1,10 @@
+export type RenderedLink = {
+    start: number;
+    end: number;
+    url: string;
+    filePath?: string;
+    line?: number | undefined;
+    column?: number | undefined;
+};
+export declare function detectFileLinks(text: string, cwd: string | undefined): RenderedLink[];
+export declare function hyperlink(text: string, url: string): string;