pi-studio 0.5.4 → 0.5.6

package/CHANGELOG.md

@@ -88,6 +88,21 @@ All notable changes to `pi-studio` are documented here.
 
 ## [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
+
+### Fixed
+- Improved raw-editor caret/overlay alignment in Syntax highlight mode:
+  - width-neutral annotation highlight styling
+  - more textarea-like wrap behavior in the highlight overlay
+  - preserved empty trailing lines in highlighted output so end-of-file blank lines stay aligned
+  - reduced raw overlay metric drift for comment/quote styling
+
 ## [0.5.4] — 2026-03-09
 
 ### Added

package/README.md

@@ -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/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>,
@@ -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;
     }
 
@@ -2165,6 +2403,7 @@ ${cssVarsBlock}
       border-radius: 8px;
       background: var(--editor-bg);
       overflow: hidden;
+      overscroll-behavior: none;
     }
 
     .editor-highlight {
@@ -2177,8 +2416,10 @@ ${cssVarsBlock}
       overflow: auto;
       pointer-events: none;
       white-space: pre-wrap;
-      word-break: break-word;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      word-break: normal;
+      overflow-wrap: break-word;
+      overscroll-behavior: none;
+      font-family: var(--font-mono);
       font-size: 13px;
       line-height: 1.45;
       tab-size: 2;
@@ -2197,6 +2438,7 @@ ${cssVarsBlock}
       background: transparent;
       resize: none;
       outline: none;
+      overscroll-behavior: none;
     }
 
     #sourceText.highlight-active {
@@ -2240,7 +2482,7 @@ ${cssVarsBlock}
 
     .hl-code-com {
       color: var(--syntax-comment);
-      font-style: italic;
+      font-style: normal;
     }
 
     .hl-code-var,
@@ -2269,7 +2511,7 @@ ${cssVarsBlock}
 
     .hl-quote {
       color: var(--md-quote);
-      font-style: italic;
+      font-style: normal;
     }
 
     .hl-link {
@@ -2284,9 +2526,10 @@ ${cssVarsBlock}
     .hl-annotation {
       color: var(--accent);
       background: var(--accent-soft);
-      border: 1px solid var(--marker-border);
+      border: 0;
       border-radius: 4px;
-      padding: 0 3px;
+      padding: 0;
+      box-shadow: inset 0 0 0 1px var(--marker-border);
     }
 
     .hl-annotation-muted {
@@ -2419,7 +2662,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);
     }
@@ -2566,7 +2809,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;
     }
@@ -2575,7 +2818,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;
     }
@@ -3177,6 +3420,7 @@ ${cssVarsBlock}
       let editorHighlightRenderRaf = null;
       let annotationsEnabled = true;
       const ANNOTATION_MARKER_REGEX = /\\[an:\\s*([^\\]\\n]+?)\\]/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)};
       const MERMAID_UNAVAILABLE_MESSAGE = "Mermaid renderer unavailable. Showing mermaid blocks as code.";
@@ -4636,7 +4880,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;
@@ -4649,7 +4893,6 @@ ${cssVarsBlock}
         followSelect.disabled = uiBusy;
         if (responseHighlightSelect) responseHighlightSelect.disabled = uiBusy || rightView !== "markdown";
         insertHeaderBtn.disabled = uiBusy;
-        critiqueBtn.disabled = uiBusy;
         lensSelect.disabled = uiBusy;
         updateSaveFileTooltip();
         updateHistoryControls();
@@ -5073,7 +5316,12 @@ ${cssVarsBlock}
           }
 
           if (inFence) {
-            out.push(line.length > 0 ? highlightCodeLine(line, fenceLanguage) : "");
+            out.push(line.length > 0 ? highlightCodeLine(line, fenceLanguage) : EMPTY_OVERLAY_LINE);
+            continue;
+          }
+
+          if (line.length === 0) {
+            out.push(EMPTY_OVERLAY_LINE);
             continue;
           }
 
@@ -5112,7 +5360,7 @@ ${cssVarsBlock}
         const out = [];
         for (const line of lines) {
           if (line.length === 0) {
-            out.push("");
+            out.push(EMPTY_OVERLAY_LINE);
           } else if (lang) {
             out.push(highlightCodeLine(line, lang));
           } else {
@@ -5341,6 +5589,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";
@@ -5349,17 +5642,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) {
@@ -6243,6 +6526,11 @@ ${cssVarsBlock}
       });
 
       critiqueBtn.addEventListener("click", () => {
+        if (getAbortablePendingKind() === "critique") {
+          requestCancelForPendingRequest("critique");
+          return;
+        }
+
         const preparedDocumentText = prepareEditorTextForSend(sourceTextEl.value);
         const documentText = preparedDocumentText.trim();
         if (!documentText) {
@@ -6438,6 +6726,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");
@@ -6651,6 +6944,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;
@@ -6905,7 +7199,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,
@@ -7013,6 +7335,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." });
@@ -7845,6 +8180,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];
@@ -7925,7 +8270,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;
@@ -7936,6 +8286,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.4",
+  "version": "0.5.6",
   "description": "Browser GUI for structured critique workflows in pi",
   "type": "module",
   "license": "MIT",