feat(staged): add full-screen diagram viewer

apps/staged/package.json

@@ -25,6 +25,8 @@
     "@tailwindcss/vite": "^4.3.2",
     "@tauri-apps/cli": "^2.11.4",
     "@tsconfig/svelte": "^5.0.8",
+    "@types/d3-selection": "3.0.11",
+    "@types/d3-zoom": "3.0.8",
     "@types/node": "^24.11.0",
     "bits-ui": "^2.18.1",
     "clsx": "^2.1.1",
@@ -53,6 +55,8 @@
     "@tauri-apps/plugin-store": "^2.4.3",
     "@tauri-apps/plugin-updater": "^2.10.1",
     "ansi-to-html": "^0.7.2",
+    "d3-selection": "3.0.0",
+    "d3-zoom": "3.0.0",
     "idb-keyval": "^6.2.6",
     "marked": "^18.0.5",
     "pikchr-js": "0.1.4",

apps/staged/src/app.css

@@ -90,7 +90,8 @@
   --ui-danger-bg: rgba(248, 81, 73, 0.1);
   --ui-selection: rgba(255, 255, 255, 0.08);
 
-  --diagram-canvas-bg: #f2edf8;
+  --diagram-canvas-bg: #ffffff;
+  --diagram-stage-bg: #f2edf8;
   --pikchr-ink: #241a2f;
   --pikchr-surface: #fffaff;
   --pikchr-muted: #74677f;

apps/staged/src/lib/features/notes/NoteModal.svelte

@@ -21,6 +21,11 @@
   import { viewport } from '../../shared/viewport.svelte';
   import '../../shared/markdown/diagramStyles.css';
   import { extractMarkdownDiagramFences } from '../../shared/markdown/diagramFormats';
+  import DiagramViewerModal from '../../shared/markdown/DiagramViewerModal.svelte';
+  import {
+    getMarkdownDiagramSvgMarkup,
+    isMarkdownDiagramActivationKey,
+  } from '../../shared/markdown/diagramViewer';
   import { loadPikchrRenderer, type PikchrRenderer } from '../../shared/markdown/pikchrRendering';
   import { noteMarkdownWithTitle, renderNoteMarkdown } from './noteMarkdown';
 
@@ -65,6 +70,7 @@
   let pikchrRendererLoadFailedKey = $state<string | null>(null);
   let pikchrRendererLoadFailed = $derived(pikchrRendererLoadFailedKey === pikchrRendererLoadKey);
   let renderedNoteHtml = $derived(renderNoteMarkdown(noteMarkdown, { pikchrRenderer }));
+  let diagramViewerSvg = $state<string | null>(null);
 
   // Search state
   let searchVisible = $state(false);
@@ -217,6 +223,26 @@
     matchElements[currentMatchIndex].classList.add('search-match-current');
     scrollToMatch(matchElements[currentMatchIndex]);
   }
+
+  function openDiagramViewerFromEvent(event: MouseEvent | KeyboardEvent): boolean {
+    const svgMarkup = getMarkdownDiagramSvgMarkup(event.target);
+    if (!svgMarkup) return false;
+
+    event.preventDefault();
+    event.stopPropagation();
+    diagramViewerSvg = svgMarkup;
+    return true;
+  }
+
+  function handleContentClick(event: MouseEvent) {
+    if (openDiagramViewerFromEvent(event)) return;
+    handleExternalLinkClick(event);
+  }
+
+  function handleContentKeydown(event: KeyboardEvent) {
+    if (!isMarkdownDiagramActivationKey(event)) return;
+    openDiagramViewerFromEvent(event);
+  }
 </script>
 
 <Dialog.Root
@@ -300,7 +326,12 @@
     <div class="modal-body">
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div class="modal-content" bind:this={contentEl} onclick={handleExternalLinkClick}>
+      <div
+        class="modal-content"
+        bind:this={contentEl}
+        onclick={handleContentClick}
+        onkeydown={handleContentKeydown}
+      >
         {#if noteMarkdown.trim()}
           <div class="markdown-content">
             {@html renderedNoteHtml}
@@ -355,6 +386,12 @@
   </Dialog.Content>
 </Dialog.Root>
 
+<DiagramViewerModal
+  open={diagramViewerSvg !== null}
+  svgMarkup={diagramViewerSvg}
+  onClose={() => (diagramViewerSvg = null)}
+/>
+
 <style>
   .header-content {
     display: flex;

apps/staged/src/lib/features/sessions/SessionModal.svelte

@@ -93,6 +93,11 @@
   import { viewport } from '../../shared/viewport.svelte';
   import '../../shared/markdown/diagramStyles.css';
   import { extractMarkdownDiagramFences } from '../../shared/markdown/diagramFormats';
+  import DiagramViewerModal from '../../shared/markdown/DiagramViewerModal.svelte';
+  import {
+    getMarkdownDiagramSvgMarkup,
+    isMarkdownDiagramActivationKey,
+  } from '../../shared/markdown/diagramViewer';
   import { renderMarkdown as renderSharedMarkdown } from '../../shared/markdown/renderMarkdown';
   import { loadPikchrRenderer, type PikchrRenderer } from '../../shared/markdown/pikchrRendering';
   import { getNoteFollowupLabel, type LinkedNoteContext } from './noteFreshness';
@@ -172,6 +177,7 @@
   let pikchrRendererLoadKey = $derived(`${sessionId}\0${assistantMarkdownContent}`);
   let pikchrRendererLoadFailedKey = $state<string | null>(null);
   let pikchrRendererLoadFailed = $derived(pikchrRendererLoadFailedKey === pikchrRendererLoadKey);
+  let diagramViewerSvg = $state<string | null>(null);
 
   const SLIDE_DURATION = 150;
 
@@ -780,6 +786,26 @@
     return renderSharedMarkdown(content, { pikchrRenderer });
   }
 
+  function openDiagramViewerFromEvent(event: MouseEvent | KeyboardEvent): boolean {
+    const svgMarkup = getMarkdownDiagramSvgMarkup(event.target);
+    if (!svgMarkup) return false;
+
+    event.preventDefault();
+    event.stopPropagation();
+    diagramViewerSvg = svgMarkup;
+    return true;
+  }
+
+  function handleMessagesClick(event: MouseEvent) {
+    if (openDiagramViewerFromEvent(event)) return;
+    handleExternalLinkClick(event);
+  }
+
+  function handleMessagesKeydown(event: KeyboardEvent) {
+    if (!isMarkdownDiagramActivationKey(event)) return;
+    openDiagramViewerFromEvent(event);
+  }
+
   /** Memoized wrapper around the shared renderHashtagTokens. */
   const hashtagTokenCache = new Map<string, string>();
   let prevHashtagItems: HashtagItem[] | null = null;
@@ -1155,7 +1181,8 @@
       class="modal-content"
       bind:this={messagesEl}
       onscroll={handleScroll}
-      onclick={handleExternalLinkClick}
+      onclick={handleMessagesClick}
+      onkeydown={handleMessagesKeydown}
     >
       {#if session?.pipeline}
         <PipelineSteps {sessionId} pipeline={session.pipeline} />
@@ -1615,6 +1642,12 @@
   </Dialog.Content>
 </Dialog.Root>
 
+<DiagramViewerModal
+  open={diagramViewerSvg !== null}
+  svgMarkup={diagramViewerSvg}
+  onClose={() => (diagramViewerSvg = null)}
+/>
+
 <style>
   /* ======================================================================= */
   /* Modal shell                                                             */