pi-studio 0.5.5 → 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,7 +96,11 @@ 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
+- Studio monospace surfaces now use a shared `--font-mono` stack, with best-effort terminal-font detection (Ghostty/WezTerm/Kitty/Alacritty config when available) and `PI_STUDIO_FONT_MONO` as a manual override.
+- In-flight **Run editor text** / **Critique editor text** requests now swap the triggering button into an in-place theme-aware **Stop** state while disabling the other action.
 
 ## [0.5.5] — 2026-03-09
 

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)
@@ -62,6 +62,7 @@ pi -e https://github.com/omaclaren/pi-studio
 
 - Local-only server (`127.0.0.1`) with rotating tokenized URLs.
 - Studio is designed as a complement to terminal pi, not a replacement.
+- Editor/code font uses a best-effort terminal-monospace match when the current terminal config exposes it; set `PI_STUDIO_FONT_MONO` to force a specific CSS `font-family` stack.
 - Full preview/PDF quality depends on `pandoc` (and `xelatex` for PDF):
   - `brew install pandoc`
   - install TeX Live/MacTeX for PDF export

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

@@ -4,7 +4,7 @@ import { randomUUID } from "node:crypto";
 import { readFileSync, statSync, writeFileSync } from "node:fs";
 import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { createServer, type IncomingMessage, type Server, type ServerResponse } from "node:http";
-import { tmpdir } from "node:os";
+import { homedir, tmpdir } from "node:os";
 import { basename, dirname, isAbsolute, join, resolve } from "node:path";
 import { URL } from "node:url";
 import { WebSocketServer, WebSocket, type RawData } from "ws";
@@ -120,6 +120,11 @@ interface GetFromEditorRequestMessage {
 	requestId: string;
 }
 
+interface CancelRequestMessage {
+	type: "cancel_request";
+	requestId: string;
+}
+
 type IncomingStudioMessage =
 	| HelloMessage
 	| PingMessage
@@ -131,7 +136,8 @@ type IncomingStudioMessage =
 	| SaveAsRequestMessage
 	| SaveOverRequestMessage
 	| SendToEditorRequestMessage
-	| GetFromEditorRequestMessage;
+	| GetFromEditorRequestMessage
+	| CancelRequestMessage;
 
 const REQUEST_TIMEOUT_MS = 5 * 60 * 1000;
 const PREVIEW_RENDER_MAX_CHARS = 400_000;
@@ -453,6 +459,205 @@ interface ThemeExportPalette {
 
 const themeExportPaletteCache = new Map<string, ThemeExportPalette | null>();
 
+const DEFAULT_MONO_FONT_FAMILIES = [
+	"ui-monospace",
+	"SFMono-Regular",
+	"Menlo",
+	"Monaco",
+	"Consolas",
+	"Liberation Mono",
+	"Courier New",
+	"monospace",
+] as const;
+
+const CSS_GENERIC_FONT_FAMILIES = new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"emoji",
+	"math",
+	"fangsong",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded",
+]);
+
+let cachedStudioMonoFontStack: string | null = null;
+
+function getHomeDirectory(): string {
+	return process.env.HOME ?? homedir();
+}
+
+function getXdgConfigDirectory(): string {
+	const configured = process.env.XDG_CONFIG_HOME?.trim();
+	if (configured) return configured;
+	return join(getHomeDirectory(), ".config");
+}
+
+function sanitizeCssValue(value: string): string {
+	return value.replace(/[\r\n;]+/g, " ").trim();
+}
+
+function stripSimpleInlineComment(value: string): string {
+	let quote: '"' | "'" | null = null;
+	for (let i = 0; i < value.length; i += 1) {
+		const char = value[i];
+		if (quote) {
+			if (char === quote && value[i - 1] !== "\\") quote = null;
+			continue;
+		}
+		if (char === '"' || char === "'") {
+			quote = char;
+			continue;
+		}
+		if (char === "#") {
+			return value.slice(0, i).trim();
+		}
+	}
+	return value.trim();
+}
+
+function normalizeConfiguredFontFamily(value: string | undefined): string | undefined {
+	if (!value) return undefined;
+	const sanitized = sanitizeCssValue(stripSimpleInlineComment(value));
+	if (!sanitized) return undefined;
+	const unquoted =
+		(sanitized.startsWith('"') && sanitized.endsWith('"'))
+			|| (sanitized.startsWith("'") && sanitized.endsWith("'"))
+			? sanitized.slice(1, -1).trim()
+			: sanitized;
+	return unquoted || undefined;
+}
+
+function formatCssFontFamilyToken(value: string): string {
+	const trimmed = sanitizeCssValue(value);
+	if (!trimmed) return "";
+	if (CSS_GENERIC_FONT_FAMILIES.has(trimmed.toLowerCase())) return trimmed;
+	if (
+		(trimmed.startsWith('"') && trimmed.endsWith('"'))
+		|| (trimmed.startsWith("'") && trimmed.endsWith("'"))
+	) {
+		return trimmed;
+	}
+	return `"${trimmed.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+}
+
+function readFirstExistingTextFile(paths: string[]): string | undefined {
+	for (const path of paths) {
+		try {
+			const text = readFileSync(path, "utf-8");
+			if (text.trim()) return text;
+		} catch {
+			// Ignore missing/unreadable files
+		}
+	}
+	return undefined;
+}
+
+function detectGhosttyFontFamily(): string | undefined {
+	const home = getHomeDirectory();
+	const content = readFirstExistingTextFile([
+		join(getXdgConfigDirectory(), "ghostty", "config"),
+		join(home, "Library", "Application Support", "com.mitchellh.ghostty", "config"),
+	]);
+	if (!content) return undefined;
+	const match = content.match(/^\s*font-family\s*=\s*(.+?)\s*$/m);
+	return normalizeConfiguredFontFamily(match?.[1]);
+}
+
+function detectKittyFontFamily(): string | undefined {
+	const content = readFirstExistingTextFile([
+		join(getXdgConfigDirectory(), "kitty", "kitty.conf"),
+	]);
+	if (!content) return undefined;
+	const match = content.match(/^\s*font_family\s+(.+?)\s*$/m);
+	return normalizeConfiguredFontFamily(match?.[1]);
+}
+
+function detectWezTermFontFamily(): string | undefined {
+	const home = getHomeDirectory();
+	const content = readFirstExistingTextFile([
+		join(getXdgConfigDirectory(), "wezterm", "wezterm.lua"),
+		join(home, ".wezterm.lua"),
+	]);
+	if (!content) return undefined;
+	const patterns = [
+		/font_with_fallback\s*\(\s*\{[\s\S]*?["']([^"']+)["']/m,
+		/font\s*\(\s*["']([^"']+)["']/m,
+		/font\s*=\s*["']([^"']+)["']/m,
+		/family\s*=\s*["']([^"']+)["']/m,
+	];
+	for (const pattern of patterns) {
+		const family = normalizeConfiguredFontFamily(content.match(pattern)?.[1]);
+		if (family) return family;
+	}
+	return undefined;
+}
+
+function detectAlacrittyFontFamily(): string | undefined {
+	const content = readFirstExistingTextFile([
+		join(getXdgConfigDirectory(), "alacritty", "alacritty.toml"),
+		join(getXdgConfigDirectory(), "alacritty.toml"),
+		join(getXdgConfigDirectory(), "alacritty", "alacritty.yml"),
+		join(getXdgConfigDirectory(), "alacritty", "alacritty.yaml"),
+	]);
+	if (!content) return undefined;
+	const patterns = [
+		/^\s*family\s*=\s*["']([^"']+)["']\s*$/m,
+		/^\s*family\s*:\s*["']?([^"'#\n]+)["']?\s*$/m,
+	];
+	for (const pattern of patterns) {
+		const family = normalizeConfiguredFontFamily(content.match(pattern)?.[1]);
+		if (family) return family;
+	}
+	return undefined;
+}
+
+function detectTerminalMonospaceFontFamily(): string | undefined {
+	const termProgram = (process.env.TERM_PROGRAM ?? "").trim().toLowerCase();
+	const term = (process.env.TERM ?? "").trim().toLowerCase();
+
+	if (termProgram === "ghostty" || term.includes("ghostty")) return detectGhosttyFontFamily();
+	if (termProgram === "wezterm") return detectWezTermFontFamily();
+	if (termProgram === "kitty" || term.includes("kitty")) return detectKittyFontFamily();
+	if (termProgram === "alacritty") return detectAlacrittyFontFamily();
+	return undefined;
+}
+
+function buildMonoFontStack(primaryFamily?: string): string {
+	const entries: string[] = [];
+	const seen = new Set<string>();
+	const push = (family: string) => {
+		const trimmed = family.trim();
+		if (!trimmed) return;
+		const key = trimmed.replace(/^['"]|['"]$/g, "").toLowerCase();
+		if (seen.has(key)) return;
+		seen.add(key);
+		entries.push(formatCssFontFamilyToken(trimmed));
+	};
+
+	if (primaryFamily) push(primaryFamily);
+	for (const family of DEFAULT_MONO_FONT_FAMILIES) push(family);
+	return entries.join(", ");
+}
+
+function getStudioMonoFontStack(): string {
+	if (cachedStudioMonoFontStack) return cachedStudioMonoFontStack;
+
+	const override = sanitizeCssValue(process.env.PI_STUDIO_FONT_MONO ?? "");
+	if (override) {
+		cachedStudioMonoFontStack = override;
+		return cachedStudioMonoFontStack;
+	}
+
+	cachedStudioMonoFontStack = buildMonoFontStack(detectTerminalMonospaceFontFamily());
+	return cachedStudioMonoFontStack;
+}
+
 function resolveThemeExportValue(
 	value: string | number | undefined,
 	vars: Record<string, string | number>,
@@ -865,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
@@ -1498,6 +1703,13 @@ function parseIncomingMessage(data: RawData): IncomingStudioMessage | null {
 		};
 	}
 
+	if (msg.type === "cancel_request" && typeof msg.requestId === "string") {
+		return {
+			type: "cancel_request",
+			requestId: msg.requestId,
+		};
+	}
+
 	return null;
 }
 
@@ -1693,6 +1905,7 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 			? "0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 14px rgba(15, 23, 42, 0.04)"
 			: "0 1px 2px rgba(0, 0, 0, 0.36), 0 6px 18px rgba(0, 0, 0, 0.22)";
 	const accentContrast = style.mode === "light" ? "#ffffff" : "#0e1616";
+	const errorContrast = style.mode === "light" ? "#ffffff" : "#0e1616";
 	const blockquoteBg = withAlpha(
 		style.palette.mdQuoteBorder,
 		style.mode === "light" ? 0.10 : 0.16,
@@ -1706,6 +1919,7 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 	const editorBg = style.mode === "light"
 		? blendColors(style.palette.panel, "#ffffff", 0.5)
 		: style.palette.panel;
+	const monoFontStack = getStudioMonoFontStack();
 
 	return {
 		"color-scheme": style.mode,
@@ -1747,9 +1961,11 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 		"--syntax-punctuation": style.palette.syntaxPunctuation,
 		"--panel-shadow": panelShadow,
 		"--accent-contrast": accentContrast,
+		"--error-contrast": errorContrast,
 		"--blockquote-bg": blockquoteBg,
 		"--table-alt-bg": tableAltBg,
 		"--editor-bg": editorBg,
+		"--font-mono": monoFontStack,
 	};
 }
 
@@ -1780,10 +1996,11 @@ function buildStudioHtml(
 			: "";
 	const style = getStudioThemeStyle(theme);
 	const vars = buildThemeCssVars(style);
+	const monoFontStack = vars["--font-mono"] ?? buildMonoFontStack();
 	const mermaidConfig = {
 		startOnLoad: false,
 		theme: "base",
-		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+		fontFamily: monoFontStack,
 		flowchart: {
 			curve: "basis",
 		},
@@ -1909,6 +2126,14 @@ ${cssVarsBlock}
     }
 
     #sendRunBtn,
+    #critiqueBtn {
+      min-width: 10rem;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    #sendRunBtn:not(:disabled):not(.request-stop-active),
     #loadResponseBtn:not(:disabled):not([hidden]) {
       background: var(--accent);
       border-color: var(--accent);
@@ -1916,11 +2141,24 @@ ${cssVarsBlock}
       font-weight: 600;
     }
 
-    #sendRunBtn:not(:disabled):hover,
+    #sendRunBtn:not(:disabled):not(.request-stop-active):hover,
     #loadResponseBtn:not(:disabled):not([hidden]):hover {
       filter: brightness(0.95);
     }
 
+    #sendRunBtn.request-stop-active,
+    #critiqueBtn.request-stop-active {
+      background: var(--error);
+      border-color: var(--error);
+      color: var(--error-contrast);
+      font-weight: 600;
+    }
+
+    #sendRunBtn.request-stop-active:not(:disabled):hover,
+    #critiqueBtn.request-stop-active:not(:disabled):hover {
+      filter: brightness(0.95);
+    }
+
     .file-label {
       cursor: pointer;
       display: inline-flex;
@@ -2034,7 +2272,7 @@ ${cssVarsBlock}
       font-size: 13px;
       line-height: 1.45;
       tab-size: 2;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-family: var(--font-mono);
       resize: vertical;
     }
 
@@ -2074,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 {
@@ -2181,7 +2415,7 @@ ${cssVarsBlock}
       word-break: normal;
       overflow-wrap: break-word;
       overscroll-behavior: none;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-family: var(--font-mono);
       font-size: 13px;
       line-height: 1.45;
       tab-size: 2;
@@ -2424,7 +2658,7 @@ ${cssVarsBlock}
     }
 
     .rendered-markdown code {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-family: var(--font-mono);
       font-size: 0.9em;
       color: var(--md-code);
     }
@@ -2571,7 +2805,7 @@ ${cssVarsBlock}
       margin: 0;
       white-space: pre-wrap;
       word-break: break-word;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-family: var(--font-mono);
       font-size: 13px;
       line-height: 1.5;
     }
@@ -2580,7 +2814,7 @@ ${cssVarsBlock}
       margin: 0;
       white-space: pre-wrap;
       word-break: break-word;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-family: var(--font-mono);
       font-size: 13px;
       line-height: 1.5;
     }
@@ -2844,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">
@@ -2943,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>
@@ -3040,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");
@@ -3181,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)};
@@ -3754,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());
@@ -3930,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;
         }
 
@@ -3940,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) {
@@ -4580,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);
       }
@@ -4642,7 +4882,7 @@ ${cssVarsBlock}
         saveOverBtn.disabled = uiBusy || !canSaveOver;
         sendEditorBtn.disabled = uiBusy;
         if (getEditorBtn) getEditorBtn.disabled = uiBusy;
-        sendRunBtn.disabled = uiBusy;
+        syncRunAndCritiqueButtons();
         copyDraftBtn.disabled = uiBusy;
         if (highlightSelect) highlightSelect.disabled = uiBusy;
         if (langSelect) langSelect.disabled = uiBusy;
@@ -4655,7 +4895,6 @@ ${cssVarsBlock}
         followSelect.disabled = uiBusy;
         if (responseHighlightSelect) responseHighlightSelect.disabled = uiBusy || rightView !== "markdown";
         insertHeaderBtn.disabled = uiBusy;
-        critiqueBtn.disabled = uiBusy;
         lensSelect.disabled = uiBusy;
         updateSaveFileTooltip();
         updateHistoryControls();
@@ -4792,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 = "";
 
@@ -5352,6 +5591,51 @@ ${cssVarsBlock}
         renderActiveResult();
       }
 
+      function getAbortablePendingKind() {
+        if (!pendingRequestId) return null;
+        return pendingKind === "direct" || pendingKind === "critique" ? pendingKind : null;
+      }
+
+      function requestCancelForPendingRequest(expectedKind) {
+        const activeKind = getAbortablePendingKind();
+        if (!activeKind || activeKind !== expectedKind || !pendingRequestId) {
+          setStatus("No matching Studio request is running.", "warning");
+          return false;
+        }
+        const sent = sendMessage({ type: "cancel_request", requestId: pendingRequestId });
+        if (!sent) return false;
+        setStatus("Stopping request…", "warning");
+        return true;
+      }
+
+      function syncRunAndCritiqueButtons() {
+        const activeKind = getAbortablePendingKind();
+        const sendRunIsStop = activeKind === "direct";
+        const critiqueIsStop = activeKind === "critique";
+
+        if (sendRunBtn) {
+          sendRunBtn.textContent = sendRunIsStop ? "Stop" : "Run editor text";
+          sendRunBtn.classList.toggle("request-stop-active", sendRunIsStop);
+          sendRunBtn.disabled = sendRunIsStop ? wsState === "Disconnected" : (uiBusy || critiqueIsStop);
+          sendRunBtn.title = sendRunIsStop
+            ? "Stop the running editor-text request."
+            : (annotationsEnabled
+              ? "Run editor text as-is (includes [an: ...] markers). Shortcut: Cmd/Ctrl+Enter."
+              : "Run editor text with [an: ...] markers stripped. Shortcut: Cmd/Ctrl+Enter.");
+        }
+
+        if (critiqueBtn) {
+          critiqueBtn.textContent = critiqueIsStop ? "Stop" : "Critique editor text";
+          critiqueBtn.classList.toggle("request-stop-active", critiqueIsStop);
+          critiqueBtn.disabled = critiqueIsStop ? wsState === "Disconnected" : (uiBusy || sendRunIsStop);
+          critiqueBtn.title = critiqueIsStop
+            ? "Stop the running critique request."
+            : (annotationsEnabled
+              ? "Critique editor text as-is (includes [an: ...] markers)."
+              : "Critique editor text with [an: ...] markers stripped.");
+        }
+      }
+
       function updateAnnotationModeUi() {
         if (annotationModeSelect) {
           annotationModeSelect.value = annotationsEnabled ? "on" : "off";
@@ -5360,17 +5644,7 @@ ${cssVarsBlock}
             : "Annotations Hidden: keep markers in editor, hide in preview, and strip before Run/Critique.";
         }
 
-        if (sendRunBtn) {
-          sendRunBtn.title = annotationsEnabled
-            ? "Run editor text as-is (includes [an: ...] markers). Shortcut: Cmd/Ctrl+Enter."
-            : "Run editor text with [an: ...] markers stripped. Shortcut: Cmd/Ctrl+Enter.";
-        }
-
-        if (critiqueBtn) {
-          critiqueBtn.title = annotationsEnabled
-            ? "Critique editor text as-is (includes [an: ...] markers)."
-            : "Critique editor text with [an: ...] markers stripped.";
-        }
+        syncRunAndCritiqueButtons();
       }
 
       function setAnnotationsEnabled(enabled, _options) {
@@ -5695,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;
             }
 
@@ -6070,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) {
@@ -6108,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();
       });
@@ -6192,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();
@@ -6254,6 +6538,11 @@ ${cssVarsBlock}
       });
 
       critiqueBtn.addEventListener("click", () => {
+        if (getAbortablePendingKind() === "critique") {
+          requestCancelForPendingRequest("critique");
+          return;
+        }
+
         const preparedDocumentText = prepareEditorTextForSend(sourceTextEl.value);
         const documentText = preparedDocumentText.trim();
         if (!documentText) {
@@ -6449,6 +6738,11 @@ ${cssVarsBlock}
       }
 
       sendRunBtn.addEventListener("click", () => {
+        if (getAbortablePendingKind() === "direct") {
+          requestCancelForPendingRequest("direct");
+          return;
+        }
+
         const prepared = prepareEditorTextForSend(sourceTextEl.value);
         if (!prepared.trim()) {
           setStatus("Editor is empty. Nothing to run.", "warning");
@@ -6662,6 +6956,7 @@ export default function (pi: ExtensionAPI) {
 	let studioCwd = process.cwd();
 	let lastCommandCtx: ExtensionCommandContext | null = null;
 	let lastThemeVarsJson = "";
+	let suppressedStudioResponse: { requestId: string; kind: StudioRequestKind } | null = null;
 	let agentBusy = false;
 	let terminalActivityPhase: TerminalActivityPhase = "idle";
 	let terminalActivityToolName: string | null = null;
@@ -6916,7 +7211,35 @@ export default function (pi: ExtensionAPI) {
 		}
 	};
 
+	const cancelActiveRequest = (requestId: string): { ok: true; kind: StudioRequestKind } | { ok: false; message: string } => {
+		if (!activeRequest) {
+			return { ok: false, message: "No studio request is currently running." };
+		}
+		if (activeRequest.id !== requestId) {
+			return { ok: false, message: "That studio request is no longer active." };
+		}
+		if (!lastCommandCtx) {
+			return { ok: false, message: "No interactive pi context is available to stop the request." };
+		}
+
+		const kind = activeRequest.kind;
+		try {
+			lastCommandCtx.abort();
+		} catch (error) {
+			return {
+				ok: false,
+				message: `Failed to stop request: ${error instanceof Error ? error.message : String(error)}`,
+			};
+		}
+
+		suppressedStudioResponse = { requestId, kind };
+		emitDebugEvent("cancel_active_request", { requestId, kind });
+		clearActiveRequest({ notify: "Cancelled request.", level: "warning" });
+		return { ok: true, kind };
+	};
+
 	const beginRequest = (requestId: string, kind: StudioRequestKind): boolean => {
+		suppressedStudioResponse = null;
 		emitDebugEvent("begin_request_attempt", {
 			requestId,
 			kind,
@@ -7024,6 +7347,19 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
+		if (msg.type === "cancel_request") {
+			if (!isValidRequestId(msg.requestId)) {
+				sendToClient(client, { type: "error", requestId: msg.requestId, message: "Invalid request ID." });
+				return;
+			}
+
+			const result = cancelActiveRequest(msg.requestId);
+			if (!result.ok) {
+				sendToClient(client, { type: "error", requestId: msg.requestId, message: result.message });
+			}
+			return;
+		}
+
 		if (msg.type === "critique_request") {
 			if (!isValidRequestId(msg.requestId)) {
 				sendToClient(client, { type: "error", requestId: msg.requestId, message: "Invalid request ID." });
@@ -7856,6 +8192,16 @@ export default function (pi: ExtensionAPI) {
 
 		if (!markdown) return;
 
+		if (suppressedStudioResponse) {
+			emitDebugEvent("suppressed_cancelled_response", {
+				requestId: suppressedStudioResponse.requestId,
+				kind: suppressedStudioResponse.kind,
+				markdownLength: markdown.length,
+				thinkingLength: thinking ? thinking.length : 0,
+			});
+			return;
+		}
+
 		syncStudioResponseHistory(ctx.sessionManager.getBranch());
 		refreshContextUsage(ctx);
 		const latestHistoryItem = studioResponseHistory[studioResponseHistory.length - 1];
@@ -7936,7 +8282,12 @@ export default function (pi: ExtensionAPI) {
 	pi.on("agent_end", async () => {
 		agentBusy = false;
 		refreshContextUsage();
-		emitDebugEvent("agent_end", { activeRequestId: activeRequest?.id ?? null, activeRequestKind: activeRequest?.kind ?? null });
+		emitDebugEvent("agent_end", {
+			activeRequestId: activeRequest?.id ?? null,
+			activeRequestKind: activeRequest?.kind ?? null,
+			suppressedRequestId: suppressedStudioResponse?.requestId ?? null,
+			suppressedRequestKind: suppressedStudioResponse?.kind ?? null,
+		});
 		setTerminalActivity("idle");
 		if (activeRequest) {
 			const requestId = activeRequest.id;
@@ -7947,6 +8298,7 @@ export default function (pi: ExtensionAPI) {
 			});
 			clearActiveRequest();
 		}
+		suppressedStudioResponse = null;
 	});
 
 	pi.on("session_shutdown", async () => {

package/package.json

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