pi-studio 0.5.35 → 0.5.37

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,8 +252,13 @@
       let responseHighlightEnabled = false;
       let editorHighlightRenderRaf = null;
       let annotationsEnabled = true;
-      const ANNOTATION_MARKER_REGEX = /\[an:\s*([^\]]+?)\]/gi;
+      let scratchpadText = "";
+      let scratchpadReturnFocusEl = null;
       const PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX = "PISTUDIOANNOT";
+      const annotationHelpers = globalThis.PiStudioAnnotationHelpers;
+      if (!annotationHelpers || typeof annotationHelpers.collectInlineAnnotationMarkers !== "function") {
+        throw new Error("Studio annotation helpers failed to load.");
+      }
       const EMPTY_OVERLAY_LINE = "\u200b";
       const MERMAID_CDN_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
       const MATHJAX_CDN_URL = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js";
@@ -861,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";
@@ -871,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();
@@ -1163,15 +1195,11 @@
       }
 
       function hasAnnotationMarkers(text) {
-        const source = String(text || "");
-        ANNOTATION_MARKER_REGEX.lastIndex = 0;
-        const hasMarker = ANNOTATION_MARKER_REGEX.test(source);
-        ANNOTATION_MARKER_REGEX.lastIndex = 0;
-        return hasMarker;
+        return annotationHelpers.hasAnnotationMarkers(text);
       }
 
       function stripAnnotationMarkers(text) {
-        return String(text || "").replace(ANNOTATION_MARKER_REGEX, "");
+        return annotationHelpers.stripAnnotationMarkers(text);
       }
 
       function prepareEditorTextForSend(text) {
@@ -1184,78 +1212,8 @@
         return annotationsEnabled ? raw : stripAnnotationMarkers(raw);
       }
 
-      function normalizePreviewAnnotationLabel(text) {
-        return String(text || "")
-          .replace(/\r\n/g, "\n")
-          .replace(/\s*\n\s*/g, " ")
-          .replace(/\s{2,}/g, " ")
-          .trim();
-      }
-
       function prepareMarkdownForPandocPreview(markdown) {
-        const source = String(markdown || "").replace(/\r\n/g, "\n");
-        const placeholders = [];
-        if (!source) {
-          return { markdown: source, placeholders: placeholders };
-        }
-
-        const lines = source.split("\n");
-        const out = [];
-        let plainBuffer = [];
-        let inFence = false;
-        let fenceChar = null;
-        let fenceLength = 0;
-
-        function flushPlain() {
-          if (plainBuffer.length === 0) return;
-          const segment = plainBuffer.join("\n").replace(/\[an:\s*([^\]]+?)\]/gi, function(_match, markerText) {
-            const label = normalizePreviewAnnotationLabel(markerText);
-            if (!label) return "";
-            const token = PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX + placeholders.length + "TOKEN";
-            placeholders.push({ token: token, text: label, title: "[an: " + label + "]" });
-            return token;
-          });
-          out.push(segment);
-          plainBuffer = [];
-        }
-
-        for (const line of lines) {
-          const trimmed = line.trimStart();
-          const fenceMatch = trimmed.match(/^(`{3,}|~{3,})/);
-
-          if (fenceMatch) {
-            const marker = fenceMatch[1] || "";
-            const markerChar = marker.charAt(0);
-            const markerLength = marker.length;
-
-            if (!inFence) {
-              flushPlain();
-              inFence = true;
-              fenceChar = markerChar;
-              fenceLength = markerLength;
-              out.push(line);
-              continue;
-            }
-
-            if (fenceChar === markerChar && markerLength >= fenceLength) {
-              inFence = false;
-              fenceChar = null;
-              fenceLength = 0;
-            }
-
-            out.push(line);
-            continue;
-          }
-
-          if (inFence) {
-            out.push(line);
-          } else {
-            plainBuffer.push(line);
-          }
-        }
-
-        flushPlain();
-        return { markdown: out.join("\n"), placeholders: placeholders };
+        return annotationHelpers.prepareMarkdownForPandocPreview(markdown, PREVIEW_ANNOTATION_PLACEHOLDER_PREFIX);
       }
 
       function wrapAsFencedCodeBlock(text, language) {
@@ -1774,8 +1732,9 @@
             if (entry) {
               const markerEl = document.createElement("span");
               markerEl.className = "annotation-preview-marker";
-              markerEl.textContent = typeof entry.text === "string" ? entry.text : token;
-              markerEl.title = typeof entry.title === "string" ? entry.title : markerEl.textContent;
+              const markerText = typeof entry.text === "string" ? entry.text : token;
+              markerEl.title = typeof entry.title === "string" ? entry.title : markerText;
+              setAnnotationPreviewMarkerContent(markerEl, markerText);
               fragment.appendChild(markerEl);
             } else {
               fragment.appendChild(document.createTextNode(token));
@@ -1819,33 +1778,28 @@
         for (const textNode of textNodes) {
           const text = typeof textNode.nodeValue === "string" ? textNode.nodeValue : "";
           if (!text) continue;
-          ANNOTATION_MARKER_REGEX.lastIndex = 0;
-          if (!ANNOTATION_MARKER_REGEX.test(text)) continue;
-          ANNOTATION_MARKER_REGEX.lastIndex = 0;
+          const markers = annotationHelpers.collectInlineAnnotationMarkers(text);
+          if (markers.length === 0) continue;
 
           const fragment = document.createDocumentFragment();
           let lastIndex = 0;
-          let match;
-          while ((match = ANNOTATION_MARKER_REGEX.exec(text)) !== null) {
-            const token = match[0] || "";
-            const start = typeof match.index === "number" ? match.index : 0;
-            if (start > lastIndex) {
-              fragment.appendChild(document.createTextNode(text.slice(lastIndex, start)));
+          markers.forEach(function(marker) {
+            const token = marker.raw || "";
+            if (marker.start > lastIndex) {
+              fragment.appendChild(document.createTextNode(text.slice(lastIndex, marker.start)));
             }
 
             if (mode === "highlight") {
               const markerEl = document.createElement("span");
               markerEl.className = "annotation-preview-marker";
-              markerEl.textContent = typeof match[1] === "string" ? match[1].trim() : token;
+              const markerText = annotationHelpers.normalizePreviewAnnotationLabel(marker.body) || token;
               markerEl.title = token;
+              setAnnotationPreviewMarkerContent(markerEl, markerText);
               fragment.appendChild(markerEl);
             }
 
-            lastIndex = start + token.length;
-            if (token.length === 0) {
-              ANNOTATION_MARKER_REGEX.lastIndex += 1;
-            }
-          }
+            lastIndex = marker.end;
+          });
 
           if (lastIndex < text.length) {
             fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
@@ -2732,50 +2686,44 @@
         return "<span class='" + className + "'>" + escapeHtml(String(text || "")) + "</span>";
       }
 
-      function wrapHighlightWithTitle(className, text, title) {
+      function buildAnnotationPreviewMarkerHtml(text, title) {
         const titleAttr = title ? " title='" + escapeHtml(String(title)) + "'" : "";
-        return "<span class='" + className + "'" + titleAttr + ">" + escapeHtml(String(text || "")) + "</span>";
+        const rendered = typeof annotationHelpers.renderPreviewAnnotationHtml === "function"
+          ? annotationHelpers.renderPreviewAnnotationHtml(text)
+          : escapeHtml(String(text || ""));
+        return "<span class='annotation-preview-marker'" + titleAttr + ">" + rendered + "</span>";
+      }
+
+      function setAnnotationPreviewMarkerContent(markerEl, text) {
+        if (!markerEl) return;
+        const rendered = typeof annotationHelpers.renderPreviewAnnotationHtml === "function"
+          ? annotationHelpers.renderPreviewAnnotationHtml(text)
+          : escapeHtml(String(text || ""));
+        markerEl.innerHTML = rendered;
       }
 
       function highlightInlineAnnotations(text, mode) {
         const source = String(text || "");
         const renderMode = mode === "preview" ? "preview" : "overlay";
-        ANNOTATION_MARKER_REGEX.lastIndex = 0;
-        let lastIndex = 0;
-        let out = "";
-
-        let match;
-        while ((match = ANNOTATION_MARKER_REGEX.exec(source)) !== null) {
-          const token = match[0] || "";
-          const start = typeof match.index === "number" ? match.index : 0;
-          const markerText = typeof match[1] === "string" ? match[1].trim() : token;
-
-          if (start > lastIndex) {
-            out += escapeHtml(source.slice(lastIndex, start));
-          }
-
-          if (renderMode === "preview") {
-            out += wrapHighlightWithTitle("annotation-preview-marker", markerText || token, token);
-          } else {
-            out += wrapHighlight(annotationsEnabled ? "hl-annotation" : "hl-annotation-muted", token);
-          }
-          lastIndex = start + token.length;
-          if (token.length === 0) {
-            ANNOTATION_MARKER_REGEX.lastIndex += 1;
-          }
-        }
-
-        ANNOTATION_MARKER_REGEX.lastIndex = 0;
-        if (lastIndex < source.length) {
-          out += escapeHtml(source.slice(lastIndex));
-        }
-
-        return out;
+        return annotationHelpers.replaceInlineAnnotationMarkers(
+          source,
+          function(marker) {
+            const token = marker.raw || "";
+            const markerText = annotationHelpers.normalizePreviewAnnotationLabel(marker.body) || token;
+            if (renderMode === "preview") {
+              return buildAnnotationPreviewMarkerHtml(markerText, token);
+            }
+            return wrapHighlight(annotationsEnabled ? "hl-annotation" : "hl-annotation-muted", token);
+          },
+          function(segment) {
+            return escapeHtml(segment);
+          },
+        );
       }
 
-      function highlightInlineMarkdown(text) {
+      function highlightInlineMarkdownWithoutAnnotations(text) {
         const source = String(text || "");
-        const pattern = /(\x60[^\x60]*\x60)|(\[[^\]]+\]\([^)]+\))|(\[an:\s*[^\]]+\])/gi;
+        const pattern = /(\x60[^\x60]*\x60)|(\[[^\]]+\]\([^)]+\))/g;
         let lastIndex = 0;
         let out = "";
 
@@ -2798,8 +2746,6 @@
             } else {
               out += escapeHtml(token);
             }
-          } else if (match[3]) {
-            out += highlightInlineAnnotations(token);
           } else {
             out += escapeHtml(token);
           }
@@ -2814,6 +2760,18 @@
         return out;
       }
 
+      function highlightInlineMarkdown(text) {
+        return annotationHelpers.replaceInlineAnnotationMarkers(
+          String(text || ""),
+          function(marker) {
+            return highlightInlineAnnotations(marker.raw || "");
+          },
+          function(segment) {
+            return highlightInlineMarkdownWithoutAnnotations(segment);
+          },
+        );
+      }
+
       function normalizeFenceLanguage(info) {
         const raw = String(info || "").trim();
         if (!raw) return "";
@@ -3280,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";
 
@@ -4786,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;
@@ -4924,6 +5067,7 @@
       refreshResponseUi();
       updateAnnotatedReplyHeaderButton();
       setActivePane("left");
+      setScratchpadText(readStoredScratchpadText() || "", { persist: false });
 
       const storedEditorHighlightEnabled = readStoredEditorHighlightEnabled();
       const initialHighlightEnabled = storedEditorHighlightEnabled ?? Boolean(highlightSelect && highlightSelect.value === "on");