pmx-canvas 0.8.0 → 0.9.0

package/src/client/canvas/BoardLinkDialog.tsx

@@ -1,19 +1,95 @@
-import { useRef, useState } from 'preact/hooks';
-import { activeBoardId, boardList } from '../state/boards-store';
-import { requestJson } from '../state/intent-bridge';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { activeBoardId, boardList, loadBoards, openMemoryTarget } from '../state/boards-store';
+import { createEdgeFromClient, requestJson, updateNodeFromClient } from '../state/intent-bridge';
+import type { MemoryGraph } from '../../shared/memory-graph.js';
 import { canvasAreaCenter } from './canvas-area';
-import { viewport } from '../state/canvas-store';
+import { nodes, viewport } from '../state/canvas-store';
 import { useFocusTrap } from './use-focus-trap';
 
-export function BoardLinkDialog({ onClose }: { onClose: () => void }) {
+export function BoardLinkDialog({
+  onClose,
+  sourceNodeId,
+  wikiRef,
+}: {
+  onClose: () => void;
+  sourceNodeId?: string;
+  wikiRef?: string;
+}) {
   const dialogRef = useRef<HTMLDivElement>(null);
   const searchRef = useRef<HTMLInputElement>(null);
+  const sourceBoardId = useRef(activeBoardId.value).current;
+  const sourceNode = useRef(sourceNodeId ? nodes.value.get(sourceNodeId) : undefined).current;
+  const [graph, setGraph] = useState<MemoryGraph | null>(null);
   const [query, setQuery] = useState('');
   const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
   useFocusTrap(dialogRef, true, { initial: searchRef });
+  useEffect(() => {
+    let cancelled = false;
+    if (sourceNodeId && !wikiRef)
+      void requestJson<MemoryGraph | null>('linkCardChoices', '/api/canvas/memory-graph', null).then((result) => {
+        if (!cancelled) {
+          setGraph(result);
+          if (!result) setError('Could not load cards. Close and retry.');
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [sourceNodeId, wikiRef]);
   const choices = boardList.value.filter(
-    (board) => board.id !== activeBoardId.value && board.name.toLowerCase().includes(query.trim().toLowerCase()),
+    (board) => board.id !== sourceBoardId && board.name.toLowerCase().includes(query.trim().toLowerCase()),
   );
+  const cards = (graph?.nodes ?? []).filter(
+    (node) =>
+      node.kind === 'card' &&
+      node.boardId !== sourceBoardId &&
+      `${node.title} ${boardList.value.find((board) => board.id === node.boardId)?.name ?? ''}`
+        .toLowerCase()
+        .includes(query.trim().toLowerCase()),
+  );
+  const createWikiBoard = async () => {
+    if (!wikiRef || !sourceNode || activeBoardId.value !== sourceBoardId)
+      return setError('The source board changed. Reopen it before creating the link.');
+    setBusy(true);
+    const created = await requestJson<{ board?: { id: string } } | null>(
+      'createWikiBoard',
+      '/api/canvas/boards',
+      null,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: wikiRef, expectedBoardId: sourceBoardId }),
+      },
+    );
+    if (!created?.board) {
+      setBusy(false);
+      return setError('Could not create the board.');
+    }
+    const saved = await updateNodeFromClient(sourceNode.id, {
+      content: typeof sourceNode.data.content === 'string' ? sourceNode.data.content : '',
+      expectedBoardId: sourceBoardId,
+      expectedContentRevision: sourceNode.contentRevision ?? 0,
+    });
+    await loadBoards();
+    setBusy(false);
+    if (!saved.ok)
+      return setError('Board created, but the source changed. Save its Markdown again to resolve the link.');
+    onClose();
+    await openMemoryTarget({ boardId: created.board.id });
+  };
+  const connect = async (boardId: string, cardId: string) => {
+    if (!sourceNodeId) return;
+    setBusy(true);
+    const result = await createEdgeFromClient(sourceNodeId, cardId, 'references', undefined, {
+      toBoardId: boardId,
+      expectedBoardId: sourceBoardId,
+    });
+    setBusy(false);
+    if (!result.ok)
+      return setError('Could not add the connection. Check the source board and target card, then retry.');
+    onClose();
+  };
   const create = async (boardId: string) => {
     const target = boardList.value.find((board) => board.id === boardId);
     if (!target) return setError('That board is no longer available.');
@@ -27,6 +103,7 @@ export function BoardLinkDialog({ onClose }: { onClose: () => void }) {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
+          expectedBoardId: sourceBoardId,
           type: 'board',
           title: target.name,
           x: Math.round((center.x - v.x) / v.scale - 180),
@@ -50,39 +127,67 @@ export function BoardLinkDialog({ onClose }: { onClose: () => void }) {
         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)}
-        />
+        <h2 id="board-link-title">
+          {wikiRef
+            ? 'Create unresolved board'
+            : sourceNodeId
+              ? 'Connect to a card on another board'
+              : 'Link to a board'}
+        </h2>
+        {wikiRef ? (
+          <p>Create “{wikiRef}” and save this link to its board ID?</p>
+        ) : (
+          <input
+            ref={searchRef}
+            type="search"
+            class="text-prompt-input"
+            aria-label={sourceNodeId ? 'Find a card to connect' : 'Find a board to link'}
+            placeholder={sourceNodeId ? 'Find a board or card…' : '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>
+        {!wikiRef && (
+          <ul class="board-link-results">
+            {sourceNodeId
+              ? cards.map((card) => (
+                  <li key={card.key}>
+                    <button type="button" disabled={busy} onClick={() => void connect(card.boardId, card.cardId!)}>
+                      <span>{card.title}</span>
+                      <small>{boardList.value.find((board) => board.id === card.boardId)?.name ?? card.boardId}</small>
+                    </button>
+                  </li>
+                ))
+              : 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>
+                ))}
+            {(sourceNodeId ? cards.length : choices.length) === 0 && (
+              <li class="board-copy-status">
+                {boardList.value.length <= 1
+                  ? 'Create another board first, then link it here.'
+                  : sourceNodeId && !graph
+                    ? 'Loading cards…'
+                    : 'No matches. Try another search.'}
+              </li>
+            )}
+          </ul>
+        )}
         <div class="text-prompt-actions">
+          {wikiRef && (
+            <button type="button" disabled={busy} onClick={() => void createWikiBoard()}>
+              {busy ? 'Creating…' : 'Create board'}
+            </button>
+          )}
           <button type="button" onClick={onClose}>
             Cancel
           </button>

package/src/client/canvas/BoardPinButton.tsx

@@ -0,0 +1,33 @@
+import { IconPin } from '../icons';
+import { type BoardSummary, setBoardPinned } from '../state/boards-store';
+
+/**
+ * Board pins (docs/design/BoardPins.dc.html): the same pin as a card's, in the
+ * same place, at board level. Pinned, the board's README and pinned cards reach
+ * the agent's brief whichever board is open.
+ */
+export function BoardPinButton({ board, inNodeHeader = false }: { board: BoardSummary; inNodeHeader?: boolean }) {
+  const pinned = !!board.pin;
+  // No board name in the label: rows already name the board, and a name here would
+  // make role+name lookups for the board's own open button ambiguous.
+  const label = pinned ? "Unpin board from the agent's context" : "Pin board to the agent's context";
+  return (
+    <button
+      type="button"
+      // In a node header it takes the header's own control sizing, like the card pin it replaces.
+      class={`ctx-pin-btn${inNodeHeader ? '' : ' board-pin-btn'}${pinned ? ' ctx-pin-active' : ''}`}
+      onClick={(event) => {
+        event.stopPropagation();
+        void setBoardPinned(board.id, !pinned);
+      }}
+      aria-label={label}
+      aria-pressed={pinned}
+      data-testid="board-pin"
+    >
+      <span class="ctx-pin-mark">
+        <IconPin />
+        {pinned && board.pin?.pinnedBy.actor === 'agent' && <span class="ctx-pin-agent-dot" aria-hidden="true" />}
+      </span>
+    </button>
+  );
+}

package/src/client/canvas/BoardSwitcher.tsx

@@ -1,25 +1,12 @@
-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 { BoardPinButton } from './BoardPinButton';
+import { BarPortal } from './BarHint';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { activeBoard, activeBoardId, boardList, boardsLoaded, browsingMemory, openBoard } from '../state/boards-store';
 import { IconLogo, IconArrange, IconChevronDown, IconPlus } 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-
@@ -54,8 +41,10 @@ export function BoardSwitcher({ fallbackName }: { fallbackName: string }) {
   }, [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 label = !boardsLoaded.value ? fallbackName : board && !browsingMemory.value ? board.name : 'Home';
+  const recent = boardList.value
+    .filter((entry) => browsingMemory.value || entry.id !== activeBoardId.value)
+    .slice(0, RECENT_LIMIT);
   const anchor = buttonRef.current?.getBoundingClientRect();
 
   const choose = (id: string | null) => {
@@ -80,7 +69,7 @@ export function BoardSwitcher({ fallbackName }: { fallbackName: string }) {
         </span>
       </button>
       {open && anchor && (
-        <BoardMenuPortal>
+        <BarPortal>
           <div
             ref={menuRef}
             class="toolbar-menu board-switcher-menu"
@@ -97,26 +86,23 @@ export function BoardSwitcher({ fallbackName }: { fallbackName: string }) {
             {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'}
+                <div key={entry.id} class="board-switcher-row">
+                  <button 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.folder?.split('/').join(' / ') || 'Unfiled'}
+                      </span>
+                    </span>
+                    <span class="board-switcher-item-meta">
+                      {entry.nodeCount} {entry.nodeCount === 1 ? 'node' : 'nodes'}
                     </span>
-                  </span>
-                  <span class="board-switcher-item-meta">
-                    {entry.nodeCount} {entry.nodeCount === 1 ? 'node' : 'nodes'}
-                  </span>
-                </button>
+                  </button>
+                  <BoardPinButton board={entry} />
+                </div>
               ))}
             </div>
             <div class="board-switcher-actions">
@@ -142,7 +128,7 @@ export function BoardSwitcher({ fallbackName }: { fallbackName: string }) {
               </button>
             </div>
           </div>
-        </BoardMenuPortal>
+        </BarPortal>
       )}
     </span>
   );