pmx-canvas 0.6.5 → 0.7.1

package/src/client/canvas/BoardLinkDialog.tsx

@@ -0,0 +1,93 @@
+import { useRef, useState } from 'preact/hooks';
+import { activeBoardId, boardList } from '../state/boards-store';
+import { requestJson } from '../state/intent-bridge';
+import { canvasAreaCenter } from './canvas-area';
+import { viewport } from '../state/canvas-store';
+import { useFocusTrap } from './use-focus-trap';
+
+export function BoardLinkDialog({ onClose }: { onClose: () => void }) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const [query, setQuery] = useState('');
+  const [error, setError] = useState('');
+  useFocusTrap(dialogRef, true, { initial: searchRef });
+  const choices = boardList.value.filter(
+    (board) => board.id !== activeBoardId.value && board.name.toLowerCase().includes(query.trim().toLowerCase()),
+  );
+  const create = async (boardId: string) => {
+    const target = boardList.value.find((board) => board.id === boardId);
+    if (!target) return setError('That board is no longer available.');
+    const center = canvasAreaCenter();
+    const v = viewport.value;
+    const result = await requestJson<{ ok?: boolean }>(
+      'createBoardLink',
+      '/api/canvas/node',
+      {},
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'board',
+          title: target.name,
+          x: Math.round((center.x - v.x) / v.scale - 180),
+          y: Math.round((center.y - v.y) / v.scale - 100),
+          width: 360,
+          height: 200,
+          data: { boardId },
+        }),
+      },
+    );
+    if (!result.ok) return setError('Could not create the board link.');
+    onClose();
+  };
+  return (
+    <div class="text-prompt-backdrop" onMouseDown={onClose}>
+      <div
+        ref={dialogRef}
+        class="text-prompt board-link-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="board-link-title"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <h2 id="board-link-title">Link to a board</h2>
+        <input
+          ref={searchRef}
+          type="search"
+          class="text-prompt-input"
+          aria-label="Find a board to link"
+          placeholder="Find a board…"
+          value={query}
+          onInput={(e) => setQuery(e.currentTarget.value)}
+        />
+        {error && (
+          <div role="alert" class="board-copy-error">
+            {error}
+          </div>
+        )}
+        <ul class="board-link-results">
+          {choices.map((board) => (
+            <li key={board.id}>
+              <button type="button" onClick={() => void create(board.id)}>
+                <span>{board.name}</span>
+                <small>{board.nodeCount} nodes</small>
+              </button>
+            </li>
+          ))}
+          {choices.length === 0 && (
+            <li class="board-copy-status">
+              {boardList.value.length <= 1
+                ? 'Create another board first, then link it here.'
+                : 'No boards match your search.'}
+            </li>
+          )}
+        </ul>
+        <div class="text-prompt-actions">
+          <button type="button" onClick={onClose}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/canvas/BoardSwitcher.tsx

@@ -0,0 +1,149 @@
+import { render, type VNode } from 'preact';
+import { useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { activeBoard, activeBoardId, boardList, boardsLoaded, openBoard } from '../state/boards-store';
+import { IconLogo, IconArrange } from '../icons';
+import { promptNewBoard } from './HomeView';
+
+const RECENT_LIMIT = 8;
+
+/** Escape the top bar's filter/clip without installing React-compat event hooks. */
+function BoardMenuPortal({ children }: { children: VNode }) {
+  const host = useMemo(() => document.createElement('div'), []);
+  useLayoutEffect(() => {
+    document.body.appendChild(host);
+    return () => {
+      render(null, host);
+      host.remove();
+    };
+  }, [host]);
+  useLayoutEffect(() => render(children, host), [children, host]);
+  return null;
+}
+
+/**
+ * The top bar's board identity (plan 012): the open board's name, or "Home".
+ * Clicking it lists recent boards, New board, and Home. The menu is fixed-
+ * positioned so the bar's overflow clip cannot cut it off.
+ */
+export function BoardSwitcher({ fallbackName }: { fallbackName: string }) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (e.target instanceof Node && !rootRef.current?.contains(e.target) && !menuRef.current?.contains(e.target))
+        setOpen(false);
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        setOpen(false);
+        buttonRef.current?.focus();
+      }
+    };
+    // Canvas gestures stop bubbling; dismiss before those handlers run.
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, [open]);
+
+  const board = activeBoard();
+  const label = !boardsLoaded.value ? fallbackName : board ? board.name : 'Home';
+  const recent = boardList.value.filter((entry) => entry.id !== activeBoardId.value).slice(0, RECENT_LIMIT);
+  const anchor = buttonRef.current?.getBoundingClientRect();
+
+  const choose = (id: string | null) => {
+    setOpen(false);
+    void openBoard(id);
+  };
+
+  return (
+    <span class="board-switcher" ref={rootRef}>
+      <button
+        ref={buttonRef}
+        type="button"
+        class="top-bar-title board-switcher-button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={`Board: ${label}. Switch board`}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span class="board-switcher-name">{label}</span>
+        <span class="board-switcher-caret" aria-hidden="true">
+          ▾
+        </span>
+      </button>
+      {open && anchor && (
+        <BoardMenuPortal>
+          <div
+            ref={menuRef}
+            class="toolbar-menu board-switcher-menu"
+            role="menu"
+            aria-label="Boards"
+            style={{
+              position: 'fixed',
+              left: `min(${anchor.left}px, max(12px, calc(100vw - 352px)))`,
+              top: `${anchor.bottom + 8}px`,
+              right: 'auto',
+              maxHeight: `min(70vh, calc(100dvh - ${anchor.bottom + 20}px))`,
+            }}
+          >
+            {recent.length > 0 && <div class="board-switcher-heading">Recent boards</div>}
+            <div class="board-switcher-recents">
+              {recent.map((entry) => (
+                <button
+                  key={entry.id}
+                  type="button"
+                  role="menuitem"
+                  class="toolbar-menu-item"
+                  onClick={() => choose(entry.id)}
+                >
+                  <span class="board-switcher-icon" aria-hidden="true">
+                    <IconLogo size={18} />
+                  </span>
+                  <span class="board-switcher-item-copy">
+                    <span class="board-switcher-item-name">{entry.name}</span>
+                    <span class="board-switcher-item-folder">
+                      {entry.category?.split('/').join(' / ') || 'Unfiled'}
+                    </span>
+                  </span>
+                  <span class="board-switcher-item-meta">
+                    {entry.nodeCount} {entry.nodeCount === 1 ? 'node' : 'nodes'}
+                  </span>
+                </button>
+              ))}
+            </div>
+            <div class="board-switcher-actions">
+              <button
+                type="button"
+                role="menuitem"
+                class="toolbar-menu-item"
+                onClick={() => {
+                  setOpen(false);
+                  void promptNewBoard();
+                }}
+              >
+                <span class="board-switcher-icon" aria-hidden="true">
+                  +
+                </span>
+                New board…
+              </button>
+              <button type="button" role="menuitem" class="toolbar-menu-item" onClick={() => choose(null)}>
+                <span class="board-switcher-icon" aria-hidden="true">
+                  <IconArrange size={18} />
+                </span>
+                All boards (Home)
+              </button>
+            </div>
+          </div>
+        </BoardMenuPortal>
+      )}
+    </span>
+  );
+}

package/src/client/canvas/CanvasNode.tsx

@@ -730,7 +730,6 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
-                removeNode(node.id);
                 void removeNodeFromClient(node.id);
               }}
               title="Close"

package/src/client/canvas/CanvasViewport.tsx

@@ -46,6 +46,7 @@ import { HumanPresenceLayer } from './HumanPresenceLayer';
 import { reportHumanCursor } from '../state/human-store';
 import { ScopeFenceLayer } from './ScopeFenceLayer';
 import { CanvasNode } from './CanvasNode';
+import { BoardNode } from '../nodes/BoardNode';
 import { EdgeLayer } from './EdgeLayer';
 import { AnnotationLayer } from './AnnotationLayer';
 import { activeGuides } from './snap-guides';
@@ -63,6 +64,8 @@ function renderNodeContent(node: CanvasNodeState) {
       return <McpAppNode node={node} />;
     case 'graph':
       return <McpAppNode node={node} />;
+    case 'board':
+      return <BoardNode node={node} />;
     case 'prompt':
       return <PromptNode node={node} />;
     case 'response':

package/src/client/canvas/CommandPalette.tsx

@@ -17,6 +17,8 @@ import { TYPE_LABELS, type CanvasNodeState } from '../types';
 import { invalidateTokenCache } from '../theme/tokens';
 import { clearThemeOverride } from '../state/theme-override';
 import { getNodeIcon, IconArrange, IconFitAll, IconMinimap, IconMoon, IconNodeMarkdown, IconSteer } from '../icons';
+import { activeBoardId, openBoard } from '../state/boards-store';
+import { requestJson } from '../state/intent-bridge';
 
 import { modChord } from '../utils/platform';
 import { useFocusTrap } from './use-focus-trap';
@@ -24,7 +26,7 @@ import { useFocusTrap } from './use-focus-trap';
 // ── Types ───────────────────────────────────────────────────
 interface PaletteItem {
   id: string;
-  kind: 'node' | 'action';
+  kind: 'node' | 'action' | 'library';
   label: string;
   description?: string;
   /** Keyboard shortcut shown as a kbd on action rows. */
@@ -35,6 +37,14 @@ interface PaletteItem {
   action: () => void;
 }
 
+interface LibraryHit {
+  boardId: string;
+  boardTitle: string;
+  cardId: string;
+  title: string | null;
+  snippet: string;
+}
+
 // ── Fuzzy match ─────────────────────────────────────────────
 function fuzzyMatch(query: string, text: string): { match: boolean; score: number; indices: number[] } {
   const q = query.toLowerCase();
@@ -106,6 +116,8 @@ function parseTypeFilter(query: string): { typeFilter: CanvasNodeState['type'] |
 export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => void; onToggleMinimap: () => void }) {
   const [query, setQuery] = useState('');
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [libraryHits, setLibraryHits] = useState<LibraryHit[]>([]);
+  const [libraryState, setLibraryState] = useState<'idle' | 'loading' | 'error'>('idle');
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
@@ -116,6 +128,39 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
     setTimeout(() => inputRef.current?.focus(), 30);
   }, []);
 
+  useEffect(() => {
+    const q = query.trim();
+    if (q.length < 2) {
+      setLibraryHits([]);
+      setLibraryState('idle');
+      return;
+    }
+    let active = true;
+    setLibraryState('loading');
+    const timer = window.setTimeout(
+      () =>
+        void requestJson<{ results?: LibraryHit[] } | null>(
+          'paletteLibrarySearch',
+          `/api/canvas/search?q=${encodeURIComponent(q)}&scope=library&limit=12`,
+          null,
+        ).then((result) => {
+          if (!active) return;
+          if (!result) {
+            setLibraryHits([]);
+            setLibraryState('error');
+            return;
+          }
+          setLibraryHits(result.results ?? []);
+          setLibraryState('idle');
+        }),
+      150,
+    );
+    return () => {
+      active = false;
+      window.clearTimeout(timer);
+    };
+  }, [query]);
+
   // ── Build items ─────────────────────────────────────────
   const buildItems = useCallback((): PaletteItem[] => {
     const items: PaletteItem[] = [];
@@ -164,6 +209,15 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
           onClose();
         },
       },
+      {
+        label: 'Link to board…',
+        icon: getNodeIcon('board'),
+        iconTone: 'accent',
+        action: () => {
+          window.dispatchEvent(new CustomEvent('pmx-open-board-link'));
+          onClose();
+        },
+      },
       ...(sessionActive.value
         ? []
         : [
@@ -275,9 +329,39 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
     // Sort by score descending
     filtered.sort((a, b) => b.score - a.score);
   }
+  for (const hit of libraryHits) {
+    filtered.push({
+      id: `library:${hit.boardId}:${hit.cardId}`,
+      kind: 'library',
+      label: hit.title || hit.boardTitle,
+      description: `${hit.boardTitle} · ${hit.snippet}`,
+      icon: getNodeIcon('board'),
+      score: 0,
+      indices: [],
+      action: () => {
+        void (async () => {
+          await openBoard(hit.boardId);
+          if (activeBoardId.value !== hit.boardId) return;
+          for (let attempt = 0; attempt < 40 && activeBoardId.value === hit.boardId; attempt++) {
+            if (nodes.value.has(hit.cardId)) {
+              focusNode(hit.cardId);
+              onClose();
+              return;
+            }
+            await new Promise((resolve) => window.setTimeout(resolve, 25));
+          }
+        })();
+      },
+    });
+  }
   // Grouped render order (design item 7): Actions first, then Jump to.
-  filtered = [...filtered.filter((item) => item.kind === 'action'), ...filtered.filter((item) => item.kind === 'node')];
+  filtered = [
+    ...filtered.filter((item) => item.kind === 'action'),
+    ...filtered.filter((item) => item.kind === 'node'),
+    ...filtered.filter((item) => item.kind === 'library'),
+  ];
   const firstNodeIndex = filtered.findIndex((item) => item.kind === 'node');
+  const firstLibraryIndex = filtered.findIndex((item) => item.kind === 'library');
 
   // ── Sync spatial search highlights to canvas ──────────────
   useEffect(() => {
@@ -376,10 +460,29 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
           <kbd class="command-palette-esc">esc</kbd>
         </div>
         <div class="command-palette-results" ref={listRef}>
-          {filtered.length === 0 && <div class="command-palette-empty">No matching nodes or actions</div>}
+          {libraryState === 'loading' && (
+            <div class="command-palette-empty" role="status">
+              Searching all boards…
+            </div>
+          )}
+          {libraryState === 'error' && (
+            <div class="command-palette-empty" role="alert">
+              Library search is unavailable.
+            </div>
+          )}
+          {filtered.length === 0 && libraryState !== 'loading' && (
+            <div class="command-palette-empty">No matching nodes, boards, or actions</div>
+          )}
           {filtered.map((item, i) => {
             const Icon = item.icon;
-            const heading = i === 0 && item.kind === 'action' ? 'Actions' : i === firstNodeIndex ? 'Jump to' : null;
+            const heading =
+              i === 0 && item.kind === 'action'
+                ? 'Actions'
+                : i === firstNodeIndex
+                  ? 'Jump to'
+                  : i === firstLibraryIndex
+                    ? 'Across boards'
+                    : null;
             return (
               <div key={item.id} class="command-palette-row">
                 {heading && <div class="command-palette-group">{heading}</div>}

package/src/client/canvas/ContextMenu.tsx

@@ -437,6 +437,10 @@ function buildCanvasMenuItems(canvasX: number, canvasY: number): MenuItem[] {
         });
       },
     },
+    {
+      label: 'Link to board…',
+      action: () => window.dispatchEvent(new CustomEvent('pmx-open-board-link')),
+    },
     { separator: true },
     {
       label: 'New group',
@@ -665,7 +669,6 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
     label: node.type === 'group' ? 'Delete frame (children stay)' : 'Delete',
     danger: true,
     action: () => {
-      removeNode(node.id);
       void removeNodeFromClient(node.id);
     },
   });

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -16,6 +16,7 @@ import { PromptNode } from '../nodes/PromptNode';
 import { AxStepControls } from '../nodes/AxStepControls';
 import { ResponseNode } from '../nodes/ResponseNode';
 import { TraceNode } from '../nodes/TraceNode';
+import { BoardNode } from '../nodes/BoardNode';
 import {
   collapseExpandedNode,
   contextPinnedNodeIds,
@@ -41,6 +42,8 @@ function renderContent(node: CanvasNodeState, expanded: boolean) {
       return <McpAppNode node={node} expanded={expanded} />;
     case 'graph':
       return <McpAppNode node={node} expanded={expanded} />;
+    case 'board':
+      return <BoardNode node={node} />;
     case 'prompt':
       return <PromptNode node={node} />;
     case 'response':

package/src/client/canvas/ExportDialog.tsx

@@ -0,0 +1,199 @@
+import { signal } from '@preact/signals';
+import { useEffect, useState } from 'preact/hooks';
+import { requestJson } from '../state/intent-bridge';
+import { activeBoardId } from '../state/boards-store';
+
+interface ExportManifest {
+  boardId: string;
+  boardName: string;
+  cards: number;
+  connections: number;
+  frames: number;
+  placeholders: Array<{ nodeId: string; title: string; reason: string }>;
+  files: Array<{ nodeId: string; path: string; included: boolean }>;
+  attachments: Array<{ nodeId: string; name: string }>;
+  sourceDerivedCards: Array<{ nodeId: string; included: boolean }>;
+  embeddedImages: number;
+  remoteImages: string[];
+  links: string[];
+  frameNetworkDestinations: string[];
+  embeddedCodeCanAccessNetwork: boolean;
+}
+
+interface ExportResult {
+  path: string;
+  url: string;
+  bytes: number;
+}
+
+export const exportDialogOpen = signal(false);
+
+function sizeLabel(bytes: number): string {
+  return bytes >= 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)} MB` : `${Math.ceil(bytes / 1024)} KB`;
+}
+
+/**
+ * Export the open board as one HTML file (plan 013). An export is a share, so
+ * the dialog lists what goes into the file before it is written; file contents
+ * stay out unless the owner ticks them in.
+ */
+export function ExportDialog() {
+  const [includeFiles, setIncludeFiles] = useState(false);
+  const [includeDerivedText, setIncludeDerivedText] = useState(false);
+  const [manifest, setManifest] = useState<ExportManifest | null>(null);
+  const [result, setResult] = useState<ExportResult | null>(null);
+  const [busy, setBusy] = useState(false);
+  const open = exportDialogOpen.value;
+  const boardId = activeBoardId.value;
+
+  useEffect(() => {
+    if (!open || !boardId) return;
+    let current = true;
+    setResult(null);
+    setManifest(null);
+    void requestJson<{ manifest?: ExportManifest } | null>(
+      'exportPreview',
+      `/api/canvas/export/preview?board=${encodeURIComponent(boardId)}&includeFiles=${includeFiles}&includeDerivedText=${includeDerivedText}`,
+      null,
+    ).then((body) => {
+      if (current) setManifest(body?.manifest ?? null);
+    });
+    return () => {
+      current = false;
+    };
+  }, [open, includeFiles, includeDerivedText, boardId]);
+
+  useEffect(() => {
+    setIncludeDerivedText(false);
+  }, [open, boardId]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      e.stopPropagation();
+      exportDialogOpen.value = false;
+    };
+    window.addEventListener('keydown', onKey, { capture: true });
+    return () => window.removeEventListener('keydown', onKey, { capture: true });
+  }, [open]);
+
+  if (!open) return null;
+
+  const write = async () => {
+    if (!manifest || manifest.boardId !== activeBoardId.value) return;
+    setBusy(true);
+    const body = await requestJson<ExportResult | null>('exportBoard', '/api/canvas/export', null, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ board: manifest.boardId, includeFiles, includeDerivedText }),
+    });
+    setBusy(false);
+    if (body?.path && activeBoardId.value === manifest.boardId) setResult(body);
+  };
+
+  return (
+    <div class="text-prompt-backdrop" onPointerDown={() => (exportDialogOpen.value = false)}>
+      <div
+        class="text-prompt export-dialog"
+        role="dialog"
+        aria-label="Export board"
+        data-testid="export-dialog"
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <div class="text-prompt-title">Export {manifest ? `“${manifest.boardName}”` : 'board'}</div>
+        {!manifest ? (
+          <div class="export-dialog-note">Reading the board…</div>
+        ) : (
+          <>
+            <div class="export-dialog-note">
+              One HTML file anyone can open without installing anything. It will contain:
+            </div>
+            <ul class="export-dialog-list">
+              <li>
+                {manifest.cards} card{manifest.cards !== 1 ? 's' : ''} and {manifest.connections} connection
+                {manifest.connections !== 1 ? 's' : ''}
+              </li>
+              {manifest.frames > 0 && (
+                <li>{manifest.frames} embedded pages, charts or diagrams, with the code that draws them</li>
+              )}
+              {manifest.embeddedImages > 0 && <li>{manifest.embeddedImages} local images</li>}
+              {manifest.placeholders.length > 0 && (
+                <li>
+                  Shown as placeholders:{' '}
+                  {manifest.placeholders.map((entry) => `${entry.title} (${entry.reason})`).join(', ')}
+                </li>
+              )}
+              {manifest.remoteImages.length > 0 && (
+                <li>Web images loaded when opened: {manifest.remoteImages.join(', ')}</li>
+              )}
+              {manifest.links.length > 0 && <li>Links included in cards: {manifest.links.join(', ')}</li>}
+              {manifest.frameNetworkDestinations.length > 0 && (
+                <li>
+                  Network destinations referenced by embedded pages: {manifest.frameNetworkDestinations.join(', ')}
+                </li>
+              )}
+              {manifest.embeddedCodeCanAccessNetwork && (
+                <li>
+                  Warning: embedded code can access the network. Scripts may contact destinations that cannot be listed
+                  in advance.
+                </li>
+              )}
+            </ul>
+            {(manifest.attachments?.length ?? 0) > 0 && (
+              <p>Original attachments are excluded. Their filenames remain visible.</p>
+            )}
+            {(manifest.sourceDerivedCards?.length ?? 0) > 0 && (
+              <label class="export-dialog-files">
+                <input
+                  type="checkbox"
+                  checked={includeDerivedText}
+                  onChange={(event) => setIncludeDerivedText(event.currentTarget.checked)}
+                />
+                <span>Include imported document text ({manifest.sourceDerivedCards.length} cards)</span>
+              </label>
+            )}
+            {manifest.files.length > 0 && (
+              <label class="export-dialog-files">
+                <input
+                  type="checkbox"
+                  checked={includeFiles}
+                  onChange={(e) => setIncludeFiles((e.target as HTMLInputElement).checked)}
+                />
+                <span>
+                  Include the contents of {manifest.files.length} local file
+                  {manifest.files.length !== 1 ? 's' : ''}: {manifest.files.map((file) => file.path).join(', ')}
+                </span>
+              </label>
+            )}
+          </>
+        )}
+        {result && (
+          <div class="export-dialog-result" data-testid="export-result">
+            <div>
+              Saved ({sizeLabel(result.bytes)}): <code>{result.path}</code>
+            </div>
+            <div class="export-dialog-links">
+              <a href={result.url} target="_blank" rel="noopener noreferrer">
+                Open
+              </a>
+              <a class="is-primary" href={`${result.url}?download=1`}>
+                Download
+              </a>
+            </div>
+          </div>
+        )}
+        <div class="text-prompt-actions">
+          <button type="button" class="text-prompt-cancel" onClick={() => (exportDialogOpen.value = false)}>
+            {result ? 'Done' : 'Cancel'}
+          </button>
+          {!result && (
+            <button type="button" class="text-prompt-confirm" disabled={!manifest || busy} onClick={() => void write()}>
+              {busy ? 'Exporting…' : 'Export'}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}