pi-sdk-web 0.3.3 → 0.3.5

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 {
@@ -385,6 +399,10 @@ export class PiWebServer {
             case "get_stats":
                 this.broadcastStats();
                 break;
+            case "get_state":
+                // Used by the sidebar Tools refresh button
+                this.broadcastState();
+                break;
             case "bash": {
                 const command = typeof data.command === "string" ? data.command : "";
                 if (!command)

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,90 @@ 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;
-    }
-
-    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);
-    }
+    this.loadedResourcesEl.innerHTML = '';
 
-    const div = document.createElement('div');
-    div.className = 'resources-block';
-    div.dataset.expanded = 'false';
+    // 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 header = document.createElement('div');
-    header.className = 'resources-header';
-    header.textContent = 'Loaded Resources (click to expand)';
+      const div = document.createElement('div');
+      div.className = 'resources-block';
+      div.dataset.expanded = 'false';
 
-    const body = document.createElement('div');
-    body.className = 'resources-body';
-    body.style.display = 'none';
+      const header = document.createElement('div');
+      header.className = 'resources-header';
+      header.textContent = 'Loaded Resources (click to expand)';
 
-    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('');
+      const body = document.createElement('div');
+      body.className = 'resources-body';
+      body.style.display = 'none';
 
-    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)';
-    });
+      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);
+    }
+
+    // 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';
+
+      const header = document.createElement('div');
+      header.className = 'resources-header';
+      header.textContent = 'Tools (click to expand)';
+      const refreshBtn = document.createElement('span');
+      refreshBtn.className = 'tools-refresh';
+      refreshBtn.title = 'Refresh tools list';
+      refreshBtn.textContent = '⟳';
+      refreshBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.send({ type: 'get_state' });
+      });
+      header.appendChild(refreshBtn);
 
-    this.loadedResourcesEl.innerHTML = '';
-    this.loadedResourcesEl.appendChild(div);
+      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.firstChild.textContent = expanded ? 'Tools (click to expand)' : 'Tools (click to collapse)';
+      });
+      this.loadedResourcesEl.appendChild(div);
+    }
   }
 
   resourceSection(name, items) {

package/dist/static/style.css

@@ -171,6 +171,17 @@ body {
   color: var(--dim);
 }
 
+.tools-refresh {
+  float: right;
+  cursor: pointer;
+  color: var(--accent);
+  padding: 0 4px;
+}
+
+.tools-refresh:hover {
+  text-decoration: underline;
+}
+
 .resources-body {
   margin-top: 6px;
   color: var(--muted);

package/package.json

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