pmx-canvas 0.10.0 → 0.11.0

package/src/client/canvas/Presentation.tsx

@@ -4,6 +4,7 @@ import { canvasArea } from './canvas-area';
 import { cancelViewportAnimation, hasInitialServerLayout, viewport } from '../state/canvas-store';
 import {
   endPresentation,
+  presentationCursor,
   presentationError,
   presenting,
   recordingCamera,
@@ -11,6 +12,7 @@ import {
   stepTour,
 } from '../state/presentation';
 import { usePanZoom } from './use-pan-zoom';
+import { BarHint } from './BarHint';
 
 declare global {
   interface Window {
@@ -25,6 +27,9 @@ declare global {
 
 export function Presentation() {
   const active = presenting.value;
+  const cursor = presentationCursor.value;
+  const canBack = cursor !== null && cursor.index > 0;
+  const canNext = cursor !== null && cursor.index < cursor.total - 1;
   const ready = hasInitialServerLayout.value;
   const moveCamera = (camera: Camera) => {
     cancelViewportAnimation();
@@ -89,9 +94,54 @@ export function Presentation() {
           }}
           onContextMenu={(event) => event.preventDefault()}
         >
-          <button type="button" class="presentation-exit" onClick={endPresentation}>
-            Exit presentation
-          </button>
+          <div class="presentation-controls" role="group" aria-label="Presentation controls">
+            <BarHint
+              id="presentation-back-hint"
+              label="Previous stop"
+              shortcut="← / ↑"
+              fitWithin=".presentation-navigation"
+            >
+              <button
+                type="button"
+                class="presentation-step"
+                aria-describedby="presentation-back-hint"
+                aria-disabled={!canBack}
+                onClick={() => {
+                  if (canBack) void stepTour({ step: 'previous' });
+                }}
+              >
+                Back
+              </button>
+            </BarHint>
+            <BarHint
+              id="presentation-next-hint"
+              label="Next stop"
+              shortcut="→ / ↓ / Space"
+              fitWithin=".presentation-navigation"
+            >
+              <button
+                type="button"
+                class="presentation-step"
+                aria-describedby="presentation-next-hint"
+                aria-disabled={!canNext}
+                onClick={() => {
+                  if (canNext) void stepTour({ step: 'next' });
+                }}
+              >
+                Next
+              </button>
+            </BarHint>
+            <BarHint id="presentation-exit-hint" label="Exit presentation" shortcut="Esc" align="end">
+              <button
+                type="button"
+                class="presentation-exit"
+                aria-describedby="presentation-exit-hint"
+                onClick={endPresentation}
+              >
+                Exit presentation
+              </button>
+            </BarHint>
+          </div>
         </div>
       )}
       {presentationError.value && (

package/src/client/canvas/TopBar.tsx

@@ -39,6 +39,14 @@ import {
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
 import { agentSessionsEnabled } from '../state/workspace-settings';
 
+const PRESENT_DESCRIPTION = (
+  <span style={{ whiteSpace: 'pre-line' }}>
+    {
+      'A presentation follows either a saved tour or the board’s groups.\n\nSaved tour: ask your agent to define the stops and their order. Each stop can focus on a card, a group, a rectangular area, or a specific camera position.\n\nNo saved tour: every group becomes a stop, ordered top-to-bottom, then left-to-right. It doesn’t automatically visit every card.'
+    }
+  </span>
+);
+
 /**
  * The attached session's chip (rail-chrome-v2 phase 3): phase-colored, with a
  * dot that pulses while the agent thinks or runs a tool. Renders ONLY while a
@@ -481,12 +489,16 @@ export function TopBar() {
               )}
               {activeBoardId.value && (
                 <BarHint
+                  id="present-hint"
                   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."
+                  body={PRESENT_DESCRIPTION}
+                  align="end"
+                  fitWithin="body"
                 >
                   <button
                     type="button"
                     class="present-button"
+                    aria-describedby="present-hint"
                     onClick={() => {
                       void startPresentation();
                     }}
@@ -592,14 +604,17 @@ function TopBarMore({ boardOpen, onFit }: { boardOpen: boolean; onFit: () => voi
             </button>
           )}
           {boardOpen && (
-            <button
-              type="button"
-              role="menuitem"
-              class="toolbar-menu-item"
-              onClick={run(() => void startPresentation())}
-            >
-              Present board
-            </button>
+            <BarHint id="present-menu-hint" label="Present board" body={PRESENT_DESCRIPTION}>
+              <button
+                type="button"
+                role="menuitem"
+                class="toolbar-menu-item"
+                aria-describedby="present-menu-hint"
+                onClick={run(() => void startPresentation())}
+              >
+                Present board
+              </button>
+            </BarHint>
           )}
           <button type="button" role="menuitem" class="toolbar-menu-item" onClick={run(() => zoomByFactor(1.25))}>
             Zoom in

package/src/client/canvas/auto-fit.ts

@@ -7,12 +7,6 @@ export const AUTO_FIT_MAX_HEIGHT = 600;
 // Iframe surfaces (charts/dashboards/rich html) can legitimately need more room
 // than a text node, so they grow to a higher ceiling before scrolling.
 export const AUTO_FIT_MAX_HEIGHT_IFRAME = 1400;
-// `.node-body` adds 12px padding top+bottom around an iframe surface (global.css).
-// The bridge reports the iframe's OWN document scrollHeight, so the grow target
-// must add titlebar + this body padding or the node settles ~24px short and the
-// surface shows a residual inner scrollbar. (The DOM auto-fit above doesn't need
-// this: body.scrollHeight already includes the body's padding.)
-export const AUTO_FIT_BODY_PADDING = 24;
 
 /** Node types the DOM auto-fit can't measure: iframe-backed surfaces (html/
  *  json-render/graph/mcp-app), where the body's scrollHeight equals the iframe
@@ -77,13 +71,17 @@ export function shouldContentFitIframeNode(node: CanvasNodeState): boolean {
 /**
  * Grow-only target height from a surface-reported content height. Returns null
  * when the node is exempt, the report is non-positive, or the node already fits
- * (so it never shrinks — monotonic growth can't oscillate). Adds the titlebar +
- * node-body padding so the content fully clears (no residual inner scrollbar),
- * capped at the iframe ceiling.
+ * (so it never shrinks). Callers measure the actual chrome in world pixels,
+ * including zoom-compensated headers and any captions. A fixed padding allowance
+ * makes a full-height viewer grow again on every content-height report.
  */
-export function computeContentGrowHeight(node: CanvasNodeState, contentHeight: number): number | null {
+export function computeContentGrowHeight(
+  node: CanvasNodeState,
+  contentHeight: number,
+  chromeHeight: number,
+): number | null {
   if (!shouldContentFitIframeNode(node) || !Number.isFinite(contentHeight) || contentHeight <= 0) return null;
-  const want = Math.min(contentHeight + AUTO_FIT_TITLEBAR_HEIGHT + AUTO_FIT_BODY_PADDING, AUTO_FIT_MAX_HEIGHT_IFRAME);
+  const want = Math.min(Math.ceil(contentHeight + chromeHeight), AUTO_FIT_MAX_HEIGHT_IFRAME);
   return want > node.size.height + 8 ? want : null;
 }
 

package/src/client/canvas/canvas-area.ts

@@ -55,7 +55,7 @@ export interface CanvasFitInsets {
  * both (0.5.0 Amp report, finding A; architecture rule 9's trap).
  */
 export function canvasFitInsets(): CanvasFitInsets {
-  let top = 16;
+  let top = 44;
   let bottom = 16;
   try {
     const area = canvasArea();

package/src/client/canvas/use-focus-trap.ts

@@ -71,7 +71,12 @@ export function useFocusTrap(
       // from (focus mode unmounts the node while expanded) names the element
       // to return to, which may only exist after the next frame.
       if (restoreTo) {
-        requestAnimationFrame(() => restoreTo()?.focus());
+        requestAnimationFrame(() => {
+          // A newly opened menu owns focus before this deferred return runs.
+          if (document.activeElement === document.body || root.contains(document.activeElement)) {
+            restoreTo()?.focus();
+          }
+        });
       } else if (previous && document.contains(previous) && previous !== document.body) {
         previous.focus();
       }

package/src/client/mermaid-entry.ts

@@ -5,16 +5,10 @@
  * HTML-escaped diagram source in `<pre class="mermaid-source">`; this script
  * reads it back via textContent, renders it to SVG, and re-renders when the
  * parent canvas live-switches the theme (the theme bridge toggles the document's
- * `data-theme` attribute). Keeping mermaid out of the main SPA bundle keeps the
- * canvas boot lean — only mermaid-node surfaces pay for the library.
+ * `data-theme` attribute). Standalone views and exports share the canvas renderer.
  */
 
-import mermaid from 'mermaid';
-import { canvasThemeScheme } from '../shared/themes.js';
-
-function documentScheme(): 'dark' | 'light' {
-  return canvasThemeScheme(document.documentElement.getAttribute('data-theme'));
-}
+import { renderMermaid } from './mermaid-render.js';
 
 function showError(container: HTMLElement, message: string): void {
   container.innerHTML = '';
@@ -65,18 +59,14 @@ function fitDiagram(container: HTMLElement): void {
 }
 
 async function renderDiagram(source: string, container: HTMLElement): Promise<void> {
-  const scheme = documentScheme();
-  mermaid.initialize({
-    startOnLoad: false,
-    theme: scheme === 'dark' ? 'dark' : 'default',
-    securityLevel: 'strict',
-  });
-  renderSeq += 1;
+  const sequence = ++renderSeq;
   try {
-    const { svg } = await mermaid.render(`pmx-mermaid-${renderSeq}`, source);
+    const svg = await renderMermaid(source);
+    if (sequence !== renderSeq) return;
     container.innerHTML = svg;
     fitDiagram(container);
   } catch (error) {
+    if (sequence !== renderSeq) return;
     // Never leave a blank/black frame: show the parse/render error instead.
     showError(container, error instanceof Error ? error.message : String(error));
   }
@@ -98,11 +88,7 @@ function boot(): void {
   void renderDiagram(source, container);
   // Live theme switching: the parent's theme bridge toggles data-theme on the
   // root element; re-render so the diagram palette follows the canvas theme.
-  let lastScheme = documentScheme();
   const observer = new MutationObserver(() => {
-    const scheme = documentScheme();
-    if (scheme === lastScheme) return;
-    lastScheme = scheme;
     void renderDiagram(source, container);
   });
   observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });

package/src/client/mermaid-render.ts

@@ -0,0 +1,39 @@
+import DOMPurify from 'dompurify';
+
+// Mermaid configuration is global: serialize configuration with each render.
+let rendering: Promise<unknown> = Promise.resolve();
+
+export function renderMermaid(source: string): Promise<string> {
+  const result = rendering.then(async () => {
+    // Diagram-only dependency: the SPA splits this module; self-contained MCP
+    // documents defer its initialization without requiring external assets.
+    const { default: mermaid } = await import('mermaid');
+    const style = getComputedStyle(document.documentElement);
+    const token = (name: string) => style.getPropertyValue(name).trim();
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      theme: 'base',
+      fontFamily: token('--font-ui'),
+      themeVariables: {
+        primaryColor: token('--c-panel-soft'),
+        primaryTextColor: token('--c-text'),
+        primaryBorderColor: token('--c-line'),
+        lineColor: token('--c-muted'),
+        secondaryColor: token('--c-panel'),
+        tertiaryColor: token('--c-panel'),
+        edgeLabelBackground: token('--c-panel'),
+        fontSize: '12px',
+      },
+    });
+    const { svg } = await mermaid.render(`mermaid-${crypto.randomUUID()}`, source);
+    return DOMPurify.sanitize(svg, {
+      ADD_TAGS: ['foreignObject'],
+      ADD_ATTR: ['dominant-baseline'],
+      HTML_INTEGRATION_POINTS: { foreignobject: true },
+    });
+  });
+  // A malformed diagram must not prevent the next diagram from rendering.
+  rendering = result.catch(() => {});
+  return result;
+}

package/src/client/nodes/AxStepControls.tsx

@@ -18,37 +18,10 @@ import { axNodeActionButtonStyle, runNodeAxInteraction } from './ax-node-actions
  */
 
 /**
- * The rows sit in a dock stuck to the bottom of the scrollable node body: a step
- * node is short (360x200 as materialized), so a control row that simply followed
- * the content scrolled out of sight. Sticky keeps it reachable at any node height
- * while still being INSIDE the body, which is what auto-fit measures.
+ * The rows sit in `.ax-step-dock`, a footer that stays reachable at the bottom of
+ * the node body (global.css). On a card it shares one footer row with the card's
+ * own actions; in the expanded overlay it is a sticky bar under the document.
  */
-/**
- * The dock reads as a real footer toolbar rather than stray text at the bottom
- * edge. It bleeds to the container's edges via negative margins (`.node-body`
- * has 12px padding; the expanded overlay's content area has 16px, and the dock
- * is a sibling of that area, so it starts flush) and then re-applies its own
- * padding — otherwise the first label sits hard against the left edge and looks
- * clipped. `--c-panel-overlay` separates it from the content above it.
- */
-const dockStyle = {
-  position: 'sticky',
-  // Bleed OUT of the container's padding so the bar spans edge to edge, then
-  // re-apply padding inside it. These are two different numbers: in a node body
-  // the dock sits INSIDE 12px of padding and must pull back out of it, while in
-  // the expanded overlay it is a sibling of the padded content area and is
-  // already flush — bleeding there would push it off the panel.
-  bottom: 'calc(-1 * var(--ax-dock-bleed, 12px))',
-  marginTop: '12px',
-  marginLeft: 'calc(-1 * var(--ax-dock-bleed, 12px))',
-  marginRight: 'calc(-1 * var(--ax-dock-bleed, 12px))',
-  marginBottom: 'calc(-1 * var(--ax-dock-bleed, 12px))',
-  padding: '9px var(--ax-dock-pad, 12px) 10px',
-  background: 'var(--c-panel-overlay)',
-  borderTop: '1px solid var(--c-line)',
-  backdropFilter: 'blur(6px)',
-} as const;
-
 const rowStyle = {
   display: 'flex',
   alignItems: 'center',
@@ -57,7 +30,7 @@ const rowStyle = {
 } as const;
 
 const labelStyle = {
-  fontSize: '10px',
+  fontSize: 'var(--fs-meta)',
   color: 'var(--c-muted)',
   textTransform: 'uppercase',
   letterSpacing: '0.04em',
@@ -160,47 +133,50 @@ function FlowLoopControls({ node, flow }: { node: CanvasNodeState; flow: AxFlowS
           </button>
         </BarHint>
       )}
-      <input
-        class="ax-flow-steer-input"
-        value={message}
-        placeholder="Steer the agent…"
-        aria-label="Steer the agent"
-        onInput={(e) => setMessage((e.target as HTMLInputElement).value)}
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => {
-          if (e.key !== 'Enter') return;
-          e.stopPropagation();
-          void handleSteer();
-        }}
-        style={{
-          flex: '1 1 120px',
-          minWidth: '90px',
-          fontSize: '10px',
-          padding: '3px 6px',
-          borderRadius: '4px',
-          border: '1px solid var(--c-line)',
-          background: 'var(--c-panel-overlay)',
-          color: 'var(--c-text)',
-        }}
-      />
-      <BarHint
-        label="Send a steering message to the agent working this flow"
-        side="up"
-        align="end"
-        fitWithin=".node-content, .expanded-overlay-panel"
-      >
-        <button
-          type="button"
-          class="ax-node-action"
-          style={axNodeActionButtonStyle}
-          onClick={(e) => {
+      {/* The draft and its send button wrap as one unit, never a lone Steer. */}
+      <span style={{ display: 'flex', gap: '6px', flex: '1 1 140px', minWidth: 0 }}>
+        <input
+          class="ax-flow-steer-input"
+          value={message}
+          placeholder="Steer the agent…"
+          aria-label="Steer the agent"
+          onInput={(e) => setMessage((e.target as HTMLInputElement).value)}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key !== 'Enter') return;
             e.stopPropagation();
             void handleSteer();
           }}
+          style={{
+            flex: '1 1 0',
+            minWidth: 0,
+            fontSize: 'var(--fs-meta)',
+            padding: '3px 6px',
+            borderRadius: '4px',
+            border: '1px solid var(--c-line)',
+            background: 'var(--c-panel-overlay)',
+            color: 'var(--c-text)',
+          }}
+        />
+        <BarHint
+          label="Send a steering message to the agent working this flow"
+          side="up"
+          align="end"
+          fitWithin=".node-content, .expanded-overlay-panel"
         >
-          Steer
-        </button>
-      </BarHint>
+          <button
+            type="button"
+            class="ax-node-action"
+            style={axNodeActionButtonStyle}
+            onClick={(e) => {
+              e.stopPropagation();
+              void handleSteer();
+            }}
+          >
+            Steer
+          </button>
+        </BarHint>
+      </span>
     </div>
   );
 }
@@ -212,7 +188,7 @@ export function AxStepControls({ node }: { node: CanvasNodeState }) {
   const status = mirroredStatus(node.data);
 
   return (
-    <div class="ax-step-dock" style={dockStyle}>
+    <div class="ax-step-dock">
       <div class="ax-step-controls" style={rowStyle}>
         <span class="ax-step-position" style={labelStyle}>
           Step {step.index}/{step.total}

package/src/client/nodes/BoardNode.tsx

@@ -1,20 +1,43 @@
 import type { CanvasNodeState } from '../types';
-import { boardList, openBoard } from '../state/boards-store';
+import { useState } from 'preact/hooks';
+import { activeBoardId, boardList, openBoard } from '../state/boards-store';
+import { updateNodeFromClient } from '../state/intent-bridge';
 import { IconExternalLink } from '../icons';
 
-/** Native text-only cross-board link. Target identity is the durable board id. */
+/** Target identity is the durable board id; a missing target can be relinked. */
 export function BoardNode({ node }: { node: CanvasNodeState }) {
   const boardId = typeof node.data.boardId === 'string' ? node.data.boardId : '';
   const target = boardList.value.find((board) => board.id === boardId);
+  const [relinking, setRelinking] = useState(false);
+  const [error, setError] = useState('');
   return (
     <div class="board-node">
+      {target ? (
+        <div class="home-thumb" aria-hidden="true">
+          <div class="home-thumb-inner">
+            {(target.preview ?? []).map((rect, index) => (
+              <span
+                key={index}
+                class={`home-thumb-card${rect.pinned ? ' is-pinned' : ''}`}
+                style={{
+                  left: `${rect.x * 100}%`,
+                  top: `${rect.y * 100}%`,
+                  width: `${rect.w * 100}%`,
+                  height: `${rect.h * 100}%`,
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div class="board-node-missing">Board not found</div>
+      )}
       <div class="board-node-content">
-        <div class="board-node-label">Linked board</div>
-        <strong class="board-node-title">{target?.name ?? 'Missing board'}</strong>
+        <strong class="board-node-title">{target?.name ?? String(node.data.title || 'Linked board')}</strong>
         <div class="board-node-meta">
           {target
-            ? `${target.nodeCount} nodes${target.pin ? ' · pinned, so it travels with you' : ''}`
-            : boardId || 'No target id'}
+            ? `Board · ${target.nodeCount} nodes${target.pin ? ' · pinned, so it travels with you' : ''}`
+            : 'The linked board is no longer available.'}
         </div>
         {target?.summary && <p class="board-node-summary">{target.summary}</p>}
         {!!target?.pinnedTitles?.length && (
@@ -25,14 +48,47 @@ export function BoardNode({ node }: { node: CanvasNodeState }) {
             Linked from: {[...new Set(target.backlinks.map((link) => link.title))].join(', ')}
           </p>
         )}
+        {relinking && (
+          <select
+            aria-label="Link to board"
+            class="board-node-relink"
+            value=""
+            onChange={async (event) => {
+              const id = event.currentTarget.value;
+              if (!id) return;
+              setError('');
+              const result = await updateNodeFromClient(node.id, {
+                data: { boardId: id },
+                expectedBoardId: activeBoardId.value,
+              });
+              if (result.ok) setRelinking(false);
+              else setError('Could not relink this card. Try again.');
+            }}
+          >
+            <option value="" disabled>
+              Choose board…
+            </option>
+            {boardList.value
+              .filter((board) => board.id !== activeBoardId.value)
+              .map((board) => (
+                <option key={board.id} value={board.id}>
+                  {board.name}
+                </option>
+              ))}
+          </select>
+        )}
+        {error && (
+          <div role="status" class="board-node-meta">
+            {error}
+          </div>
+        )}
       </div>
       <button
         class="board-node-open"
         type="button"
-        disabled={!target}
-        onClick={() => target && void openBoard(target.id)}
+        onClick={() => (target ? void openBoard(target.id) : setRelinking(!relinking))}
       >
-        {target ? 'Open board' : 'Target unavailable'}
+        {target ? 'Open board' : 'Link to board…'}
         {target && <IconExternalLink size={14} />}
       </button>
     </div>