pi-sdk-web 0.4.1 → 0.4.3

package/dist/server.js

@@ -433,6 +433,9 @@ export class PiWebServer {
                 if (!command)
                     throw new Error("Missing 'command'");
                 const excludeFromContext = data.excludeFromContext === true;
+                // Correlation id for streaming: Pi emits bash_execution_update
+                // events carrying this id while the command runs (onChunk).
+                const id = typeof data.id === "string" && data.id ? data.id : `bash-${Date.now()}`;
                 // Let extensions intercept/enhance the command (same as Pi RPC/TUI):
                 // user_bash handlers may provide a result or operations for execution.
                 const eventResult = await this.session.extensionRunner.emitUserBash({
@@ -443,14 +446,15 @@ export class PiWebServer {
                 });
                 if (eventResult?.result) {
                     this.session.recordBashResult(command, eventResult.result, { excludeFromContext });
-                    this.broadcast({ type: "bash_result", command, data: eventResult.result });
+                    this.broadcast({ type: "bash_result", id, command, data: eventResult.result });
                     break;
                 }
                 const result = await this.session.executeBash(command, undefined, {
                     excludeFromContext,
+                    id,
                     operations: eventResult?.operations,
                 });
-                this.broadcast({ type: "bash_result", command, data: result });
+                this.broadcast({ type: "bash_result", id, command, data: result });
                 break;
             }
             case "cycle_model":
@@ -530,11 +534,13 @@ export class PiWebServer {
             case "set_scoped_models": {
                 const models = Array.isArray(data.models) ? data.models : [];
                 const resolved = [];
+                const enabledIds = [];
                 for (const m of models) {
                     const provider = m.provider;
                     const modelId = m.modelId;
                     if (!provider || !modelId)
                         continue;
+                    enabledIds.push(`${provider}/${modelId}`);
                     const model = this.session.modelRuntime
                         .getAvailableSnapshot()
                         .find((x) => x.provider === provider && x.id === modelId);
@@ -542,6 +548,11 @@ export class PiWebServer {
                         resolved.push({ model, thinkingLevel: m.thinkingLevel });
                 }
                 this.session.setScopedModels(resolved);
+                // Persist only on explicit save (TUI Ctrl+S onPersist); toggling is
+                // session-only (onChange) and must not rewrite settings.json.
+                if (data.persist === true) {
+                    this.session.settingsManager.setEnabledModels(enabledIds.length > 0 ? enabledIds : undefined);
+                }
                 this.broadcastState();
                 break;
             }

package/dist/static/app.js

@@ -213,6 +213,10 @@ class PiWebClient {
 
     // Tool call rendering state: map toolCallId -> element
     this.toolEls = new Map();
+    // Bash streaming blocks: map bash id -> element
+    this.bashEls = new Map();
+    this.pendingBashId = null;
+    this.pendingBashCommand = '';
     // Tool execution timers: map toolCallId -> interval id
     this.toolTimers = new Map();
 
@@ -913,6 +917,14 @@ class PiWebClient {
         // Extension custom entries (e.g. magic-context /ctx-status) arrive live
         this.renderEntry(ev.entry);
         break;
+      case 'bash_execution_update':
+        // Streaming bash output (e.g. !! running a long-lived program).
+        // Append the delta to the matching tool block in real time; the
+        // final bash_result finalizes it (exit code, truncation info).
+        if (typeof ev.delta === 'string' && ev.delta.length > 0) {
+          this.appendBashChunk(ev.id, ev.delta);
+        }
+        break;
       default:
         break;
     }
@@ -1310,11 +1322,39 @@ class PiWebClient {
     this.toolEls.delete(ev.toolCallId);
   }
 
+  appendBashChunk(id, delta) {
+    // Find or create the tool block for this bash run (keyed by the id the
+    // client sent with the bash message, e.g. bash-<timestamp>).
+    const key = id || this.pendingBashId;
+    if (!key) return;
+    let div = this.bashEls.get(key);
+    if (!div) {
+      div = this.createToolBlock('bash', { command: this.pendingBashCommand || '' }, key);
+      div.className = 'tool-block pending';
+      this.bashEls.set(key, div);
+    }
+    // Append the delta to the full text and re-apply the preview (respects
+    // the collapsed/expanded state of the block).
+    const full = (div.dataset.fullOutput || '') + delta;
+    div.dataset.fullOutput = full;
+    this.applyToolPreview(div);
+    if (this.wasAtBottom()) this.scrollToBottom();
+  }
+
   renderBashResult(data) {
-    const div = this.createToolBlock('bash', { command: data.command }, 'bash-' + Date.now());
+    const id = data.id;
     const result = data.data || {};
+    let div = (id && this.bashEls.get(id)) || null;
+    if (!div) {
+      div = this.createToolBlock('bash', { command: data.command }, id || 'bash-' + Date.now());
+      if (id) this.bashEls.set(id, div);
+    }
     const output = result.output || '';
-    this.setToolOutput(div, output);
+    // Streaming blocks have the full text already (appended incrementally);
+    // for non-streaming runs set it now.
+    if (!(div.dataset.fullOutput && div.dataset.fullOutput.length > 0)) {
+      this.setToolOutput(div, output);
+    }
 
     const isError = result.exitCode !== undefined && result.exitCode !== 0;
     div.className = isError ? 'tool-block error' : 'tool-block success';
@@ -1334,6 +1374,10 @@ class PiWebClient {
     }
 
     this.scrollToBottom();
+    // Streaming done: drop the block from the live map (no more deltas).
+    if (id) this.bashEls.delete(id);
+    this.pendingBashId = null;
+    this.pendingBashCommand = '';
   }
 
   resultText(result) {
@@ -1420,7 +1464,10 @@ class PiWebClient {
       const isExcluded = text.startsWith('!!');
       const command = (isExcluded ? text.slice(2) : text.slice(1)).trim();
       if (command) {
-        this.send({ type: 'bash', command: command, excludeFromContext: isExcluded });
+        const id = 'bash-' + Date.now();
+        this.send({ type: 'bash', command: command, excludeFromContext: isExcluded, id: id });
+        this.pendingBashId = id;
+        this.pendingBashCommand = command;
       }
     } else if (text.startsWith('/')) {
       // Skill commands (/skill:name args) go through prompt expansion in Pi -
@@ -1872,6 +1919,7 @@ class PiWebClient {
     this.scopedModelsAll = [];
     this.scopedModelsSelected = new Set();
     this.scopedModelsData = null;
+    this.scopedModelsSaved = true;
     this.modalList.innerHTML = '<div class="modal-message">Loading models...</div>';
     this.send({ type: 'get_scoped_models' });
   }
@@ -1910,11 +1958,13 @@ class PiWebClient {
       })
       .join('');
     this.modalList.innerHTML =
-      rows +
       `<div class="modal-actions">
-         <button class="modal-btn ok-btn">Apply</button>
+         <button class="modal-btn ok-btn">Save</button>
          <button class="modal-btn cancel-btn">Cancel</button>
-       </div>`;
+         <span class="modal-hint"></span>
+       </div>` +
+      rows;
+    this.updateScopedUnsavedHint();
     this.modalList.querySelectorAll('.scoped-model').forEach((el) => {
       el.addEventListener('click', () => {
         const key = el.dataset.key;
@@ -1923,26 +1973,14 @@ class PiWebClient {
         const checked = this.scopedModelsSelected.has(key);
         el.classList.toggle('selected', checked);
         el.querySelector('.modal-check').textContent = checked ? '☑' : '☐';
+        // TUI onChange: apply to session (memory, persist=false); Save persists.
+        this.applyScopedModels(false);
       });
     });
     const okBtn = this.modalList.querySelector('.ok-btn');
     if (okBtn) {
       okBtn.addEventListener('click', () => {
-        const models = [];
-        for (const m of this.scopedModelsAll || []) {
-          const key = `${m.provider}/${m.id}`;
-          if (this.scopedModelsSelected.has(key)) {
-            const scopedInfo = (this.scopedModelsData?.scoped || []).find(
-              (s) => `${s.provider}/${s.id}` === key,
-            );
-            models.push({
-              provider: m.provider,
-              modelId: m.id,
-              thinkingLevel: scopedInfo?.thinkingLevel,
-            });
-          }
-        }
-        this.send({ type: 'set_scoped_models', models });
+        this.applyScopedModels(true);
         this.closeModal();
       });
     }
@@ -1950,6 +1988,34 @@ class PiWebClient {
     if (cancelBtn) cancelBtn.addEventListener('click', () => this.closeModal());
   }
 
+  /** Send the current selection to the server (persist=false = memory only). */
+  applyScopedModels(persist) {
+    const models = [];
+    for (const m of this.scopedModelsAll || []) {
+      const key = `${m.provider}/${m.id}`;
+      if (this.scopedModelsSelected.has(key)) {
+        const scopedInfo = (this.scopedModelsData?.scoped || []).find(
+          (s) => `${s.provider}/${s.id}` === key,
+        );
+        models.push({
+          provider: m.provider,
+          modelId: m.id,
+          thinkingLevel: scopedInfo?.thinkingLevel,
+        });
+      }
+    }
+    this.send({ type: 'set_scoped_models', models, persist: persist });
+    this.scopedModelsSaved = persist;
+    this.updateScopedUnsavedHint();
+  }
+
+  updateScopedUnsavedHint() {
+    const hint = this.modalList.querySelector('.modal-hint');
+    if (!hint) return;
+    hint.textContent = this.scopedModelsSaved ? '' : ' (unsaved)';
+    hint.className = this.scopedModelsSaved ? 'modal-hint' : 'modal-hint unsaved';
+  }
+
   // ------------------------------------------------------------------
   // Slash command menu
   // ------------------------------------------------------------------

package/dist/static/style.css

@@ -859,6 +859,19 @@ body {
   gap: 8px;
   justify-content: flex-end;
   margin-top: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.modal-hint {
+  font-size: 12px;
+  color: var(--dim);
+  margin-left: auto;
+}
+
+.modal-hint.unsaved {
+  color: var(--warning);
+  font-weight: 600;
 }
 
 .modal-btn {

package/package.json

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