pmx-canvas 0.6.4 → 0.7.0

package/src/client/canvas/BoardFolderDialog.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { normalizeBoardCategory } from '../../shared/boards.js';
+import { boardList, updateBoard, type BoardSummary } from '../state/boards-store';
+import { useFocusTrap } from './use-focus-trap';
+
+/** A destination picker: select an existing folder, optionally create a child, then move. */
+export function BoardFolderDialog({
+  board,
+  folders,
+  onClose,
+}: {
+  board: BoardSummary;
+  folders: string[];
+  onClose: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [parent, setParent] = useState(board.category ?? '');
+  const [name, setName] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  useFocusTrap(ref, true);
+  useEffect(() => {
+    const onEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (!busy) onClose();
+    };
+    window.addEventListener('keydown', onEscape, true);
+    return () => window.removeEventListener('keydown', onEscape, true);
+  }, [busy, onClose]);
+
+  const destination = name.trim() ? [parent, name.trim()].filter(Boolean).join('/') : parent;
+  const move = async () => {
+    let category: string | null;
+    try {
+      if (name.includes('/')) throw new Error('Use one folder name; choose its parent above.');
+      category = normalizeBoardCategory(destination);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+      return;
+    }
+    setBusy(true);
+    setError('');
+    await updateBoard(board.id, { category });
+    if (boardList.value.find((entry) => entry.id === board.id)?.category === category) onClose();
+    else setError('Could not move this board. Try again.');
+    setBusy(false);
+  };
+
+  return (
+    <div class="text-prompt-backdrop" onPointerDown={() => !busy && onClose()}>
+      <div
+        ref={ref}
+        class="text-prompt home-folder-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label={`Move ${board.name}`}
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        <div class="text-prompt-title">Move “{board.name}”</div>
+        <p class="home-folder-hint">Choose a folder, or create one inside it. The board keeps its content and links.</p>
+        <fieldset class="home-folder-options" disabled={busy}>
+          <legend>Destination folder</legend>
+          {['', ...folders].map((path) => (
+            <label
+              key={path}
+              class="home-folder-option"
+              style={{ paddingLeft: `${8 + Math.min(path.split('/').length - 1, 5) * 14}px` }}
+            >
+              <input
+                type="radio"
+                name="folder-destination"
+                value={path}
+                checked={parent === path}
+                onChange={() => {
+                  setParent(path);
+                  setError('');
+                }}
+              />
+              <span>{path || 'Home (no folder)'}</span>
+            </label>
+          ))}
+        </fieldset>
+        <label class="home-folder-new">
+          New folder inside {parent || 'Home'} <span class="home-folder-hint">(optional)</span>
+          <input
+            class="text-prompt-input"
+            aria-label="New folder name"
+            placeholder="e.g. Decisions"
+            maxLength={60}
+            value={name}
+            disabled={busy}
+            onInput={(event) => {
+              setName(event.currentTarget.value);
+              setError('');
+            }}
+          />
+        </label>
+        <div class="home-folder-hint">
+          Move to: <strong>{destination || 'Home'}</strong>
+        </div>
+        {error && <p role="alert">{error}</p>}
+        <div class="text-prompt-actions">
+          <button type="button" class="text-prompt-cancel" disabled={busy} onClick={onClose}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="text-prompt-confirm"
+            disabled={busy || destination === (board.category ?? '')}
+            onClick={() => void move()}
+          >
+            {busy ? 'Moving…' : 'Move board'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -187,6 +187,9 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     viewport,
     onMove: handleMove,
     onDragEnd: handleDragEnd,
+    onClick: () => {
+      selectedNodeIds.value = new Set([node.id]);
+    },
   });
 
   // ── Resize ────────────────────────────────────────────
@@ -236,6 +239,11 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     (e: PointerEvent) => {
       if (e.button !== 0) return;
       if (renaming) return;
+      // Title controls act on the node without selecting or dragging it.
+      if (e.target instanceof Element && e.target.closest('button, input')) {
+        e.stopPropagation();
+        return;
+      }
       if (canvasTool.value === 'connect') {
         startEdgeDrag(e);
         return;

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',

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':