pi-sdk-web 0.3.12 → 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

@@ -246,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 = () => {
@@ -270,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) {
@@ -310,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;

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

@@ -3,23 +3,23 @@ import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 /**
- * Build the official Pi theme (colors from the shipped dark.json) 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".
+ * 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 and initTheme are exported by the Pi SDK; dark.json ships
- * in the package dist. Constructing the Theme directly keeps us independent
- * of initTheme's global side effects and gives the same result.
+ * 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 createWebTheme() {
+function createWebTheme(name = "dark") {
     try {
         const mainEntry = fileURLToPath(import.meta.resolve("@earendil-works/pi-coding-agent"));
-        const darkJson = JSON.parse(readFileSync(join(dirname(mainEntry), "modes", "interactive", "theme", "dark.json"), "utf8"));
+        const themeJson = JSON.parse(readFileSync(join(dirname(mainEntry), "modes", "interactive", "theme", `${name}.json`), "utf8"));
         const fgColors = {};
         const bgColors = {};
-        // dark.json colors refer to vars by name (e.g. "accent" -> "#8abeb7")
+        // 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.
@@ -33,8 +33,8 @@ function createWebTheme() {
             "toolSuccessBg",
             "toolErrorBg",
         ]);
-        for (const [key, value] of Object.entries(darkJson.colors)) {
-            const resolved = value.startsWith("#") ? value : darkJson.vars[value] ?? value;
+        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;
             }
@@ -42,7 +42,7 @@ function createWebTheme() {
                 fgColors[key] = resolved;
             }
         }
-        return new PiTheme(fgColors, bgColors, "truecolor", { name: "dark" });
+        return new PiTheme(fgColors, bgColors, "truecolor", { name });
     }
     catch {
         // Last-resort identity: return the text argument unchanged (no ANSI).
@@ -202,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.12",
+  "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": {