pi-sdk-web 0.2.3 → 0.3.0

package/dist/cli.js

@@ -7,7 +7,7 @@
  *   pi-web list                       List all sessions (name, id, cwd), newest first
  *   pi-web help                       Show this help
  */
-import { SettingsManager, createAgentSessionFromServices, createAgentSessionServices, getAgentDir, resolveModelScopeWithDiagnostics, } from "@earendil-works/pi-coding-agent";
+import { SettingsManager, createAgentSessionFromServices, createAgentSessionRuntime, createAgentSessionServices, getAgentDir, resolveModelScopeWithDiagnostics, } from "@earendil-works/pi-coding-agent";
 import { findSessionByName, listSessions, loadBuiltinExtensions } from "./session.js";
 import { PiWebServer } from "./server.js";
 const DEFAULT_PORT = 4080;
@@ -56,21 +56,38 @@ async function cmdResume(name, port) {
     // the same modelRuntime used below, so scopedModels resolution sees them.
     const agentDir = getAgentDir();
     const settingsManager = SettingsManager.create(sessionManager.getCwd(), agentDir);
-    const services = await createAgentSessionServices({
+    // Runtime factory: re-invoked by AgentSessionRuntime whenever the session is
+    // replaced (e.g. /resume switches to another session with a different cwd).
+    const createRuntime = async ({ cwd, agentDir: dir, sessionManager: sm, sessionStartEvent }) => {
+        const settings = SettingsManager.create(cwd, dir);
+        const services = await createAgentSessionServices({
+            cwd,
+            agentDir: dir,
+            settingsManager: settings,
+            resourceLoaderOptions: { extensionFactories: await loadBuiltinExtensions() },
+        });
+        // Resolve enabledModels (settings) into scopedModels, matching Pi's CLI
+        const enabledModels = settings.getEnabledModels();
+        const scopedModels = enabledModels && enabledModels.length > 0
+            ? (await resolveModelScopeWithDiagnostics(enabledModels, services.modelRuntime, {
+                signal: AbortSignal.timeout(15_000),
+            })).scopedModels
+            : [];
+        const created = await createAgentSessionFromServices({
+            services,
+            sessionManager: sm,
+            sessionStartEvent,
+            scopedModels,
+        });
+        return { ...created, services, diagnostics: [] };
+    };
+    const runtime = await createAgentSessionRuntime(createRuntime, {
         cwd: sessionManager.getCwd(),
         agentDir,
-        settingsManager,
-        resourceLoaderOptions: { extensionFactories: await loadBuiltinExtensions() },
+        sessionManager,
     });
-    // Resolve enabledModels (settings) into scopedModels, matching Pi's CLI
-    const enabledModels = settingsManager.getEnabledModels();
-    const scopedModels = enabledModels && enabledModels.length > 0
-        ? (await resolveModelScopeWithDiagnostics(enabledModels, services.modelRuntime, {
-            signal: AbortSignal.timeout(15_000),
-        })).scopedModels
-        : [];
-    const { session } = await createAgentSessionFromServices({ services, sessionManager, scopedModels });
-    const server = new PiWebServer(session, { port });
+    const { session } = runtime;
+    const server = new PiWebServer(runtime, { port });
     await server.start();
     console.log(`server at http://127.0.0.1:${port}/ (session: ${info.name ?? info.id})`);
     let shuttingDown = false;
@@ -86,7 +103,7 @@ async function cmdResume(name, port) {
             // ignore teardown errors - we still need to exit
         }
         try {
-            session.dispose();
+            runtime.dispose();
         }
         catch {
             // ignore

package/dist/server.js

@@ -16,6 +16,7 @@ import { dirname, join, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import { ModelRegistry, VERSION, } from "@earendil-works/pi-coding-agent";
 import { WebSocket, WebSocketServer } from "ws";
+import { listSessions } from "./session.js";
 import { WebUIContext } from "./ui-context.js";
 const DEFAULT_PORT = 4080;
 // Static frontend: prefer the in-package copy (built by `npm run build` for
@@ -62,7 +63,7 @@ const MIME = {
     ".ico": "image/x-icon",
 };
 export class PiWebServer {
-    session;
+    runtime;
     port;
     staticDir;
     uiContext;
@@ -70,8 +71,12 @@ export class PiWebServer {
     wsServer = null;
     clients = new Set();
     unsubscribe = null;
-    constructor(session, options = {}) {
-        this.session = session;
+    /** Current session (may change on /resume session switching). */
+    get session() {
+        return this.runtime.session;
+    }
+    constructor(runtime, options = {}) {
+        this.runtime = runtime;
         this.port = options.port ?? DEFAULT_PORT;
         this.staticDir = options.staticDir ?? STATIC_DIR;
         this.uiContext = new WebUIContext((obj) => this.broadcast(obj));
@@ -80,13 +85,10 @@ export class PiWebServer {
     // Lifecycle
     // ------------------------------------------------------------------
     async start() {
-        // Bind extensions with the web UI context (replaces the TUI/RPC context)
-        await this.session.bindExtensions({
-            uiContext: this.uiContext,
-            // "rpc" is the closest ExtensionMode: dialog-capable UI (hasUI=true),
-            // but not terminal-only UI
-            mode: "rpc",
-        });
+        // Rebind hook: invoked by the runtime whenever the session is replaced
+        // (/resume switches to another session).
+        this.runtime.setRebindSession(() => this.bindCurrentSession(true));
+        await this.bindCurrentSession(false);
         this.httpServer = createServer((req, res) => this.handleHttp(req, res));
         // Some components (ws internals, MCP-style extensions) accumulate 'close'
         // listeners on the server; raise the limit to avoid MaxListenersExceededWarning
@@ -98,13 +100,46 @@ export class PiWebServer {
             this.httpServer.once("error", reject);
             this.httpServer.listen(this.port, "127.0.0.1", () => resolvePromise());
         });
-        // Forward session events to all browser clients
-        this.unsubscribe = this.session.subscribe((event) => {
+    }
+    /**
+     * Bind extensions + subscribe events for the current session, and sync the
+     * process cwd. On session replacement (`afterSwitch`), also tell browsers to
+     * reload their view (new state + history) and switch the process cwd.
+     */
+    async bindCurrentSession(afterSwitch) {
+        const session = this.runtime.session;
+        // Unsubscribe from the previous session first (also avoids stale events
+        // during teardown/dispose of the old session).
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        await session.bindExtensions({
+            uiContext: this.uiContext,
+            // "rpc" is the closest ExtensionMode: dialog-capable UI (hasUI=true),
+            // but not terminal-only UI
+            mode: "rpc",
+        });
+        this.unsubscribe = session.subscribe((event) => {
             this.broadcast(event);
             if (STATS_REFRESH_EVENTS.has(event.type)) {
                 this.broadcastStats();
             }
         });
+        if (afterSwitch) {
+            // Align process cwd with the resumed session (same as startup chdir)
+            const cwd = session.sessionManager.getCwd();
+            if (cwd) {
+                try {
+                    process.chdir(cwd);
+                }
+                catch {
+                    console.error(`Session cwd not found (${cwd}), keeping current directory`);
+                }
+            }
+            // Stale extension dialogs/status from the previous session are dropped
+            this.uiContext.clearSessionState();
+            this.broadcastState();
+            this.broadcastHistory();
+        }
     }
     async stop() {
         this.unsubscribe?.();
@@ -172,6 +207,10 @@ export class PiWebServer {
             // state unavailable - skip
         }
     }
+    /** Broadcast the current session's history (used after session switching). */
+    broadcastHistory() {
+        this.broadcast({ type: "history", data: this.buildHistory() });
+    }
     // ------------------------------------------------------------------
     // HTTP: static files
     // ------------------------------------------------------------------
@@ -487,10 +526,110 @@ export class PiWebServer {
                 await this.executeCommand(name, args);
                 break;
             }
+            case "session":
+                // Read-only session info (TUI /session equivalent)
+                this.broadcastSessionInfo();
+                break;
+            case "get_sessions": {
+                // All sessions except the current one (for /resume)
+                const currentFile = this.session.sessionFile;
+                const all = await listSessions();
+                this.broadcast({
+                    type: "sessions",
+                    data: all
+                        .filter((s) => s.path !== currentFile)
+                        .map((s) => ({ name: s.name ?? "", id: s.id, cwd: s.cwd, path: s.path })),
+                });
+                break;
+            }
+            case "resume": {
+                const path = typeof data.path === "string" && data.path ? data.path : "";
+                if (!path)
+                    throw new Error("Missing 'path'");
+                await this.resumeSession(path);
+                break;
+            }
             default:
                 throw new Error(`Unsupported command: ${cmdType}`);
         }
     }
+    /**
+     * Resume (switch to) another session file. The runtime tears down the current
+     * session, creates the new one and invokes our rebind callback, which rebinds
+     * extensions, resubscribes, switches cwd and broadcasts state/history.
+     */
+    async resumeSession(path) {
+        // Unsubscribe from the current session before teardown so stale events from
+        // the old session are not broadcast during disposal.
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        try {
+            const result = await this.runtime.switchSession(path);
+            if (result.cancelled)
+                return;
+        }
+        catch (err) {
+            // Rebind hook already ran on failure? No: on error the old session may be
+            // gone - resubscribe defensively to keep the server usable.
+            await this.bindCurrentSession(false);
+            throw err;
+        }
+        // On success the rebind hook (bindCurrentSession(true)) already ran inside
+        // switchSession; nothing more to do here.
+    }
+    /** TUI /session equivalent: show session info as a modal (read-only). */ broadcastSessionInfo() {
+        try {
+            const stats = this.session.getSessionStats();
+            const sm = this.session.sessionManager;
+            const entries = sm.getEntries();
+            const model = this.session.model;
+            const lines = [];
+            lines.push("## Session Info", "");
+            const name = sm.getSessionName();
+            if (name)
+                lines.push(`**Name:** ${name}`);
+            lines.push(`**ID:** ${this.session.sessionId}`);
+            if (stats.sessionFile)
+                lines.push(`**File:** ${stats.sessionFile}`);
+            if (model)
+                lines.push(`**Model:** ${model.provider}/${model.id}`);
+            lines.push(`**Thinking:** ${this.session.thinkingLevel}`, "");
+            lines.push("### Messages");
+            lines.push(`- User: ${stats.userMessages}`);
+            lines.push(`- Assistant: ${stats.assistantMessages}`);
+            lines.push(`- Tool calls: ${stats.toolCalls}`);
+            lines.push(`- Tool results: ${stats.toolResults}`);
+            lines.push(`- Total: ${stats.totalMessages}`);
+            lines.push(`- Entries: ${entries.length}`, "");
+            const t = stats.tokens;
+            if (t) {
+                lines.push("### Tokens");
+                lines.push(`- Input: ${t.input}`);
+                lines.push(`- Output: ${t.output}`);
+                lines.push(`- Cache read: ${t.cacheRead}`);
+                lines.push(`- Cache write: ${t.cacheWrite}`);
+                lines.push(`- Total: ${t.total}`, "");
+            }
+            lines.push("### Cost");
+            lines.push(`$${stats.cost.toFixed(4)}`);
+            const cu = stats.contextUsage;
+            if (cu?.contextWindow) {
+                lines.push("", "### Context");
+                lines.push(`- ${cu.percent}% / ${cu.contextWindow} tokens`);
+            }
+            this.broadcast({
+                type: "extension_ui_request",
+                id: crypto.randomUUID(),
+                method: "notify",
+                title: "/session",
+                message: lines.join("\n"),
+                notifyType: "info",
+            });
+        }
+        catch {
+            // session info unavailable - skip
+        }
+    }
     /**
      * Execute an extension slash command (e.g. /ctx-status) by invoking its
      * registered handler with a command context.

package/dist/static/app.js

@@ -8,6 +8,8 @@ const BUILTIN_COMMANDS = [
   { name: 'compact', description: 'Manually compact the session context', builtin: true, action: 'compact' },
   { name: 'reload', description: 'Reload session resources and extensions', builtin: true, action: 'reload' },
   { name: 'export', description: 'Export session to HTML (or .jsonl)', builtin: true, action: 'export' },
+  { name: 'session', description: 'Show session information', builtin: true, action: 'session' },
+  { name: 'resume', description: 'Switch to another session', builtin: true, action: 'resume' },
   { name: 'name', description: 'Set session display name', builtin: true, action: 'name' },
   { name: 'login', description: 'Configure provider authentication (not supported in web)', builtin: true, unsupported: true },
   { name: 'logout', description: 'Remove provider authentication (not supported in web)', builtin: true, unsupported: true },
@@ -164,6 +166,9 @@ class PiWebClient {
       case 'scoped_models':
         this.handleScopedModels(data.data);
         break;
+      case 'sessions':
+        this.handleSessions(data.data);
+        break;
       case 'error':
         this.appendError(data.error);
         break;
@@ -589,6 +594,19 @@ class PiWebClient {
     this.toolTimers.clear();
     this.toolEls.clear();
     this.streaming = { active: false, el: null, role: 'assistant' };
+    // Drop stale UI state from the previous session (on /resume reload)
+    const widgets = document.getElementById('widgets');
+    if (widgets) {
+      widgets.innerHTML = '';
+      widgets.style.display = 'none';
+    }
+    this.extStatus = {};
+    const extStatusEl = document.getElementById('ext-status');
+    if (extStatusEl) extStatusEl.style.display = 'none';
+    const pendingEl = document.getElementById('pending');
+    if (pendingEl) pendingEl.style.display = 'none';
+    const statusEl = document.getElementById('status');
+    if (statusEl) statusEl.style.display = 'none';
   }
 
   // ------------------------------------------------------------------
@@ -1202,6 +1220,10 @@ class PiWebClient {
     } else if (cmd.action === 'export') {
       const path = (args || '').trim();
       this.send({ type: 'export', path: path });
+    } else if (cmd.action === 'session') {
+      this.send({ type: 'session' });
+    } else if (cmd.action === 'resume') {
+      this.openResumePicker();
     } else if (cmd.action === 'name') {
       const newName = window.prompt('Set session display name:', '');
       if (newName && newName.trim()) {
@@ -1469,12 +1491,30 @@ class PiWebClient {
   }
 
   openExtensionNotify(req) {
-    this.openModal(req.title || 'Notification', 'extension-notify');
-    this.currentExtRequest = req;
-    this.modalSearch.style.display = 'none';
-    // Render as markdown (sanitized) so command outputs (/ctx-status etc.) look right
-    this.modalList.innerHTML = `<div class="modal-message body-text">${this.renderMarkdown(req.message || '')}</div>`;
-    // Close button in modal footer is enough
+    // Command output notifications (title starts with "/", e.g. /ctx-status) keep
+    // the modal. Other extension notifies are lightweight toasts (TUI shows
+    // notify as a transient status message, not a dialog).
+    if (req.title && String(req.title).startsWith('/')) {
+      this.openModal(req.title || 'Notification', 'extension-notify');
+      this.currentExtRequest = req;
+      this.modalSearch.style.display = 'none';
+      this.modalList.innerHTML = `<div class="modal-message body-text">${this.renderMarkdown(req.message || '')}</div>`;
+      return;
+    }
+    this.showToast(req.message || '', req.notifyType);
+  }
+
+  showToast(message, type) {
+    let container = document.getElementById('toast-container');
+    if (!container) return;
+    const toast = document.createElement('div');
+    toast.className = 'toast' + (type ? ` toast-${type}` : '');
+    toast.textContent = message;
+    container.appendChild(toast);
+    setTimeout(() => {
+      toast.classList.add('toast-hide');
+      setTimeout(() => toast.remove(), 300);
+    }, type === 'error' ? 8000 : 5000);
   }
 
   handleModels(models) {
@@ -1510,6 +1550,31 @@ class PiWebClient {
     });
   }
 
+  // ------------------------------------------------------------------
+  // Resume picker (switch to another session)
+  // ------------------------------------------------------------------
+
+  openResumePicker() {
+    this.openModal('Resume Session', 'resume');
+    this.modalList.innerHTML = '<div class="modal-message">Loading sessions...</div>';
+    this.send({ type: 'get_sessions' });
+  }
+
+  handleSessions(data) {
+    if (this.modalMode !== 'resume') return;
+    const sessions = data || [];
+    if (sessions.length === 0) {
+      this.modalList.innerHTML = '<div class="modal-message">No other sessions available</div>';
+      return;
+    }
+    this.renderModalItems(
+      sessions.map((s) => ({ name: s.name || s.id, desc: s.cwd, value: s.path })),
+      (item) => {
+        this.send({ type: 'resume', path: item.value });
+      },
+    );
+  }
+
   // ------------------------------------------------------------------
   // Scoped models picker (multi-select: models available for cycling)
   // ------------------------------------------------------------------
@@ -1614,11 +1679,24 @@ class PiWebClient {
       ...((this.lastState && this.lastState.commands) || []),
       ...BUILTIN_COMMANDS,
     ];
-    const filtered = commands.filter((c) => {
-      const name = (c.name || '').replace(/^skill:/, '').toLowerCase();
-      const desc = (c.description || c.source || '').toLowerCase();
-      return name.includes(query) || desc.includes(query);
-    });
+    const filtered = commands
+      .filter((c) => {
+        const name = (c.name || '').replace(/^skill:/, '').toLowerCase();
+        const desc = (c.description || c.source || '').toLowerCase();
+        return name.includes(query) || desc.includes(query);
+      })
+      .sort((a, b) => {
+        // Exact-name match first, then name-prefix, then name-contains,
+        // then description-contains (avoids unrelated commands flooding the list)
+        const score = (c) => {
+          const name = (c.name || '').replace(/^skill:/, '').toLowerCase();
+          if (name === query) return 0;
+          if (name.startsWith(query)) return 1;
+          if (name.includes(query)) return 2;
+          return 3;
+        };
+        return score(a) - score(b);
+      });
 
     if (filtered.length === 0) {
       this.hideCommandMenu();

package/dist/static/index.html

@@ -53,6 +53,7 @@
       <div id="modal-close">Close (Esc)</div>
     </div>
   </div>
+  <div id="toast-container"></div>
   <script src="vendor/marked.min.js"></script>
   <script src="app.js"></script>
 </body>

package/dist/static/style.css

@@ -734,6 +734,44 @@ body {
   color: var(--text);
 }
 
+/* Lightweight extension notifications (TUI shows notify as transient status) */
+#toast-container {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 420px;
+}
+
+.toast {
+  background: var(--modal-bg);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 6px;
+  padding: 8px 12px;
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.5;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  opacity: 1;
+  transition: opacity 0.3s;
+}
+
+.toast-warning {
+  border-left-color: var(--warning);
+}
+
+.toast-error {
+  border-left-color: var(--error);
+}
+
+.toast-hide {
+  opacity: 0;
+}
+
 .modal-message {
   color: var(--text);
   font-size: 13px;

package/dist/ui-context.js

@@ -30,6 +30,16 @@ export class WebUIContext {
     getStatusSnapshot() {
         return Object.fromEntries(this.statusMap);
     }
+    /** Drop state tied to the previous session (dialogs + status snapshots). */
+    clearSessionState() {
+        for (const pending of this.pending.values()) {
+            if (pending.timer)
+                clearTimeout(pending.timer);
+            pending.resolve(undefined);
+        }
+        this.pending.clear();
+        this.statusMap.clear();
+    }
     /** Handle a browser `extension_ui_response` message. */
     respond(id, response) {
         const pending = this.pending.get(id);

package/package.json

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