pmx-canvas 0.11.0 → 0.12.0

package/src/client/canvas/AttentionHistory.tsx

@@ -1,3 +1,4 @@
+import { useLayoutEffect, useRef } from 'preact/hooks';
 import {
   attentionHistory,
   attentionHistoryOpen,
@@ -20,13 +21,19 @@ function handleOpenUpdates(): void {
 
 export function AttentionHistory() {
   const entries = attentionHistory.value;
-  if (entries.length === 0) return null;
-
   const isOpen = attentionHistoryOpen.value;
   const unread = attentionHistoryUnread.value;
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const wasOpen = useRef(isOpen);
+  useLayoutEffect(() => {
+    if (isOpen !== wasOpen.current) toggleRef.current?.focus({ preventScroll: true });
+    wasOpen.current = isOpen;
+  }, [isOpen]);
+  if (entries.length === 0) return null;
   if (!isOpen) {
     return (
       <button
+        ref={toggleRef}
         type="button"
         class="attention-history-tab"
         onClick={handleOpenUpdates}
@@ -67,6 +74,7 @@ export function AttentionHistory() {
           <span class="attention-history-subtitle">Focus and meaning shifts</span>
         </div>
         <button
+          ref={toggleRef}
           type="button"
           class="attention-history-close"
           onClick={closeAttentionHistory}

package/src/client/canvas/BoardMoveDialog.tsx

@@ -0,0 +1,225 @@
+import { signal } from '@preact/signals';
+import { useRef, useState } from 'preact/hooks';
+import type { BoardMoveInput, BoardMovePreview, BoardMoveResult } from '../../server/board-move.js';
+import { activeBoardId, boardIncarnation, claimNavigation, openBoard } from '../state/boards-store';
+import { nodes } from '../state/canvas-store';
+import { requestJson } from '../state/intent-bridge';
+import { hasUnsavedMarkdown } from '../nodes/MarkdownNode';
+import { hasUnsavedPrompt } from '../nodes/PromptNode';
+import { hasUnsavedWorkCard } from '../nodes/WorkCard';
+import { useFocusTrap } from './use-focus-trap';
+import { submitWithoutNavigation } from './submit-without-navigation';
+
+type MoveSelection = {
+  sourceBoardId: string;
+  nodeIds: string[];
+  requestId: string;
+  incarnation: number;
+  canNavigate: () => boolean;
+};
+const selection = signal<MoveSelection | null>(null);
+
+export function openBoardMove(nodeIds: string[]): void {
+  if (!activeBoardId.value || !nodeIds.length) return;
+  selection.value = {
+    sourceBoardId: activeBoardId.value,
+    nodeIds: [...nodeIds],
+    requestId: crypto.randomUUID(),
+    incarnation: boardIncarnation,
+    canNavigate: claimNavigation(),
+  };
+}
+
+export function BoardMoveDialog() {
+  const current = selection.value;
+  return current ? <MoveForm key={current.requestId} selected={current} /> : null;
+}
+
+function MoveForm({ selected }: { selected: MoveSelection }) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const [name, setName] = useState('New board');
+  const [preview, setPreview] = useState<BoardMovePreview | null>(null);
+  const [input, setInput] = useState<BoardMoveInput | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [attempted, setAttempted] = useState(false);
+  const [refused, setRefused] = useState(false);
+  const [error, setError] = useState('');
+  const close = () => {
+    if (selection.value === selected) selection.value = null;
+  };
+  const current = () =>
+    selection.value === selected &&
+    selected.incarnation === boardIncarnation &&
+    activeBoardId.value === selected.sourceBoardId;
+  useFocusTrap(dialogRef, true, { initial: nameRef, onEscape: close });
+
+  const unsaved = (ids: string[]) =>
+    ids.filter(
+      (id) =>
+        hasUnsavedMarkdown(selected.sourceBoardId, id) ||
+        hasUnsavedWorkCard(selected.sourceBoardId, id) ||
+        hasUnsavedPrompt(selected.sourceBoardId, id),
+    );
+  const submit = async (event: Event) => {
+    event.preventDefault();
+    if (busy || refused || !name.trim()) return;
+    if (!current()) return setError('The board changed. Close this dialog and select the cards again.');
+    setBusy(true);
+    setError('');
+    if (!preview) {
+      const board = await requestJson<{ ok: boolean; contentRevision: number } | null>(
+        'moveRevision',
+        `/api/canvas/boards/${encodeURIComponent(selected.sourceBoardId)}`,
+        null,
+      );
+      if (!current()) {
+        setBusy(false);
+        return;
+      }
+      if (!board?.ok) {
+        setError('Could not read the source board. Try again.');
+        setBusy(false);
+        return;
+      }
+      const next = {
+        sourceBoardId: selected.sourceBoardId,
+        nodeIds: selected.nodeIds,
+        requestId: selected.requestId,
+        name: name.trim(),
+        expectedRevision: board.contentRevision,
+      };
+      const result = await requestJson<{ ok: boolean; preview?: BoardMovePreview; error?: string } | null>(
+        'previewMove',
+        '/api/canvas/boards/move-selection',
+        null,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ ...next, preview: true }),
+        },
+      );
+      if (current()) {
+        if (result?.ok && result.preview) {
+          setInput(next);
+          setPreview(result.preview);
+          if (unsaved(result.preview.nodeIds).length)
+            setError('Save or clear the selected cards’ drafts before moving. Close and preview again.');
+        } else setError(result?.error ?? 'Could not preview the move. Try again.');
+      }
+    } else if (input && !preview.blockers.length) {
+      if (unsaved(preview.nodeIds).length) {
+        setBusy(false);
+        return setError('Save or clear the selected cards’ drafts before moving. Close and preview again.');
+      }
+      setAttempted(true);
+      const result = await requestJson<
+        ({ ok: true } & BoardMoveResult) | { ok: false; error?: string; blockers?: string[] } | null
+      >('moveSelection', '/api/canvas/boards/move-selection', null, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(input),
+      });
+      if (result?.ok) {
+        const navigate = current() && selected.canNavigate();
+        close();
+        if (navigate) await openBoard(result.destinationBoardId);
+      } else if (selection.value === selected) {
+        if (result) {
+          setRefused(true);
+          setError(`${result.error ?? 'Move refused.'} ${result.blockers?.join(' ') ?? ''} Close and preview again.`);
+        } else {
+          setError('No reply received. Retry uses the same request and cannot create a second board.');
+        }
+      }
+    }
+    setBusy(false);
+  };
+
+  const blocked = !!preview?.blockers.length;
+  return (
+    <div class="text-prompt-backdrop board-move-backdrop" onMouseDown={close}>
+      <div
+        ref={dialogRef}
+        class="text-prompt board-move-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="board-move-title"
+        onMouseDown={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          event.stopPropagation();
+          if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+          }
+        }}
+      >
+        <form onClick={submitWithoutNavigation} onSubmit={submit}>
+          <h2 id="board-move-title">Move to new board</h2>
+          <p>Move the original cards, including group contents. Leave a portal on this board.</p>
+          <label class="board-copy-field">
+            New board name
+            <input
+              ref={nameRef}
+              class="text-prompt-input"
+              maxLength={120}
+              required
+              value={name}
+              readOnly={!!preview || busy}
+              onInput={(event) => setName(event.currentTarget.value)}
+            />
+          </label>
+          {preview && (
+            <>
+              <p>
+                {preview.nodeIds.length} cards · {preview.pinnedNodeIds.length} pinned ·{' '}
+                {preview.affectedBoardIds.length + 1} affected boards
+              </p>
+              <ul class="board-move-cards">
+                {preview.nodeIds.map((id) => (
+                  <li key={id}>{String(nodes.value.get(id)?.data.title ?? id)}</li>
+                ))}
+              </ul>
+              {preview.readmeNodeId && <p>The README moves with the cards.</p>}
+              {!!preview.liveTaskNodeIds.length && (
+                <p>{preview.liveTaskNodeIds.length} live task cards keep their original task owner.</p>
+              )}
+              <p>Content, relations and review history are preserved. Moving does not validate or read content.</p>
+              <p class="board-move-warning">
+                ⚠ History boundary: pre-move Undo/Redo is cleared on affected boards. Older snapshots remain
+                inspectable, but cannot be restored across the move.
+              </p>
+              <p>Board-space annotations stay here. The new board opens after the move.</p>
+              {blocked && (
+                <div role="alert" class="board-move-warning">
+                  <strong>⚠ Cannot move this selection</strong>
+                  <ul>
+                    {preview.blockers.map((reason) => (
+                      <li key={reason}>{reason}</li>
+                    ))}
+                  </ul>
+                  <p>No cards moved. Close, resolve the listed bindings and preview again.</p>
+                </div>
+              )}
+            </>
+          )}
+          {error && (
+            <p role="alert" class="board-move-warning">
+              ⚠ {error}
+            </p>
+          )}
+          <div class="text-prompt-actions">
+            <button type="button" class="text-prompt-cancel" onClick={close}>
+              {blocked || refused ? 'Close' : 'Cancel'}
+            </button>
+            {!blocked && !refused && (
+              <button type="submit" class="text-prompt-confirm" disabled={busy || !name.trim()}>
+                {busy ? 'Working…' : attempted ? 'Retry move' : preview ? 'Move and open' : 'Preview move'}
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/client/canvas/CanvasNode.tsx

@@ -4,6 +4,7 @@ import { knowledgeLifecycleEnabled } from '../state/workspace-settings';
 import { relationHighlight } from '../state/relation-store';
 import { LifecycleFooter } from './LifecycleChrome';
 import { BarHint } from './BarHint';
+import { openBoardMove } from './BoardMoveDialog';
 import { CrossBoardReferences } from './CrossBoardReferences';
 import { BoardPinButton } from './BoardPinButton';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
@@ -36,6 +37,8 @@ import {
   updateNodeData,
   viewport,
   canvasTool,
+  groupContents,
+  openGroup,
 } from '../state/canvas-store';
 import {
   addToGroupFromClient,
@@ -275,7 +278,10 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
       reportHumanGrab(node.id);
       noteNearAtGrab(node.id);
       takeOverNode(node.id, typeof node.data.title === 'string' && node.data.title ? node.data.title : node.type);
-      buildSnapCache(node.id, nodes.value.values());
+      buildSnapCache(
+        node.id,
+        [...nodes.value.values()].filter((candidate) => !groupContents.value || groupContents.value.has(candidate.id)),
+      );
       if (node.type !== 'group') {
         const onKey = (ev: KeyboardEvent) => {
           if (ev.key === 'Escape') suppressDropForDrag();
@@ -333,12 +339,21 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
       const dir = ARROW_DIRS[e.key];
       if (dir) {
         e.preventDefault();
-        const next = nearestNodeInDirection(node, dir, nodes.value.values());
+        const next = nearestNodeInDirection(
+          node,
+          dir,
+          [...nodes.value.values()].filter(
+            (candidate) => !groupContents.value || groupContents.value.has(candidate.id),
+          ),
+        );
         if (!next) return;
         bringToFront(next.id);
         requestAnimationFrame(() => {
           document.querySelector<HTMLElement>(`.canvas-node[data-node-id="${CSS.escape(next.id)}"]`)?.focus();
         });
+      } else if (e.key === 'Enter' && e.target === e.currentTarget && node.type === 'group') {
+        e.preventDefault();
+        openGroup(node.id);
       } else if (e.key === 'Enter' && e.target === e.currentTarget && EXPANDABLE_TYPES.has(node.type)) {
         e.preventDefault();
         expandNode(node.id);
@@ -380,6 +395,8 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     if (!body) return;
 
     const observer = new ResizeObserver(() => {
+      // Focus-mode return can remount an open work draft. Never save its temporary form height.
+      if (body.querySelector('.work-card-editor')) hasAutoFit.current = true;
       if (hasAutoFit.current) {
         observer.disconnect();
         return;
@@ -492,8 +509,12 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     // Collapsed group: a compact chip. Children keep their positions for restore.
     return (
       <div
+        ref={shellRef}
         class={`${nodeClass} group-chip`}
         data-node-type={node.type}
+        data-node-id={node.id}
+        tabIndex={isActive ? 0 : -1}
+        onKeyDown={handleNodeKeyDown}
         style={{ ...nodeStyle, width: 'auto', height: 'auto' }}
         onPointerDown={handlePointerDown}
         onDblClick={handleDblClick}
@@ -671,6 +692,28 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 </button>
                 {groupMenuOpen && (
                   <div class="group-menu" role="menu" onPointerDown={(e) => e.stopPropagation()}>
+                    <button
+                      type="button"
+                      role="menuitem"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setGroupMenuOpen(false);
+                        openGroup(node.id);
+                      }}
+                    >
+                      Open group
+                    </button>
+                    <button
+                      type="button"
+                      role="menuitem"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setGroupMenuOpen(false);
+                        openBoardMove([node.id]);
+                      }}
+                    >
+                      Move to new board
+                    </button>
                     <button
                       type="button"
                       role="menuitem"

package/src/client/canvas/CanvasViewport.tsx

@@ -37,6 +37,9 @@ import {
   dragDropTarget,
   hiddenByCollapsedGroup,
   canvasTool,
+  groupContents,
+  groupViewNodes,
+  canvasInteractionEpoch,
 } from '../state/canvas-store';
 import { createEdgeFromClient, createNodeFromClient } from '../state/intent-bridge';
 import type { AnnotationTool, CanvasAnnotation, CanvasNodeState } from '../types';
@@ -50,6 +53,7 @@ import { ScopeFenceLayer } from './ScopeFenceLayer';
 import { CanvasNode } from './CanvasNode';
 import { BoardNode } from '../nodes/BoardNode';
 import { EdgeLayer } from './EdgeLayer';
+import { GroupOutsideLinks } from './GroupNavigation';
 import { AnnotationLayer } from './AnnotationLayer';
 import { activeGuides } from './snap-guides';
 import { usePanZoom } from './use-pan-zoom';
@@ -104,19 +108,30 @@ function renderNodeContent(node: CanvasNodeState) {
  */
 class WorldNode extends Component<{
   node: CanvasNodeState;
+  hidden: boolean;
   onContextMenu?: (e: MouseEvent, nodeId: string) => void;
 }> {
-  shouldComponentUpdate(next: { node: CanvasNodeState; onContextMenu?: (e: MouseEvent, nodeId: string) => void }) {
-    return next.node !== this.props.node || next.onContextMenu !== this.props.onContextMenu;
+  shouldComponentUpdate(next: {
+    node: CanvasNodeState;
+    hidden: boolean;
+    onContextMenu?: (e: MouseEvent, nodeId: string) => void;
+  }) {
+    return (
+      next.node !== this.props.node ||
+      next.hidden !== this.props.hidden ||
+      next.onContextMenu !== this.props.onContextMenu
+    );
   }
 
   render() {
-    const { node, onContextMenu } = this.props;
+    const { node, hidden, onContextMenu } = this.props;
     const viewer = ['html', 'mcp-app', 'json-render', 'graph', 'webpage', 'mermaid'].includes(node.type);
     return (
-      <CanvasNode node={node} onContextMenu={onContextMenu}>
-        {viewer ? <ViewerHost node={node}>{renderNodeContent(node)}</ViewerHost> : renderNodeContent(node)}
-      </CanvasNode>
+      <div style={{ display: hidden ? 'none' : 'contents' }}>
+        <CanvasNode node={node} onContextMenu={onContextMenu}>
+          {viewer ? <ViewerHost node={node}>{renderNodeContent(node)}</ViewerHost> : renderNodeContent(node)}
+        </CanvasNode>
+      </div>
     );
   }
 }
@@ -572,6 +587,7 @@ export function CanvasViewport({
       // Find intersecting nodes (AABB intersection)
       const hits: string[] = [];
       for (const node of nodes.value.values()) {
+        if (groupContents.value && !groupContents.value.has(node.id)) continue;
         const nx = node.position.x;
         const ny = node.position.y;
         if (nx + node.size.width > worldMinX && nx < worldMaxX && ny + node.size.height > worldMinY && ny < worldMaxY) {
@@ -622,6 +638,7 @@ export function CanvasViewport({
       let hit: string | null = null;
       for (const node of nodes.value.values()) {
         if (node.id === exceptId || node.type === 'group') continue;
+        if (groupContents.value && !groupContents.value.has(node.id)) continue;
         if (
           wx >= node.position.x &&
           wx <= node.position.x + node.size.width &&
@@ -807,11 +824,17 @@ export function CanvasViewport({
   // reorder DOM children when bringToFront() changes zIndex, causing browsers to
   // detach/reattach iframe elements (which forces them to reload/reconnect).
   // Group nodes render first (behind) so they serve as visual containers.
+  const mounted = useRef({ epoch: canvasInteractionEpoch.value, ids: new Set<string>() });
+  if (mounted.current.epoch !== canvasInteractionEpoch.value)
+    mounted.current = { epoch: canvasInteractionEpoch.value, ids: new Set() };
+  for (const id of mounted.current.ids) if (!nodes.value.has(id)) mounted.current.ids.delete(id);
+  const collapsed = hiddenByCollapsedGroup.value;
   const worldNodes = getRenderableWorldNodes(
     nodes.value.values(),
     expandedNodeId.value,
-    new Set(hiddenByCollapsedGroup.value.keys()),
+    new Set([...collapsed.keys()].filter((id) => !mounted.current.ids.has(id))),
   );
+  for (const node of worldNodes) mounted.current.ids.add(node.id);
   const lowestZ = worldNodes.reduce((lowest, node) => Math.min(lowest, Math.floor(node.zIndex)), 0);
   const highestZ = worldNodes.reduce((highest, node) => Math.max(highest, Math.ceil(node.zIndex)), 0);
   // Keep group-body hit order without changing the frames' visual stacking.
@@ -895,7 +918,8 @@ export function CanvasViewport({
         <IntentLayer />
         <AgentPresenceLayer />
         <HumanPresenceLayer />
-        <EdgeLayer nodes={nodes} edges={edges} />
+        <EdgeLayer nodes={groupViewNodes} edges={edges} />
+        <GroupOutsideLinks />
         {draggingEdge.value && (
           <div
             class="edge-hint-pill"
@@ -930,7 +954,12 @@ export function CanvasViewport({
         <AnnotationLayer annotations={Array.from(annotations.value.values())} />
         {draftAnnotation && draftAnnotation.points.length >= 2 && <AnnotationLayer annotations={[draftAnnotation]} />}
         {worldNodes.map((node) => (
-          <WorldNode key={node.id} node={node} onContextMenu={onNodeContextMenu} />
+          <WorldNode
+            key={node.id}
+            node={node}
+            hidden={collapsed.has(node.id) || (groupContents.value !== null && !groupContents.value.has(node.id))}
+            onContextMenu={onNodeContextMenu}
+          />
         ))}
         {/* Snap alignment guide lines */}
         {activeGuides.value && (

package/src/client/canvas/ContextMenu.tsx

@@ -7,6 +7,7 @@ import {
   expandNode,
   focusNode,
   nodes,
+  openGroup,
   pendingConnection,
   persistLayout,
   removeNode,
@@ -30,6 +31,7 @@ import {
 import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
 import { canCopyPrimitiveJson, copyPrimitiveJson } from '../nodes/primitive-copy';
 import { askText } from './TextPrompt';
+import { openBoardMove } from './BoardMoveDialog';
 import { activeBoard, boardIncarnation, setBoardReadme } from '../state/boards-store';
 import { openLifecycle } from '../state/knowledge-store';
 import { RELATION_KINDS, relationKind } from '../../shared/relations.js';
@@ -468,6 +470,23 @@ async function createPromptedNode(opts: {
 
 function buildCanvasMenuItems(canvasX: number, canvasY: number): MenuItem[] {
   return [
+    {
+      label: 'New work card',
+      action: () => {
+        const width = 360;
+        const height = 200;
+        const position = centeredPosition(canvasX, canvasY, width, height);
+        void createNodeFromClient({
+          type: 'status',
+          title: 'New work card',
+          data: { workState: 'todo' },
+          x: position.x,
+          y: position.y,
+          width,
+          height,
+        });
+      },
+    },
     {
       label: 'New note',
       action: () => {
@@ -567,18 +586,19 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
     action: () => focusNode(node.id),
   });
 
-  items.push({
-    label: 'Rename…',
-    action: () => {
-      void askText('Rename node', 'Node title', {
-        initial: typeof node.data.title === 'string' ? node.data.title : '',
-        confirm: 'Save',
-      }).then((title) => {
-        if (!title?.trim()) return;
-        void updateNodeFromClient(node.id, { title: title.trim() });
-      });
-    },
-  });
+  if (!(node.type === 'status' && typeof node.data.workItemId === 'string'))
+    items.push({
+      label: 'Rename…',
+      action: () => {
+        void askText('Rename node', 'Node title', {
+          initial: typeof node.data.title === 'string' ? node.data.title : '',
+          confirm: 'Save',
+        }).then((title) => {
+          if (!title?.trim()) return;
+          void updateNodeFromClient(node.id, { title: title.trim() });
+        });
+      },
+    });
 
   // Expand into full-viewport overlay for focused work
   if (EXPANDABLE_TYPES.has(node.type)) {
@@ -757,6 +777,8 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
   if (node.type === 'group') {
     const childIds = (node.data.children as string[]) ?? [];
     items.push({ separator: true });
+    items.push({ label: 'Open group', action: () => openGroup(node.id) });
+    items.push({ label: 'Move to new board', action: () => openBoardMove([node.id]) });
     items.push({
       render: (onClose) => renderGroupColorSection(node, onClose),
     });