@larose/pi-web 0.3.0

package/dist/server/extension-ui.js

@@ -0,0 +1,245 @@
+import { randomUUID } from "node:crypto";
+import { Theme } from "@earendil-works/pi-coding-agent";
+// The browser supplies its own colors. Extensions still need a complete Theme
+// object for formatting status and widget text, so keep those operations plain.
+class PlainTextTheme extends Theme {
+    constructor() {
+        super({ text: "", muted: "", thinkingXhigh: "", searchMatchText: "" }, { selectedBg: "" }, "truecolor");
+    }
+    fg(...[, text]) {
+        return text;
+    }
+    bg(...[, text]) {
+        return text;
+    }
+    bold(text) {
+        return text;
+    }
+    italic(text) {
+        return text;
+    }
+    underline(text) {
+        return text;
+    }
+    inverse(text) {
+        return text;
+    }
+    strikethrough(text) {
+        return text;
+    }
+    getFgAnsi() {
+        return "";
+    }
+    getBgAnsi() {
+        return "";
+    }
+    getThinkingBorderColor() {
+        return (text) => text;
+    }
+    getBashModeBorderColor() {
+        return (text) => text;
+    }
+}
+const plainTextTheme = new PlainTextTheme();
+export class WebExtensionUI {
+    pending = new Map();
+    statuses = new Map();
+    widgets = new Map();
+    publisher;
+    queuedEvents = [];
+    available = true;
+    context = {
+        select: (title, options, opts) => this.request({ method: "select", title, options: [...options] }, undefined, (response) => ("value" in response ? response.value : undefined), opts),
+        confirm: (title, message, opts) => this.request({ method: "confirm", title, message }, false, (response) => ("confirmed" in response ? response.confirmed : false), opts),
+        input: (title, placeholder, opts) => this.request({ method: "input", title, ...(placeholder === undefined ? {} : { placeholder }) }, undefined, (response) => ("value" in response ? response.value : undefined), opts),
+        editor: (title, prefill) => this.request({ method: "editor", title, ...(prefill === undefined ? {} : { prefill }) }, undefined, (response) => "value" in response ? response.value : undefined),
+        notify: (message, type) => this.emit({
+            type: "extension_ui_request",
+            id: randomUUID(),
+            method: "notify",
+            message,
+            ...(type === undefined ? {} : { notifyType: type }),
+        }),
+        onTerminalInput: () => () => undefined,
+        setStatus: (key, text) => {
+            if (text === undefined) {
+                this.statuses.delete(key);
+            }
+            else {
+                this.statuses.set(key, text);
+            }
+            this.emit({
+                type: "extension_ui_request",
+                id: randomUUID(),
+                method: "setStatus",
+                statusKey: key,
+                ...(text === undefined ? {} : { statusText: text }),
+            });
+        },
+        setWorkingMessage: () => undefined,
+        setWorkingVisible: () => undefined,
+        setWorkingIndicator: () => undefined,
+        setHiddenThinkingLabel: () => undefined,
+        setWidget: (key, content, options) => {
+            if (content !== undefined && !Array.isArray(content)) {
+                return;
+            }
+            const placement = options?.placement ?? "aboveEditor";
+            if (content === undefined) {
+                this.widgets.delete(key);
+            }
+            else {
+                this.widgets.set(key, { lines: [...content], placement });
+            }
+            this.emit({
+                type: "extension_ui_request",
+                id: randomUUID(),
+                method: "setWidget",
+                widgetKey: key,
+                ...(content === undefined ? {} : { widgetLines: [...content] }),
+                ...(options?.placement === undefined ? {} : { widgetPlacement: options.placement }),
+            });
+        },
+        setFooter: () => undefined,
+        setHeader: () => undefined,
+        setTitle: (title) => this.emit({
+            type: "extension_ui_request",
+            id: randomUUID(),
+            method: "setTitle",
+            title,
+        }),
+        custom: async () => undefined,
+        pasteToEditor: (text) => this.emit({
+            type: "extension_ui_request",
+            id: randomUUID(),
+            method: "set_editor_text",
+            text,
+        }),
+        setEditorText: (text) => this.emit({
+            type: "extension_ui_request",
+            id: randomUUID(),
+            method: "set_editor_text",
+            text,
+        }),
+        getEditorText: () => "",
+        addAutocompleteProvider: () => undefined,
+        setEditorComponent: () => undefined,
+        getEditorComponent: () => undefined,
+        get theme() {
+            return plainTextTheme;
+        },
+        getAllThemes: () => [],
+        getTheme: () => undefined,
+        setTheme: () => ({ success: false, error: "Theme switching is not supported in Pi Web" }),
+        getToolsExpanded: () => false,
+        setToolsExpanded: () => undefined,
+    };
+    setPublisher(publisher) {
+        this.publisher = publisher;
+        const queued = this.queuedEvents;
+        this.queuedEvents = [];
+        for (const event of queued) {
+            publisher(event);
+        }
+        return () => {
+            if (this.publisher === publisher) {
+                this.publisher = undefined;
+            }
+        };
+    }
+    snapshot() {
+        return {
+            pending: [...this.pending.values()].map(({ request }) => ({ ...request })),
+            statuses: [...this.statuses].map(([key, text]) => ({ key, text })),
+            widgets: [...this.widgets].map(([key, widget]) => ({
+                key,
+                lines: [...widget.lines],
+                placement: widget.placement,
+            })),
+        };
+    }
+    respond(response) {
+        const dialog = this.pending.get(response.id);
+        if (!dialog) {
+            return false;
+        }
+        this.settle(response.id, dialog.parse(response));
+        return true;
+    }
+    cancelPending() {
+        for (const [id, dialog] of [...this.pending]) {
+            this.settle(id, dialog.defaultValue);
+        }
+    }
+    reset() {
+        this.cancelPending();
+        this.statuses.clear();
+        this.widgets.clear();
+        this.emit({ type: "extension_ui_reset" });
+    }
+    dispose() {
+        if (!this.available) {
+            return;
+        }
+        this.reset();
+        this.available = false;
+        this.publisher = undefined;
+        this.queuedEvents = [];
+    }
+    request(request, defaultValue, parse, options) {
+        if (!this.available || options?.signal?.aborted) {
+            return Promise.resolve(defaultValue);
+        }
+        const id = randomUUID();
+        const fullRequest = {
+            id,
+            ...request,
+            ...(options?.timeout === undefined ? {} : { timeout: options.timeout }),
+        };
+        return new Promise((resolve) => {
+            const pending = {
+                request: fullRequest,
+                defaultValue,
+                parse,
+                resolve,
+                ...(options?.signal === undefined ? {} : { signal: options.signal }),
+            };
+            if (options?.timeout !== undefined) {
+                pending.timeout = setTimeout(() => this.settle(id, defaultValue), options.timeout);
+                pending.timeout.unref();
+            }
+            if (options?.signal) {
+                pending.abort = () => this.settle(id, defaultValue);
+                options.signal.addEventListener("abort", pending.abort, { once: true });
+            }
+            this.pending.set(id, pending);
+            this.emit({ type: "extension_ui_request", ...fullRequest });
+        });
+    }
+    settle(id, value) {
+        const dialog = this.pending.get(id);
+        if (!dialog) {
+            return;
+        }
+        this.pending.delete(id);
+        if (dialog.timeout) {
+            clearTimeout(dialog.timeout);
+        }
+        if (dialog.signal && dialog.abort) {
+            dialog.signal.removeEventListener("abort", dialog.abort);
+        }
+        dialog.resolve(value);
+        this.emit({ type: "extension_ui_closed", id });
+    }
+    emit(event) {
+        if (!this.available) {
+            return;
+        }
+        if (this.publisher) {
+            this.publisher(event);
+        }
+        else {
+            this.queuedEvents.push(event);
+        }
+    }
+}