pi-studio 0.5.43 → 0.5.44

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.44] — 2026-04-03
+
+### Changed
+- Studio browser tabs now show live browser-side activity state during Studio-owned work, including prefixes like `Running…`, `Responding…`, `Critiquing…`, or `Compacting…`, instead of only changing on completion.
+- Studio favicons now use a clearer browser-side status badge: ready/completed states use a green circular badge, while active running states use an amber hollow ring so busy vs finished is easier to distinguish at a glance without relying on animation.
+- Studio raw editor now has an optional line-number gutter, intended as a lightweight navigation aid when working in **Editor (Raw)** before switching back to preview.
+- Studio editor controls now use a single combined **Syntax highlight** selector with `Off` plus all supported languages, replacing the separate highlight on/off and language selectors.
+
 ## [0.5.43] — 2026-04-01
 
 ### Changed

package/client/studio-client.js

@@ -4,6 +4,12 @@
       const statusSpinnerEl = document.getElementById("statusSpinner");
       const footerMetaEl = document.getElementById("footerMeta");
       const footerMetaTextEl = document.getElementById("footerMetaText");
+      let faviconLinkEl = document.querySelector('link[rel="icon"], link[rel="shortcut icon"]');
+      if (!faviconLinkEl) {
+        faviconLinkEl = document.createElement("link");
+        faviconLinkEl.rel = "icon";
+        document.head.appendChild(faviconLinkEl);
+      }
       const BRAILLE_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
       let spinnerTimer = null;
       let spinnerFrameIndex = 0;
@@ -41,6 +47,9 @@
       const sourceEditorWrapEl = document.getElementById("sourceEditorWrap");
       const sourceTextEl = document.getElementById("sourceText");
       const sourceHighlightEl = document.getElementById("sourceHighlight");
+      const lineNumberGutterEl = document.getElementById("lineNumberGutter");
+      const lineNumberGutterContentEl = document.getElementById("lineNumberGutterContent");
+      const lineNumberMeasureEl = document.getElementById("lineNumberMeasure");
       const sourcePreviewEl = document.getElementById("sourcePreview");
       const leftPaneEl = document.getElementById("leftPane");
       const rightPaneEl = document.getElementById("rightPane");
@@ -84,7 +93,7 @@
       const saveAnnotatedBtn = document.getElementById("saveAnnotatedBtn");
       const stripAnnotationsBtn = document.getElementById("stripAnnotationsBtn");
       const highlightSelect = document.getElementById("highlightSelect");
-      const langSelect = document.getElementById("langSelect");
+      const lineNumbersSelect = document.getElementById("lineNumbersSelect");
       const annotationModeSelect = document.getElementById("annotationModeSelect");
       const compactBtn = document.getElementById("compactBtn");
       const leftFocusBtn = document.getElementById("leftFocusBtn");
@@ -158,6 +167,7 @@
       let titleAttentionMessage = "";
       let titleAttentionRequestId = null;
       let titleAttentionRequestKind = null;
+      let lastRenderedFaviconHref = "";
 
       function parseFiniteNumber(value) {
         if (value == null || value === "") return null;
@@ -203,6 +213,7 @@
       const EDITOR_HIGHLIGHT_MAX_CHARS = 100_000;
       const EDITOR_HIGHLIGHT_STORAGE_KEY = "piStudio.editorHighlightEnabled";
       const EDITOR_LANGUAGE_STORAGE_KEY = "piStudio.editorLanguage";
+      const EDITOR_LINE_NUMBERS_STORAGE_KEY = "piStudio.editorLineNumbersEnabled";
       // Single source of truth: language -> file extensions (and display label)
       var LANG_EXT_MAP = {
         markdown:   { label: "Markdown",   exts: ["md", "markdown", "mdx", "qmd"] },
@@ -258,6 +269,8 @@
       let editorLanguage = "markdown";
       let responseHighlightEnabled = false;
       let editorHighlightRenderRaf = null;
+      let lineNumbersEnabled = false;
+      let lineNumbersRenderRaf = null;
       let annotationsEnabled = true;
       let scratchpadText = "";
       let scratchpadReturnFocusEl = null;
@@ -664,14 +677,136 @@
         updateDocumentTitle();
       }
 
+      function truncateTitleSegment(text, maxLength) {
+        const normalized = normalizeActivityLabel(text);
+        if (!normalized) return "";
+        if (!Number.isFinite(maxLength) || maxLength <= 1 || normalized.length <= maxLength) {
+          return normalized;
+        }
+        return normalized.slice(0, maxLength - 1).trimEnd() + "…";
+      }
+
+      function readThemeColor(variableName, fallback) {
+        try {
+          const value = window.getComputedStyle(document.documentElement).getPropertyValue(variableName);
+          const trimmed = typeof value === "string" ? value.trim() : "";
+          return trimmed || fallback;
+        } catch {
+          return fallback;
+        }
+      }
+
+      function getTitleActionMessage(kind) {
+        if (kind === "annotation") return "Replying…";
+        if (kind === "critique") return "Critiquing…";
+        if (kind === "direct") return "Running…";
+        if (kind === "compact") return "Compacting…";
+        if (kind === "send_to_editor") return "Sending to editor…";
+        if (kind === "get_from_editor") return "Loading from editor…";
+        if (kind === "load_git_diff") return "Loading git diff…";
+        if (kind === "refresh_from_disk") return "Refreshing from disk…";
+        if (kind === "save_as" || kind === "save_over") return "Saving…";
+        return "Working…";
+      }
+
+      function getTitleBusyMessage() {
+        const activeKind = pendingKind || (agentBusyFromServer ? stickyStudioKind : null);
+        const hasStudioOwnedBusyState = uiBusy
+          || Boolean(pendingRequestId)
+          || Boolean(pendingKind)
+          || compactInProgress
+          || Boolean(agentBusyFromServer && stickyStudioKind)
+          || Boolean(agentBusyFromServer && studioRunChainActive);
+
+        if (!hasStudioOwnedBusyState) return "";
+
+        if (
+          pendingKind === "compact"
+          || compactInProgress
+          || (agentBusyFromServer && stickyStudioKind === "compact")
+        ) {
+          return "Compacting…";
+        }
+
+        if (terminalActivityPhase === "tool") {
+          if (terminalActivityLabel && !isGenericToolLabel(terminalActivityLabel)) {
+            return truncateTitleSegment(withEllipsis(terminalActivityLabel), 34);
+          }
+          if (activeKind) return getTitleActionMessage(activeKind);
+          if (agentBusyFromServer && studioRunChainActive) return "Running…";
+          return "Working…";
+        }
+
+        if (terminalActivityPhase === "responding") {
+          if (activeKind === "critique") return "Critiquing…";
+          if (activeKind === "annotation") return "Replying…";
+          return "Responding…";
+        }
+
+        if (activeKind) return getTitleActionMessage(activeKind);
+        if (uiBusy || (agentBusyFromServer && studioRunChainActive)) return "Running…";
+        return "";
+      }
+
+      function getDynamicTitlePrefix() {
+        if (titleAttentionMessage) return titleAttentionMessage;
+        if (wsState === "Connecting") return reconnectAttempt > 0 ? "Reconnecting…" : "Connecting…";
+        if (wsState === "Disconnected") return "Disconnected";
+        return getTitleBusyMessage();
+      }
+
+      function buildStudioFaviconHref() {
+        const fg = readThemeColor("--text", "#111111");
+        const bg = readThemeColor("--bg", "#ffffff");
+        const accent = readThemeColor("--accent", fg);
+        const ok = readThemeColor("--ok", "#16a34a");
+        const warn = readThemeColor("--warn", accent);
+        const error = readThemeColor("--error", "#dc2626");
+
+        let badgeSvg = "";
+
+        if (titleAttentionMessage) {
+          badgeSvg = `<circle cx="50" cy="14" r="9" fill="${ok}" stroke="${bg}" stroke-width="4" />`;
+        } else if (wsState === "Disconnected") {
+          badgeSvg = `<circle cx="50" cy="14" r="9" fill="${error}" stroke="${bg}" stroke-width="4" />`;
+        } else if (wsState === "Connecting") {
+          badgeSvg = `<circle cx="50" cy="14" r="9" fill="${accent}" stroke="${bg}" stroke-width="4" />`;
+        } else if (getTitleBusyMessage()) {
+          badgeSvg = `<circle cx="50" cy="14" r="10" fill="none" stroke="${warn}" stroke-width="5" />`;
+        }
+
+        const svg = [
+          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">',
+          `<text x="32" y="35" text-anchor="middle" dominant-baseline="middle" font-size="50" font-weight="700" font-family="ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" fill="${fg}">π</text>`,
+          badgeSvg,
+          "</svg>",
+        ].join("");
+        return "data:image/svg+xml," + encodeURIComponent(svg);
+      }
+
       function updateDocumentTitle() {
         const modelText = modelLabel && modelLabel.trim() ? modelLabel.trim() : "none";
         const terminalText = terminalSessionLabel && terminalSessionLabel.trim() ? terminalSessionLabel.trim() : "unknown";
         const titleParts = ["pi Studio"];
         if (terminalText && terminalText !== "unknown") titleParts.push(terminalText);
         if (modelText && modelText !== "none") titleParts.push(modelText);
-        if (titleAttentionMessage) titleParts.unshift(titleAttentionMessage);
-        document.title = titleParts.join(" · ");
+
+        const titlePrefix = getDynamicTitlePrefix();
+        if (titlePrefix) titleParts.unshift(titlePrefix);
+
+        const nextTitle = titleParts.join(" · ");
+        if (document.title !== nextTitle) {
+          document.title = nextTitle;
+        }
+
+        if (faviconLinkEl) {
+          const nextFaviconHref = buildStudioFaviconHref();
+          if (nextFaviconHref !== lastRenderedFaviconHref) {
+            faviconLinkEl.href = nextFaviconHref;
+            faviconLinkEl.type = "image/svg+xml";
+            lastRenderedFaviconHref = nextFaviconHref;
+          }
+        }
       }
 
       function updateFooterMeta() {
@@ -705,7 +840,7 @@
       function startFooterSpinner() {
         if (spinnerTimer) return;
         spinnerTimer = window.setInterval(() => {
-          spinnerFrameIndex = (spinnerFrameIndex + 1) % BRAILLE_SPINNER_FRAMES.length;
+          spinnerFrameIndex += 1;
           renderStatus();
         }, 80);
       }
@@ -2410,6 +2545,9 @@
         if (editorHighlightEnabled && editorView === "markdown") {
           scheduleEditorHighlightRender();
         }
+        if (lineNumbersEnabled && editorView === "markdown") {
+          scheduleEditorLineNumberRender();
+        }
         if (rightView === "editor-preview") {
           scheduleResponseEditorPreviewRender(previewDelayMs);
         }
@@ -2643,7 +2781,7 @@
         syncRunAndCritiqueButtons();
         copyDraftBtn.disabled = uiBusy;
         if (highlightSelect) highlightSelect.disabled = uiBusy;
-        if (langSelect) langSelect.disabled = uiBusy;
+        if (lineNumbersSelect) lineNumbersSelect.disabled = uiBusy;
         if (annotationModeSelect) annotationModeSelect.disabled = uiBusy;
         if (saveAnnotatedBtn) saveAnnotatedBtn.disabled = uiBusy;
         if (stripAnnotationsBtn) stripAnnotationsBtn.disabled = uiBusy || !hasAnnotationMarkers(sourceTextEl.value);
@@ -2710,6 +2848,9 @@
         schedule(() => {
           syncEditorHighlightScroll();
         });
+        if (lineNumbersEnabled && editorView === "markdown") {
+          scheduleEditorLineNumberRender();
+        }
 
         updateAnnotatedReplyHeaderButton();
 
@@ -2745,7 +2886,11 @@
         }
 
         updateEditorHighlightState();
-        updateLangSelectVisibility();
+        syncHighlightSelectUi();
+        updateLineNumberGutterVisibility();
+        if (!showPreview && lineNumbersEnabled) {
+          scheduleEditorLineNumberRender();
+        }
       }
 
       function setRightView(nextView) {
@@ -2765,6 +2910,115 @@
         syncActionButtons();
       }
 
+      function lineNumbersShouldBeVisible() {
+        return Boolean(
+          lineNumbersEnabled
+          && editorView === "markdown"
+          && sourceEditorWrapEl
+          && lineNumberGutterEl
+          && lineNumberGutterContentEl
+          && lineNumberMeasureEl,
+        );
+      }
+
+      function getEditorLineNumberGutterWidthCss(lineCount) {
+        const digits = Math.max(2, String(Math.max(1, lineCount || 0)).length);
+        return "calc(" + digits + "ch + 18px)";
+      }
+
+      function updateLineNumberGutterVisibility() {
+        const visible = lineNumbersShouldBeVisible();
+        if (sourceEditorWrapEl) {
+          sourceEditorWrapEl.classList.toggle("line-numbers-enabled", visible);
+          if (!visible) {
+            sourceEditorWrapEl.style.setProperty("--editor-line-number-gutter-width", "0px");
+          }
+        }
+        if (lineNumberGutterEl) {
+          lineNumberGutterEl.hidden = !visible;
+        }
+        if (!visible) {
+          if (lineNumberGutterContentEl) lineNumberGutterContentEl.innerHTML = "";
+          if (lineNumberMeasureEl) lineNumberMeasureEl.innerHTML = "";
+        }
+        return visible;
+      }
+
+      function renderEditorLineNumbersNow() {
+        if (!updateLineNumberGutterVisibility()) return;
+
+        const text = String(sourceTextEl.value || "").replace(/\r\n/g, "\n");
+        const lines = text.split("\n");
+        const lineCount = Math.max(1, lines.length);
+        sourceEditorWrapEl.style.setProperty("--editor-line-number-gutter-width", getEditorLineNumberGutterWidthCss(lineCount));
+
+        const styles = window.getComputedStyle(sourceTextEl);
+        const lineHeightPx = parseFloat(styles.lineHeight) || 18.85;
+        const paddingTop = parseFloat(styles.paddingTop) || 0;
+        const paddingRight = parseFloat(styles.paddingRight) || 0;
+        const paddingBottom = parseFloat(styles.paddingBottom) || 0;
+        const paddingLeft = parseFloat(styles.paddingLeft) || 0;
+        const contentWidth = Math.max(1, sourceTextEl.clientWidth - paddingLeft - paddingRight);
+
+        lineNumberGutterContentEl.style.paddingTop = paddingTop + "px";
+        lineNumberGutterContentEl.style.paddingBottom = paddingBottom + "px";
+        lineNumberMeasureEl.style.width = contentWidth + "px";
+        lineNumberMeasureEl.innerHTML = lines
+          .map((line) => "<div class='editor-line-number-measure-line'>" + (line.length ? escapeHtml(line) : "&#8203;") + "</div>")
+          .join("");
+
+        const measureLines = Array.from(lineNumberMeasureEl.children);
+        lineNumberGutterContentEl.innerHTML = measureLines
+          .map((lineEl, index) => {
+            const height = Math.max(lineHeightPx, lineEl.getBoundingClientRect().height || 0);
+            return "<div class='editor-line-number-row' style='height:" + height.toFixed(2) + "px'>" + (index + 1) + "</div>";
+          })
+          .join("");
+
+        syncEditorHighlightScroll();
+      }
+
+      function scheduleEditorLineNumberRender() {
+        if (lineNumbersRenderRaf !== null) {
+          if (typeof window.cancelAnimationFrame === "function") {
+            window.cancelAnimationFrame(lineNumbersRenderRaf);
+          } else {
+            window.clearTimeout(lineNumbersRenderRaf);
+          }
+          lineNumbersRenderRaf = null;
+        }
+
+        const schedule = typeof window.requestAnimationFrame === "function"
+          ? window.requestAnimationFrame.bind(window)
+          : (cb) => window.setTimeout(cb, 16);
+
+        lineNumbersRenderRaf = schedule(() => {
+          lineNumbersRenderRaf = null;
+          renderEditorLineNumbersNow();
+        });
+      }
+
+      function readStoredEditorLineNumbersEnabled() {
+        return readStoredToggle(EDITOR_LINE_NUMBERS_STORAGE_KEY);
+      }
+
+      function persistEditorLineNumbersEnabled(enabled) {
+        persistStoredToggle(EDITOR_LINE_NUMBERS_STORAGE_KEY, enabled);
+      }
+
+      function setLineNumbersEnabled(enabled) {
+        lineNumbersEnabled = Boolean(enabled);
+        persistEditorLineNumbersEnabled(lineNumbersEnabled);
+        if (lineNumbersSelect) {
+          lineNumbersSelect.value = lineNumbersEnabled ? "on" : "off";
+        }
+        updateLineNumberGutterVisibility();
+        scheduleEditorLineNumberRender();
+        if (editorHighlightEnabled && editorView === "markdown") {
+          scheduleEditorHighlightRender();
+        }
+      }
+
       function getToken() {
         const query = new URLSearchParams(window.location.search || "");
         const hash = new URLSearchParams((window.location.hash || "").replace(/^#/, ""));
@@ -3291,9 +3545,13 @@
       }
 
       function syncEditorHighlightScroll() {
-        if (!sourceHighlightEl) return;
-        sourceHighlightEl.scrollTop = sourceTextEl.scrollTop;
-        sourceHighlightEl.scrollLeft = sourceTextEl.scrollLeft;
+        if (sourceHighlightEl) {
+          sourceHighlightEl.scrollTop = sourceTextEl.scrollTop;
+          sourceHighlightEl.scrollLeft = sourceTextEl.scrollLeft;
+        }
+        if (lineNumberGutterEl) {
+          lineNumberGutterEl.scrollTop = sourceTextEl.scrollTop;
+        }
       }
 
       function runEditorMetaUpdateNow() {
@@ -3521,14 +3779,22 @@
         syncEditorHighlightScroll();
       }
 
+      function syncHighlightSelectUi() {
+        if (!highlightSelect) return;
+        if (!editorHighlightEnabled) {
+          highlightSelect.value = "off";
+          return;
+        }
+        highlightSelect.value = (editorLanguage && SUPPORTED_LANGUAGES.indexOf(editorLanguage) !== -1)
+          ? editorLanguage
+          : "markdown";
+      }
+
       function setEditorHighlightEnabled(enabled) {
         editorHighlightEnabled = Boolean(enabled);
         persistEditorHighlightEnabled(editorHighlightEnabled);
-        if (highlightSelect) {
-          highlightSelect.value = editorHighlightEnabled ? "on" : "off";
-        }
+        syncHighlightSelectUi();
         updateEditorHighlightState();
-        updateLangSelectVisibility();
       }
 
       function readStoredEditorLanguage() {
@@ -3552,9 +3818,7 @@
       function setEditorLanguage(lang) {
         editorLanguage = (lang && SUPPORTED_LANGUAGES.indexOf(lang) !== -1) ? lang : "markdown";
         persistEditorLanguage(editorLanguage);
-        if (langSelect) {
-          langSelect.value = editorLanguage;
-        }
+        syncHighlightSelectUi();
         if (editorHighlightEnabled && editorView === "markdown") {
           scheduleEditorHighlightRender();
         }
@@ -3563,11 +3827,13 @@
         }
       }
 
-      function updateLangSelectVisibility() {
-        if (!langSelect) return;
-        const highlightActive = editorHighlightEnabled && editorView === "markdown";
-        const previewActive = editorView === "preview";
-        langSelect.hidden = !(highlightActive || previewActive);
+      function setEditorHighlightMode(mode) {
+        if (mode === "off") {
+          setEditorHighlightEnabled(false);
+          return;
+        }
+        setEditorLanguage(mode);
+        setEditorHighlightEnabled(true);
       }
 
       function setResponseHighlightEnabled(enabled) {
@@ -3618,7 +3884,7 @@
             queueSteerBtn.title = "Queue steering is unavailable in editor-only mode.";
           }
           if (critiqueBtn) {
-            critiqueBtn.textContent = "Critique editor text";
+            critiqueBtn.textContent = "Critique text";
             critiqueBtn.classList.remove("request-stop-active");
             critiqueBtn.disabled = true;
             critiqueBtn.title = "Critique is unavailable in editor-only mode.";
@@ -3649,7 +3915,7 @@
         }
 
         if (critiqueBtn) {
-          critiqueBtn.textContent = critiqueIsStop ? "Stop" : "Critique editor text";
+          critiqueBtn.textContent = critiqueIsStop ? "Stop" : "Critique text";
           critiqueBtn.classList.toggle("request-stop-active", critiqueIsStop);
           critiqueBtn.disabled = critiqueIsStop ? wsState === "Disconnected" : (uiBusy || canQueueSteering);
           critiqueBtn.title = critiqueIsStop
@@ -3657,8 +3923,8 @@
             : (canQueueSteering
               ? "Critique queueing is not supported while Run editor text is active."
               : (annotationsEnabled
-                ? "Critique editor text as-is (includes [an: ...] markers)."
-                : "Critique editor text with [an: ...] markers stripped."));
+                ? "Critique text as-is (includes [an: ...] markers)."
+                : "Critique text with [an: ...] markers stripped."));
         }
       }
 
@@ -4298,6 +4564,7 @@
               root.style.setProperty(key, message.vars[key]);
             }
           });
+          updateDocumentTitle();
         }
       }
 
@@ -4517,11 +4784,11 @@
         if (!insertHeaderBtn) return;
         const hasHeader = stripAnnotationHeader(sourceTextEl.value).hadHeader;
         if (hasHeader) {
-          insertHeaderBtn.textContent = "Remove annotated reply header";
+          insertHeaderBtn.textContent = "Annotation header: On";
           insertHeaderBtn.title = "Remove annotated-reply protocol header while keeping body text.";
           return;
         }
-        insertHeaderBtn.textContent = "Insert annotated reply header";
+        insertHeaderBtn.textContent = "Annotation header: Off";
         insertHeaderBtn.title = "Insert annotated-reply protocol header (source metadata, [an: ...] syntax hint, precedence note, and end marker).";
       }
 
@@ -4617,7 +4884,7 @@
 
       if (highlightSelect) {
         highlightSelect.addEventListener("change", () => {
-          setEditorHighlightEnabled(highlightSelect.value === "on");
+          setEditorHighlightMode(highlightSelect.value);
         });
       }
 
@@ -4627,9 +4894,9 @@
         });
       }
 
-      if (langSelect) {
-        langSelect.addEventListener("change", () => {
-          setEditorLanguage(langSelect.value);
+      if (lineNumbersSelect) {
+        lineNumbersSelect.addEventListener("change", () => {
+          setLineNumbersEnabled(lineNumbersSelect.value === "on");
         });
       }
 
@@ -4742,23 +5009,26 @@
       });
 
       sourceTextEl.addEventListener("scroll", () => {
-        if (!editorHighlightEnabled || editorView !== "markdown") return;
+        if (editorView !== "markdown") return;
         syncEditorHighlightScroll();
       });
 
       sourceTextEl.addEventListener("keyup", () => {
-        if (!editorHighlightEnabled || editorView !== "markdown") return;
+        if (editorView !== "markdown") return;
         syncEditorHighlightScroll();
       });
 
       sourceTextEl.addEventListener("mouseup", () => {
-        if (!editorHighlightEnabled || editorView !== "markdown") return;
+        if (editorView !== "markdown") return;
         syncEditorHighlightScroll();
       });
 
       window.addEventListener("resize", () => {
-        if (!editorHighlightEnabled || editorView !== "markdown") return;
+        if (editorView !== "markdown") return;
         syncEditorHighlightScroll();
+        if (lineNumbersEnabled) {
+          scheduleEditorLineNumberRender();
+        }
       });
 
       insertHeaderBtn.addEventListener("click", () => {
@@ -5286,6 +5556,14 @@
         reader.readAsText(file);
       });
 
+      if (sourceEditorWrapEl && typeof ResizeObserver === "function") {
+        const editorResizeObserver = new ResizeObserver(() => {
+          if (editorView !== "markdown" || !lineNumbersEnabled) return;
+          scheduleEditorLineNumberRender();
+        });
+        editorResizeObserver.observe(sourceEditorWrapEl);
+      }
+
       setSourceState(initialSourceState);
       refreshResponseUi();
       updateAnnotatedReplyHeaderButton();
@@ -5293,13 +5571,17 @@
       setScratchpadText(readStoredScratchpadText() || "", { persist: false });
 
       const storedEditorHighlightEnabled = readStoredEditorHighlightEnabled();
-      const initialHighlightEnabled = storedEditorHighlightEnabled ?? Boolean(highlightSelect && highlightSelect.value === "on");
+      const initialHighlightEnabled = storedEditorHighlightEnabled ?? Boolean(highlightSelect && highlightSelect.value !== "off");
       setEditorHighlightEnabled(initialHighlightEnabled);
 
       const initialDetectedLang = detectLanguageFromName(initialSourceState.path || initialSourceState.label || "");
       const storedLang = readStoredEditorLanguage();
       setEditorLanguage(initialDetectedLang || storedLang || "markdown");
 
+      const storedLineNumbersEnabled = readStoredEditorLineNumbersEnabled();
+      const initialLineNumbersEnabled = storedLineNumbersEnabled ?? Boolean(lineNumbersSelect && lineNumbersSelect.value === "on");
+      setLineNumbersEnabled(initialLineNumbersEnabled);
+
       const storedResponseHighlightEnabled = readStoredResponseHighlightEnabled();
       const initialResponseHighlightEnabled = storedResponseHighlightEnabled ?? Boolean(responseHighlightSelect && responseHighlightSelect.value === "on");
       setResponseHighlightEnabled(initialResponseHighlightEnabled);

package/client/studio.css

@@ -87,14 +87,19 @@
     }
 
     #sendRunBtn,
-    #queueSteerBtn,
-    #critiqueBtn {
+    #queueSteerBtn {
       min-width: 10rem;
       display: inline-flex;
       justify-content: center;
       align-items: center;
     }
 
+    #critiqueBtn {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+
     #sendRunBtn:not(:disabled):not(.request-stop-active),
     #queueSteerBtn:not(:disabled),
     #loadResponseBtn:not(:disabled):not([hidden]) {
@@ -412,6 +417,7 @@
     }
 
     .editor-highlight-wrap {
+      --editor-line-number-gutter-width: 0px;
       position: relative;
       display: flex;
       flex: 1 1 auto;
@@ -424,13 +430,63 @@
       overscroll-behavior: none;
     }
 
+    .editor-line-number-gutter {
+      position: absolute;
+      inset: 0 auto 0 0;
+      width: var(--editor-line-number-gutter-width);
+      overflow: hidden;
+      border-right: 1px solid var(--border-muted);
+      background: var(--panel-2);
+      color: var(--muted);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .editor-line-number-gutter-content {
+      min-height: 100%;
+      padding: 10px 8px 10px 0;
+      text-align: right;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      line-height: 1.45;
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+
+    .editor-line-number-row {
+      display: block;
+      user-select: none;
+    }
+
+    .editor-line-number-measure {
+      position: absolute;
+      top: 0;
+      left: 0;
+      visibility: hidden;
+      pointer-events: none;
+      overflow: hidden;
+      white-space: pre-wrap;
+      word-break: normal;
+      overflow-wrap: break-word;
+      font-family: var(--font-mono);
+      font-size: 13px;
+      line-height: 1.45;
+      tab-size: 2;
+      z-index: -1;
+    }
+
+    .editor-line-number-measure-line {
+      display: block;
+      min-height: 1.45em;
+    }
+
     .editor-highlight {
       position: absolute;
       inset: 0;
       margin: 0;
       border: 0;
       border-radius: 8px;
-      padding: 10px;
+      padding: 10px 10px 10px calc(10px + var(--editor-line-number-gutter-width));
       overflow: auto;
       pointer-events: none;
       white-space: pre-wrap;
@@ -457,6 +513,7 @@
       resize: none;
       outline: none;
       overscroll-behavior: none;
+      padding: 10px 10px 10px calc(10px + var(--editor-line-number-gutter-width));
     }
 
     #sourceText.highlight-active {

package/index.ts

@@ -955,7 +955,7 @@ function rawDataToString(data: RawData): string {
 	if (typeof data === "string") return data;
 	if (data instanceof Buffer) return data.toString("utf-8");
 	if (Array.isArray(data)) return Buffer.concat(data).toString("utf-8");
-	return Buffer.from(data).toString("utf-8");
+	return Buffer.from(data as ArrayBuffer).toString("utf-8");
 }
 
 function isValidRequestId(id: string): boolean {
@@ -3259,7 +3259,7 @@ function renderStudioAnnotationPdfLatex(text: string): string {
 function replaceStudioAnnotationMarkersForPdfInSegment(text: string): string {
 	const replaced = replaceStudioInlineAnnotationMarkers(
 		String(text ?? ""),
-		(marker) => {
+		(marker: { body: string }) => {
 			const cleaned = renderStudioAnnotationPdfLatex(marker.body);
 			if (!cleaned) return "";
 			return `\\studioannotation{${cleaned}}`;
@@ -3276,7 +3276,7 @@ function replaceStudioAnnotationMarkersForPdfInSegment(text: string): string {
 
 function replaceStudioAnnotationMarkersForPdf(markdown: string): string {
 	if (!hasStudioMarkdownAnnotationMarkers(markdown)) return String(markdown ?? "");
-	return transformStudioMarkdownOutsideFences(markdown, (segment) => replaceStudioAnnotationMarkersForPdfInSegment(segment));
+	return transformStudioMarkdownOutsideFences(markdown, (segment: string) => replaceStudioAnnotationMarkersForPdfInSegment(segment));
 }
 
 interface StudioPdfRenderOptions {
@@ -4325,13 +4325,13 @@ function replaceStudioAnnotationMarkersInDiffTokenLine(line: string, macroName:
 	const wrapText = (text: string): string => text ? `\\${macroName}{${text}}` : "";
 	const rewritten = replaceStudioInlineAnnotationMarkers(
 		body,
-		(marker) => {
+		(marker: { body: string }) => {
 			const markerText = decodeStudioGeneratedCodeLatexText(normalizeStudioAnnotationText(marker.body));
 			const cleaned = makeStudioHighlightingMathScriptsVerbatimSafe(renderStudioAnnotationPdfLatex(markerText));
 			if (!cleaned) return "";
 			return `\\studioannotation{${cleaned}}`;
 		},
-		(segment) => wrapText(segment),
+		(segment: string) => wrapText(segment),
 	);
 
 	return rewritten === body ? line : (rewritten || wrapText(body));
@@ -5866,7 +5866,7 @@ ${cssVarsBlock}
               <button id="sendEditorBtn" type="button">Send to pi editor</button>
             </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).">Insert annotated reply header</button>
+              <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="Annotation visibility mode" title="On: keep and send [an: ...] markers. Hidden: keep markers in editor, hide in preview, and strip before Run/Critique.">
                 <option value="on" selected>Annotations: On</option>
                 <option value="off">Annotations: Hidden</option>
@@ -5876,46 +5876,51 @@ ${cssVarsBlock}
             </div>
             <div class="source-actions-row">
               <select id="lensSelect" aria-label="Critique focus">
-                <option value="auto" selected>Critique focus: Auto</option>
-                <option value="writing">Critique focus: Writing</option>
-                <option value="code">Critique focus: Code</option>
+                <option value="auto" selected>Critique: Auto</option>
+                <option value="writing">Critique: Writing</option>
+                <option value="code">Critique: Code</option>
               </select>
-              <button id="critiqueBtn" type="button">Critique editor text</button>
+              <button id="critiqueBtn" type="button">Critique text</button>
               <select id="highlightSelect" aria-label="Editor syntax highlighting">
                 <option value="off">Syntax highlight: Off</option>
-                <option value="on" selected>Syntax highlight: On</option>
+                <option value="bash">Syntax highlight: Bash</option>
+                <option value="c">Syntax highlight: C</option>
+                <option value="cpp">Syntax highlight: C++</option>
+                <option value="css">Syntax highlight: CSS</option>
+                <option value="diff">Syntax highlight: Diff</option>
+                <option value="fortran">Syntax highlight: Fortran</option>
+                <option value="go">Syntax highlight: Go</option>
+                <option value="html">Syntax highlight: HTML</option>
+                <option value="java">Syntax highlight: Java</option>
+                <option value="javascript">Syntax highlight: JavaScript</option>
+                <option value="json">Syntax highlight: JSON</option>
+                <option value="julia">Syntax highlight: Julia</option>
+                <option value="latex">Syntax highlight: LaTeX</option>
+                <option value="lua">Syntax highlight: Lua</option>
+                <option value="markdown" selected>Syntax highlight: Markdown</option>
+                <option value="matlab">Syntax highlight: MATLAB</option>
+                <option value="text">Syntax highlight: Plain Text</option>
+                <option value="python">Syntax highlight: Python</option>
+                <option value="r">Syntax highlight: R</option>
+                <option value="rust">Syntax highlight: Rust</option>
+                <option value="swift">Syntax highlight: Swift</option>
+                <option value="toml">Syntax highlight: TOML</option>
+                <option value="typescript">Syntax highlight: TypeScript</option>
+                <option value="xml">Syntax highlight: XML</option>
+                <option value="yaml">Syntax highlight: YAML</option>
               </select>
-              <select id="langSelect" aria-label="Highlight language">
-                <option value="bash">Lang: Bash</option>
-                <option value="c">Lang: C</option>
-                <option value="cpp">Lang: C++</option>
-                <option value="css">Lang: CSS</option>
-                <option value="diff">Lang: Diff</option>
-                <option value="fortran">Lang: Fortran</option>
-                <option value="go">Lang: Go</option>
-                <option value="html">Lang: HTML</option>
-                <option value="java">Lang: Java</option>
-                <option value="javascript">Lang: JavaScript</option>
-                <option value="json">Lang: JSON</option>
-                <option value="julia">Lang: Julia</option>
-                <option value="latex">Lang: LaTeX</option>
-                <option value="lua">Lang: Lua</option>
-                <option value="markdown" selected>Lang: Markdown</option>
-                <option value="matlab">Lang: MATLAB</option>
-                <option value="text">Lang: Plain Text</option>
-                <option value="python">Lang: Python</option>
-                <option value="r">Lang: R</option>
-                <option value="rust">Lang: Rust</option>
-                <option value="swift">Lang: Swift</option>
-                <option value="toml">Lang: TOML</option>
-                <option value="typescript">Lang: TypeScript</option>
-                <option value="xml">Lang: XML</option>
-                <option value="yaml">Lang: YAML</option>
+              <select id="lineNumbersSelect" aria-label="Editor line numbers">
+                <option value="off" selected>Line numbers: Off</option>
+                <option value="on">Line numbers: On</option>
               </select>
             </div>
           </div>
         </div>
         <div id="sourceEditorWrap" class="editor-highlight-wrap">
+          <div id="lineNumberGutter" class="editor-line-number-gutter" hidden aria-hidden="true">
+            <div id="lineNumberGutterContent" class="editor-line-number-gutter-content"></div>
+          </div>
+          <div id="lineNumberMeasure" class="editor-line-number-measure" aria-hidden="true"></div>
           <pre id="sourceHighlight" class="editor-highlight" aria-hidden="true"></pre>
           <textarea id="sourceText" placeholder="Paste or edit text here.">${initialText}</textarea>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.43",
+  "version": "0.5.44",
   "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",
@@ -25,7 +25,8 @@
     "assets/screenshots"
   ],
   "scripts": {
-    "test": "node --test"
+    "test": "node --test",
+    "typecheck": "tsc --noEmit"
   },
   "pi": {
     "extensions": [
@@ -37,5 +38,11 @@
   },
   "dependencies": {
     "ws": "^8.18.0"
+  },
+  "devDependencies": {
+    "@mariozechner/pi-coding-agent": "^0.64.0",
+    "@types/node": "^24.3.0",
+    "@types/ws": "^8.18.1",
+    "typescript": "^5.7.3"
   }
 }