pi-studio 0.5.38 → 0.5.40

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.40] — 2026-03-30
+
+### Changed
+- Studio editor highlighting now keeps plain text in code files closer to the normal editor foreground while preserving a distinct markdown-code tint for inline backticks and unlabeled fenced blocks.
+- Language-aware Studio syntax highlighting for code files and labeled fenced code blocks is now a bit richer, with additional highlighting for function-like identifiers, type/class-like names, and a few language-specific constructs such as decorators or macros.
+
+## [0.5.39] — 2026-03-30
+
+### Added
+- Studio now supports the familiar `Cmd/Ctrl+S` shortcut for saving editor content.
+
+### Changed
+- `Cmd/Ctrl+S` now triggers **Save editor** when a direct save path is available, and falls back to **Save editor as…** otherwise.
+- Save button tooltips and the footer shortcut hint now advertise the save shortcut explicitly.
+
 ## [0.5.38] — 2026-03-29
 
 ### Added

package/client/studio-client.js

@@ -878,6 +878,19 @@
         return true;
       }
 
+      function triggerEditorSaveShortcut() {
+        if (saveOverBtn && !saveOverBtn.disabled && !saveOverBtn.hidden) {
+          saveOverBtn.click();
+          return true;
+        }
+        if (saveAsBtn && !saveAsBtn.disabled && !saveAsBtn.hidden) {
+          saveAsBtn.click();
+          return true;
+        }
+        setStatus("Save is unavailable right now.", "warning");
+        return false;
+      }
+
       function handlePaneShortcut(event) {
         if (!event || event.defaultPrevented) return;
 
@@ -914,6 +927,18 @@
           return;
         }
 
+        const isSaveShortcut =
+          key.toLowerCase() === "s"
+          && (event.metaKey || event.ctrlKey)
+          && !event.altKey
+          && !event.shiftKey;
+
+        if (isSaveShortcut) {
+          event.preventDefault();
+          triggerEditorSaveShortcut();
+          return;
+        }
+
         if (plainEscape) {
           const activeKind = getAbortablePendingKind();
           if (activeKind === "direct" || activeKind === "critique") {
@@ -2525,11 +2550,11 @@
 
         var effectivePath = getEffectiveSavePath();
         if (effectivePath) {
-          saveOverBtn.title = "Overwrite file: " + effectivePath;
+          saveOverBtn.title = "Overwrite file: " + effectivePath + " · Shortcut: Cmd/Ctrl+S.";
           return;
         }
 
-        saveOverBtn.title = "Save editor is available after opening a file, setting a working dir, or using Save editor as…";
+        saveOverBtn.title = "Save editor is available after opening a file, setting a working dir, or using Save editor as…. Shortcut: Cmd/Ctrl+S falls back to Save editor as… when needed.";
       }
 
       function syncActionButtons() {
@@ -2743,7 +2768,7 @@
           }
 
           if (match[1]) {
-            out += wrapHighlight("hl-code", token);
+            out += wrapHighlight("hl-md-code", token);
           } else if (match[2]) {
             const linkMatch = token.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
             if (linkMatch) {
@@ -2845,37 +2870,43 @@
         }
 
         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 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|interface|implements|enum|type|public|private|protected|readonly|abstract|declare|this|super)\b)|(\b[A-Za-z_$][A-Za-z0-9_$]*(?=\s*\())|(\b[A-Z][A-Za-z0-9_$]*\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";
+            if (match[4]) return "hl-code-fn";
+            if (match[5]) return "hl-code-type";
+            if (match[6]) 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 pyPattern = /(#.*$)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(@[A-Za-z_][A-Za-z0-9_]*)|(\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[A-Za-z_][A-Za-z0-9_]*(?=\s*\())|(\b[A-Z][A-Za-z0-9_]*\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";
+            if (match[3]) return "hl-code-fn";
+            if (match[4]) return "hl-code-kw";
+            if (match[5]) return "hl-code-fn";
+            if (match[6]) return "hl-code-type";
+            if (match[7]) 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 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[A-Za-z_][A-Za-z0-9_]*(?=\s*\(\s*\)))|(\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";
+            if (match[5]) return "hl-code-fn";
+            if (match[6]) return "hl-code-num";
             return "hl-code";
           });
           return "<span class='hl-code'>" + highlighted + "</span>";
@@ -2894,74 +2925,85 @@
         }
 
         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 rustPattern = /(\/\/.*$)|("(?:[^"\\]|\\.)*")|(\b[A-Za-z_][A-Za-z0-9_]*!(?=\s*(?:\(|\{|\[)))|(\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[A-Za-z_][A-Za-z0-9_]*(?=\s*\())|(\b[A-Z][A-Za-z0-9_]*\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";
+            if (match[3]) return "hl-code-fn";
+            if (match[4]) return "hl-code-kw";
+            if (match[5]) return "hl-code-fn";
+            if (match[6]) return "hl-code-type";
+            if (match[7]) 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 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[A-Za-z_][A-Za-z0-9_]*(?=\s*\())|(\b[A-Z][A-Za-z0-9_]*\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";
+            if (match[5]) return "hl-code-fn";
+            if (match[6]) return "hl-code-type";
+            if (match[7]) 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 jlPattern = /(#.*$)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(@[A-Za-z_][A-Za-z0-9_]*)|(\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[A-Za-z_][A-Za-z0-9_]*!?(?=\s*\())|(\b[A-Z][A-Za-z0-9_]*\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";
+            if (match[3]) return "hl-code-fn";
+            if (match[4]) return "hl-code-kw";
+            if (match[5]) return "hl-code-fn";
+            if (match[6]) return "hl-code-type";
+            if (match[7]) 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 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[A-Za-z_][A-Za-z0-9_]*(?=\s*\())|(\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";
+            if (match[4]) return "hl-code-fn";
+            if (match[5]) 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 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[A-Za-z.][A-Za-z0-9._]*(?=\s*\())|(\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";
+            if (match[4]) return "hl-code-op";
+            if (match[5]) return "hl-code-fn";
+            if (match[6]) 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 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[A-Za-z_][A-Za-z0-9_]*(?=\s*\())|(\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";
+            if (match[4]) return "hl-code-fn";
+            if (match[5]) return "hl-code-num";
             return "hl-code";
           });
           return "<span class='hl-code'>" + highlighted + "</span>";
@@ -3059,7 +3101,13 @@
           }
 
           if (inFence) {
-            out.push(line.length > 0 ? highlightCodeLine(line, fenceLanguage) : EMPTY_OVERLAY_LINE);
+            if (line.length === 0) {
+              out.push(EMPTY_OVERLAY_LINE);
+            } else if (fenceLanguage) {
+              out.push(highlightCodeLine(line, fenceLanguage));
+            } else {
+              out.push(wrapHighlight("hl-md-code", line));
+            }
             continue;
           }
 

package/client/studio.css

@@ -482,6 +482,10 @@
     }
 
     .hl-code {
+      color: var(--text);
+    }
+
+    .hl-md-code {
       color: var(--md-code);
     }
 
@@ -508,6 +512,18 @@
       color: var(--syntax-variable);
     }
 
+    .hl-code-fn {
+      color: var(--syntax-function);
+    }
+
+    .hl-code-type {
+      color: var(--syntax-type);
+    }
+
+    .hl-code-op {
+      color: var(--syntax-operator);
+    }
+
     .hl-diff-add {
       color: var(--ok);
       background: rgba(46, 160, 67, 0.12);

package/index.ts

@@ -5732,8 +5732,8 @@ ${cssVarsBlock}
   <header>
     <h1><span class="app-logo" aria-hidden="true">π</span> Studio <span class="app-subtitle">${appSubtitle}</span></h1>
     <div class="controls">
-      <button id="saveAsBtn" type="button" title="Save editor content to a new file path.">Save editor as…</button>
-      <button id="saveOverBtn" type="button" title="Overwrite current file with editor content." disabled>Save editor</button>
+      <button id="saveAsBtn" type="button" title="Save editor content to a new file path. Cmd/Ctrl+S falls back here when no direct save path is available.">Save editor as…</button>
+      <button id="saveOverBtn" type="button" title="Overwrite current file with editor content. Shortcut: Cmd/Ctrl+S.">Save editor</button>
       <label class="file-label" title="Load a local file into editor text.">Load file content<input id="fileInput" type="file" accept=".md,.markdown,.mdx,.qmd,.js,.mjs,.cjs,.jsx,.ts,.mts,.cts,.tsx,.py,.pyw,.sh,.bash,.zsh,.json,.jsonc,.json5,.rs,.c,.h,.cpp,.cxx,.cc,.hpp,.hxx,.jl,.f90,.f95,.f03,.f,.for,.r,.R,.m,.tex,.latex,.diff,.patch,.java,.go,.rb,.swift,.html,.htm,.css,.xml,.yaml,.yml,.toml,.lua,.txt,.rst,.adoc" /></label>
       <button id="loadGitDiffBtn" type="button" title="Load the current git diff from the Studio context into the editor.">Load git diff</button>
       <button id="getEditorBtn" type="button" title="Load the current terminal editor draft into Studio.">Load from pi editor</button>
@@ -5884,7 +5884,7 @@ ${cssVarsBlock}
   <footer>
     <span id="statusLine"><span id="statusSpinner" aria-hidden="true"> </span><span id="status">Booting studio…</span></span>
     <span id="footerMeta" class="footer-meta"><span id="footerMetaText" class="footer-meta-text">Model: ${initialModel} · Terminal: ${initialTerminal} · Context: unknown</span><button id="compactBtn" class="footer-compact-btn" type="button" title="Trigger pi context compaction now.">Compact</button></span>
-    <span class="shortcut-hint">Focus pane: F10 (or Cmd/Ctrl+Esc) to toggle · Run / queue steering: Cmd/Ctrl+Enter · Stop request: Esc</span>
+    <span class="shortcut-hint">Focus pane: F10 (or Cmd/Ctrl+Esc) to toggle · Save editor: Cmd/Ctrl+S · Run / queue steering: Cmd/Ctrl+Enter · Stop request: Esc</span>
   </footer>
 
   <div id="scratchpadOverlay" class="scratchpad-overlay" hidden>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.38",
+  "version": "0.5.40",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",