pi-studio 0.9.9 → 0.9.11

package/client/studio.css

@@ -2456,6 +2456,39 @@
       overflow-x: auto;
     }
 
+    .rendered-markdown .mermaid-source-toolbar {
+      display: flex;
+      justify-content: flex-end;
+      margin: 0 0 4px;
+      pointer-events: none;
+    }
+
+    .rendered-markdown .mermaid-source-toolbar .studio-copy-mermaid-source-btn {
+      position: static;
+      top: auto;
+      right: auto;
+      z-index: auto;
+      padding: 2px 7px;
+      border-color: transparent;
+      background: transparent;
+      box-shadow: none;
+      font-size: 11px;
+      opacity: 0.38;
+      pointer-events: auto;
+    }
+
+    .rendered-markdown .mermaid-container:hover > .studio-copy-block-btn {
+      opacity: 0.38;
+    }
+
+    .rendered-markdown .mermaid-source-toolbar .studio-copy-mermaid-source-btn:hover,
+    .rendered-markdown .mermaid-source-toolbar .studio-copy-mermaid-source-btn:focus-visible {
+      opacity: 1;
+      color: var(--text);
+      border-color: var(--control-border);
+      background: var(--panel);
+    }
+
     .rendered-markdown .mermaid-container svg {
       max-width: 100%;
       height: auto;
@@ -3326,15 +3359,26 @@
       grid-area: hint;
       justify-self: end;
       align-self: center;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      border: 1px solid transparent;
+      background: transparent;
       color: var(--studio-footer-text, var(--muted));
       font-size: 11px;
+      line-height: 1.2;
       white-space: nowrap;
-      text-align: right;
-      font-style: normal;
-      opacity: 0.86;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
+      opacity: 0.9;
+    }
+
+    .shortcut-hint:not(:disabled):hover,
+    .shortcut-hint:focus-visible {
+      background: var(--panel-2);
+      border-color: var(--control-border);
+      color: var(--text);
+      opacity: 1;
     }
 
     .footer-compact-btn {
@@ -3369,7 +3413,8 @@
       overflow: hidden;
     }
 
-    .scratchpad-overlay {
+    .scratchpad-overlay,
+    .shortcuts-overlay {
       position: fixed;
       inset: 0;
       z-index: 50;
@@ -3381,10 +3426,28 @@
       backdrop-filter: blur(2px);
     }
 
-    .scratchpad-overlay[hidden] {
+    .scratchpad-overlay[hidden],
+    .shortcuts-overlay[hidden] {
       display: none !important;
     }
 
+    .scratchpad-dialog,
+    .shortcuts-dialog {
+      width: min(860px, 100%);
+      max-height: min(82vh, 900px);
+      border: 1px solid var(--panel-border);
+      border-radius: 14px;
+      background: var(--panel);
+      box-shadow: 0 18px 50px var(--shadow-color);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .shortcuts-dialog {
+      width: min(720px, 100%);
+    }
+
     .scratchpad-dialog {
       width: min(860px, 100%);
       max-height: min(82vh, 900px);
@@ -3397,7 +3460,8 @@
       overflow: hidden;
     }
 
-    .scratchpad-header {
+    .scratchpad-header,
+    .shortcuts-header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
@@ -3407,18 +3471,21 @@
       background: var(--scratchpad-header-bg, var(--panel-2));
     }
 
-    .scratchpad-header > div {
+    .scratchpad-header > div,
+    .shortcuts-header > div {
       flex: 1 1 auto;
       min-width: 0;
     }
 
-    .scratchpad-header h2 {
+    .scratchpad-header h2,
+    .shortcuts-header h2 {
       margin: 0;
       font-size: 17px;
       font-weight: 600;
     }
 
-    .scratchpad-description {
+    .scratchpad-description,
+    .shortcuts-description {
       margin: 6px 0 0;
       font-size: 12px;
       line-height: 1.45;
@@ -3426,12 +3493,60 @@
       max-width: none;
     }
 
-    .scratchpad-close-btn {
+    .scratchpad-close-btn,
+    .shortcuts-close-btn {
       padding: 6px 10px;
       line-height: 1;
       flex: 0 0 auto;
     }
 
+    .shortcuts-body {
+      display: grid;
+      gap: 14px;
+      padding: 16px 18px 18px;
+      overflow: auto;
+      background: var(--panel);
+    }
+
+    .shortcuts-group h3 {
+      margin: 0 0 8px;
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--studio-info-text, var(--muted));
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .shortcuts-group dl {
+      display: grid;
+      gap: 6px;
+      margin: 0;
+    }
+
+    .shortcuts-group dl > div {
+      display: grid;
+      grid-template-columns: minmax(130px, max-content) minmax(0, 1fr);
+      gap: 12px;
+      align-items: baseline;
+      padding: 6px 0;
+      border-top: 1px solid var(--border-subtle);
+    }
+
+    .shortcuts-group dt {
+      margin: 0;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--text);
+      white-space: nowrap;
+    }
+
+    .shortcuts-group dd {
+      margin: 0;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 12px;
+      line-height: 1.35;
+    }
+
     .scratchpad-textarea {
       width: 100%;
       min-height: 280px;

package/index.ts

@@ -64,6 +64,19 @@ interface StudioPromptDescriptor {
 	promptTriggerText: string | null;
 }
 
+interface StudioHtmlPreviewMathRenderItem {
+	mathId: string;
+	tex: string;
+	display: boolean;
+}
+
+interface StudioHtmlPreviewMathRenderResult {
+	mathId: string;
+	ok: boolean;
+	html?: string;
+	error?: string;
+}
+
 interface ActiveStudioRequest extends StudioPromptDescriptor {
 	id: string;
 	kind: StudioRequestKind;
@@ -460,6 +473,9 @@ const REQUEST_TIMEOUT_MS = 5 * 60 * 1000;
 const PREVIEW_RENDER_MAX_CHARS = 400_000;
 const PDF_EXPORT_MAX_CHARS = 400_000;
 const HTML_EXPORT_MAX_CHARS = 400_000;
+const HTML_PREVIEW_MATH_RENDER_MAX_ITEMS = 250;
+const HTML_PREVIEW_MATH_RENDER_ITEM_MAX_CHARS = 8_000;
+const HTML_PREVIEW_MATH_RENDER_TOTAL_MAX_CHARS = 120_000;
 const STUDIO_QUIZ_SOURCE_MAX_CHARS = 80_000;
 const STUDIO_QUIZ_CONTEXT_FILE_MAX_CHARS = 14_000;
 const STUDIO_QUIZ_CONTEXT_MAX_FILES = 18;
@@ -4900,6 +4916,72 @@ function stripMathMlAnnotationTags(html: string): string {
 	});
 }
 
+function normalizeStudioHtmlPreviewMathForPandoc(tex: string): string {
+	return String(tex ?? "")
+		.replace(/\r\n/g, "\n")
+		.replace(/\\rm\s*\{([^{}]+)\}/g, "\\mathrm{$1}")
+		.replace(/\\rm\s+([A-Za-z]+)(?=[^A-Za-z]|$)/g, "\\mathrm{$1}");
+}
+
+function getStudioHtmlPreviewMathWrapperId(index: number): string {
+	return `studio-html-preview-math-${Math.max(0, Math.floor(index))}`;
+}
+
+function buildStudioHtmlPreviewMathPandocSource(items: StudioHtmlPreviewMathRenderItem[]): string {
+	return items.map((item, index) => {
+		const wrapperId = getStudioHtmlPreviewMathWrapperId(index);
+		const tex = normalizeStudioHtmlPreviewMathForPandoc(item.tex);
+		const mathSource = item.display ? `\\[\n${tex}\n\\]` : `\\(${tex}\\)`;
+		return `:::: {#${wrapperId} .studio-html-preview-math-render-item}\n${mathSource}\n::::`;
+	}).join("\n\n");
+}
+
+function extractStudioHtmlPreviewMathHtml(renderedHtml: string, wrapperId: string): string {
+	const idPattern = escapeStudioRegExpLiteral(wrapperId);
+	const wrapperPattern = new RegExp(`<div\\b(?=[^>]*\\bid="${idPattern}")[^>]*>([\\s\\S]*?)<\\/div>`, "i");
+	const wrapperMatch = String(renderedHtml ?? "").match(wrapperPattern);
+	const wrapperHtml = wrapperMatch ? String(wrapperMatch[1] ?? "") : "";
+	const mathMatch = wrapperHtml.match(/<math\b[\s\S]*?<\/math>/i);
+	return mathMatch ? stripMathMlAnnotationTags(mathMatch[0]) : "";
+}
+
+async function renderStudioHtmlPreviewMathWithPandoc(items: StudioHtmlPreviewMathRenderItem[]): Promise<StudioHtmlPreviewMathRenderResult[]> {
+	if (items.length === 0) return [];
+	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
+	const inputFormat = "markdown+tex_math_dollars+tex_math_single_backslash+tex_math_double_backslash";
+	const args = ["-f", inputFormat, "-t", "html5", "--mathml", "--wrap=none"];
+	const source = buildStudioHtmlPreviewMathPandocSource(items);
+	const pandocResult = await runStudioSubprocess(pandocCommand, args, {
+		input: source,
+		timeoutMs: STUDIO_PANDOC_TIMEOUT_MS,
+		stdoutMaxBytes: Math.min(STUDIO_HTML_RENDER_OUTPUT_MAX_BYTES, 10_000_000),
+		label: "pandoc HTML preview math render",
+		notFoundMessage: "pandoc was not found. Install pandoc or set PANDOC_PATH to the pandoc binary.",
+	});
+	if (pandocResult.code !== 0) {
+		throw new Error(`pandoc math render failed with exit code ${pandocResult.code}${pandocResult.stderr ? `: ${pandocResult.stderr}` : ""}`);
+	}
+	if (pandocResult.stdoutTruncated) {
+		throw new Error("pandoc math render output exceeded Studio's size limit.");
+	}
+
+	return items.map((item, index) => {
+		const html = extractStudioHtmlPreviewMathHtml(pandocResult.stdout, getStudioHtmlPreviewMathWrapperId(index));
+		if (!html) {
+			return {
+				mathId: item.mathId,
+				ok: false,
+				error: "Pandoc did not render this expression as MathML.",
+			};
+		}
+		return {
+			mathId: item.mathId,
+			ok: true,
+			html,
+		};
+	});
+}
+
 function normalizeObsidianImages(markdown: string): string {
 	// Use angle-bracket destinations so paths with spaces/special chars are safe for Pandoc
 	return markdown
@@ -8675,7 +8757,7 @@ ${cssVarsBlock}
       <label class="file-label" title="Load a local file into editor text.">Load file content<input id="fileInput" type="file" accept=".md,.markdown,.mdx,.qmd,.js,.mjs,.cjs,.jsx,.ts,.mts,.cts,.tsx,.py,.pyw,.sh,.bash,.zsh,.json,.jsonc,.json5,.rs,.c,.h,.cpp,.cxx,.cc,.hpp,.hxx,.jl,.f90,.f95,.f03,.f,.for,.r,.R,.m,.tex,.latex,.diff,.patch,.java,.go,.rb,.swift,.html,.htm,.css,.xml,.yaml,.yml,.toml,.lua,.txt,.rst,.adoc" /></label>
       <button id="loadGitDiffBtn" type="button" title="Load the current git diff from the Studio context into the editor.">Load git diff</button>
       <button id="getEditorBtn" type="button" title="Load the current terminal editor draft into Studio.">Load from pi editor</button>
-      <button id="zenModeBtn" class="zen-mode-btn" type="button" title="Hide secondary Studio controls.">Zen</button>
+      <button id="zenModeBtn" class="zen-mode-btn" type="button" title="Hide secondary Studio controls. Shortcut: F9.">Zen</button>
     </div>
   </header>
 
@@ -8683,7 +8765,7 @@ ${cssVarsBlock}
     <section id="leftPane">
       <div id="leftSectionHeader" class="section-header">
         <div class="section-header-main">
-          <select id="editorViewSelect" aria-label="Editor view mode">
+          <select id="editorViewSelect" aria-label="Editor view mode" title="Editor view mode. Shortcut: F7 when the editor pane is active; F6 switches panes.">
             <option value="markdown" selected>Editor (Raw)</option>
             <option value="preview">Editor (Preview)</option>
           </select>
@@ -8858,7 +8940,7 @@ ${cssVarsBlock}
     <section id="rightPane">
       <div id="rightSectionHeader" class="section-header">
         <div class="section-header-main">
-          <select id="rightViewSelect" aria-label="Response view mode">
+          <select id="rightViewSelect" aria-label="Response view mode" title="Right pane view mode. Shortcut: F7 when the right pane is active; F6 switches panes.">
             <option value="markdown">Response (Raw)</option>
             <option value="preview" selected>Response (Preview)</option>
             <option value="editor-preview">Editor (Preview)</option>
@@ -8929,9 +9011,50 @@ ${cssVarsBlock}
   <footer>
     <span id="statusLine"><span id="statusSpinner" aria-hidden="true"> </span><span id="status">Booting studio…</span></span>
     <span id="footerMeta" class="footer-meta"><span id="footerMetaText" class="footer-meta-text"><span id="footerMetaModel" class="footer-meta-part footer-meta-model">${initialModel}</span><span class="footer-meta-sep">·</span><span id="footerMetaTerminal" class="footer-meta-part footer-meta-terminal">${initialTerminal}</span><span class="footer-meta-sep">·</span><span id="footerMetaContext" class="footer-meta-part footer-meta-context">unknown</span></span><button id="compactBtn" class="footer-compact-btn" type="button" title="Trigger pi context compaction now.">Compact</button></span>
-    <span class="shortcut-hint">Focus pane: F10 (or Cmd/Ctrl+Esc) to toggle · Save editor: Cmd/Ctrl+S · Run / queue steering: Cmd/Ctrl+Enter · Stop request: Esc</span>
+    <button id="shortcutsBtn" class="shortcut-hint" type="button" title="Show Studio keyboard shortcuts. Press ? when not editing text.">Shortcuts (?)</button>
   </footer>
 
+  <div id="shortcutsOverlay" class="shortcuts-overlay" hidden>
+    <div id="shortcutsDialog" class="shortcuts-dialog" role="dialog" aria-modal="true" aria-labelledby="shortcutsTitle">
+      <div class="shortcuts-header">
+        <div>
+          <h2 id="shortcutsTitle">Keyboard shortcuts</h2>
+          <p class="shortcuts-description">Studio navigation and high-frequency actions.</p>
+        </div>
+        <button id="shortcutsCloseBtn" class="shortcuts-close-btn" type="button" aria-label="Close keyboard shortcuts">Close</button>
+      </div>
+      <div class="shortcuts-body">
+        <section class="shortcuts-group">
+          <h3>Navigation</h3>
+          <dl>
+            <div><dt>F6</dt><dd>Switch between editor and right pane</dd></div>
+            <div><dt>F7 / Shift+F7</dt><dd>Cycle the active pane's view</dd></div>
+            <div><dt>F8</dt><dd>Focus editor text</dd></div>
+            <div><dt>Shift+F8</dt><dd>Focus right-pane content</dd></div>
+            <div><dt>F9</dt><dd>Toggle Zen mode</dd></div>
+            <div><dt>F10</dt><dd>Focus or unfocus the active pane</dd></div>
+            <div><dt>Esc</dt><dd>Close overlays, exit pane focus, or stop an active request</dd></div>
+            <div><dt>?</dt><dd>Show keyboard shortcuts when not editing text</dd></div>
+          </dl>
+        </section>
+        <section class="shortcuts-group">
+          <h3>Editor</h3>
+          <dl>
+            <div><dt>Cmd/Ctrl+S</dt><dd>Save editor</dd></div>
+            <div><dt>Cmd/Ctrl+Enter</dt><dd>Run editor text, or queue steering during an active run</dd></div>
+            <div><dt>Tab / Shift+Tab</dt><dd>Indent or unindent selected editor text</dd></div>
+          </dl>
+        </section>
+        <section class="shortcuts-group">
+          <h3>REPL</h3>
+          <dl>
+            <div><dt>Cmd/Ctrl+Shift+Enter</dt><dd>Send selection, chunks, or editor text to the active REPL when the right pane is REPL</dd></div>
+          </dl>
+        </section>
+      </div>
+    </div>
+  </div>
+
   <div id="scratchpadOverlay" class="scratchpad-overlay" hidden>
     <div id="scratchpadDialog" class="scratchpad-dialog" role="dialog" aria-modal="true" aria-labelledby="scratchpadTitle">
       <div class="scratchpad-header">
@@ -11438,6 +11561,84 @@ export default function (pi: ExtensionAPI) {
 		}
 	};
 
+	const handleRenderMathRequest = async (req: IncomingMessage, res: ServerResponse) => {
+		let rawBody = "";
+		try {
+			rawBody = await readRequestBody(req, REQUEST_BODY_MAX_BYTES);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			const status = message.includes("exceeds") ? 413 : 400;
+			respondJson(res, status, { ok: false, error: message });
+			return;
+		}
+
+		let parsedBody: unknown;
+		try {
+			parsedBody = rawBody ? JSON.parse(rawBody) : {};
+		} catch {
+			respondJson(res, 400, { ok: false, error: "Invalid JSON body." });
+			return;
+		}
+
+		const rawItems =
+			parsedBody && typeof parsedBody === "object" && Array.isArray((parsedBody as { items?: unknown }).items)
+				? (parsedBody as { items: unknown[] }).items
+				: null;
+		if (!rawItems) {
+			respondJson(res, 400, { ok: false, error: "Missing math items array in request body." });
+			return;
+		}
+		if (rawItems.length > HTML_PREVIEW_MATH_RENDER_MAX_ITEMS) {
+			respondJson(res, 413, {
+				ok: false,
+				error: `HTML preview math render accepts at most ${HTML_PREVIEW_MATH_RENDER_MAX_ITEMS} items per request.`,
+			});
+			return;
+		}
+
+		const items: StudioHtmlPreviewMathRenderItem[] = [];
+		let totalChars = 0;
+		for (const rawItem of rawItems) {
+			const item = rawItem && typeof rawItem === "object" ? rawItem as { mathId?: unknown; tex?: unknown; display?: unknown } : null;
+			const mathId = typeof item?.mathId === "string" ? item.mathId.trim() : "";
+			const tex = typeof item?.tex === "string" ? item.tex : "";
+			if (!mathId || !tex.trim()) continue;
+			if (mathId.length > 160) {
+				respondJson(res, 400, { ok: false, error: "Math item id is too long." });
+				return;
+			}
+			if (tex.length > HTML_PREVIEW_MATH_RENDER_ITEM_MAX_CHARS) {
+				respondJson(res, 413, {
+					ok: false,
+					error: `A math expression exceeds ${HTML_PREVIEW_MATH_RENDER_ITEM_MAX_CHARS} characters.`,
+				});
+				return;
+			}
+			totalChars += tex.length;
+			if (totalChars > HTML_PREVIEW_MATH_RENDER_TOTAL_MAX_CHARS) {
+				respondJson(res, 413, {
+					ok: false,
+					error: `Math render text exceeds ${HTML_PREVIEW_MATH_RENDER_TOTAL_MAX_CHARS} characters.`,
+				});
+				return;
+			}
+			items.push({ mathId, tex, display: Boolean(item?.display) });
+		}
+
+		if (items.length === 0) {
+			respondJson(res, 400, { ok: false, error: "No valid math items to render." });
+			return;
+		}
+
+		try {
+			const results = await renderStudioHtmlPreviewMathWithPandoc(items);
+			respondJson(res, 200, { ok: true, renderer: "pandoc", results });
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			respondJson(res, 500, { ok: false, error: `Math render failed: ${message}` });
+		}
+	};
+
 	const handleExportPdfRequest = async (req: IncomingMessage, res: ServerResponse) => {
 		let rawBody = "";
 		try {
@@ -11803,6 +12004,29 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
+		if (requestUrl.pathname === "/render-math") {
+			const token = requestUrl.searchParams.get("token") ?? "";
+			if (token !== serverState.token) {
+				respondJson(res, 403, { ok: false, error: "Invalid or expired studio token. Re-run /studio." });
+				return;
+			}
+
+			const method = (req.method ?? "GET").toUpperCase();
+			if (method !== "POST") {
+				res.setHeader("Allow", "POST");
+				respondJson(res, 405, { ok: false, error: "Method not allowed. Use POST." });
+				return;
+			}
+
+			void handleRenderMathRequest(req, res).catch((error) => {
+				respondJson(res, 500, {
+					ok: false,
+					error: `Math render failed: ${error instanceof Error ? error.message : String(error)}`,
+				});
+			});
+			return;
+		}
+
 		if (requestUrl.pathname === "/export-pdf") {
 			const token = requestUrl.searchParams.get("token") ?? "";
 			if (token !== serverState.token) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, active quiz, prompt/response history, live previews, and tmux-backed REPL/literate REPL workflows",
   "type": "module",
   "license": "MIT",