pi-studio 0.9.33 → 0.9.34

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.34] — 2026-07-02
+
+### Added
+- Added a bottom-right Studio theme menu for switching the active Pi theme without returning to the terminal.
+- Added `Cmd/Ctrl+Alt+1–7` shortcuts for switching directly between all right-pane views, with editor-only views warning on unavailable full-session panes.
+- Added refreshed README screenshots plus a reproducible gradient-descent screenshot fixture under `assets/demo/`.
+
 ## [0.9.33] — 2026-06-16
 
 ### Added

package/README.md

@@ -6,23 +6,33 @@ Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace
 
 [Watch the 2-minute demo (MP4, 2x speed, no audio)](https://github.com/omaclaren/pi-studio/releases/latest/download/pi-studio-demo-2min.mp4)
 
+_The video shows an earlier version of the Studio interface. The basic workflow is the same, but there have been minor UI changes since it was recorded; the screenshots show the more recent version._
+
 ## Screenshots
 
-**Dark**
+**Dark workspace**
 
 ![Pi Studio workspace (dark)](./assets/screenshots/dark-workspace.png)
 
-**Light**
+**Light workspace**
 
 ![Pi Studio workspace (light)](./assets/screenshots/light-workspace.png)
 
+**Zen mode**
+
+![Pi Studio Zen mode (dark)](./assets/screenshots/dark-zen.png)
+
+**Zen mode with a custom theme and rendered code preview**
+
+![Pi Studio Zen mode with custom theme and rendered code preview](./assets/screenshots/theme-zen-code.png)
+
 ## What it does
 
 - Opens a two-pane browser workspace: **Editor** (left) + **Response/Working/Editor Preview** (right)
 - Supports one canonical full Studio view per Pi session, plus additional editor-only companion views when you want extra editing/preview surfaces; editor-only views can also browse files and use the Studio REPL send controls without taking over the full Studio session view
 - Includes a global **Zen** mode for hiding secondary Studio chrome without changing the current left/right pane layout
 - Runs editor text directly, asks for structured critique (auto/writing/code focus), offers a manual **Suggest completion** action for short cursor-aware continuations (`Option/Alt+Tab` where available or `Cmd/Ctrl+Shift+Space` from the editor, `Tab` to insert a visible suggestion) with an optional editor-plus-latest-response context mode, or opens **Quiz me** for a Studio-native active-recall loop over the current editor text, selection, current file, folder, or repo, with optional focus guidance for shaping question selection
-- Includes a live **Working** view for following current model/tool activity, with `All` / `Thinking` / `Tools` filters, image previews for image-producing tool outputs, plus **Load visible into editor** and **Copy visible** actions; when cycling response history, Working follows saved working details for the selected response when available, and `Cmd/Ctrl+Alt+P` / `Cmd/Ctrl+Alt+E` / `Cmd/Ctrl+Alt+W` switch directly between Response Preview, Editor Preview, and Working
+- Includes a live **Working** view for following current model/tool activity, with `All` / `Thinking` / `Tools` filters, image previews for image-producing tool outputs, plus **Load visible into editor** and **Copy visible** actions; when cycling response history, Working follows saved working details for the selected response when available, and `Cmd/Ctrl+Alt+1–7` switches directly between right-pane views while `Cmd/Ctrl+Alt+P` / `Cmd/Ctrl+Alt+E` / `Cmd/Ctrl+Alt+W` keep quick mnemonic shortcuts for Response Preview, Editor Preview, and Working
 - Includes a right-pane **Changes** view for browsing the current git diff by file, previewing per-file diffs, opening changed files, loading the full diff into the editor, and copying the diff
 - Includes a right-pane **Files** view for browsing the current Pi session/resource directory, opening folders, opening the Files root in Finder/the system file manager, loading text/code/CSV/TSV documents into the editor, previewing PDFs/images, opening PDF/image previews in a new Studio tab, converting DOCX/ODT documents to editable Markdown when Pandoc is available after confirmation, copying paths, setting the current folder as the Studio working directory, and revealing files in the file manager
 - Includes an optional tmux-backed **REPL** view for Shell, Python, IPython, Julia, R, GHCi, and Clojure sessions, with Raw/Literate send modes, `Cmd/Ctrl+Shift+Enter` **Send to REPL**, session start/stop/interrupt controls, a compact refresh-persistent **Studio REPL Record** of user and Pi-sent code, a secondary raw tmux mirror, agent-facing `studio_repl_status` / `studio_repl_send` tools, and Markdown/PDF/HTML export
@@ -46,7 +56,7 @@ Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace
 - Ships optional `pi-studio-dark` and `pi-studio-light` themes tuned for Studio's browser workspace
 - Exports right-pane preview as PDF (pandoc + LaTeX) or standalone HTML into the source file directory, Studio working directory, or Pi session directory; PDF export can open in a Studio preview tab or the default PDF viewer, and HTML export can open in the default browser or in a new Studio editor tab for inspection/commenting, while preserving authored HTML previews as HTML and rendering CSV/TSV editor previews as tables
 - Exports local files headlessly via `/studio-pdf <path>` to `<name>.studio.pdf` or `/studio-html <path>` to `<name>.studio.html`; without a path, those commands export the last model response to a timestamped file. Agent tools `studio_export_pdf` and `studio_export_html` expose the same export pipeline for remote/Telegram-style sessions.
-- Shows model/session/context usage in the footer, plus a compact-context action
+- Shows model/session/context usage in the footer, plus compact-context and active-theme controls
 
 ## Commands
 

package/assets/demo/README.md

@@ -0,0 +1,17 @@
+# pi Studio screenshot demo
+
+This directory contains the source document and generated figures used for pi Studio README screenshots.
+
+Regenerate figures from the repository root:
+
+```bash
+python3 assets/demo/gradient_descent_demo.py
+```
+
+Open the Markdown fixture in Studio:
+
+```bash
+/studio assets/demo/gradient-descent-demo.md
+```
+
+Then switch the right pane to **Editor (Preview)** and capture dark/light screenshots as needed.

package/assets/demo/gradient-descent-demo.md

@@ -0,0 +1,80 @@
+# Gradient descent on a non-convex surface
+
+This is a compact **pi Studio** demo mixing prose, display math, generated figures, Python code, and inline annotations.
+
+## 1. The objective
+
+Consider the function
+
+$$
+f(x,y) = 0.35x^2 + 1.2y^2 + 0.8\sin(1.5x)\cos(2y).
+$$
+
+It is smooth, but not purely quadratic, so the sinusoidal term creates local ripples [an: define formally] in the loss landscape.
+
+The gradient is
+
+$$
+\nabla f(x,y) =
+\begin{pmatrix}
+0.7x + 1.2\cos(1.5x)\cos(2y) \\
+2.4y - 1.6\sin(1.5x)\sin(2y)
+\end{pmatrix}.
+$$
+
+Starting from an initial point $p_0 = (x_0, y_0)$, gradient descent updates via
+
+$$
+p_{k+1} = p_k - \eta \, \nabla f(p_k),
+$$
+
+where $\eta > 0$ is the learning rate.
+
+## 2. Optimization path in parameter space
+
+The contour plot below shows the objective landscape together with the iterates of gradient descent. [an: did you actually run?]
+
+![Gradient descent contour plot](generated/gradient_descent_contour.png){ width=420px }
+
+The red path shows how the algorithm follows the local slope downhill. Because the surface is non-convex, the geometry is more interesting than a simple bowl-shaped quadratic.
+
+## 3. Objective value by iteration
+
+The next figure shows the scalar objective value $f(x_k,y_k)$ as the method runs.
+
+![Gradient descent convergence plot](generated/gradient_descent_convergence.png){ width=400px }
+
+A simple first-order method can still make steady progress when the step size is chosen reasonably.
+
+## 4. Minimal Python snippet
+
+```python
+import numpy as np
+
+def f(x, y):
+    return 0.35 * x**2 + 1.2 * y**2 + 0.8 * np.sin(1.5 * x) * np.cos(2.0 * y)
+
+def grad(x, y):
+    dfdx = 0.7 * x + 1.2 * np.cos(1.5 * x) * np.cos(2.0 * y)
+    dfdy = 2.4 * y - 1.6 * np.sin(1.5 * x) * np.sin(2.0 * y)
+    return np.array([dfdx, dfdy])
+
+p = np.array([-3.4, 2.8], dtype=float)
+eta = 0.14
+for _ in range(30):
+    p = p - eta * grad(*p)
+```
+
+## 5. Why this works well as a Studio demo
+
+- the math is recognizable but not too heavy
+- the figures are visually appealing
+- the code is short and readable
+- the preview shows equations, prose, code, images, annotations, and outline navigation together in one place
+
+Demo assets:
+
+- `assets/demo/gradient-descent-demo.md`
+- `assets/demo/gradient_descent_demo.py`
+- `assets/demo/generated/gradient_descent_contour.png`
+- `assets/demo/generated/gradient_descent_convergence.png`

package/assets/demo/gradient_descent_demo.py

@@ -0,0 +1,88 @@
+#!/usr/bin/env python3
+"""Generate figures for the pi Studio README demo.
+
+Run from the repository root:
+
+    python3 assets/demo/gradient_descent_demo.py
+"""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+import numpy as np
+import matplotlib.pyplot as plt
+
+
+OUTPUT_DIR = Path(__file__).resolve().parent / "generated"
+
+
+def f(x: np.ndarray | float, y: np.ndarray | float) -> np.ndarray | float:
+    return 0.35 * x**2 + 1.2 * y**2 + 0.8 * np.sin(1.5 * x) * np.cos(2.0 * y)
+
+
+def grad(x: float, y: float) -> np.ndarray:
+    dfdx = 0.7 * x + 1.2 * np.cos(1.5 * x) * np.cos(2.0 * y)
+    dfdy = 2.4 * y - 1.6 * np.sin(1.5 * x) * np.sin(2.0 * y)
+    return np.array([dfdx, dfdy])
+
+
+def run_gradient_descent(start: tuple[float, float] = (-3.4, 2.8), eta: float = 0.14, steps: int = 30) -> np.ndarray:
+    path = [np.array(start, dtype=float)]
+    p = path[0].copy()
+    for _ in range(steps):
+        p = p - eta * grad(float(p[0]), float(p[1]))
+        path.append(p.copy())
+    return np.vstack(path)
+
+
+def save_contour_plot(path: np.ndarray) -> None:
+    xs = np.linspace(-4.5, 4.5, 260)
+    ys = np.linspace(-3.4, 3.4, 220)
+    X, Y = np.meshgrid(xs, ys)
+    Z = f(X, Y)
+
+    fig, ax = plt.subplots(figsize=(6.2, 4.6), dpi=160)
+    levels = np.linspace(float(Z.min()), float(Z.max()), 34)
+    contour = ax.contourf(X, Y, Z, levels=levels, cmap="viridis")
+    ax.contour(X, Y, Z, levels=levels[::2], colors="white", linewidths=0.35, alpha=0.45)
+    ax.plot(path[:, 0], path[:, 1], color="#ff6b6b", linewidth=2.0, marker="o", markersize=2.2)
+    ax.scatter(path[0, 0], path[0, 1], s=36, color="#ffd166", edgecolor="black", linewidth=0.5, label="start", zorder=5)
+    ax.scatter(path[-1, 0], path[-1, 1], s=36, color="#06d6a0", edgecolor="black", linewidth=0.5, label="final", zorder=5)
+    ax.set_title("Gradient descent on a non-convex surface", fontsize=10)
+    ax.set_xlabel("x")
+    ax.set_ylabel("y")
+    ax.legend(loc="upper right", frameon=True, fontsize=7)
+    fig.colorbar(contour, ax=ax, label="f(x, y)")
+    fig.tight_layout()
+    fig.savefig(OUTPUT_DIR / "gradient_descent_contour.png", bbox_inches="tight")
+    plt.close(fig)
+
+
+def save_convergence_plot(path: np.ndarray) -> None:
+    values = np.array([f(float(x), float(y)) for x, y in path])
+    iterations = np.arange(len(values))
+
+    fig, ax = plt.subplots(figsize=(5.8, 3.4), dpi=160)
+    ax.plot(iterations, values, color="#2a9d8f", linewidth=2.2, marker="o", markersize=3)
+    ax.set_title("Objective value by iteration", fontsize=10)
+    ax.set_xlabel("iteration")
+    ax.set_ylabel("f(x_k, y_k)")
+    ax.grid(True, color="#d0d7de", linewidth=0.7, alpha=0.8)
+    ax.margins(x=0.02)
+    fig.tight_layout()
+    fig.savefig(OUTPUT_DIR / "gradient_descent_convergence.png", bbox_inches="tight")
+    plt.close(fig)
+
+
+def main() -> None:
+    OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+    path = run_gradient_descent()
+    save_contour_plot(path)
+    save_convergence_plot(path)
+    print(f"Wrote {OUTPUT_DIR / 'gradient_descent_contour.png'}")
+    print(f"Wrote {OUTPUT_DIR / 'gradient_descent_convergence.png'}")
+
+
+if __name__ == "__main__":
+    main()

package/client/studio-client.js

@@ -8,6 +8,8 @@
       const footerMetaTerminalEl = document.getElementById("footerMetaTerminal");
       const footerMetaContextEl = document.getElementById("footerMetaContext");
       const footerModelMenuEl = document.getElementById("footerModelMenu");
+      const footerThemeBtn = document.getElementById("footerThemeBtn");
+      const footerThemeMenuEl = document.getElementById("footerThemeMenu");
       let faviconLinkEl = document.querySelector('link[rel="icon"], link[rel="shortcut icon"]');
       if (!faviconLinkEl) {
         faviconLinkEl = document.createElement("link");
@@ -178,6 +180,32 @@
         : "full";
       const isEditorOnlyMode = studioMode === "editor-only";
       const isSshStudioSession = Boolean(document.body && document.body.dataset && document.body.dataset.sshSession === "1");
+      const EDITOR_ONLY_RIGHT_VIEW_ALLOWED = new Set(["editor-preview", "files", "changes", "repl"]);
+      const RIGHT_VIEW_LABELS = {
+        markdown: "Response (Raw)",
+        preview: "Response (Preview)",
+        "editor-preview": "Editor (Preview)",
+        trace: "Working",
+        changes: "Changes",
+        files: "Files",
+        repl: "REPL",
+      };
+      const RIGHT_VIEW_NUMERIC_SHORTCUTS = {
+        Digit1: "markdown",
+        Digit2: "preview",
+        Digit3: "editor-preview",
+        Digit4: "trace",
+        Digit5: "changes",
+        Digit6: "files",
+        Digit7: "repl",
+        Numpad1: "markdown",
+        Numpad2: "preview",
+        Numpad3: "editor-preview",
+        Numpad4: "trace",
+        Numpad5: "changes",
+        Numpad6: "files",
+        Numpad7: "repl",
+      };
 
       const initialQueryParams = new URLSearchParams(window.location.search || "");
       const skipInitialWorkspaceRestore = initialQueryParams.get("skipWorkspaceRestore") === "1";
@@ -242,9 +270,9 @@
       let sourceOpenCurrentTextCopyTabBtn = null;
       let sourceSessionSummaryEl = null;
       let initialDocumentApplied = false;
-      function normalizeRightViewValue(nextView) {
+      function canonicalRightViewValue(nextView) {
         const raw = String(nextView || "").trim();
-        const normalized = raw === "preview"
+        return raw === "preview"
           ? "preview"
           : (raw === "editor-preview"
             ? "editor-preview"
@@ -255,22 +283,39 @@
                 : (raw === "changes"
                   ? "changes"
                   : ((raw === "trace" || raw === "thinking") ? "trace" : "markdown")))));
-        if (isEditorOnlyMode && normalized !== "editor-preview" && normalized !== "files" && normalized !== "changes" && normalized !== "repl") {
+      }
+
+      function normalizeRightViewValue(nextView) {
+        const normalized = canonicalRightViewValue(nextView);
+        if (isEditorOnlyMode && !EDITOR_ONLY_RIGHT_VIEW_ALLOWED.has(normalized)) {
           return "editor-preview";
         }
         return normalized;
       }
 
+      function isRightViewAvailableInCurrentMode(view) {
+        const normalized = canonicalRightViewValue(view);
+        return !isEditorOnlyMode || EDITOR_ONLY_RIGHT_VIEW_ALLOWED.has(normalized);
+      }
+
+      function getRightViewDisplayLabel(view) {
+        const normalized = canonicalRightViewValue(view);
+        if (rightViewSelect && rightViewSelect.options) {
+          const option = Array.from(rightViewSelect.options).find((candidate) => candidate && candidate.value === normalized);
+          if (option && option.textContent) return option.textContent;
+        }
+        return RIGHT_VIEW_LABELS[normalized] || normalized;
+      }
+
       function syncRightViewModeOptions() {
         if (!rightViewSelect || !rightViewSelect.options) return;
-        const editorOnlyAllowed = new Set(["editor-preview", "files", "changes", "repl"]);
         Array.from(rightViewSelect.options).forEach((option) => {
           if (!option) return;
-          option.disabled = isEditorOnlyMode && !editorOnlyAllowed.has(option.value);
+          option.disabled = isEditorOnlyMode && !EDITOR_ONLY_RIGHT_VIEW_ALLOWED.has(option.value);
         });
         rightViewSelect.title = isEditorOnlyMode
-          ? "Editor-only views: editor preview, Changes, Files, or REPL. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P or Cmd/Ctrl+Alt+E switches directly to Preview."
-          : "Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Response Preview; Cmd/Ctrl+Alt+E switches directly to Editor Preview; Cmd/Ctrl+Alt+W switches directly to Working.";
+          ? "Editor-only views: Editor Preview, Changes, Files, or REPL. F7 cycles; Cmd/Ctrl+Alt+3/5/6/7 switch directly to available right-pane views."
+          : "Right pane view mode. F7 cycles; Cmd/Ctrl+Alt+1–7 switches directly between all right-pane views. Cmd/Ctrl+Alt+P/E/W keep their mnemonic Preview/Editor Preview/Working shortcuts.";
       }
 
       function getInitialRightView(source) {
@@ -528,6 +573,9 @@
       let piCurrentModel = null;
       let piThinkingLevel = "";
       let footerModelMenuOpen = false;
+      let piThemeOptions = [];
+      let piCurrentTheme = (document.body && document.body.dataset && document.body.dataset.themeName) || "";
+      let footerThemeMenuOpen = false;
       let terminalSessionLabel = (document.body && document.body.dataset && document.body.dataset.terminalLabel) || "unknown";
       let terminalSessionDetail = (document.body && document.body.dataset && document.body.dataset.terminalDetail) || terminalSessionLabel;
       let contextTokens = null;
@@ -3273,6 +3321,7 @@
 
       function setFooterModelMenuOpen(open) {
         footerModelMenuOpen = Boolean(open);
+        if (footerModelMenuOpen) setFooterThemeMenuOpen(false);
         if (footerModelMenuEl) footerModelMenuEl.hidden = !footerModelMenuOpen;
         if (footerMetaModelEl) {
           footerMetaModelEl.classList.toggle("is-open", footerModelMenuOpen);
@@ -3298,6 +3347,80 @@
         if (sent) setStatus("Setting Pi thinking level…", "warning");
       }
 
+      function normalizePiThemeOptions(options) {
+        return Array.isArray(options)
+          ? options.map((option) => ({
+            name: String(option && option.name || "").trim(),
+            path: String(option && option.path || "").trim(),
+          })).filter((option) => option.name)
+          : [];
+      }
+
+      function updatePiThemeState(message) {
+        if (!message || typeof message !== "object") return;
+        if (Array.isArray(message.piThemes)) {
+          piThemeOptions = normalizePiThemeOptions(message.piThemes);
+        }
+        if (message.currentTheme && typeof message.currentTheme === "object") {
+          const name = String(message.currentTheme.name || "").trim();
+          if (name) piCurrentTheme = name;
+        } else if (typeof message.currentTheme === "string" && message.currentTheme.trim()) {
+          piCurrentTheme = message.currentTheme.trim();
+        }
+        updateFooterThemeButton();
+        renderFooterThemeMenu();
+      }
+
+      function updateFooterThemeButton() {
+        if (!footerThemeBtn) return;
+        const label = piCurrentTheme && piCurrentTheme.trim() ? piCurrentTheme.trim() : "theme";
+        footerThemeBtn.textContent = "Theme: " + label;
+        footerThemeBtn.title = "Switch the active Pi theme. Current theme: " + label + ". This affects terminal Pi and Studio.";
+        footerThemeBtn.setAttribute("aria-expanded", footerThemeMenuOpen ? "true" : "false");
+      }
+
+      function renderFooterThemeMenu() {
+        if (!footerThemeMenuEl) return;
+        const current = piCurrentTheme && piCurrentTheme.trim() ? piCurrentTheme.trim() : "";
+        const optionNames = new Set(piThemeOptions.map((option) => option.name));
+        const options = piThemeOptions.slice();
+        if (current && !optionNames.has(current)) {
+          options.unshift({ name: current, path: "" });
+        }
+        const optionsHtml = options.map((option) => {
+          const selected = option.name === current ? " selected" : "";
+          const title = option.path ? " title='" + escapeHtml(option.path) + "'" : "";
+          return "<option value='" + escapeHtml(option.name) + "'" + selected + title + ">" + escapeHtml(option.name) + "</option>";
+        });
+        footerThemeMenuEl.innerHTML = ""
+          + "<div class='footer-model-menu-heading'>Pi theme</div>"
+          + (optionsHtml.length
+            ? "<label class='footer-model-menu-field'><span>Active theme</span><select id='footerPiThemeSelect'>" + optionsHtml.join("") + "</select></label>"
+            : "<div class='footer-model-menu-note'>No Pi themes are available yet.</div>")
+          + "<div class='footer-model-menu-note'>Switches the active Pi theme and persists it to Pi settings.</div>";
+      }
+
+      function setFooterThemeMenuOpen(open) {
+        footerThemeMenuOpen = Boolean(open);
+        if (footerThemeMenuOpen) setFooterModelMenuOpen(false);
+        if (footerThemeMenuEl) footerThemeMenuEl.hidden = !footerThemeMenuOpen;
+        if (footerThemeBtn) {
+          footerThemeBtn.classList.toggle("is-open", footerThemeMenuOpen);
+          footerThemeBtn.setAttribute("aria-expanded", footerThemeMenuOpen ? "true" : "false");
+        }
+        if (footerThemeMenuOpen) renderFooterThemeMenu();
+      }
+
+      function requestPiThemeSelection(themeName) {
+        const normalized = String(themeName || "").trim();
+        if (!normalized) {
+          setStatus("No Pi theme selected.", "warning");
+          return;
+        }
+        const sent = sendMessage({ type: "pi_theme_select_request", theme: normalized });
+        if (sent) setStatus("Switching Pi theme…", "warning");
+      }
+
       function updateFooterMeta() {
         const modelText = modelLabel && modelLabel.trim() ? modelLabel.trim() : "none";
         const terminalText = terminalSessionLabel && terminalSessionLabel.trim() ? terminalSessionLabel.trim() : "unknown";
@@ -3795,33 +3918,33 @@
         setStatus("Right pane content focused.");
       }
 
-      function switchRightPaneToPrimaryPreview() {
-        const targetView = isEditorOnlyMode ? "editor-preview" : "preview";
+      function switchRightPaneToView(nextView, options) {
+        const requestedView = canonicalRightViewValue(nextView);
+        const label = getRightViewDisplayLabel(requestedView);
+        if (!isRightViewAvailableInCurrentMode(requestedView)) {
+          setStatus(label + " is unavailable in editor-only Studio views.", "warning");
+          return false;
+        }
         const snapshot = snapshotStudioScrollablePositions();
-        setRightView(targetView);
+        setRightView(requestedView);
         scheduleStudioScrollablePositionRestore(snapshot);
-        const label = rightViewSelect && rightViewSelect.selectedOptions && rightViewSelect.selectedOptions[0]
-          ? rightViewSelect.selectedOptions[0].textContent
-          : (isEditorOnlyMode ? "Editor (Preview)" : "Response (Preview)");
-        setStatus("Right pane view: " + String(label || "Preview") + ".");
+        if (!options || options.announce !== false) {
+          setStatus("Right pane view: " + label + ".");
+        }
+        return true;
+      }
+
+      function switchRightPaneToPrimaryPreview() {
+        const targetView = isEditorOnlyMode ? "editor-preview" : "preview";
+        switchRightPaneToView(targetView);
       }
 
       function switchRightPaneToWorking() {
-        if (isEditorOnlyMode) {
-          setStatus("Working view is unavailable in editor-only Studio views.", "warning");
-          return;
-        }
-        const snapshot = snapshotStudioScrollablePositions();
-        setRightView("trace");
-        scheduleStudioScrollablePositionRestore(snapshot);
-        setStatus("Right pane view: Working.");
+        switchRightPaneToView("trace");
       }
 
       function switchRightPaneToEditorPreview() {
-        const snapshot = snapshotStudioScrollablePositions();
-        setRightView("editor-preview");
-        scheduleStudioScrollablePositionRestore(snapshot);
-        setStatus("Right pane view: Editor (Preview).");
+        switchRightPaneToView("editor-preview");
       }
 
       function cycleActivePaneView(direction) {
@@ -4122,6 +4245,17 @@
           return;
         }
 
+        const numericRightViewShortcut = (event.metaKey || event.ctrlKey)
+          && event.altKey
+          && !event.shiftKey
+          ? (RIGHT_VIEW_NUMERIC_SHORTCUTS[code] || RIGHT_VIEW_NUMERIC_SHORTCUTS["Digit" + key])
+          : null;
+        if (numericRightViewShortcut) {
+          event.preventDefault();
+          switchRightPaneToView(numericRightViewShortcut);
+          return;
+        }
+
         const isPreviewShortcut = (key.toLowerCase() === "p" || code === "KeyP")
           && (event.metaKey || event.ctrlKey)
           && event.altKey
@@ -18827,6 +18961,7 @@
             updateCompletionSuggestionModelOptions(message.suggestionModels);
           }
           updatePiSessionModelState(message);
+          updatePiThemeState(message);
           if (typeof message.terminalSessionLabel === "string") {
             terminalSessionLabel = message.terminalSessionLabel;
           }
@@ -19403,6 +19538,7 @@
             updateCompletionSuggestionModelOptions(message.suggestionModels);
           }
           updatePiSessionModelState(message);
+          updatePiThemeState(message);
           if (typeof message.terminalSessionLabel === "string") {
             terminalSessionLabel = message.terminalSessionLabel;
           }
@@ -19536,6 +19672,7 @@
               root.style.setProperty(key, message.vars[key]);
             }
           });
+          updatePiThemeState(message);
           updateDocumentTitle();
         }
       }
@@ -20283,6 +20420,7 @@
           closeExportPreviewMenu();
           closePreviewLinkMenu();
           setFooterModelMenuOpen(false);
+          setFooterThemeMenuOpen(false);
         }
       });
 
@@ -20309,11 +20447,36 @@
           }
         });
       }
+      if (footerThemeBtn) {
+        footerThemeBtn.addEventListener("click", (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          setFooterThemeMenuOpen(!footerThemeMenuOpen);
+        });
+      }
+      if (footerThemeMenuEl) {
+        footerThemeMenuEl.addEventListener("click", (event) => {
+          event.stopPropagation();
+        });
+        footerThemeMenuEl.addEventListener("change", (event) => {
+          const target = event.target;
+          if (!(target instanceof HTMLSelectElement)) return;
+          if (target.id === "footerPiThemeSelect") {
+            requestPiThemeSelection(target.value);
+            setFooterThemeMenuOpen(false);
+          }
+        });
+      }
       document.addEventListener("click", (event) => {
         const target = event.target;
         if (target instanceof Element && (target.closest("#footerModelMenu") || target.closest("#footerMetaModel"))) return;
         setFooterModelMenuOpen(false);
       });
+      document.addEventListener("click", (event) => {
+        const target = event.target;
+        if (target instanceof Element && (target.closest("#footerThemeMenu") || target.closest("#footerThemeBtn"))) return;
+        setFooterThemeMenuOpen(false);
+      });
 
       saveAsBtn.addEventListener("click", () => {
         const content = sourceTextEl.value;

package/client/studio.css

@@ -4277,11 +4277,10 @@
       outline: none;
     }
 
-    .footer-model-menu {
+    .footer-model-menu,
+    .footer-theme-menu {
       position: fixed;
-      left: 12px;
       bottom: 38px;
-      width: min(440px, calc(100vw - 24px));
       padding: 10px;
       border: 1px solid var(--panel-border);
       border-radius: 12px;
@@ -4291,7 +4290,18 @@
       z-index: 110;
     }
 
-    .footer-model-menu[hidden] {
+    .footer-model-menu {
+      left: 12px;
+      width: min(440px, calc(100vw - 24px));
+    }
+
+    .footer-theme-menu {
+      right: 12px;
+      width: min(320px, calc(100vw - 24px));
+    }
+
+    .footer-model-menu[hidden],
+    .footer-theme-menu[hidden] {
       display: none !important;
     }
 
@@ -4348,10 +4358,18 @@
       opacity: 0.72;
     }
 
-    .shortcut-hint {
+    .footer-actions {
       grid-area: hint;
       justify-self: end;
       align-self: center;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .shortcut-hint {
       display: inline-flex;
       align-items: center;
       gap: 6px;
@@ -4366,12 +4384,21 @@
       opacity: 0.9;
     }
 
+    .footer-theme-btn {
+      max-width: min(28ch, 36vw);
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     .shortcut-hint:not(:disabled):hover,
-    .shortcut-hint:focus-visible {
+    .shortcut-hint:focus-visible,
+    .shortcut-hint.is-open {
       background: var(--panel-2);
       border-color: var(--control-border);
       color: var(--text);
       opacity: 1;
+      outline: none;
     }
 
     .footer-compact-btn {
@@ -4398,7 +4425,7 @@
     }
 
     body.studio-zen-mode .footer-meta,
-    body.studio-zen-mode .shortcut-hint {
+    body.studio-zen-mode .footer-actions {
       display: none !important;
     }
 
@@ -4993,8 +5020,12 @@
         max-width: 100%;
       }
 
-      .shortcut-hint {
+      .footer-actions {
         justify-self: start;
+        flex-wrap: wrap;
+      }
+
+      .shortcut-hint {
         text-align: left;
         white-space: normal;
         flex-wrap: wrap;

package/index.ts

@@ -361,6 +361,11 @@ interface PiThinkingLevelRequestMessage {
 	level: ModelThinkingLevel;
 }
 
+interface PiThemeSelectRequestMessage {
+	type: "pi_theme_select_request";
+	theme: string;
+}
+
 interface QuizGenerateRequestMessage {
 	type: "quiz_generate_request";
 	requestId: string;
@@ -506,6 +511,7 @@ type IncomingStudioMessage =
 	| CompletionSuggestionCancelRequestMessage
 	| PiModelSelectRequestMessage
 	| PiThinkingLevelRequestMessage
+	| PiThemeSelectRequestMessage
 	| QuizGenerateRequestMessage
 	| QuizAnswerRequestMessage
 	| QuizDiscussRequestMessage
@@ -8425,6 +8431,16 @@ function parseIncomingMessage(data: RawData): IncomingStudioMessage | null {
 		}
 	}
 
+	if (msg.type === "pi_theme_select_request" && typeof msg.theme === "string") {
+		const theme = msg.theme.trim();
+		if (theme && theme.length <= 200) {
+			return {
+				type: "pi_theme_select_request",
+				theme,
+			};
+		}
+	}
+
 	if (msg.type === "completion_suggestion_request" && typeof msg.requestId === "string" && typeof msg.text === "string") {
 		const textLength = msg.text.length;
 		const rawStart = typeof msg.selectionStart === "number" && Number.isFinite(msg.selectionStart) ? msg.selectionStart : textLength;
@@ -10277,6 +10293,7 @@ function buildStudioHtml(
 	const initialModel = escapeHtmlForInline(initialModelLabel ?? "none");
 	const initialTerminal = escapeHtmlForInline(initialTerminalLabel ?? "unknown");
 	const initialTerminalDetailAttr = escapeHtmlForInline(initialTerminalDetail ?? initialTerminalLabel ?? "unknown");
+	const initialTheme = escapeHtmlForInline(theme?.name ?? "theme");
 	const initialContextTokens =
 		typeof initialContextUsage?.tokens === "number" && Number.isFinite(initialContextUsage.tokens)
 			? String(initialContextUsage.tokens)
@@ -10344,7 +10361,7 @@ ${cssVarsBlock}
   </style>
   <link rel="stylesheet" href="${stylesheetHref}" />
 </head>
-<body data-initial-source="${initialSource}" data-initial-label="${initialLabel}" data-initial-path="${initialPath}" data-initial-draft-id="${initialDraftId}" data-initial-resource-dir="${initialResourceDir}" data-model-label="${initialModel}" data-terminal-label="${initialTerminal}" data-terminal-detail="${initialTerminalDetailAttr}" data-context-tokens="${initialContextTokens}" data-context-window="${initialContextWindow}" data-context-percent="${initialContextPercent}" data-studio-mode="${studioMode}" data-ssh-session="${initialSshSession}">
+<body data-initial-source="${initialSource}" data-initial-label="${initialLabel}" data-initial-path="${initialPath}" data-initial-draft-id="${initialDraftId}" data-initial-resource-dir="${initialResourceDir}" data-model-label="${initialModel}" data-terminal-label="${initialTerminal}" data-terminal-detail="${initialTerminalDetailAttr}" data-theme-name="${initialTheme}" data-context-tokens="${initialContextTokens}" data-context-window="${initialContextWindow}" data-context-percent="${initialContextPercent}" data-studio-mode="${studioMode}" data-ssh-session="${initialSshSession}">
   <header>
     <h1><span class="app-logo" aria-hidden="true">π</span> Studio <span class="app-subtitle">${appSubtitle}</span></h1>
     <div class="controls">
@@ -10561,7 +10578,7 @@ ${cssVarsBlock}
     <section id="rightPane">
       <div id="rightSectionHeader" class="section-header">
         <div class="section-header-main">
-          <select id="rightViewSelect" aria-label="Response view mode" title="Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to Response Preview; Cmd/Ctrl+Alt+E switches directly to Editor Preview; Cmd/Ctrl+Alt+W switches directly to Working.">
+          <select id="rightViewSelect" aria-label="Response view mode" title="Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+1–7 switches directly between all right-pane views. Cmd/Ctrl+Alt+P/E/W keep their mnemonic Preview/Editor Preview/Working shortcuts.">
             <option value="markdown">Response (Raw)</option>
             <option value="preview" selected>Response (Preview)</option>
             <option value="editor-preview">Editor (Preview)</option>
@@ -10637,7 +10654,11 @@ ${cssVarsBlock}
     <span id="statusLine"><span id="statusSpinner" aria-hidden="true"> </span><span id="status">Booting studio…</span></span>
     <span id="footerMeta" class="footer-meta"><span id="footerMetaText" class="footer-meta-text"><button id="footerMetaModel" class="footer-meta-part footer-meta-model footer-model-btn" type="button" aria-haspopup="menu" aria-expanded="false">${initialModel}</button><span class="footer-meta-sep">·</span><span id="footerMetaTerminal" class="footer-meta-part footer-meta-terminal">${initialTerminal}</span><span class="footer-meta-sep">·</span><span id="footerMetaContext" class="footer-meta-part footer-meta-context">unknown</span></span><button id="compactBtn" class="footer-compact-btn" type="button" title="Trigger pi context compaction now.">Compact</button></span>
     <div id="footerModelMenu" class="footer-model-menu" hidden></div>
-    <button id="shortcutsBtn" class="shortcut-hint" type="button" title="Show Studio keyboard shortcuts. Press ? when not editing text.">Shortcuts (?)</button>
+    <div id="footerThemeMenu" class="footer-theme-menu" hidden></div>
+    <span class="footer-actions">
+      <button id="footerThemeBtn" class="shortcut-hint footer-theme-btn" type="button" aria-haspopup="menu" aria-expanded="false" title="Switch the active Pi theme. This affects terminal Pi and Studio.">Theme: ${initialTheme}</button>
+      <button id="shortcutsBtn" class="shortcut-hint" type="button" title="Show Studio keyboard shortcuts. Press ? when not editing text.">Shortcuts (?)</button>
+    </span>
   </footer>
 
   <div id="shortcutsOverlay" class="shortcuts-overlay" hidden>
@@ -10655,7 +10676,8 @@ ${cssVarsBlock}
           <dl>
             <div><dt>F6</dt><dd>Switch between editor and right pane</dd></div>
             <div><dt>F7 / Shift+F7</dt><dd>Cycle the active pane's view</dd></div>
-            <div><dt>Cmd/Ctrl+Alt+P</dt><dd>Switch the right pane directly to Response Preview</dd></div>
+            <div><dt>Cmd/Ctrl+Alt+1–7</dt><dd>Switch the right pane directly: Response Raw, Response Preview, Editor Preview, Working, Changes, Files, REPL</dd></div>
+            <div><dt>Cmd/Ctrl+Alt+P</dt><dd>Switch the right pane directly to Response Preview; in editor-only views, Editor Preview</dd></div>
             <div><dt>Cmd/Ctrl+Alt+E</dt><dd>Switch the right pane directly to Editor Preview</dd></div>
             <div><dt>Cmd/Ctrl+Alt+W</dt><dd>Switch the right pane directly to Working</dd></div>
             <div><dt>F8</dt><dd>Focus editor text</dd></div>
@@ -11770,6 +11792,25 @@ export default function (pi: ExtensionAPI) {
 		}
 		: null;
 
+	const getStudioThemeOptions = () => {
+		try {
+			const themes = lastCommandCtx?.ui?.getAllThemes?.() ?? [];
+			return themes
+				.map((theme) => ({
+					name: typeof theme.name === "string" ? theme.name.trim() : "",
+					path: typeof theme.path === "string" ? theme.path : undefined,
+				}))
+				.filter((theme) => theme.name);
+		} catch {
+			return [];
+		}
+	};
+
+	const getCurrentStudioThemeDescriptor = () => {
+		const name = typeof lastCommandCtx?.ui?.theme?.name === "string" ? lastCommandCtx.ui.theme.name.trim() : "";
+		return name ? { name } : null;
+	};
+
 	const broadcastState = () => {
 		terminalSessionLabel = buildTerminalSessionLabel(studioCwd, getSessionNameSafe());
 		terminalSessionDetail = buildTerminalSessionDetail(studioCwd, getSessionNameSafe());
@@ -11788,6 +11829,8 @@ export default function (pi: ExtensionAPI) {
 			thinkingLevel: getThinkingLevelSafe() ?? "off",
 			piModels: modelOptions,
 			suggestionModels: modelOptions,
+			currentTheme: getCurrentStudioThemeDescriptor(),
+			piThemes: getStudioThemeOptions(),
 			terminalSessionLabel,
 			terminalSessionDetail,
 			contextTokens: contextUsageSnapshot.tokens,
@@ -12087,6 +12130,8 @@ export default function (pi: ExtensionAPI) {
 				thinkingLevel: getThinkingLevelSafe() ?? "off",
 				piModels: getStudioModelOptions(),
 				suggestionModels: getStudioModelOptions(),
+				currentTheme: getCurrentStudioThemeDescriptor(),
+				piThemes: getStudioThemeOptions(),
 				terminalSessionLabel,
 				terminalSessionDetail,
 				contextTokens: contextUsageSnapshot.tokens,
@@ -12146,6 +12191,36 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
+		if (msg.type === "pi_theme_select_request") {
+			const ui = lastCommandCtx?.ui;
+			if (!ui || typeof ui.setTheme !== "function") {
+				sendToClient(client, { type: "info", level: "warning", message: "Pi theme controls are not available yet." });
+				return;
+			}
+			const themeName = msg.theme.trim();
+			const availableThemes = getStudioThemeOptions();
+			if (availableThemes.length && !availableThemes.some((theme) => theme.name === themeName)) {
+				sendToClient(client, { type: "info", level: "warning", message: `Pi theme not found: ${themeName}` });
+				return;
+			}
+			try {
+				const result = ui.setTheme(themeName);
+				if (!result.success) {
+					sendToClient(client, { type: "info", level: "error", message: `Theme switch failed: ${result.error ?? themeName}` });
+					return;
+				}
+				const vars = buildThemeCssVars(getStudioThemeStyle(ui.theme));
+				lastThemeVarsJson = JSON.stringify(vars);
+				syncCmuxStudioStatus();
+				broadcast({ type: "theme_update", vars, currentTheme: getCurrentStudioThemeDescriptor(), piThemes: getStudioThemeOptions() });
+				broadcastState();
+				sendToClient(client, { type: "info", level: "info", message: `Pi theme switched to ${themeName}.` });
+			} catch (error) {
+				sendToClient(client, { type: "info", level: "error", message: `Theme switch failed: ${error instanceof Error ? error.message : String(error)}` });
+			}
+			return;
+		}
+
 		if (msg.type === "get_latest_response") {
 			if (!lastStudioResponse) {
 				sendToClient(client, { type: "info", message: "No latest assistant response is available yet." });
@@ -14335,7 +14410,7 @@ export default function (pi: ExtensionAPI) {
 					lastThemeVarsJson = json;
 					syncCmuxStudioStatus();
 					for (const client of serverState.clients) {
-						sendToClient(client, { type: "theme_update", vars });
+						sendToClient(client, { type: "theme_update", vars, currentTheme: getCurrentStudioThemeDescriptor(), piThemes: getStudioThemeOptions() });
 					}
 				}
 			} catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.33",
+  "version": "0.9.34",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, active quiz, prompt/response history, live previews, and tmux-backed REPL/literate REPL workflows",
   "type": "module",
   "license": "MIT",
@@ -25,7 +25,8 @@
     "README.md",
     "CHANGELOG.md",
     "WORKFLOW.md",
-    "assets/screenshots"
+    "assets/screenshots",
+    "assets/demo"
   ],
   "scripts": {
     "test": "node --test",