pi-studio 0.9.49 → 0.9.50

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.50] — 2026-08-25
+
+### Added
+- Allow the global Studio header to be hidden independently and restored from a fixed top-edge control without shifting the workspace layout.
+
+### Changed
+- Hide the global Studio header by default in Zen mode, while keeping **F9** as an immediate way to exit Zen and restore the full header.
+
 ## [0.9.49] — 2026-08-24
 
 ### Added

package/README.md

@@ -30,7 +30,7 @@ _The video shows an earlier version of the Studio interface. The basic workflow
 
 - Opens a two-pane browser workspace: **Editor** (left) + **Response/Working/Editor Preview/Quarto 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
+- Includes a global **Zen** mode that hides the Studio header and secondary chrome without changing the current left/right pane layout; the header can also be hidden independently and restored from the top-right edge
 - Runs editor text directly, asks for structured critique (auto/writing/code focus), offers explicit **Show me** actions for a one-turn compact visual or structural explanation of the editor selection/document, displayed response, or current conversation topic, provides 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+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

package/client/studio-client.js

@@ -116,6 +116,10 @@
       const sendEditorBtn = document.getElementById("sendEditorBtn");
       const openCompanionBtn = document.getElementById("openCompanionBtn");
       const getEditorBtn = document.getElementById("getEditorBtn");
+      const studioHeaderEl = document.getElementById("studioHeader");
+      const hideStudioHeaderBtn = document.getElementById("hideStudioHeaderBtn");
+      const studioHeaderRevealEl = document.getElementById("studioHeaderReveal");
+      const studioHeaderRevealBtn = document.getElementById("studioHeaderRevealBtn");
       const zenModeBtn = document.getElementById("zenModeBtn");
       const sendRunBtn = document.getElementById("sendRunBtn");
       const queueSteerBtn = document.getElementById("queueSteerBtn");
@@ -2187,6 +2191,7 @@
       let lineNumbersRenderRaf = null;
       let annotationsEnabled = true;
       const STUDIO_ZEN_MODE_STORAGE_KEY = "piStudio.zenMode";
+      const STUDIO_HEADER_HIDDEN_STORAGE_KEY = "piStudio.headerHidden";
       const studioUiRefreshEnabled = readStudioUiRefreshEnabled();
       const EDITOR_FONT_SIZE_OPTIONS = [10, 11, 12, 13, 14, 15, 16, 18];
       const RESPONSE_FONT_SIZE_OPTIONS = [11, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 18, 20];
@@ -2239,12 +2244,17 @@
       let fileBrowserLoadNonce = 0;
       let studioUiRefreshUi = null;
       let studioZenModeEnabled = readStudioZenModeEnabled();
+      let studioHeaderHidden = readStudioHeaderHiddenEnabled();
+      let studioHeaderRevealTimer = null;
       if (studioUiRefreshEnabled && document.body) {
         document.body.classList.add("studio-ui-refresh");
       }
       if (studioZenModeEnabled && document.body) {
         document.body.classList.add("studio-zen-mode");
       }
+      if ((studioZenModeEnabled || studioHeaderHidden) && document.body) {
+        document.body.classList.add("studio-header-hidden");
+      }
       let scratchpadText = "";
       let scratchpadReturnFocusEl = null;
       let scratchpadPersistTimer = null;
@@ -2308,22 +2318,129 @@
         }
       }
 
-      function syncStudioZenModeUi() {
-        if (document.body) document.body.classList.toggle("studio-zen-mode", studioZenModeEnabled);
-        if (!zenModeBtn) return;
-        zenModeBtn.textContent = studioZenModeEnabled ? "Exit Zen" : "Zen";
-        zenModeBtn.title = studioZenModeEnabled ? "Show full Studio controls. Shortcut: F9." : "Hide secondary Studio controls. Shortcut: F9.";
-        zenModeBtn.setAttribute("aria-pressed", studioZenModeEnabled ? "true" : "false");
+      function readStudioHeaderHiddenEnabled() {
+        const normalize = (value) => String(value == null ? "" : value).trim().toLowerCase();
+        const isTruthy = (value) => ["1", "true", "yes", "on", "hidden"].indexOf(normalize(value)) !== -1;
+        try {
+          const stored = window.localStorage ? window.localStorage.getItem(STUDIO_HEADER_HIDDEN_STORAGE_KEY) : null;
+          if (stored === null) return false;
+          return isTruthy(stored);
+        } catch {
+          return false;
+        }
       }
 
-      function setStudioZenMode(enabled) {
-        studioZenModeEnabled = Boolean(enabled);
+      function persistStudioHeaderHiddenEnabled() {
+        try {
+          window.localStorage && window.localStorage.setItem(STUDIO_HEADER_HIDDEN_STORAGE_KEY, studioHeaderHidden ? "1" : "0");
+        } catch {}
+      }
+
+      function focusStudioChromeControl(control) {
+        if (!control || typeof control.focus !== "function") return;
+        window.setTimeout(() => {
+          try {
+            control.focus({ preventScroll: true });
+          } catch {
+            try { control.focus(); } catch {}
+          }
+        }, 0);
+      }
+
+      function showStudioHeaderRevealControl() {
+        if (!studioHeaderRevealEl || !studioHeaderRevealBtn) return;
+        studioHeaderRevealEl.classList.add("is-open");
+        if (studioHeaderRevealTimer) window.clearTimeout(studioHeaderRevealTimer);
+        studioHeaderRevealTimer = window.setTimeout(() => {
+          studioHeaderRevealTimer = null;
+          studioHeaderRevealEl.classList.remove("is-open");
+        }, 1800);
+        focusStudioChromeControl(studioHeaderRevealBtn);
+      }
+
+      function syncStudioHeaderVisibilityUi() {
+        const hidden = Boolean(studioZenModeEnabled || studioHeaderHidden);
+        if (document.body) document.body.classList.toggle("studio-header-hidden", hidden);
+        if (studioHeaderRevealEl) {
+          studioHeaderRevealEl.hidden = !hidden;
+          studioHeaderRevealEl.dataset.mode = studioZenModeEnabled ? "zen" : "header";
+          if (!hidden) studioHeaderRevealEl.classList.remove("is-open");
+        }
+        if (!hidden && studioHeaderRevealTimer) {
+          window.clearTimeout(studioHeaderRevealTimer);
+          studioHeaderRevealTimer = null;
+        }
+        if (studioHeaderRevealBtn) {
+          const label = studioZenModeEnabled ? "Exit Zen" : "Show header";
+          studioHeaderRevealBtn.textContent = label;
+          studioHeaderRevealBtn.setAttribute("aria-label", label);
+          studioHeaderRevealBtn.title = studioZenModeEnabled
+            ? "Exit Zen and restore the Studio header. Shortcut: F9."
+            : "Restore the Studio header.";
+        }
+      }
+
+      function syncStudioZenModeUi() {
+        if (document.body) document.body.classList.toggle("studio-zen-mode", studioZenModeEnabled);
+        if (zenModeBtn) {
+          zenModeBtn.textContent = studioZenModeEnabled ? "Exit Zen" : "Zen";
+          zenModeBtn.title = studioZenModeEnabled
+            ? "Exit Zen and restore the Studio header. Shortcut: F9."
+            : "Hide the Studio header and secondary controls. Shortcut: F9.";
+          zenModeBtn.setAttribute("aria-pressed", studioZenModeEnabled ? "true" : "false");
+        }
+        syncStudioHeaderVisibilityUi();
+      }
+
+      function setStudioHeaderHidden(enabled, options) {
+        const nextHidden = Boolean(enabled);
+        const moveFocusToReveal = Boolean(
+          nextHidden
+          && (
+            (options && options.focusReveal)
+            || (studioHeaderEl && document.activeElement && studioHeaderEl.contains(document.activeElement))
+          )
+        );
+        studioHeaderHidden = nextHidden;
+        persistStudioHeaderHiddenEnabled();
+        closeStudioUiRefreshMenus();
+        closeExportPreviewMenu();
+        syncStudioHeaderVisibilityUi();
+        if (moveFocusToReveal) showStudioHeaderRevealControl();
+      }
+
+      function setStudioZenMode(enabled, options) {
+        const nextEnabled = Boolean(enabled);
+        const moveFocusToReveal = Boolean(
+          nextEnabled
+          && (
+            (options && options.focusReveal)
+            || (studioHeaderEl && document.activeElement && studioHeaderEl.contains(document.activeElement))
+          )
+        );
+        studioZenModeEnabled = nextEnabled;
+        if (!studioZenModeEnabled) {
+          studioHeaderHidden = false;
+          persistStudioHeaderHiddenEnabled();
+        }
         try {
           window.localStorage && window.localStorage.setItem(STUDIO_ZEN_MODE_STORAGE_KEY, studioZenModeEnabled ? "1" : "0");
         } catch {}
         closeStudioUiRefreshMenus();
         closeExportPreviewMenu();
         syncStudioZenModeUi();
+        if (moveFocusToReveal) showStudioHeaderRevealControl();
+      }
+
+      function restoreStudioHeaderFromReveal() {
+        const wasZenMode = studioZenModeEnabled;
+        if (wasZenMode) {
+          setStudioZenMode(false);
+        } else {
+          setStudioHeaderHidden(false);
+        }
+        focusStudioChromeControl(wasZenMode ? zenModeBtn : hideStudioHeaderBtn);
+        setStatus(wasZenMode ? "Zen mode off. Studio header restored." : "Studio header shown.");
       }
 
       function makeStudioUiRefreshElement(tagName, className, text) {
@@ -4658,8 +4775,17 @@
         const isZenModeShortcut = key === "F9" && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey;
         if (isZenModeShortcut) {
           event.preventDefault();
-          setStudioZenMode(!studioZenModeEnabled);
-          setStatus(studioZenModeEnabled ? "Zen mode on." : "Zen mode off.");
+          const restoringHeaderOnly = Boolean(!studioZenModeEnabled && studioHeaderHidden);
+          if (studioZenModeEnabled) {
+            setStudioZenMode(false);
+          } else if (studioHeaderHidden) {
+            setStudioHeaderHidden(false);
+          } else {
+            setStudioZenMode(true);
+          }
+          setStatus(studioZenModeEnabled
+            ? "Zen mode on. Studio header hidden; press F9 to exit."
+            : (restoringHeaderOnly ? "Studio header restored." : "Zen mode off. Studio header restored."));
           return;
         }
 
@@ -22254,9 +22380,29 @@
         });
       }
 
+      if (hideStudioHeaderBtn) {
+        hideStudioHeaderBtn.addEventListener("click", () => {
+          setStudioHeaderHidden(true, { focusReveal: true });
+          setStatus("Studio header hidden. Move to the top-right edge to restore it.");
+        });
+      }
+
+      if (studioHeaderRevealEl) {
+        studioHeaderRevealEl.addEventListener("click", (event) => {
+          if (event.target === studioHeaderRevealEl) restoreStudioHeaderFromReveal();
+        });
+      }
+
+      if (studioHeaderRevealBtn) {
+        studioHeaderRevealBtn.addEventListener("click", restoreStudioHeaderFromReveal);
+      }
+
       if (zenModeBtn) {
         zenModeBtn.addEventListener("click", () => {
-          setStudioZenMode(!studioZenModeEnabled);
+          setStudioZenMode(!studioZenModeEnabled, { focusReveal: !studioZenModeEnabled });
+          setStatus(studioZenModeEnabled
+            ? "Zen mode on. Studio header hidden; press F9 to exit."
+            : "Zen mode off. Studio header restored.");
         });
       }
 

package/client/studio.css

@@ -59,28 +59,77 @@
       flex-wrap: wrap;
     }
 
-    .zen-mode-btn {
+    .zen-mode-btn,
+    .header-visibility-btn {
       font-weight: inherit;
       white-space: nowrap;
     }
 
-    body.studio-zen-mode > header {
-      padding: 8px 12px;
+    body.studio-header-hidden > #studioHeader,
+    body.studio-zen-mode > #studioHeader {
+      display: none !important;
     }
 
-    body.studio-zen-mode .app-subtitle {
-      display: none;
+    .studio-header-reveal {
+      position: fixed;
+      top: 0;
+      right: max(8px, env(safe-area-inset-right));
+      z-index: 60;
+      width: 118px;
+      height: 10px;
+      cursor: pointer;
     }
 
-    body.studio-zen-mode > header .controls > :not(#zenModeBtn) {
+    .studio-header-reveal[hidden] {
       display: none !important;
     }
 
-    body.studio-zen-mode #zenModeBtn {
+    .studio-header-reveal::after {
+      content: "";
+      position: absolute;
+      right: 10px;
+      bottom: 2px;
+      left: 10px;
+      height: 3px;
+      border-radius: 999px;
+      background: var(--accent);
+      opacity: 0.62;
+      pointer-events: none;
+    }
+
+    .studio-header-reveal button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      min-width: 100%;
+      min-height: 32px;
+      padding: 5px 10px;
+      border-top: 0;
+      border-radius: 0 0 9px 9px;
       background: var(--panel);
-      border-color: var(--control-border);
       color: var(--text);
-      font-weight: inherit;
+      box-shadow: 0 8px 24px var(--shadow-color);
+      white-space: nowrap;
+      transform: translateY(calc(-100% + 5px));
+      transition: transform 140ms ease;
+    }
+
+    .studio-header-reveal.is-open button,
+    .studio-header-reveal:hover button,
+    .studio-header-reveal:focus-within button {
+      transform: translateY(0);
+    }
+
+    .studio-header-reveal button:not(:disabled):hover,
+    .studio-header-reveal button:focus-visible {
+      background: var(--panel-2);
+      color: var(--accent);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .studio-header-reveal button {
+        transition: none;
+      }
     }
 
     .export-preview-controls {
@@ -5388,10 +5437,6 @@
       gap: 5px;
     }
 
-    body.studio-ui-refresh.studio-zen-mode > header {
-      padding: 7px 12px;
-    }
-
     body.studio-ui-refresh > header button,
     body.studio-ui-refresh #responseActions button,
     body.studio-ui-refresh #responseActions select {

package/index.ts

@@ -10756,7 +10756,7 @@ ${cssVarsBlock}
   <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-theme-name="${initialTheme}" data-context-tokens="${initialContextTokens}" data-context-window="${initialContextWindow}" data-context-percent="${initialContextPercent}" data-studio-mode="${studioMode}" data-ssh-session="${initialSshSession}">
-  <header>
+  <header id="studioHeader">
     <h1><span class="app-logo" aria-hidden="true">π</span> Studio <span class="app-subtitle">${appSubtitle}</span></h1>
     <div class="controls">
       <button id="saveAsBtn" type="button" title="Save editor content to a new file path. Cmd/Ctrl+S falls back here when no direct save path is available.">Save editor as…</button>
@@ -10766,9 +10766,13 @@ ${cssVarsBlock}
       <button id="importFileBtn" type="button" title="Import a file as an editable copy.">Import file copy…</button>
       <input id="fileInput" class="file-input-hidden" type="file" tabindex="-1" aria-hidden="true" accept=".md,.markdown,.mdx,.qmd,.js,.mjs,.cjs,.jsx,.ts,.mts,.cts,.tsx,.py,.pyw,.sh,.bash,.zsh,.json,.jsonc,.json5,.rs,.c,.h,.cpp,.cxx,.cc,.hpp,.hxx,.jl,.f90,.f95,.f03,.f,.for,.r,.R,.m,.tex,.latex,.diff,.patch,.java,.go,.rb,.swift,.html,.htm,.css,.xml,.yaml,.yml,.toml,.lua,.txt,.rst,.adoc" />
       <button id="getEditorBtn" type="button" title="Load the current terminal editor draft into Studio.">Load from pi editor</button>
-      <button id="zenModeBtn" class="zen-mode-btn" type="button" title="Hide secondary Studio controls. Shortcut: F9.">Zen</button>
+      <button id="hideStudioHeaderBtn" class="header-visibility-btn" type="button" aria-controls="studioHeader" title="Hide the global Studio header. Restore it from the top-right edge.">Hide header</button>
+      <button id="zenModeBtn" class="zen-mode-btn" type="button" title="Hide the Studio header and secondary controls. Shortcut: F9.">Zen</button>
     </div>
   </header>
+  <div id="studioHeaderReveal" class="studio-header-reveal" hidden>
+    <button id="studioHeaderRevealBtn" type="button" aria-controls="studioHeader" title="Show the Studio header.">Show header</button>
+  </div>
 
   <main>
     <section id="leftPane">
@@ -11081,7 +11085,7 @@ ${cssVarsBlock}
             <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>
-            <div><dt>F9</dt><dd>Toggle Zen mode</dd></div>
+            <div><dt>F9</dt><dd>Toggle Zen mode and hide or restore the Studio header</dd></div>
             <div><dt>F10</dt><dd>Focus or unfocus the active pane</dd></div>
             <div><dt>Esc</dt><dd>Close overlays, exit pane focus, or stop an active request</dd></div>
             <div><dt>?</dt><dd>Show keyboard shortcuts when not editing text</dd></div>

package/package.json

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