pmx-canvas 0.10.0 → 0.12.0

package/src/client/App.tsx

@@ -37,7 +37,10 @@ import { ShortcutOverlay } from './canvas/ShortcutOverlay';
 import { SnapshotPanel } from './canvas/SnapshotPanel';
 import { promptedCreate, ToolRail } from './canvas/ToolRail';
 import { EdgeHint, RelationLegend } from './canvas/EdgeLayer';
+import { SelectedEdgeEditor } from './canvas/EdgeEditor';
+import { GroupBreadcrumbs } from './canvas/GroupNavigation';
 import { TextPrompt } from './canvas/TextPrompt';
+import { BoardMoveDialog } from './canvas/BoardMoveDialog';
 import { TopBar } from './canvas/TopBar';
 import {
   activeNodeId,
@@ -62,6 +65,9 @@ import {
   walkGraph,
   zoomByFactor,
   groupsOfSelection,
+  groupPath,
+  groupViewNodes,
+  leaveGroup,
 } from './state/canvas-store';
 import { connectSSE } from './state/sse-bridge';
 import { intents } from './state/intent-store';
@@ -247,7 +253,10 @@ export function App() {
       if (target?.closest('[role="menu"]')) return;
       const inDialog = target?.closest('[role="dialog"]');
       // Chrome owns its arrow keys and Tab order, rather than board navigation.
-      if ((e.key === 'Tab' || e.key.startsWith('Arrow')) && target?.closest('.tool-rail, .top-bar')) {
+      if (
+        (e.key === 'Tab' || e.key.startsWith('Arrow')) &&
+        target?.closest('.tool-rail, .top-bar, .group-breadcrumbs, .group-outside-stub')
+      ) {
         return;
       }
 
@@ -292,6 +301,10 @@ export function App() {
       } else if (e.key === 'Escape') {
         if (!isSelectionEscape(e)) return;
         e.preventDefault();
+        if (groupPath.value.length && !menu) {
+          leaveGroup();
+          return;
+        }
         if (relationFilter.value?.boardId === activeBoardId.value) relationFilter.value = null;
         lifecycleFilter.value = 'All';
         clearSelection();
@@ -436,6 +449,7 @@ export function App() {
     >
       <Presentation />
       <EdgeHint />
+      <SelectedEdgeEditor />
       <ToolRail
         minimapVisible={minimapVisible}
         onToggleMinimap={handleToggleMinimap}
@@ -461,11 +475,12 @@ export function App() {
                 annotationTool={annotationTool}
               />
             )}
-            <AttentionToast />
+            {(onHome || !expandedNodeId.value) && <AttentionToast />}
             <KnowledgeSync />
             {!onHome && <LifecycleFilters />}
             {!onHome && <RelationLegend />}
-            <AttentionHistory />
+            {!onHome && <GroupBreadcrumbs />}
+            {(onHome || !expandedNodeId.value) && <AttentionHistory />}
             <ActivityFeed />
             <WritersSheet />
             {onHome ? (
@@ -480,6 +495,7 @@ export function App() {
             {!onHome && sessionActive.value && !isHostedWorkbench() && <CommandBar />}
             {!onHome && <SessionReceipt onOpenSnapshots={() => setSnapshotOpen(true)} />}
             <TextPrompt />
+            <BoardMoveDialog />
             {!browsingMemory.value && <ExportDialog />}
             {!onHome && expandedNodeId.value && <ExpandedNodeOverlay />}
             <SnapshotPanel
@@ -490,7 +506,7 @@ export function App() {
             {minimapVisible && !onHome && (
               <Minimap
                 viewport={viewport}
-                nodes={nodes}
+                nodes={groupViewNodes}
                 edges={edges}
                 onNavigate={handleMinimapNavigate}
                 containerWidth={area.width}

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/BarHint.tsx

@@ -20,6 +20,7 @@ export function BarPortal({ children }: { children: VNode }) {
  * `title` hints, which are delay-gated and never render in embedded panes.
  */
 export function BarHint({
+  id,
   label,
   shortcut,
   body,
@@ -29,10 +30,12 @@ export function BarHint({
   fitWithin,
   children,
 }: {
+  /** Optional description target for the control's aria-describedby. */
+  id?: string;
   label: string;
   shortcut?: string;
-  /** One or two plain sentences under the label — the explanation a native `title` used to hide. */
-  body?: string;
+  /** Explanatory text, optionally split into readable paragraphs. */
+  body?: ComponentChildren;
   align?: 'start' | 'center' | 'end';
   /** Which way the tooltip opens. Bars at the bottom of the region open 'up'. */
   side?: 'down' | 'up';
@@ -73,7 +76,7 @@ export function BarHint({
       onFocusIn={fitWithin ? fit : undefined}
     >
       {children}
-      <span class="toolbar-tooltip" role="tooltip">
+      <span id={id} class="toolbar-tooltip" role="tooltip">
         <span class="toolbar-tooltip-label">{label}</span>
         {body && <span class="toolbar-tooltip-body">{body}</span>}
         {shortcut && (

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

@@ -1,9 +1,10 @@
-import { boardList } from '../state/boards-store';
+import { activeBoard, boardList } from '../state/boards-store';
 import { cardQualification, effectiveLifecycleFilter as lifecycleFilter } from '../state/knowledge-store';
 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,
@@ -50,7 +53,7 @@ import { AxStepControls } from '../nodes/AxStepControls';
 import { getNodeIcon, IconChevronRight, IconClose, IconMore, IconExpand, IconPin } from '../icons';
 import { EXPANDABLE_TYPES, TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
-import { AUTO_FIT_TITLEBAR_HEIGHT, computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
+import { computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
 import { activeGuides, buildSnapCache, clearSnapCache, snapToGuides } from './snap-guides';
 import { useNodeDrag } from './use-node-drag';
 import { useNodeResize } from './use-node-resize';
@@ -89,44 +92,6 @@ export function nearestNodeInDirection(
   return best;
 }
 
-/** Fraction of a node's height the title bar may occupy before it starts
- *  crowding out the content it is labelling. */
-const MAX_TITLEBAR_HEIGHT_RATIO = 0.4;
-/** Fraction of a node's width the fixed title-bar chrome may occupy before it
- *  starts eating the node's NAME. */
-const MAX_TITLEBAR_CHROME_WIDTH_RATIO = 0.55;
-/** Unscaled width of everything in the bar that is not the title: type icon,
- *  status/type pill, the control cluster, and the gaps between them. */
-const TITLEBAR_CHROME_BASE_WIDTH = 175;
-
-/**
- * How much to enlarge node chrome (title bar, badges, icons) when zoomed out so
- * it stays legible. Full inverse compensation is capped at 2.2x — but the cap
- * alone ignored the node it is drawn on, so on SHORT nodes the growing bar ate
- * the body: a 116px-tall section label at 46% zoom gave the title bar 72% of the
- * node and left 14px for text that needed 41, so the markdown was simply cut off.
- * The scale is therefore also bounded by the node's own height, keeping the bar
- * under MAX_TITLEBAR_HEIGHT_RATIO of it. Tall nodes are unaffected (their height
- * never binds); pass height 0 for collapsed/auto-height nodes to skip the bound.
- */
-export function nodeChromeScale(viewportScale: number, nodeHeight: number, nodeWidth = 0): number {
-  if (!Number.isFinite(viewportScale) || viewportScale >= 1) return 1;
-  const zoomScale = Math.min(2.2, 1 / Math.max(viewportScale, 0.01));
-  let bounded = zoomScale;
-  if (Number.isFinite(nodeHeight) && nodeHeight > 0) {
-    bounded = Math.min(bounded, (nodeHeight * MAX_TITLEBAR_HEIGHT_RATIO) / AUTO_FIT_TITLEBAR_HEIGHT);
-  }
-  // Width matters as much as height: the icon, pill and control cluster are all
-  // flex-shrink: 0, so the NAME is the only thing that gives way. Unbounded, a
-  // 360px step node at 52% zoom spent 100 of 187 bar pixels on controls alone and
-  // the title collapsed to nothing. Bound the scale so the fixed chrome can never
-  // take more than MAX_TITLEBAR_CHROME_WIDTH_RATIO of the node.
-  if (Number.isFinite(nodeWidth) && nodeWidth > 0) {
-    bounded = Math.min(bounded, (nodeWidth * MAX_TITLEBAR_CHROME_WIDTH_RATIO) / TITLEBAR_CHROME_BASE_WIDTH);
-  }
-  return Math.max(1, bounded);
-}
-
 /** A header title keeps at least this much room, or all of it when shorter (HeaderMarks.dc.html). */
 const TITLE_MIN_WIDTH = 140;
 
@@ -217,7 +182,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
       document.removeEventListener('keydown', escListener.current);
       escListener.current = null;
     }
-    persistLayout();
+    persistLayout({ raisedNodeId: node.id });
     // Membership changes ONLY here, and only while the pill was showing.
     const target = dragDropTarget.value;
     endDropTracking();
@@ -308,12 +273,15 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         toggleSelected(node.id);
         return;
       }
-      bringToFront(node.id);
+      bringToFront(node.id, false);
       // User wins (phase 8): hold the node for the drag; an agent mid-edit yields.
       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();
@@ -359,15 +327,33 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     (e: KeyboardEvent) => {
       const target = e.target as HTMLElement | null;
       if (target && target !== e.currentTarget && target.closest('input, textarea, [contenteditable="true"]')) return;
+      if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {
+        const more = shellRef.current?.querySelector<HTMLButtonElement>('.node-hover-control[aria-haspopup="menu"]');
+        if (more) {
+          e.preventDefault();
+          e.stopPropagation();
+          more.click();
+        }
+        return;
+      }
       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);
@@ -409,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;
@@ -445,10 +433,14 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const isTrace = node.type === 'trace';
   const isTraceRunning = isTrace && node.data.status === 'running';
   const isGroup = node.type === 'group';
+  const isHeading = node.type === 'markdown' && node.data.display === 'heading';
+  const graphType = (node.data.graphConfig as { graphType?: string } | undefined)?.graphType;
   const isStrictSize = node.data.strictSize === true;
   const viewportScale = Math.max(viewport.value.scale, 0.01);
-  const chromeScale = nodeChromeScale(viewportScale, node.collapsed ? 0 : node.size.height, node.size.width);
-  const chipFold = useHeaderFold(titleRef, headerChip(node, isContextPinned), title, node.size.width, chromeScale);
+  // Text alone may grow within the fixed header line. Enlarging the whole bar
+  // resizes embedded viewports and reflows their content while zooming.
+  const titleScale = Math.min(1.2, Math.max(1, 1 / viewportScale));
+  const chipFold = useHeaderFold(titleRef, headerChip(node, isContextPinned), title, node.size.width, titleScale);
 
   const groupColor = isGroup && node.data.color ? (node.data.color as string) : undefined;
   const nodeStyle: Record<string, string | number> = {
@@ -457,7 +449,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     width: `${node.size.width}px`,
     height: node.collapsed ? 'auto' : `${node.size.height}px`,
     zIndex: node.zIndex,
-    '--node-chrome-scale': chromeScale.toFixed(3),
+    '--node-title-scale': titleScale.toFixed(3),
     '--node-port-scale': (1 / viewportScale).toFixed(3),
     ...(groupColor ? { '--group-color': groupColor } : {}),
   };
@@ -477,6 +469,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     isTrace ? 'trace-node' : '',
     isTraceRunning ? 'trace-running' : '',
     isGroup ? 'group-node' : '',
+    isHeading ? 'heading-node' : '',
     isStrictSize ? 'strict-size' : '',
     isAgentMutating ? 'agent-mutating' : '',
     sessionChromeActive.value && sessionEditedIds.value.has(node.id) ? 'session-edited' : '',
@@ -516,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}
@@ -623,7 +620,9 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 ) : (
                   <span class="group-name">{title}</span>
                 )}
-                <span class="group-count">{groupChildren.length}</span>
+                <span class="group-count">
+                  {groupChildren.length} {groupChildren.length === 1 ? 'node' : 'nodes'}
+                </span>
               </span>
               <span class="group-edge-spacer" />
               <span class="group-actions" role="toolbar" aria-label={`${title} actions`}>
@@ -693,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"
@@ -740,7 +761,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               <NodeTypeIcon node={node} pinned={isContextPinned} title={title} fold={chipFold}>
                 {(() => {
                   const NodeIcon = getNodeIcon(node.type);
-                  return <NodeIcon size={Math.round(14 * chromeScale)} />;
+                  return <NodeIcon size={14} />;
                 })()}
               </NodeTypeIcon>
               {/* The kind-colored icon says what type this is (rail-chrome-v2 card
@@ -766,6 +787,14 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                   {title}
                 </span>
               )}
+              {activeBoard()?.readmeNodeId === node.id && <span class="node-readme-mark">README</span>}
+              {node.type === 'graph' && graphType && <span class="node-header-meta">{graphType}</span>}
+              {node.type === 'file' && <div class="node-file-toolbar" data-file-toolbar={node.id} />}
+              {node.type === 'status' && typeof node.data.updatedAt === 'string' && (
+                <time class="node-header-meta" dateTime={node.data.updatedAt}>
+                  {new Date(node.data.updatedAt).toLocaleTimeString()}
+                </time>
+              )}
               <NearPinMark node={node} pinned={isContextPinned} fold={chipFold} />
               <NodeContextMark node={node} pinned={isContextPinned} fold={chipFold} />
               <div class="node-controls">
@@ -827,6 +856,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                     onContextMenu?.(e, node.id);
                   }}
                   aria-label="More actions"
+                  aria-haspopup="menu"
                 >
                   <IconMore size={14} />
                 </button>