pi-studio 0.5.6 → 0.5.7

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to `pi-studio` are documented here.
 
+## [Unreleased]
+
+## [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 +96,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");
@@ -3419,7 +3417,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 +3990,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 +4169,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 +4180,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 +4820,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 +5031,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 = "";
 
@@ -5967,7 +5969,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;
             }
 
@@ -6342,7 +6344,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 +6382,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 +6466,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.7",
   "description": "Browser GUI for structured critique workflows in pi",
   "type": "module",
   "license": "MIT",