pi-studio 0.5.6 → 0.5.8

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to `pi-studio` are documented here.
 
+## [Unreleased]
+
+## [0.5.8] — 2026-03-12
+
+### Changed
+- Studio browser tabs now auto-reconnect after unexpected websocket disconnects (for example transient local connection loss or sleep/wake), while intentional invalidation/shutdown still requires a fresh `/studio`.
+- Same-tab reconnect now preserves the currently selected response-history item instead of jumping back to the latest response on every `hello_ack` resync.
+
+## [0.5.7] — 2026-03-12
+
+### Changed
+- Preview rendering now passes `--wrap=none` to pandoc and preview-side annotation matching now tolerates embedded newlines, fixing missed `[an: ...]` highlights in preview for longer annotations.
+- Editor sync indicator is now intentionally quiet: Studio only shows the badge when the editor exactly matches the current response/thinking, and hides it while drafting/out-of-sync.
+- Response history navigation now includes **Last response ▶|** for jumping straight back to the newest loaded history item.
+- Renamed **Get latest response** to **Fetch latest response** for clearer distinction from history navigation, and moved **Load response into editor** ahead of **Load response prompt into editor** in the action row.
+
 ## [0.4.3] — 2026-03-04
 
 ### Added
@@ -86,8 +102,6 @@ All notable changes to `pi-studio` are documented here.
 - Active pane indicator simplified to subtle border color change (removed thick top accent bar).
 - Panel shadows, button hierarchy (filled accent for primary actions), heading scale, blockquote/table styling improvements.
 
-## [Unreleased]
-
 ## [0.5.6] — 2026-03-10
 
 ### Changed

package/README.md

@@ -16,7 +16,7 @@ Experimental extension for [pi](https://github.com/badlogic/pi-mono) that opens
 
 - Opens a two-pane browser workspace: **Editor** (left) + **Response/Thinking/Editor Preview** (right)
 - Runs editor text directly, or asks for structured critique (auto/writing/code focus)
-- Browses response history (`Prev/Next`) and loads either:
+- Browses response history (`Prev/Next/Last`) and loads either:
   - response text
   - critique notes/full critique
   - assistant thinking (when available)

package/WORKFLOW.md

@@ -79,10 +79,10 @@ Rules:
 - Header view toggles: `Left: Editor (Raw|Preview)`, `Right: Response (Raw|Preview) | Editor (Preview)`
 - Preview mode uses server-side `pandoc` rendering (math-aware) with plain-markdown fallback when renderer is unavailable.
 - Editor actions: **Insert/Remove annotated reply header**, **Annotations: On|Hidden**, **Strip annotations…**, **Run editor text**, **Critique editor text** (+ critique focus), **Send to pi editor**, **Copy editor text**, **Save .annotated.md**
-- Response actions include `Auto-update response: On|Off`, **Get latest response**, response-history browse (`Prev/Next`), and **Load response prompt into editor**
+- Response actions include `Auto-update response: On|Off`, **Fetch latest response**, response-history browse (`Prev/Next/Last`), **Load response into editor**, and **Load response prompt into editor**
 - Source badge: `blank | last model response | file <path> | upload`
 - Response badge: `none | assistant response | assistant critique` (+ timestamp)
-- Sync badge: `No response loaded | In sync with response | Edited since response`
+- Sync badge: shown only when the editor exactly matches the currently viewed response/thinking (`In sync with response | In sync with thinking`)
 - Footer WS/status phases: `Connecting`, `Ready`, `Submitting`, `Disconnected`
 
 ---

package/index.ts

@@ -1070,7 +1070,7 @@ function normalizeObsidianImages(markdown: string): string {
 async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolean, resourcePath?: string): Promise<string> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
 	const inputFormat = isLatex ? "latex" : "gfm+tex_math_dollars-raw_html";
-	const args = ["-f", inputFormat, "-t", "html5", "--mathml"];
+	const args = ["-f", inputFormat, "-t", "html5", "--mathml", "--wrap=none"];
 	if (resourcePath) {
 		args.push(`--resource-path=${resourcePath}`);
 		// Embed images as data URIs so they render in the browser preview
@@ -2312,13 +2312,9 @@ ${cssVarsBlock}
     }
 
     .sync-badge.sync {
-      border-color: var(--ok-border);
-      color: var(--ok);
-    }
-
-    .sync-badge.edited {
-      border-color: var(--warn-border);
-      color: var(--warn);
+      border-color: var(--border-muted);
+      color: var(--muted);
+      opacity: 0.88;
     }
 
     .source-actions {
@@ -3082,7 +3078,7 @@ ${cssVarsBlock}
               <input id="resourceDirInput" type="text" placeholder="/path/to/working/directory" title="Absolute path to working directory" />
               <button id="resourceDirClearBtn" type="button" title="Clear working directory">✕</button>
             </span>
-            <span id="syncBadge" class="source-badge sync-badge">No response loaded</span>
+            <span id="syncBadge" class="source-badge sync-badge" hidden>In sync with response</span>
           </div>
           <div class="source-actions">
             <div class="source-actions-row">
@@ -3181,16 +3177,17 @@ ${cssVarsBlock}
             </select>
           </div>
           <div class="response-actions-row history-row">
-            <button id="pullLatestBtn" type="button" title="Fetch the latest assistant response when auto-update is off.">Get latest response</button>
+            <button id="pullLatestBtn" type="button" title="Fetch the latest assistant response when auto-update is off.">Fetch latest response</button>
             <button id="historyPrevBtn" type="button" title="Show previous response in history.">◀ Prev response</button>
             <span id="historyIndexBadge" class="source-badge">History: 0/0</span>
             <button id="historyNextBtn" type="button" title="Show next response in history.">Next response ▶</button>
+            <button id="historyLastBtn" type="button" title="Jump to the latest loaded response in history.">Last response ▶|</button>
           </div>
           <div class="response-actions-row">
-            <button id="loadHistoryPromptBtn" type="button" title="Load the prompt that generated the selected response into the editor.">Load response prompt into editor</button>
             <button id="loadResponseBtn" type="button">Load response into editor</button>
             <button id="loadCritiqueNotesBtn" type="button" hidden>Load critique notes into editor</button>
             <button id="loadCritiqueFullBtn" type="button" hidden>Load full critique into editor</button>
+            <button id="loadHistoryPromptBtn" type="button" title="Load the prompt that generated the selected response into the editor.">Load response prompt into editor</button>
             <button id="copyResponseBtn" type="button">Copy response text</button>
           </div>
         </div>
@@ -3278,6 +3275,7 @@ ${cssVarsBlock}
       const exportPdfBtn = document.getElementById("exportPdfBtn");
       const historyPrevBtn = document.getElementById("historyPrevBtn");
       const historyNextBtn = document.getElementById("historyNextBtn");
+      const historyLastBtn = document.getElementById("historyLastBtn");
       const historyIndexBadgeEl = document.getElementById("historyIndexBadge");
       const loadHistoryPromptBtn = document.getElementById("loadHistoryPromptBtn");
       const saveAsBtn = document.getElementById("saveAsBtn");
@@ -3303,6 +3301,8 @@ ${cssVarsBlock}
       let wsState = "Connecting";
       let statusMessage = "Connecting · Studio script starting…";
       let statusLevel = "";
+      let reconnectTimer = null;
+      let reconnectAttempt = 0;
       let pendingRequestId = null;
       let pendingKind = null;
       let stickyStudioKind = null;
@@ -3419,7 +3419,7 @@ ${cssVarsBlock}
       let responseHighlightEnabled = false;
       let editorHighlightRenderRaf = null;
       let annotationsEnabled = true;
-      const ANNOTATION_MARKER_REGEX = /\\[an:\\s*([^\\]\\n]+?)\\]/gi;
+      const ANNOTATION_MARKER_REGEX = /\\[an:\\s*([^\\]]+?)\\]/gi;
       const EMPTY_OVERLAY_LINE = "\\u200b";
       const MERMAID_CDN_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
       const MERMAID_CONFIG = ${JSON.stringify(mermaidConfig)};
@@ -3992,6 +3992,9 @@ ${cssVarsBlock}
         if (historyNextBtn) {
           historyNextBtn.disabled = uiBusy || total <= 1 || responseHistoryIndex < 0 || responseHistoryIndex >= total - 1;
         }
+        if (historyLastBtn) {
+          historyLastBtn.disabled = uiBusy || total <= 1 || responseHistoryIndex < 0 || responseHistoryIndex >= total - 1;
+        }
 
         const selectedItem = getSelectedHistoryItem();
         const hasPrompt = Boolean(selectedItem && typeof selectedItem.prompt === "string" && selectedItem.prompt.trim());
@@ -4168,8 +4171,9 @@ ${cssVarsBlock}
           : latestResponseHasContent;
 
         if (!hasComparableContent) {
-          syncBadgeEl.textContent = showingThinking ? "No thinking loaded" : "No response loaded";
-          syncBadgeEl.classList.remove("sync", "edited");
+          syncBadgeEl.hidden = true;
+          syncBadgeEl.textContent = showingThinking ? "In sync with thinking" : "In sync with response";
+          syncBadgeEl.classList.remove("sync");
           return;
         }
 
@@ -4178,15 +4182,15 @@ ${cssVarsBlock}
           : normalizeForCompare(sourceTextEl.value);
         const targetNormalized = showingThinking ? latestResponseThinkingNormalized : latestResponseNormalized;
         const inSync = normalizedEditor === targetNormalized;
+        syncBadgeEl.hidden = !inSync;
+        syncBadgeEl.textContent = showingThinking ? "In sync with thinking" : "In sync with response";
+
         if (inSync) {
-          syncBadgeEl.textContent = showingThinking ? "In sync with thinking" : "In sync with response";
           syncBadgeEl.classList.add("sync");
-          syncBadgeEl.classList.remove("edited");
-        } else {
-          syncBadgeEl.textContent = showingThinking ? "Out of sync with thinking" : "Out of sync with response";
-          syncBadgeEl.classList.add("edited");
-          syncBadgeEl.classList.remove("sync");
+          return;
         }
+
+        syncBadgeEl.classList.remove("sync");
       }
 
       function buildPlainMarkdownHtml(markdown) {
@@ -4818,7 +4822,7 @@ ${cssVarsBlock}
         }
 
         pullLatestBtn.disabled = uiBusy || followLatest;
-        pullLatestBtn.textContent = queuedLatestResponse ? "Get latest response *" : "Get latest response";
+        pullLatestBtn.textContent = queuedLatestResponse ? "Fetch latest response *" : "Fetch latest response";
 
         updateSyncBadge(normalizedEditor);
       }
@@ -5029,7 +5033,7 @@ ${cssVarsBlock}
 
       function highlightInlineMarkdown(text) {
         const source = String(text || "");
-        const pattern = /(\\x60[^\\x60]*\\x60)|(\\[[^\\]]+\\]\\([^)]+\\))|(\\[an:\\s*[^\\]\\n]+\\])/gi;
+        const pattern = /(\\x60[^\\x60]*\\x60)|(\\[[^\\]]+\\]\\([^)]+\\))|(\\[an:\\s*[^\\]]+\\])/gi;
         let lastIndex = 0;
         let out = "";
 
@@ -5822,8 +5826,8 @@ ${cssVarsBlock}
           let appliedHistory = false;
           if (Array.isArray(message.responseHistory)) {
             appliedHistory = setResponseHistory(message.responseHistory, {
-              autoSelectLatest: true,
-              preserveSelection: false,
+              autoSelectLatest: !initialDocumentApplied,
+              preserveSelection: initialDocumentApplied,
               silent: true,
             });
           }
@@ -5967,7 +5971,7 @@ ${cssVarsBlock}
             if (!followLatest) {
               queuedLatestResponse = payload;
               updateResultActionButtons();
-              setStatus("New response available — click Get latest response.", "warning");
+              setStatus("New response available — click Fetch latest response.", "warning");
               return;
             }
 
@@ -6182,7 +6186,42 @@ ${cssVarsBlock}
         }
       }
 
+      function clearScheduledReconnect() {
+        if (reconnectTimer !== null) {
+          window.clearTimeout(reconnectTimer);
+          reconnectTimer = null;
+        }
+      }
+
+      function formatReconnectDelay(delayMs) {
+        const delay = Math.max(0, Number(delayMs) || 0);
+        if (delay < 1000) return delay + "ms";
+        const seconds = delay / 1000;
+        return (Number.isInteger(seconds) ? String(seconds) : seconds.toFixed(1)) + "s";
+      }
+
+      function scheduleReconnect(reasonMessage) {
+        if (reconnectTimer !== null) return;
+
+        reconnectAttempt += 1;
+        const delayMs = Math.min(8000, 600 * Math.pow(2, Math.max(0, reconnectAttempt - 1)));
+        setBusy(true);
+        setWsState("Connecting");
+        setStatus((reasonMessage || "Connection lost.") + " Reconnecting in " + formatReconnectDelay(delayMs) + "…", "warning");
+
+        reconnectTimer = window.setTimeout(() => {
+          reconnectTimer = null;
+          connect();
+        }, delayMs);
+      }
+
       function connect() {
+        clearScheduledReconnect();
+
+        if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+          return;
+        }
+
         const token = getToken();
         if (!token) {
           setWsState("Disconnected");
@@ -6193,26 +6232,61 @@ ${cssVarsBlock}
 
         const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
         const wsUrl = wsProtocol + "://" + window.location.host + "/ws?token=" + encodeURIComponent(token) + (DEBUG_ENABLED ? "&debug=1" : "");
+        const wasReconnect = reconnectAttempt > 0;
+        let disconnectHandled = false;
 
         setWsState("Connecting");
-        setStatus("Connecting to Studio server…");
-        ws = new WebSocket(wsUrl);
+        setStatus(wasReconnect ? "Reconnecting to Studio server…" : "Connecting to Studio server…");
+        const socket = new WebSocket(wsUrl);
+        ws = socket;
 
         const connectWatchdog = window.setTimeout(() => {
-          if (ws && ws.readyState === WebSocket.CONNECTING) {
+          if (ws === socket && socket.readyState === WebSocket.CONNECTING) {
             setWsState("Connecting");
-            setStatus("Still connecting…", "warning");
+            setStatus(wasReconnect ? "Still reconnecting…" : "Still connecting…", "warning");
           }
         }, 3000);
 
-        ws.addEventListener("open", () => {
+        const handleDisconnect = (kind, code) => {
+          if (disconnectHandled) return;
+          disconnectHandled = true;
+          window.clearTimeout(connectWatchdog);
+          if (ws === socket) {
+            ws = null;
+          }
+          setBusy(true);
+
+          if (kind === "invalidated") {
+            clearScheduledReconnect();
+            reconnectAttempt = 0;
+            setWsState("Disconnected");
+            setStatus("This tab was invalidated by a newer /studio session.", "warning");
+            return;
+          }
+
+          if (kind === "shutdown") {
+            clearScheduledReconnect();
+            reconnectAttempt = 0;
+            setWsState("Disconnected");
+            setStatus("Studio server shut down. Re-run /studio.", "warning");
+            return;
+          }
+
+          const detail = typeof code === "number" && code > 0
+            ? "Disconnected (code " + code + ")."
+            : (kind === "error" ? "WebSocket error." : "Connection lost.");
+          scheduleReconnect(detail);
+        };
+
+        socket.addEventListener("open", () => {
           window.clearTimeout(connectWatchdog);
           setWsState("Ready");
-          setStatus("Connected. Syncing…");
+          setStatus(wasReconnect ? "Reconnected. Syncing…" : "Connected. Syncing…");
           sendMessage({ type: "hello" });
+          reconnectAttempt = 0;
         });
 
-        ws.addEventListener("message", (event) => {
+        socket.addEventListener("message", (event) => {
           try {
             const message = JSON.parse(event.data);
             handleServerMessage(message);
@@ -6222,22 +6296,21 @@ ${cssVarsBlock}
           }
         });
 
-        ws.addEventListener("close", (event) => {
-          window.clearTimeout(connectWatchdog);
-          setBusy(true);
-          setWsState("Disconnected");
+        socket.addEventListener("close", (event) => {
           if (event && event.code === 4001) {
-            setStatus("This tab was invalidated by a newer /studio session.", "warning");
-          } else {
-            const code = event && typeof event.code === "number" ? event.code : 0;
-            setStatus("Disconnected (code " + code + "). Re-run /studio.", "error");
+            handleDisconnect("invalidated", 4001);
+            return;
           }
+          if (event && event.code === 1001) {
+            handleDisconnect("shutdown", 1001);
+            return;
+          }
+          const code = event && typeof event.code === "number" ? event.code : 0;
+          handleDisconnect("close", code);
         });
 
-        ws.addEventListener("error", () => {
-          window.clearTimeout(connectWatchdog);
-          setWsState("Disconnected");
-          setStatus("WebSocket error. Check /studio --status and reopen.", "error");
+        socket.addEventListener("error", () => {
+          handleDisconnect("error");
         });
       }
 
@@ -6342,7 +6415,7 @@ ${cssVarsBlock}
       function requestLatestResponse() {
         const sent = sendMessage({ type: "get_latest_response" });
         if (!sent) return;
-        setStatus("Requested latest response.");
+        setStatus("Fetching latest response…");
       }
 
       if (leftPaneEl) {
@@ -6380,7 +6453,7 @@ ${cssVarsBlock}
             setStatus("Applied queued response.", "success");
           }
         } else if (!followLatest) {
-          setStatus("Auto-update is off. Use Get latest response.");
+          setStatus("Auto-update is off. Use Fetch latest response.");
         }
         updateResultActionButtons();
       });
@@ -6464,6 +6537,16 @@ ${cssVarsBlock}
         });
       }
 
+      if (historyLastBtn) {
+        historyLastBtn.addEventListener("click", () => {
+          if (!responseHistory.length) {
+            setStatus("No response history available yet.", "warning");
+            return;
+          }
+          selectHistoryIndex(responseHistory.length - 1);
+        });
+      }
+
       if (loadHistoryPromptBtn) {
         loadHistoryPromptBtn.addEventListener("click", () => {
           const item = getSelectedHistoryItem();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Browser GUI for structured critique workflows in pi",
   "type": "module",
   "license": "MIT",