pi-sdk-web 0.5.14 → 0.5.16

package/dist/server.js

@@ -91,6 +91,9 @@ export class PiWebServer {
         this.runtime = runtime;
         this.port = options.port ?? DEFAULT_PORT;
         this.staticDir = options.staticDir ?? STATIC_DIR;
+        // Dialog timeouts follow client presence (see WebUIContext): attached ->
+        // wait indefinitely (TUI parity), detached -> fallback guard so a closed
+        // tab cannot block the agent loop. handleConnection / ws close update it.
         this.uiContext = new WebUIContext((obj) => this.broadcast(obj));
     }
     // ------------------------------------------------------------------
@@ -239,6 +242,8 @@ export class PiWebServer {
             catch {
                 // One broken client must not block delivery to the others
                 this.clients.delete(client);
+                if (this.clients.size === 0)
+                    this.uiContext.setBrowserAttached(false);
             }
         }
     }
@@ -301,8 +306,17 @@ export class PiWebServer {
     // ------------------------------------------------------------------
     handleConnection(ws) {
         this.clients.add(ws);
-        ws.on("close", () => this.clients.delete(ws));
-        ws.on("error", () => this.clients.delete(ws));
+        // A browser is watching again: pending dialogs stop counting down (see
+        // WebUIContext.setBrowserAttached) - the user gets unlimited time.
+        this.uiContext.setBrowserAttached(true);
+        const onGone = () => {
+            this.clients.delete(ws);
+            // Last browser left: arm the fallback so dialogs cannot block the loop.
+            if (this.clients.size === 0)
+                this.uiContext.setBrowserAttached(false);
+        };
+        ws.on("close", onGone);
+        ws.on("error", onGone);
         ws.on("message", (data) => this.handleClientMessage(ws, String(data)));
         // Initial state (state + history), mirroring the Python bridge
         this.sendJson(ws, { type: "state", data: this.buildState() });
@@ -325,6 +339,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) {

package/dist/static/app.js

@@ -204,6 +204,8 @@ class PiWebClient {
     this.modalList = document.getElementById('modal-list');
     this.modalClose = document.getElementById('modal-close');
     this.modalMode = null; // 'model' | 'thinking'
+    this.dialogCountdownTimer = null; // extension dialog countdown (TUI parity)
+    this.dialogCountdownBase = '';
     this.hasConnectedBefore = false;
     this.commandMenuIndex = -1;
     this.extStatus = {};
@@ -375,6 +377,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;
@@ -1791,6 +1796,7 @@ class PiWebClient {
 
   openModal(title, mode) {
     this.modalMode = mode;
+    this.stopDialogCountdown();
     this.modalTitle.textContent = title;
     this.modalSearch.value = '';
     this.modalList.innerHTML = '';
@@ -1798,6 +1804,29 @@ class PiWebClient {
     this.modalSearch.focus();
   }
 
+  /** Countdown for extension dialogs that carry a deadline (an extension's own
+   * opts.timeout). TUI shows the same "(Ns)" ticker; without a deadline the
+   * dialog waits indefinitely while a browser is attached. */
+  startDialogCountdown(req) {
+    this.stopDialogCountdown();
+    if (!req || typeof req.deadline !== 'number') return;
+    this.dialogCountdownBase = this.modalTitle.textContent || '';
+    const tick = () => {
+      const remain = Math.max(0, Math.ceil((req.deadline - Date.now()) / 1000));
+      this.modalTitle.textContent = `${this.dialogCountdownBase} (${remain}s)`;
+      if (remain <= 0) this.stopDialogCountdown();
+    };
+    tick();
+    this.dialogCountdownTimer = setInterval(tick, 1000);
+  }
+
+  stopDialogCountdown() {
+    if (this.dialogCountdownTimer) {
+      clearInterval(this.dialogCountdownTimer);
+      this.dialogCountdownTimer = null;
+    }
+  }
+
   closeModal() {
     // If an extension dialog (select/confirm/input/editor) was open, notify
     // the server that it was cancelled - otherwise the extension's promise
@@ -1811,6 +1840,7 @@ class PiWebClient {
     this.modalSearch.style.display = 'block';
     this.modalMode = null;
     this.currentExtRequest = null;
+    this.stopDialogCountdown();
     this.inputEl.focus();
   }
 
@@ -1917,6 +1947,7 @@ class PiWebClient {
   openExtensionSelect(req) {
     this.openModal(req.title || 'Select', 'extension-select');
     this.currentExtRequest = req;
+    this.startDialogCountdown(req);
     this.modalSearch.style.display = 'block';
     const items = (req.options || []).map((opt) => ({ name: opt, desc: '', value: opt }));
     this.renderModalItems(items, (item) => {
@@ -1927,6 +1958,7 @@ class PiWebClient {
   openExtensionConfirm(req) {
     this.openModal(req.title || 'Confirm', 'extension-confirm');
     this.currentExtRequest = req;
+    this.startDialogCountdown(req);
     this.modalSearch.style.display = 'none';
     this.modalList.innerHTML = `
       <div class="modal-message">${this.escapeHtml(req.message || '')}</div>
@@ -1947,6 +1979,7 @@ class PiWebClient {
   openExtensionInput(req) {
     this.openModal(req.title || 'Input', 'extension-input');
     this.currentExtRequest = req;
+    this.startDialogCountdown(req);
     this.modalSearch.style.display = 'none';
     this.modalList.innerHTML = `
       <div class="modal-message">${this.escapeHtml(req.message || '')}</div>
@@ -1976,6 +2009,7 @@ class PiWebClient {
   openExtensionEditor(req) {
     this.openModal(req.title || 'Editor', 'extension-editor');
     this.currentExtRequest = req;
+    this.startDialogCountdown(req);
     this.modalSearch.style.display = 'none';
     this.modalList.innerHTML = `
       <div class="modal-message">${this.escapeHtml(req.title || '')}</div>
@@ -1996,6 +2030,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,25 @@ 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";
+/**
+ * Fallback dialog timeout (pi-web specific guard).
+ *
+ * TUI and RPC wait for an answer indefinitely - the user is at the terminal,
+ * or the RPC client owns the timeout. With a browser attached pi-web does the
+ * same: a dialog waits forever, so an answer is never taken away from the user
+ * just because they were busy elsewhere.
+ *
+ * The one case that needs a guard is a browser that is NOT attached (tab
+ * closed mid-turn): nobody can answer, and an extension awaiting the dialog
+ * would block the agent loop forever. Then - and only then - the dialog
+ * settles after this grace period with its default value (confirm -> false,
+ * others -> undefined). Reconnecting cancels the fallback, so a user who comes
+ * back gets as much time as they need.
+ *
+ * Extensions that pass their own `timeout` (ms) keep it exactly (that timer is
+ * their decision, never cancelled here).
+ */
+const DIALOG_FALLBACK_TIMEOUT_MS = 10 * 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 +88,16 @@ export class WebUIContext {
     /** Latest setWidget lines per key (persistent widgets, e.g. TodoOverlay):
      * replayed to late-connecting browsers like setStatus snapshots. */
     widgetMap = new Map();
+    fallbackTimeoutMs;
+    /** Whether a browser is attached right now (updated by the server). */
+    browserAttached = false;
     /** Current widget snapshot (key -> lines) for new connections. */
     getWidgetSnapshot() {
         return Object.fromEntries(this.widgetMap);
     }
-    constructor(sink) {
+    constructor(sink, options = {}) {
         this.sink = sink;
+        this.fallbackTimeoutMs = options.fallbackTimeoutMs ?? DIALOG_FALLBACK_TIMEOUT_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 +129,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,37 +160,114 @@ 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 });
+    }
+    /**
+     * Browser presence changed (WS connect/disconnect). Only dialogs without an
+     * extension timeout are affected: while a browser is attached they wait
+     * forever (TUI parity - never take an answer away from the user), while no
+     * browser is attached a fallback timer keeps a closed tab from blocking the
+     * agent loop. Reconnecting cancels the fallback.
+     */
+    setBrowserAttached(attached) {
+        if (this.browserAttached === attached)
+            return;
+        this.browserAttached = attached;
+        for (const [id, entry] of [...this.pending.entries()]) {
+            if (entry.extensionTimeout !== undefined)
+                continue; // extension's own timer
+            if (attached) {
+                if (entry.fallbackTimer && entry.timer) {
+                    clearTimeout(entry.timer);
+                    entry.timer = undefined;
+                    entry.fallbackTimer = false;
+                }
+            }
+            else if (!entry.timer) {
+                this.armFallbackTimer(id, entry);
+            }
+        }
+    }
+    /** Arm the no-browser fallback (settles with the dialog default). */
+    armFallbackTimer(id, entry) {
+        entry.fallbackTimer = true;
+        entry.timer = setTimeout(() => {
+            entry.resolve(undefined);
+            this.dismissDialog(id, "timeout");
+        }, this.fallbackTimeoutMs);
+    }
+    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;
-            this.pending.set(id, {
-                resolve: (value) => resolve(parse(value)),
-                timer,
-            });
-            this.sink({ type: "extension_ui_request", id, ...request });
+            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));
+            };
+            const onAbort = () => {
+                settle(undefined, true);
+                this.dismissDialog(id, "aborted");
+            };
+            opts?.signal?.addEventListener("abort", onAbort, { once: true });
+            const extensionTimeout = typeof opts?.timeout === "number" && opts.timeout > 0 ? opts.timeout : undefined;
+            const deadline = extensionTimeout !== undefined ? Date.now() + extensionTimeout : undefined;
+            const entry = {
+                resolve: (value) => settle(value, false),
+                // `deadline` lets the browser show the same countdown TUI does.
+                request: deadline !== undefined ? { ...request, id, deadline } : { ...request, id },
+                deadline,
+                extensionTimeout,
+                fallbackTimer: false,
+                signal: opts?.signal,
+                onAbort,
+            };
+            this.pending.set(id, entry);
+            if (extensionTimeout !== undefined) {
+                // The extension asked for this deadline - honour it exactly (TUI
+                // shows the same countdown and auto-dismisses on expiry).
+                entry.timer = setTimeout(() => {
+                    settle(undefined, true);
+                    this.dismissDialog(id, "timeout");
+                }, extensionTimeout);
+            }
+            else if (!this.browserAttached) {
+                this.armFallbackTimer(id, entry);
+            }
+            this.sink({ type: "extension_ui_request", id, ...request, ...(deadline !== undefined ? { deadline } : {}) });
         });
     }
     // ------------------------------------------------------------------
     // 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.14",
+  "version": "0.5.16",
   "description": "Browser Web access for Pi (AI coding agent) via the Pi SDK - standalone module, zero modification to Pi itself",
   "type": "module",
   "bin": {