pi-studio 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to `pi-studio` are documented here.
 
+## [0.2.2] — 2026-03-02
+
+### Fixed
+- Corrected screenshot-to-label mapping in README (files were copied to wrong filenames).
+
+## [0.2.1] — 2026-03-02
+
+### Added
+- **Language-aware syntax highlighting**: selectable `Lang:` dropdown (Markdown, JavaScript, TypeScript, Python, Bash, JSON, Rust, C, C++, Julia, Fortran, R, MATLAB).
+- Language auto-detected from file extension when loading files; manually overridable via dropdown.
+- Full-document code highlighting in editor Raw view when a non-markdown language is selected (reuses fenced-block tokenizer across entire content).
+- Code-aware Preview: when a code language is selected, Preview renders syntax-highlighted `<pre>` instead of sending to pandoc.
+- Language preference persisted to `localStorage` across sessions.
+- New tokenizer patterns for Rust, C/C++, Julia, Fortran, R, and MATLAB (keywords, strings, comments, numbers).
+- Expanded file-accept list for Load file content (`.h`, `.hpp`, `.jl`, `.f90`, `.f95`, `.f03`, `.f`, `.for`, `.r`, `.R`, `.m`, `.lua`).
+
+### Changed
+- Renamed "Load file in editor" → "Load file content" (clarifies that file content is copied, not edited in-place).
+- Lang selector visibility: shown when syntax highlight is On (Raw view) or in Preview mode; hidden otherwise.
+- Updated README with comprehensive screenshot gallery (markdown, math, mermaid, code mode, fenced code).
+
 ## [0.2.0] — 2026-03-02
 
 ### Added

package/README.md

@@ -6,21 +6,37 @@ Status: experimental alpha.
 
 ## Screenshots
 
-**Dark workspace**
+**Markdown workspace — dark** (syntax-highlighted editor + rendered preview with Julia code block, inline math, blockquotes)
 
 ![Dark workspace](./assets/screenshots/dark-workspace.png)
 
-**Dark critique flow**
+**Markdown workspace — light**
 
-![Dark critique flow](./assets/screenshots/dark-critique.png)
+![Light workspace](./assets/screenshots/light-workspace.png)
 
-**Light workspace**
+**Math rendering — dark** (LaTeX source → MathML: PDEs, matrices, display equations)
 
-![Light workspace](./assets/screenshots/light-workspace.png)
+![Dark math](./assets/screenshots/dark-math.png)
+
+**Math rendering — light**
+
+![Light math](./assets/screenshots/light-math.png)
+
+**Mermaid diagrams — dark** (fenced mermaid block → rendered flowchart with theme-aware colors)
+
+![Dark mermaid](./assets/screenshots/dark-mermaid.png)
+
+**Code mode — dark** (TypeScript file loaded with language auto-detected from extension)
+
+![Dark code mode](./assets/screenshots/dark-code-mode.png)
+
+**Code mode — light**
+
+![Light code mode](./assets/screenshots/light-code-mode.png)
 
-**Dark annotation editing**
+**Julia fenced code — dark** (token coloring for fenced code blocks inside markdown)
 
-![Dark annotation editing](./assets/screenshots/dark-annotation.png)
+![Dark Julia fenced](./assets/screenshots/dark-julia-fenced.png)
 
 ## Features
 
@@ -31,10 +47,17 @@ Status: experimental alpha.
 - Response load helpers:
   - non-critique: **Load response into editor**
   - 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`
+- File actions: **Save As…**, **Save file**, **Load file content**
+- View toggles: `Editor: Raw|Preview`, `Response: Raw|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)
+- **Language-aware syntax highlighting** with selectable language mode:
+  - Markdown (default): headings, links, code fences, lists, quotes, inline code
+  - Code languages: JavaScript, TypeScript, Python, Bash, JSON, Rust, C, C++, Julia, Fortran, R, MATLAB
+  - Keywords, strings, comments, numbers, and variables highlighted using theme syntax color tokens
+  - Language auto-detected from file extension on file load; manually selectable via `Lang:` dropdown
+  - Applies to both editor Raw view (highlight overlay) and fenced code blocks in markdown
+  - Preview mode renders syntax-highlighted code when a non-markdown language is selected
+- Separate syntax highlight toggles for editor and response Raw views, with local preference persistence
 - Theme-aware browser UI based on current pi theme, with refined surface depth and lighter visual chrome
 
 ## Commands
@@ -73,7 +96,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.
-- 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.
+- Pi Studio supports both markdown workflows (model responses, plans, and notes) and code file editing with language-aware syntax highlighting.
 - 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`.
 - Preview markdown/code colors are mapped from active theme markdown (`md*`) and syntax (`syntax*`) tokens for closer terminal-vs-browser parity.
@@ -82,7 +105,6 @@ pi -e https://github.com/omaclaren/pi-studio
 - 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.
 
 ## License
 

package/index.ts

@@ -1917,7 +1917,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       </select>
       <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>
+      <label class="file-label" title="Load a local file into editor text.">Load file content<input id="fileInput" type="file" accept=".txt,.md,.markdown,.rst,.adoc,.tex,.json,.js,.ts,.py,.java,.c,.cpp,.h,.hpp,.go,.rs,.rb,.swift,.sh,.html,.css,.xml,.yaml,.yml,.toml,.jl,.f90,.f95,.f03,.f,.for,.r,.R,.m,.lua" /></label>
     </div>
   </header>
 
@@ -1945,6 +1945,21 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
               <option value="off">Syntax highlight: Off</option>
               <option value="on" selected>Syntax highlight: On</option>
             </select>
+            <select id="langSelect" aria-label="Highlight language">
+              <option value="markdown" selected>Lang: Markdown</option>
+              <option value="javascript">Lang: JavaScript</option>
+              <option value="typescript">Lang: TypeScript</option>
+              <option value="python">Lang: Python</option>
+              <option value="bash">Lang: Bash</option>
+              <option value="json">Lang: JSON</option>
+              <option value="rust">Lang: Rust</option>
+              <option value="c">Lang: C</option>
+              <option value="cpp">Lang: C++</option>
+              <option value="julia">Lang: Julia</option>
+              <option value="fortran">Lang: Fortran</option>
+              <option value="r">Lang: R</option>
+              <option value="matlab">Lang: MATLAB</option>
+            </select>
           </div>
         </div>
         <div id="sourceEditorWrap" class="editor-highlight-wrap">
@@ -2043,6 +2058,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       const sendRunBtn = document.getElementById("sendRunBtn");
       const copyDraftBtn = document.getElementById("copyDraftBtn");
       const highlightSelect = document.getElementById("highlightSelect");
+      const langSelect = document.getElementById("langSelect");
 
       const initialSourceState = {
         source: (document.body && document.body.dataset && document.body.dataset.initialSource) || "blank",
@@ -2075,12 +2091,15 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       let paneFocusTarget = "off";
       const EDITOR_HIGHLIGHT_MAX_CHARS = 80_000;
       const EDITOR_HIGHLIGHT_STORAGE_KEY = "piStudio.editorHighlightEnabled";
+      const EDITOR_LANGUAGE_STORAGE_KEY = "piStudio.editorLanguage";
+      const SUPPORTED_LANGUAGES = ["markdown", "javascript", "typescript", "python", "bash", "json", "rust", "c", "cpp", "julia", "fortran", "r", "matlab"];
       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 editorLanguage = "markdown";
       let responseHighlightEnabled = false;
       let editorHighlightRenderRaf = null;
       const MERMAID_CDN_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
@@ -2470,10 +2489,14 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
 
       function renderSourcePreviewNow() {
         if (editorView !== "preview") return;
-        const markdown = sourceTextEl.value || "";
+        const text = sourceTextEl.value || "";
+        if (editorLanguage && editorLanguage !== "markdown") {
+          sourcePreviewEl.innerHTML = "<div class='response-markdown-highlight' style='white-space:pre;font-family:var(--font-mono);font-size:13px;line-height:1.5;padding:16px;overflow:auto;'>" + highlightCode(text, editorLanguage) + "</div>";
+          return;
+        }
         const nonce = ++sourcePreviewRenderNonce;
         sourcePreviewEl.innerHTML = "<div class='preview-loading'>Rendering preview…</div>";
-        void applyRenderedMarkdown(sourcePreviewEl, markdown, "source", nonce);
+        void applyRenderedMarkdown(sourcePreviewEl, text, "source", nonce);
       }
 
       function scheduleSourcePreviewRender(delayMs) {
@@ -2598,6 +2621,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         sendRunBtn.disabled = uiBusy;
         copyDraftBtn.disabled = uiBusy;
         if (highlightSelect) highlightSelect.disabled = uiBusy;
+        if (langSelect) langSelect.disabled = uiBusy;
         editorViewSelect.disabled = uiBusy;
         rightViewSelect.disabled = uiBusy;
         followSelect.disabled = uiBusy;
@@ -2644,6 +2668,7 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         }
 
         updateEditorHighlightState();
+        updateLangSelectVisibility();
       }
 
       function setRightView(nextView) {
@@ -2729,6 +2754,13 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         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";
+        if (first === "rust" || first === "rs") return "rust";
+        if (first === "c" || first === "h") return "c";
+        if (first === "cpp" || first === "c++" || first === "cxx" || first === "hpp") return "cpp";
+        if (first === "julia" || first === "jl") return "julia";
+        if (first === "fortran" || first === "f90" || first === "f95" || first === "f03" || first === "f" || first === "for") return "fortran";
+        if (first === "r") return "r";
+        if (first === "matlab" || first === "m") return "matlab";
 
         return "";
       }
@@ -2821,6 +2853,80 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
           return "<span class='hl-code'>" + highlighted + "</span>";
         }
 
+        if (lang === "rust") {
+          const rustPattern = /(\\/\\/.*$)|("(?:[^"\\\\]|\\\\.)*")|(\\b(?:fn|let|mut|const|struct|enum|impl|trait|pub|mod|use|crate|self|super|match|if|else|for|while|loop|return|break|continue|where|as|in|ref|move|async|await|unsafe|extern|type|static|true|false|Some|None|Ok|Err|Self)\\b)|(\\b\\d[\\d_]*(?:\\.\\d[\\d_]*)?(?:f32|f64|u8|u16|u32|u64|u128|usize|i8|i16|i32|i64|i128|isize)?\\b)/g;
+          const highlighted = highlightCodeTokens(source, rustPattern, (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 === "c" || lang === "cpp") {
+          const cPattern = /(\\/\\/.*$)|("(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)')|(#\\s*\\w+)|(\\b(?:if|else|for|while|do|switch|case|break|continue|return|goto|struct|union|enum|typedef|sizeof|void|int|char|short|long|float|double|unsigned|signed|const|static|extern|volatile|register|inline|auto|restrict|true|false|NULL|nullptr|class|public|private|protected|virtual|override|template|typename|namespace|using|new|delete|try|catch|throw|noexcept|constexpr|auto|decltype|static_cast|dynamic_cast|reinterpret_cast|const_cast|std|include|define|ifdef|ifndef|endif|pragma)\\b)|(\\b\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?[fFlLuU]*\\b)/g;
+          const highlighted = highlightCodeTokens(source, cPattern, (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-kw";
+            if (match[5]) return "hl-code-num";
+            return "hl-code";
+          });
+          return "<span class='hl-code'>" + highlighted + "</span>";
+        }
+
+        if (lang === "julia") {
+          const jlPattern = /(#.*$)|("(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*')|(\\b(?:function|end|if|elseif|else|for|while|begin|let|local|global|const|return|break|continue|do|try|catch|finally|throw|module|import|using|export|struct|mutable|abstract|primitive|where|macro|quote|true|false|nothing|missing|in|isa|typeof)\\b)|(\\b\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?\\b)/g;
+          const highlighted = highlightCodeTokens(source, jlPattern, (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 === "fortran") {
+          const fPattern = /(!.*$)|("(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*')|(\\b(?:program|end|subroutine|function|module|use|implicit|none|integer|real|double|precision|complex|character|logical|dimension|allocatable|intent|in|out|inout|parameter|data|do|if|then|else|elseif|endif|enddo|call|return|write|read|print|format|stop|contains|type|class|select|case|where|forall|associate|block|procedure|interface|abstract|extends|allocate|deallocate|cycle|exit|go|to|common|equivalence|save|external|intrinsic)\\b)|(\\b\\d+(?:\\.\\d+)?(?:[dDeE][+-]?\\d+)?\\b)/gi;
+          const highlighted = highlightCodeTokens(source, fPattern, (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 === "r") {
+          const rPattern = /(#.*$)|("(?:[^"\\\\]|\\\\.)*"|'(?:[^'\\\\]|\\\\.)*')|(\\b(?:function|if|else|for|while|repeat|in|next|break|return|TRUE|FALSE|NULL|NA|NA_integer_|NA_real_|NA_complex_|NA_character_|Inf|NaN|library|require|source|local|switch)\\b)|(<-|->|<<-|->>)|(\\b\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?[Li]?\\b)/g;
+          const highlighted = highlightCodeTokens(source, rPattern, (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-kw";
+            if (match[5]) return "hl-code-num";
+            return "hl-code";
+          });
+          return "<span class='hl-code'>" + highlighted + "</span>";
+        }
+
+        if (lang === "matlab") {
+          const matPattern = /(%.*$)|('(?:[^']|'')*'|"(?:[^"\\\\]|\\\\.)*")|(\\b(?:function|end|if|elseif|else|for|while|switch|case|otherwise|try|catch|return|break|continue|global|persistent|classdef|properties|methods|events|enumeration|true|false)\\b)|(\\b\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?[i]?\\b)/g;
+          const highlighted = highlightCodeTokens(source, matPattern, (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>";
+        }
+
         return wrapHighlight("hl-code", source);
       }
 
@@ -2889,6 +2995,43 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         return out.join("<br>");
       }
 
+      function highlightCode(text, language) {
+        const lines = String(text || "").replace(/\\r\\n/g, "\\n").split("\\n");
+        const lang = normalizeFenceLanguage(language);
+        const out = [];
+        for (const line of lines) {
+          if (line.length === 0) {
+            out.push("");
+          } else if (lang) {
+            out.push(highlightCodeLine(line, lang));
+          } else {
+            out.push(escapeHtml(line));
+          }
+        }
+        return out.join("<br>");
+      }
+
+      function detectLanguageFromName(name) {
+        if (!name) return "";
+        const dot = name.lastIndexOf(".");
+        if (dot < 0) return "";
+        const ext = name.slice(dot + 1).toLowerCase();
+        if (ext === "js" || ext === "mjs" || ext === "cjs" || ext === "jsx") return "javascript";
+        if (ext === "ts" || ext === "mts" || ext === "cts" || ext === "tsx") return "typescript";
+        if (ext === "py" || ext === "pyw") return "python";
+        if (ext === "sh" || ext === "bash" || ext === "zsh") return "bash";
+        if (ext === "json" || ext === "jsonc" || ext === "json5") return "json";
+        if (ext === "rs") return "rust";
+        if (ext === "c" || ext === "h") return "c";
+        if (ext === "cpp" || ext === "cxx" || ext === "cc" || ext === "hpp" || ext === "hxx") return "cpp";
+        if (ext === "jl") return "julia";
+        if (ext === "f90" || ext === "f95" || ext === "f03" || ext === "f" || ext === "for") return "fortran";
+        if (ext === "r" || ext === "R") return "r";
+        if (ext === "m") return "matlab";
+        if (ext === "md" || ext === "markdown" || ext === "mdx") return "markdown";
+        return "";
+      }
+
       function renderEditorHighlightNow() {
         if (!sourceHighlightEl) return;
         if (!editorHighlightEnabled || editorView !== "markdown") {
@@ -2903,7 +3046,11 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
           return;
         }
 
-        sourceHighlightEl.innerHTML = highlightMarkdown(text);
+        if (editorLanguage === "markdown" || !editorLanguage) {
+          sourceHighlightEl.innerHTML = highlightMarkdown(text);
+        } else {
+          sourceHighlightEl.innerHTML = highlightCode(text, editorLanguage);
+        }
         syncEditorHighlightScroll();
       }
 
@@ -3008,6 +3155,46 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
           highlightSelect.value = editorHighlightEnabled ? "on" : "off";
         }
         updateEditorHighlightState();
+        updateLangSelectVisibility();
+      }
+
+      function readStoredEditorLanguage() {
+        if (!window.localStorage) return null;
+        try {
+          const value = window.localStorage.getItem(EDITOR_LANGUAGE_STORAGE_KEY);
+          if (value && SUPPORTED_LANGUAGES.indexOf(value) !== -1) return value;
+          return null;
+        } catch {
+          return null;
+        }
+      }
+
+      function persistEditorLanguage(lang) {
+        if (!window.localStorage) return;
+        try {
+          window.localStorage.setItem(EDITOR_LANGUAGE_STORAGE_KEY, lang || "markdown");
+        } catch {}
+      }
+
+      function setEditorLanguage(lang) {
+        editorLanguage = (lang && SUPPORTED_LANGUAGES.indexOf(lang) !== -1) ? lang : "markdown";
+        persistEditorLanguage(editorLanguage);
+        if (langSelect) {
+          langSelect.value = editorLanguage;
+        }
+        if (editorHighlightEnabled && editorView === "markdown") {
+          scheduleEditorHighlightRender();
+        }
+        if (editorView === "preview") {
+          scheduleSourcePreviewRender(0);
+        }
+      }
+
+      function updateLangSelectVisibility() {
+        if (!langSelect) return;
+        const highlightActive = editorHighlightEnabled && editorView === "markdown";
+        const previewActive = editorView === "preview";
+        langSelect.hidden = !(highlightActive || previewActive);
       }
 
       function setResponseHighlightEnabled(enabled) {
@@ -3468,6 +3655,12 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
         });
       }
 
+      if (langSelect) {
+        langSelect.addEventListener("change", () => {
+          setEditorLanguage(langSelect.value);
+        });
+      }
+
       pullLatestBtn.addEventListener("click", () => {
         if (queuedLatestResponse) {
           if (applyLatestPayload(queuedLatestResponse)) {
@@ -3703,6 +3896,10 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
             path: null,
           });
           refreshResponseUi();
+          const detectedLang = detectLanguageFromName(file.name);
+          if (detectedLang) {
+            setEditorLanguage(detectedLang);
+          }
           setStatus("Loaded file " + file.name + ".", "success");
         };
         reader.onerror = () => {
@@ -3719,6 +3916,10 @@ function buildStudioHtml(initialDocument: InitialStudioDocument | null, theme?:
       const initialHighlightEnabled = storedEditorHighlightEnabled ?? Boolean(highlightSelect && highlightSelect.value === "on");
       setEditorHighlightEnabled(initialHighlightEnabled);
 
+      const initialDetectedLang = detectLanguageFromName(initialSourceState.path || initialSourceState.label || "");
+      const storedLang = readStoredEditorLanguage();
+      setEditorLanguage(initialDetectedLang || storedLang || "markdown");
+
       const storedResponseHighlightEnabled = readStoredResponseHighlightEnabled();
       const initialResponseHighlightEnabled = storedResponseHighlightEnabled ?? Boolean(responseHighlightSelect && responseHighlightSelect.value === "on");
       setResponseHighlightEnabled(initialResponseHighlightEnabled);

package/package.json

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