pi-studio 0.5.36 → 0.5.37

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.37] — 2026-03-29
+
+### Added
+- Studio now includes a local persistent scratchpad for parking quick thoughts while you work. The scratchpad opens as an integrated modal, keeps its contents after closing, and provides copy / clear / insert-into-editor actions.
+
+### Changed
+- Scratchpad UI text and actions now make the persistence semantics explicit: closing keeps the current notes unless you actively clear them.
+
 ## [0.5.36] — 2026-03-28
 
 ### Changed

package/README.md

@@ -16,6 +16,7 @@ Extension for [pi](https://pi.dev) that opens a local two-pane browser workspace
 
 - Opens a two-pane browser workspace: **Editor** (left) + **Response/Thinking/Editor Preview** (right)
 - Runs editor text directly, or asks for structured critique (auto/writing/code focus)
+- Includes a local persistent scratchpad for quick notes you want to keep out of the main editor until you're ready to copy or insert them
 - Browses response history (`Prev/Next/Last`) and loads either:
   - response text
   - critique notes/full critique

package/client/studio-client.js

@@ -88,6 +88,16 @@
       const compactBtn = document.getElementById("compactBtn");
       const leftFocusBtn = document.getElementById("leftFocusBtn");
       const rightFocusBtn = document.getElementById("rightFocusBtn");
+      const scratchpadBtn = document.getElementById("scratchpadBtn");
+      const scratchpadOverlayEl = document.getElementById("scratchpadOverlay");
+      const scratchpadDialogEl = document.getElementById("scratchpadDialog");
+      const scratchpadTextEl = document.getElementById("scratchpadText");
+      const scratchpadMetaEl = document.getElementById("scratchpadMeta");
+      const scratchpadInsertBtn = document.getElementById("scratchpadInsertBtn");
+      const scratchpadCopyBtn = document.getElementById("scratchpadCopyBtn");
+      const scratchpadClearBtn = document.getElementById("scratchpadClearBtn");
+      const scratchpadCloseBtn = document.getElementById("scratchpadCloseBtn");
+      const scratchpadDoneBtn = document.getElementById("scratchpadDoneBtn");
 
       const initialSourceState = {
         source: (document.body && document.body.dataset && document.body.dataset.initialSource) || "blank",
@@ -227,6 +237,7 @@
       const RESPONSE_HIGHLIGHT_MAX_CHARS = 120_000;
       const RESPONSE_HIGHLIGHT_STORAGE_KEY = "piStudio.responseHighlightEnabled";
       const ANNOTATION_MODE_STORAGE_KEY = "piStudio.annotationsEnabled";
+      const SCRATCHPAD_STORAGE_KEY = "piStudio.scratchpad";
       const PREVIEW_INPUT_DEBOUNCE_MS = 0;
       const PREVIEW_PENDING_BADGE_DELAY_MS = 220;
       const previewPendingTimers = new WeakMap();
@@ -241,6 +252,8 @@
       let responseHighlightEnabled = false;
       let editorHighlightRenderRaf = null;
       let annotationsEnabled = true;
+      let scratchpadText = "";
+      let scratchpadReturnFocusEl = null;
       const PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX = "PISTUDIOANNOT";
       const annotationHelpers = globalThis.PiStudioAnnotationHelpers;
       if (!annotationHelpers || typeof annotationHelpers.collectInlineAnnotationMarkers !== "function") {
@@ -864,6 +877,28 @@
         if (!event || event.defaultPrevented) return;
 
         const key = typeof event.key === "string" ? event.key : "";
+        const plainEscape = key === "Escape"
+          && !event.metaKey
+          && !event.ctrlKey
+          && !event.altKey
+          && !event.shiftKey;
+        const scratchpadOwnsEvent = Boolean(
+          scratchpadDialogEl
+          && event.target
+          && typeof scratchpadDialogEl.contains === "function"
+          && scratchpadDialogEl.contains(event.target)
+        );
+
+        if (isScratchpadOpen() && plainEscape) {
+          event.preventDefault();
+          closeScratchpad();
+          return;
+        }
+
+        if (scratchpadOwnsEvent) {
+          return;
+        }
+
         const isToggleShortcut =
           (key === "Escape" && (event.metaKey || event.ctrlKey))
           || key === "F10";
@@ -874,13 +909,7 @@
           return;
         }
 
-        if (
-          key === "Escape"
-          && !event.metaKey
-          && !event.ctrlKey
-          && !event.altKey
-          && !event.shiftKey
-        ) {
+        if (plainEscape) {
           const activeKind = getAbortablePendingKind();
           if (activeKind === "direct" || activeKind === "critique") {
             event.preventDefault();
@@ -3209,6 +3238,126 @@
         persistStoredToggle(ANNOTATION_MODE_STORAGE_KEY, enabled);
       }
 
+      function readStoredText(storageKey) {
+        if (!window.localStorage) return null;
+        try {
+          const value = window.localStorage.getItem(storageKey);
+          return typeof value === "string" ? value : null;
+        } catch {
+          return null;
+        }
+      }
+
+      function persistStoredText(storageKey, value) {
+        if (!window.localStorage) return;
+        try {
+          window.localStorage.setItem(storageKey, String(value ?? ""));
+        } catch {
+          // ignore storage failures
+        }
+      }
+
+      function isScratchpadOpen() {
+        return Boolean(scratchpadOverlayEl && !scratchpadOverlayEl.hidden);
+      }
+
+      function readStoredScratchpadText() {
+        return readStoredText(SCRATCHPAD_STORAGE_KEY);
+      }
+
+      function persistScratchpadText(value) {
+        persistStoredText(SCRATCHPAD_STORAGE_KEY, value);
+      }
+
+      function updateScratchpadUi() {
+        const normalized = String(scratchpadText || "");
+        const hasContent = Boolean(normalized.trim());
+        if (scratchpadBtn) {
+          scratchpadBtn.textContent = hasContent ? "Scratchpad •" : "Scratchpad";
+          scratchpadBtn.classList.toggle("has-content", hasContent);
+          scratchpadBtn.title = hasContent
+            ? "Open your local persistent scratchpad. Current notes persist after closing until you edit or clear them."
+            : "Open a local persistent scratchpad for quick notes. Anything you type will persist after closing until you edit or clear it.";
+        }
+        if (scratchpadMetaEl) {
+          scratchpadMetaEl.textContent = hasContent
+            ? "Saved locally · persists after close · " + normalized.length + " chars"
+            : "Empty · local only";
+        }
+        if (scratchpadInsertBtn) scratchpadInsertBtn.disabled = !hasContent;
+        if (scratchpadCopyBtn) scratchpadCopyBtn.disabled = !hasContent;
+        if (scratchpadClearBtn) scratchpadClearBtn.disabled = !normalized.length;
+      }
+
+      function setScratchpadText(nextText, options) {
+        scratchpadText = String(nextText || "");
+        if (scratchpadTextEl && scratchpadTextEl.value !== scratchpadText) {
+          scratchpadTextEl.value = scratchpadText;
+        }
+        if (!options || options.persist !== false) {
+          persistScratchpadText(scratchpadText);
+        }
+        updateScratchpadUi();
+      }
+
+      function closeScratchpad(options) {
+        if (!scratchpadOverlayEl || scratchpadOverlayEl.hidden) return;
+        scratchpadOverlayEl.hidden = true;
+        document.body.classList.remove("scratchpad-open");
+        const focusTarget = options && Object.prototype.hasOwnProperty.call(options, "focusTarget")
+          ? options.focusTarget
+          : (scratchpadReturnFocusEl || scratchpadBtn || sourceTextEl);
+        scratchpadReturnFocusEl = null;
+        if (focusTarget && typeof focusTarget.focus === "function") {
+          const schedule = typeof window.requestAnimationFrame === "function"
+            ? window.requestAnimationFrame.bind(window)
+            : (cb) => window.setTimeout(cb, 16);
+          schedule(() => focusTarget.focus());
+        }
+      }
+
+      function openScratchpad() {
+        if (!scratchpadOverlayEl) return;
+        scratchpadReturnFocusEl = document.activeElement && document.activeElement !== document.body
+          ? document.activeElement
+          : sourceTextEl;
+        scratchpadOverlayEl.hidden = false;
+        document.body.classList.add("scratchpad-open");
+        if (scratchpadTextEl && typeof scratchpadTextEl.focus === "function") {
+          const schedule = typeof window.requestAnimationFrame === "function"
+            ? window.requestAnimationFrame.bind(window)
+            : (cb) => window.setTimeout(cb, 16);
+          schedule(() => {
+            scratchpadTextEl.focus();
+            if (typeof scratchpadTextEl.selectionStart === "number") {
+              const end = scratchpadTextEl.value.length;
+              scratchpadTextEl.setSelectionRange(end, end);
+            }
+          });
+        }
+      }
+
+      function insertScratchpadIntoEditor() {
+        const content = String(scratchpadText || "");
+        if (!content.trim()) {
+          setStatus("Scratchpad is empty.", "warning");
+          return;
+        }
+
+        const current = sourceTextEl.value || "";
+        const start = typeof sourceTextEl.selectionStart === "number" ? sourceTextEl.selectionStart : current.length;
+        const end = typeof sourceTextEl.selectionEnd === "number" ? sourceTextEl.selectionEnd : start;
+        const safeStart = Math.max(0, Math.min(start, current.length));
+        const safeEnd = Math.max(safeStart, Math.min(end, current.length));
+        const next = current.slice(0, safeStart) + content + current.slice(safeEnd);
+        setEditorText(next, { preserveScroll: false, preserveSelection: false });
+        const caret = safeStart + content.length;
+        sourceTextEl.setSelectionRange(caret, caret);
+        setActivePane("left");
+        closeScratchpad({ focusTarget: sourceTextEl });
+        setStatus("Inserted scratchpad into editor.", "success");
+      }
+
       function updateEditorHighlightState() {
         const enabled = editorHighlightEnabled && editorView === "markdown";
 
@@ -4715,6 +4864,71 @@
         }
       });
 
+      if (scratchpadBtn) {
+        scratchpadBtn.addEventListener("click", () => {
+          openScratchpad();
+        });
+      }
+
+      if (scratchpadCloseBtn) {
+        scratchpadCloseBtn.addEventListener("click", () => {
+          closeScratchpad();
+        });
+      }
+
+      if (scratchpadDoneBtn) {
+        scratchpadDoneBtn.addEventListener("click", () => {
+          closeScratchpad();
+        });
+      }
+
+      if (scratchpadOverlayEl) {
+        scratchpadOverlayEl.addEventListener("click", (event) => {
+          if (event.target === scratchpadOverlayEl) {
+            closeScratchpad();
+          }
+        });
+      }
+
+      if (scratchpadTextEl) {
+        scratchpadTextEl.addEventListener("input", () => {
+          setScratchpadText(scratchpadTextEl.value);
+        });
+      }
+
+      if (scratchpadInsertBtn) {
+        scratchpadInsertBtn.addEventListener("click", () => {
+          insertScratchpadIntoEditor();
+        });
+      }
+
+      if (scratchpadCopyBtn) {
+        scratchpadCopyBtn.addEventListener("click", async () => {
+          if (!String(scratchpadText || "").trim()) {
+            setStatus("Scratchpad is empty.", "warning");
+            return;
+          }
+
+          try {
+            await navigator.clipboard.writeText(String(scratchpadText || ""));
+            setStatus("Copied scratchpad text.", "success");
+          } catch (error) {
+            setStatus("Clipboard write failed.", "warning");
+          }
+        });
+      }
+
+      if (scratchpadClearBtn) {
+        scratchpadClearBtn.addEventListener("click", () => {
+          if (!String(scratchpadText || "").length) return;
+          const confirmed = window.confirm("Clear scratchpad text?");
+          if (!confirmed) return;
+          setScratchpadText("");
+          if (scratchpadTextEl) scratchpadTextEl.focus();
+          setStatus("Cleared scratchpad.", "success");
+        });
+      }
+
       if (saveAnnotatedBtn) {
         saveAnnotatedBtn.addEventListener("click", () => {
           const content = sourceTextEl.value;
@@ -4853,6 +5067,7 @@
       refreshResponseUi();
       updateAnnotatedReplyHeaderButton();
       setActivePane("left");
+      setScratchpadText(readStoredScratchpadText() || "", { persist: false });
 
       const storedEditorHighlightEnabled = readStoredEditorHighlightEnabled();
       const initialHighlightEnabled = storedEditorHighlightEnabled ?? Boolean(highlightSelect && highlightSelect.value === "on");

package/client/studio.css

@@ -220,6 +220,12 @@
       filter: brightness(0.95);
     }
 
+    #scratchpadBtn.has-content {
+      border-color: var(--accent);
+      color: var(--accent);
+      font-weight: 600;
+    }
+
     .section-header select {
       font-weight: 600;
       font-size: 14px;
@@ -1339,6 +1345,125 @@
       background: var(--panel);
     }
 
+    body.scratchpad-open {
+      overflow: hidden;
+    }
+
+    .scratchpad-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 50;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      background: rgba(0, 0, 0, 0.48);
+      backdrop-filter: blur(2px);
+    }
+
+    .scratchpad-overlay[hidden] {
+      display: none !important;
+    }
+
+    .scratchpad-dialog {
+      width: min(860px, 100%);
+      max-height: min(82vh, 900px);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      background: var(--panel);
+      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .scratchpad-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 16px 18px 12px;
+      border-bottom: 1px solid var(--border-muted);
+      background: var(--panel-2);
+    }
+
+    .scratchpad-header > div {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    .scratchpad-header h2 {
+      margin: 0;
+      font-size: 17px;
+      font-weight: 600;
+    }
+
+    .scratchpad-description {
+      margin: 6px 0 0;
+      font-size: 12px;
+      line-height: 1.45;
+      color: var(--muted);
+      max-width: none;
+    }
+
+    .scratchpad-close-btn {
+      padding: 6px 10px;
+      line-height: 1;
+      flex: 0 0 auto;
+    }
+
+    .scratchpad-textarea {
+      width: 100%;
+      min-height: 280px;
+      flex: 1 1 auto;
+      border: 0;
+      border-bottom: 1px solid var(--border-muted);
+      border-radius: 0;
+      margin: 0;
+      padding: 16px 18px;
+      background: var(--panel);
+      color: var(--text);
+      font-family: var(--font-mono);
+      font-size: 13px;
+      line-height: 1.55;
+      resize: vertical;
+      outline: none;
+    }
+
+    .scratchpad-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+      padding: 12px 18px 16px;
+      background: var(--panel);
+    }
+
+    .scratchpad-meta {
+      font-size: 12px;
+      color: var(--muted);
+    }
+
+    .scratchpad-actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+
+    #scratchpadDoneBtn:not(:disabled) {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: var(--accent-contrast);
+      font-weight: 600;
+    }
+
+    #scratchpadDoneBtn:not(:disabled):hover {
+      filter: brightness(0.95);
+    }
+
     #status.error { color: var(--error); }
     #status.warning { color: var(--warn); }
     #status.success { color: var(--ok); }

package/index.ts

@@ -5740,6 +5740,7 @@ ${cssVarsBlock}
         </div>
         <div class="section-header-actions">
           <button id="leftFocusBtn" class="pane-focus-btn" type="button" title="Show only the editor pane. Shortcut: F10 or Cmd/Ctrl+Esc.">Focus pane</button>
+          <button id="scratchpadBtn" type="button" title="Open a local persistent scratchpad for quick notes. Scratchpad text is never run, critiqued, or exported unless you explicitly insert it into the editor.">Scratchpad</button>
         </div>
       </div>
       <div class="source-wrap">
@@ -5875,6 +5876,28 @@ ${cssVarsBlock}
     <span class="shortcut-hint">Focus pane: F10 (or Cmd/Ctrl+Esc) to toggle · Run / queue steering: Cmd/Ctrl+Enter · Stop request: Esc</span>
   </footer>
 
+  <div id="scratchpadOverlay" class="scratchpad-overlay" hidden>
+    <div id="scratchpadDialog" class="scratchpad-dialog" role="dialog" aria-modal="true" aria-labelledby="scratchpadTitle">
+      <div class="scratchpad-header">
+        <div>
+          <h2 id="scratchpadTitle">Scratchpad</h2>
+          <p class="scratchpad-description">Local persistent notes for thoughts you want to park while working. Closing the scratchpad does not clear it: notes persist locally until you edit or clear them. Scratchpad text is not run, critiqued, sent, or exported unless you explicitly insert it into the editor.</p>
+        </div>
+        <button id="scratchpadCloseBtn" type="button" class="scratchpad-close-btn" aria-label="Keep current scratchpad text and close scratchpad" title="Keep current scratchpad text and close scratchpad">✕</button>
+      </div>
+      <textarea id="scratchpadText" class="scratchpad-textarea" placeholder="Jot quick thoughts, TODOs, or prompt ideas here..."></textarea>
+      <div class="scratchpad-footer">
+        <span id="scratchpadMeta" class="scratchpad-meta">Empty · local only</span>
+        <div class="scratchpad-actions">
+          <button id="scratchpadInsertBtn" type="button" title="Insert the scratchpad text into the editor at the current selection, or append it if no editor selection is available.">Insert into editor</button>
+          <button id="scratchpadCopyBtn" type="button" title="Copy scratchpad text to the clipboard.">Copy</button>
+          <button id="scratchpadClearBtn" type="button" title="Clear scratchpad text.">Clear</button>
+          <button id="scratchpadDoneBtn" type="button" title="Keep the current scratchpad text and close the scratchpad.">Keep and close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Defer sanitizer script so studio can boot/connect even if CDN is slow or blocked. -->
   <script defer src="https://cdn.jsdelivr.net/npm/dompurify@3.2.6/dist/purify.min.js"></script>
   <script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.36",
+  "version": "0.5.37",
   "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",