pi-studio 0.1.4 → 0.1.6

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,7 +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.
+- 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.
 
 ### Changed
@@ -32,9 +33,11 @@ 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.
+- Preview mode now uses pandoc code highlighting output for syntax-colored code blocks.
 - Hardened Studio preview HTTP handling and added client-side preview-request timeout to avoid stuck "Rendering preview…" states.
 
 ### Fixed

package/README.md

@@ -31,9 +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
+- 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
 
 ## Commands
@@ -73,7 +73,7 @@ pi -e https://github.com/omaclaren/pi-studio
 - Local-only server (`127.0.0.1`) with rotating session tokens.
 - 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 panes render markdown via `pandoc` (`gfm+tex_math_dollars` → HTML5 + MathML), including pandoc code syntax highlighting, 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.

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

@@ -499,7 +499,7 @@ function normalizeObsidianImages(markdown: string): string {
 
 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 args = ["-f", "gfm+tex_math_dollars-raw_html", "-t", "html5", "--mathml"];
 	const normalizedMarkdown = normalizeObsidianImages(normalizeMathDelimiters(markdown));
 
 	return await new Promise<string>((resolve, reject) => {
@@ -1217,6 +1217,29 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       color: var(--ok);
     }
 
+    .hl-code-kw {
+      color: var(--accent);
+      font-weight: 600;
+    }
+
+    .hl-code-str {
+      color: var(--ok);
+    }
+
+    .hl-code-num {
+      color: var(--warn);
+    }
+
+    .hl-code-com {
+      color: var(--muted);
+      font-style: italic;
+    }
+
+    .hl-code-var,
+    .hl-code-key {
+      color: var(--accent);
+    }
+
     .hl-list {
       color: var(--accent);
       font-weight: 600;
@@ -1329,6 +1352,48 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       padding: 0.12em 0.35em;
     }
 
+    .rendered-markdown code span.kw,
+    .rendered-markdown code span.cf,
+    .rendered-markdown code span.im,
+    .rendered-markdown code span.dt {
+      color: var(--accent);
+      font-weight: 600;
+    }
+
+    .rendered-markdown code span.fu,
+    .rendered-markdown code span.bu,
+    .rendered-markdown code span.va,
+    .rendered-markdown code span.ot {
+      color: var(--accent);
+    }
+
+    .rendered-markdown code span.st,
+    .rendered-markdown code span.ss,
+    .rendered-markdown code span.sc {
+      color: var(--ok);
+    }
+
+    .rendered-markdown code span.dv,
+    .rendered-markdown code span.bn,
+    .rendered-markdown code span.fl {
+      color: var(--warn);
+    }
+
+    .rendered-markdown code span.co {
+      color: var(--muted);
+      font-style: italic;
+    }
+
+    .rendered-markdown code span.op {
+      color: var(--text);
+    }
+
+    .rendered-markdown code span.er,
+    .rendered-markdown code span.al {
+      color: var(--error);
+      font-weight: 600;
+    }
+
     .rendered-markdown table {
       border-collapse: collapse;
       display: block;
@@ -1477,9 +1542,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>
 
@@ -1502,10 +1567,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>
@@ -1530,14 +1595,14 @@ 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 response: Off</option>
-            <option value="on">Highlight response: On</option>
+            <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>
@@ -2030,10 +2095,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;
@@ -2045,6 +2125,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         insertHeaderBtn.disabled = uiBusy;
         critiqueBtn.disabled = uiBusy;
         lensSelect.disabled = uiBusy;
+        updateSaveFileTooltip();
         updateResultActionButtons();
       }
 
@@ -2157,12 +2238,119 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         return out;
       }
 
+      function normalizeFenceLanguage(info) {
+        const raw = String(info || "").trim();
+        if (!raw) return "";
+
+        const first = raw.split(/\\s+/)[0].replace(/^\\./, "").toLowerCase();
+
+        if (first === "js" || first === "javascript" || first === "jsx" || first === "node") return "javascript";
+        if (first === "ts" || first === "typescript" || first === "tsx") return "typescript";
+        if (first === "py" || first === "python") return "python";
+        if (first === "sh" || first === "bash" || first === "zsh" || first === "shell") return "bash";
+        if (first === "json" || first === "jsonc") return "json";
+
+        return "";
+      }
+
+      function highlightCodeTokens(line, pattern, classifyMatch) {
+        const source = String(line || "");
+        let out = "";
+        let lastIndex = 0;
+        pattern.lastIndex = 0;
+
+        let match;
+        while ((match = pattern.exec(source)) !== null) {
+          const token = match[0] || "";
+          const start = typeof match.index === "number" ? match.index : 0;
+
+          if (start > lastIndex) {
+            out += escapeHtml(source.slice(lastIndex, start));
+          }
+
+          const className = classifyMatch(match) || "hl-code";
+          out += wrapHighlight(className, token);
+
+          lastIndex = start + token.length;
+          if (token.length === 0) {
+            pattern.lastIndex += 1;
+          }
+        }
+
+        if (lastIndex < source.length) {
+          out += escapeHtml(source.slice(lastIndex));
+        }
+
+        return out;
+      }
+
+      function highlightCodeLine(line, language) {
+        const source = String(line || "");
+        const lang = normalizeFenceLanguage(language);
+
+        if (!lang) {
+          return wrapHighlight("hl-code", source);
+        }
+
+        if (lang === "javascript" || lang === "typescript") {
+          const jsPattern = /(\\/\\/.*$)|("(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*')|(\\b(?:const|let|var|function|return|if|else|for|while|switch|case|break|continue|try|catch|finally|throw|new|class|extends|import|from|export|default|async|await|true|false|null|undefined|typeof|instanceof)\\b)|(\\b\\d+(?:\\.\\d+)?\\b)/g;
+          const highlighted = highlightCodeTokens(source, jsPattern, (match) => {
+            if (match[1]) return "hl-code-com";
+            if (match[2]) return "hl-code-str";
+            if (match[3]) return "hl-code-kw";
+            if (match[4]) return "hl-code-num";
+            return "hl-code";
+          });
+          return "<span class='hl-code'>" + highlighted + "</span>";
+        }
+
+        if (lang === "python") {
+          const pyPattern = /(#.*$)|("(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*')|(\\b(?:def|class|return|if|elif|else|for|while|try|except|finally|import|from|as|with|lambda|yield|True|False|None|and|or|not|in|is|pass|break|continue|raise|global|nonlocal|assert)\\b)|(\\b\\d+(?:\\.\\d+)?\\b)/g;
+          const highlighted = highlightCodeTokens(source, pyPattern, (match) => {
+            if (match[1]) return "hl-code-com";
+            if (match[2]) return "hl-code-str";
+            if (match[3]) return "hl-code-kw";
+            if (match[4]) return "hl-code-num";
+            return "hl-code";
+          });
+          return "<span class='hl-code'>" + highlighted + "</span>";
+        }
+
+        if (lang === "bash") {
+          const shPattern = /(#.*$)|("(?:[^"\\\\]|\\\\.)*"|'[^']*')|(\\$\\{[^}]+\\}|\\$[A-Za-z_][A-Za-z0-9_]*)|(\\b(?:if|then|else|fi|for|in|do|done|case|esac|function|local|export|readonly|return|break|continue|while|until)\\b)|(\\b\\d+\\b)/g;
+          const highlighted = highlightCodeTokens(source, shPattern, (match) => {
+            if (match[1]) return "hl-code-com";
+            if (match[2]) return "hl-code-str";
+            if (match[3]) return "hl-code-var";
+            if (match[4]) return "hl-code-kw";
+            if (match[5]) return "hl-code-num";
+            return "hl-code";
+          });
+          return "<span class='hl-code'>" + highlighted + "</span>";
+        }
+
+        if (lang === "json") {
+          const jsonPattern = /("(?:[^"\\\\]|\\\\.)*"\\s*:)|("(?:[^"\\\\]|\\\\.)*")|(\\b(?:true|false|null)\\b)|(\\b-?\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?\\b)/g;
+          const highlighted = highlightCodeTokens(source, jsonPattern, (match) => {
+            if (match[1]) return "hl-code-key";
+            if (match[2]) return "hl-code-str";
+            if (match[3]) return "hl-code-kw";
+            if (match[4]) return "hl-code-num";
+            return "hl-code";
+          });
+          return "<span class='hl-code'>" + highlighted + "</span>";
+        }
+
+        return wrapHighlight("hl-code", source);
+      }
+
       function highlightMarkdown(text) {
         const lines = String(text || "").replace(/\\r\\n/g, "\\n").split("\\n");
         const out = [];
         let inFence = false;
         let fenceChar = null;
         let fenceLength = 0;
+        let fenceLanguage = "";
 
         for (const line of lines) {
           const fenceMatch = line.match(/^(\\s*)([\\x60]{3,}|~{3,})(.*)$/);
@@ -2175,10 +2363,12 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
               inFence = true;
               fenceChar = markerChar;
               fenceLength = markerLength;
+              fenceLanguage = normalizeFenceLanguage(fenceMatch[3] || "");
             } else if (fenceChar === markerChar && markerLength >= fenceLength) {
               inFence = false;
               fenceChar = null;
               fenceLength = 0;
+              fenceLanguage = "";
             }
 
             out.push(wrapHighlight("hl-fence", line));
@@ -2186,7 +2376,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
           }
 
           if (inFence) {
-            out.push(line.length > 0 ? wrapHighlight("hl-code", line) : "");
+            out.push(line.length > 0 ? highlightCodeLine(line, fenceLanguage) : "");
             continue;
           }
 
@@ -2894,7 +3084,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");
         }
@@ -2930,7 +3120,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;
         }
 
@@ -3333,7 +3523,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.4",
+  "version": "0.1.6",
   "description": "Browser GUI for structured critique workflows in pi",
   "type": "module",
   "license": "MIT",