pi-studio 0.9.54 → 0.9.55

package/CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.55] — 2026-09-02
+
+### Changed
+- Let side questions use **X-high** and **Max** thinking when the active model supports them, while retaining **Low** as the default.
+
+### Fixed
+- Open watched previews launched from Files or local Studio links with the preview pane focused, matching `/studio --watch`, and label the exposed raw source clearly as read-only and disk-following.
+- Normalize Studio buttons and dropdown select controls with flat browser-neutral styling and consistent chevrons instead of WebKit's native shaded controls.
+
 ## [0.9.54] — 2026-09-02
 
 ### Added

package/README.md

@@ -118,6 +118,7 @@ Open **Review → Side question**, select **Side questions** in the right pane,
 - **Also use files from** controls the read-only boundary available to the side agent: no other files, the document folder, the current repository, or another chosen folder. Related-file access requires an allowed folder for the current Studio session; if the selected root is not already allowed, Studio names the canonical folder and asks before starting the thread. An exact-file grant never exposes its parent folder.
 - With **Repository** selected, **Include Git context** can capture status, staged and unstaged tracked-file changes, and up to 20 recent commit summaries. The bounded snapshot is frozen when the thread starts and exposed through fixed read-only tools; untracked contents remain available only through the existing root-confined file reader.
 - **Include the current main conversation snapshot** is opt-in. Side questions and answers otherwise never enter the main Pi history; **Bring to main conversation** is the explicit handoff.
+- **Thinking** defaults to **Low** for quick asides. **X-high** and **Max** appear when the active model advertises support, for complex side questions where the extra latency is worthwhile.
 - Local context tools can map filenames, search readable text, and read selected ranges. Studio revalidates the allowed context root before prompts and built-in local tool calls; symlinks, root replacement, and traversal outside that root are rejected. PDF extraction uses `pdftotext`; DOCX, ODT, and EPUB extraction uses Pandoc.
 - **Allow web search** is opt-in and appears when `BRAVE_API_KEY` is available to the Pi process. Model-chosen search queries are sent to Brave Search; the side agent is instructed not to copy private local passages into queries. Web answers cite result URLs and identify when they rely on search-result snippets rather than full page content.
 - **Additional Pi tools** lists eligible tools already registered by the user's installed Pi extensions. Selection is explicit, remembered locally, and frozen when the thread starts. Studio reloads only the extensions owning the selected tools into the isolated side runtime and activates only those tool names; it does not import or depend on any particular third-party extension. Gateway tools are labelled and require an additional confirmation because selecting one may expose further services configured behind it.
@@ -151,7 +152,7 @@ caption: Optional caption
 
 To view an existing PDF directly, run `/studio report.pdf` (or `/studio "path with spaces/report.pdf"`). The PDF opens read-only in a focused companion preview, even when the full Studio workspace is already open. A `#page=N` suffix selects the initial page. Auto-refresh is off by default; use `/studio --watch report.pdf` to start with it on, or toggle **Auto-refresh** in the PDF card or focused viewer. Studio checks only while the tab is visible and waits for two matching file-version observations before reloading, which avoids reading a PDF while LaTeX is still writing it. **Cmd/Ctrl+Alt+R** manually refreshes the focused or visible PDF. This is distinct from `/studio-pdf`, which exports Markdown, LaTeX, code, or the last response to a new PDF.
 
-For a disk-authoritative text or code preview, run `/studio --watch notes.md` or choose **Preview file (follow changes)** from a local-link menu / **Preview (follow)** in Files. This opens a transient read-only companion tab rather than an editable buffer. Studio polls the canonical file, debounces change bursts, compares SHA-256 content revisions, accepts ordinary and atomic-replacement saves, and never writes back. Each watcher socket is bound to the exact path in a bounded, expiring server-created tab capability; if that identity expires before a reload or reconnect, the tab stays read-only and asks you to open a fresh watched preview. A missing, unreadable, oversized, binary, or path-replaced source leaves the last good preview visible and automatically recovers when the same canonical file becomes readable again. Render failures likewise retain the last successfully staged document rather than replacing it with partial output. On successful updates, Studio restores a nearby stable content anchor where possible and falls back to the previous scroll ratio.
+For a disk-authoritative text or code preview, run `/studio --watch notes.md` or choose **Preview file (follow changes)** from a local-link menu / **Preview (follow)** in Files. This opens a transient read-only companion tab with the preview pane focused; leaving pane focus reveals the same disk-following text as **Source** with a visible **Read-only · follows disk** badge rather than as an editable buffer. Studio polls the canonical file, debounces change bursts, compares SHA-256 content revisions, accepts ordinary and atomic-replacement saves, and never writes back. Each watcher socket is bound to the exact path in a bounded, expiring server-created tab capability; if that identity expires before a reload or reconnect, the tab stays read-only and asks you to open a fresh watched preview. A missing, unreadable, oversized, binary, or path-replaced source leaves the last good preview visible and automatically recovers when the same canonical file becomes readable again. Render failures likewise retain the last successfully staged document rather than replacing it with partial output. On successful updates, Studio restores a nearby stable content anchor where possible and falls back to the previous scroll ratio.
 
 ### Mermaid icons
 

package/ROADMAP.md

@@ -61,6 +61,14 @@ Builds on the resource-location foundation:
 - add **Cmd/Ctrl+Shift+S** for Save As and keep autosave opt-in rather than default;
 - carry the resulting disk identity and revision model forward into `StudioBufferStore`.
 
+## 0.9.55 — Watched-preview and control polish (shipped 2026-09-02)
+
+A browser-neutral UX pass before buffer-first work:
+
+- focus followed previews on their rendered pane and label the exposed source as read-only and disk-following;
+- normalize Studio buttons and dropdown controls across Chromium and WebKit without changing native select interaction;
+- expose X-high and Max side-question thinking only when supported by the active model, while retaining Low as the default.
+
 ## 0.10.0 — Buffer-first editing
 
 The first architectural `0.10` release should add:

package/client/studio-client.js

@@ -74,7 +74,9 @@
         : null;
       const referenceBadgeEl = document.getElementById("referenceBadge");
       const editorViewSelect = document.getElementById("editorViewSelect");
+      const editorViewSelectWrap = document.getElementById("editorViewSelectWrap");
       const rightViewSelect = document.getElementById("rightViewSelect");
+      const rightViewSelectWrap = document.getElementById("rightViewSelectWrap");
       const followSelect = document.getElementById("followSelect");
       const responseHighlightSelect = document.getElementById("responseHighlightSelect");
       const responseFontSizeSelect = document.getElementById("responseFontSizeSelect");
@@ -486,6 +488,7 @@
       const EDITOR_TAB_TEXT = "  ";
       const QUIZ_DEFAULT_COUNT = 5;
       const SIDE_QUESTION_THINKING_STORAGE_KEY = "piStudio.sideQuestionThinking";
+      const SIDE_QUESTION_THINKING_LEVELS = Object.freeze(["off", "minimal", "low", "medium", "high", "xhigh", "max"]);
       const SIDE_QUESTION_GATHER_STORAGE_KEY = "piStudio.sideQuestionGatherScope";
       const SIDE_QUESTION_TOOLS_STORAGE_KEY = "piStudio.sideQuestionTools";
       const SIDE_QUESTION_TRANSCRIPT_RENDER_MAX_CHARS = 400_000;
@@ -496,6 +499,7 @@
       const QUIZ_ANGLES = ["general", "scientist", "mathematician", "statistician", "developer", "reviewer"];
       const QUIZ_THINKING_LEVELS = ["off", "minimal", "low", "medium", "high"];
       let sideQuestionState = null;
+      let sideQuestionThinkingLevels = [...SIDE_QUESTION_THINKING_LEVELS];
       let sideQuestionWebSearchAvailable = false;
       let sideQuestionAvailablePiTools = [];
       let sideQuestionPreviewRenderNonce = 0;
@@ -524,11 +528,12 @@
         thinking: (() => {
           try {
             const value = window.localStorage && window.localStorage.getItem(SIDE_QUESTION_THINKING_STORAGE_KEY);
-            return ["off", "minimal", "low", "medium", "high"].includes(value) ? value : "low";
+            return SIDE_QUESTION_THINKING_LEVELS.includes(value) ? value : "low";
           } catch { return "low"; }
         })(),
         draft: "",
       };
+      let sideQuestionPreferredThinking = sideQuestionUi.thinking;
       let quizOverlayEl = null;
       let quizDialogEl = null;
       let quizPreviewRenderNonce = 0;
@@ -2914,9 +2919,28 @@
         }
         titleGroupEl.appendChild(makeStudioUiRefreshSeparator());
         if (isEditorOnlyMode) {
-          titleGroupEl.appendChild(makeStudioUiRefreshElement("span", "studio-refresh-static-title", "Editor (Raw)"));
+          const staticTitleEl = makeStudioUiRefreshElement(
+            "span",
+            "studio-refresh-static-title",
+            isWatchedFilePreview ? "Source" : "Editor (Raw)",
+          );
+          if (isWatchedFilePreview) {
+            staticTitleEl.classList.add("studio-watched-source-title");
+            staticTitleEl.setAttribute("aria-label", "Source, read-only. Follows the file on disk.");
+            staticTitleEl.title = "This source is read-only and follows the file on disk.";
+          }
+          titleGroupEl.appendChild(staticTitleEl);
+          if (isWatchedFilePreview) {
+            const readOnlyBadgeEl = makeStudioUiRefreshElement(
+              "span",
+              "studio-watched-source-read-only-badge",
+              "Read-only · follows disk",
+            );
+            readOnlyBadgeEl.setAttribute("aria-hidden", "true");
+            titleGroupEl.appendChild(readOnlyBadgeEl);
+          }
         } else if (editorViewSelect) {
-          titleGroupEl.appendChild(editorViewSelect);
+          titleGroupEl.appendChild(editorViewSelectWrap || editorViewSelect);
         }
         if (contextMenu) {
           titleGroupEl.appendChild(makeStudioUiRefreshSeparator());
@@ -2942,7 +2966,7 @@
             rightTitleGroupEl.appendChild(rightFocusBtn);
             rightTitleGroupEl.appendChild(makeStudioUiRefreshSeparator());
           }
-          rightTitleGroupEl.appendChild(rightViewSelect);
+          rightTitleGroupEl.appendChild(rightViewSelectWrap || rightViewSelect);
           rightIdentityEl.appendChild(rightTitleGroupEl);
           const rightToolsEl = makeStudioUiRefreshElement("div", "studio-refresh-pane-tools");
           if (watchedOpenEditableBtn && isWatchedFilePreview) rightToolsEl.appendChild(watchedOpenEditableBtn);
@@ -3615,6 +3639,9 @@
         if (typeof message.thinkingLevel === "string") {
           piThinkingLevel = message.thinkingLevel.trim();
         }
+        if (Array.isArray(message.sideQuestionThinkingLevels)) {
+          applySideQuestionThinkingLevels(message.sideQuestionThinkingLevels);
+        }
         renderFooterModelMenu();
       }
 
@@ -3649,8 +3676,8 @@
         });
         footerModelMenuEl.innerHTML = ""
           + "<div class='footer-model-menu-heading'>Pi model & thinking</div>"
-          + "<label class='footer-model-menu-field'><span>Pi model</span><select id='footerPiModelSelect'>" + modelOptionsHtml.join("") + "</select></label>"
-          + "<label class='footer-model-menu-field'><span>Thinking</span><select id='footerPiThinkingSelect'>" + thinkingOptionsHtml.join("") + "</select></label>"
+          + "<label class='footer-model-menu-field'><span>Pi model</span><span class='studio-menu-select-wrap'><select id='footerPiModelSelect'>" + modelOptionsHtml.join("") + "</select></span></label>"
+          + "<label class='footer-model-menu-field'><span>Thinking</span><span class='studio-menu-select-wrap'><select id='footerPiThinkingSelect'>" + thinkingOptionsHtml.join("") + "</select></span></label>"
           + "<div class='footer-model-menu-note'>Affects future Pi turns. Studio Suggest has its own model setting.</div>";
       }
 
@@ -3730,7 +3757,7 @@
         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>"
+            ? "<label class='footer-model-menu-field'><span>Active theme</span><span class='studio-menu-select-wrap'><select id='footerPiThemeSelect'>" + optionsHtml.join("") + "</select></span></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>";
       }
@@ -4359,7 +4386,9 @@
         ].forEach(([btn, pane]) => {
           if (!btn) return;
           const isFocusedPane = paneFocusTarget === pane;
-          const paneName = pane === "right" ? "response" : "editor";
+          const paneName = pane === "right"
+            ? (isWatchedFilePreview ? "watched preview" : "response")
+            : (isWatchedFilePreview ? "read-only source" : "editor");
           btn.classList.toggle("is-active", isFocusedPane);
           btn.setAttribute("aria-pressed", isFocusedPane ? "true" : "false");
           btn.textContent = isFocusedPane ? "Exit focus" : "Focus pane";
@@ -11616,10 +11645,10 @@
         return "<div class='repl-panel'>"
           + "<div class='repl-toolbar'>"
           + "<div class='repl-controls'>"
-          + "<label class='repl-control-label'>Runtime <select data-repl-runtime aria-label='REPL runtime'>" + runtimeOptions + "</select></label>"
+          + "<label class='repl-control-label'>Runtime <select class='studio-flat-select' data-repl-runtime aria-label='REPL runtime'>" + runtimeOptions + "</select></label>"
           + "<label class='repl-control-label repl-command-label'>Start cmd <input data-repl-command type='text' value='" + escapeHtml(replCommand) + "' placeholder='default' aria-label='REPL start command' title='Command used by Start for this runtime. Leave blank for the default; use this for envs, e.g. .venv/bin/python, uv run python, or conda run --no-capture-output -n env python.'></label>"
           + "<button class='repl-start-btn' type='button' data-repl-action='start'" + (replBusy || replTmuxAvailable === false ? " disabled" : "") + " title='Start or switch to a " + escapeHtml(runtimeLabel) + " session using the selected runtime and start command.'>Start</button>"
-          + "<label class='repl-control-label repl-session-label'>Session <select data-repl-session aria-label='REPL session'" + (visibleSessions.length ? "" : " disabled") + ">" + sessionOptions + "</select></label>"
+          + "<label class='repl-control-label repl-session-label'>Session <select class='studio-flat-select' data-repl-session aria-label='REPL session'" + (visibleSessions.length ? "" : " disabled") + ">" + sessionOptions + "</select></label>"
           + "<details class='repl-more-controls'>"
           + "<summary title='More REPL actions'>More</summary>"
           + "<div class='repl-more-menu'>"
@@ -11845,7 +11874,7 @@
         const options = getFileBrowserSortOptions().map((option) => {
           return "<option value='" + escapeHtml(option.value) + "'" + (option.value === currentSort ? " selected" : "") + ">" + escapeHtml(option.label) + "</option>";
         }).join("");
-        return "<select class='files-sort-select' data-files-sort aria-label='Files sort order' title='Sort file browser entries. Folders remain grouped first.'>" + options + "</select>";
+        return "<select class='files-sort-select studio-flat-select' data-files-sort aria-label='Files sort order' title='Sort file browser entries. Folders remain grouped first.'>" + options + "</select>";
       }
 
       function buildFileBrowserEntryRowHtml(entry) {
@@ -11900,7 +11929,7 @@
           const label = String((location && location.label) || basenameForStudioPath(path) || path);
           return "<option value='" + escapeHtml(path) + "'" + (path === rootDir ? " selected" : "") + ">" + escapeHtml(label + " — " + path) + "</option>";
         }).join("");
-        return "<select class='files-location-select' data-files-location aria-label='Allowed Files location' title='Choose a folder allowed for this Studio session on the computer running Pi.'>" + options + "</select>";
+        return "<select class='files-location-select studio-flat-select' data-files-location aria-label='Allowed Files location' title='Choose a folder allowed for this Studio session on the computer running Pi.'>" + options + "</select>";
       }
 
       function buildFileBrowserPanelHtml() {
@@ -12990,6 +13019,49 @@
         return values.map(([value, label]) => "<option value='" + escapeHtml(value) + "'" + (value === current ? " selected" : "") + ">" + escapeHtml(label) + "</option>").join("");
       }
 
+      function clampSideQuestionThinkingLevel(value, levels) {
+        const available = Array.isArray(levels) && levels.length ? levels : [...SIDE_QUESTION_THINKING_LEVELS];
+        if (available.includes(value)) return value;
+        const requestedIndex = SIDE_QUESTION_THINKING_LEVELS.indexOf(value);
+        if (requestedIndex < 0) return available.includes("low") ? "low" : available[0];
+        for (let index = requestedIndex; index < SIDE_QUESTION_THINKING_LEVELS.length; index += 1) {
+          const candidate = SIDE_QUESTION_THINKING_LEVELS[index];
+          if (available.includes(candidate)) return candidate;
+        }
+        for (let index = requestedIndex - 1; index >= 0; index -= 1) {
+          const candidate = SIDE_QUESTION_THINKING_LEVELS[index];
+          if (available.includes(candidate)) return candidate;
+        }
+        return "off";
+      }
+
+      function applySideQuestionThinkingLevels(value) {
+        const seen = new Set();
+        const normalized = (Array.isArray(value) ? value : []).filter((level) => {
+          if (typeof level !== "string" || !SIDE_QUESTION_THINKING_LEVELS.includes(level) || seen.has(level)) return false;
+          seen.add(level);
+          return true;
+        });
+        const next = normalized.length ? normalized : [...SIDE_QUESTION_THINKING_LEVELS];
+        const levelsChanged = next.length !== sideQuestionThinkingLevels.length
+          || next.some((level, index) => level !== sideQuestionThinkingLevels[index]);
+        sideQuestionThinkingLevels = next;
+        const nextThinking = clampSideQuestionThinkingLevel(sideQuestionPreferredThinking, next);
+        const thinkingChanged = nextThinking !== sideQuestionUi.thinking;
+        if (thinkingChanged) sideQuestionUi.thinking = nextThinking;
+        if ((levelsChanged || thinkingChanged) && rightView === "side-questions" && (!sideQuestionState || !sideQuestionState.threadId)) {
+          renderSideQuestionView();
+        }
+      }
+
+      function getSideQuestionThinkingOptions() {
+        return sideQuestionThinkingLevels.map((level) => {
+          if (level === "xhigh") return [level, "X-high (slower)"];
+          if (level === "max") return [level, "Max (slowest)"];
+          return [level, level.charAt(0).toUpperCase() + level.slice(1)];
+        });
+      }
+
       function renderSideQuestionPiToolPicker() {
         const selected = new Set(sideQuestionUi.toolIds);
         const selectedCount = sideQuestionUi.toolIds.length;
@@ -13026,15 +13098,15 @@
         return "<div class='side-question-empty'>"
           + "<div class='side-question-intro'><h2>Side question</h2><p>Ask something without adding it to the main Pi conversation. Choose the starting text and whether Studio may look through related files.</p></div>"
           + "<div class='side-question-context-grid'>"
-          + "<label>Starting text<select data-side-question-field='focusMode' aria-describedby='sideQuestionContextRule'>" + sideQuestionSelectOptions([
+          + "<label>Starting text<select class='studio-flat-select' data-side-question-field='focusMode' aria-describedby='sideQuestionContextRule'>" + sideQuestionSelectOptions([
             ["auto", "Automatic"], ["selection", "Editor selection only"], ["section", "Heading block or nearby text at cursor"], ["editor", "Whole editor document"], ["response", "Displayed response"], ["none", "No starting text"],
           ], sideQuestionUi.focusMode) + "</select></label>"
-          + "<label>Also use files from<select data-side-question-field='gatherScope'>" + sideQuestionSelectOptions([
+          + "<label>Also use files from<select class='studio-flat-select' data-side-question-field='gatherScope'>" + sideQuestionSelectOptions([
             ["none", "No other files"], ["folder", "Same folder as document"], ["repo", "Repository"], ["custom", "Choose a folder"],
           ], scope) + "</select></label>"
-          + "<label>Thinking<select data-side-question-field='thinking'>" + sideQuestionSelectOptions([
-            ["off", "Off"], ["minimal", "Minimal"], ["low", "Low"], ["medium", "Medium"], ["high", "High"],
-          ], sideQuestionUi.thinking) + "</select></label>"
+          + "<label>Thinking<select class='studio-flat-select' data-side-question-field='thinking'>" + sideQuestionSelectOptions(
+            getSideQuestionThinkingOptions(), sideQuestionUi.thinking
+          ) + "</select></label>"
           + "</div>"
           + "<details class='side-question-context-rule'><summary id='sideQuestionContextRule'>Automatic: selection → heading block at cursor → nearby text</summary><p>A heading block starts at the nearest Markdown/LaTeX heading above the cursor and ends before the next heading of the same or higher level. With no heading, Studio uses the surrounding text block or a nearby excerpt.</p></details>"
           + (scope === "none" ? "" : "<p class='side-question-context-access-note'>Related-file access is limited to folders allowed for this Studio session. Studio asks before starting if this folder is not already allowed.</p>")
@@ -13392,9 +13464,10 @@
           if (sideQuestionUi.gatherScope !== "repo") sideQuestionUi.gitContext = false;
           try { if (window.localStorage) window.localStorage.setItem(SIDE_QUESTION_GATHER_STORAGE_KEY, sideQuestionUi.gatherScope); } catch {}
         }
-        if (field === "thinking") {
+        if (field === "thinking" && sideQuestionThinkingLevels.includes(target.value)) {
+          sideQuestionPreferredThinking = target.value;
           sideQuestionUi.thinking = target.value;
-          try { if (window.localStorage) window.localStorage.setItem(SIDE_QUESTION_THINKING_STORAGE_KEY, sideQuestionUi.thinking); } catch {}
+          try { if (window.localStorage) window.localStorage.setItem(SIDE_QUESTION_THINKING_STORAGE_KEY, sideQuestionPreferredThinking); } catch {}
         }
         if (field === "includeConversation") sideQuestionUi.includeConversation = target.checked;
         if (field === "gitContext") sideQuestionUi.gitContext = target.checked && getSideQuestionGatherScope() === "repo";
@@ -16321,13 +16394,13 @@
         return "<div class='studio-quiz-setup'>"
           + "<p class='studio-quiz-copy'>A short active-recall loop: answer one question, check it, ask about the card if useful, then move on.</p>"
           + "<div class='studio-quiz-fields'>"
-          + "<label>Scope<select data-quiz-field='scope'>"
+          + "<label>Scope<select class='studio-flat-select' data-quiz-field='scope'>"
           + QUIZ_SCOPES.map((candidate) => candidate === "selection" && !hasSelection ? "" : renderQuizOption(candidate, scope, getQuizScopeLabel(candidate))).join("")
           + "</select></label>"
-          + "<label>Angle<select data-quiz-field='angle'>"
+          + "<label>Angle<select class='studio-flat-select' data-quiz-field='angle'>"
           + QUIZ_ANGLES.map((candidate) => renderQuizOption(candidate, angle, getQuizAngleLabel(candidate))).join("")
           + "</select></label>"
-          + "<label>Thinking<select data-quiz-field='thinking'>"
+          + "<label>Thinking<select class='studio-flat-select' data-quiz-field='thinking'>"
           + QUIZ_THINKING_LEVELS.map((candidate) => renderQuizOption(candidate, thinking, getQuizThinkingLabel(candidate))).join("")
           + "</select></label>"
           + "<label>Questions<input data-quiz-field='count' type='number' min='1' max='8' value='" + String(count) + "'></label>"
@@ -22490,6 +22563,7 @@
         }
 
         if (message.type === "side_question_state") {
+          if (Array.isArray(message.sideQuestionThinkingLevels)) applySideQuestionThinkingLevels(message.sideQuestionThinkingLevels);
           sideQuestionWebSearchAvailable = message.webSearchAvailable === true;
           if (Array.isArray(message.availablePiTools)) applySideQuestionToolCatalog(message.availablePiTools);
           const previousStatus = sideQuestionState && sideQuestionState.status;

package/client/studio.css

@@ -222,9 +222,30 @@
     }
 
     button {
+      -webkit-appearance: none;
+      appearance: none;
       cursor: pointer;
     }
 
+    .studio-flat-select {
+      -webkit-appearance: none;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23717a84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+      background-position: right 8px center !important;
+      background-repeat: no-repeat !important;
+      background-size: 10px 6px !important;
+      padding-right: 26px !important;
+    }
+
+    @media (forced-colors: active) {
+      .studio-flat-select {
+        -webkit-appearance: auto;
+        appearance: auto;
+        background-image: none !important;
+        padding-right: 10px !important;
+      }
+    }
+
     button:not(:disabled):hover,
     select:hover {
       background: var(--panel-2);
@@ -442,20 +463,52 @@
       color: var(--accent);
     }
 
+    .studio-header-select-wrap {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .studio-header-select-wrap::after {
+      content: "⌄";
+      position: absolute;
+      top: 50%;
+      right: 4px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1;
+      pointer-events: none;
+      transform: translateY(-58%);
+    }
+
+    .studio-header-select-wrap:hover::after,
+    .studio-header-select-wrap:focus-within::after {
+      color: var(--text);
+    }
+
     .section-header select {
       font-weight: 600;
       font-size: 14px;
       border: none;
       border-radius: 4px;
       background: inherit;
+      background-image: none;
       color: inherit;
       cursor: pointer;
-      padding: 2px 4px;
+      padding: 2px 18px 2px 4px;
       margin: 0;
-      -webkit-appearance: menulist;
-      appearance: menulist;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .section-header select:hover,
+    .section-header select:focus {
+      background-color: var(--studio-header-action-hover-bg, var(--panel-2));
     }
 
+    body[data-studio-mode="editor-only"] #editorViewSelectWrap,
     body[data-studio-mode="editor-only"] #editorViewSelect,
     body[data-studio-mode="editor-only"] #sendRunBtn,
     body[data-studio-mode="editor-only"] #queueSteerBtn,
@@ -464,7 +517,9 @@
     body[data-studio-mode="editor-only"] #critiqueBtn,
     body[data-studio-mode="editor-only"] #showMeBtn,
     body[data-studio-mode="editor-only"] #showMeResponseBtn,
+    body[data-studio-mode="editor-only"] #followSelectWrap,
     body[data-studio-mode="editor-only"] #followSelect,
+    body[data-studio-mode="editor-only"] #responseHighlightSelectWrap,
     body[data-studio-mode="editor-only"] #responseHighlightSelect,
     body[data-studio-mode="editor-only"] #pullLatestBtn,
     body[data-studio-mode="editor-only"] #historyPrevBtn,
@@ -496,6 +551,10 @@
       font-size: 14px;
     }
 
+    body[data-watched-file-preview="1"] #leftSectionHeader .section-header-main::before {
+      content: "Source (read-only)";
+    }
+
     body[data-watched-file-preview="1"] #rightSectionHeader .section-header-main::before {
       content: "Watched preview";
     }
@@ -3252,6 +3311,20 @@
       flex: 0 0 auto;
     }
 
+    #responseActions .response-option-select-wrap {
+      width: auto;
+      flex: 0 0 auto;
+    }
+
+    #responseActions .response-option-select-wrap select {
+      width: 100%;
+      min-width: 0;
+      padding-right: 26px;
+      -webkit-appearance: none;
+      appearance: none;
+      background-image: none;
+    }
+
     #critiqueView.git-changes-host {
       flex: 1 1 auto;
       min-height: 0;
@@ -4911,15 +4984,43 @@
       line-height: 1.35;
     }
 
+    .studio-menu-select-wrap {
+      position: relative;
+      display: flex;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .studio-menu-select-wrap::after {
+      content: "⌄";
+      position: absolute;
+      top: 50%;
+      right: 8px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1;
+      pointer-events: none;
+      transform: translateY(-58%);
+    }
+
+    .studio-menu-select-wrap:hover::after,
+    .studio-menu-select-wrap:focus-within::after {
+      color: var(--text);
+    }
+
     .footer-model-menu-field select {
       width: 100%;
       min-width: 0;
       background: var(--panel-2);
+      background-image: none;
       color: var(--text);
       border: 1px solid var(--control-border);
       border-radius: 8px;
-      padding: 5px 7px;
+      padding: 5px 24px 5px 7px;
       font: inherit;
+      -webkit-appearance: none;
+      appearance: none;
     }
 
     .footer-model-menu-note {
@@ -5667,6 +5768,10 @@
       font-size: 12px;
     }
 
+    body.studio-ui-refresh #responseActions .response-option-select-wrap select {
+      padding-right: 24px;
+    }
+
 
     body.studio-ui-refresh main {
       gap: 0;
@@ -5832,8 +5937,11 @@
     body.studio-ui-refresh #rightSectionHeader #rightViewSelect {
       font-size: 14px;
       font-weight: 700;
-      padding: 3px 5px;
+      padding: 3px 20px 3px 5px;
       max-width: 230px;
+      -webkit-appearance: none;
+      appearance: none;
+      background-image: none;
     }
 
     body.studio-ui-refresh .studio-refresh-static-title {
@@ -5845,6 +5953,34 @@
       white-space: nowrap;
     }
 
+    body.studio-ui-refresh .studio-watched-source-title {
+      padding-right: 1px;
+    }
+
+    body.studio-ui-refresh .studio-watched-source-read-only-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      min-height: 20px;
+      padding: 1px 4px;
+      border: 0;
+      background: transparent;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 11px;
+      font-weight: 500;
+      line-height: 1.2;
+      white-space: nowrap;
+    }
+
+    body.studio-ui-refresh .studio-watched-source-read-only-badge::before {
+      content: "";
+      width: 5px;
+      height: 5px;
+      border-radius: 999px;
+      background: currentColor;
+      opacity: 0.72;
+    }
+
     body.studio-ui-refresh #leftFocusBtn,
     body.studio-ui-refresh #rightFocusBtn {
       width: 29px;

package/index.ts

@@ -74,9 +74,11 @@ import {
 import {
 	buildStudioSideQuestionFollowUpPrompt,
 	buildStudioSideQuestionPrompt,
+	getStudioSideQuestionThinkingLevels,
 	normalizeStudioSideQuestionFocusKind,
 	normalizeStudioSideQuestionGatherScope,
 	normalizeStudioSideQuestionThinking,
+	resolveStudioSideQuestionThinking,
 	STUDIO_SIDE_QUESTION_FOCUS_MAX_CHARS,
 	STUDIO_SIDE_QUESTION_QUESTION_MAX_CHARS,
 } from "./shared/studio-side-question.js";
@@ -120,7 +122,7 @@ type StudioQuartoPreviewStatus = "idle" | "starting" | "running" | "stopping" |
 type StudioShowMeSourceKind = "selection" | "response" | "editor" | "context";
 type StudioSideQuestionFocusKind = "selection" | "section" | "editor" | "response" | "none";
 type StudioSideQuestionGatherScope = "none" | "folder" | "repo" | "custom";
-type StudioSideQuestionThinking = "off" | "minimal" | "low" | "medium" | "high";
+type StudioSideQuestionThinking = ModelThinkingLevel;
 type StudioSideQuestionStatus = "idle" | "running" | "error";
 
 interface StudioQuartoPreviewContext {
@@ -8105,7 +8107,10 @@ async function respondLocalPreviewLinkJson(
 		...basePayload,
 		converted,
 		resourceDir: documentResourceDir,
-		relativeUrl: buildStudioRelativeUrl(serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true }),
+		relativeUrl: buildStudioRelativeUrl(serverState.token, "editor-only", document, docId, {
+			skipWorkspaceRestore: true,
+			paneFocus: action === "watch-url" ? "right" : undefined,
+		}),
 	});
 }
 
@@ -11903,10 +11908,12 @@ ${cssVarsBlock}
     <section id="leftPane">
       <div id="leftSectionHeader" class="section-header">
         <div class="section-header-main">
-          <select id="editorViewSelect" aria-label="Editor view mode" title="Editor view mode. Shortcut: F7 when the editor pane is active; F6 switches panes.">
-            <option value="markdown" selected>Editor (Raw)</option>
-            <option value="preview">Editor (Preview)</option>
-          </select>
+          <span id="editorViewSelectWrap" class="studio-header-select-wrap">
+            <select id="editorViewSelect" aria-label="Editor view mode" title="Editor view mode. Shortcut: F7 when the editor pane is active; F6 switches panes.">
+              <option value="markdown" selected>Editor (Raw)</option>
+              <option value="preview">Editor (Preview)</option>
+            </select>
+          </span>
         </div>
         <div class="section-header-actions">
           <button id="leftFocusBtn" class="pane-focus-btn" type="button" title="Show only the editor pane. Shortcut: F10 or Cmd/Ctrl+Esc.">Focus pane</button>
@@ -11934,7 +11941,7 @@ ${cssVarsBlock}
             </div>
             <div class="source-actions-row repl-action-line" hidden>
               <button id="sendReplBtn" type="button" hidden title="Send the current selection, or the full editor text, to the active REPL session shown in the right pane.">Send to REPL</button>
-              <select id="replSendModeSelect" hidden aria-label="REPL send mode" title="Choose how Send to REPL interprets the editor text.">
+              <select id="replSendModeSelect" class="studio-flat-select" hidden aria-label="REPL send mode" title="Choose how Send to REPL interprets the editor text.">
                 <option value="raw" selected>Send mode: Raw</option>
                 <option value="literate">Send mode: Literate</option>
               </select>
@@ -11943,11 +11950,11 @@ ${cssVarsBlock}
               <button id="copyDraftBtn" type="button" title="Copy the current editor text to the clipboard.">Copy</button>
               <button id="suggestCompletionBtn" type="button" title="Ask the current model for a short completion at the editor cursor. Shortcut: Option/Alt+Tab where available, or Cmd/Ctrl+Shift+Space from the editor.">Suggest</button>
               <button id="suggestCompletionOptionsBtn" type="button" hidden title="Suggestion context options">▾</button>
-              <select id="completionContextSelect" hidden aria-label="Suggestion context mode" title="Choose how much context Suggest includes.">
+              <select id="completionContextSelect" class="studio-flat-select" hidden aria-label="Suggestion context mode" title="Choose how much context Suggest includes.">
                 <option value="cursor" selected>Context: editor only</option>
                 <option value="session">Context: editor + latest response</option>
               </select>
-              <select id="completionModelSelect" hidden aria-label="Suggestion model" title="Choose the model used for Suggest. Suggestions use direct completion with thinking off and do not change the main Pi model.">
+              <select id="completionModelSelect" class="studio-flat-select" hidden aria-label="Suggestion model" title="Choose the model used for Suggest. Suggestions use direct completion with thinking off and do not change the main Pi model.">
                 <option value="current" selected>Suggestion model: current Pi model</option>
               </select>
               <button id="openCompanionBtn" type="button" title="Open a blank editor-only Studio tab.">New editor tab</button>
@@ -11955,7 +11962,7 @@ ${cssVarsBlock}
             </div>
             <div class="source-actions-row">
               <button id="insertHeaderBtn" type="button" title="Insert annotated-reply protocol header (source metadata, [an: ...] syntax hint, precedence note, and end marker).">Annotation header</button>
-              <select id="annotationModeSelect" aria-label="Inline annotation visibility mode" title="On: keep and send [an: ...] markers. Hide: keep markers in the editor, hide them in preview, and strip before Run/Critique.">
+              <select id="annotationModeSelect" class="studio-flat-select" aria-label="Inline annotation visibility mode" title="On: keep and send [an: ...] markers. Hide: keep markers in the editor, hide them in preview, and strip before Run/Critique.">
                 <option value="on" selected>Inline annotations: On</option>
                 <option value="off">Inline annotations: Hide</option>
               </select>
@@ -11963,7 +11970,7 @@ ${cssVarsBlock}
               <button id="saveAnnotatedBtn" type="button" title="Save full editor content (including [an: ...] markers) as a .annotated.md file.">Save .annotated.md</button>
             </div>
             <div class="source-actions-row">
-              <select id="lensSelect" aria-label="Critique focus">
+              <select id="lensSelect" class="studio-flat-select" aria-label="Critique focus">
                 <option value="auto" selected>Critique: Auto</option>
                 <option value="writing">Critique: Writing</option>
                 <option value="code">Critique: Code</option>
@@ -11973,7 +11980,7 @@ ${cssVarsBlock}
               <button id="showMeResponseBtn" type="button" hidden title="Explain the response displayed in the right pane using the smallest useful visual or structural representation.">Explain displayed response</button>
               <button id="askAsideBtn" type="button" title="Open a separate side-question thread without adding it to the main Pi conversation.">Side question</button>
               <button id="quizBtn" type="button" title="Open an active quiz for the current editor selection or document.">Quiz me</button>
-              <select id="highlightSelect" aria-label="Editor syntax highlighting">
+              <select id="highlightSelect" class="studio-flat-select" aria-label="Editor syntax highlighting">
                 <option value="off">Syntax highlight: Off</option>
                 <option value="bash">Syntax highlight: Bash</option>
                 <option value="c">Syntax highlight: C</option>
@@ -12003,11 +12010,11 @@ ${cssVarsBlock}
                 <option value="xml">Syntax highlight: XML</option>
                 <option value="yaml">Syntax highlight: YAML</option>
               </select>
-              <select id="lineNumbersSelect" aria-label="Editor line numbers">
+              <select id="lineNumbersSelect" class="studio-flat-select" aria-label="Editor line numbers">
                 <option value="off">Line numbers: Off</option>
                 <option value="on" selected>Line numbers: On</option>
               </select>
-              <select id="editorFontSizeSelect" aria-label="Editor text size" title="Adjust raw editor text size.">
+              <select id="editorFontSizeSelect" class="studio-flat-select" aria-label="Editor text size" title="Adjust raw editor text size.">
                 <option value="10">Editor text: 10px</option>
                 <option value="11">Editor text: 11px</option>
                 <option value="12" selected>Editor text: 12px</option>
@@ -12105,17 +12112,19 @@ ${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+1–8 switches directly between all right-pane views. Cmd/Ctrl+Alt+P/E/W/F/Q keep mnemonic shortcuts for Preview, Editor Preview, Working, Files, and Side questions.">
-            <option value="markdown">Response (Raw)</option>
-            <option value="preview" selected>Response (Preview)</option>
-            <option value="editor-preview">Editor (Preview)</option>
-            <option value="editor-quarto-preview" hidden>Editor (Quarto Preview)</option>
-            <option value="trace">Working</option>
-            <option value="changes">Changes</option>
-            <option value="files">Files</option>
-            <option value="repl">REPL</option>
-            <option value="side-questions">Side questions</option>
-          </select>
+          <span id="rightViewSelectWrap" class="studio-header-select-wrap">
+            <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–8 switches directly between all right-pane views. Cmd/Ctrl+Alt+P/E/W/F/Q keep mnemonic shortcuts for Preview, Editor Preview, Working, Files, and Side questions.">
+              <option value="markdown">Response (Raw)</option>
+              <option value="preview" selected>Response (Preview)</option>
+              <option value="editor-preview">Editor (Preview)</option>
+              <option value="editor-quarto-preview" hidden>Editor (Quarto Preview)</option>
+              <option value="trace">Working</option>
+              <option value="changes">Changes</option>
+              <option value="files">Files</option>
+              <option value="repl">REPL</option>
+              <option value="side-questions">Side questions</option>
+            </select>
+          </span>
         </div>
         <div class="section-header-actions">
           <button id="rightFocusBtn" class="pane-focus-btn" type="button" title="Show only the response pane. Shortcut: F10 or Cmd/Ctrl+Esc.">Focus pane</button>
@@ -12142,28 +12151,34 @@ ${cssVarsBlock}
       <div class="response-wrap">
         <div id="responseActions" class="response-actions">
           <div class="response-actions-row response-options-row">
-            <select id="followSelect" aria-label="Auto-update response">
-              <option value="on" selected>Auto-update response: On</option>
-              <option value="off">Auto-update response: Off</option>
-            </select>
-            <select id="responseHighlightSelect" aria-label="Response markdown highlighting">
-              <option value="off">Syntax highlight: Off</option>
-              <option value="on" selected>Syntax highlight: On</option>
-            </select>
-            <select id="responseFontSizeSelect" aria-label="Response text size" title="Adjust right-pane response, preview, and working text size.">
-              <option value="11">Response text: 11px</option>
-              <option value="12">Response text: 12px</option>
-              <option value="12.5">Response text: 12.5px</option>
-              <option value="13">Response text: 13px</option>
-              <option value="13.5" selected>Response text: 13.5px</option>
-              <option value="14">Response text: 14px</option>
-              <option value="14.5">Response text: 14.5px</option>
-              <option value="15">Response text: 15px</option>
-              <option value="15.5">Response text: 15.5px</option>
-              <option value="16">Response text: 16px</option>
-              <option value="18">Response text: 18px</option>
-              <option value="20">Response text: 20px</option>
-            </select>
+            <span id="followSelectWrap" class="studio-menu-select-wrap response-option-select-wrap">
+              <select id="followSelect" aria-label="Auto-update response">
+                <option value="on" selected>Auto-update response: On</option>
+                <option value="off">Auto-update response: Off</option>
+              </select>
+            </span>
+            <span id="responseHighlightSelectWrap" class="studio-menu-select-wrap response-option-select-wrap">
+              <select id="responseHighlightSelect" aria-label="Response markdown highlighting">
+                <option value="off">Syntax highlight: Off</option>
+                <option value="on" selected>Syntax highlight: On</option>
+              </select>
+            </span>
+            <span id="responseFontSizeSelectWrap" class="studio-menu-select-wrap response-option-select-wrap">
+              <select id="responseFontSizeSelect" aria-label="Response text size" title="Adjust right-pane response, preview, and working text size.">
+                <option value="11">Response text: 11px</option>
+                <option value="12">Response text: 12px</option>
+                <option value="12.5">Response text: 12.5px</option>
+                <option value="13">Response text: 13px</option>
+                <option value="13.5" selected>Response text: 13.5px</option>
+                <option value="14">Response text: 14px</option>
+                <option value="14.5">Response text: 14.5px</option>
+                <option value="15">Response text: 15px</option>
+                <option value="15.5">Response text: 15.5px</option>
+                <option value="16">Response text: 16px</option>
+                <option value="18">Response text: 18px</option>
+                <option value="20">Response text: 20px</option>
+              </select>
+            </span>
           </div>
           <div class="response-actions-row history-row">
             <button id="pullLatestBtn" type="button" title="Fetch the latest assistant response when auto-update is off.">Fetch latest response</button>
@@ -13692,6 +13707,9 @@ export default function (pi: ExtensionAPI) {
 		}
 		: null;
 
+	const getCurrentStudioSideQuestionThinkingLevels = (): StudioSideQuestionThinking[] =>
+		getStudioSideQuestionThinkingLevels(latestModelRequestCtx?.model ?? lastCommandCtx?.model) as StudioSideQuestionThinking[];
+
 	const getStudioThemeOptions = () => {
 		try {
 			const themes = lastCommandCtx?.ui?.getAllThemes?.() ?? [];
@@ -13727,6 +13745,7 @@ export default function (pi: ExtensionAPI) {
 			modelLabel: currentModelLabel,
 			currentModel: getCurrentStudioModelDescriptor(),
 			thinkingLevel: getThinkingLevelSafe() ?? "off",
+			sideQuestionThinkingLevels: getCurrentStudioSideQuestionThinkingLevels(),
 			piModels: modelOptions,
 			suggestionModels: modelOptions,
 			currentTheme: getCurrentStudioThemeDescriptor(),
@@ -14033,6 +14052,7 @@ export default function (pi: ExtensionAPI) {
 		const payload: Record<string, unknown> = {
 			type: "side_question_state",
 			state: getStudioSideQuestionPublicState(),
+			sideQuestionThinkingLevels: getCurrentStudioSideQuestionThinkingLevels(),
 			webSearchAvailable: Boolean(String(process.env.BRAVE_API_KEY || "").trim()),
 		};
 		if (client) payload.availablePiTools = getPublicStudioSideQuestionToolCatalog();
@@ -14254,6 +14274,7 @@ export default function (pi: ExtensionAPI) {
 		const model = latestModelRequestCtx?.model ?? ctx.model;
 		if (!model) throw new Error("No active Pi model is available for side questions.");
 		await resolveStudioModelRequestAuth({ model, modelRegistry: ctx.modelRegistry }, model);
+		const thinking = resolveStudioSideQuestionThinking(model, context.thinking) as StudioSideQuestionThinking;
 		const gitSnapshot = context.gitContext
 			? await captureStudioSideQuestionGitSnapshot(contextRoot, { runGit: runStudioSideQuestionGitCommand }) as StudioSideQuestionGitSnapshot
 			: null;
@@ -14292,7 +14313,7 @@ export default function (pi: ExtensionAPI) {
 				customTools: tools,
 				sessionManager: sideSessionManager,
 				model,
-				thinking: context.thinking,
+				thinking,
 				inheritedPrompt: stripStudioDynamicSystemPromptFooter(ctx.getSystemPrompt()),
 			});
 			session = agentRuntime.session;
@@ -14301,7 +14322,7 @@ export default function (pi: ExtensionAPI) {
 				cwd: workingDirectory,
 				sessionManager: sideSessionManager,
 				model,
-				thinkingLevel: context.thinking,
+				thinkingLevel: thinking,
 				tools: activeToolNames,
 				customTools: tools,
 				resourceLoader: createStudioSideQuestionResourceLoader(ctx),
@@ -14334,7 +14355,7 @@ export default function (pi: ExtensionAPI) {
 				tools: selectedPiTools,
 			},
 			modelLabel: formatStudioModelOptionLabel(model),
-			thinking: context.thinking,
+			thinking,
 			messages: [],
 			activity: [],
 			error: context.webSearch && !webAvailable ? "Web search was requested but BRAVE_API_KEY is not configured; this thread will use local context only." : "",
@@ -14638,6 +14659,7 @@ export default function (pi: ExtensionAPI) {
 				modelLabel: currentModelLabel,
 				currentModel: getCurrentStudioModelDescriptor(),
 				thinkingLevel: getThinkingLevelSafe() ?? "off",
+				sideQuestionThinkingLevels: getCurrentStudioSideQuestionThinkingLevels(),
 				piModels: getStudioModelOptions(),
 				suggestionModels: getStudioModelOptions(),
 				currentTheme: getCurrentStudioThemeDescriptor(),

package/package.json

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

package/shared/studio-side-question.js

@@ -1,5 +1,16 @@
+import { clampThinkingLevel, getSupportedThinkingLevels } from "@earendil-works/pi-ai";
+
 export const STUDIO_SIDE_QUESTION_FOCUS_MAX_CHARS = 60_000;
 export const STUDIO_SIDE_QUESTION_QUESTION_MAX_CHARS = 12_000;
+export const STUDIO_SIDE_QUESTION_THINKING_LEVELS = Object.freeze([
+	"off",
+	"minimal",
+	"low",
+	"medium",
+	"high",
+	"xhigh",
+	"max",
+]);
 
 export function normalizeStudioSideQuestionFocusKind(value) {
 	const normalized = String(value ?? "").trim().toLowerCase();
@@ -20,10 +31,28 @@ export function normalizeStudioSideQuestionGatherScope(value) {
 
 export function normalizeStudioSideQuestionThinking(value) {
 	const normalized = String(value ?? "").trim().toLowerCase();
-	if (normalized === "off" || normalized === "minimal" || normalized === "low" || normalized === "medium" || normalized === "high") {
-		return normalized;
+	return STUDIO_SIDE_QUESTION_THINKING_LEVELS.includes(normalized) ? normalized : "low";
+}
+
+export function getStudioSideQuestionThinkingLevels(model) {
+	if (!model) return [...STUDIO_SIDE_QUESTION_THINKING_LEVELS];
+	try {
+		const supported = getSupportedThinkingLevels(model)
+			.filter((level) => STUDIO_SIDE_QUESTION_THINKING_LEVELS.includes(level));
+		return supported.length > 0 ? supported : ["off"];
+	} catch {
+		return [...STUDIO_SIDE_QUESTION_THINKING_LEVELS];
+	}
+}
+
+export function resolveStudioSideQuestionThinking(model, value) {
+	const requested = normalizeStudioSideQuestionThinking(value);
+	if (!model) return requested;
+	try {
+		return clampThinkingLevel(model, requested);
+	} catch {
+		return requested;
 	}
-	return "low";
 }
 
 function sanitizePromptContent(value) {