pi-studio 0.9.32 → 0.9.34

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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
+- Added `Cmd/Ctrl+Alt+E` to switch the right pane directly to Editor Preview.
+
+### Changed
+- Calmed annotation and comment affordance styling so annotations read more like highlighted feedback and less like heavy badges.
+- Slightly muted active Stop button styling while keeping it in the theme error colour family.
+- Derived PDF annotation colours from the active theme accent hue while keeping a light, print-friendly background.
+
+### Fixed
+- Preserved the Working view scroll position when switching between `All`, `Thinking`, and `Tools` filters unless the view was already pinned to the bottom.
+- Rendered standalone long `[an: ...]` annotations correctly in LaTeX-mode PDF exports even when Pandoc wraps the escaped marker across generated LaTeX lines.
+
 ## [0.9.32] — 2026-06-10
 
 ### 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+W` switches the right pane directly to 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 switches directly to Preview."
-          : "Right pane view mode. F7 cycles when the right pane is active; Cmd/Ctrl+Alt+P switches directly to 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;
@@ -859,7 +907,7 @@
         const normalized = normalizeTraceFilter(nextFilter);
         if (traceFilter === normalized) return;
         traceFilter = normalized;
-        traceAutoScroll = true;
+        traceAutoScroll = rightView === "trace" ? shouldStickTraceToBottom() : traceAutoScroll;
         renderTraceViewIfActive();
       }
 
@@ -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,26 +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() {
+        switchRightPaneToView("editor-preview");
       }
 
       function cycleActivePaneView(direction) {
@@ -4115,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
@@ -4135,6 +4276,16 @@
           return;
         }
 
+        const isEditorPreviewShortcut = (key.toLowerCase() === "e" || code === "KeyE")
+          && (event.metaKey || event.ctrlKey)
+          && event.altKey
+          && !event.shiftKey;
+        if (isEditorPreviewShortcut) {
+          event.preventDefault();
+          switchRightPaneToEditorPreview();
+          return;
+        }
+
         const isContentFocusShortcut = key === "F8" && !event.metaKey && !event.ctrlKey && !event.altKey;
         if (isContentFocusShortcut) {
           event.preventDefault();
@@ -18810,6 +18961,7 @@
             updateCompletionSuggestionModelOptions(message.suggestionModels);
           }
           updatePiSessionModelState(message);
+          updatePiThemeState(message);
           if (typeof message.terminalSessionLabel === "string") {
             terminalSessionLabel = message.terminalSessionLabel;
           }
@@ -19386,6 +19538,7 @@
             updateCompletionSuggestionModelOptions(message.suggestionModels);
           }
           updatePiSessionModelState(message);
+          updatePiThemeState(message);
           if (typeof message.terminalSessionLabel === "string") {
             terminalSessionLabel = message.terminalSessionLabel;
           }
@@ -19519,6 +19672,7 @@
               root.style.setProperty(key, message.vars[key]);
             }
           });
+          updatePiThemeState(message);
           updateDocumentTitle();
         }
       }
@@ -20266,6 +20420,7 @@
           closeExportPreviewMenu();
           closePreviewLinkMenu();
           setFooterModelMenuOpen(false);
+          setFooterThemeMenuOpen(false);
         }
       });
 
@@ -20292,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

@@ -210,15 +210,17 @@
 
     #sendRunBtn.request-stop-active,
     #critiqueBtn.request-stop-active {
-      background: var(--error);
-      border-color: var(--error);
+      background: color-mix(in srgb, var(--error) 82%, var(--panel));
+      border-color: color-mix(in srgb, var(--error) 88%, var(--panel));
       color: var(--error-contrast);
-      font-weight: 600;
+      font-weight: 700;
     }
 
     #sendRunBtn.request-stop-active:not(:disabled):hover,
     #critiqueBtn.request-stop-active:not(:disabled):hover {
-      filter: brightness(0.95);
+      background: var(--error);
+      border-color: var(--error);
+      filter: none;
     }
 
     .file-label {
@@ -930,17 +932,17 @@
       padding: 0 10px;
       font-size: 12px;
       line-height: 1;
-      background: var(--accent-soft);
-      border-color: var(--accent);
-      color: var(--accent);
+      background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft));
+      border-color: var(--control-border);
+      color: var(--text);
       box-shadow: 0 1px 2px var(--shadow-color);
     }
 
     .editor-selection-action-btn:hover,
     .editor-selection-action-btn:focus-visible {
-      background: var(--accent-soft-strong);
+      background: var(--accent-soft);
       color: var(--accent);
-      border-color: var(--accent);
+      border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border));
     }
 
     .editor-selection-actions[hidden],
@@ -1043,12 +1045,12 @@
     }
 
     .hl-annotation {
-      color: var(--accent);
-      background: var(--accent-soft);
+      color: color-mix(in srgb, var(--accent) 72%, var(--text));
+      background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
       border: 0;
-      border-radius: 4px;
+      border-radius: 3px;
       padding: 0;
-      box-shadow: inset 0 0 0 1px var(--marker-border);
+      box-shadow: inset 0 -0.08em 0 color-mix(in srgb, var(--accent) 26%, transparent);
     }
 
     .hl-annotation-muted {
@@ -1057,10 +1059,10 @@
     }
 
     .annotation-preview-marker {
-      color: var(--accent);
-      background: var(--accent-soft);
-      border: 1px solid var(--marker-border);
-      border-radius: 4px;
+      color: color-mix(in srgb, var(--accent) 72%, var(--text));
+      background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
+      border: 1px solid color-mix(in srgb, var(--marker-border) 26%, transparent);
+      border-radius: 3px;
       display: inline-block;
       max-width: 100%;
       padding: 0 4px;
@@ -1068,6 +1070,20 @@
       vertical-align: baseline;
     }
 
+    .annotation-preview-marker strong {
+      color: color-mix(in srgb, var(--accent) 82%, var(--text));
+      font-weight: 750;
+    }
+
+    .annotation-preview-marker em {
+      color: color-mix(in srgb, currentColor 82%, var(--muted));
+    }
+
+    .annotation-preview-marker s {
+      color: color-mix(in srgb, currentColor 70%, var(--muted));
+      text-decoration-thickness: 0.08em;
+    }
+
     .annotation-preview-marker code {
       font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
       font-size: 0.95em;
@@ -1216,9 +1232,9 @@
       padding: 0 10px;
       font-size: 12px;
       line-height: 1;
-      background: var(--accent-soft);
-      border-color: var(--accent);
-      color: var(--accent);
+      background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft));
+      border-color: var(--control-border);
+      color: var(--text);
       box-shadow: 0 1px 2px var(--shadow-color);
       pointer-events: auto;
     }
@@ -1227,9 +1243,9 @@
     .preview-comment-add:focus-visible,
     .preview-comment-jump:hover,
     .preview-comment-jump:focus-visible {
-      background: var(--accent-soft-strong);
+      background: var(--accent-soft);
       color: var(--accent);
-      border-color: var(--accent);
+      border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border));
     }
 
     .preview-jump-highlight {
@@ -4261,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;
@@ -4275,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;
     }
 
@@ -4332,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;
@@ -4350,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 {
@@ -4382,7 +4425,7 @@
     }
 
     body.studio-zen-mode .footer-meta,
-    body.studio-zen-mode .shortcut-hint {
+    body.studio-zen-mode .footer-actions {
       display: none !important;
     }
 
@@ -4977,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;
@@ -5779,10 +5826,10 @@
     }
 
     body.studio-ui-refresh .studio-refresh-review-btn.request-stop-active {
-      background: var(--error);
-      border-color: var(--error);
+      background: color-mix(in srgb, var(--error) 82%, var(--panel));
+      border-color: color-mix(in srgb, var(--error) 88%, var(--panel));
       color: var(--error-contrast);
-      font-weight: 600;
+      font-weight: 700;
     }
 
     body.studio-ui-refresh .studio-refresh-review-btn.request-stop-active::after {
@@ -5790,10 +5837,10 @@
     }
 
     body.studio-ui-refresh .studio-refresh-menu #critiqueBtn.request-stop-active {
-      background: var(--error);
-      border-color: var(--error);
+      background: color-mix(in srgb, var(--error) 82%, var(--panel));
+      border-color: color-mix(in srgb, var(--error) 88%, var(--panel));
       color: var(--error-contrast);
-      font-weight: 600;
+      font-weight: 700;
     }
 
     .studio-preview-link-menu {

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
@@ -1066,7 +1072,23 @@ function buildStudioPdfCalloutTitleSizeCommand(options?: StudioPdfRenderOptions)
 	return "\\footnotesize";
 }
 
-function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble = ""): string {
+function formatStudioPdfHtmlColor(color: string, fallback: string): string {
+	return hexToRgb(color) ? color.replace(/^#/, "").toUpperCase() : fallback;
+}
+
+function buildStudioPdfAnnotationColors(style: StudioThemeStyle): { bg: string; border: string; text: string } {
+	const accent = hexToRgb(style.palette.accent) ? style.palette.accent : "#2F6FEB";
+	const page = "#FFFFFF";
+	const darkText = "#0E1616";
+	return {
+		bg: formatStudioPdfHtmlColor(blendColors(accent, page, 0.91), "F1F7FF"),
+		border: formatStudioPdfHtmlColor(blendColors(accent, page, 0.68), "C7DDFF"),
+		text: formatStudioPdfHtmlColor(blendColors(accent, darkText, style.mode === "light" ? 0.40 : 0.34), "1F5FBF"),
+	};
+}
+
+function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble = "", themeStyle?: StudioThemeStyle): string {
+	const annotationColors = buildStudioPdfAnnotationColors(themeStyle ?? getStudioThemeStyle());
 	const sectionHeadingSize = buildStudioPdfHeadingSizeCommand(options?.sectionSize, "\\Large");
 	const subsectionHeadingSize = buildStudioPdfHeadingSizeCommand(options?.subsectionSize, "\\large");
 	const subsubsectionHeadingSize = buildStudioPdfHeadingSizeCommand(options?.subsubsectionSize, "\\normalsize");
@@ -1088,9 +1110,9 @@ function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble
 \\usepackage{xcolor}
 \\usepackage{varwidth}
 \\usepackage[normalem]{ulem}
-\\definecolor{StudioAnnotationBg}{HTML}{EAF3FF}
-\\definecolor{StudioAnnotationBorder}{HTML}{8CB8FF}
-\\definecolor{StudioAnnotationText}{HTML}{1F5FBF}
+\\definecolor{StudioAnnotationBg}{HTML}{${annotationColors.bg}}
+\\definecolor{StudioAnnotationBorder}{HTML}{${annotationColors.border}}
+\\definecolor{StudioAnnotationText}{HTML}{${annotationColors.text}}
 \\definecolor{StudioCodeBlockBg}{HTML}{F6F8FA}
 \\definecolor{StudioDiffAddText}{HTML}{1A7F37}
 \\definecolor{StudioDiffDelText}{HTML}{CF222E}
@@ -6501,9 +6523,20 @@ ${literalPdfConfig.fontSizeCommand}\\section*{${title.replace(/[{}\\]/g, "").tri
 function replaceStudioAnnotationMarkersInGeneratedLatex(latex: string): string {
 	const lines = String(latex ?? "").split("\n");
 	const out: string[] = [];
+	const pendingTextLines: string[] = [];
 	const rawEnvStack: string[] = [];
 	const rawEnvNames = new Set(["verbatim", "Verbatim", "Highlighting", "lstlisting"]);
 
+	const hasRawEnvBoundary = (line: string): boolean => {
+		const envPattern = /\\(begin|end)\{([^}]+)\}/g;
+		let match: RegExpExecArray | null;
+		while ((match = envPattern.exec(line)) !== null) {
+			const envName = match[2];
+			if (envName && rawEnvNames.has(envName)) return true;
+		}
+		return false;
+	};
+
 	const updateRawEnvStack = (line: string) => {
 		const envPattern = /\\(begin|end)\{([^}]+)\}/g;
 		let match: RegExpExecArray | null;
@@ -6524,6 +6557,12 @@ function replaceStudioAnnotationMarkersInGeneratedLatex(latex: string): string {
 		}
 	};
 
+	const flushPendingText = () => {
+		if (pendingTextLines.length === 0) return;
+		out.push(replaceStudioAnnotationMarkersForPdfInSegment(pendingTextLines.join("\n")));
+		pendingTextLines.length = 0;
+	};
+
 	for (const line of lines) {
 		if (rawEnvStack.length > 0) {
 			out.push(line);
@@ -6531,10 +6570,17 @@ function replaceStudioAnnotationMarkersInGeneratedLatex(latex: string): string {
 			continue;
 		}
 
-		out.push(replaceStudioAnnotationMarkersForPdfInSegment(line));
-		updateRawEnvStack(line);
+		if (hasRawEnvBoundary(line)) {
+			flushPendingText();
+			out.push(line);
+			updateRawEnvStack(line);
+			continue;
+		}
+
+		pendingTextLines.push(line);
 	}
 
+	flushPendingText();
 	return out.join("\n");
 }
 
@@ -6727,6 +6773,7 @@ async function renderStudioPdfFromGeneratedLatex(
 	alignedImageBlocks: StudioPdfAlignedImageBlock[] = [],
 	pdfOptions?: StudioPdfRenderOptions,
 	extraPreamble = "",
+	themeStyle?: StudioThemeStyle,
 ): Promise<{ pdf: Buffer; warning?: string }> {
 	const tempDir = join(tmpdir(), `pi-studio-pdf-${Date.now()}-${randomUUID()}`);
 	const preamblePath = join(tempDir, "_pdf_preamble.tex");
@@ -6734,7 +6781,7 @@ async function renderStudioPdfFromGeneratedLatex(
 	const outputPath = join(tempDir, "studio-export.pdf");
 
 	await mkdir(tempDir, { recursive: true });
-	await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, extraPreamble), "utf-8");
+	await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, extraPreamble, themeStyle), "utf-8");
 
 	const pandocArgs = [
 		"-f", inputFormat,
@@ -6805,6 +6852,7 @@ async function renderStudioPdfWithPandoc(
 	editorPdfLanguage?: string,
 	sourcePath?: string,
 	pdfOptions?: StudioPdfRenderOptions,
+	themeStyle?: StudioThemeStyle,
 ): Promise<{ pdf: Buffer; warning?: string }> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
 	const pdfEngine = process.env.PANDOC_PDF_ENGINE?.trim() || "xelatex";
@@ -6842,7 +6890,7 @@ async function renderStudioPdfWithPandoc(
 		const outputPath = join(tempDir, "studio-export.pdf");
 
 		await mkdir(tempDir, { recursive: true });
-		await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions), "utf-8");
+		await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, "", themeStyle), "utf-8");
 
 		const hasYamlHeaderIncludesForPdf = inputFormat !== "latex" && hasStudioYamlHeaderIncludes(markdownForPdf);
 		const headerIncludeArgs = hasYamlHeaderIncludesForPdf ? [] : ["--include-in-header", preamblePath];
@@ -6895,6 +6943,8 @@ async function renderStudioPdfWithPandoc(
 			[],
 			[],
 			pdfOptions,
+			"",
+			themeStyle,
 		);
 	}
 
@@ -6915,6 +6965,8 @@ async function renderStudioPdfWithPandoc(
 				[],
 				[],
 				pdfOptions,
+				"",
+				themeStyle,
 			);
 		} catch {
 			const fenced = parseStudioSingleFencedCodeBlock(diffMarkdown);
@@ -6941,7 +6993,7 @@ async function renderStudioPdfWithPandoc(
 	const outputPath = join(tempDir, "studio-export.pdf");
 
 	await mkdir(tempDir, { recursive: true });
-	await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, extraPdfPreamble), "utf-8");
+	await writeFile(preamblePath, buildStudioPdfPreamble(pdfOptions, extraPdfPreamble, themeStyle), "utf-8");
 
 	const mermaidPrepared: StudioMermaidPdfPreprocessResult = isLatex
 		? { markdown: normalizedMarkdownBody, found: 0, replaced: 0, failed: 0, missingCli: false }
@@ -6964,6 +7016,7 @@ async function renderStudioPdfWithPandoc(
 			pdfAlignedImageTransform.blocks,
 			pdfOptions,
 			extraPdfPreamble,
+			themeStyle,
 		);
 		await rm(tempDir, { recursive: true, force: true }).catch(() => undefined);
 		return { pdf: rendered.pdf, warning: mermaidPrepared.warning ?? rendered.warning };
@@ -8378,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;
@@ -10230,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)
@@ -10297,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">
@@ -10514,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 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>
@@ -10590,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>
@@ -10608,7 +10676,9 @@ ${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 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>
             <div><dt>Shift+F8</dt><dd>Focus right-pane content</dd></div>
@@ -11722,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());
@@ -11740,6 +11829,8 @@ export default function (pi: ExtensionAPI) {
 			thinkingLevel: getThinkingLevelSafe() ?? "off",
 			piModels: modelOptions,
 			suggestionModels: modelOptions,
+			currentTheme: getCurrentStudioThemeDescriptor(),
+			piThemes: getStudioThemeOptions(),
 			terminalSessionLabel,
 			terminalSessionDetail,
 			contextTokens: contextUsageSnapshot.tokens,
@@ -12039,6 +12130,8 @@ export default function (pi: ExtensionAPI) {
 				thinkingLevel: getThinkingLevelSafe() ?? "off",
 				piModels: getStudioModelOptions(),
 				suggestionModels: getStudioModelOptions(),
+				currentTheme: getCurrentStudioThemeDescriptor(),
+				piThemes: getStudioThemeOptions(),
 				terminalSessionLabel,
 				terminalSessionDetail,
 				contextTokens: contextUsageSnapshot.tokens,
@@ -12098,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." });
@@ -13553,7 +13676,7 @@ export default function (pi: ExtensionAPI) {
 		const filename = sanitizePdfFilename(requestedFilename || (isLatex ? "studio-latex-preview.pdf" : "studio-preview.pdf"));
 
 		try {
-			const { pdf, warning } = await renderStudioPdfWithPandoc(markdown, isLatex, resourcePath, editorPdfLanguage, sourcePath || undefined);
+			const { pdf, warning } = await renderStudioPdfWithPandoc(markdown, isLatex, resourcePath, editorPdfLanguage, sourcePath || undefined, undefined, getStudioThemeStyle(lastCommandCtx?.ui?.theme));
 			const writeResult = writeStudioPreviewExportFile(buildStudioPreviewExportPath(sourcePath || undefined, userResourceDir || undefined, studioCwd, filename), pdf);
 			const exportId = storePreparedPdfExport(pdf, filename, warning, writeResult.filePath ?? undefined);
 			const token = serverState?.token ?? "";
@@ -14287,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 {
@@ -14984,6 +15107,7 @@ export default function (pi: ExtensionAPI) {
 				editorPdfLanguage,
 				source.sourcePath,
 				pdfOptions,
+				getStudioThemeStyle(ctx.ui.theme),
 			);
 			await writeFile(source.outputPath, pdf);
 			const openError = await maybeOpenStudioExportPath(source.outputPath, params.open);
@@ -15296,6 +15420,7 @@ export default function (pi: ExtensionAPI) {
 						editorPdfLanguage,
 						undefined,
 						pdfOptions,
+						getStudioThemeStyle(ctx.ui.theme),
 					);
 					await writeFile(outputPath, pdf);
 
@@ -15354,6 +15479,7 @@ export default function (pi: ExtensionAPI) {
 					editorPdfLanguage,
 					file.resolvedPath,
 					pdfOptions,
+					getStudioThemeStyle(ctx.ui.theme),
 				);
 				await writeFile(outputPath, pdf);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.32",
+  "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",