pmx-canvas 0.6.4 → 0.6.5

package/src/client/App.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { Presentation } from './canvas/Presentation';
+import { presenting } from './state/presentation';
 import { AttentionHistory } from './canvas/AttentionHistory';
 import { AttentionToast } from './canvas/AttentionToast';
 import { registerCanvasArea, canvasArea } from './canvas/canvas-area';
@@ -324,7 +326,11 @@ export function App() {
   const area = canvasArea();
 
   return (
-    <div class="app-shell" data-session-active={sessionIsActive ? 'true' : 'false'}>
+    <div
+      class={`app-shell${presenting.value ? ' is-presenting' : ''}`}
+      data-session-active={sessionIsActive ? 'true' : 'false'}
+    >
+      <Presentation />
       <ToolRail
         minimapVisible={minimapVisible}
         onToggleMinimap={handleToggleMinimap}

package/src/client/canvas/AgentPresenceLayer.tsx

@@ -45,7 +45,7 @@ export function AgentPresenceLayer() {
       {cursors.map(({ presence, position }) => (
         <div
           key={presence.sessionId}
-          class={`agent-cursor phase-${presence.phase}${presence.attached ? '' : ' is-external'}${presence.parentAgentId ? ' is-worker' : ''}`}
+          class={`agent-cursor phase-${presence.phase}${presence.cursor ? ' has-explicit-cursor' : ''}${presence.attached ? '' : ' is-external'}${presence.parentAgentId ? ' is-worker' : ''}`}
           data-session-id={presence.sessionId}
           style={{
             transform: `translate(${position.x}px, ${position.y}px)`,

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

@@ -1,6 +1,6 @@
 import { useEffect } from 'preact/hooks';
 import { nodes } from '../state/canvas-store';
-import { hoveredIntentId, intents, type ClientIntent } from '../state/intent-store';
+import { hoveredIntentId, intents, removeIntent, type ClientIntent } from '../state/intent-store';
 import { vetoGhostIntent } from '../state/intent-bridge';
 import { getNodeIcon } from '../icons';
 import { TYPE_LABELS } from '../types';
@@ -241,7 +241,14 @@ export function IntentLayer() {
   if (list.length === 0) return null;
 
   return (
-    <div class="intent-layer">
+    <div
+      class="intent-layer"
+      onAnimationEnd={(event) => {
+        if (event.animationName !== 'intent-settle' && event.animationName !== 'intent-dissolve') return;
+        const id = (event.target as HTMLElement).dataset.intentId;
+        if (id && intents.value.get(id)?.phase !== 'forming') removeIntent(id);
+      }}
+    >
       <svg
         class="intent-line-layer"
         style={{

package/src/client/canvas/Presentation.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'preact/hooks';
+import { cameraSchema, interpolateCamera, resolveStop, type Camera, type Tour } from '../../shared/tour.js';
+import { canvasArea } from './canvas-area';
+import { cancelViewportAnimation, hasInitialServerLayout, nodes, viewport } from '../state/canvas-store';
+import { presenting, recordingCamera } from '../state/presentation';
+import { requestJson } from '../state/intent-bridge';
+
+declare global {
+  interface Window {
+    pmxCapture?: {
+      ready: () => boolean;
+      area: typeof canvasArea;
+      camera: () => Camera;
+      frame: (camera: Camera) => Promise<Camera>;
+    };
+  }
+}
+
+export function Presentation() {
+  const [tour, setTour] = useState<Tour>({ stops: [] });
+  const [index, setIndex] = useState(0);
+  const [error, setError] = useState('');
+  const active = presenting.value;
+  const ready = hasInitialServerLayout.value;
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    presenting.value = params.get('present') === '1';
+    recordingCamera.value = params.get('capture') === '1';
+    window.pmxCapture = {
+      ready: () => hasInitialServerLayout.value,
+      area: canvasArea,
+      camera: () => ({ ...viewport.value }),
+      frame: async (camera) => {
+        recordingCamera.value = true;
+        cancelViewportAnimation();
+        viewport.value = cameraSchema.parse(camera);
+        // Two animation frames: Preact has committed and the browser has had
+        // a paint opportunity before the screenshot command is acknowledged.
+        await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+        return { ...viewport.value };
+      },
+    };
+    return () => {
+      delete window.pmxCapture;
+      presenting.value = false;
+      recordingCamera.value = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (!active || !ready) return;
+    let cancelled = false;
+    void requestJson('read tour', '/api/canvas/tour', { tour: { stops: [] } as Tour }).then((result) => {
+      if (!cancelled) {
+        setTour(result.tour);
+        setIndex(0);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [active, ready]);
+  useEffect(() => {
+    if (!active || recordingCamera.value) return;
+    const stop = tour.stops[index];
+    if (!stop) return;
+    const area = canvasArea();
+    let target: Camera;
+    try {
+      target = resolveStop(stop, [...nodes.value.values()], area.width, area.height);
+      setError('');
+    } catch (error) {
+      setError(error instanceof Error ? error.message : String(error));
+      return;
+    }
+    cancelViewportAnimation();
+    const from = { ...viewport.value };
+    const start = performance.now();
+    const duration = (stop.duration ?? 1) * 1000;
+    let frame = 0;
+    const tick = (now: number) => {
+      if (recordingCamera.value) return;
+      const t = duration === 0 ? 1 : Math.min(1, (now - start) / duration);
+      viewport.value = interpolateCamera(from, target, t, area.width, area.height, stop.easing, stop.pullback);
+      if (t < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [active, index, tour]);
+  useEffect(() => {
+    if (!active) return;
+    const key = (event: KeyboardEvent) => {
+      event.stopImmediatePropagation();
+      if (['Escape', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', ' '].includes(event.key))
+        event.preventDefault();
+      if (event.key === 'Escape') presenting.value = false;
+      if (['ArrowRight', 'ArrowDown', ' '].includes(event.key))
+        setIndex((i) => Math.max(0, Math.min(tour.stops.length - 1, i + 1)));
+      if (['ArrowLeft', 'ArrowUp'].includes(event.key)) setIndex((i) => Math.max(0, i - 1));
+    };
+    document.addEventListener('keydown', key, true);
+    return () => document.removeEventListener('keydown', key, true);
+  }, [active, tour]);
+  return active && error ? (
+    <div class="presentation-error" role="alert">
+      {error}
+    </div>
+  ) : null;
+}

package/src/client/canvas/TopBar.tsx

@@ -1,4 +1,5 @@
 import type { ComponentChildren } from 'preact';
+import { presenting } from '../state/presentation';
 import { useEffect, useState } from 'preact/hooks';
 import { IconFitAll, IconZoomIn, IconZoomOut } from '../icons';
 import {
@@ -42,8 +43,19 @@ function AgentChip() {
   // bar and over the session panel, and the total was invisible): the most
   // active few wear their own chips and the rest fold into a census chip
   // that always names the total.
-  const sessions = attachedSessions.value;
-  if (sessions.length === 0) return null;
+  const allSessions = attachedSessions.value;
+  if (allSessions.length === 0) return null;
+  // Attached workers are represented by their orchestrator's roll-up, not a
+  // second top-level chip of their own. Orphans remain visible.
+  const sessions = allSessions.filter(
+    (session) =>
+      !session.parentAgentId ||
+      !allSessions.some(
+        (candidate) =>
+          candidate.sessionId !== session.sessionId &&
+          (candidate.sessionId === session.parentAgentId || candidate.source === session.parentAgentId),
+      ),
+  );
   const ranked = [...sessions].sort((a, b) => (AGENT_PHASE_RANK[a.phase] ?? 4) - (AGENT_PHASE_RANK[b.phase] ?? 4));
   const visible = ranked.slice(0, AGENT_CHIP_LIMIT);
   const overflow = ranked.slice(AGENT_CHIP_LIMIT);
@@ -318,6 +330,20 @@ export function TopBar() {
 
       <div class="top-bar-sep" />
 
+      <BarHint
+        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."
+      >
+        <button
+          type="button"
+          class="present-button"
+          onClick={() => {
+            presenting.value = true;
+          }}
+        >
+          Present
+        </button>
+      </BarHint>
       <BarHint label="Zoom out" shortcut={modChord('\u2212')}>
         <button type="button" class="top-bar-btn" onClick={() => zoomByFactor(1 / 1.25)} aria-label="Zoom out">
           <IconZoomOut />

package/src/client/canvas/use-node-drag.ts

@@ -7,6 +7,7 @@ interface NodeDragOptions {
   viewport: Signal<ViewportState>;
   onMove: (id: string, x: number, y: number) => void;
   onDragEnd: () => void;
+  onClick?: () => void;
 }
 
 /**
@@ -14,7 +15,7 @@ interface NodeDragOptions {
  * Converts screen-space pointer delta to canvas-space position delta
  * (accounting for current viewport scale).
  */
-export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOptions) {
+export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd, onClick }: NodeDragOptions) {
   const isDragging = useRef(false);
   const startPointer = useRef({ x: 0, y: 0 });
   const startPosition = useRef({ x: 0, y: 0 });
@@ -30,6 +31,7 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
       startPosition.current = { x: currentX, y: currentY };
       let pendingPointer: { x: number; y: number } | null = null;
       let frameId: number | null = null;
+      let moved = false;
 
       const flushMove = () => {
         frameId = null;
@@ -44,12 +46,14 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
 
       const onPointerMove = (ev: PointerEvent) => {
         if (!isDragging.current) return;
+        if (!moved && Math.hypot(ev.clientX - e.clientX, ev.clientY - e.clientY) < 4) return;
+        moved = true;
         pendingPointer = { x: ev.clientX, y: ev.clientY };
         if (frameId !== null) return;
         frameId = window.requestAnimationFrame(flushMove);
       };
 
-      const finishDrag = () => {
+      const finishDrag = (ev: PointerEvent) => {
         if (frameId !== null) {
           window.cancelAnimationFrame(frameId);
           flushMove();
@@ -60,13 +64,14 @@ export function useNodeDrag({ nodeId, viewport, onMove, onDragEnd }: NodeDragOpt
         document.removeEventListener('pointerup', finishDrag);
         document.removeEventListener('pointercancel', finishDrag);
         onDragEnd();
+        if (!moved && ev.type === 'pointerup') onClick?.();
       };
 
       document.addEventListener('pointermove', onPointerMove);
       document.addEventListener('pointerup', finishDrag);
       document.addEventListener('pointercancel', finishDrag);
     },
-    [nodeId, viewport, onMove, onDragEnd],
+    [nodeId, viewport, onMove, onDragEnd, onClick],
   );
 
   return handlePointerDown;

package/src/client/mermaid-entry.ts

@@ -29,6 +29,41 @@ function showError(container: HTMLElement, message: string): void {
 
 let renderSeq = 0;
 
+function fitDiagram(container: HTMLElement): void {
+  const svg = container.querySelector('svg');
+  const box = svg?.viewBox.baseVal;
+  if (!svg || !box?.width || !box.height) return;
+  const source = document.querySelector<HTMLElement>('.mermaid-source');
+  // Only canvas frames carry a nonce. A standalone site may itself be inside
+  // a host browser pane's iframe; it must still offer natural-size viewing.
+  const token = source?.dataset.frameToken;
+  const embedded = !!token && window.parent !== window;
+  const contain = embedded && source?.dataset.fit !== 'none';
+  const width = document.documentElement.clientWidth;
+  const height = document.documentElement.clientHeight;
+  const scale = contain ? Math.min(1, width / box.width, height / box.height) : 1;
+  svg.style.maxWidth = 'none';
+  svg.style.width = `${box.width * scale}px`;
+  svg.style.height = `${box.height * scale}px`;
+  svg.style.display = 'block';
+  svg.style.margin = contain ? '0 auto' : '0';
+  svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+
+  // Report the unconstrained, width-fitted height, not the visually contained
+  // height. Auto-grow remains useful; strictSize/userResized keep their frame.
+  if (embedded && token) {
+    window.parent.postMessage(
+      {
+        source: 'pmx-canvas-frame',
+        type: 'content-height',
+        token,
+        height: box.height * (contain ? Math.min(1, width / box.width) : 1),
+      },
+      '*',
+    );
+  }
+}
+
 async function renderDiagram(source: string, container: HTMLElement): Promise<void> {
   const scheme = documentScheme();
   mermaid.initialize({
@@ -40,6 +75,7 @@ async function renderDiagram(source: string, container: HTMLElement): Promise<vo
   try {
     const { svg } = await mermaid.render(`pmx-mermaid-${renderSeq}`, source);
     container.innerHTML = svg;
+    fitDiagram(container);
   } catch (error) {
     // Never leave a blank/black frame: show the parse/render error instead.
     showError(container, error instanceof Error ? error.message : String(error));
@@ -51,7 +87,10 @@ function boot(): void {
   const source = sourceEl?.textContent ?? '';
   const container = document.createElement('div');
   container.className = 'mermaid-diagram';
+  document.body.style.margin = '0';
+  document.body.style.padding = '0';
   document.body.appendChild(container);
+  window.addEventListener('resize', () => fitDiagram(container));
   if (!source.trim()) {
     showError(container, 'Empty mermaid diagram');
     return;

package/src/client/nodes/HtmlNode.tsx

@@ -3,6 +3,7 @@ import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { axSurfaceState, canvasTheme } from '../state/canvas-store';
 import type { CanvasNodeState } from '../types';
 import { nodeSurfaceUrl, surfaceContentHash } from './surface-url';
+import { RefreshingViewerFrame } from './McpAppNode';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
 import { useIframeContentHeight } from './use-iframe-content-height';
 import { useSurfaceFrame } from './use-surface-frame';
@@ -148,23 +149,21 @@ export function HtmlNode({
   // standalone tab. The whole html-node tier assumes arbitrary author code runs
   // inside this exact sandbox.
   return (
-    <iframe
-      ref={iframeRef}
-      class={presentation ? 'html-node-frame html-node-frame-presentation' : 'html-node-frame'}
+    <RefreshingViewerFrame
+      source={surfaceFrame}
+      iframeRef={iframeRef}
+      className={
+        presentation
+          ? 'html-node-frame html-node-frame-presentation'
+          : expanded
+            ? 'html-node-frame html-node-frame-expanded'
+            : 'html-node-frame'
+      }
       title={typeof node.data.title === 'string' ? node.data.title : 'HTML node'}
       sandbox="allow-scripts"
-      {...surfaceFrame}
+      allow=""
       tabIndex={autoFocus ? 0 : undefined}
       onLoad={handleFrameLoad}
-      style={{
-        width: '100%',
-        height: '100%',
-        minHeight: presentation ? 0 : expanded ? '70vh' : '300px',
-        border: 'none',
-        background: 'var(--c-bg)',
-        borderRadius: presentation ? 0 : '6px',
-        display: 'block',
-      }}
     />
   );
 }

package/src/client/nodes/McpAppNode.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef } from 'preact/hooks';
+import type { RefObject } from 'preact';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { canvasThemeScheme } from '../../shared/themes.js';
 import type { CanvasNodeState } from '../types';
@@ -54,6 +55,106 @@ export function isSameOriginFrameDocumentUrl(url: string, origin = window.locati
   }
 }
 
+type ViewerFrameSource = { src?: string; srcdoc?: string };
+
+/**
+ * Keep the last painted viewer in front while its replacement navigates. Viewer
+ * specs are immutable documents, so updates normally change `?v=` and reload the
+ * iframe; putting the new document in a hidden sibling avoids exposing Chromium's
+ * white navigation paint. Two animation frames after load gives the new document
+ * a composited paint before the old one is removed.
+ */
+export function RefreshingViewerFrame({
+  source,
+  iframeRef,
+  onLoad,
+  title,
+  className = 'mcp-app-frame',
+  sandbox = 'allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox',
+  allow = 'clipboard-read; clipboard-write',
+  tabIndex,
+}: {
+  source: ViewerFrameSource;
+  iframeRef: RefObject<HTMLIFrameElement>;
+  onLoad: () => void;
+  title: string;
+  className?: string;
+  sandbox?: string;
+  allow?: string;
+  tabIndex?: number;
+}) {
+  const sourceKey = source.src ?? source.srcdoc ?? '';
+  const [painted, setPainted] = useState({ key: sourceKey, source });
+  const [pending, setPending] = useState<{ key: string; source: ViewerFrameSource } | null>(null);
+  const promotionRef = useRef(0);
+
+  useEffect(() => {
+    promotionRef.current += 1;
+    if (!sourceKey || sourceKey === painted.key) {
+      setPending(null);
+      return;
+    }
+    if (!painted.key) {
+      setPainted({ key: sourceKey, source });
+      return;
+    }
+    setPending({ key: sourceKey, source });
+  }, [sourceKey, painted.key]);
+
+  useEffect(
+    () => () => {
+      promotionRef.current += 1;
+    },
+    [],
+  );
+
+  const frame = (entry: { key: string; source: ViewerFrameSource }, isPending: boolean) => (
+    <iframe
+      key={entry.key}
+      ref={isPending ? undefined : iframeRef}
+      {...entry.source}
+      class={className}
+      sandbox={sandbox}
+      allow={allow}
+      tabIndex={tabIndex}
+      loading={iframeMode.value === 'srcdoc' ? undefined : 'lazy'}
+      onLoad={(event) => {
+        if (!isPending) {
+          onLoad();
+          return;
+        }
+        const token = ++promotionRef.current;
+        const loadedFrame = event.currentTarget;
+        requestAnimationFrame(() =>
+          requestAnimationFrame(() => {
+            if (promotionRef.current !== token) return;
+            iframeRef.current = loadedFrame;
+            setPainted(entry);
+            setPending(null);
+            onLoad();
+          }),
+        );
+      }}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        visibility: isPending ? 'hidden' : 'visible',
+        background: 'var(--c-panel-soft)',
+      }}
+      title={title}
+    />
+  );
+
+  return (
+    <div class="mcp-app-frame-stack">
+      {frame(painted, false)}
+      {pending && frame(pending, true)}
+    </div>
+  );
+}
+
 export function McpAppNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   if (node.data.mode === 'ext-app') {
     return <ExtAppFrame node={node} expanded={expanded} />;
@@ -180,19 +281,10 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
       {/* Plain iframe-backed viewers stay on an opaque origin. Hosted ext-apps use
           the explicit postMessage bridge instead, which is the only path that needs
           app/host RPC and broader capabilities. */}
-      <iframe
-        ref={iframeRef}
-        {...surfaceFrame}
-        class="mcp-app-frame"
-        sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
-        allow="clipboard-read; clipboard-write"
-        // Lazy loading only helps src mode (defers the HTTP request for
-        // off-screen nodes). In srcdoc mode the content is already inline —
-        // lazy would just delay PAINTING until the node scrolls near the
-        // viewport, which reads as "blank until opened" (Amp portal report).
-        loading={iframeMode.value === 'srcdoc' ? undefined : 'lazy'}
+      <RefreshingViewerFrame
+        source={surfaceFrame}
+        iframeRef={iframeRef}
         onLoad={pushAxState}
-        style={{ flex: 1, minHeight: 0, width: '100%' }}
         title={`MCP App: ${sourceServer}`}
       />
     </div>

package/src/client/nodes/MermaidNode.tsx

@@ -21,7 +21,8 @@ export function MermaidNode({ node, expanded = false }: { node: CanvasNodeState;
   // Per-mount nonce for the content-height reporter (node grows to fit content).
   const frameToken = useMemo(() => `frame-${crypto.randomUUID()}`, []);
   const source = typeof node.data.content === 'string' ? node.data.content : '';
-  const v = useMemo(() => surfaceContentHash(source), [source]);
+  const fit = node.data.fit === 'none' ? 'none' : 'contain';
+  const v = useMemo(() => surfaceContentHash(`${fit}:${source}`), [source, fit]);
 
   // `theme` is intentionally excluded from the deps: live theme changes are
   // pushed via postMessage below (no reload), while `v` reloads the frame when
@@ -70,7 +71,7 @@ export function MermaidNode({ node, expanded = false }: { node: CanvasNodeState;
       style={{
         width: '100%',
         height: '100%',
-        minHeight: expanded ? '70vh' : '300px',
+        minHeight: expanded ? '70vh' : '0',
         border: 'none',
         background: 'var(--c-bg)',
         borderRadius: '6px',

package/src/client/state/intent-store.ts

@@ -83,9 +83,13 @@ function setPhase(id: string, phase: IntentPhase, ms: number, settledNodeId?: st
   next.set(id, { ...current, phase, ...(settledNodeId ? { settledNodeId } : {}) });
   writeIntents(next);
   clearExitTimer(id);
+  // The layer removes ghosts on animationend, after the browser actually paints
+  // the morph. A wall-clock deadline equal to the CSS duration can delete a
+  // ghost before its delayed first paint or transition completes on a busy tab.
+  // Retain a backstop for hidden tabs or disabled animations.
   exitTimers.set(
     id,
-    setTimeout(() => removeIntent(id), ms),
+    setTimeout(() => removeIntent(id), ms + 1500),
   );
 }
 

package/src/client/state/presentation.ts

@@ -0,0 +1,7 @@
+import { signal } from '@preact/signals';
+
+export const presenting = signal(false);
+export const recordingCamera = signal(false);
+export function ownsCamera(): boolean {
+  return presenting.value || recordingCamera.value;
+}

package/src/client/state/session-store.ts

@@ -386,6 +386,9 @@ export function applySessionReceipt(data: Record<string, unknown>): void {
   const counts = data.counts as Partial<SessionReceipt['counts']> | undefined;
   const snapshot = data.snapshot as SessionReceipt['snapshot'] | undefined;
   if (typeof data.label !== 'string' || typeof data.endedAt !== 'string') return;
+  // Keep history/timeline intact, but only interrupt for a changed top-level
+  // session. Quiet endings must not replace an existing useful receipt.
+  if (data.unchanged === true || typeof data.parentAgentId === 'string') return;
   sessionReceipt.value = {
     label: data.label,
     endedAt: data.endedAt,

package/src/client/state/sse-bridge.ts

@@ -1,4 +1,5 @@
 import { findOpenCanvasPosition } from '../utils/placement.js';
+import { ownsCamera } from './presentation';
 import { normalizeExtAppToolResult } from '../utils/ext-app-tool-result.js';
 import type { CanvasAnnotation, CanvasEdge, CanvasNodeState } from '../types';
 import {
@@ -945,6 +946,7 @@ function reconnectDelayMs(attempt: number): number {
 }
 
 function handleCanvasFocusNode(data: Record<string, unknown>): void {
+  if (ownsCamera()) return;
   const nodeId = data.nodeId as string;
   if (nodeId && nodes.value.has(nodeId)) {
     if (data.noPan === true) {
@@ -956,6 +958,7 @@ function handleCanvasFocusNode(data: Record<string, unknown>): void {
 }
 
 function handleCanvasViewportUpdate(data: Record<string, unknown>): void {
+  if (ownsCamera()) return;
   const viewport = data.viewport as Record<string, unknown> | undefined;
   if (!viewport) return;
   const x = typeof viewport.x === 'number' ? viewport.x : 0;