pmx-canvas 0.6.5 → 0.7.1

package/src/client/canvas/HomeView.tsx

@@ -0,0 +1,277 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { ComponentChildren } from 'preact';
+import {
+  boardList,
+  activeBoardId,
+  createAndOpenBoard,
+  deleteBoard,
+  openBoard,
+  updateBoard,
+  type BoardSummary,
+} from '../state/boards-store';
+import { categoryAncestors, MIGRATED_SNAPSHOT_CATEGORY } from '../../shared/boards.js';
+import { askText } from './TextPrompt';
+import { BoardFolderDialog } from './BoardFolderDialog';
+import { requestJson } from '../state/intent-bridge';
+import { focusNode, nodes } from '../state/canvas-store';
+import { BoardCopyDialog } from './BoardCopyDialog';
+
+interface LibraryHit {
+  boardId: string;
+  boardTitle: string;
+  cardId: string;
+  title: string | null;
+  snippet: string;
+}
+
+function timeAgo(iso: string | null): string {
+  if (!iso) return 'never opened';
+  const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+function nodesLabel(count: number): string {
+  return `${count} node${count !== 1 ? 's' : ''}`;
+}
+
+export async function promptNewBoard(): Promise<void> {
+  const name = await askText('New board', 'Board name', { confirm: 'Create' });
+  if (name) await createAndOpenBoard(name);
+}
+
+const COLLAPSED_KEY = 'pmx-canvas-home-collapsed';
+
+/** Which categories this viewer folded away; the migrated-snapshot shelf starts folded. */
+function readCollapsed(): Set<string> {
+  try {
+    const raw = localStorage.getItem(COLLAPSED_KEY);
+    if (raw) return new Set(JSON.parse(raw) as string[]);
+  } catch {
+    // Storage can be unavailable (private windows, embedded panes): fall back to the default.
+  }
+  return new Set([MIGRATED_SNAPSHOT_CATEGORY]);
+}
+
+function writeCollapsed(collapsed: Set<string>): void {
+  try {
+    localStorage.setItem(COLLAPSED_KEY, JSON.stringify([...collapsed]));
+  } catch {
+    // Folding still works for this visit without storage.
+  }
+}
+
+/**
+ * Home (plan 012): the view when no board is open — every board, filed under
+ * its category (most recently opened first within each). Categories keep the
+ * library findable as it grows into the working memory of many sessions.
+ * Deleting asks in place, naming the board and what it holds; browser confirm
+ * dialogs are no-ops in agent panes.
+ */
+export function HomeView() {
+  const boards = boardList.value;
+  const [confirmingDelete, setConfirmingDelete] = useState<string | null>(null);
+  const [moving, setMoving] = useState<string | null>(null);
+  const [copying, setCopying] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [hits, setHits] = useState<LibraryHit[]>([]);
+  const [collapsed, setCollapsed] = useState<Set<string>>(readCollapsed);
+  const openHitSequence = useRef(0);
+  const folders = [
+    ...new Set(boards.flatMap((board) => (board.category ? categoryAncestors(board.category) : []))),
+  ].sort((a, b) => a.localeCompare(b));
+  const query = search.trim().toLocaleLowerCase();
+  const visible = boards.filter((board) => `${board.name} ${board.category ?? ''}`.toLocaleLowerCase().includes(query));
+  const visibleFolders = new Set(visible.flatMap((board) => (board.category ? categoryAncestors(board.category) : [])));
+  const movingBoard = boards.find((board) => board.id === moving);
+  const copyingBoard = boards.find((board) => board.id === copying);
+
+  useEffect(() => {
+    const q = search.trim();
+    if (!q) {
+      setHits([]);
+      return;
+    }
+    let cancelled = false;
+    const timer = window.setTimeout(() => {
+      void requestJson<{ results?: LibraryHit[] } | null>(
+        'searchLibrary',
+        `/api/canvas/search?q=${encodeURIComponent(q)}&scope=library&limit=30`,
+        null,
+      ).then((result) => {
+        if (!cancelled) setHits(result?.results ?? []);
+      });
+    }, 150);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [search]);
+
+  const openHit = async (hit: LibraryHit) => {
+    const sequence = ++openHitSequence.current;
+    await openBoard(hit.boardId);
+    for (let attempt = 0; attempt < 40; attempt++) {
+      if (sequence !== openHitSequence.current || activeBoardId.value !== hit.boardId) return;
+      if (nodes.value.has(hit.cardId)) {
+        focusNode(hit.cardId);
+        return;
+      }
+      await new Promise((resolve) => window.setTimeout(resolve, 25));
+    }
+  };
+
+  const toggle = (name: string) => {
+    const next = new Set(collapsed);
+    if (next.has(name)) next.delete(name);
+    else next.add(name);
+    setCollapsed(next);
+    writeCollapsed(next);
+  };
+
+  const rename = async (board: BoardSummary) => {
+    const name = await askText('Rename board', 'Board name', { initial: board.name, confirm: 'Rename' });
+    if (name && name !== board.name) await updateBoard(board.id, { name });
+  };
+
+  const row = (board: BoardSummary) =>
+    confirmingDelete === board.id ? (
+      <li key={board.id} class="home-board is-confirming" data-testid="home-board">
+        <div class="home-board-confirm-text">
+          Delete <strong>{board.name}</strong> and its {nodesLabel(board.nodeCount)} and snapshots? This can't be
+          undone.
+        </div>
+        <div class="home-board-actions">
+          <button type="button" class="home-board-action" onClick={() => setConfirmingDelete(null)}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="home-board-action is-danger"
+            onClick={() => {
+              setConfirmingDelete(null);
+              void deleteBoard(board.id);
+            }}
+          >
+            Delete board
+          </button>
+        </div>
+      </li>
+    ) : (
+      <li key={board.id} class="home-board" data-testid="home-board">
+        <button type="button" class="home-board-open" onClick={() => void openBoard(board.id)}>
+          <span class="home-board-name">{board.name}</span>
+          <span class="home-board-meta">
+            {nodesLabel(board.nodeCount)} · {timeAgo(board.lastOpenedAt)}
+          </span>
+        </button>
+        <div class="home-board-actions">
+          <button type="button" class="home-board-action" aria-haspopup="dialog" onClick={() => setMoving(board.id)}>
+            Move
+          </button>
+          <button type="button" class="home-board-action" aria-haspopup="dialog" onClick={() => setCopying(board.id)}>
+            Create from…
+          </button>
+          <button type="button" class="home-board-action" onClick={() => void rename(board)}>
+            Rename
+          </button>
+          <button type="button" class="home-board-action" onClick={() => setConfirmingDelete(board.id)}>
+            Delete
+          </button>
+        </div>
+      </li>
+    );
+
+  const folder = (path: string, depth: number): ComponentChildren => {
+    const children = folders.filter(
+      (candidate) => candidate.slice(0, candidate.lastIndexOf('/')) === path && candidate.includes('/'),
+    );
+    const direct = visible.filter((board) => board.category === path);
+    const count = visible.filter((board) => board.category === path || board.category?.startsWith(`${path}/`)).length;
+    const expanded = !!query || !collapsed.has(path);
+    return (
+      <section key={path} class="home-section" data-testid="home-section" data-folder={path} aria-label={path}>
+        <button type="button" class="home-section-head" aria-expanded={expanded} onClick={() => toggle(path)}>
+          <svg class="home-section-chevron" viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true">
+            <path d="m7.5 4.75 5.25 5.25-5.25 5.25" />
+          </svg>
+          <svg class="home-section-folder" viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true">
+            <path d="M2.75 5.75A1.75 1.75 0 0 1 4.5 4h3l1.75 2h6.25a1.75 1.75 0 0 1 1.75 1.75v6.5A1.75 1.75 0 0 1 15.5 16h-11a1.75 1.75 0 0 1-1.75-1.75v-8.5Z" />
+          </svg>
+          <span class="home-section-name">{path.split('/').at(-1)}</span>
+          <span class="home-section-count">{count}</span>
+        </button>
+        {expanded && (
+          <div class="home-folder-children" style={{ marginLeft: depth < 5 ? '14px' : '0' }}>
+            {children.filter((child) => visibleFolders.has(child)).map((child) => folder(child, depth + 1))}
+            {direct.length > 0 && (
+              <ul class="home-view-list" aria-label={`Boards in ${path}`}>
+                {direct.map(row)}
+              </ul>
+            )}
+          </div>
+        )}
+      </section>
+    );
+  };
+
+  return (
+    <div class="home-view" data-testid="home-view">
+      <div class="home-view-inner">
+        <div class="home-view-head">
+          <h1 class="home-view-title">Boards</h1>
+          <button type="button" class="home-view-new" onClick={() => void promptNewBoard()}>
+            New board
+          </button>
+        </div>
+        <input
+          class="text-prompt-input home-search"
+          type="search"
+          aria-label="Find boards and folders"
+          placeholder="Find boards and folders…"
+          value={search}
+          onInput={(event) => setSearch(event.currentTarget.value)}
+        />
+        {boards.length === 0 ? (
+          <div class="home-view-empty">No boards yet. Create one, or let an agent start writing — it opens one.</div>
+        ) : query && hits.length > 0 ? (
+          <ul class="home-view-list" aria-label="Library search results">
+            {hits.map((hit) => (
+              <li class="home-board" key={`${hit.boardId}:${hit.cardId}`}>
+                <button type="button" class="home-board-open" onClick={() => void openHit(hit)}>
+                  <span class="home-board-name">{hit.title || hit.boardTitle}</span>
+                  <span class="home-board-meta">
+                    {hit.boardTitle} · {hit.snippet}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        ) : visible.length === 0 ? (
+          <div class="home-view-empty" role="status">
+            No boards match “{search}”.
+          </div>
+        ) : (
+          <>
+            {folders.filter((path) => !path.includes('/') && visibleFolders.has(path)).map((path) => folder(path, 0))}
+            {visible.some((board) => !board.category) && (
+              <section aria-label="Unfiled boards">
+                {folders.length > 0 && <div class="home-folder-hint">Unfiled boards</div>}
+                <ul class="home-view-list">{visible.filter((board) => !board.category).map(row)}</ul>
+              </section>
+            )}
+          </>
+        )}
+      </div>
+      {movingBoard && (
+        <BoardFolderDialog key={movingBoard.id} board={movingBoard} folders={folders} onClose={() => setMoving(null)} />
+      )}
+      {copyingBoard && <BoardCopyDialog key={copyingBoard.id} board={copyingBoard} onClose={() => setCopying(null)} />}
+    </div>
+  );
+}

package/src/client/canvas/Presentation.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { cameraSchema, interpolateCamera, resolveStop, type Camera, type Tour } from '../../shared/tour.js';
 import { canvasArea } from './canvas-area';
 import { cancelViewportAnimation, hasInitialServerLayout, nodes, viewport } from '../state/canvas-store';
 import { presenting, recordingCamera } from '../state/presentation';
 import { requestJson } from '../state/intent-bridge';
+import { usePanZoom } from './use-pan-zoom';
 
 declare global {
   interface Window {
@@ -22,6 +23,17 @@ export function Presentation() {
   const [error, setError] = useState('');
   const active = presenting.value;
   const ready = hasInitialServerLayout.value;
+  const frame = useRef(0);
+  const moveCamera = (camera: Camera) => {
+    cancelAnimationFrame(frame.current);
+    viewport.value = camera;
+  };
+  // A separate gesture surface keeps cards read-only and camera changes local.
+  const navigationRef = usePanZoom({
+    viewport,
+    onViewportChange: moveCamera,
+    onViewportCommit: moveCamera,
+  });
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     presenting.value = params.get('present') === '1';
@@ -76,20 +88,20 @@ export function Presentation() {
     const from = { ...viewport.value };
     const start = performance.now();
     const duration = (stop.duration ?? 1) * 1000;
-    let frame = 0;
     const tick = (now: number) => {
       if (recordingCamera.value) return;
       const t = duration === 0 ? 1 : Math.min(1, (now - start) / duration);
       viewport.value = interpolateCamera(from, target, t, area.width, area.height, stop.easing, stop.pullback);
-      if (t < 1) frame = requestAnimationFrame(tick);
+      if (t < 1) frame.current = requestAnimationFrame(tick);
     };
-    frame = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame);
+    frame.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame.current);
   }, [active, index, tour]);
   useEffect(() => {
     if (!active) return;
     const key = (event: KeyboardEvent) => {
       event.stopImmediatePropagation();
+      if (event.target instanceof HTMLButtonElement && ['Enter', ' '].includes(event.key)) return;
       if (['Escape', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', ' '].includes(event.key))
         event.preventDefault();
       if (event.key === 'Escape') presenting.value = false;
@@ -100,9 +112,27 @@ export function Presentation() {
     document.addEventListener('keydown', key, true);
     return () => document.removeEventListener('keydown', key, true);
   }, [active, tour]);
-  return active && error ? (
-    <div class="presentation-error" role="alert">
-      {error}
-    </div>
+  return active ? (
+    <>
+      {!recordingCamera.value && (
+        <div
+          class="presentation-navigation"
+          ref={navigationRef}
+          onPointerDown={(event) => {
+            if (event.button === 1 || event.button === 2) cancelAnimationFrame(frame.current);
+          }}
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          <button type="button" class="presentation-exit" onClick={() => (presenting.value = false)}>
+            Exit presentation
+          </button>
+        </div>
+      )}
+      {error && (
+        <div class="presentation-error" role="alert">
+          {error}
+        </div>
+      )}
+    </>
   ) : null;
 }

package/src/client/canvas/SelectionBar.tsx

@@ -8,7 +8,6 @@ import {
   clearSelection,
   contextPinnedNodeIds,
   distributeSelection,
-  removeNode,
   selectedNodeIds,
 } from '../state/canvas-store';
 import { createEdgeFromClient, createGroupFromClient, removeNodeFromClient } from '../state/intent-bridge';
@@ -51,7 +50,6 @@ export function SelectionBar() {
   const handleDelete = useCallback(() => {
     const ids = Array.from(selectedNodeIds.value);
     for (const id of ids) {
-      removeNode(id);
       void removeNodeFromClient(id);
     }
     clearSelection();

package/src/client/canvas/SessionPanel.tsx

@@ -8,6 +8,7 @@ import {
   type ApprovalGateView,
   endSession,
   heldGates,
+  resolvedGates,
   pendingGates,
   refreshTimeline,
   reopenGate,
@@ -195,6 +196,28 @@ function HeldGateRow({ gate }: { gate: ApprovalGateView }) {
   );
 }
 
+function answerLabel(gate: ApprovalGateView): string {
+  const by = gate.resolvedBy;
+  if (!by) return gate.status;
+  const decision = gate.status === 'approved' ? 'Approved' : 'Rejected';
+  if (by.actor === 'human') return `${decision} by you`;
+  if (by.actor === 'system') return `${decision} by system`;
+  const name = by.agentId || by.source || 'agent';
+  return `${gate.selfAnswer ? 'Self-' : ''}${decision.toLowerCase()} by ${name}`;
+}
+
+function ResolvedGateRow({ gate }: { gate: ApprovalGateView }) {
+  return (
+    <li class={`session-item status-${gate.status}`} data-gate-id={gate.id}>
+      <span class="session-glyph" aria-hidden="true" />
+      <div class="session-item-main">
+        <span class="session-item-title">{gate.title}</span>
+        <div class="session-item-detail">{answerLabel(gate)}</div>
+      </div>
+    </li>
+  );
+}
+
 /**
  * Scope row under the header: the fence the human granted, or the affordance
  * to grant one from the current selection. The server refuses agent writes
@@ -296,6 +319,7 @@ export function SessionPanel() {
   const items = sessionWorkItems.value;
   const gates = pendingGates.value;
   const held = heldGates.value;
+  const resolved = resolvedGates.value;
   const entries = timelineEntries.value;
   const [workOpen, setWorkOpen] = useState(false);
   // Which filter chip the pointer/focus is on — drives the caption under the
@@ -435,7 +459,7 @@ export function SessionPanel() {
                   </span>
                 </button>
                 {showList &&
-                  (gates.length === 0 && held.length === 0 && items.length === 0 ? (
+                  (gates.length === 0 && held.length === 0 && resolved.length === 0 && items.length === 0 ? (
                     <div class="session-empty">No work items yet — the agent's tasks and gates appear here.</div>
                   ) : (
                     <ul class="session-list" aria-live="polite" aria-label="Work items and gates">
@@ -445,6 +469,9 @@ export function SessionPanel() {
                       {held.map((gate) => (
                         <HeldGateRow key={gate.id} gate={gate} />
                       ))}
+                      {resolved.map((gate) => (
+                        <ResolvedGateRow key={gate.id} gate={gate} />
+                      ))}
                       {items.map((item) => (
                         <WorkItemRow key={item.id} item={item} />
                       ))}

package/src/client/canvas/ToolRail.tsx

@@ -30,8 +30,12 @@ import {
   forceDirectedArrange,
   nodes,
   traceEnabled,
+  viewport,
 } from '../state/canvas-store';
+import { importFiles } from './import-files';
+import { canvasArea } from './canvas-area';
 import { saveCanvasTheme } from '../state/intent-bridge';
+import { openBoard } from '../state/boards-store';
 import { createNodeInView } from './create-in-view';
 import { askText } from './TextPrompt';
 import { FeedbackDialog } from './FeedbackDialog';
@@ -175,6 +179,7 @@ export function ToolRail({
   const [openMenu, setOpenMenu] = useState<null | 'theme' | 'annotate'>(null);
   const [menuAnchor, setMenuAnchor] = useState<{ top: number; bottom: number; right: number } | null>(null);
   const railRef = useRef<HTMLDivElement>(null);
+  const documentInput = useRef<HTMLInputElement>(null);
 
   const toggleMenu = (menu: 'theme' | 'annotate') => (e: MouseEvent) => {
     if (openMenu === menu) {
@@ -240,9 +245,18 @@ export function ToolRail({
   return (
     <>
       <div class="tool-rail" ref={railRef} role="toolbar" aria-label="Canvas tools" aria-orientation="vertical">
-        <span class="rail-brand" title="PMX Canvas" aria-label="PMX Canvas">
-          <IconLogo size={22} />
-        </span>
+        <RailButton
+          label="Home"
+          ariaLabel="PMX Canvas — Home"
+          onClick={() => {
+            setOpenMenu(null);
+            void openBoard(null).catch((error) => logRailError('openHome', error));
+          }}
+        >
+          <span class="rail-brand">
+            <IconLogo size={22} />
+          </span>
+        </RailButton>
 
         <RailButton
           label="Bug and feedback"
@@ -322,6 +336,27 @@ export function ToolRail({
         <RailButton label="File" shortcut="Shift+F" onClick={() => promptedCreate('file')}>
           <IconNodeFile size={15} />
         </RailButton>
+        <RailButton label="Attach document" onClick={() => documentInput.current?.click()}>
+          <span aria-hidden="true">↥</span>
+        </RailButton>
+        <input
+          ref={documentInput}
+          type="file"
+          hidden
+          multiple
+          accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx,.odt,.ods,.odp"
+          aria-label="Attach documents"
+          onChange={(event) => {
+            const area = canvasArea();
+            const view = viewport.value;
+            void importFiles(
+              Array.from(event.currentTarget.files ?? []),
+              (area.width / 2 - view.x) / view.scale,
+              (area.height / 2 - view.y) / view.scale,
+            );
+            event.currentTarget.value = '';
+          }}
+        />
         <RailButton label="Webpage" shortcut="W" onClick={() => promptedCreate('webpage')}>
           <IconNodeWebpage size={15} />
         </RailButton>

package/src/client/canvas/TopBar.tsx

@@ -1,3 +1,6 @@
+import { exportDialogOpen } from './ExportDialog';
+import { activeBoardId } from '../state/boards-store';
+import { BoardSwitcher } from './BoardSwitcher';
 import type { ComponentChildren } from 'preact';
 import { presenting } from '../state/presentation';
 import { useEffect, useState } from 'preact/hooks';
@@ -264,8 +267,8 @@ export function TopBar() {
   const isTraceOn = traceEnabled.value;
   const traceNodeCount = Array.from(nodes.value.values()).filter((n) => n.type === 'trace').length;
 
-  // Board identity = workspace basename, fetched once from /health. The
-  // canvas has no board-name concept — the workspace IS the board.
+  // Until the board list arrives, the switcher shows the workspace basename
+  // (fetched once from /health).
   const [workspaceName, setWorkspaceName] = useState<string>('');
   useEffect(() => {
     let cancelled = false;
@@ -314,9 +317,7 @@ export function TopBar() {
       >
         <span class={`connection-dot ${degraded ?? status}`} aria-label={`Canvas status: ${statusTitle}`} />
       </BarHint>
-      <span class="top-bar-title" title={workspaceName || 'PMX Canvas'}>
-        {workspaceName || 'PMX Canvas'}
-      </span>
+      <BoardSwitcher fallbackName={workspaceName || 'PMX Canvas'} />
       <span class="top-bar-meta hud-collapsible-text">{sessionId.value ? sessionId.value.slice(0, 12) : '…'}</span>
       <span class="top-bar-meta hud-collapsible-text">{countsLabel}</span>
 
@@ -330,20 +331,35 @@ export function TopBar() {
 
       <div class="top-bar-sep" />
 
-      <BarHint
-        label="Present board"
-        body="Arrow keys or Space step through stops; Esc exits. Without a saved tour, groups are read top-to-bottom, left-to-right."
-      >
-        <button
-          type="button"
-          class="present-button"
-          onClick={() => {
-            presenting.value = true;
-          }}
+      {activeBoardId.value && (
+        <BarHint label="Export board" body="One HTML file of this board that anyone can open, no install needed.">
+          <button
+            type="button"
+            class="present-button"
+            onClick={() => {
+              exportDialogOpen.value = true;
+            }}
+          >
+            Export
+          </button>
+        </BarHint>
+      )}
+      {activeBoardId.value && (
+        <BarHint
+          label="Present board"
+          body="Arrow keys or Space step through stops; Esc exits. Without a saved tour, groups are read top-to-bottom, left-to-right."
         >
-          Present
-        </button>
-      </BarHint>
+          <button
+            type="button"
+            class="present-button"
+            onClick={() => {
+              presenting.value = true;
+            }}
+          >
+            Present
+          </button>
+        </BarHint>
+      )}
       <BarHint label="Zoom out" shortcut={modChord('\u2212')}>
         <button type="button" class="top-bar-btn" onClick={() => zoomByFactor(1 / 1.25)} aria-label="Zoom out">
           <IconZoomOut />

package/src/client/canvas/import-files.ts

@@ -1,4 +1,6 @@
-import { createNodeFromClient } from '../state/intent-bridge';
+import { createNodeFromClient, requestJson } from '../state/intent-bridge';
+import { activeBoardId } from '../state/boards-store';
+import { showToast } from '../state/attention-bridge';
 
 const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif']);
 const MD_EXTS = new Set(['md', 'mdx', 'markdown']);
@@ -17,6 +19,7 @@ export function nodeTypeFromFilename(name: string): 'image' | 'markdown' | 'file
  * markdown, everything else a file node with the text inlined.
  */
 export async function importFiles(files: File[], baseWx: number, baseWy: number): Promise<void> {
+  const boardId = activeBoardId.value;
   const nodeW = 400;
   const nodeH = 300;
   const spacing = 20;
@@ -32,12 +35,24 @@ export async function importFiles(files: File[], baseWx: number, baseWy: number)
     const type = nodeTypeFromFilename(file.name);
     const fileName = file.name;
 
+    if (/\.(pdf|pptx?|xlsx?|docx?|od[pts])$/i.test(fileName)) {
+      if (!boardId || file.size === 0 || file.size > 20 * 1024 * 1024) {
+        showToast('remove', 'File not attached', 'Open a board and choose a nonempty file under 20 MiB.');
+        continue;
+      }
+      const query = new URLSearchParams({ boardId, name: fileName, mime: file.type, x: String(wx), y: String(wy) });
+      showToast('context', 'Attaching document', fileName);
+      await requestJson('attachDocument', `/api/canvas/attachments?${query}`, null, { method: 'POST', body: file });
+      continue;
+    }
+    if (activeBoardId.value !== boardId) return;
     if (type === 'image') {
       const reader = new FileReader();
       const dataUri: string = await new Promise((resolve) => {
         reader.onload = () => resolve(reader.result as string);
         reader.readAsDataURL(file);
       });
+      if (activeBoardId.value !== boardId) return;
       await createNodeFromClient({
         type: 'image',
         title: fileName,
@@ -46,9 +61,11 @@ export async function importFiles(files: File[], baseWx: number, baseWy: number)
         y: wy,
         width: nodeW,
         height: nodeH,
+        ...(boardId ? { boardId } : {}),
       });
     } else {
       const text = await file.text();
+      if (activeBoardId.value !== boardId) return;
       const isWide = type === 'markdown' || type === 'file';
       await createNodeFromClient({
         type,
@@ -58,6 +75,7 @@ export async function importFiles(files: File[], baseWx: number, baseWy: number)
         y: wy,
         width: isWide ? 720 : nodeW,
         height: isWide ? 500 : nodeH,
+        ...(boardId ? { boardId } : {}),
       });
     }
   }

package/src/client/canvas/kind-colors.ts

@@ -7,6 +7,7 @@ export const KIND_COLOR: Record<CanvasNodeState['type'], string> = {
   webpage: 'var(--c-warn)',
   'json-render': 'var(--c-ok)',
   graph: 'var(--c-purple)',
+  board: 'var(--c-accent)',
   prompt: 'var(--c-accent)',
   response: 'var(--c-ok)',
   status: 'var(--c-warn)',

package/src/client/icons.tsx

@@ -538,6 +538,8 @@ export function getNodeIcon(type: string): (p: IconProps) => JSX.Element {
       return IconNodeJsonRender;
     case 'graph':
       return IconNodeGraph;
+    case 'board':
+      return IconNodeGraph;
     case 'html':
       return IconNodeWebpage;
     default: