pi-studio 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -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 response: 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.

package/README.md

@@ -33,6 +33,7 @@ Status: experimental alpha.
   - critique: **Load critique (notes)** / **Load critique (full)**
 - File actions: **Save As…**, **Save Over**, **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/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;
@@ -1478,8 +1493,8 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
             <span id="syncBadge" class="source-badge sync-badge">No response loaded</span>
           </div>
           <div class="source-actions">
-            <button id="insertHeaderBtn" type="button" title="Prepends/updates the annotated-reply header in the editor.">Insert annotation header</button>
             <button id="sendRunBtn" type="button" title="Send editor text directly to the model as-is.">Run editor text</button>
+            <button id="insertHeaderBtn" type="button" title="Prepends/updates the annotated-reply header in the editor.">Insert annotation header</button>
             <select id="lensSelect" aria-label="Critique focus">
               <option value="auto" selected>Critique focus: Auto</option>
               <option value="writing">Critique focus: Writing</option>
@@ -1514,6 +1529,10 @@ 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 response: Off</option>
+            <option value="on">Highlight response: 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>
@@ -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);
       }
 
@@ -2005,6 +2041,7 @@ 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;
@@ -2052,6 +2089,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         rightView = nextView === "preview" ? "preview" : "markdown";
         rightViewSelect.value = rightView;
         renderActiveResult();
+        syncActionButtons();
       }
 
       function getToken() {
@@ -2225,24 +2263,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 +2337,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 +2789,12 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         });
       }
 
+      if (responseHighlightSelect) {
+        responseHighlightSelect.addEventListener("change", () => {
+          setResponseHighlightEnabled(responseHighlightSelect.value === "on");
+        });
+      }
+
       pullLatestBtn.addEventListener("click", () => {
         if (queuedLatestResponse) {
           if (applyLatestPayload(queuedLatestResponse)) {
@@ -2977,6 +3046,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();

package/package.json

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