pmx-canvas 0.8.0 → 0.9.0

package/src/client/canvas/TopBar.tsx

@@ -1,10 +1,12 @@
 import { exportDialogOpen } from './ExportDialog';
-import { activeBoardId } from '../state/boards-store';
+import { activeBoard, activeBoardId, browsingMemory } from '../state/boards-store';
 import { BoardSwitcher } from './BoardSwitcher';
+import { BoardPinButton } from './BoardPinButton';
+import { ContextChip } from './ContextChip';
 import { isHostedWorkbench, workbenchFetch } from '../state/workbench-transport';
 import type { ComponentChildren } from 'preact';
-import { presenting } from '../state/presentation';
-import { useEffect, useState } from 'preact/hooks';
+import { startPresentation } from '../state/presentation';
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import { IconFitAll, IconZoomIn, IconZoomOut, IconClose } from '../icons';
 import {
   animateViewport,
@@ -20,14 +22,22 @@ import {
 } from '../state/canvas-store';
 import { modChord } from '../utils/platform';
 import { canvasArea } from './canvas-area';
-import { BarHint } from './BarHint';
+import { BarHint, BarPortal } from './BarHint';
 import { degradedState } from './ConnectionBanner';
 import { ExternalWriterIndicator } from './ExternalWriters';
 import { useNow } from './use-now';
-import { agentPhaseLabel } from '../../shared/agent-presence.js';
-import { activeSession, agentPresences, attachedSessions, contextBudget, writerColor } from '../state/presence-store';
-import { endSession, pendingGates, startSession } from '../state/session-store';
+import { type AgentPresence, agentPhaseLabel } from '../../shared/agent-presence.js';
+import { activeSession, agentPresences, attachedSessions, writerColor, writerInitial } from '../state/presence-store';
+import {
+  activityLens,
+  endSession,
+  pendingGates,
+  sessionPanelOpened,
+  setActivityLens,
+  startSession,
+} from '../state/session-store';
 import { formatCountdown, gateRemainingMs } from '../../shared/approval-gates.js';
+import { agentSessionsEnabled } from '../state/workspace-settings';
 
 /**
  * The attached session's chip (rail-chrome-v2 phase 3): phase-colored, with a
@@ -39,6 +49,31 @@ const AGENT_CHIP_LIMIT = 3;
 const AGENT_PHASE_RANK: Record<string, number> = { 'waiting-approval': 0, thinking: 1, tooling: 2, idle: 3 };
 
 function AgentChip() {
+  const [opened, setOpened] = useState<{ id: string; button: HTMLButtonElement } | null>(null);
+  const popover = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (!opened) return;
+    const close = (event: PointerEvent) => {
+      if (!popover.current?.contains(event.target as Node) && !opened.button.contains(event.target as Node))
+        setOpened(null);
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !event.defaultPrevented) {
+        event.preventDefault();
+        setOpened(null);
+        opened.button.focus({ preventScroll: true });
+      }
+    };
+    const onResize = () => setOpened(null);
+    document.addEventListener('pointerdown', close, true);
+    document.addEventListener('keydown', onKey);
+    window.addEventListener('resize', onResize);
+    return () => {
+      document.removeEventListener('pointerdown', close, true);
+      document.removeEventListener('keydown', onKey);
+      window.removeEventListener('resize', onResize);
+    };
+  }, [opened]);
   // Every attached session gets its chip — with several agents on the board,
   // 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,
@@ -47,7 +82,10 @@ function AgentChip() {
   // active few wear their own chips and the rest fold into a census chip
   // that always names the total.
   const allSessions = attachedSessions.value;
-  if (allSessions.length === 0) return null;
+  useEffect(() => {
+    if (opened && !opened.button.isConnected) setOpened(null);
+  }, [allSessions, opened]);
+  if (!agentSessionsEnabled.value || 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(
@@ -106,9 +144,26 @@ function AgentChip() {
                 data-phase={session.phase}
                 style={{ '--identity-color': writerColor(session.sessionId) }}
               >
+                <button
+                  type="button"
+                  class="agent-chip-initial"
+                  aria-label={`${session.label} session details`}
+                  aria-expanded={opened?.id === session.sessionId}
+                  aria-haspopup="dialog"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setOpened(
+                      opened?.id === session.sessionId ? null : { id: session.sessionId, button: event.currentTarget },
+                    );
+                  }}
+                >
+                  {writerInitial(session.label)}
+                  <span class="agent-chip-dot" aria-hidden="true" />
+                </button>
                 <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>
+                <SessionTouches session={session} />
                 {workers > 0 && (
                   <span class="agent-chip-workers">
                     +{workers} worker{workers === 1 ? '' : 's'}
@@ -118,7 +173,6 @@ function AgentChip() {
                   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.
@@ -144,17 +198,109 @@ function AgentChip() {
           </span>
         </BarHint>
       )}
+      {opened &&
+        visible
+          .filter((session) => session.sessionId === opened.id)
+          .map((session) => (
+            <BarPortal key={session.sessionId}>
+              <div
+                ref={popover}
+                class={`agent-session-popover phase-${session.phase}`}
+                role="dialog"
+                aria-label={`${session.label} session details`}
+                style={{
+                  right: `${Math.max(12, window.innerWidth - opened.button.getBoundingClientRect().right)}px`,
+                  top: `${opened.button.getBoundingClientRect().bottom + 8}px`,
+                }}
+              >
+                <div class="agent-session-popover-head">
+                  <span class="agent-chip-dot" aria-hidden="true" />
+                  <strong>
+                    {session.label} · {agentPhaseLabel(session)}
+                  </strong>
+                </div>
+                <SessionTouches session={session} popover />
+                <button
+                  type="button"
+                  class="session-receipt-link"
+                  onClick={() => {
+                    sessionPanelOpened.value = true;
+                    setOpened(null);
+                  }}
+                >
+                  Open session panel
+                </button>
+              </div>
+            </BarPortal>
+          ))}
     </>
   );
 }
 
+/**
+ * What the session has done so far (AgentContext.dc.html lens, Pane600
+ * "Claude · 4 read · 1 edited"): the counts, and a press dims every card it
+ * has not touched. Hidden until it has touched something.
+ */
+function SessionTouches({ session, popover = false }: { session: AgentPresence; popover?: boolean }) {
+  const touches = session.session;
+  const parts = touches
+    ? (
+        [
+          ['read', touches.read.length],
+          ['created', touches.created.length],
+          ['edited', touches.edited.length],
+          ['pinned', touches.pinned.length],
+        ] as const
+      ).filter(([, count]) => count > 0)
+    : [];
+  const lens = activityLens.value;
+  const on = lens?.kind === 'live' && lens.sessionId === session.sessionId;
+  // While its lens is on the button stays, even at zero, so it can be turned off.
+  if (parts.length === 0 && !on && !popover) return null;
+  const counts = parts.map(([word, count]) => `${count} ${word}`).join(' · ') || 'nothing yet';
+  if (popover)
+    return (
+      <>
+        <span class="agent-session-counts">{counts}</span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={on}
+          class={`session-receipt-lens${on ? ' is-on' : ''}`}
+          onClick={() => setActivityLens(!on, { sessionId: session.sessionId })}
+        >
+          <span class="session-receipt-lens-track" aria-hidden="true">
+            <span class="session-receipt-lens-knob" />
+          </span>
+          Dim untouched nodes
+        </button>
+      </>
+    );
+  return (
+    <button
+      type="button"
+      class={`agent-chip-touches${on ? ' is-on' : ''}`}
+      aria-pressed={on}
+      aria-label={`This session: ${parts.map(([word, count]) => `${count} ${word}`).join(', ') || 'nothing yet'}. ${on ? 'Show all cards' : 'Dim untouched cards'}`}
+      onClick={(event) => {
+        // Inside the chip's tap-to-open hint: toggling the lens must not open it.
+        event.stopPropagation();
+        setActivityLens(!on, { sessionId: session.sessionId });
+      }}
+    >
+      {counts}
+    </button>
+  );
+}
+
 /**
  * Amber escalation badge while any approval gate is pending in an attached
  * session: "1 gate · 4:31" — the countdown is the soonest auto-hold.
  */
 function GateBadge() {
   const count = pendingGates.value.length;
-  const active = activeSession.value !== null && count > 0;
+  const active = count > 0;
   const now = useNow(active ? 1000 : 0);
   if (!active) return null;
   const soonest = pendingGates.value
@@ -164,65 +310,12 @@ function GateBadge() {
   return (
     <BarHint
       label="Approval gates waiting on you"
-      tapToOpen
-      body="The agent is blocked until you approve or reject in the session panel; unanswered gates auto-hold when the countdown runs out."
+      body="Open agent controls to approve or reject. Unanswered gates auto-hold when the countdown runs out, even with the session beta off."
     >
-      <span class="gate-badge">
+      <button type="button" class="gate-badge" onClick={() => (sessionPanelOpened.value = true)}>
         {count} gate{count === 1 ? '' : 's'}
         {soonest !== undefined && ` · ${formatCountdown(soonest)}`}
-      </span>
-    </BarHint>
-  );
-}
-
-function budgetTone(ratio: number): 'ok' | 'warn' | 'danger' {
-  if (ratio > 0.9) return 'danger';
-  if (ratio >= 0.7) return 'warn';
-  return 'ok';
-}
-
-function formatTokens(value: number): string {
-  return value >= 1000 ? `${(value / 1000).toFixed(value >= 10_000 ? 0 : 1)}k` : String(value);
-}
-
-/**
- * Context meter (rail-chrome-v2 phase 5). Two honest modes:
- * - the host reported the agent's REAL window (`contextUsage` on its presence)
- *   → "Context": used / window, with the pinned payload as a note;
- * - nothing reported (no adapter does yet) → "Pins": the pinned-context
- *   payload estimate against the configured budget
- *   (PMX_CANVAS_CONTEXT_BUDGET_TOKENS). Never presented as the agent's window.
- * Session-only, like the chip; the estimate moves within a frame of a pin toggle.
- */
-function ContextBudget() {
-  const session = activeSession.value;
-  if (!session) return null;
-  const budget = contextBudget.value;
-  const real = session.contextUsage;
-  const used = real ? real.used : budget.used;
-  const total = real ? real.total : budget.total;
-  const ratio = total > 0 ? Math.min(1, used / total) : 0;
-  const pct = Math.round(ratio * 100);
-  const hint = real
-    ? {
-        label: `Context window — reported by ${session.label}`,
-        body: `${formatTokens(real.used)} of ${formatTokens(real.total)} tokens of the agent's actual context window are used. Your ✦-pinned nodes account for ≈ ${formatTokens(budget.used)} tokens of it.`,
-      }
-    : {
-        label: 'Pins — pinned-context size (estimate)',
-        body: `The nodes you pinned (✦) are what the agent is asked to carry as context: ≈ ${formatTokens(budget.used)} of a ${formatTokens(budget.total)}-token budget. When the agent's host reports its real context window, this meter switches to showing that instead.`,
-      };
-  return (
-    <BarHint label={hint.label} body={hint.body} tapToOpen>
-      <span class={`context-budget tone-${budgetTone(ratio)}`} data-mode={real ? 'window' : 'pins'}>
-        <span class="context-budget-caption hud-collapsible-text">{real ? 'Context' : 'Pins'}</span>
-        <span class="context-budget-track" aria-hidden="true">
-          <span class="context-budget-fill" style={{ width: `${pct}%` }} />
-        </span>
-        <span class="context-budget-label" data-testid="budget-label">
-          {used > 0 && pct === 0 ? '<1' : pct}%
-        </span>
-      </span>
+      </button>
     </BarHint>
   );
 }
@@ -234,7 +327,7 @@ function ContextBudget() {
  */
 function StartSessionButton() {
   const [busy, setBusy] = useState(false);
-  if (activeSession.value) return null;
+  if (!agentSessionsEnabled.value || activeSession.value) return null;
   return (
     <BarHint
       label="Start an agent session"
@@ -243,6 +336,7 @@ function StartSessionButton() {
       <button
         type="button"
         class="start-session-btn"
+        aria-label="Start agent session beta"
         disabled={busy}
         onClick={() => {
           setBusy(true);
@@ -250,7 +344,7 @@ function StartSessionButton() {
         }}
       >
         <span class="start-session-dot" aria-hidden="true" />
-        Start agent session
+        <span class="start-session-label">Start agent session</span>
         <span class="beta-tag">beta</span>
       </button>
     </BarHint>
@@ -264,6 +358,32 @@ function StartSessionButton() {
  * below 1180px, and nothing ever wraps to a second row.
  */
 export function TopBar() {
+  const barRef = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const bar = barRef.current;
+    const controls = bar?.querySelector<HTMLElement>('.top-bar-right');
+    if (!bar || !controls) return;
+    // Fold by actual content, not only window width: session counts and agent
+    // names can fill a wide pane too. Re-evaluate from the full layout so a
+    // resize or ended session can unfold it again.
+    const fit = () => {
+      const menuOpen = bar.querySelector('.top-bar-more [aria-expanded="true"]');
+      bar.classList.remove('is-folded', 'is-compact');
+      const overflow = () => controls.getBoundingClientRect().right > bar.getBoundingClientRect().right - 14;
+      // A resize or updated count must not hide the menu under its pointer.
+      if (menuOpen || overflow()) bar.classList.add('is-folded');
+      if (overflow()) bar.classList.add('is-compact');
+    };
+    const resize = new ResizeObserver(fit);
+    resize.observe(bar);
+    const content = new MutationObserver(fit);
+    content.observe(bar, { childList: true, characterData: true, subtree: true });
+    fit();
+    return () => {
+      resize.disconnect();
+      content.disconnect();
+    };
+  }, []);
   const status = connectionStatus.value;
   const hasSynced = hasInitialServerLayout.value;
   const v = viewport.value;
@@ -295,6 +415,7 @@ export function TopBar() {
 
   const degraded = degradedState.value;
   const statusTitle = degraded ?? (status === 'connected' && !hasSynced ? 'syncing' : status);
+  const pinTarget = activeBoard();
   const countsLabel = hasSynced
     ? [
         `${nodeCount} node${nodeCount !== 1 ? 's' : ''}`,
@@ -313,7 +434,7 @@ export function TopBar() {
   };
 
   return (
-    <div class="top-bar">
+    <div class="top-bar" ref={barRef}>
       <BarHint
         label={`Canvas status: ${statusTitle}`}
         tapToOpen
@@ -323,73 +444,182 @@ export function TopBar() {
         <span class={`connection-dot ${degraded ?? status}`} aria-label={`Canvas status: ${statusTitle}`} />
       </BarHint>
       <BoardSwitcher fallbackName={workspaceName || 'PMX Canvas'} />
+      {pinTarget && !browsingMemory.value && <BoardPinButton board={pinTarget} />}
       <span class="top-bar-meta hud-collapsible-text">{sessionId.value ? sessionId.value.slice(0, 12) : '…'}</span>
-      <span class="top-bar-meta hud-collapsible-text">{countsLabel}</span>
+      {!browsingMemory.value && <span class="top-bar-meta hud-collapsible-text">{countsLabel}</span>}
 
       <span class="top-bar-spacer" />
 
-      <AgentChip />
-      <GateBadge />
-      <ContextBudget />
-      <ExternalWriterIndicator />
-      {!isHostedWorkbench() && <StartSessionButton />}
+      {/* Keep the context summary; fold controls before compacting sessions
+          when the actual content fills the bar (ContextChip600.dc.html). */}
+      <div class="top-bar-right">
+        <AgentChip />
+        <GateBadge />
+        <ContextChip />
+        <ExternalWriterIndicator />
+        {!isHostedWorkbench() && <StartSessionButton />}
 
-      <div class="top-bar-sep" />
+        {!browsingMemory.value && (
+          <>
+            <div class="top-bar-sep" />
+            <div class="top-bar-actions">
+              {activeBoardId.value && (
+                <BarHint
+                  label="Export board"
+                  body="One HTML file of this board that anyone can open, no install needed."
+                >
+                  <button
+                    type="button"
+                    class="present-button"
+                    onClick={() => {
+                      exportDialogOpen.value = true;
+                    }}
+                  >
+                    Export
+                  </button>
+                </BarHint>
+              )}
+              {activeBoardId.value && (
+                <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={() => {
+                      void startPresentation();
+                    }}
+                  >
+                    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 />
+                </button>
+              </BarHint>
+              <BarHint label="Reset zoom" shortcut={modChord('0')}>
+                <button
+                  type="button"
+                  class="top-bar-zoom-label"
+                  onClick={() => animateViewport({ x: 0, y: 0, scale: 1 }, 250)}
+                  aria-label="Reset view"
+                >
+                  {Math.round(v.scale * 100)}%
+                </button>
+              </BarHint>
+              <BarHint label="Zoom in" shortcut={modChord('+')}>
+                <button type="button" class="top-bar-btn" onClick={() => zoomByFactor(1.25)} aria-label="Zoom in">
+                  <IconZoomIn />
+                </button>
+              </BarHint>
+              <BarHint label="Fit all" shortcut="F" align="end">
+                <button type="button" class="top-bar-btn" onClick={handleFit} aria-label="Fit canvas">
+                  <IconFitAll />
+                </button>
+              </BarHint>
+            </div>
+            <TopBarMore boardOpen={!!activeBoardId.value} onFit={handleFit} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
 
-      {activeBoardId.value && (
-        <BarHint label="Export board" body="One HTML file of this board that anyone can open, no install needed.">
-          <button
-            type="button"
-            class="present-button"
-            onClick={() => {
-              exportDialogOpen.value = true;
-            }}
-          >
-            Export
+/** Narrow bars fold Export, Present, zoom and fit into one ⋯ menu (Pane600.dc.html). */
+function TopBarMore({ boardOpen, onFit }: { boardOpen: boolean; onFit: () => void }) {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const items = () => [...(root.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])];
+    items()[0]?.focus();
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+        trigger.current?.focus();
+      } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        event.preventDefault();
+        const list = items();
+        const at = list.indexOf(document.activeElement as HTMLElement);
+        const next = event.key === 'ArrowDown' ? at + 1 : at - 1;
+        list[(next + list.length) % list.length]?.focus();
+      }
+    };
+    const onDown = (event: PointerEvent) => {
+      if (root.current && !root.current.contains(event.target as Node)) setOpen(false);
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('pointerdown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('pointerdown', onDown);
+    };
+  }, [open]);
+  const run = (action: () => void) => () => {
+    setOpen(false);
+    action();
+  };
+  return (
+    <div class="top-bar-more" ref={root}>
+      <button
+        ref={trigger}
+        type="button"
+        class="top-bar-btn"
+        aria-label="More: export, present, zoom, fit"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+      >
+        ⋯
+      </button>
+      {open && (
+        <div class="toolbar-menu top-bar-more-menu" role="menu">
+          {boardOpen && (
+            <button
+              type="button"
+              role="menuitem"
+              class="toolbar-menu-item"
+              onClick={run(() => {
+                exportDialogOpen.value = true;
+              })}
+            >
+              Export board
+            </button>
+          )}
+          {boardOpen && (
+            <button
+              type="button"
+              role="menuitem"
+              class="toolbar-menu-item"
+              onClick={run(() => void startPresentation())}
+            >
+              Present board
+            </button>
+          )}
+          <button type="button" role="menuitem" class="toolbar-menu-item" onClick={run(() => zoomByFactor(1.25))}>
+            Zoom in
+          </button>
+          <button type="button" role="menuitem" class="toolbar-menu-item" onClick={run(() => zoomByFactor(1 / 1.25))}>
+            Zoom out
           </button>
-        </BarHint>
-      )}
-      {activeBoardId.value && (
-        <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;
-            }}
+            role="menuitem"
+            class="toolbar-menu-item"
+            onClick={run(() => animateViewport({ x: 0, y: 0, scale: 1 }, 250))}
           >
-            Present
+            Reset zoom
           </button>
-        </BarHint>
+          <button type="button" role="menuitem" class="toolbar-menu-item" onClick={run(onFit)}>
+            Fit all
+          </button>
+        </div>
       )}
-      <BarHint label="Zoom out" shortcut={modChord('\u2212')}>
-        <button type="button" class="top-bar-btn" onClick={() => zoomByFactor(1 / 1.25)} aria-label="Zoom out">
-          <IconZoomOut />
-        </button>
-      </BarHint>
-      <BarHint label="Reset zoom" shortcut={modChord('0')}>
-        <button
-          type="button"
-          class="top-bar-zoom-label"
-          onClick={() => animateViewport({ x: 0, y: 0, scale: 1 }, 250)}
-          aria-label="Reset view"
-        >
-          {Math.round(v.scale * 100)}%
-        </button>
-      </BarHint>
-      <BarHint label="Zoom in" shortcut={modChord('+')}>
-        <button type="button" class="top-bar-btn" onClick={() => zoomByFactor(1.25)} aria-label="Zoom in">
-          <IconZoomIn />
-        </button>
-      </BarHint>
-      <BarHint label="Fit all" shortcut="F" align="end">
-        <button type="button" class="top-bar-btn" onClick={handleFit} aria-label="Fit canvas">
-          <IconFitAll />
-        </button>
-      </BarHint>
     </div>
   );
 }

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

@@ -49,17 +49,24 @@ export interface CanvasFitInsets {
 
 /**
  * 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)
+ * the canvas region: the bottom command bar or standalone context pill,
  * 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 top = 16;
   let bottom = 16;
   try {
     const area = canvasArea();
     const areaBottom = area.top + area.height;
-    for (const selector of ['.command-bar', '.minimap']) {
+    for (const selector of ['.lifecycle-filters', '.relation-legend']) {
+      const el = document.querySelector(selector);
+      if (!(el instanceof HTMLElement) || !el.isConnected) continue;
+      const rect = el.getBoundingClientRect();
+      if (rect.height > 0) top = Math.max(top, rect.bottom - area.top + 12);
+    }
+    for (const selector of ['.command-bar', '.context-pin-bar', '.minimap']) {
       const el = document.querySelector(selector);
       if (!(el instanceof HTMLElement) || !el.isConnected) continue;
       const rect = el.getBoundingClientRect();
@@ -70,5 +77,5 @@ export function canvasFitInsets(): CanvasFitInsets {
   } catch {
     // Chromeless embeds and unit DOMs: the defaults below are the contract.
   }
-  return { top: 16, right: 16, bottom, left: 16 };
+  return { top, right: 16, bottom, left: 16 };
 }