pi-studio 0.5.58 → 0.5.59

package/CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.59] — 2026-04-27
+
+### Added
+- Added an opt-in refreshed Studio layout, available via the footer UI switch or `?uiRefresh=1`, while keeping the classic layout as the default.
+- Added refreshed layout support for editor-only Studio mode.
+
+### Changed
+- Tuned refreshed pane headers, toolbar grouping, focus controls, dropdown labels, queue steering sizing, and preview export styling.
+
 ## [0.5.58] — 2026-04-24
 
 ### Added

package/client/studio-client.js

@@ -644,6 +644,12 @@
       let lineNumbersEnabled = false;
       let lineNumbersRenderRaf = null;
       let annotationsEnabled = true;
+      const STUDIO_UI_REFRESH_STORAGE_KEY = "piStudio.uiRefresh";
+      const studioUiRefreshEnabled = readStudioUiRefreshEnabled();
+      let studioUiRefreshUi = null;
+      if (studioUiRefreshEnabled && document.body) {
+        document.body.classList.add("studio-ui-refresh");
+      }
       let scratchpadText = "";
       let scratchpadReturnFocusEl = null;
       let scratchpadPersistTimer = null;
@@ -662,6 +668,333 @@
       let suppressedEditorSelectionEnd = null;
       const previewJumpHighlightState = new WeakMap();
       const PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX = "PISTUDIOANNOT";
+
+      function readStudioUiRefreshEnabled() {
+        const normalize = (value) => String(value == null ? "" : value).trim().toLowerCase();
+        const queryValue = initialQueryParams.has("uiRefresh")
+          ? initialQueryParams.get("uiRefresh")
+          : (initialQueryParams.has("studioUiRefresh") ? initialQueryParams.get("studioUiRefresh") : null);
+        const isTruthy = (value) => ["1", "true", "yes", "on", "v2", "refresh"].indexOf(normalize(value)) !== -1;
+        const isFalsey = (value) => ["0", "false", "no", "off"].indexOf(normalize(value)) !== -1;
+        if (queryValue !== null) {
+          const enabled = isTruthy(queryValue) || (!isFalsey(queryValue) && normalize(queryValue) !== "");
+          try {
+            if (enabled) window.localStorage && window.localStorage.setItem(STUDIO_UI_REFRESH_STORAGE_KEY, "1");
+            else window.localStorage && window.localStorage.removeItem(STUDIO_UI_REFRESH_STORAGE_KEY);
+          } catch {}
+          return enabled;
+        }
+        try {
+          return Boolean(window.localStorage && window.localStorage.getItem(STUDIO_UI_REFRESH_STORAGE_KEY) === "1");
+        } catch {
+          return false;
+        }
+      }
+
+      function makeStudioUiRefreshElement(tagName, className, text) {
+        const element = document.createElement(tagName);
+        if (className) element.className = className;
+        if (typeof text === "string") element.textContent = text;
+        return element;
+      }
+
+      function makeStudioUiRefreshSeparator() {
+        return makeStudioUiRefreshElement("span", "studio-refresh-sep");
+      }
+
+      function makeStudioUiRefreshIcon(kind) {
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("viewBox", "0 0 24 24");
+        svg.setAttribute("aria-hidden", "true");
+        svg.classList.add("studio-refresh-icon");
+        const paths = kind === "focus-exit"
+          ? ["M4 4l6 6", "M10 4v6H4", "M20 20l-6-6", "M14 20v-6h6"]
+          : ["M14 4h6v6", "M20 4l-6 6", "M10 20H4v-6", "M4 20l6-6"];
+        for (const d of paths) {
+          const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+          path.setAttribute("d", d);
+          svg.appendChild(path);
+        }
+        return svg;
+      }
+
+      function setStudioUiRefreshFocusButtonIcon(buttonEl, isFocusedPane) {
+        if (!buttonEl || !studioUiRefreshEnabled) return;
+        buttonEl.replaceChildren(makeStudioUiRefreshIcon(isFocusedPane ? "focus-exit" : "focus"));
+        buttonEl.setAttribute("aria-label", isFocusedPane ? "Exit focus" : "Focus pane");
+      }
+
+      function appendStudioUiRefreshMenuSection(menuEl, heading, controls) {
+        const sectionEl = makeStudioUiRefreshElement("div", "studio-refresh-menu-section");
+        if (heading) {
+          sectionEl.appendChild(makeStudioUiRefreshElement("div", "studio-refresh-menu-heading", heading));
+        }
+        for (const control of controls) {
+          if (!control) continue;
+          const itemEl = makeStudioUiRefreshElement("div", "studio-refresh-menu-item");
+          itemEl.appendChild(control);
+          sectionEl.appendChild(itemEl);
+        }
+        menuEl.appendChild(sectionEl);
+      }
+
+      function getStudioUiRefreshSelectSummary(selectEl, prefix) {
+        if (!selectEl) return "";
+        const option = selectEl.options && selectEl.selectedIndex >= 0 ? selectEl.options[selectEl.selectedIndex] : null;
+        let label = option ? String(option.textContent || option.label || option.value || "") : String(selectEl.value || "");
+        if (prefix) label = label.replace(new RegExp("^" + prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "\\s*:?\\s*", "i"), "");
+        return label.trim();
+      }
+
+      function setStudioUiRefreshButtonText(buttonEl, text) {
+        if (!buttonEl) return;
+        buttonEl.textContent = text;
+      }
+
+      function getStudioUiRefreshAnnotationHeaderEnabled() {
+        try {
+          return Boolean(stripAnnotationHeader(sourceTextEl.value).hadHeader);
+        } catch {
+          return false;
+        }
+      }
+
+      function syncStudioUiRefreshSummaries() {
+        if (!studioUiRefreshUi) return;
+        if (studioUiRefreshUi.annotationsButton) {
+          const inlineLabel = annotationsEnabled ? "Inline on" : "Inline hidden";
+          if (isEditorOnlyMode) {
+            setStudioUiRefreshButtonText(studioUiRefreshUi.annotationsButton, "Annotations: " + inlineLabel);
+          } else {
+            const headerLabel = getStudioUiRefreshAnnotationHeaderEnabled() ? "Header on" : "Header off";
+            setStudioUiRefreshButtonText(studioUiRefreshUi.annotationsButton, "Annotations: " + inlineLabel + " · " + headerLabel);
+          }
+        }
+        if (studioUiRefreshUi.viewButton) {
+          const syntaxLabel = editorHighlightEnabled
+            ? (getStudioUiRefreshSelectSummary(highlightSelect, "Syntax highlight") || editorLanguage || "Markdown")
+            : "Off";
+          const lineLabel = lineNumbersEnabled ? "Lines on" : "Lines off";
+          setStudioUiRefreshButtonText(studioUiRefreshUi.viewButton, "View: " + syntaxLabel + " · " + lineLabel);
+        }
+        syncStudioUiRefreshReviewTrigger();
+      }
+
+      function closeStudioUiRefreshMenus() {
+        if (!studioUiRefreshUi || !studioUiRefreshUi.menus) return;
+        for (const item of studioUiRefreshUi.menus) {
+          item.menu.hidden = true;
+          item.button.classList.remove("is-open");
+          item.button.setAttribute("aria-expanded", "false");
+        }
+      }
+
+      function toggleStudioUiRefreshMenu(name) {
+        if (!studioUiRefreshUi || !studioUiRefreshUi.menus) return;
+        let willOpen = false;
+        for (const item of studioUiRefreshUi.menus) {
+          if (item.name === name) willOpen = item.menu.hidden;
+        }
+        for (const item of studioUiRefreshUi.menus) {
+          const isOpen = willOpen && item.name === name;
+          item.menu.hidden = !isOpen;
+          item.button.classList.toggle("is-open", isOpen);
+          item.button.setAttribute("aria-expanded", isOpen ? "true" : "false");
+        }
+      }
+
+      function syncStudioUiRefreshReviewTrigger() {
+        if (!studioUiRefreshUi || !studioUiRefreshUi.reviewButton) return;
+        const critiqueIsStop = getAbortablePendingKind() === "critique";
+        const reviewButton = studioUiRefreshUi.reviewButton;
+        reviewButton.textContent = critiqueIsStop ? "Stop critique" : "Review";
+        reviewButton.classList.toggle("request-stop-active", critiqueIsStop);
+        reviewButton.disabled = critiqueIsStop ? Boolean(critiqueBtn && critiqueBtn.disabled) : false;
+        reviewButton.title = critiqueIsStop
+          ? "Stop the running critique request. Shortcut: Esc."
+          : "Open review actions and settings.";
+        if (critiqueIsStop) {
+          closeStudioUiRefreshMenus();
+        }
+      }
+
+      function makeStudioUiRefreshMenu(buttonEl, name, menuClassName) {
+        const anchorEl = makeStudioUiRefreshElement("span", "studio-refresh-menu-anchor " + (menuClassName || ""));
+        const menuEl = makeStudioUiRefreshElement("div", "studio-refresh-menu");
+        menuEl.hidden = true;
+        buttonEl.type = "button";
+        buttonEl.classList.add("studio-refresh-chip");
+        buttonEl.setAttribute("aria-haspopup", "menu");
+        buttonEl.setAttribute("aria-expanded", "false");
+        buttonEl.addEventListener("click", (event) => {
+          event.stopPropagation();
+          if (name === "review" && getAbortablePendingKind() === "critique") {
+            requestCancelForPendingRequest("critique");
+            return;
+          }
+          toggleStudioUiRefreshMenu(name);
+        });
+        anchorEl.appendChild(buttonEl);
+        anchorEl.appendChild(menuEl);
+        return { name, anchor: anchorEl, button: buttonEl, menu: menuEl };
+      }
+
+      function setStudioUiRefreshPreference(enabled) {
+        try {
+          if (enabled) window.localStorage && window.localStorage.setItem(STUDIO_UI_REFRESH_STORAGE_KEY, "1");
+          else window.localStorage && window.localStorage.removeItem(STUDIO_UI_REFRESH_STORAGE_KEY);
+        } catch {}
+        try {
+          const url = new URL(window.location.href);
+          url.searchParams.set("uiRefresh", enabled ? "1" : "0");
+          window.location.assign(url.toString());
+        } catch {
+          window.location.reload();
+        }
+      }
+
+      function setupStudioUiRefreshToggleButton() {
+        if (!footerMetaEl || document.getElementById("studioUiRefreshToggleBtn")) return;
+        const button = makeStudioUiRefreshElement("button", "footer-compact-btn studio-ui-refresh-toggle", studioUiRefreshEnabled ? "UI: Refresh" : "UI: Classic");
+        button.id = "studioUiRefreshToggleBtn";
+        button.type = "button";
+        button.title = studioUiRefreshEnabled
+          ? "Switch Studio to the classic layout."
+          : "Switch Studio to the refreshed layout.";
+        button.addEventListener("click", () => {
+          setStudioUiRefreshPreference(!studioUiRefreshEnabled);
+        });
+        if (compactBtn && compactBtn.parentNode === footerMetaEl) {
+          compactBtn.insertAdjacentElement("afterend", button);
+        } else {
+          footerMetaEl.appendChild(button);
+        }
+      }
+
+      function setupStudioUiRefreshPrototype() {
+        if (!studioUiRefreshEnabled || studioUiRefreshUi) return;
+        const leftHeaderEl = document.getElementById("leftSectionHeader");
+        const sourceMetaEl = leftPaneEl ? leftPaneEl.querySelector(".source-meta") : null;
+        if (!leftHeaderEl || !sourceMetaEl || !copyDraftBtn) return;
+
+        let reviewMenu = null;
+        if (!isEditorOnlyMode && critiqueBtn && lensSelect) {
+          const reviewButton = makeStudioUiRefreshElement("button", "studio-refresh-tool-tab studio-refresh-review-btn", "Review");
+          reviewMenu = makeStudioUiRefreshMenu(reviewButton, "review", "studio-refresh-review-anchor");
+          appendStudioUiRefreshMenuSection(reviewMenu.menu, "Action", [critiqueBtn]);
+          appendStudioUiRefreshMenuSection(reviewMenu.menu, "Setting", [lensSelect]);
+        }
+
+        const headerTopEl = makeStudioUiRefreshElement("div", "studio-refresh-header-top");
+        const titleGroupEl = makeStudioUiRefreshElement("div", "studio-refresh-title-group");
+        if (leftFocusBtn) {
+          setStudioUiRefreshFocusButtonIcon(leftFocusBtn, false);
+          titleGroupEl.appendChild(leftFocusBtn);
+        }
+        titleGroupEl.appendChild(makeStudioUiRefreshSeparator());
+        if (isEditorOnlyMode) {
+          titleGroupEl.appendChild(makeStudioUiRefreshElement("span", "studio-refresh-static-title", "Editor (Raw)"));
+        } else if (editorViewSelect) {
+          titleGroupEl.appendChild(editorViewSelect);
+        }
+        headerTopEl.appendChild(titleGroupEl);
+        const headerToolsEl = makeStudioUiRefreshElement("div", "studio-refresh-pane-tools");
+        if (reviewNotesBtn) headerToolsEl.appendChild(reviewNotesBtn);
+        if (outlineBtn) headerToolsEl.appendChild(outlineBtn);
+        if (scratchpadBtn) headerToolsEl.appendChild(scratchpadBtn);
+        if (reviewMenu) headerToolsEl.appendChild(reviewMenu.anchor);
+        headerTopEl.appendChild(headerToolsEl);
+
+        const headerUtilityEl = makeStudioUiRefreshElement("div", "studio-refresh-header-utility");
+        const utilityLeftEl = makeStudioUiRefreshElement("div", "studio-refresh-utility-left");
+        if (sourceBadgeEl) utilityLeftEl.appendChild(sourceBadgeEl);
+        if (sourceBadgeEl && (resourceDirBtn || resourceDirLabel || resourceDirInputWrap || syncBadgeEl)) {
+          utilityLeftEl.appendChild(makeStudioUiRefreshSeparator());
+        }
+        if (resourceDirBtn) utilityLeftEl.appendChild(resourceDirBtn);
+        if (resourceDirLabel) utilityLeftEl.appendChild(resourceDirLabel);
+        if (resourceDirInputWrap) utilityLeftEl.appendChild(resourceDirInputWrap);
+        if (syncBadgeEl) utilityLeftEl.appendChild(syncBadgeEl);
+        headerUtilityEl.appendChild(utilityLeftEl);
+        leftHeaderEl.replaceChildren(headerTopEl, headerUtilityEl);
+
+        const rightHeaderEl = document.getElementById("rightSectionHeader");
+        if (rightHeaderEl && rightViewSelect) {
+          const rightIdentityEl = makeStudioUiRefreshElement("div", "studio-refresh-pane-identity studio-refresh-pane-identity-right");
+          const rightTitleGroupEl = makeStudioUiRefreshElement("div", "studio-refresh-title-group");
+          if (rightFocusBtn) {
+            setStudioUiRefreshFocusButtonIcon(rightFocusBtn, false);
+            rightTitleGroupEl.appendChild(rightFocusBtn);
+            rightTitleGroupEl.appendChild(makeStudioUiRefreshSeparator());
+          }
+          if (isEditorOnlyMode) {
+            rightTitleGroupEl.appendChild(makeStudioUiRefreshElement("span", "studio-refresh-static-title", "Editor (Preview)"));
+          } else {
+            rightTitleGroupEl.appendChild(rightViewSelect);
+          }
+          rightIdentityEl.appendChild(rightTitleGroupEl);
+          const rightToolsEl = makeStudioUiRefreshElement("div", "studio-refresh-pane-tools");
+          if (exportPdfBtn) rightToolsEl.appendChild(exportPdfBtn);
+          rightHeaderEl.replaceChildren(rightIdentityEl, rightToolsEl);
+        }
+
+        const toolbarEl = makeStudioUiRefreshElement("div", "studio-refresh-toolbar");
+        const toolbarMainEl = makeStudioUiRefreshElement("div", "studio-refresh-toolbar-main");
+        const actionsEl = makeStudioUiRefreshElement("div", "studio-refresh-toolbar-actions");
+        const actionLineOneEl = makeStudioUiRefreshElement("div", "studio-refresh-action-line");
+        if (!isEditorOnlyMode && sendRunBtn) actionLineOneEl.appendChild(sendRunBtn);
+        if (!isEditorOnlyMode && queueSteerBtn) actionLineOneEl.appendChild(queueSteerBtn);
+        const actionLineTwoEl = makeStudioUiRefreshElement("div", "studio-refresh-action-line");
+        actionLineTwoEl.appendChild(copyDraftBtn);
+        if (!isEditorOnlyMode && sendEditorBtn) actionLineTwoEl.appendChild(sendEditorBtn);
+        if (actionLineOneEl.childNodes.length > 0) actionsEl.appendChild(actionLineOneEl);
+        actionsEl.appendChild(actionLineTwoEl);
+
+        const stateEl = makeStudioUiRefreshElement("div", "studio-refresh-toolbar-state");
+        const annotationsButton = makeStudioUiRefreshElement("button", "", "Annotations");
+        const annotationsMenu = makeStudioUiRefreshMenu(annotationsButton, "annotations", "studio-refresh-annotations-anchor");
+        appendStudioUiRefreshMenuSection(annotationsMenu.menu, "Display", isEditorOnlyMode ? [annotationModeSelect] : [annotationModeSelect, insertHeaderBtn]);
+        appendStudioUiRefreshMenuSection(annotationsMenu.menu, "Actions", [stripAnnotationsBtn, saveAnnotatedBtn]);
+        const viewButton = makeStudioUiRefreshElement("button", "", "View");
+        const viewMenu = makeStudioUiRefreshMenu(viewButton, "view", "studio-refresh-view-anchor");
+        appendStudioUiRefreshMenuSection(viewMenu.menu, "Display", [highlightSelect, lineNumbersSelect]);
+        stateEl.appendChild(annotationsMenu.anchor);
+        stateEl.appendChild(viewMenu.anchor);
+
+        toolbarMainEl.appendChild(actionsEl);
+        toolbarMainEl.appendChild(stateEl);
+        toolbarEl.appendChild(toolbarMainEl);
+        sourceMetaEl.replaceChildren(toolbarEl);
+
+        studioUiRefreshUi = {
+          annotationsButton,
+          viewButton,
+          reviewButton: reviewMenu ? reviewMenu.button : null,
+          menus: [annotationsMenu, viewMenu].concat(reviewMenu ? [reviewMenu] : []),
+        };
+
+        document.addEventListener("click", (event) => {
+          const target = event.target;
+          if (target instanceof Element && target.closest(".studio-refresh-menu-anchor")) return;
+          closeStudioUiRefreshMenus();
+        });
+        document.addEventListener("keydown", (event) => {
+          if (event.key === "Escape") closeStudioUiRefreshMenus();
+        });
+        toolbarEl.addEventListener("change", () => {
+          window.setTimeout(syncStudioUiRefreshSummaries, 0);
+        });
+        toolbarEl.addEventListener("click", (event) => {
+          const target = event.target;
+          if (target instanceof Element && target.closest(".studio-refresh-menu")) {
+            window.setTimeout(syncStudioUiRefreshSummaries, 0);
+          }
+        });
+        syncStudioUiRefreshSummaries();
+      }
+
+      setupStudioUiRefreshToggleButton();
+      setupStudioUiRefreshPrototype();
       const annotationHelpers = globalThis.PiStudioAnnotationHelpers;
       if (!annotationHelpers || typeof annotationHelpers.collectInlineAnnotationMarkers !== "function") {
         throw new Error("Studio annotation helpers failed to load.");
@@ -1301,7 +1634,7 @@
 
       function updateSourceBadge() {
         const label = sourceState && sourceState.label ? sourceState.label : "blank";
-        sourceBadgeEl.textContent = "Editor origin: " + label;
+        sourceBadgeEl.textContent = (studioUiRefreshEnabled ? "Origin: " : "Editor origin: ") + label;
         const descriptor = getCurrentStudioDocumentDescriptor();
         if (sourceBadgeEl) {
           sourceBadgeEl.title = descriptor.fileBacked
@@ -1362,6 +1695,9 @@
           btn.classList.toggle("is-active", isFocusedPane);
           btn.setAttribute("aria-pressed", isFocusedPane ? "true" : "false");
           btn.textContent = isFocusedPane ? "Exit focus" : "Focus pane";
+          if (studioUiRefreshEnabled) {
+            setStudioUiRefreshFocusButtonIcon(btn, isFocusedPane);
+          }
           btn.title = isFocusedPane
             ? "Return to the two-pane layout. Shortcut: F10 or Cmd/Ctrl+Esc."
             : "Show only the " + paneName + " pane. Shortcut: F10 or Cmd/Ctrl+Esc.";
@@ -3849,6 +4185,7 @@
         if (lineNumbersSelect) {
           lineNumbersSelect.value = lineNumbersEnabled ? "on" : "off";
         }
+        syncStudioUiRefreshSummaries();
         updateLineNumberGutterVisibility();
         scheduleEditorLineNumberRender();
         if (editorHighlightEnabled && editorView === "markdown") {
@@ -4537,6 +4874,7 @@
         if (stripAnnotationsBtn) {
           stripAnnotationsBtn.disabled = uiBusy || !hasAnnotationMarkers(sourceTextEl.value);
         }
+        syncStudioUiRefreshSummaries();
       }
 
       function scheduleEditorMetaUpdate() {
@@ -8870,11 +9208,13 @@
         if (!highlightSelect) return;
         if (!editorHighlightEnabled) {
           highlightSelect.value = "off";
+          syncStudioUiRefreshSummaries();
           return;
         }
         highlightSelect.value = (editorLanguage && SUPPORTED_LANGUAGES.indexOf(editorLanguage) !== -1)
           ? editorLanguage
           : "markdown";
+        syncStudioUiRefreshSummaries();
       }
 
       function setEditorHighlightEnabled(enabled) {
@@ -8977,6 +9317,7 @@
             critiqueBtn.disabled = true;
             critiqueBtn.title = "Critique is unavailable in editor-only mode.";
           }
+          syncStudioUiRefreshReviewTrigger();
           return;
         }
 
@@ -9014,6 +9355,7 @@
                 ? "Critique text as-is (includes [an: ...] markers)."
                 : "Critique text with [an: ...] markers stripped."));
         }
+        syncStudioUiRefreshReviewTrigger();
       }
 
       function updateAnnotationModeUi() {
@@ -9024,6 +9366,7 @@
             : "Inline annotations Hide: keep markers in the editor, hide them in preview, and strip before Run/Critique.";
         }
 
+        syncStudioUiRefreshSummaries();
         syncRunAndCritiqueButtons();
       }
 
@@ -9909,10 +10252,12 @@
         if (hasHeader) {
           insertHeaderBtn.textContent = "Annotation header: On";
           insertHeaderBtn.title = "Remove annotated-reply protocol header while keeping body text.";
+          syncStudioUiRefreshSummaries();
           return;
         }
         insertHeaderBtn.textContent = "Annotation header: Off";
         insertHeaderBtn.title = "Insert annotated-reply protocol header (source metadata, [an: ...] syntax hint, precedence note, and end marker).";
+        syncStudioUiRefreshSummaries();
       }
 
       function toggleAnnotatedReplyHeader() {

package/client/studio.css

@@ -2314,3 +2314,516 @@
         grid-template-columns: 1fr;
       }
     }
+
+    /* Opt-in editor-side layout refresh prototype. Enabled with ?uiRefresh=1 or localStorage piStudio.uiRefresh=1. */
+    body.studio-ui-refresh {
+      font-size: 14px;
+    }
+
+    body.studio-ui-refresh > header {
+      padding: 9px 14px;
+      gap: 10px;
+    }
+
+    body.studio-ui-refresh h1 {
+      font-size: 17px;
+    }
+
+    body.studio-ui-refresh .app-logo {
+      font-size: 20px;
+    }
+
+    body.studio-ui-refresh .app-subtitle {
+      font-size: 11px;
+    }
+
+    body.studio-ui-refresh > header .controls {
+      gap: 6px;
+    }
+
+    body.studio-ui-refresh > header button,
+    body.studio-ui-refresh > header .file-label,
+    body.studio-ui-refresh #responseActions button,
+    body.studio-ui-refresh #responseActions select {
+      padding: 6px 8px;
+      font-size: 13px;
+    }
+
+    body.studio-ui-refresh main {
+      gap: 10px;
+      padding: 10px;
+    }
+
+    body.studio-ui-refresh footer {
+      padding: 8px 10px;
+      font-size: 12px;
+    }
+
+    .studio-ui-refresh-toggle {
+      opacity: 0.9;
+    }
+
+    .studio-ui-refresh-toggle:not(:disabled):hover {
+      opacity: 1;
+    }
+
+    body.studio-ui-refresh[data-studio-mode="editor-only"] #leftSectionHeader .section-header-main::before,
+    body.studio-ui-refresh[data-studio-mode="editor-only"] #rightSectionHeader .section-header-main::before {
+      content: none;
+      display: none;
+    }
+
+    body.studio-ui-refresh #leftSectionHeader,
+    body.studio-ui-refresh #rightSectionHeader {
+      position: relative;
+      z-index: 30;
+      display: grid;
+      gap: 7px;
+      background: transparent;
+      padding: 8px 10px 7px;
+      overflow: visible;
+    }
+
+    body.studio-ui-refresh #leftSectionHeader {
+      grid-template-columns: 1fr;
+      align-items: stretch;
+    }
+
+    body.studio-ui-refresh #rightSectionHeader {
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+    }
+
+    body.studio-ui-refresh .studio-refresh-utility-left,
+    body.studio-ui-refresh .studio-refresh-pane-identity,
+    body.studio-ui-refresh .studio-refresh-pane-tools,
+    body.studio-ui-refresh .studio-refresh-title-group,
+    body.studio-ui-refresh .studio-refresh-context-group,
+    body.studio-ui-refresh .studio-refresh-action-line {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      min-width: 0;
+      flex-wrap: wrap;
+    }
+
+    body.studio-ui-refresh .studio-refresh-header-top,
+    body.studio-ui-refresh .studio-refresh-header-utility {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-pane-identity {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: center;
+      column-gap: 10px;
+      row-gap: 6px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-title-group,
+    body.studio-ui-refresh .studio-refresh-context-group,
+    body.studio-ui-refresh .studio-refresh-utility-left {
+      flex-wrap: nowrap;
+    }
+
+    body.studio-ui-refresh .studio-refresh-context-group,
+    body.studio-ui-refresh .studio-refresh-utility-left {
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    body.studio-ui-refresh .studio-refresh-title-group {
+      gap: 3px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-pane-tools {
+      justify-content: flex-end;
+      flex-wrap: nowrap;
+    }
+
+    body.studio-ui-refresh .studio-refresh-sep {
+      display: inline-block;
+      width: 1px;
+      height: 18px;
+      background: var(--border-muted);
+      margin: 0 1px;
+      flex: 0 0 1px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-icon {
+      width: 17px;
+      height: 17px;
+      stroke: currentColor;
+      stroke-width: 1.85;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      fill: none;
+      pointer-events: none;
+    }
+
+    body.studio-ui-refresh #leftSectionHeader select,
+    body.studio-ui-refresh #leftSectionHeader button,
+    body.studio-ui-refresh #rightSectionHeader select,
+    body.studio-ui-refresh #rightSectionHeader button,
+    body.studio-ui-refresh .studio-refresh-toolbar button,
+    body.studio-ui-refresh .studio-refresh-toolbar select {
+      border-color: transparent;
+      background: transparent;
+      font-size: 14px;
+    }
+
+    body.studio-ui-refresh #leftSectionHeader select:hover,
+    body.studio-ui-refresh #leftSectionHeader button:not(:disabled):hover,
+    body.studio-ui-refresh #rightSectionHeader select:hover,
+    body.studio-ui-refresh #rightSectionHeader button:not(:disabled):hover,
+    body.studio-ui-refresh .studio-refresh-toolbar button:not(:disabled):hover,
+    body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover {
+      background: var(--panel-2);
+    }
+
+    body.studio-ui-refresh #leftSectionHeader #editorViewSelect,
+    body.studio-ui-refresh #rightSectionHeader #rightViewSelect {
+      font-size: 15px;
+      font-weight: 750;
+      padding: 3px 5px;
+      max-width: 230px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-static-title {
+      color: var(--text);
+      font-size: 15px;
+      font-weight: 700;
+      padding: 3px 5px;
+      max-width: 230px;
+      white-space: nowrap;
+    }
+
+    body.studio-ui-refresh #leftFocusBtn,
+    body.studio-ui-refresh #rightFocusBtn {
+      width: 32px;
+      min-width: 32px;
+      min-height: 32px;
+      padding: 0;
+      color: var(--muted);
+      align-items: center;
+      justify-content: center;
+    }
+
+    body.studio-ui-refresh #sourceBadge,
+    body.studio-ui-refresh #resourceDirBtn,
+    body.studio-ui-refresh #resourceDirLabel {
+      border-color: transparent;
+      background: transparent;
+      padding: 4px 6px;
+      font-size: 14px;
+      border-radius: 8px;
+    }
+
+    body.studio-ui-refresh #sourceBadge {
+      color: var(--text);
+      max-width: min(34rem, 54vw);
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    body.studio-ui-refresh #resourceDirBtn,
+    body.studio-ui-refresh #resourceDirLabel,
+    body.studio-ui-refresh #reviewNotesBtn,
+    body.studio-ui-refresh #outlineBtn,
+    body.studio-ui-refresh #scratchpadBtn,
+    body.studio-ui-refresh .studio-refresh-tool-tab {
+      color: var(--text);
+    }
+
+    body.studio-ui-refresh #resourceDirInputWrap.visible {
+      display: inline-flex;
+    }
+
+    body.studio-ui-refresh #syncBadge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      min-height: 26px;
+      border: 0;
+      border-radius: 999px;
+      padding: 3px 9px;
+      background: var(--panel-2);
+      color: var(--muted);
+      opacity: 1;
+    }
+
+    body.studio-ui-refresh #syncBadge[hidden] {
+      display: none !important;
+    }
+
+    body.studio-ui-refresh #syncBadge::before {
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-radius: 999px;
+      background: var(--success, #22c55e);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #22c55e) 14%, transparent);
+    }
+
+    body.studio-ui-refresh #reviewNotesBtn,
+    body.studio-ui-refresh #outlineBtn,
+    body.studio-ui-refresh #scratchpadBtn,
+    body.studio-ui-refresh #exportPdfBtn,
+    body.studio-ui-refresh .studio-refresh-tool-tab {
+      font-weight: 500;
+      padding: 6px 9px;
+      border-radius: 9px;
+    }
+
+    body.studio-ui-refresh #exportPdfBtn {
+      background: var(--panel-2);
+      color: var(--text);
+      border-color: transparent;
+    }
+
+    body.studio-ui-refresh #reviewNotesBtn.is-active,
+    body.studio-ui-refresh #outlineBtn.is-active,
+    body.studio-ui-refresh #scratchpadBtn.has-content,
+    body.studio-ui-refresh #reviewNotesBtn.has-content {
+      background: var(--accent-soft);
+      color: var(--accent);
+      border-color: transparent;
+    }
+
+    body.studio-ui-refresh .source-wrap {
+      padding: 0;
+      gap: 0;
+    }
+
+    body.studio-ui-refresh .source-meta {
+      display: block;
+      padding: 0;
+      border-bottom: 1px solid var(--border-muted);
+      position: relative;
+      z-index: 20;
+      overflow: visible;
+    }
+
+    body.studio-ui-refresh .source-body {
+      padding: 8px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar {
+      position: relative;
+      padding: 9px 12px 10px;
+      overflow: visible;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar-main {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 12px;
+      align-items: start;
+      min-width: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar-actions {
+      display: grid;
+      gap: 7px;
+      justify-items: start;
+      min-width: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar-state {
+      display: grid;
+      gap: 7px;
+      justify-items: end;
+      align-content: start;
+      min-width: max-content;
+    }
+
+    body.studio-ui-refresh .studio-refresh-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border-radius: 9px;
+      color: var(--text);
+      white-space: nowrap;
+      padding: 6px 9px;
+      font-size: 14px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-chip::after {
+      content: "⌄";
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1;
+      transform: translateY(-1px);
+    }
+
+    body.studio-ui-refresh .studio-refresh-chip.is-open {
+      background: var(--panel-2);
+      color: var(--text);
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-anchor {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      overflow: visible;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu {
+      position: absolute;
+      top: calc(100% + 8px);
+      right: 0;
+      width: min(420px, calc(100vw - 48px));
+      padding: 10px;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      background: var(--panel);
+      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
+      z-index: 100;
+    }
+
+    body.studio-ui-refresh .studio-refresh-review-anchor .studio-refresh-menu {
+      width: min(360px, calc(100vw - 48px));
+      left: auto;
+      right: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-view-anchor .studio-refresh-menu {
+      width: min(320px, calc(100vw - 48px));
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu[hidden] {
+      display: none !important;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-section {
+      padding: 8px 0 6px;
+      border-top: 1px solid var(--border-muted);
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-section:first-child {
+      border-top: 0;
+      padding-top: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-heading {
+      margin: 0 6px 6px;
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      min-width: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-item > button,
+    body.studio-ui-refresh .studio-refresh-menu-item > select {
+      width: 100%;
+      justify-content: flex-start;
+      text-align: left;
+      border-color: transparent;
+      background: transparent;
+      color: var(--text);
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu #critiqueBtn {
+      justify-content: flex-start;
+      text-align: left;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-item > button:not(:disabled):hover,
+    body.studio-ui-refresh .studio-refresh-menu-item > select:not(:disabled):hover {
+      background: var(--panel-2);
+    }
+
+    body.studio-ui-refresh #copyDraftBtn:only-child {
+      min-height: 32px;
+      padding: 5px 9px;
+    }
+
+    body.studio-ui-refresh #sendRunBtn,
+    body.studio-ui-refresh #queueSteerBtn,
+    body.studio-ui-refresh #loadResponseBtn:not([hidden]) {
+      height: 30px;
+      min-height: 30px;
+      padding: 4px 10px;
+      font-size: 13px;
+      line-height: 1.2;
+      border-radius: 8px;
+    }
+
+    body.studio-ui-refresh #sendRunBtn {
+      min-width: 9.2rem;
+    }
+
+    body.studio-ui-refresh #queueSteerBtn {
+      min-width: auto;
+    }
+
+    body.studio-ui-refresh #queueSteerBtn:not(:disabled) {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: var(--accent-contrast);
+      font-weight: 600;
+    }
+
+    body.studio-ui-refresh #queueSteerBtn:not(:disabled):hover {
+      background: var(--accent);
+      filter: brightness(0.95);
+    }
+
+    body.studio-ui-refresh .studio-refresh-review-btn.request-stop-active {
+      background: var(--error);
+      border-color: var(--error);
+      color: var(--error-contrast);
+      font-weight: 600;
+    }
+
+    body.studio-ui-refresh .studio-refresh-review-btn.request-stop-active::after {
+      content: none;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu #critiqueBtn.request-stop-active {
+      background: var(--error);
+      border-color: var(--error);
+      color: var(--error-contrast);
+      font-weight: 600;
+    }
+
+    @media (max-width: 1280px) {
+      body.studio-ui-refresh #rightSectionHeader,
+      body.studio-ui-refresh .studio-refresh-header-top,
+      body.studio-ui-refresh .studio-refresh-header-utility,
+      body.studio-ui-refresh .studio-refresh-toolbar-main,
+      body.studio-ui-refresh .studio-refresh-pane-identity {
+        grid-template-columns: 1fr;
+      }
+
+      body.studio-ui-refresh .studio-refresh-pane-tools,
+      body.studio-ui-refresh .studio-refresh-toolbar-state {
+        justify-content: flex-start;
+        justify-items: start;
+      }
+
+      body.studio-ui-refresh .studio-refresh-pane-tools,
+      body.studio-ui-refresh .studio-refresh-title-group,
+      body.studio-ui-refresh .studio-refresh-utility-left {
+        flex-wrap: wrap;
+      }
+
+      body.studio-ui-refresh .studio-refresh-toolbar-state {
+        min-width: 0;
+      }
+    }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.58",
+  "version": "0.5.59",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",