pi-studio 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -12,7 +12,7 @@ All notable changes to `pi-studio` are documented here.
   - **Load response into editor** (for non-critique responses)
   - **Load critique (notes)**
   - **Load critique (full)**
-  - **Copy response**
+  - **Copy response text**
 - Independent Markdown/Preview toggles for Editor and right pane.
 - `Auto-update response: On|Off` + `Get latest response` controls for terminal/editor-composability.
 - Source action: **Run editor text** to submit current editor text directly to the model.
@@ -22,6 +22,8 @@ All notable changes to `pi-studio` are documented here.
 - Math delimiter normalization before preview rendering for `\(...\)` and `\[...\]` syntax (fence-aware).
 - **Load file in editor** action in top controls (browser file picker into editor).
 - README screenshot gallery for dark/light workspace and critique/annotation views.
+- Response-side markdown highlighting toggle (`Highlight markdown: Off|On`) in `Response: Markdown` view, with local preference persistence.
+- Obsidian wiki-image syntax normalization (`![[path]]`, `![[path|alt]]`) before pandoc preview rendering.
 
 ### Changed
 - Removed Annotate/Critique tabs and related mode state.
@@ -30,6 +32,7 @@ All notable changes to `pi-studio` are documented here.
 - Editor sync badge now tracks relation to latest response (`No response loaded`, `In sync with response`, `Edited since response`).
 - Footer continues to show explicit WS phase (`Connecting`, `Ready`, `Submitting`, `Disconnected`) alongside status text.
 - Running text and preparing annotated scaffolds are now separate explicit actions (no hidden header wrapping on send).
+- Renamed file-backed header action from **Save Over** to **Save file**, with tooltip showing the current overwrite target.
 - Critique-specific load actions now focus on notes/full views and are only shown for structured critique responses.
 - Studio still live-updates latest response when assistant output arrives outside studio requests (e.g., manual send from pi editor).
 - Preview pane typography/style now follows the higher-fidelity `/preview-browser` rendering style more closely.

package/README.md

@@ -31,8 +31,9 @@ Status: experimental alpha.
 - Response load helpers:
   - non-critique: **Load response into editor**
   - critique: **Load critique (notes)** / **Load critique (full)**
-- File actions: **Save As…**, **Save Over**, **Load file in editor**
+- File actions: **Save As…**, **Save file**, **Load file in editor**
 - View toggles: `Editor: Markdown|Preview`, `Response: Markdown|Preview`
+- Optional markdown highlighting toggles for editor and response markdown views
 - Theme-aware browser UI based on current pi theme
 
 ## Commands
@@ -73,6 +74,7 @@ pi -e https://github.com/omaclaren/pi-studio
 - One studio request at a time.
 - Studio URLs include a token query parameter; avoid sharing full Studio URLs.
 - Preview panes render markdown via `pandoc` (`gfm+tex_math_dollars` → HTML5 + MathML), sanitized in-browser with `dompurify`.
+- Preview rendering normalizes Obsidian wiki-image syntax (`![[path]]`, `![[path|alt]]`) into standard markdown images.
 - Install pandoc for full preview rendering (`brew install pandoc` on macOS).
 - If `pandoc` is unavailable, preview falls back to plain markdown text with an inline warning.
 - Some screenshots may show the Grammarly browser widget. Grammarly is a separate browser extension and is not part of pi-studio, but it works alongside it.

package/WORKFLOW.md

@@ -74,10 +74,10 @@ Rules:
 
 ## Required UI elements
 
-- Header actions: **Save As…**, **Save Over** (file-backed), **Load file in editor**
+- Header actions: **Save As…**, **Save file** (file-backed), **Load file in editor**
 - Header view toggles: `Editor: Markdown|Preview`, `Response: Markdown|Preview`
 - Preview mode uses server-side `pandoc` rendering (math-aware) with plain-markdown fallback when renderer is unavailable.
-- Editor actions: **Insert annotation header**, **Run editor text**, **Critique editor text** (+ critique focus), **Send to pi editor**, **Copy editor**
+- Editor actions: **Insert annotation header**, **Run editor text**, **Critique editor text** (+ critique focus), **Send to pi editor**, **Copy editor text**
 - Response actions include `Auto-update response: On|Off` + **Get latest response**
 - Source badge: `blank | last model response | file <path> | upload`
 - Response badge: `none | assistant response | assistant critique` (+ timestamp)

package/index.ts

@@ -491,10 +491,16 @@ function stripMathMlAnnotationTags(html: string): string {
 		.replace(/<annotation\b[\s\S]*?<\/annotation>/gi, "");
 }
 
+function normalizeObsidianImages(markdown: string): string {
+	return markdown
+		.replace(/!\[\[([^|\]]+)\|([^\]]+)\]\]/g, "![$2]($1)")
+		.replace(/!\[\[([^\]]+)\]\]/g, "![]($1)");
+}
+
 async function renderStudioMarkdownWithPandoc(markdown: string): Promise<string> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
 	const args = ["-f", "gfm+tex_math_dollars-raw_html", "-t", "html5", "--mathml", "--no-highlight"];
-	const normalizedMarkdown = normalizeMathDelimiters(markdown);
+	const normalizedMarkdown = normalizeObsidianImages(normalizeMathDelimiters(markdown));
 
 	return await new Promise<string>((resolve, reject) => {
 		const child = spawn(pandocCommand, args, { stdio: ["pipe", "pipe", "pipe"] });
@@ -1362,6 +1368,15 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       line-height: 1.5;
     }
 
+    .response-markdown-highlight {
+      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-size: 13px;
+      line-height: 1.5;
+    }
+
     .preview-loading {
       color: var(--muted);
       font-style: italic;
@@ -1462,9 +1477,9 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         <option value="markdown">Response: Markdown</option>
         <option value="preview" selected>Response: Preview</option>
       </select>
-      <button id="saveAsBtn" type="button">Save As…</button>
-      <button id="saveOverBtn" type="button" disabled>Save Over</button>
-      <label class="file-label">Load file in editor<input id="fileInput" type="file" accept=".txt,.md,.markdown,.rst,.adoc,.tex,.json,.js,.ts,.py,.java,.c,.cpp,.go,.rs,.rb,.swift,.sh,.html,.css,.xml,.yaml,.yml,.toml" /></label>
+      <button id="saveAsBtn" type="button" title="Save editor text to a new file path.">Save As…</button>
+      <button id="saveOverBtn" type="button" title="Overwrite current file with editor text." disabled>Save file</button>
+      <label class="file-label" title="Load a local file into editor text.">Load file in editor<input id="fileInput" type="file" accept=".txt,.md,.markdown,.rst,.adoc,.tex,.json,.js,.ts,.py,.java,.c,.cpp,.go,.rs,.rb,.swift,.sh,.html,.css,.xml,.yaml,.yml,.toml" /></label>
     </div>
   </header>
 
@@ -1487,10 +1502,10 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
             </select>
             <button id="critiqueBtn" type="button">Critique editor text</button>
             <button id="sendEditorBtn" type="button">Send to pi editor</button>
-            <button id="copyDraftBtn" type="button">Copy editor</button>
+            <button id="copyDraftBtn" type="button">Copy editor text</button>
             <select id="highlightSelect" aria-label="Editor syntax highlighting">
-              <option value="off" selected>Highlight editor: Off</option>
-              <option value="on">Highlight editor: On</option>
+              <option value="off" selected>Highlight markdown: Off</option>
+              <option value="on">Highlight markdown: On</option>
             </select>
           </div>
         </div>
@@ -1514,11 +1529,15 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
             <option value="on" selected>Auto-update response: On</option>
             <option value="off">Auto-update response: Off</option>
           </select>
+          <select id="responseHighlightSelect" aria-label="Response markdown highlighting">
+            <option value="off" selected>Highlight markdown: Off</option>
+            <option value="on">Highlight markdown: On</option>
+          </select>
           <button id="pullLatestBtn" type="button" title="Fetch the latest assistant response when auto-update is off.">Get latest response</button>
           <button id="loadResponseBtn" type="button">Load response into editor</button>
           <button id="loadCritiqueNotesBtn" type="button" hidden>Load critique (notes)</button>
           <button id="loadCritiqueFullBtn" type="button" hidden>Load critique (full)</button>
-          <button id="copyResponseBtn" type="button">Copy response</button>
+          <button id="copyResponseBtn" type="button">Copy response text</button>
         </div>
       </div>
     </section>
@@ -1570,6 +1589,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       const editorViewSelect = document.getElementById("editorViewSelect");
       const rightViewSelect = document.getElementById("rightViewSelect");
       const followSelect = document.getElementById("followSelect");
+      const responseHighlightSelect = document.getElementById("responseHighlightSelect");
       const pullLatestBtn = document.getElementById("pullLatestBtn");
       const insertHeaderBtn = document.getElementById("insertHeaderBtn");
       const critiqueBtn = document.getElementById("critiqueBtn");
@@ -1617,10 +1637,13 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       let paneFocusTarget = "off";
       const EDITOR_HIGHLIGHT_MAX_CHARS = 80_000;
       const EDITOR_HIGHLIGHT_STORAGE_KEY = "piStudio.editorHighlightEnabled";
+      const RESPONSE_HIGHLIGHT_MAX_CHARS = 120_000;
+      const RESPONSE_HIGHLIGHT_STORAGE_KEY = "piStudio.responseHighlightEnabled";
       let sourcePreviewRenderTimer = null;
       let sourcePreviewRenderNonce = 0;
       let responsePreviewRenderNonce = 0;
       let editorHighlightEnabled = false;
+      let responseHighlightEnabled = false;
       let editorHighlightRenderRaf = null;
 
       function getIdleStatus() {
@@ -1946,6 +1969,19 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
           return;
         }
 
+        if (responseHighlightEnabled) {
+          if (markdown.length > RESPONSE_HIGHLIGHT_MAX_CHARS) {
+            critiqueViewEl.innerHTML = buildPreviewErrorHtml(
+              "Response is too large for markdown highlighting. Showing plain markdown.",
+              markdown,
+            );
+            return;
+          }
+
+          critiqueViewEl.innerHTML = "<div class='response-markdown-highlight'>" + highlightMarkdown(markdown) + "</div>";
+          return;
+        }
+
         critiqueViewEl.innerHTML = buildPlainMarkdownHtml(markdown);
       }
 
@@ -1994,10 +2030,25 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         updateResultActionButtons();
       }
 
+      function updateSaveFileTooltip() {
+        if (!saveOverBtn) return;
+
+        const isFileBacked = sourceState.source === "file" && Boolean(sourceState.path);
+        if (isFileBacked) {
+          const target = sourceState.label || sourceState.path;
+          saveOverBtn.title = "Overwrite current file: " + target;
+          return;
+        }
+
+        saveOverBtn.title = "Save file is available after opening a file or using Save As…";
+      }
+
       function syncActionButtons() {
+        const canSaveOver = sourceState.source === "file" && Boolean(sourceState.path);
+
         fileInput.disabled = uiBusy;
         saveAsBtn.disabled = uiBusy;
-        saveOverBtn.disabled = uiBusy || !(sourceState.source === "file" && sourceState.path);
+        saveOverBtn.disabled = uiBusy || !canSaveOver;
         sendEditorBtn.disabled = uiBusy;
         sendRunBtn.disabled = uiBusy;
         copyDraftBtn.disabled = uiBusy;
@@ -2005,9 +2056,11 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         editorViewSelect.disabled = uiBusy;
         rightViewSelect.disabled = uiBusy;
         followSelect.disabled = uiBusy;
+        if (responseHighlightSelect) responseHighlightSelect.disabled = uiBusy || rightView !== "markdown";
         insertHeaderBtn.disabled = uiBusy;
         critiqueBtn.disabled = uiBusy;
         lensSelect.disabled = uiBusy;
+        updateSaveFileTooltip();
         updateResultActionButtons();
       }
 
@@ -2052,6 +2105,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         rightView = nextView === "preview" ? "preview" : "markdown";
         rightViewSelect.value = rightView;
         renderActiveResult();
+        syncActionButtons();
       }
 
       function getToken() {
@@ -2225,24 +2279,40 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         sourceHighlightEl.scrollLeft = sourceTextEl.scrollLeft;
       }
 
-      function readStoredEditorHighlightEnabled() {
+      function readStoredToggle(storageKey) {
         if (!window.localStorage) return false;
         try {
-          return window.localStorage.getItem(EDITOR_HIGHLIGHT_STORAGE_KEY) === "on";
+          return window.localStorage.getItem(storageKey) === "on";
         } catch {
           return false;
         }
       }
 
-      function persistEditorHighlightEnabled(enabled) {
+      function persistStoredToggle(storageKey, enabled) {
         if (!window.localStorage) return;
         try {
-          window.localStorage.setItem(EDITOR_HIGHLIGHT_STORAGE_KEY, enabled ? "on" : "off");
+          window.localStorage.setItem(storageKey, enabled ? "on" : "off");
         } catch {
           // ignore storage failures
         }
       }
 
+      function readStoredEditorHighlightEnabled() {
+        return readStoredToggle(EDITOR_HIGHLIGHT_STORAGE_KEY);
+      }
+
+      function readStoredResponseHighlightEnabled() {
+        return readStoredToggle(RESPONSE_HIGHLIGHT_STORAGE_KEY);
+      }
+
+      function persistEditorHighlightEnabled(enabled) {
+        persistStoredToggle(EDITOR_HIGHLIGHT_STORAGE_KEY, enabled);
+      }
+
+      function persistResponseHighlightEnabled(enabled) {
+        persistStoredToggle(RESPONSE_HIGHLIGHT_STORAGE_KEY, enabled);
+      }
+
       function updateEditorHighlightState() {
         const enabled = editorHighlightEnabled && editorView === "markdown";
 
@@ -2283,6 +2353,15 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         updateEditorHighlightState();
       }
 
+      function setResponseHighlightEnabled(enabled) {
+        responseHighlightEnabled = Boolean(enabled);
+        persistResponseHighlightEnabled(responseHighlightEnabled);
+        if (responseHighlightSelect) {
+          responseHighlightSelect.value = responseHighlightEnabled ? "on" : "off";
+        }
+        renderActiveResult();
+      }
+
       function extractSection(markdown, title) {
         if (!markdown || !title) return "";
 
@@ -2726,6 +2805,12 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         });
       }
 
+      if (responseHighlightSelect) {
+        responseHighlightSelect.addEventListener("change", () => {
+          setResponseHighlightEnabled(responseHighlightSelect.value === "on");
+        });
+      }
+
       pullLatestBtn.addEventListener("click", () => {
         if (queuedLatestResponse) {
           if (applyLatestPayload(queuedLatestResponse)) {
@@ -2825,7 +2910,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
 
         try {
           await navigator.clipboard.writeText(latestResponseMarkdown);
-          setStatus("Copied response.", "success");
+          setStatus("Copied response text.", "success");
         } catch (error) {
           setStatus("Clipboard write failed.", "warning");
         }
@@ -2861,7 +2946,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
 
       saveOverBtn.addEventListener("click", () => {
         if (!(sourceState.source === "file" && sourceState.path)) {
-          setStatus("Save Over is only available when source is a file path.", "warning");
+          setStatus("Save file is only available when source is a file path.", "warning");
           return;
         }
 
@@ -2977,6 +3062,10 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         || Boolean(highlightSelect && highlightSelect.value === "on");
       setEditorHighlightEnabled(initialHighlightEnabled);
 
+      const initialResponseHighlightEnabled = readStoredResponseHighlightEnabled()
+        || Boolean(responseHighlightSelect && responseHighlightSelect.value === "on");
+      setResponseHighlightEnabled(initialResponseHighlightEnabled);
+
       setEditorView(editorView);
       setRightView(rightView);
       renderSourcePreview();
@@ -3260,7 +3349,7 @@ export default function (pi: ExtensionAPI) {
 				sendToClient(client, {
 					type: "error",
 					requestId: msg.requestId,
-					message: "Save Over is only available for file-backed documents.",
+					message: "Save file is only available for file-backed documents.",
 				});
 				return;
 			}

package/package.json

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