pi-sdk-web 0.3.11 → 0.3.13

package/dist/server.js

@@ -418,6 +418,16 @@ export class PiWebServer {
                 // Used by the sidebar Tools refresh button
                 this.broadcastState();
                 break;
+            case "set_theme": {
+                // Browser theme switch (dark/light): swap the extension ANSI theme.
+                // CSS switches instantly on the client; the server theme only
+                // affects extension setStatus/setWidget generated after this point
+                // (same as TUI - status text is fixed at setStatus time).
+                const name = data.name === "light" ? "light" : "dark";
+                this.uiContext.setWebTheme(name);
+                this.broadcast({ type: "theme_set", data: { name } });
+                break;
+            }
             case "bash": {
                 const command = typeof data.command === "string" ? data.command : "";
                 if (!command)

package/dist/static/app.js

@@ -16,6 +16,168 @@ const BUILTIN_COMMANDS = [
   { name: 'settings', description: 'Open settings menu (not supported in web)', builtin: true, unsupported: true },
 ];
 
+// ---------------------------------------------------------------------------
+// ANSI escape code to HTML converter.
+//
+// Extensions build status/widget/notify strings with ANSI escapes (via
+// ui.theme.fg/bg, e.g. magic-context's status line). The browser has no
+// terminal to render them, so we convert escapes to inline-styled <span>
+// here — the browser acts as the "terminal". Pi's own export-html does the
+// same conversion server-side (core/export-html/ansi-to-html.ts); this is a
+// port of that pure function, matching its behavior.
+// ---------------------------------------------------------------------------
+
+// Standard ANSI color palette (0-15)
+const ANSI_COLORS = [
+  '#000000', // 0: black
+  '#800000', // 1: red
+  '#008000', // 2: green
+  '#808000', // 3: yellow
+  '#000080', // 4: blue
+  '#800080', // 5: magenta
+  '#008080', // 6: cyan
+  '#c0c0c0', // 7: white
+  '#808080', // 8: bright black
+  '#ff0000', // 9: bright red
+  '#00ff00', // 10: bright green
+  '#ffff00', // 11: bright yellow
+  '#0000ff', // 12: bright blue
+  '#ff00ff', // 13: bright magenta
+  '#00ffff', // 14: bright cyan
+  '#ffffff', // 15: bright white
+];
+
+/** Convert a 256-color index (0-255) to hex. */
+function color256ToHex(index) {
+  if (index < 16) return ANSI_COLORS[index];
+  if (index < 232) {
+    // Color cube (16-231): 6x6x6 = 216 colors
+    const cubeIndex = index - 16;
+    const r = Math.floor(cubeIndex / 36);
+    const g = Math.floor((cubeIndex % 36) / 6);
+    const b = cubeIndex % 6;
+    const toComponent = (n) => (n === 0 ? 0 : 55 + n * 40);
+    const toHex = (n) => toComponent(n).toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }
+  // Grayscale (232-255): 24 shades
+  const gray = 8 + (index - 232) * 10;
+  const grayHex = gray.toString(16).padStart(2, '0');
+  return `#${grayHex}${grayHex}${grayHex}`;
+}
+
+function escapeHtmlAnsi(text) {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+function createEmptyStyle() {
+  return { fg: null, bg: null, bold: false, dim: false, italic: false, underline: false };
+}
+
+function styleToInlineCSS(style) {
+  const parts = [];
+  if (style.fg) parts.push(`color:${style.fg}`);
+  if (style.bg) parts.push(`background-color:${style.bg}`);
+  if (style.bold) parts.push('font-weight:bold');
+  if (style.dim) parts.push('opacity:0.6');
+  if (style.italic) parts.push('font-style:italic');
+  if (style.underline) parts.push('text-decoration:underline');
+  return parts.join(';');
+}
+
+function hasStyle(style) {
+  return style.fg !== null || style.bg !== null || style.bold || style.dim || style.italic || style.underline;
+}
+
+function applySgrCode(params, style) {
+  let i = 0;
+  while (i < params.length) {
+    const code = params[i];
+    if (code === 0) {
+      style.fg = null; style.bg = null; style.bold = false;
+      style.dim = false; style.italic = false; style.underline = false;
+    } else if (code === 1) {
+      style.bold = true;
+    } else if (code === 2) {
+      style.dim = true;
+    } else if (code === 3) {
+      style.italic = true;
+    } else if (code === 4) {
+      style.underline = true;
+    } else if (code === 22) {
+      style.bold = false; style.dim = false;
+    } else if (code === 23) {
+      style.italic = false;
+    } else if (code === 24) {
+      style.underline = false;
+    } else if (code >= 30 && code <= 37) {
+      style.fg = ANSI_COLORS[code - 30];
+    } else if (code === 38) {
+      if (params[i + 1] === 5 && params.length > i + 2) {
+        style.fg = color256ToHex(params[i + 2]);
+        i += 2;
+      } else if (params[i + 1] === 2 && params.length > i + 4) {
+        style.fg = `rgb(${params[i + 2]},${params[i + 3]},${params[i + 4]})`;
+        i += 4;
+      }
+    } else if (code === 39) {
+      style.fg = null;
+    } else if (code >= 40 && code <= 47) {
+      style.bg = ANSI_COLORS[code - 40];
+    } else if (code === 48) {
+      if (params[i + 1] === 5 && params.length > i + 2) {
+        style.bg = color256ToHex(params[i + 2]);
+        i += 2;
+      } else if (params[i + 1] === 2 && params.length > i + 4) {
+        style.bg = `rgb(${params[i + 2]},${params[i + 3]},${params[i + 4]})`;
+        i += 4;
+      }
+    } else if (code === 49) {
+      style.bg = null;
+    } else if (code >= 90 && code <= 97) {
+      style.fg = ANSI_COLORS[code - 90 + 8];
+    } else if (code >= 100 && code <= 107) {
+      style.bg = ANSI_COLORS[code - 100 + 8];
+    }
+    i++;
+  }
+}
+
+// Match ANSI escape sequences: ESC[ followed by params and ending with 'm'
+const ANSI_REGEX = /\x1b\[([\d;]*)m/g;
+
+/** Convert ANSI-escaped text to HTML with inline styles. */
+function ansiToHtml(text) {
+  const style = createEmptyStyle();
+  let result = '';
+  let lastIndex = 0;
+  let inSpan = false;
+  ANSI_REGEX.lastIndex = 0;
+  let match = ANSI_REGEX.exec(text);
+  while (match !== null) {
+    const beforeText = text.slice(lastIndex, match.index);
+    if (beforeText) result += escapeHtmlAnsi(beforeText);
+    const params = match[1] ? match[1].split(';').map((p) => parseInt(p, 10) || 0) : [0];
+    if (inSpan) { result += '</span>'; inSpan = false; }
+    applySgrCode(params, style);
+    if (hasStyle(style)) {
+      result += `<span style="${styleToInlineCSS(style)}">`;
+      inSpan = true;
+    }
+    lastIndex = match.index + match[0].length;
+    match = ANSI_REGEX.exec(text);
+  }
+  const remainingText = text.slice(lastIndex);
+  if (remainingText) result += escapeHtmlAnsi(remainingText);
+  if (inSpan) result += '</span>';
+  return result;
+}
+
 class PiWebClient {
   constructor() {
     this.ws = null;
@@ -84,6 +246,10 @@ class PiWebClient {
         return;
       }
       this.hasConnectedBefore = true;
+      // Sync the persisted theme to the server on first connection so
+      // extension ANSI colors match the CSS theme (server defaults to dark).
+      const stored = localStorage.getItem('piweb-theme') === 'bright' ? 'light' : (localStorage.getItem('piweb-theme') || 'light');
+      this.send({ type: 'set_theme', name: stored });
     };
     ws.onmessage = (ev) => this.handleMessage(ev.data);
     ws.onclose = () => {
@@ -108,20 +274,33 @@ class PiWebClient {
   // ------------------------------------------------------------------
 
   initThemeSwitch() {
-    const stored = localStorage.getItem('piweb-theme') || 'bright';
-    this.applyTheme(stored);
+    // Migrate the old 'bright' key to 'light' (renamed for TUI parity).
+    const stored = localStorage.getItem('piweb-theme') === 'bright' ? 'light' : (localStorage.getItem('piweb-theme') || 'light');
+    this.applyTheme(stored, true);
     document.querySelectorAll('.theme-option').forEach((el) => {
-      el.addEventListener('click', () => this.applyTheme(el.dataset.theme));
+      el.addEventListener('click', () => this.applyTheme(el.dataset.theme, false));
     });
   }
 
-  applyTheme(theme) {
-    const bright = theme === 'bright';
-    document.body.classList.toggle('theme-bright', bright);
-    localStorage.setItem('piweb-theme', bright ? 'bright' : 'dark');
+  applyTheme(theme, initial) {
+    const light = theme === 'light';
+    const name = light ? 'light' : 'dark';
+    // CSS variables switch instantly (the "interface frame", like TUI's
+    // requestRender on theme change).
+    document.body.classList.toggle('theme-light', light);
+    localStorage.setItem('piweb-theme', name);
     document.querySelectorAll('.theme-option').forEach((el) => {
-      el.classList.toggle('active', el.dataset.theme === (bright ? 'bright' : 'dark'));
+      el.classList.toggle('active', el.dataset.theme === name);
     });
+    if (initial) return;
+    // Tell the server to swap the extension ANSI theme: extensions that
+    // setStatus/setWidget AFTER this point generate colors with the new
+    // theme. Already-rendered status text keeps its old colors until the
+    // extension updates it (same as TUI - status text is fixed at setStatus
+    // time; theme change only repaints the frame).
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.send({ type: 'set_theme', name: name });
+    }
   }
 
   send(obj) {
@@ -148,6 +327,12 @@ class PiWebClient {
       case 'state':
         this.renderState(data.data);
         break;
+      case 'theme_set':
+        // Server acknowledged the theme switch. No reload needed: CSS
+        // variables already switched instantly and the server theme only
+        // affects extension setStatus/setWidget generated after this point
+        // (same as TUI).
+        break;
       case 'history':
         this.renderHistory(data.data);
         break;
@@ -869,7 +1054,10 @@ class PiWebClient {
       widgetsEl.appendChild(el);
     }
     el.querySelector('.widget-title').textContent = key;
-    el.querySelector('.widget-body').textContent = (req.widgetLines || []).join('\n');
+    // ANSI escapes (extension theme) render as colored spans per line.
+    el.querySelector('.widget-body').innerHTML = (req.widgetLines || [])
+      .map((line) => ansiToHtml(String(line)))
+      .join('<br>');
     widgetsEl.style.display = 'block';
     // Layout change: keep pinned to bottom if already there
     if (wasAtBottom) this.scrollToBottom();
@@ -1028,9 +1216,11 @@ class PiWebClient {
     if (!expanded && lines.length > limit) {
       const visible = lines.slice(0, limit).join('\n');
       const hidden = lines.length - limit;
-      out.textContent = visible + `\n... (${hidden} more lines, click to expand)`;
+      // ANSI escapes (from tool outputs) render as colored spans; the
+      // truncated marker stays plain text.
+      out.innerHTML = ansiToHtml(visible) + `<div class="tool-truncated">... (${hidden} more lines, click to expand)</div>`;
     } else {
-      out.textContent = full;
+      out.innerHTML = ansiToHtml(full);
     }
   }
 
@@ -1225,9 +1415,12 @@ class PiWebClient {
     const text = this.inputEl.value.trim();
     if (!text) return;
     if (text.startsWith('!')) {
-      const command = text.slice(1).trim();
+      // TUI parity: "!cmd" runs bash (output goes to LLM context);
+      // "!!cmd" runs bash with excludeFromContext (output NOT sent to LLM).
+      const isExcluded = text.startsWith('!!');
+      const command = (isExcluded ? text.slice(2) : text.slice(1)).trim();
       if (command) {
-        this.send({ type: 'bash', command: command });
+        this.send({ type: 'bash', command: command, excludeFromContext: isExcluded });
       }
     } else if (text.startsWith('/')) {
       // Skill commands (/skill:name args) go through prompt expansion in Pi -
@@ -1473,7 +1666,9 @@ class PiWebClient {
     const el = document.getElementById('ext-status');
     if (!el) return;
     const entries = Object.entries(this.extStatus);
-    el.textContent = entries.map(([k, v]) => `${k}: ${v}`).join(' · ');
+    // ANSI escapes (from extension theme.fg/bg) render as colored spans.
+    // ansiToHtml escapes the value's HTML; the key is escaped separately.
+    el.innerHTML = entries.map(([k, v]) => `${this.escapeHtml(k)}: ${ansiToHtml(String(v))}`).join(' · ');
     el.style.display = entries.length ? 'block' : 'none';
   }
 
@@ -1578,7 +1773,8 @@ class PiWebClient {
     if (!container) return;
     const toast = document.createElement('div');
     toast.className = 'toast' + (type ? ` toast-${type}` : '');
-    toast.textContent = message;
+    // 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');

package/dist/static/index.html

@@ -14,7 +14,7 @@
       <span id="theme-switch">
         <span class="theme-option" data-theme="dark">Dark</span>
         <span class="theme-sep">|</span>
-        <span class="theme-option" data-theme="bright">Bright</span>
+        <span class="theme-option" data-theme="light">Light</span>
       </span>
       <span id="msg-nav">
         <span class="nav-btn" id="nav-prev" title="Jump to previous user message">↑</span>

package/dist/static/style.css

@@ -28,8 +28,8 @@
   --table-head-bg: rgba(128, 128, 128, 0.1);
 }
 
-/* Bright theme (colors aligned with Pi's light theme) */
-body.theme-bright {
+/* Light theme (colors aligned with Pi's light theme) */
+body.theme-light {
   --bg: #f5f5f5;
   --text: #1f2328;
   --dim: #767676;

package/dist/ui-context.js

@@ -1,26 +1,69 @@
+import { Theme as PiTheme } from "@earendil-works/pi-coding-agent";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 /**
- * Identity theme: extensions call ui.theme.fg(...) / ui.theme.bg(...) to get
- * ANSI-colored strings. The browser renders with CSS, so we return text
- * unchanged (color codes are meaningless in the DOM). Keeps extensions from
- * crashing on theme access; real colors can be added later.
+ * Load a Pi theme (dark.json/light.json colors) so extensions calling
+ * ui.theme.fg("accent", text) / .bg(...) get REAL ANSI escapes — identical
+ * to TUI (interactive-mode.ts returns the same Theme instance from
+ * ctx.ui.theme). The browser renders the escapes as colored spans (see
+ * app.js ansiToHtml), acting as the "terminal".
+ *
+ * The Theme class is exported by the Pi SDK and the theme JSONs ship in the
+ * package dist. Constructing the Theme directly keeps us independent of
+ * initTheme's global side effects and gives the same result.
  */
-function createIdentityTheme() {
-    return new Proxy({}, {
-        get(_target, prop) {
-            // theme.name / theme.isDark etc. may be accessed as properties
-            if (prop === "name")
-                return "dark";
-            if (prop === "isDark")
-                return true;
-            // Everything else is a color function (fg/bg/...): return identity
-            return (text) => (typeof text === "string" ? text : "");
-        },
-    });
+function createWebTheme(name = "dark") {
+    try {
+        const mainEntry = fileURLToPath(import.meta.resolve("@earendil-works/pi-coding-agent"));
+        const themeJson = JSON.parse(readFileSync(join(dirname(mainEntry), "modes", "interactive", "theme", `${name}.json`), "utf8"));
+        const fgColors = {};
+        const bgColors = {};
+        // theme colors refer to vars by name (e.g. "accent" -> "#8abeb7")
+        // or carry a literal hex. Split background keys from foreground keys by
+        // the explicit ThemeBg set (mirrors Pi's createTheme in theme.ts) rather
+        // than a "Bg" suffix: scrollbarThumb is a ThemeBg without that suffix.
+        const bgKeys = new Set([
+            "selectedBg",
+            "scrollbarThumb",
+            "searchMatchBg",
+            "userMessageBg",
+            "customMessageBg",
+            "toolPendingBg",
+            "toolSuccessBg",
+            "toolErrorBg",
+        ]);
+        for (const [key, value] of Object.entries(themeJson.colors)) {
+            const resolved = value.startsWith("#") ? value : themeJson.vars[value] ?? value;
+            if (bgKeys.has(key)) {
+                bgColors[key] = resolved;
+            }
+            else {
+                fgColors[key] = resolved;
+            }
+        }
+        return new PiTheme(fgColors, bgColors, "truecolor", { name });
+    }
+    catch {
+        // Last-resort identity: return the text argument unchanged (no ANSI).
+        return new Proxy({}, {
+            get(_target, prop) {
+                if (prop === "name")
+                    return "dark";
+                if (prop === "isDark")
+                    return true;
+                return (...args) => {
+                    const textArg = args.length > 1 ? args[1] : args[0];
+                    return typeof textArg === "string" ? textArg : "";
+                };
+            },
+        });
+    }
 }
 export class WebUIContext {
     pending = new Map();
     sink;
-    identityTheme = createIdentityTheme();
+    webTheme = createWebTheme();
     /** Latest setStatus values per key, so late-connecting browsers get current state */
     statusMap = new Map();
     constructor(sink) {
@@ -148,7 +191,7 @@ export class WebUIContext {
     // Theme
     // ------------------------------------------------------------------
     get theme() {
-        return this.identityTheme;
+        return this.webTheme;
     }
     getAllThemes() {
         return [];
@@ -159,6 +202,10 @@ export class WebUIContext {
     setTheme() {
         return { success: false, error: "Theme switching not supported in web mode" };
     }
+    /** Switch the theme used for extension ANSI colors (dark/light). */
+    setWebTheme(name) {
+        this.webTheme = createWebTheme(name);
+    }
     // ------------------------------------------------------------------
     // Tool output expansion (web always shows expandable blocks)
     // ------------------------------------------------------------------

package/package.json

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