pi-sdk-web 0.3.2 → 0.3.4

package/dist/server.js

@@ -278,6 +278,7 @@ export class PiWebServer {
             cwd: this.formatCwd(this.session.sessionManager.getCwd()),
             gitBranch: this.getGitBranch(this.session.sessionManager.getCwd()),
             commands: this.getCommands(),
+            tools: this.getActiveTools(),
         };
         try {
             state.sessionStats = this.session.getSessionStats();
@@ -352,6 +353,19 @@ export class PiWebServer {
             return [];
         }
     }
+    /** Tools currently exposed to the LLM (name + description). */
+    getActiveTools() {
+        try {
+            const active = new Set(this.session.getActiveToolNames());
+            return this.session
+                .getAllTools()
+                .filter((t) => active.has(t.name))
+                .map((t) => ({ name: t.name, description: t.description }));
+        }
+        catch {
+            return [];
+        }
+    }
     handleClientMessage(ws, raw) {
         let data;
         try {

package/dist/static/app.js

@@ -208,7 +208,7 @@ class PiWebClient {
     }
 
     // Loaded resources
-    this.renderLoadedResources(state.commands);
+    this.renderLoadedResources(state.commands, state.tools);
 
     // First footer line: pwd (branch) • session name
     const pwd = state.cwd || '';
@@ -220,56 +220,81 @@ class PiWebClient {
     this.renderStats(state.sessionStats, state);
   }
 
-  renderLoadedResources(commands) {
+  renderLoadedResources(commands, tools) {
     if (!this.loadedResourcesEl) return;
-    if (!commands || commands.length === 0) {
-      this.loadedResourcesEl.innerHTML = '';
-      return;
-    }
+    this.loadedResourcesEl.innerHTML = '';
 
-    const groups = { skill: [], prompt: [], extension: [] };
-    for (const cmd of commands) {
-      const source = cmd.source;
-      if (source === 'skill') groups.skill.push(cmd);
-      else if (source === 'prompt') groups.prompt.push(cmd);
-      else groups.extension.push(cmd);
-    }
+    // Loaded Resources block (Skills/Prompts/Extensions)
+    if (commands && commands.length > 0) {
+      const groups = { skill: [], prompt: [], extension: [] };
+      for (const cmd of commands) {
+        const source = cmd.source;
+        if (source === 'skill') groups.skill.push(cmd);
+        else if (source === 'prompt') groups.prompt.push(cmd);
+        else groups.extension.push(cmd);
+      }
 
-    const div = document.createElement('div');
-    div.className = 'resources-block';
-    div.dataset.expanded = 'false';
+      const div = document.createElement('div');
+      div.className = 'resources-block';
+      div.dataset.expanded = 'false';
 
-    const header = document.createElement('div');
-    header.className = 'resources-header';
-    header.textContent = 'Loaded Resources (click to expand)';
+      const header = document.createElement('div');
+      header.className = 'resources-header';
+      header.textContent = 'Loaded Resources (click to expand)';
 
-    const body = document.createElement('div');
-    body.className = 'resources-body';
-    body.style.display = 'none';
+      const body = document.createElement('div');
+      body.className = 'resources-body';
+      body.style.display = 'none';
 
-    const sections = [];
-    if (groups.skill.length > 0) {
-      sections.push(this.resourceSection('Skills', groups.skill.map((c) => c.name)));
-    }
-    if (groups.prompt.length > 0) {
-      sections.push(this.resourceSection('Prompts', groups.prompt.map((c) => c.name)));
-    }
-    if (groups.extension.length > 0) {
-      sections.push(this.resourceSection('Extensions', groups.extension.map((c) => c.name)));
+      const sections = [];
+      if (groups.skill.length > 0) {
+        sections.push(this.resourceSection('Skills', groups.skill.map((c) => c.name)));
+      }
+      if (groups.prompt.length > 0) {
+        sections.push(this.resourceSection('Prompts', groups.prompt.map((c) => c.name)));
+      }
+      if (groups.extension.length > 0) {
+        sections.push(this.resourceSection('Extensions', groups.extension.map((c) => c.name)));
+      }
+      body.innerHTML = sections.join('');
+
+      div.appendChild(header);
+      div.appendChild(body);
+      div.addEventListener('click', () => {
+        const expanded = div.dataset.expanded === 'true';
+        div.dataset.expanded = expanded ? 'false' : 'true';
+        body.style.display = expanded ? 'none' : 'block';
+        header.textContent = expanded ? 'Loaded Resources (click to expand)' : 'Loaded Resources (click to collapse)';
+      });
+      this.loadedResourcesEl.appendChild(div);
     }
-    body.innerHTML = sections.join('');
 
-    div.appendChild(header);
-    div.appendChild(body);
-    div.addEventListener('click', () => {
-      const expanded = div.dataset.expanded === 'true';
-      div.dataset.expanded = expanded ? 'false' : 'true';
-      body.style.display = expanded ? 'none' : 'block';
-      header.textContent = expanded ? 'Loaded Resources (click to expand)' : 'Loaded Resources (click to collapse)';
-    });
+    // Separate Tools block below Loaded Resources (web enhancement)
+    if (tools && tools.length > 0) {
+      const div = document.createElement('div');
+      div.className = 'resources-block';
+      div.dataset.expanded = 'false';
+      div.style.marginTop = '6px';
 
-    this.loadedResourcesEl.innerHTML = '';
-    this.loadedResourcesEl.appendChild(div);
+      const header = document.createElement('div');
+      header.className = 'resources-header';
+      header.textContent = 'Tools (click to expand)';
+
+      const body = document.createElement('div');
+      body.className = 'resources-body';
+      body.style.display = 'none';
+      body.innerHTML = this.resourceSection('', tools.map((t) => t.name));
+
+      div.appendChild(header);
+      div.appendChild(body);
+      div.addEventListener('click', () => {
+        const expanded = div.dataset.expanded === 'true';
+        div.dataset.expanded = expanded ? 'false' : 'true';
+        body.style.display = expanded ? 'none' : 'block';
+        header.textContent = expanded ? 'Tools (click to expand)' : 'Tools (click to collapse)';
+      });
+      this.loadedResourcesEl.appendChild(div);
+    }
   }
 
   resourceSection(name, items) {
@@ -804,12 +829,14 @@ class PiWebClient {
     const widgetsEl = document.getElementById('widgets');
     if (!widgetsEl) return;
     const key = req.widgetKey || 'widget';
+    const wasAtBottom = this.wasAtBottom();
 
     if (req.widgetLines === undefined || req.widgetLines === null) {
       // Clear this widget
       const el = widgetsEl.querySelector(`[data-widget-key="${CSS.escape(key)}"]`);
       if (el) el.remove();
       if (widgetsEl.children.length === 0) widgetsEl.style.display = 'none';
+      if (wasAtBottom) this.scrollToBottom();
       return;
     }
 
@@ -829,6 +856,8 @@ class PiWebClient {
     el.querySelector('.widget-title').textContent = key;
     el.querySelector('.widget-body').textContent = (req.widgetLines || []).join('\n');
     widgetsEl.style.display = 'block';
+    // Layout change: keep pinned to bottom if already there
+    if (wasAtBottom) this.scrollToBottom();
   }
 
   // ------------------------------------------------------------------
@@ -1401,18 +1430,28 @@ class PiWebClient {
   renderStatusItem(req) {
     const el = document.getElementById('ext-status');
     if (!el) return;
+    const wasAtBottom = this.wasAtBottom();
     if (req.statusText === undefined || req.statusText === null) {
       delete this.extStatus[req.statusKey];
     } else {
       this.extStatus[req.statusKey] = req.statusText;
     }
     this.updateExtStatusDisplay();
+    if (wasAtBottom) this.scrollToBottom();
   }
 
   applyExtStatusSnapshot(snapshot) {
     if (!snapshot) return;
+    const wasAtBottom = this.wasAtBottom();
     this.extStatus = Object.assign({}, snapshot);
     this.updateExtStatusDisplay();
+    if (wasAtBottom) this.scrollToBottom();
+  }
+
+  /** Whether the view is currently pinned to the bottom (before layout changes). */
+  wasAtBottom() {
+    const scroller = document.getElementById('scroll-view');
+    return !!scroller && scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2;
   }
 
   updateExtStatusDisplay() {

package/package.json

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