pi-studio 0.1.7 → 0.1.9

package/CHANGELOG.md

@@ -25,6 +25,7 @@ All notable changes to `pi-studio` are documented here.
 - Response-side markdown highlighting toggle (`Highlight markdown: Off|On`) in `Response: Markdown` view, with local preference persistence.
 - Markdown highlighter now applies lightweight fenced-code token colors for common languages (`js/ts`, `python`, `bash/sh`, `json`).
 - Obsidian wiki-image syntax normalization (`![[path]]`, `![[path|alt]]`) before pandoc preview rendering.
+- Client-side Mermaid rendering for fenced `mermaid` code blocks in both Preview panes.
 
 ### Changed
 - Removed Annotate/Critique tabs and related mode state.
@@ -47,6 +48,7 @@ All notable changes to `pi-studio` are documented here.
 - `respondText` now includes `X-Content-Type-Options: nosniff` for consistency with JSON responses.
 - If `dompurify` is unavailable, preview now falls back to escaped plain markdown instead of injecting unsanitized HTML.
 - Preview sanitization now preserves MathML profile and strips MathML annotation tags to avoid duplicate raw TeX text beside rendered equations.
+- Preview now shows an inline warning when Mermaid is unavailable or diagram rendering fails, instead of failing silently.
 
 ### Changed
 - Added npm metadata fields (`repository`, `homepage`, `bugs`) so npm package page links to GitHub.

package/README.md

@@ -33,6 +33,7 @@ Status: experimental alpha.
   - critique: **Load critique (notes)** / **Load critique (full)**
 - File actions: **Save As…**, **Save file**, **Load file in editor**
 - View toggles: `Editor: Markdown|Preview`, `Response: Markdown|Preview`
+- Preview mode supports MathML equations and Mermaid fenced diagrams
 - Optional markdown highlighting toggles for editor and response markdown views (including fenced-code token colors for common languages)
 - Theme-aware browser UI based on current pi theme
 
@@ -75,6 +76,8 @@ pi -e https://github.com/omaclaren/pi-studio
 - Pi Studio is currently optimized for markdown workflows (model responses, plans, and notes), including fenced code blocks. Pure code files are supported, but highlighting is tuned for markdown and fenced blocks rather than full-file language mode.
 - Studio URLs include a token query parameter; avoid sharing full Studio URLs.
 - Preview panes render markdown via `pandoc` (`gfm+tex_math_dollars` → HTML5 + MathML), including pandoc code syntax highlighting, sanitized in-browser with `dompurify`.
+- Mermaid fenced `mermaid` code blocks are rendered client-side in preview mode (Mermaid v11 loaded from jsDelivr).
+- If Mermaid cannot load or a diagram fails to render, preview shows an inline warning and keeps source text visible.
 - 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.

package/index.ts

@@ -1424,6 +1424,17 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       overflow-y: hidden;
     }
 
+    .rendered-markdown .mermaid-container {
+      text-align: center;
+      margin: 1em 0;
+      overflow-x: auto;
+    }
+
+    .rendered-markdown .mermaid-container svg {
+      max-width: 100%;
+      height: auto;
+    }
+
     .plain-markdown {
       margin: 0;
       white-space: pre-wrap;
@@ -1453,6 +1464,13 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       font-size: 12px;
     }
 
+    .preview-warning {
+      color: var(--warn);
+      margin-top: 0.75em;
+      font-size: 12px;
+      font-style: italic;
+    }
+
     .marker {
       display: inline-block;
       padding: 0 4px;
@@ -1569,8 +1587,8 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
             <button id="sendEditorBtn" type="button">Send to pi editor</button>
             <button id="copyDraftBtn" type="button">Copy editor text</button>
             <select id="highlightSelect" aria-label="Editor syntax highlighting">
-              <option value="off" selected>Highlight markdown: Off</option>
-              <option value="on">Highlight markdown: On</option>
+              <option value="off">Highlight markdown: Off</option>
+              <option value="on" selected>Highlight markdown: On</option>
             </select>
           </div>
         </div>
@@ -1595,8 +1613,8 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
             <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>
+            <option value="off">Highlight markdown: Off</option>
+            <option value="on" selected>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>
@@ -1710,6 +1728,12 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       let editorHighlightEnabled = false;
       let responseHighlightEnabled = false;
       let editorHighlightRenderRaf = null;
+      const MERMAID_CDN_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
+      const MERMAID_THEME = "${style.mode === "dark" ? "dark" : "default"}";
+      const MERMAID_UNAVAILABLE_MESSAGE = "Mermaid renderer unavailable. Showing mermaid blocks as code.";
+      const MERMAID_RENDER_FAIL_MESSAGE = "Mermaid render failed. Showing diagram source text.";
+      let mermaidModulePromise = null;
+      let mermaidInitialized = false;
 
       function getIdleStatus() {
         return "Ready. Edit text, then run or critique (insert annotation header if needed).";
@@ -1906,6 +1930,96 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         return buildPreviewErrorHtml("Preview sanitizer unavailable. Showing plain markdown.", markdown);
       }
 
+      function appendMermaidNotice(targetEl, message) {
+        if (!targetEl || typeof targetEl.querySelector !== "function" || typeof targetEl.appendChild !== "function") {
+          return;
+        }
+
+        if (targetEl.querySelector(".preview-mermaid-warning")) {
+          return;
+        }
+
+        const warningEl = document.createElement("div");
+        warningEl.className = "preview-warning preview-mermaid-warning";
+        warningEl.textContent = String(message || MERMAID_RENDER_FAIL_MESSAGE);
+        targetEl.appendChild(warningEl);
+      }
+
+      async function getMermaidApi() {
+        if (mermaidModulePromise) {
+          return mermaidModulePromise;
+        }
+
+        mermaidModulePromise = import(MERMAID_CDN_URL)
+          .then((module) => {
+            const mermaidApi = module && module.default ? module.default : null;
+            if (!mermaidApi) {
+              throw new Error("Mermaid module did not expose a default export.");
+            }
+
+            if (!mermaidInitialized) {
+              mermaidApi.initialize({
+                startOnLoad: false,
+                theme: MERMAID_THEME,
+              });
+              mermaidInitialized = true;
+            }
+
+            return mermaidApi;
+          })
+          .catch((error) => {
+            mermaidModulePromise = null;
+            throw error;
+          });
+
+        return mermaidModulePromise;
+      }
+
+      async function renderMermaidInElement(targetEl) {
+        if (!targetEl || typeof targetEl.querySelectorAll !== "function") return;
+
+        const mermaidBlocks = targetEl.querySelectorAll("pre.mermaid");
+        if (!mermaidBlocks || mermaidBlocks.length === 0) return;
+
+        let mermaidApi;
+        try {
+          mermaidApi = await getMermaidApi();
+        } catch (error) {
+          console.error("Mermaid module load failed:", error);
+          appendMermaidNotice(targetEl, MERMAID_UNAVAILABLE_MESSAGE);
+          return;
+        }
+
+        mermaidBlocks.forEach((preEl) => {
+          const codeEl = preEl.querySelector("code");
+          const source = codeEl ? codeEl.textContent : preEl.textContent;
+
+          const wrapper = document.createElement("div");
+          wrapper.className = "mermaid-container";
+
+          const diagramEl = document.createElement("div");
+          diagramEl.className = "mermaid";
+          diagramEl.textContent = source || "";
+
+          wrapper.appendChild(diagramEl);
+          preEl.replaceWith(wrapper);
+        });
+
+        const diagramNodes = Array.from(targetEl.querySelectorAll(".mermaid"));
+        if (diagramNodes.length === 0) return;
+
+        try {
+          await mermaidApi.run({ nodes: diagramNodes });
+        } catch (error) {
+          try {
+            await mermaidApi.run();
+          } catch (fallbackError) {
+            console.error("Mermaid render failed:", fallbackError || error);
+            appendMermaidNotice(targetEl, MERMAID_RENDER_FAIL_MESSAGE);
+          }
+        }
+      }
+
       async function renderMarkdownWithPandoc(markdown) {
         const token = getToken();
         if (!token) {
@@ -1976,6 +2090,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
           }
 
           targetEl.innerHTML = sanitizeRenderedHtml(renderedHtml, markdown);
+          await renderMermaidInElement(targetEl);
         } catch (error) {
           if (pane === "source") {
             if (nonce !== sourcePreviewRenderNonce || editorView !== "preview") return;
@@ -2454,11 +2569,14 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       }
 
       function readStoredToggle(storageKey) {
-        if (!window.localStorage) return false;
+        if (!window.localStorage) return null;
         try {
-          return window.localStorage.getItem(storageKey) === "on";
+          const value = window.localStorage.getItem(storageKey);
+          if (value === "on") return true;
+          if (value === "off") return false;
+          return null;
         } catch {
-          return false;
+          return null;
         }
       }
 
@@ -3232,12 +3350,12 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       refreshResponseUi();
       setActivePane("left");
 
-      const initialHighlightEnabled = readStoredEditorHighlightEnabled()
-        || Boolean(highlightSelect && highlightSelect.value === "on");
+      const storedEditorHighlightEnabled = readStoredEditorHighlightEnabled();
+      const initialHighlightEnabled = storedEditorHighlightEnabled ?? Boolean(highlightSelect && highlightSelect.value === "on");
       setEditorHighlightEnabled(initialHighlightEnabled);
 
-      const initialResponseHighlightEnabled = readStoredResponseHighlightEnabled()
-        || Boolean(responseHighlightSelect && responseHighlightSelect.value === "on");
+      const storedResponseHighlightEnabled = readStoredResponseHighlightEnabled();
+      const initialResponseHighlightEnabled = storedResponseHighlightEnabled ?? Boolean(responseHighlightSelect && responseHighlightSelect.value === "on");
       setResponseHighlightEnabled(initialResponseHighlightEnabled);
 
       setEditorView(editorView);

package/package.json

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