pmx-canvas 0.5.1 → 0.6.2

package/src/client/canvas/TopBar.tsx

@@ -31,59 +31,99 @@ import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js
  * session is attached — the quiet board shows nothing here until phase 5
  * lands the "Start agent session" affordance.
  */
+const AGENT_CHIP_LIMIT = 3;
+const AGENT_PHASE_RANK: Record<string, number> = { 'waiting-approval': 0, thinking: 1, tooling: 2, idle: 3 };
+
 function AgentChip() {
   // Every attached session gets its chip — with several agents on the board,
-  // showing only the first hid the rest from the top bar entirely.
+  // showing only the first hid the rest from the top bar entirely. But one
+  // chip PER agent floods the bar on a many-agent board (user feedback,
+  // 0.5.1 cycle: 16 unshrinkable chips shoved the zoom cluster out of the
+  // 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 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);
+  const phaseCounts = sessions.reduce<Record<string, number>>((acc, s) => {
+    acc[s.phase] = (acc[s.phase] ?? 0) + 1;
+    return acc;
+  }, {});
+  const breakdown = [
+    phaseCounts['waiting-approval'] && `${phaseCounts['waiting-approval']} waiting on approval`,
+    phaseCounts.thinking && `${phaseCounts.thinking} thinking`,
+    phaseCounts.tooling && `${phaseCounts.tooling} running tools`,
+    phaseCounts.idle && `${phaseCounts.idle} idle`,
+  ]
+    .filter(Boolean)
+    .join(', ');
   return (
     <>
-      {sessions.map((session) => {
-        // Fleet roll-up: workers declaring this session as their parent count
-        // into its chip instead of growing the bar one chip per worker.
-        const workers = agentPresences.value.filter(
-          (presence) =>
-            presence.parentAgentId != null &&
-            (presence.parentAgentId === session.sessionId || presence.parentAgentId === session.source),
-        ).length;
-        return (
-          <BarHint
-            key={session.sessionId}
-            label={`Agent session — ${session.label}`}
-            tapToOpen
-            body="What this attached agent is doing right now: idle, thinking, running a tool, or waiting on your approval. Steer it from the composer below."
-          >
-            <span
-              class={`agent-chip phase-${session.phase}`}
-              data-phase={session.phase}
-              style={{ '--identity-color': `hsl(${agentIdentityHue(session.sessionId)} 65% 62%)` }}
+      {/* The chips live in their own clipping flex wrapper: each chip keeps
+          its natural readable width and the WRAPPER absorbs the squeeze,
+          clipping at its edge — no per-child shrink cascade, and chip
+          content can never paint over the census, meter, or zoom cluster. */}
+      <span class="agent-chips">
+        {visible.map((session) => {
+          // Fleet roll-up: workers declaring this session as their parent count
+          // into its chip instead of growing the bar one chip per worker.
+          const workers = agentPresences.value.filter(
+            (presence) =>
+              presence.parentAgentId != null &&
+              (presence.parentAgentId === session.sessionId || presence.parentAgentId === session.source),
+          ).length;
+          return (
+            <BarHint
+              key={session.sessionId}
+              label={`Agent session — ${session.label}`}
+              tapToOpen
+              body="What this attached agent is doing right now: idle, thinking, running a tool, or waiting on your approval. Steer it from the composer below."
             >
-              <span class="agent-chip-dot" aria-hidden="true" />
-              <span class="agent-chip-label">{agentPhaseLabel(session)}</span>
-              <span class="agent-chip-who hud-collapsible-text">{session.label}</span>
-              {workers > 0 && (
-                <span class="agent-chip-workers">
-                  +{workers} worker{workers === 1 ? '' : 's'}
-                </span>
-              )}
-              <button
-                type="button"
-                class="agent-chip-end"
-                aria-label={`End ${session.label} session`}
-                title={`End ${session.label}'s session`}
-                onClick={(e) => {
-                  // The chip sits inside a tap-to-open hint — ending a session
-                  // must not also open it.
-                  e.stopPropagation();
-                  void endSession({ source: session.source, agentId: session.agentId });
-                }}
+              <span
+                class={`agent-chip phase-${session.phase}`}
+                data-phase={session.phase}
+                style={{ '--identity-color': `hsl(${agentIdentityHue(session.sessionId)} 65% 62%)` }}
               >
-                ×
-              </button>
-            </span>
-          </BarHint>
-        );
-      })}
+                <span class="agent-chip-dot" aria-hidden="true" />
+                <span class="agent-chip-label">{agentPhaseLabel(session)}</span>
+                <span class="agent-chip-who hud-collapsible-text">{session.label}</span>
+                {workers > 0 && (
+                  <span class="agent-chip-workers">
+                    +{workers} worker{workers === 1 ? '' : 's'}
+                  </span>
+                )}
+                <button
+                  type="button"
+                  class="agent-chip-end"
+                  aria-label={`End ${session.label} session`}
+                  title={`End ${session.label}'s session`}
+                  onClick={(e) => {
+                    // The chip sits inside a tap-to-open hint — ending a session
+                    // must not also open it.
+                    e.stopPropagation();
+                    void endSession({ source: session.source, agentId: session.agentId });
+                  }}
+                >
+                  ×
+                </button>
+              </span>
+            </BarHint>
+          );
+        })}
+      </span>
+      {overflow.length > 0 && (
+        <BarHint
+          label={`${sessions.length} agent sessions attached`}
+          tapToOpen
+          body={`${sessions.length} agents on this board — ${breakdown}. The most active wear their own chips; the rest are here, and idle agents' cursors leave the board until they work again.`}
+        >
+          <span class="agent-chip agent-chip-more" data-testid="agent-chip-more">
+            +{overflow.length} · {sessions.length} agents
+          </span>
+        </BarHint>
+      )}
     </>
   );
 }

package/src/client/canvas/use-pan-zoom.ts

@@ -22,7 +22,8 @@ interface PanZoomOptions {
  * Hook that wires up pan/zoom interactions on a container element.
  * - Wheel + Ctrl/Cmd: zoom centered on pointer
  * - Wheel without modifier: pan
- * - Pointer drag on background: pan
+ * - Right or middle pointer drag: pan from anywhere
+ * - Pointer drag on background in pan mode: pan
  * - Pinch (touch): zoom
  */
 export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disabled = false }: PanZoomOptions) {
@@ -103,18 +104,27 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
       if (disabled) return;
       const container = containerRef.current;
       if (!container) return;
-      // Middle-drag pans from anywhere, any tool — standard canvas UX.
-      if (e.button === 1) {
+      // Right- and middle-drag pan from anywhere, any tool. Node handlers
+      // deliberately leave non-left buttons alone so this bubbles here.
+      if (e.button === 1 || e.button === 2) {
         e.preventDefault();
       } else if (isPanModeActive()) {
         // Pan tool / held Space: the world layer is pointer-inert (CSS), so
         // the event target is the container even over nodes.
         if (e.target !== container) return;
+        // A pan gesture must not double as the browser's drag-select: without
+        // preventDefault the sweep still extends a text selection through the
+        // pointer-inert world, and a later pointerdown inside that selection
+        // starts a native text drag the canvas mis-reads as a URL drop —
+        // panning from a node minted webpage nodes from card text (0.5.1 Amp
+        // finding D).
+        e.preventDefault();
       } else {
         // Select tool: background drag belongs to the lasso (CanvasViewport).
         return;
       }
       isPanning.current = true;
+      document.documentElement.classList.add('is-canvas-panning');
       lastPointer.current = { x: e.clientX, y: e.clientY };
       container.setPointerCapture(e.pointerId);
     },
@@ -140,6 +150,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
       onViewportCommit(viewport.value);
     }
     isPanning.current = false;
+    document.documentElement.classList.remove('is-canvas-panning');
   }, [onViewportCommit, viewport]);
 
   // Touch pinch
@@ -200,6 +211,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
     el.addEventListener('pointermove', handlePointerMove);
     el.addEventListener('pointerup', handlePointerUp);
     el.addEventListener('pointercancel', handlePointerUp);
+    el.addEventListener('lostpointercapture', handlePointerUp);
     el.addEventListener('touchmove', handleTouchMove, { passive: false });
     el.addEventListener('touchend', handleTouchEnd);
 
@@ -212,10 +224,18 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
       el.removeEventListener('pointermove', handlePointerMove);
       el.removeEventListener('pointerup', handlePointerUp);
       el.removeEventListener('pointercancel', handlePointerUp);
+      el.removeEventListener('lostpointercapture', handlePointerUp);
       el.removeEventListener('touchmove', handleTouchMove);
       el.removeEventListener('touchend', handleTouchEnd);
     };
   }, [handleWheel, handlePointerDown, handlePointerMove, handlePointerUp, handleTouchMove, handleTouchEnd]);
 
+  useEffect(
+    () => () => {
+      document.documentElement.classList.remove('is-canvas-panning');
+    },
+    [],
+  );
+
   return containerRef;
 }

package/src/client/nodes/ExtAppFrame.tsx

@@ -137,7 +137,7 @@ export function extAppRecoveryLog(nodeId: string, event: string): void {
 // panel without devtools access — the Copilot WKWebView, exactly where the
 // black tiles happen — still yields an actionable trace: agents read it back
 // via GET /api/canvas/debug/ext-app-recovery (0.3.2 report Finding N).
-let extAppReportQueue: Array<{ t: number; nodeId: string; event: string; visibility?: string }> = [];
+const extAppReportQueue: Array<{ t: number; nodeId: string; event: string; visibility?: string }> = [];
 let extAppReportTimer: ReturnType<typeof setTimeout> | null = null;
 function queueExtAppRecoveryReport(entry: { t: number; nodeId: string; event: string }): void {
   extAppReportQueue.push({
@@ -287,28 +287,72 @@ export function buildExtAppBootBeaconScript(frameToken: string, nodeId: string):
   // rendering pipeline is actually running — a frame whose layer WebKit never
   // composites stays silent, and that silence drives the parent's recovery
   // ladder. One unsolicited tick at boot, then on-demand answers to probes.
-  // Content oracle (Finding N, 0.5.0 reopen): a double rAF fires even while
-  // WKWebKit composites nothing — the tick alone was a false green. The tick
-  // now carries a verdict: does this document actually CONTAIN rendered
-  // content (a laid-out canvas/svg, or real text)? The parent only accepts
-  // paint-ok when it does.
-  function contentReady() {
+  // Content oracle v2 (Finding N, 0.5.1 reopen): a LAID-OUT canvas passed the
+  // 0.5.1 oracle even when nothing was ever drawn into it — Excalidraw mounts
+  // its canvas element the moment React renders, so blank cream tiles read
+  // paint-ok (content-verified), the ladder concluded success, and Retry
+  // never engaged (Copilot 0.5.1 report: A/C/E cream with a green trail).
+  // The oracle now samples the canvas's PIXELS: a readable main drawing
+  // surface with uniform pixels is not content, whatever shell chrome or
+  // boilerplate text the document laid out around it.
+  function canvasInk(el) {
     try {
-      var els = document.querySelectorAll('canvas, svg');
-      for (var i = 0; i < els.length; i++) {
-        var r = els[i].getBoundingClientRect();
-        if (r.width > 8 && r.height > 8) return true;
+      if (!el.width || !el.height) return 'blank';
+      var sw = Math.min(96, el.width);
+      var sh = Math.min(64, el.height);
+      var probe = document.createElement('canvas');
+      probe.width = sw;
+      probe.height = sh;
+      var ctx = probe.getContext('2d', { willReadFrequently: true });
+      if (!ctx) return 'unknown';
+      ctx.drawImage(el, 0, 0, sw, sh);
+      var d = ctx.getImageData(0, 0, sw, sh).data;
+      var r = d[0], g = d[1], b = d[2], a = d[3];
+      for (var i = 4; i < d.length; i += 4) {
+        if (Math.abs(d[i] - r) > 3 || Math.abs(d[i + 1] - g) > 3 || Math.abs(d[i + 2] - b) > 3 || Math.abs(d[i + 3] - a) > 3) return 'ink';
+      }
+      return 'blank';
+    } catch (e) {
+      return 'unknown'; // tainted or WebGL-unreadable: pixels cannot be judged
+    }
+  }
+  function contentVerdict() {
+    try {
+      var canvases = document.querySelectorAll('canvas');
+      var blankMain = false;
+      var unreadable = false;
+      for (var i = 0; i < canvases.length; i++) {
+        var r = canvases[i].getBoundingClientRect();
+        if (r.width <= 8 || r.height <= 8) continue;
+        var ink = canvasInk(canvases[i]);
+        if (ink === 'ink') return { content: true, detail: 'ink' };
+        if (ink === 'unknown') unreadable = true;
+        else if (r.width >= 160 && r.height >= 120) blankMain = true;
+      }
+      // A readable, never-painted main surface vetoes everything below:
+      // toolbar icons and shell text around a blank drawing surface is
+      // exactly the false green the human reports as an empty cream tile.
+      if (blankMain) return { content: false, detail: 'blank-canvas' };
+      if (unreadable) return { content: true, detail: 'canvas-unreadable' };
+      var svgs = document.querySelectorAll('svg');
+      for (var j = 0; j < svgs.length; j++) {
+        var sr = svgs[j].getBoundingClientRect();
+        if (sr.width > 8 && sr.height > 8 && svgs[j].querySelector('path, rect, circle, ellipse, line, polyline, polygon, text, image, use')) {
+          return { content: true, detail: 'svg' };
+        }
       }
       var body = document.body;
-      return !!(body && body.innerText && body.innerText.trim().length > 0);
+      if (body && body.innerText && body.innerText.trim().length > 0) return { content: true, detail: 'text' };
+      return { content: false, detail: 'empty' };
     } catch (e) {
-      return false;
+      return { content: false, detail: 'probe-error' };
     }
   }
   function sendPaintTick() {
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
-        window.parent.postMessage({ source: '${EXT_APP_BOOT_BEACON_SOURCE}', token: TOKEN, nodeId: NODE_ID, kind: 'paint-tick', content: contentReady() }, '*');
+        var v = contentVerdict();
+        window.parent.postMessage({ source: '${EXT_APP_BOOT_BEACON_SOURCE}', token: TOKEN, nodeId: NODE_ID, kind: 'paint-tick', content: v.content, detail: v.detail }, '*');
       });
     });
   }
@@ -388,8 +432,11 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   const themeUnsubRef = useRef<(() => void) | null>(null);
   const webkitRemountAttemptsRef = useRef(0);
   // Paint oracle (Finding N): resolvers waiting for the frame's next paint-tick,
-  // each handed the tick's content verdict.
-  const paintTickWaitersRef = useRef<Array<(content: boolean) => void>>([]);
+  // each handed the tick's content verdict + the oracle's reason for it.
+  const paintTickWaitersRef = useRef<Array<(tick: { content: boolean; detail: string }) => void>>([]);
+  // Last tick's oracle detail (ink / blank-canvas / svg / text / …) for the
+  // recovery trail — the label is the diagnostic the field reports read.
+  const lastPaintDetailRef = useRef<string>('');
   // Genuine boot signal: set ONLY when the app completes the ui/initialize
   // handshake (bridge.oninitialized) — NOT by the 1200ms bootstrap fallback,
   // which flips status via notifications that resolve even into a dead iframe.
@@ -471,8 +518,12 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         return;
       appScriptsRanRef.current = true;
       if (data.kind === 'paint-tick') {
-        const content = (data as { content?: unknown }).content === true;
-        for (const waiter of paintTickWaitersRef.current.splice(0)) waiter(content);
+        const tickData = data as { content?: unknown; detail?: unknown };
+        const tick = {
+          content: tickData.content === true,
+          detail: typeof tickData.detail === 'string' ? tickData.detail : '',
+        };
+        for (const waiter of paintTickWaitersRef.current.splice(0)) waiter(tick);
       }
     }
     window.addEventListener('message', onBootBeacon);
@@ -590,13 +641,14 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         settled = true;
         resolve('timeout');
       }, PAINT_TICK_TIMEOUT_MS);
-      paintTickWaitersRef.current.push((content) => {
+      paintTickWaitersRef.current.push((tick) => {
         if (settled) return;
         settled = true;
         window.clearTimeout(timer);
+        lastPaintDetailRef.current = tick.detail;
         // A tick without content is NOT paint-ok: the rAF pipeline runs while
         // the document is empty cream / never composited (Finding N reopen).
-        resolve(content ? 'content-verified' : 'tick-no-content');
+        resolve(tick.content ? 'content-verified' : 'tick-no-content');
       });
       contentWindow.postMessage({ source: EXT_APP_PAINT_PROBE_SOURCE, token: axToken }, '*');
     });
@@ -672,10 +724,14 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   // A paint-ok collected while the document claims hidden proves only that the
   // app's rAF pipeline is alive — NOT that anything composited (Finding N,
   // 0.4.7). Say so in the trail instead of recording an unqualified success.
-  const paintOkLabel = (suffix = ''): string =>
-    typeof document !== 'undefined' && document.visibilityState === 'hidden'
-      ? `paint-ok (content-verified)${suffix} (host hidden)`
-      : `paint-ok (content-verified)${suffix}`;
+  // The [detail] bracket names WHAT the oracle verified (ink / svg / text) so
+  // field reports can distinguish pixel-verified greens from weaker ones.
+  const paintOkLabel = (suffix = ''): string => {
+    const detail = lastPaintDetailRef.current ? ` [${lastPaintDetailRef.current}]` : '';
+    return typeof document !== 'undefined' && document.visibilityState === 'hidden'
+      ? `paint-ok (content-verified)${detail}${suffix} (host hidden)`
+      : `paint-ok (content-verified)${detail}${suffix}`;
+  };
 
   const runPaintLadder = async (): Promise<void> => {
     // Runs for the EXPANDED instance too (Finding N reopen: expanded C was a
@@ -692,7 +748,9 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     }
     extAppRecoveryLog(
       nodeId,
-      verdict === 'tick-no-content' ? 'paint-fail (tick without content)' : 'paint-fail (no tick)',
+      verdict === 'tick-no-content'
+        ? `paint-fail (tick without content: ${lastPaintDetailRef.current || 'unknown'})`
+        : 'paint-fail (no tick)',
     );
     await runSoftExpandCycle();
     verdict = await probePaint();
@@ -777,7 +835,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     () => () => {
       unmountedRef.current = true;
       for (const waiter of bootWaitersRef.current.splice(0)) waiter();
-      for (const waiter of paintTickWaitersRef.current.splice(0)) waiter(false);
+      for (const waiter of paintTickWaitersRef.current.splice(0)) waiter({ content: false, detail: 'unmounted' });
     },
     [],
   );
@@ -1096,7 +1154,12 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
             };
             if (typeof navigator !== 'undefined' && isWebKitOnlyHost(navigator.userAgent)) {
               void awaitContentVerified(4_000).then((verified) => {
-                extAppRecoveryLog(nodeId, verified ? 'settled (content-verified)' : 'settled (content-timeout)');
+                extAppRecoveryLog(
+                  nodeId,
+                  verified
+                    ? 'settled (content-verified)'
+                    : `settled (content-timeout${lastPaintDetailRef.current ? `: ${lastPaintDetailRef.current}` : ''})`,
+                );
                 releaseQueue();
               });
             } else {
@@ -1404,7 +1467,13 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
               minHeight: 0,
               border: 'none',
               background: 'var(--c-panel)',
-              pointerEvents: isExpanded && status !== 'loading' ? 'auto' : 'none',
+              // Keep the expanded frame in Chromium's pointer hit-test tree from
+              // its first paint. Toggling none → auto when boot completes can
+              // leave the compositor routing the first click to the parent even
+              // though DOM hit testing and Playwright both resolve the button.
+              // The loading sibling is non-interactive; inline frames remain
+              // guarded by the preview catcher below.
+              pointerEvents: isExpanded ? 'auto' : 'none',
             }}
             title={`Ext App: ${toolName}`}
           />

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

@@ -9,7 +9,7 @@ import {
   type ViewportState,
 } from '../types';
 import { computeAutoArrange } from '../../shared/auto-arrange';
-import { canvasAreaCenter, canvasFitInsets } from '../canvas/canvas-area';
+import { canvasArea, canvasAreaCenter, canvasFitInsets } from '../canvas/canvas-area';
 import { pushCanvasUpdate, requestBestEffort, requestOk, updateViewportFromClient } from './intent-bridge';
 
 function logCanvasStoreError(action: string, error: unknown): void {
@@ -833,14 +833,26 @@ export function focusNode(id: string, options: { recordHistory?: boolean } = {})
   const node = nodes.value.get(id);
   if (!node) return;
   const v = viewport.value;
+  // Same screen-space frame as fitAll: viewport x/y are CONTAINER-relative
+  // (screen = world*scale + viewport inside the canvas region), so the centre
+  // is built from the region's dimensions + chrome insets — the old
+  // window-coordinate canvasAreaCenter() over-shifted focus by the region
+  // origin, and centring without insets parked tall nodes (the 960×600
+  // mcp-app open) under the command bar (0.5.1 Amp finding C).
+  const area = canvasArea();
+  const insets = canvasFitInsets();
+  const usableW = Math.max(80, area.width - insets.left - insets.right);
+  const usableH = Math.max(80, area.height - insets.top - insets.bottom);
+  // Shrink (never grow) so the whole node — resize corner included — fits the
+  // usable rect clear of the floating chrome.
+  const scale = Math.min(v.scale, usableW / node.size.width, usableH / node.size.height);
   const cx = node.position.x + node.size.width / 2;
   const cy = node.position.y + node.size.height / 2;
-  const centre = canvasAreaCenter();
   animateViewport(
     {
-      x: centre.x - cx * v.scale,
-      y: centre.y - cy * v.scale,
-      scale: v.scale,
+      x: insets.left + usableW / 2 - cx * scale,
+      y: insets.top + usableH / 2 - cy * scale,
+      scale,
     },
     300,
     options,

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

@@ -922,7 +922,9 @@ function handleCanvasLayoutUpdate(data: Record<string, unknown>): void {
       }
     : undefined;
 
-  cancelViewportAnimation();
+  // Routine node/layout broadcasts do not replace the camera, so must not
+  // interrupt a focus animation either (view.focus also emits a layout).
+  if (shouldApplyViewport) cancelViewportAnimation();
   applyServerCanvasLayout(
     {
       ...(nextViewport ? { viewport: nextViewport } : {}),