pmx-canvas 0.5.0 → 0.6.1

package/src/cli/commands/pump.ts

@@ -16,7 +16,15 @@
  * takes the message from stdin instead. See `renderExecTemplate`.
  */
 import { spawn } from 'node:child_process';
-import { cmd, getBaseUrl, getStringFlag, invokeOperation, parseFlags, requireFlag } from '../shared.js';
+import {
+  cmd,
+  getBaseUrl,
+  getStringFlag,
+  invokeOperation,
+  parseFlags,
+  requireFlag,
+  showCommandHelp,
+} from '../shared.js';
 
 interface PendingSteer {
   id: string;
@@ -137,7 +145,10 @@ cmd(
     `pmx-canvas pump --consumer testbot --exec 'cat' --once`,
   ],
   async (args) => {
-    const { flags } = parseFlags(args, { boolFlags: ['once'] });
+    const { flags } = parseFlags(args, { boolFlags: ['once', 'help', 'h'] });
+    // Help before required-flag validation — `pump --help` died on
+    // "Missing required flag: --consumer" (0.5.0 Codex finding W).
+    if (flags.help || flags.h) return showCommandHelp('pump');
     const consumer = requireFlag(
       flags,
       'consumer',

package/src/cli/index.ts

@@ -314,6 +314,7 @@ Agent CLI (works against running server):
   code-graph                          File dependencies
   spatial                             Spatial analysis
   watch                               Semantic watch stream
+  pump                                Reactive steering loop for CLI agents (Amp, Codex CLI)
   smoke                               Check that a running canvas works here
   skills sync                         Sync installed copies of the bundled skills
   copilot install-extension           Install the GitHub Copilot app extension

package/src/client/canvas/CanvasViewport.tsx

@@ -704,6 +704,16 @@ export function CanvasViewport({
     [annotationMode, containerRef, onCanvasContextMenu],
   );
 
+  // Internal native drags (selected node text, links inside rendered
+  // markdown) re-enter this same container as drops and mint webpage nodes
+  // from card text (0.5.1 Amp finding D). Kill them at the source — external
+  // drags never fire a local dragstart, so file/URL import is untouched.
+  // Editable elements keep their native drag (text drag inside an editor).
+  const handleDragStart = useCallback((e: DragEvent) => {
+    if (isEditableElement(e.target instanceof Element ? e.target : null)) return;
+    e.preventDefault();
+  }, []);
+
   // ── Drag-and-drop files from filesystem ──
   const handleDragEnter = useCallback((e: DragEvent) => {
     e.preventDefault();
@@ -824,6 +834,7 @@ export function CanvasViewport({
       onPointerUp={handlePointerUp}
       onContextMenu={handleContextMenu}
       onDblClick={handleDblClick}
+      onDragStart={handleDragStart}
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}

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/canvas-area.ts

@@ -39,3 +39,36 @@ export function canvasAreaCenter(): { x: number; y: number } {
   const rect = canvasArea();
   return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
 }
+
+export interface CanvasFitInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+/**
+ * Screen-space insets Fit must reserve for the floating chrome that overlays
+ * the canvas region: the bottom command bar (whose pinned-chip row grows it)
+ * and the bottom-right minimap. Measured from the live elements — fit's old
+ * world-space padding shrank with the fit zoom and parked nodes underneath
+ * both (0.5.0 Amp report, finding A; architecture rule 9's trap).
+ */
+export function canvasFitInsets(): CanvasFitInsets {
+  let bottom = 16;
+  try {
+    const area = canvasArea();
+    const areaBottom = area.top + area.height;
+    for (const selector of ['.command-bar', '.minimap']) {
+      const el = document.querySelector(selector);
+      if (!(el instanceof HTMLElement) || !el.isConnected) continue;
+      const rect = el.getBoundingClientRect();
+      if (rect.height <= 0) continue;
+      const overlap = areaBottom - rect.top;
+      if (overlap > 0) bottom = Math.max(bottom, overlap + 12);
+    }
+  } catch {
+    // Chromeless embeds and unit DOMs: the defaults below are the contract.
+  }
+  return { top: 16, right: 16, bottom, left: 16 };
+}

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

@@ -110,6 +110,13 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
         // 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;

package/src/client/nodes/ExtAppFrame.tsx

@@ -30,6 +30,8 @@ type McpUiTheme = 'light' | 'dark';
 type ExtAppBridgeNotifications = Pick<AppBridge, 'sendToolInput' | 'sendToolResult'>;
 type DisplayMode = 'inline' | 'fullscreen' | 'pip';
 type ExtAppFrameStatus = 'loading' | 'ready' | 'done';
+/** Paint probe outcome: only a content-carrying tick counts as painted. */
+export type PaintProbeVerdict = 'content-verified' | 'tick-no-content' | 'timeout';
 
 interface ExtAppHostDimensionsTarget {
   clientWidth?: number;
@@ -135,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({
@@ -285,10 +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 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 {
+      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;
+      if (body && body.innerText && body.innerText.trim().length > 0) return { content: true, detail: 'text' };
+      return { content: false, detail: 'empty' };
+    } catch (e) {
+      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' }, '*');
+        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 }, '*');
       });
     });
   }
@@ -367,8 +431,12 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   const bridgeReadyRef = useRef(false);
   const themeUnsubRef = useRef<(() => void) | null>(null);
   const webkitRemountAttemptsRef = useRef(0);
-  // Paint oracle (Finding N): resolvers waiting for the frame's next paint-tick.
-  const paintTickWaitersRef = useRef<Array<() => void>>([]);
+  // Paint oracle (Finding N): resolvers waiting for the frame's next paint-tick,
+  // 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.
@@ -450,7 +518,12 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
         return;
       appScriptsRanRef.current = true;
       if (data.kind === 'paint-tick') {
-        for (const waiter of paintTickWaitersRef.current.splice(0)) waiter();
+        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);
@@ -503,7 +576,7 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
     enqueueWebkitRemount({
       remount: () => {
         remountQueuedRef.current = false;
-        if (unmountedRef.current || expandedNodeId.value === nodeId) {
+        if (unmountedRef.current || (!expanded && expandedNodeId.value === nodeId)) {
           extAppRecoveryLog(nodeId, 'remount-skipped');
           // The ladder left paintPending set on the promise that this remount
           // would re-enter it via the new frame's settle path. A skip means
@@ -555,28 +628,43 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   // again → serialized remount (bounded by the shared attempt cap) → explicit
   // Retry affordance. Never silent eternal black. WebKit inline frames only.
   const PAINT_TICK_TIMEOUT_MS = 1500;
-  const probePaint = (): Promise<boolean> =>
+  const probePaint = (): Promise<PaintProbeVerdict> =>
     new Promise((resolve) => {
       const contentWindow = iframeRef.current?.contentWindow;
       if (!contentWindow || unmountedRef.current) {
-        resolve(false);
+        resolve('timeout');
         return;
       }
       let settled = false;
       const timer = window.setTimeout(() => {
         if (settled) return;
         settled = true;
-        resolve(false);
+        resolve('timeout');
       }, PAINT_TICK_TIMEOUT_MS);
-      paintTickWaitersRef.current.push(() => {
+      paintTickWaitersRef.current.push((tick) => {
         if (settled) return;
         settled = true;
         window.clearTimeout(timer);
-        resolve(true);
+        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(tick.content ? 'content-verified' : 'tick-no-content');
       });
       contentWindow.postMessage({ source: EXT_APP_PAINT_PROBE_SOURCE, token: axToken }, '*');
     });
 
+  // Bounded wait for the frame's content oracle to turn green — the mount
+  // queue's release gate (guidance: never green-light the NEXT app while the
+  // previous document is still contentless; D-then-E was the repro).
+  const awaitContentVerified = async (maxMs: number): Promise<boolean> => {
+    const deadline = Date.now() + maxMs;
+    while (Date.now() < deadline && !unmountedRef.current) {
+      if ((await probePaint()) === 'content-verified') return true;
+      await new Promise((resolve) => window.setTimeout(resolve, 400));
+    }
+    return false;
+  };
+
   // Force a real layer reallocation: grow the iframe's box meaningfully for two
   // frames, then restore. Invisible under the paint-pending overlay.
   const runSoftExpandCycle = (): Promise<void> =>
@@ -636,31 +724,52 @@ 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${suffix} (unverified: host hidden)`
-      : `paint-ok${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> => {
-    if (expanded) return;
+    // Runs for the EXPANDED instance too (Finding N reopen: expanded C was a
+    // black frame with no recovery — the ladder used to early-return here).
     if (typeof navigator === 'undefined' || typeof window === 'undefined') return;
     if (!isWebKitOnlyHost(navigator.userAgent)) return;
     setPaintPending(true);
-    if (await probePaint()) {
+    let verdict = await probePaint();
+    if (verdict === 'content-verified') {
       extAppRecoveryLog(nodeId, paintOkLabel());
       setPaintPending(false);
       maybeAssumeVisibleRearm();
       return;
     }
-    extAppRecoveryLog(nodeId, 'paint-fail');
+    extAppRecoveryLog(
+      nodeId,
+      verdict === 'tick-no-content'
+        ? `paint-fail (tick without content: ${lastPaintDetailRef.current || 'unknown'})`
+        : 'paint-fail (no tick)',
+    );
     await runSoftExpandCycle();
-    if (await probePaint()) {
+    verdict = await probePaint();
+    if (verdict === 'content-verified') {
       extAppRecoveryLog(nodeId, paintOkLabel(' (after soft-expand)'));
       setPaintPending(false);
       maybeAssumeVisibleRearm();
       return;
     }
     if (unmountedRef.current) return;
+    // A contentless-but-alive app may still be DRAWING its scene: give the
+    // oracle a bounded settle before burning a remount attempt on it.
+    if (verdict === 'tick-no-content' && (await awaitContentVerified(3_000))) {
+      extAppRecoveryLog(nodeId, paintOkLabel(' (after content wait)'));
+      setPaintPending(false);
+      maybeAssumeVisibleRearm();
+      return;
+    }
+    if (unmountedRef.current) return;
     // The remounted frame re-enters this ladder from its own settle path.
     if (!scheduleWebkitRemount('paint-fail')) {
       extAppRecoveryLog(nodeId, 'recovery-exhausted');
@@ -709,7 +818,8 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   // serialized queue (bounded by the shared attempt cap).
   const WEBKIT_BOOT_WATCHDOG_MS = 6000;
   useEffect(() => {
-    if (expanded) return;
+    // Covers the expanded instance too — its fresh iframe was black with no
+    // recovery at all (Finding N reopen, expanded C).
     if (typeof navigator === 'undefined' || typeof window === 'undefined') return;
     if (!isWebKitOnlyHost(navigator.userAgent)) return;
     if (!iframeDocument.ready || !mountGranted) return;
@@ -725,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();
+      for (const waiter of paintTickWaitersRef.current.splice(0)) waiter({ content: false, detail: 'unmounted' });
     },
     [],
   );
@@ -1035,8 +1145,27 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
             // its own settle pause covering the draw) only from this genuine path;
             // the bootstrap fallback never releases it (a dead iframe must run the
             // queue's bounded timeout instead of green-lighting the next remount).
-            extAppRecoveryLog(nodeId, 'settled');
-            for (const waiter of bootWaitersRef.current.splice(0)) waiter();
+            // Release the mount queue only once this document's CONTENT
+            // oracle is green (bounded): a settled-but-empty app must not
+            // green-light the next mount slot (D-then-E repro, Finding N
+            // reopen). WebKit only — elsewhere the oracle race doesn't exist.
+            const releaseQueue = () => {
+              for (const waiter of bootWaitersRef.current.splice(0)) waiter();
+            };
+            if (typeof navigator !== 'undefined' && isWebKitOnlyHost(navigator.userAgent)) {
+              void awaitContentVerified(4_000).then((verified) => {
+                extAppRecoveryLog(
+                  nodeId,
+                  verified
+                    ? 'settled (content-verified)'
+                    : `settled (content-timeout${lastPaintDetailRef.current ? `: ${lastPaintDetailRef.current}` : ''})`,
+                );
+                releaseQueue();
+              });
+            } else {
+              extAppRecoveryLog(nodeId, 'settled');
+              releaseQueue();
+            }
             nudgeHostContextAfterLayout();
             schedulePaintLadder();
           })

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

@@ -9,7 +9,7 @@ import {
   type ViewportState,
 } from '../types';
 import { computeAutoArrange } from '../../shared/auto-arrange';
-import { canvasAreaCenter } 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 {
@@ -808,16 +808,22 @@ export function fitAll(containerW: number, containerH: number): void {
     maxY = Math.max(maxY, n.position.y + n.size.height);
   }
 
-  const PAD = 60;
-  const worldW = maxX - minX + PAD * 2;
-  const worldH = maxY - minY + PAD * 2;
-  const scale = Math.min(1, Math.min(containerW / worldW, containerH / worldH));
+  // Screen-space fit (architecture rule 9): the margins that must clear the
+  // floating chrome are SCREEN constants. The old world-space PAD shrank with
+  // the fit zoom, parking fitted nodes under the command bar and minimap
+  // (0.5.0 Amp report, finding A).
+  const insets = canvasFitInsets();
+  const usableW = Math.max(80, containerW - insets.left - insets.right);
+  const usableH = Math.max(80, containerH - insets.top - insets.bottom);
+  const worldW = Math.max(1, maxX - minX);
+  const worldH = Math.max(1, maxY - minY);
+  const scale = Math.min(1, Math.min(usableW / worldW, usableH / worldH));
   const cx = (minX + maxX) / 2;
   const cy = (minY + maxY) / 2;
 
   animateViewport({
-    x: containerW / 2 - cx * scale,
-    y: containerH / 2 - cy * scale,
+    x: insets.left + usableW / 2 - cx * scale,
+    y: insets.top + usableH / 2 - cy * scale,
     scale,
   });
 }
@@ -827,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,