pi-sdk-web 0.1.9 → 0.2.1

package/dist/cli.js

@@ -73,9 +73,18 @@ async function cmdResume(name, port) {
     const server = new PiWebServer(session, { port });
     await server.start();
     console.log(`server at http://127.0.0.1:${port}/ (session: ${info.name ?? info.id})`);
+    let shuttingDown = false;
     const shutdown = async (signal) => {
+        if (shuttingDown)
+            return; // Repeated Ctrl+C must not re-enter teardown
+        shuttingDown = true;
         console.log(`\n${signal} received, shutting down...`);
-        await server.stop();
+        try {
+            await server.stop();
+        }
+        catch {
+            // ignore teardown errors - we still need to exit
+        }
         try {
             session.dispose();
         }

package/dist/server.js

@@ -12,7 +12,7 @@ import { execFileSync } from "node:child_process";
 import { existsSync, readFileSync } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { createServer } from "node:http";
-import { dirname, join, resolve } from "node:path";
+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";
@@ -21,8 +21,16 @@ const DEFAULT_PORT = 4080;
 // Static frontend: prefer the in-package copy (built by `npm run build` for
 // global installs), fall back to the repo-root static/ during development.
 const PACKAGE_DIR = resolve(dirname(fileURLToPath(import.meta.url)), "..");
-const STATIC_DIR = [resolve(PACKAGE_DIR, "static"), resolve(PACKAGE_DIR, "..", "static")].find((p) => existsSync(p)) ??
-    resolve(PACKAGE_DIR, "..", "static");
+// Static frontend source:
+//  - dev (tsx runs src/server.ts): always the repo-root static/ (live files)
+//  - published (dist/server.js): the built copy at dist/static (packaged)
+const RUNNING_FROM_SRC = fileURLToPath(import.meta.url).includes(`${sep}src${sep}`);
+const STATIC_DIR = RUNNING_FROM_SRC
+    ? resolve(PACKAGE_DIR, "..", "static")
+    : (() => {
+        const built = resolve(PACKAGE_DIR, "dist", "static");
+        return existsSync(built) ? built : resolve(PACKAGE_DIR, "..", "static");
+    })();
 // Our own package version (pi-sdk-web), shown in the header next to Pi's version
 const PI_WEB_VERSION = (() => {
     try {
@@ -135,9 +143,15 @@ export class PiWebServer {
             return;
         }
         for (const client of this.clients) {
-            if (client.readyState === WebSocket.OPEN) {
+            if (client.readyState !== WebSocket.OPEN)
+                continue;
+            try {
                 client.send(message);
             }
+            catch {
+                // One broken client must not block delivery to the others
+                this.clients.delete(client);
+            }
         }
     }
     broadcastStats() {
@@ -169,8 +183,10 @@ export class PiWebServer {
         let path = (req.url ?? "/").split("?")[0];
         if (path === "/")
             path = "/index.html";
+        const root = resolve(this.staticDir);
         const filePath = resolve(this.staticDir, "." + path);
-        if (!filePath.startsWith(resolve(this.staticDir))) {
+        // Exact-prefix match (avoid /a/static-evil passing a /a/static check)
+        if (filePath !== root && !filePath.startsWith(root + sep)) {
             res.writeHead(403).end();
             return;
         }
@@ -199,6 +215,11 @@ export class PiWebServer {
         // Initial state (state + history), mirroring the Python bridge
         this.sendJson(ws, { type: "state", data: this.buildState() });
         this.sendJson(ws, { type: "history", data: this.buildHistory() });
+        // Current extension statuses (setStatus may have fired before this client connected)
+        const extStatus = this.uiContext.getStatusSnapshot();
+        if (Object.keys(extStatus).length > 0) {
+            this.sendJson(ws, { type: "ext_status", data: extStatus });
+        }
     }
     sendJson(ws, obj) {
         if (ws.readyState === WebSocket.OPEN) {
@@ -245,7 +266,14 @@ export class PiWebServer {
         }
         return cwd;
     }
+    gitBranchCache = null;
+    static GIT_CACHE_TTL_MS = 5_000;
     getGitBranch(cwd) {
+        const now = Date.now();
+        if (this.gitBranchCache && this.gitBranchCache.cwd === cwd && now - this.gitBranchCache.at < PiWebServer.GIT_CACHE_TTL_MS) {
+            return this.gitBranchCache.branch;
+        }
+        let branch = null;
         try {
             const stdout = execFileSync("git", ["branch", "--show-current"], {
                 cwd,
@@ -255,11 +283,13 @@ export class PiWebServer {
                 // "fatal: not a git repository" in non-git dirs) - suppress it
                 stdio: ["ignore", "pipe", "ignore"],
             });
-            return stdout.trim() || null;
+            branch = stdout.trim() || null;
         }
         catch {
-            return null;
+            branch = null;
         }
+        this.gitBranchCache = { cwd, branch, at: now };
+        return branch;
     }
     getCommands() {
         try {
@@ -514,7 +544,7 @@ export class PiWebServer {
             sessionManager: sm,
             modelRegistry: new ModelRegistry(this.session.modelRuntime),
             model: this.session.model,
-            scopedModels: [],
+            scopedModels: this.session.scopedModels,
             thinkingLevel: this.session.thinkingLevel,
             isIdle: () => this.session.isIdle,
             isProjectTrusted: () => true,
@@ -535,7 +565,9 @@ export class PiWebServer {
             fork: async () => ({ cancelled: true }),
             navigateTree: async () => ({ cancelled: true }),
             switchSession: async () => ({ cancelled: true }),
-            reload: async () => { },
+            reload: async () => {
+                await this.session.reload();
+            },
         };
     }
 }

package/{static → dist/static}/app.js

@@ -36,6 +36,7 @@ class PiWebClient {
     this.modalMode = null; // 'model' | 'thinking'
     this.hasConnectedBefore = false;
     this.commandMenuIndex = -1;
+    this.extStatus = {};
 
     this.initThemeSwitch();
 
@@ -169,6 +170,9 @@ class PiWebClient {
       case 'pi_error':
         this.appendError(data.error);
         break;
+      case 'ext_status':
+        this.applyExtStatusSnapshot(data.data);
+        break;
       case 'extension_ui_request':
         this.handleExtensionUIRequest(data);
         break;
@@ -1115,6 +1119,42 @@ class PiWebClient {
     if (scroller) scroller.scrollTop = scroller.scrollHeight;
   }
 
+  /**
+   * Jump to the previous (-1) or next (+1) user message in the scroll view.
+   * Positions the target message at the top of the viewport.
+   */
+  jumpToUserMessage(direction) {
+    const scroller = document.getElementById('scroll-view');
+    if (!scroller) return;
+    const users = [...document.querySelectorAll('.message.user')];
+    if (users.length === 0) return;
+
+    const scrollerRect = scroller.getBoundingClientRect();
+    const offsetTop = (el) => el.getBoundingClientRect().top - scrollerRect.top + scroller.scrollTop;
+    const current = scroller.scrollTop;
+    const buffer = 12; // px: treat "essentially at this message's top" as already there
+
+    let target = null;
+    if (direction === -1) {
+      for (let i = users.length - 1; i >= 0; i--) {
+        if (offsetTop(users[i]) < current - buffer) {
+          target = users[i];
+          break;
+        }
+      }
+    } else {
+      for (const u of users) {
+        if (offsetTop(u) > current + buffer) {
+          target = u;
+          break;
+        }
+      }
+    }
+    if (target) {
+      scroller.scrollTo({ top: Math.max(0, offsetTop(target) - 8), behavior: 'smooth' });
+    }
+  }
+
   // ------------------------------------------------------------------
   // Input
   // ------------------------------------------------------------------
@@ -1196,6 +1236,13 @@ class PiWebClient {
       }
     });
     this.inputEl.addEventListener('input', () => this.updateCommandMenu());
+
+    // Header nav buttons: jump to previous/next user message
+    const navPrev = document.getElementById('nav-prev');
+    const navNext = document.getElementById('nav-next');
+    if (navPrev) navPrev.addEventListener('click', () => this.jumpToUserMessage(-1));
+    if (navNext) navNext.addEventListener('click', () => this.jumpToUserMessage(1));
+
     if (this.sendBtn) {
       this.sendBtn.addEventListener('click', () => this.sendMessage());
     }
@@ -1307,8 +1354,36 @@ class PiWebClient {
     } else if (method === 'setWidget') {
       // Persistent widget panel (TUI: above/below editor). Not a popup.
       this.renderWidget(req);
+    } else if (method === 'setStatus') {
+      // Extension status text (e.g. magic-context "mc: 29.3K (4%) · idle")
+      this.renderStatusItem(req);
+    }
+    // setTitle / set_editor_text are handled elsewhere or ignored
+  }
+
+  renderStatusItem(req) {
+    const el = document.getElementById('ext-status');
+    if (!el) return;
+    if (req.statusText === undefined || req.statusText === null) {
+      delete this.extStatus[req.statusKey];
+    } else {
+      this.extStatus[req.statusKey] = req.statusText;
     }
-    // setStatus / setTitle / set_editor_text are handled elsewhere or ignored
+    this.updateExtStatusDisplay();
+  }
+
+  applyExtStatusSnapshot(snapshot) {
+    if (!snapshot) return;
+    this.extStatus = Object.assign({}, snapshot);
+    this.updateExtStatusDisplay();
+  }
+
+  updateExtStatusDisplay() {
+    const el = document.getElementById('ext-status');
+    if (!el) return;
+    const entries = Object.entries(this.extStatus);
+    el.textContent = entries.map(([k, v]) => `${k}: ${v}`).join(' · ');
+    el.style.display = entries.length ? 'block' : 'none';
   }
 
   openExtensionSelect(req) {

package/{static → dist/static}/index.html

@@ -16,6 +16,10 @@
         <span class="theme-sep">|</span>
         <span class="theme-option" data-theme="bright">Bright</span>
       </span>
+      <span id="msg-nav">
+        <span class="nav-btn" id="nav-prev" title="Jump to previous user message">↑</span>
+        <span class="nav-btn" id="nav-next" title="Jump to next user message">↓</span>
+      </span>
       <span id="conn-status" class="disconnected">Disconnected</span>
     </div>
     <div id="main">
@@ -31,6 +35,7 @@
     <div id="status"></div>
     <div id="footer">
       <div id="footer-line"></div>
+      <div id="ext-status" style="display:none"></div>
       <div id="footer-stats"></div>
       <div id="command-menu"></div>
       <div class="input-row">

package/{static → dist/static}/style.css

@@ -131,6 +131,22 @@ body {
   margin: 0 4px;
 }
 
+#msg-nav {
+  margin-left: 10px;
+  font-size: 13px;
+  user-select: none;
+}
+
+.nav-btn {
+  cursor: pointer;
+  color: var(--dim);
+  padding: 0 4px;
+}
+
+.nav-btn:hover {
+  color: var(--accent);
+}
+
 #conn-status {
   font-size: 12px;
   padding: 2px 8px;
@@ -583,6 +599,12 @@ body {
   margin-bottom: 4px;
 }
 
+#ext-status {
+  color: var(--dim);
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
 #footer-stats {
   display: flex;
   justify-content: space-between;

package/dist/ui-context.js

@@ -21,9 +21,15 @@ export class WebUIContext {
     pending = new Map();
     sink;
     identityTheme = createIdentityTheme();
+    /** Latest setStatus values per key, so late-connecting browsers get current state */
+    statusMap = new Map();
     constructor(sink) {
         this.sink = sink;
     }
+    /** Current extension status snapshot (key -> text) for new connections. */
+    getStatusSnapshot() {
+        return Object.fromEntries(this.statusMap);
+    }
     /** Handle a browser `extension_ui_response` message. */
     respond(id, response) {
         const pending = this.pending.get(id);
@@ -82,6 +88,12 @@ export class WebUIContext {
         this.sink({ type: "extension_ui_request", id: crypto.randomUUID(), method: "notify", message, notifyType: type });
     }
     setStatus(key, text) {
+        if (text === undefined || text === null) {
+            this.statusMap.delete(key);
+        }
+        else {
+            this.statusMap.set(key, text);
+        }
         this.sink({ type: "extension_ui_request", id: crypto.randomUUID(), method: "setStatus", statusKey: key, statusText: text });
     }
     setTitle(title) {

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "pi-sdk-web",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "description": "Browser Web access for Pi (AI coding agent) via the Pi SDK - standalone module, zero modification to Pi itself",
   "type": "module",
   "bin": {
     "pi-web": "./dist/cli.js"
   },
   "files": [
-    "dist",
-    "static"
+    "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && node -e \"require('node:fs').cpSync('../static', 'static', { recursive: true })\"",
+    "build": "tsc -p tsconfig.json && node -e \"require('node:fs').cpSync('../static', 'dist/static', { recursive: true })\"",
     "dev": "tsx src/cli.ts",
     "verify": "tsx src/verify-sdk.ts",
     "prepublishOnly": "npm run build"