pi-sdk-web 0.5.5 → 0.5.7

package/dist/server.js

@@ -93,7 +93,25 @@ export class PiWebServer {
         // Some components (ws internals, MCP-style extensions) accumulate 'close'
         // listeners on the server; raise the limit to avoid MaxListenersExceededWarning
         this.httpServer.setMaxListeners(50);
-        this.wsServer = new WebSocketServer({ server: this.httpServer, path: "/ws" });
+        this.wsServer = new WebSocketServer({
+            server: this.httpServer,
+            path: "/ws",
+            // CSWSH guard: only accept same-origin connections (the page itself).
+            // ws://127.0.0.1:<port> has no Origin header requirement in browsers,
+            // but cross-origin pages would send their own Origin - reject those.
+            verifyClient: (info) => {
+                const origin = info.origin;
+                if (!origin)
+                    return true; // non-browser clients (no Origin header)
+                try {
+                    const u = new URL(origin);
+                    return u.hostname === "127.0.0.1" || u.hostname === "localhost" || u.hostname === "::1";
+                }
+                catch {
+                    return false;
+                }
+            },
+        });
         this.wsServer.setMaxListeners(50);
         this.wsServer.on("connection", (ws) => this.handleConnection(ws));
         await new Promise((resolvePromise, reject) => {
@@ -150,6 +168,18 @@ export class PiWebServer {
             // would stay hidden until the new session's first turn event.
             const extStatus = this.uiContext.getStatusSnapshot();
             this.broadcast({ type: "ext_status", data: extStatus });
+            // Same for widgets (e.g. todos overlay): clearContent() wipes #widgets
+            // and there is no other channel after switching.
+            for (const [key, w] of Object.entries(this.uiContext.getWidgetSnapshot())) {
+                this.broadcast({
+                    type: "extension_ui_request",
+                    id: crypto.randomUUID(),
+                    method: "setWidget",
+                    widgetKey: key,
+                    widgetLines: w.lines,
+                    widgetPlacement: w.placement,
+                });
+            }
         }
     }
     async stop() {
@@ -713,8 +743,13 @@ export class PiWebServer {
         this.unsubscribe = null;
         try {
             const result = await this.runtime.switchSession(path);
-            if (result.cancelled)
+            if (result.cancelled) {
+                // switchSession was cancelled (e.g. session_before_switch veto): the
+                // old session is still live and its events stopped - resubscribe to
+                // keep the server usable.
+                await this.bindCurrentSession(false);
                 return;
+            }
         }
         catch (err) {
             // Rebind hook already ran on failure? No: on error the old session may be

package/dist/static/app.js

@@ -214,7 +214,6 @@ class PiWebClient {
     this.streaming = {
       active: false,
       el: null,
-      role: 'assistant',
     };
 
     // Tool call rendering state: map toolCallId -> element
@@ -617,10 +616,6 @@ class PiWebClient {
     }
   }
 
-  getStats() {
-    this.send({ type: 'get_stats' });
-  }
-
   // ------------------------------------------------------------------
   // Markdown rendering
   // ------------------------------------------------------------------
@@ -853,7 +848,6 @@ class PiWebClient {
   toggleSpecial(div) {
     const expanded = div.dataset.expanded === 'true';
     div.dataset.expanded = expanded ? 'false' : 'true';
-    div.classList.toggle('expanded', !expanded);
     this.applySpecialBlock(div);
   }
 
@@ -864,7 +858,7 @@ class PiWebClient {
     }
     this.toolTimers.clear();
     this.toolEls.clear();
-    this.streaming = { active: false, el: null, role: 'assistant' };
+    this.streaming = { active: false, el: null };
     // Drop stale UI state from the previous session (on /resume reload)
     const widgets = document.getElementById('widgets');
     if (widgets) {
@@ -970,7 +964,9 @@ class PiWebClient {
       default:
         break;
     }
-    this.scrollToBottom();
+    // Only auto-scroll when the user is already at the bottom (reading
+    // history must not be yanked down by incoming events).
+    if (this.wasAtBottom()) this.scrollToBottom();
   }
 
   onMessageStart(message) {
@@ -1009,7 +1005,7 @@ class PiWebClient {
   }
 
   resetStreaming() {
-    this.streaming = { active: false, el: null, role: 'assistant' };
+    this.streaming = { active: false, el: null };
   }
 
   // ------------------------------------------------------------------
@@ -1095,21 +1091,35 @@ class PiWebClient {
     }
 
     let el = widgetsEl.querySelector(`[data-widget-key="${CSS.escape(key)}"]`);
+    let body;
     if (!el) {
       el = document.createElement('div');
       el.className = 'widget-block';
       el.dataset.widgetKey = key;
+      el.dataset.expanded = 'false'; // collapsible; collapsed by default
       const title = document.createElement('div');
       title.className = 'widget-title';
-      const body = document.createElement('div');
+      body = document.createElement('div');
       body.className = 'widget-body';
+      body.style.display = 'none'; // collapsed by default
+      // Click the title to expand/collapse (keeps the widget compact).
+      title.addEventListener('click', () => {
+        const expanded = el.dataset.expanded === 'true';
+        el.dataset.expanded = expanded ? 'false' : 'true';
+        body.style.display = expanded ? 'none' : 'block';
+        title.textContent = (expanded ? '▸ ' : '▾ ') + el.dataset.widgetKey;
+      });
       el.appendChild(title);
       el.appendChild(body);
       widgetsEl.appendChild(el);
+    } else {
+      body = el.querySelector('.widget-body');
     }
-    el.querySelector('.widget-title').textContent = key;
+    // Header label with collapsible indicator (kept in sync).
+    const titleEl = el.querySelector('.widget-title');
+    titleEl.textContent = (el.dataset.expanded === 'true' ? '▾ ' : '▸ ') + key;
     // ANSI escapes (extension theme) render as colored spans per line.
-    el.querySelector('.widget-body').innerHTML = (req.widgetLines || [])
+    body.innerHTML = (req.widgetLines || [])
       .map((line) => ansiToHtml(String(line)))
       .join('<br>');
     widgetsEl.style.display = 'block';
@@ -1153,7 +1163,7 @@ class PiWebClient {
     div.appendChild(body);
     this.contentEl.appendChild(div);
 
-    this.streaming = { active: true, el: div, body: body, role: 'assistant' };
+    this.streaming = { active: true, el: div, body: body };
     this.renderAssistantContent(message, body);
   }
 
@@ -1306,7 +1316,6 @@ class PiWebClient {
   toggleToolExpand(div) {
     const expanded = div.dataset.expanded === 'true';
     div.dataset.expanded = expanded ? 'false' : 'true';
-    div.classList.toggle('expanded', !expanded);
     this.applyToolPreview(div);
   }
 
@@ -1785,6 +1794,12 @@ class PiWebClient {
   }
 
   closeModal() {
+    // If an extension dialog (select/confirm/input/editor) was open, notify
+    // the server that it was cancelled - otherwise the extension's promise
+    // never settles.
+    if (this.currentExtRequest && this.currentExtRequest.id) {
+      this.send({ type: 'extension_ui_response', id: this.currentExtRequest.id, cancelled: true });
+    }
     this.modalOverlay.style.display = 'none';
     this.modalList.innerHTML = '';
     this.modalSearch.value = '';
@@ -2009,20 +2024,6 @@ class PiWebClient {
     this.scrollToBottom();
   }
 
-  showToast(message, type) {
-    let container = document.getElementById('toast-container');
-    if (!container) return;
-    const toast = document.createElement('div');
-    toast.className = 'toast' + (type ? ` toast-${type}` : '');
-    // Extension notify messages may carry ANSI escapes (theme.fg); render them.
-    toast.innerHTML = ansiToHtml(String(message));
-    container.appendChild(toast);
-    setTimeout(() => {
-      toast.classList.add('toast-hide');
-      setTimeout(() => toast.remove(), 300);
-    }, type === 'error' ? 8000 : 5000);
-  }
-
   // ------------------------------------------------------------------
   // Usage panel (dedicated big panel for /usage, rendered from the
   // server-aggregated usage_data payload)
@@ -2125,19 +2126,6 @@ class PiWebClient {
     return '$' + c.toFixed(1);
   }
 
-  usageRow(stat) {
-    const t = stat.tokens || {};
-    return [
-      this.fmtTokens(t.input),
-      this.fmtTokens(t.output),
-      this.fmtTokens((t.cacheRead || 0) + (t.cacheWrite || 0)),
-      this.fmtTokens((t.total === undefined ? (t.input || 0) + (t.output || 0) + (t.cacheRead || 0) + (t.cacheWrite || 0) : t.total)),
-      this.fmtCost(stat.cost),
-      String(stat.messages),
-      String(stat.sessions),
-    ];
-  }
-
   renderUsageBody() {
     const body = document.getElementById('usage-body');
     if (!body) return;
@@ -2177,7 +2165,6 @@ class PiWebClient {
         const key = 'p:' + p.name;
         const expanded = this.usageExpanded.has(key);
         const tr = rowFor(p.name, p, false, false);
-        tr.classList.add('usage-clickable');
         tr.addEventListener('click', () => {
           if (this.usageExpanded.has(key)) this.usageExpanded.delete(key);
           else this.usageExpanded.add(key);
@@ -2370,7 +2357,6 @@ class PiWebClient {
       this.modalList.innerHTML = '<div class="modal-message">No other sessions available</div>';
       return;
     }
-    this.resumeSessions = sessions;
     this.renderModalItems(
       sessions.map((s) => ({ name: s.name || s.id, desc: s.cwd, value: s.path })),
       (item) => {

package/dist/static/index.html

@@ -58,7 +58,6 @@
       <div id="modal-close">Close (Esc)</div>
     </div>
   </div>
-  <div id="toast-container"></div>
   <div id="usage-overlay" style="display:none">
     <div id="usage-panel">
       <div id="usage-title">Usage</div>

package/dist/static/style.css

@@ -27,7 +27,6 @@
   --code-inline-bg: rgba(128, 128, 128, 0.15);
   --table-head-bg: rgba(128, 128, 128, 0.1);
 }
-
 /* Light theme (colors aligned with Pi's light theme) */
 body.theme-light {
   --bg: #f5f5f5;
@@ -248,12 +247,16 @@ body {
   overflow-x: hidden;
   padding: 8px;
   min-width: 0;
+  /* Bordered, rounded message area (distinct region vs sidebar/footer) */
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin: 3px 0;
 }
 
 #sidebar {
   width: 200px;
   flex-shrink: 0;
-  border-left: 1px solid var(--border);
+  /* scroll-view now has its own right border - no duplicate divider */
   padding: 8px;
   overflow-y: auto;
 }
@@ -670,6 +673,8 @@ body {
   color: var(--accent);
   font-weight: 600;
   margin-bottom: 2px;
+  cursor: pointer;
+  user-select: none;
 }
 
 .widget-body {
@@ -886,40 +891,6 @@ 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;
-  white-space: pre-wrap;
-  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);
-}
 
 /* Extension notify lines appended to the chat stream (TUI showStatus
    equivalent): persistent dim status text, colored by type. */
@@ -942,7 +913,6 @@ body {
   border-left-color: var(--error);
 }
 
-.toast-hide {
   opacity: 0;
 }
 
@@ -1437,13 +1407,6 @@ body {
   background: color-mix(in srgb, var(--muted) 12%, transparent);
 }
 
-.usage-hour-bar-wrap {
-  flex: 1;
-  display: flex;
-  align-items: flex-end;
-  min-height: 0;
-}
-
 .usage-hour-label {
   font-size: 9px;
   color: var(--dim);

package/dist/usage-render.js

@@ -96,7 +96,6 @@ function parseSessionFile(path) {
     let sessionId = "";
     let cwd = "";
     let parentSession = "";
-    let compactionPending = false;
     const messages = [];
     let content;
     try {
@@ -130,15 +129,24 @@ function parseSessionFile(path) {
             }
             case "compaction": {
                 const usage = parseUsageAmount(entry.usage);
-                if (usage)
-                    messages.push(auxMessage(usage, tsOf(undefined, entry.timestamp)));
-                compactionPending = true;
+                if (usage) {
+                    const ts = tsOf(undefined, entry.timestamp);
+                    // ts===0 means no timestamp was recoverable - skip so it can't
+                    // create a 1970 spike in the hourly graph or leak out of all tabs.
+                    if (ts > 0)
+                        messages.push(auxMessage(usage, ts));
+                }
                 break;
             }
             case "branch_summary": {
                 const usage = parseUsageAmount(entry.usage);
-                if (usage)
-                    messages.push(auxMessage(usage, tsOf(undefined, entry.timestamp)));
+                if (usage) {
+                    const ts = tsOf(undefined, entry.timestamp);
+                    // ts===0 means no timestamp was recoverable - skip so it can't
+                    // create a 1970 spike in the hourly graph or leak out of all tabs.
+                    if (ts > 0)
+                        messages.push(auxMessage(usage, ts));
+                }
                 break;
             }
             case "message": {
@@ -160,7 +168,6 @@ function parseSessionFile(path) {
                             reasoning: usage.reasoning,
                             source: "assistant",
                         });
-                        compactionPending = false;
                     }
                 }
                 break;
@@ -240,6 +247,18 @@ function periodStart(key, now) {
     }
     return 0; // allTime
 }
+/** Exclusive upper bound of a tab window (see periodStart: lastWeek ends at
+ * this Monday 00:00; today/thisWeek/last30Days/allTime end at 'now'). */
+function periodEnd(key, now) {
+    if (key === "lastWeek") {
+        const d = new Date(now);
+        d.setHours(0, 0, 0, 0);
+        const day = d.getDay() === 0 ? 6 : d.getDay() - 1;
+        d.setDate(d.getDate() - day);
+        return d.getTime();
+    }
+    return now;
+}
 /**
  * Aggregate collected session usage into the structured payload the web
  * panel renders. Returns null when no usage data exists. When sessionId
@@ -276,7 +295,8 @@ export function buildUsageData(sessionId) {
             }
             for (const key of TAB_KEYS) {
                 const start = periodStart(key, now);
-                if (ts < start)
+                const end = periodEnd(key, now);
+                if (ts < start || ts >= end)
                     continue;
                 const tab = tabs[key];
                 tab.totals.messages += 1;

package/package.json

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