pi-sdk-web 0.5.13 → 0.5.15

package/dist/server.js

@@ -91,7 +91,12 @@ export class PiWebServer {
         this.runtime = runtime;
         this.port = options.port ?? DEFAULT_PORT;
         this.staticDir = options.staticDir ?? STATIC_DIR;
-        this.uiContext = new WebUIContext((obj) => this.broadcast(obj));
+        this.uiContext = new WebUIContext((obj) => this.broadcast(obj), {
+            // Dialog timeout tier: with a browser attached the user may step away,
+            // so dialogs wait long; with none attached they settle after a short
+            // grace period instead of blocking the agent loop forever.
+            hasClients: () => this.clients.size > 0,
+        });
     }
     // ------------------------------------------------------------------
     // Lifecycle
@@ -325,6 +330,13 @@ export class PiWebServer {
                 widgetPlacement: w.placement,
             });
         }
+        // Pending extension dialogs (select/confirm/input/editor): the request may
+        // have been broadcast while this browser was away (closed tab, reload), so
+        // re-send it - otherwise the dialog would sit here unanswered and block the
+        // agent loop. The id is preserved so the response resolves the same dialog.
+        for (const request of this.uiContext.getPendingDialogs()) {
+            this.sendJson(ws, { type: "extension_ui_request", ...request });
+        }
     }
     sendJson(ws, obj) {
         if (ws.readyState === WebSocket.OPEN) {
@@ -882,22 +894,37 @@ export class PiWebServer {
             }
         };
         const unsubscribe = this.session.subscribe(listener);
-        // hasUI by extension: most extensions degrade gracefully to notify()
-        // (our notify -> browser dialog/toast), but a few (magic-context) use
-        // ctx.ui.custom() - an extension-drawn TUI panel we can't render. For
-        // those, hasUI:false routes them to their own text fallback
-        // (appendEntry -> modal), same as before.
+        // hasUI per extension: extensions whose command handler draws a TUI
+        // panel via ctx.ui.custom() when hasUI=true need hasUI:false so they
+        // use their text fallback instead (pi-web can't render custom()).
+        // magic-context /ctx-status -> appendEntry (custom entry -> modal);
+        // aft-pi /aft-status (its only command) -> ui.notify(text).
+        // Everything else gets hasUI:true so notify-based output works.
         const cmdPath = (cmd.sourceInfo && cmd.sourceInfo.path) || "";
-        const customOnly = /pi-magic-context|magic-context/.test(cmdPath);
+        const customOnly = /pi-magic-context|magic-context|aft-pi/.test(cmdPath);
+        // While a command runs, tag extension notify() broadcasts with the
+        // command name as title so the browser renders them as a titled,
+        // Markdown modal (e.g. /ctx-status, /aft-status) - the command's status
+        // report is a dialog, not a transient stream line. Restores the design
+        // in 68b56f1 (recorded in pi-web-design.md §14.9); 41112f5 had dropped
+        // the wrapping, so command notifies fell back to persistent status
+        // lines while custom-entry commands (/ctx-status) kept the modal.
+        const ui = this.uiContext;
+        const originalSink = ui.sink;
         try {
-            // No sink wrapping: notify() broadcasts go through as-is (no title),
-            // so the frontend renders them as persistent status lines - the same
-            // as TUI's notify -> showStatus (a dim line appended to the chat),
-            // whether or not they come from a command. Command *results* (custom
-            // entries) still become titled modals via the captured entries below.
+            ui.sink = (obj) => {
+                const req = obj;
+                if (req && req.method === "notify") {
+                    originalSink({ ...obj, title: `/${name}` });
+                }
+                else {
+                    originalSink(obj);
+                }
+            };
             await cmd.handler(args, this.buildCommandContext(customOnly ? false : true));
         }
         finally {
+            ui.sink = originalSink;
             unsubscribe();
         }
         // Show command output as a modal (TUI-like). The session entry remains

package/dist/static/app.js

@@ -375,6 +375,9 @@ class PiWebClient {
       case 'ext_status':
         this.applyExtStatusSnapshot(data.data);
         break;
+      case 'dialog_dismissed':
+        this.dismissExtensionDialog(data);
+        break;
       case 'extension_ui_request':
         this.handleExtensionUIRequest(data);
         break;
@@ -1996,6 +1999,21 @@ class PiWebClient {
     });
   }
 
+  /** Server-side dismissal (timeout / abort / session switch): the dialog was
+   * already settled server-side, so close the modal and say why - do NOT send
+   * an extension_ui_response (there is nothing left to answer). */
+  dismissExtensionDialog({ id, reason } = {}) {
+    if (!id || !this.currentExtRequest || this.currentExtRequest.id !== id) return;
+    const title = this.currentExtRequest.title || 'Dialog';
+    const why =
+      reason === 'aborted' ? 'operation aborted'
+      : reason === 'session-switch' ? 'session switched'
+      : 'no answer received in time';
+    this.currentExtRequest = null; // closeModal() must not answer for us
+    this.closeModal();
+    this.appendNotifyLine(`${title} — auto-dismissed (${why})`, 'warning');
+  }
+
   openExtensionNotify(req) {
     // Command output notifications (title starts with "/", e.g. /ctx-status) keep
     // the modal. Other extension notifies are appended to the chat stream as

package/dist/ui-context.js

@@ -2,6 +2,22 @@ import { Theme as PiTheme } from "@earendil-works/pi-coding-agent";
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
+/**
+ * Default dialog timeouts (pi-web specific guard).
+ *
+ * TUI and RPC block until the client answers - the user is at the terminal, or
+ * the RPC client owns the timeout. A browser tab can be closed mid-turn, so a
+ * dialog nobody can see would block the agent loop forever. Two tiers:
+ *
+ * - browser attached: the user may have stepped away; wait long, then settle
+ *   with the dialog's default value (confirm -> false, others -> undefined);
+ * - no browser attached: a closed tab must not stall the loop, but a page
+ *   reload/reconnect takes a moment - short grace period, not instant.
+ *
+ * Extensions that pass their own `timeout` (ms) keep it.
+ */
+const DIALOG_TIMEOUT_MS = 10 * 60_000;
+const DIALOG_TIMEOUT_NO_CLIENT_MS = 60_000;
 /**
  * Load a Pi theme (dark.json/light.json colors) so extensions calling
  * ui.theme.fg("accent", text) / .bg(...) get REAL ANSI escapes — identical
@@ -69,12 +85,18 @@ export class WebUIContext {
     /** Latest setWidget lines per key (persistent widgets, e.g. TodoOverlay):
      * replayed to late-connecting browsers like setStatus snapshots. */
     widgetMap = new Map();
+    hasClients;
+    dialogTimeoutMs;
+    dialogTimeoutNoClientMs;
     /** Current widget snapshot (key -> lines) for new connections. */
     getWidgetSnapshot() {
         return Object.fromEntries(this.widgetMap);
     }
-    constructor(sink) {
+    constructor(sink, options = {}) {
         this.sink = sink;
+        this.hasClients = options.hasClients ?? (() => false);
+        this.dialogTimeoutMs = options.dialogTimeoutMs ?? DIALOG_TIMEOUT_MS;
+        this.dialogTimeoutNoClientMs = options.dialogTimeoutNoClientMs ?? DIALOG_TIMEOUT_NO_CLIENT_MS;
         // Pi's ExtensionRunner wraps the ui context with `{...ui}` (a shallow
         // spread) when building the extension ctx - class prototype members
         // (methods AND the theme getter) would be LOST by that spread (only own
@@ -106,23 +128,26 @@ export class WebUIContext {
     }
     /** Drop state tied to the previous session (dialogs + status snapshots). */
     clearSessionState() {
-        for (const pending of this.pending.values()) {
-            if (pending.timer)
-                clearTimeout(pending.timer);
+        // Copy first: settling deletes from the map while we iterate.
+        for (const [id, pending] of [...this.pending.entries()]) {
             pending.resolve(undefined);
+            // The browser may still show the dialog; close it there too.
+            this.dismissDialog(id, "session-switch");
         }
         this.pending.clear();
         this.statusMap.clear();
         this.widgetMap.clear();
     }
+    /** Pending dialogs (wire payloads) for replay to a newly connected browser. */
+    getPendingDialogs() {
+        return [...this.pending.values()].map((entry) => entry.request);
+    }
     /** Handle a browser `extension_ui_response` message. */
     respond(id, response) {
         const pending = this.pending.get(id);
         if (!pending)
             return false;
-        this.pending.delete(id);
-        if (pending.timer)
-            clearTimeout(pending.timer);
+        // Cleanup happens inside settle() (timer / abort listener / map entry).
         if (response.cancelled) {
             pending.resolve(undefined);
         }
@@ -134,19 +159,56 @@ export class WebUIContext {
         }
         return true;
     }
-    createDialog(request, defaultValue, parse) {
+    /** Tell the browser to close a dialog that already settled server-side. */
+    dismissDialog(id, reason) {
+        this.sink({ type: "dialog_dismissed", id, reason });
+    }
+    createDialog(request, opts, defaultValue, parse) {
         const id = crypto.randomUUID();
+        // Same as Pi's RPC/TUI: an already-aborted dialog settles immediately.
+        if (opts?.signal?.aborted)
+            return Promise.resolve(defaultValue);
         return new Promise((resolve) => {
-            const timeoutMs = typeof request.timeout === "number" ? request.timeout : undefined;
-            const timer = timeoutMs
-                ? setTimeout(() => {
-                    this.pending.delete(id);
-                    resolve(defaultValue);
-                }, timeoutMs)
-                : undefined;
+            let settled = false;
+            const cleanup = () => {
+                const entry = this.pending.get(id);
+                if (!entry)
+                    return;
+                if (entry.timer)
+                    clearTimeout(entry.timer);
+                if (entry.signal && entry.onAbort)
+                    entry.signal.removeEventListener("abort", entry.onAbort);
+                this.pending.delete(id);
+            };
+            const settle = (value, useDefault) => {
+                if (settled)
+                    return;
+                settled = true;
+                cleanup();
+                resolve(useDefault ? defaultValue : parse(value));
+            };
+            // Extension timeout (ms) wins; otherwise the web guard applies so a
+            // closed browser cannot block the agent loop forever.
+            const timeoutMs = typeof opts?.timeout === "number"
+                ? opts.timeout
+                : this.hasClients()
+                    ? this.dialogTimeoutMs
+                    : this.dialogTimeoutNoClientMs;
+            const timer = setTimeout(() => {
+                settle(undefined, true);
+                this.dismissDialog(id, "timeout");
+            }, timeoutMs);
+            const onAbort = () => {
+                settle(undefined, true);
+                this.dismissDialog(id, "aborted");
+            };
+            opts?.signal?.addEventListener("abort", onAbort, { once: true });
             this.pending.set(id, {
-                resolve: (value) => resolve(parse(value)),
+                resolve: (value) => settle(value, false),
+                request: { ...request, id },
                 timer,
+                signal: opts?.signal,
+                onAbort,
             });
             this.sink({ type: "extension_ui_request", id, ...request });
         });
@@ -155,16 +217,16 @@ export class WebUIContext {
     // Dialogs (browser resolves via extension_ui_response)
     // ------------------------------------------------------------------
     select(title, options, opts) {
-        return this.createDialog({ method: "select", title, options, timeout: opts?.timeout }, undefined, (v) => (typeof v === "string" ? v : undefined));
+        return this.createDialog({ method: "select", title, options, timeout: opts?.timeout }, opts, undefined, (v) => (typeof v === "string" ? v : undefined));
     }
     confirm(title, message, opts) {
-        return this.createDialog({ method: "confirm", title, message, timeout: opts?.timeout }, false, (v) => v === true);
+        return this.createDialog({ method: "confirm", title, message, timeout: opts?.timeout }, opts, false, (v) => v === true);
     }
     input(title, placeholder, opts) {
-        return this.createDialog({ method: "input", title, placeholder, timeout: opts?.timeout }, undefined, (v) => (typeof v === "string" ? v : undefined));
+        return this.createDialog({ method: "input", title, placeholder, timeout: opts?.timeout }, opts, undefined, (v) => (typeof v === "string" ? v : undefined));
     }
     editor(title, prefill) {
-        return this.createDialog({ method: "editor", title, prefill }, undefined, (v) => typeof v === "string" ? v : undefined);
+        return this.createDialog({ method: "editor", title, prefill }, undefined, undefined, (v) => typeof v === "string" ? v : undefined);
     }
     // ------------------------------------------------------------------
     // Fire-and-forget UI events (broadcast to browser)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-sdk-web",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "Browser Web access for Pi (AI coding agent) via the Pi SDK - standalone module, zero modification to Pi itself",
   "type": "module",
   "bin": {