pi-sdk-web 0.2.2 → 0.2.4

package/dist/server.js

@@ -251,7 +251,9 @@ export class PiWebServer {
     buildHistory() {
         try {
             return {
-                entries: this.session.sessionManager.getEntries(),
+                // Match TUI's initial rendering: the current context view
+                // (compaction collapses older entries into a summary; branch-aware)
+                entries: this.session.sessionManager.buildContextEntries(),
                 leafId: this.session.sessionManager.getLeafId(),
             };
         }
@@ -485,10 +487,68 @@ export class PiWebServer {
                 await this.executeCommand(name, args);
                 break;
             }
+            case "session":
+                // Read-only session info (TUI /session equivalent)
+                this.broadcastSessionInfo();
+                break;
             default:
                 throw new Error(`Unsupported command: ${cmdType}`);
         }
     }
+    /** 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,7 @@ 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: '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 },
@@ -1202,6 +1203,8 @@ 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 === 'name') {
       const newName = window.prompt('Set session display name:', '');
       if (newName && newName.trim()) {
@@ -1469,12 +1472,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) {
@@ -1614,11 +1635,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/package.json

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