pmx-canvas 0.6.1 → 0.6.3

package/skills/pmx-canvas/SKILL.md

@@ -18,12 +18,24 @@ Humans curate agent context by pinning nodes; agents read that curation through
 
 ## Runtime prerequisites
 
-PMX Canvas 0.6.1 requires **Bun >=1.4.2**, including when installed through npm.
+PMX Canvas 0.6.3 requires **Bun >=1.4.2**, including when installed through npm.
 Check `bun --version` and ensure Bun is on the MCP host's PATH, not just your shell's;
 use an absolute executable path if needed. Install/configure only when requested.
 For pinned installation, MCP configuration, managed services, and disposable verification,
 read [Installing PMX Canvas](references/installing-pmx-canvas.md).
 
+## Reading bundled skills over MCP
+
+When the server advertises `io.modelcontextprotocol/skills`, supporting hosts can discover
+bundled skills with `skills/list` and retrieve a manifest with `skills/get`. These are MCP
+protocol methods, not canvas tools. Read `skill://pmx-canvas/SKILL.md` and relative supporting
+files (for example `skill://pmx-canvas/references/installing-pmx-canvas.md`) through
+`resources/read`, fetching only what is needed. Hosts without extension support can still read
+ordinary resources or use installed filesystem skills; `canvas://skills` remains available.
+Resource reads do not activate skills or authorize executing their scripts. The host must
+preserve MCP origin and apply integrity/approval checks. Restart MCP after upgrading the package;
+the served catalog is a startup snapshot. Local mirrors still use `skills sync` below.
+
 ## Required Operating Sequence
 
 0. **After a `pmx-canvas` upgrade, refresh this skill first.** Run
@@ -155,9 +167,9 @@ json-render, a graph, or an HTML primitive is sufficient.
 
 ## Current MCP Composites
 
-The live MCP surface is **22 tools**: the 16 composites below plus 6 standalones (v0.4.x —
-this table is kept in sync with the server's composite registry; `tools/list` on a fresh
-`pmx-canvas --mcp` is always authoritative).
+The live MCP surface is **22 tools**: the 16 composites below plus 6 standalones. This table is
+kept in sync with the server's composite registry; `tools/list` on a fresh `pmx-canvas --mcp` is
+always authoritative, independent of the installed release version.
 
 | Composite | Actions |
 |-----------|---------|
@@ -235,8 +247,20 @@ distant nodes, an auto-placed node lands off-camera.
 markdown 640×420, status 360×200, file 520×360, diff 640×420, mermaid 640×460, html 720×640,
 graph 760×520, mcp-app 960×600, web-artifact 960×720. A *hosted* app opened with
 `canvas_app { action: "open-mcp-app" | "diagram" }` — including the Excalidraw diagram preset — is
-the exception: it opens at 720×500, not 960×600 (960×600 is the default for an `mcp-app` node you
-create directly). Pass `width`/`height` to that action when you want a bigger diagram tile.
+the exception: request `width: 720, height: 500` for its standard landscape preset instead of
+relying on the 960×600 default for a directly created `mcp-app` node. After the app mounts, read
+only its geometry, e.g. `pmx-canvas node get <id> --fields id,type,position,size`, and use the
+persisted size for subsequent placement. With MCP tool execution that supports output projection,
+project the layout to node id/type/position/size before returning it to context; otherwise prefer
+a targeted `canvas_node { action: "get", id }`. Read the full layout only when its other state
+is needed. Mounted apps may change the requested dimensions.
+Authored iframe surfaces grow in height as content changes, up to 1400px. A growing ungrouped,
+unpinned card moves down when needed to leave a 24px gap without moving its neighbors; grouped
+cards retain their authored placement. Width stays explicit, and `strictSize` or manually resized
+cards do not auto-grow. Fitting waits while a human holds the card, including in another tab;
+automatic relocations are undoable. This is not a shrink-to-fit action or `view.fit` (which only changes zoom).
+After content settles, inspect the rendered result and arrange the intended node IDs if more
+spacing is needed; do not compensate with arbitrarily huge fixed frames.
 Since 0.4.6 the server clamps explicit creation sizes UP to per-type
 readability floors (e.g. markdown 360×180, graph/json-render/html 420×280, mcp-app 480×320) —
 a tiny probe size silently becomes the floor. `strictSize: true` is the only opt-out (a fixed
@@ -333,11 +357,12 @@ Use the visible workbench when the human is actively curating layout:
 - The selection bar (floating bottom-center) offers count, align left/top, distribute,
   auto-arrange, Group (G), Connect, Pin as context, delete and clear; selected nodes show an
   accent outline with corner handles.
-- Right-click a node for context pinning, position locking, focus, collapse, connect, refresh,
+- Double-left-click a node for context pinning, position locking, focus, collapse, connect, refresh,
   open, close, and type-specific actions.
+- Double-left-click empty canvas for the node-creation menu; hold and drag the right mouse button to pan.
 - Drop files or URLs to create matching nodes; an empty board shows starter actions (new note,
   pick files, paste a link, start an agent session).
-- Double-click markdown to edit inline.
+- Use a markdown node's Edit button to edit its content.
 - **Groups** are frames with the name pill and an action cluster (auto-arrange children, collapse,
   ⋯ rename / ungroup / pin all) on the top edge. Membership changes only on release while the
   "release to add to <group>" pill shows (Esc keeps it out); dragging a child fully out offers
@@ -464,20 +489,21 @@ Prefer `canvas_query { action: "search" }` over parsing the full layout.
   iframe's per-mount nonce, so AX buttons only work inside the in-canvas node (0.4.4 Codex note).
   Do not tell a user a standalone tab's controls will steer the agent.
 - A hosted ext-app (Excalidraw) node in a **WebKit** host panel (e.g. the GitHub Copilot app's
-  embedded WKWebView) historically could render as a black tile — a host compositor paint race
-  on the nested iframe, **not** a broken node (the session is healthy, `sessionStatus` is
-  `ready`, and it renders fine in Chrome/Codex). Since 0.4.6 the canvas runs a **paint oracle +
+  embedded WKWebView) can remain blank even when its API session is healthy and `sessionStatus`
+  is `ready`. This host-specific rendering issue remains open; successful Chrome/Codex rendering
+  does not establish native-host health. Since 0.4.6 the canvas runs a **paint oracle +
   recovery ladder** under WebKit: present-at-load ext-apps mount strictly one at a time (the
   cold burst was the trigger), each frame answers a double-rAF **paint probe** after settle, and
   on silence the ladder escalates — soft-expand cycle (the automatic analogue of the proven
   enlarge+close) → serialized remount → an explicit "App surface failed to paint / Retry"
-  affordance. The connecting overlay stays up until paint is confirmed, so a black layer is
-  never presented as ready. The recovery trail
+  affordance. Native Copilot/WebKit surfaces can still remain blank despite a successful
+  probe, including when visibility is reported as visible. The recovery trail
   (`GET /api/canvas/debug/ext-app-recovery` / `window.__PMX_EXTAPP_LOG`) now records
   `mount-slot`, `paint-ok`, `paint-fail`, `soft-expand-cycle`, `recovery-exhausted`, and
-  `assume-visible-rearm` — when diagnosing, trust `paint-ok`/`paint-fail`, and never assert
-  health from `settled` alone. Exception: in a host that reports the document hidden (the
-  GitHub Copilot panel does so continuously), `paint-ok` is recorded as
+  `assume-visible-rearm`. Treat `paint-ok`/`paint-fail` as diagnostic evidence, not compositor
+  proof. Require a rendered screenshot in the affected host before declaring its surface
+  healthy; a Chromium pass does not close a native Copilot/WebKit failure. In a host that
+  reports the document hidden, `paint-ok` is recorded as
   `paint-ok (unverified: host hidden)` — the app answered the paint probe, but nothing is
   proven composited, so do not treat it as a verified paint. If a
   tile still shows the Retry affordance, click Retry (fresh recovery budget) or expand-then-close;

package/skills/pmx-canvas/evals/evals.json

@@ -274,7 +274,7 @@
       "id": 11,
       "name": "context-pin-workflow",
       "prompt": "Pin the auth design node so I (the agent) keep it in context, then confirm it's pinned.",
-      "expected_output": "Pins via a verified path (canvas_pin_nodes, the CLI pin, or browser/right-click 'Pin as context'), then reads canvas://pinned-context to confirm; does not claim a broken UI action succeeded.",
+      "expected_output": "Pins via a verified path (canvas_pin_nodes, the CLI pin, or browser/double-left-click menu 'Pin as context'), then reads canvas://pinned-context to confirm; does not claim a broken UI action succeeded.",
       "assertions": [
         {
           "name": "pins-via-verified-path",

package/skills/pmx-canvas/references/excalidraw-diagram-authoring.md

@@ -3,6 +3,11 @@
 Use this guide when creating diagrams through PMX Canvas with `canvas_app { action: "diagram" }` or
 `pmx-canvas external-app add --kind excalidraw`.
 
+Request `width: 720, height: 500` when opening the standard landscape diagram tile. Treat those as
+requested preset dimensions, not authoritative geometry: after the app mounts, query
+`canvas_query { action: "layout" }` and use the node's persisted width and height for placement,
+overlap checks, and any later layout. A hosted app can resize during mount.
+
 ## Why Text Can Still Drift
 
 PMX normalizes canonical Excalidraw bound text (`containerId` / `boundElements`) into the hosted

package/skills/pmx-canvas/references/full-reference.md

@@ -82,7 +82,7 @@ section below.
 6. **Arrange + validate** — `canvas_view { action: "arrange" }` after batch adds, then
    `canvas_query { action: "validate" }` to catch collisions / dangling edges before finishing.
 7. **Pin through a verified path** — `canvas_pin_nodes` (or the browser "Pin as context" /
-   right-click "Pin as context"), then read `canvas://pinned-context` to confirm.
+   double-click menu's "Pin as context"), then read `canvas://pinned-context` to confirm.
 8. **Clean up** — remove retry/test fixtures (`canvas_node { action: "remove" }` — works for
    every type, including `status`), and restore the baseline snapshot.
 
@@ -192,16 +192,17 @@ running". `serve stop` reads the pid file, verifies the pid still looks like a c
 The browser is not just a passive view. Human interactions on the canvas persist back to the
 server and become part of the authoritative canvas state.
 
-- Double-click empty canvas — create a markdown note at that position
+- Double-left-click empty canvas — open the node-creation menu at that position
+- Right-button hold and drag — pan the board, including over node content
 - Shift+drag on empty canvas — lasso-select multiple nodes
 - Selection bar actions — when nodes are selected, the browser exposes `Pin as context`,
   `Group`, `Connect`, and `Clear`
-- Right-click a node — open the node context menu. **`Pin as context`** adds the node to the
+- Double-left-click a node — open the node context menu. **`Pin as context`** adds the node to the
   human-curated agent context set (updates the context count + the node's context-pin indicator);
   `Lock position` is the separate arrange-lock. Plus focus, collapse, connect, refresh/open, close,
   and type-specific actions. (Every node type, **including `status`, has a remove `×`** in its title
   bar and a `Close` menu item.)
-- Right-click a group node — recolor the group using preset swatches or a custom color picker,
+- Double-left-click a group node — recolor the group using preset swatches or a custom color picker,
   or ungroup it (dissolves the frame; children stay)
 - Drag-and-drop files or URLs — add file, image, markdown, or webpage nodes directly
 - Paste URLs — create webpage nodes from the clipboard

package/skills/pmx-canvas/references/installing-pmx-canvas.md

@@ -4,7 +4,7 @@ Use this reference when the `pmx-canvas` skill is installed but the `pmx-canvas`
 
 ## Prerequisites and version
 
-The examples pin **PMX Canvas 0.6.1**, which requires **Bun >=1.4.2** even when
+The examples pin **PMX Canvas 0.6.3**, which requires **Bun >=1.4.2** even when
 installed through npm: the CLI runs through Bun, not Node. Check `bun --version`
 first. If missing or older, follow the [Bun installation instructions](https://bun.sh/docs/installation)
 with the user's authorization. Ensure Bun is on the MCP host's PATH as well as the
@@ -17,11 +17,11 @@ in `SKILL.md`. Do not pair newer checkout guidance with an older runtime unknowi
 ## Install from npm
 
 ```bash
-npm install -g pmx-canvas@0.6.1
+npm install -g pmx-canvas@0.6.3
 pmx-canvas --version
 ```
 
-Without a global install, use `bunx pmx-canvas@0.6.1` in place of `pmx-canvas` in
+Without a global install, use `bunx pmx-canvas@0.6.3` in place of `pmx-canvas` in
 the commands below. Do not use unpinned `bunx pmx-canvas` for a version-specific check.
 
 ## Choose the workspace and target
@@ -73,7 +73,7 @@ bun run build
 bun run src/cli/index.ts --version
 ```
 
-This uses the checked-out source, not necessarily the published 0.6.1 package. Follow
+This uses the checked-out source, not necessarily the published package. Follow
 that checkout's `package.json` Bun requirement and bundled skill. Set the same root/port
 environment above; substitute `bun run /absolute/path/to/pmx-canvas/src/cli/index.ts`
 for `pmx-canvas` in startup and verification commands. The target workspace can be
@@ -91,7 +91,7 @@ discards empty env values, remove `PMX_CANVAS_URL` from its launch environment i
   "mcpServers": {
     "canvas": {
       "command": "bunx",
-      "args": ["pmx-canvas@0.6.1", "--mcp"],
+      "args": ["pmx-canvas@0.6.3", "--mcp"],
       "env": {
         "PMX_CANVAS_WORKSPACE_ROOT": "/absolute/path/to/project",
         "PMX_CANVAS_PORT": "14313",

package/skills/pmx-canvas-testing/SKILL.md

@@ -9,7 +9,14 @@ description: >
 
 # PMX Canvas Testing
 
-Use this skill whenever you touch code in this repo and need a consistent verification path.
+Use this skill when changing the PMX Canvas product checkout and you need a consistent verification
+path. The commands and paths below refer to that source checkout, not to a workspace that merely
+has the published package and skills installed.
+
+For an isolated consumer workspace, do not expect the package to contain this checkout's
+`tests/`, source-only scripts, or Playwright configuration. Validate package transports and host
+integration through their public CLI, MCP, HTTP, and SDK surfaces; use the
+`published-consumer-e2e` skill when a packed-install outside-in check is required.
 
 ## When To Use
 
@@ -59,9 +66,11 @@ and check `$?`, then read the file.
 
 ## Current Project Test Surface
 
-- Bun tests live under `tests/unit/`
-- Playwright browser smoke lives under `tests/e2e/`
-- CI runs Bun coverage plus the browser smoke flow
+- In the product source checkout, Bun tests live under `tests/unit/`.
+- In the product source checkout, Playwright browser smoke lives under `tests/e2e/`.
+- Product CI runs those checkout suites: Bun coverage plus the browser smoke flow.
+- An isolated installed consumer instead tests the package's public transports and host behavior;
+  it does not run or depend on the product checkout's source suites.
 
 ## WebView Automation Caveat
 

package/skills/web-artifacts-builder/scripts/bundle-artifact.sh

@@ -56,14 +56,12 @@ function replay_filtered_stderr() {
 
 function run_with_filtered_stderr() {
   local stderr_file
+  local status
   stderr_file="$(mktemp)"
-  if "$@" 2>"$stderr_file"; then
-    replay_filtered_stderr "$stderr_file"
-    rm -f "$stderr_file"
-    return 0
-  fi
-
-  local status=$?
+  set +e
+  "$@" 2>"$stderr_file"
+  status=$?
+  set -e
   replay_filtered_stderr "$stderr_file"
   rm -f "$stderr_file"
   return "$status"
@@ -161,17 +159,18 @@ rm -rf dist bundle.html
 
 # Build with Parcel
 echo "🔨 Building with Parcel..."
-run_with_filtered_stderr run_local_binary parcel build index.html --dist-dir dist --no-source-maps --log-level error || true
+parcel_status=0
+run_with_filtered_stderr run_local_binary parcel build index.html --dist-dir dist --no-source-maps --log-level error || parcel_status=$?
 
 # Self-heal a wedged cache: these build projects are REUSED across artifact
 # builds, and a parcel killed mid-write (e.g. the canvas server torn down
 # during a build) leaves a corrupted .parcel-cache that makes every later
 # build die before emitting anything — permanently, until the cache goes.
-# One cold-cache retry converts that wedge into a slow build.
-if [ ! -s "dist/index.html" ]; then
-  echo "🧹 Parcel produced no output — clearing .parcel-cache and retrying cold..."
+# Retry exactly once from a cold cache, then preserve a genuine build failure.
+if [ "$parcel_status" -ne 0 ] || [ ! -s "dist/index.html" ]; then
+  echo "🧹 Parcel build failed or produced no output — clearing .parcel-cache and retrying cold..."
   rm -rf .parcel-cache dist
-  run_with_filtered_stderr run_local_binary parcel build index.html --dist-dir dist --no-source-maps --log-level error || true
+  run_with_filtered_stderr run_local_binary parcel build index.html --dist-dir dist --no-source-maps --log-level error
 fi
 
 if [ ! -s "dist/index.html" ]; then

package/src/client/canvas/CanvasNode.tsx

@@ -234,6 +234,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
 
   const handleTitlePointerDown = useCallback(
     (e: PointerEvent) => {
+      if (e.button !== 0) return;
       if (renaming) return;
       if (canvasTool.value === 'connect') {
         startEdgeDrag(e);
@@ -267,6 +268,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
 
   const handlePointerDown = useCallback(
     (e: PointerEvent) => {
+      if (e.button !== 0) return;
       e.stopPropagation();
       if (canvasTool.value === 'connect') {
         startEdgeDrag(e);
@@ -281,8 +283,10 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     [node.id, startEdgeDrag],
   );
 
-  const handleContextMenuEvent = useCallback(
+  const handleDblClick = useCallback(
     (e: MouseEvent) => {
+      const target = e.target instanceof Element ? e.target : null;
+      if (target?.closest('button, input, textarea, select, a, [contenteditable="true"]')) return;
       if (onContextMenu) onContextMenu(e, node.id);
     },
     [onContextMenu, node.id],
@@ -312,13 +316,6 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     [node],
   );
 
-  // ── Double-click rename ───────────────────────────────
-  const handleTitleDblClick = useCallback((e: MouseEvent) => {
-    e.stopPropagation();
-    setRenaming(true);
-    requestAnimationFrame(() => renameRef.current?.focus());
-  }, []);
-
   const title =
     (node.data.title as string) ||
     // Untitled file nodes (created before titles were synthesized server-side)
@@ -453,7 +450,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         data-node-type={node.type}
         style={{ ...nodeStyle, width: 'auto', height: 'auto' }}
         onPointerDown={handlePointerDown}
-        onContextMenu={handleContextMenuEvent}
+        onDblClick={handleDblClick}
         title="Expand group"
         data-testid="group-chip"
       >
@@ -499,7 +496,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
       onMouseDown={(e) => {
         if (e.shiftKey) e.preventDefault();
       }}
-      onContextMenu={handleContextMenuEvent}
+      onDblClick={handleDblClick}
     >
       {isGroup && (
         <div class="node-titlebar group-edge-row" onPointerDown={handleTitlePointerDown}>
@@ -517,7 +514,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 onClick={(e) => e.stopPropagation()}
               />
             ) : (
-              <span class="group-name" onDblClick={handleTitleDblClick} title={`${title} — double-click to rename`}>
+              <span class="group-name" title={title}>
                 {title}
               </span>
             )}
@@ -659,7 +656,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               onClick={(e) => e.stopPropagation()}
             />
           ) : (
-            <span class="node-title" onDblClick={handleTitleDblClick} title={`${title} — double-click to rename`}>
+            <span class="node-title" title={title}>
               {title}
             </span>
           )}

package/src/client/canvas/CanvasViewport.tsx

@@ -409,7 +409,7 @@ export function CanvasViewport({
       if (e.target !== container) return;
 
       // Pan tool / held Space: usePanZoom owns this drag.
-      if (isPanModeActive() || e.button === 1) {
+      if (isPanModeActive() || e.button === 1 || e.button === 2) {
         if (!e.shiftKey && !lassoRef.current) {
           activeNodeId.value = null;
           clearSelection();
@@ -659,51 +659,27 @@ export function CanvasViewport({
     };
   }, [containerRef]);
 
-  // ── Double-click on background → create new markdown node ──
+  // ── Double-click on background → open node creation menu ──
   const handleDblClick = useCallback(
     (e: MouseEvent) => {
       if (annotationMode) return;
       const container = containerRef.current;
-      if (!container || e.target !== container) return;
+      if (!container || e.target !== container || !onCanvasContextMenu) return;
       const rect = container.getBoundingClientRect();
       const v = viewport.value;
       const wx = (e.clientX - rect.left - v.x) / v.scale;
       const wy = (e.clientY - rect.top - v.y) / v.scale;
-      // Offset so node centers on click point
-      const nodeW = 520;
-      const nodeH = 360;
-      createNodeFromClient({
-        type: 'markdown',
-        title: 'New note',
-        x: wx - nodeW / 2,
-        y: wy - nodeH / 2,
-        width: nodeW,
-        height: nodeH,
-      });
-    },
-    [annotationMode, containerRef],
-  );
-
-  const handleContextMenu = useCallback(
-    (e: MouseEvent) => {
-      if (annotationMode) return;
-      if (!onCanvasContextMenu) return;
-
-      const container = containerRef.current;
-      if (!container) return;
-
-      const target = e.target instanceof Element ? e.target : null;
-      if (target?.closest('.canvas-node')) return;
-
-      const rect = container.getBoundingClientRect();
-      const v = viewport.value;
-      const canvasX = (e.clientX - rect.left - v.x) / v.scale;
-      const canvasY = (e.clientY - rect.top - v.y) / v.scale;
-      onCanvasContextMenu(e, canvasX, canvasY);
+      onCanvasContextMenu(e, wx, wy);
     },
     [annotationMode, containerRef, onCanvasContextMenu],
   );
 
+  const handleContextMenu = useCallback((e: MouseEvent) => {
+    // Right-click is a pan gesture, never a menu trigger. Suppress the
+    // browser menu whether it lands on the board or bubbles from a node.
+    e.preventDefault();
+  }, []);
+
   // 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

package/src/client/canvas/ContextMenu.tsx

@@ -466,6 +466,19 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
     action: () => focusNode(node.id),
   });
 
+  items.push({
+    label: 'Rename…',
+    action: () => {
+      void askText('Rename node', 'Node title', {
+        initial: typeof node.data.title === 'string' ? node.data.title : '',
+        confirm: 'Save',
+      }).then((title) => {
+        if (!title?.trim()) return;
+        void updateNodeFromClient(node.id, { title: title.trim() });
+      });
+    },
+  });
+
   // Expand into full-viewport overlay for focused work
   if (EXPANDABLE_TYPES.has(node.type)) {
     items.push({

package/src/client/canvas/EdgeLayer.tsx

@@ -166,7 +166,7 @@ function EdgePath({ edge, fromNode, toNode, focused, dimmed, selected, scale, on
     <g>
       {/* Invisible wide hitbox — the ONE interactive part of the edge layer
           (the svg itself is pointer-events:none): click selects the edge
-          (Delete then removes it), right-click opens the edge menu. */}
+          (Delete then removes it), double-click opens the edge menu. */}
       <path
         d={d}
         fill="none"
@@ -179,7 +179,7 @@ function EdgePath({ edge, fromNode, toNode, focused, dimmed, selected, scale, on
           e.stopPropagation();
           selectedEdgeId.value = edge.id;
         }}
-        onContextMenu={onContextMenu ? (e) => onContextMenu(e as unknown as MouseEvent, edge.id) : undefined}
+        onDblClick={onContextMenu ? (e) => onContextMenu(e as unknown as MouseEvent, edge.id) : undefined}
       />
 
       {/* Glow layer for focused or selected edges */}

package/src/client/canvas/SessionPanel.tsx

@@ -288,7 +288,10 @@ function TimelineRow({ entry }: { entry: TimelineEntry }) {
 }
 
 export function SessionPanel() {
-  const [collapsed, setCollapsed] = useState(false);
+  // A gate may temporarily expand the panel without turning that expansion
+  // into a user preference. Once the last gate settles, only an explicitly
+  // opened panel remains open.
+  const [manuallyOpened, setManuallyOpened] = useState(false);
   const session = activeSession.value;
   const items = sessionWorkItems.value;
   const gates = pendingGates.value;
@@ -307,12 +310,28 @@ export function SessionPanel() {
     void refreshTimeline();
   }, []);
 
-  if (collapsed) {
+  const expanded = manuallyOpened || gates.length > 0;
+  if (!expanded) {
     return (
       <aside class="session-panel is-collapsed" aria-label="Session (collapsed)">
-        <button type="button" class="session-collapse" onClick={() => setCollapsed(false)} title="Expand session panel">
+        <button
+          type="button"
+          class="session-collapse"
+          onClick={() => setManuallyOpened(true)}
+          title="Expand session panel"
+        >
           ‹
         </button>
+        {session && (
+          <span
+            class={`session-collapsed-live phase-${session.phase}`}
+            title={agentPhaseLabel(session)}
+            aria-label={`Session live: ${agentPhaseLabel(session)}`}
+          >
+            <span class="session-live-dot" aria-hidden="true" />
+            live
+          </span>
+        )}
         <span class="session-collapsed-label">Session</span>
       </aside>
     );
@@ -342,7 +361,7 @@ export function SessionPanel() {
         <button
           type="button"
           class="session-collapse"
-          onClick={() => setCollapsed(true)}
+          onClick={() => setManuallyOpened(false)}
           title="Collapse session panel"
         >
           ›

package/src/client/canvas/ShortcutOverlay.tsx

@@ -32,7 +32,7 @@ const GROUPS: ShortcutGroup[] = [
       { keys: 'I / W / H', desc: 'New image / webpage / HTML surface' },
       { keys: 'Shift+F', desc: 'New file node (workspace path)' },
       { keys: 'G / Shift+G', desc: 'Group the selection (new frame when empty) / ungroup' },
-      { keys: 'Double-click', desc: 'Create new markdown note on canvas' },
+      { keys: 'Double-click', desc: 'Open actions on a node or create menu on canvas' },
       { keys: 'Drag port \u2192 node', desc: 'Connect two nodes (hover to reveal ports)' },
     ],
   },
@@ -52,7 +52,7 @@ const GROUPS: ShortcutGroup[] = [
     shortcuts: [
       { keys: '?', desc: 'Toggle this shortcut overlay' },
       { keys: 'Minimap', desc: 'Click/drag to navigate (toggle in the rail)' },
-      { keys: 'Right-click', desc: 'Context menu — dock, focus, connect' },
+      { keys: 'Right-drag', desc: 'Pan the board from anywhere' },
     ],
   },
 ];

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

@@ -1,5 +1,6 @@
 import type { CanvasNodeState } from '../types';
 import { nodeMinSize } from '../../shared/node-sizes.js';
+import { findBlocker } from '../../shared/placement.js';
 
 export const AUTO_FIT_TITLEBAR_HEIGHT = 37;
 export const AUTO_FIT_MAX_HEIGHT = 600;
@@ -81,7 +82,25 @@ export function shouldContentFitIframeNode(node: CanvasNodeState): boolean {
  * capped at the iframe ceiling.
  */
 export function computeContentGrowHeight(node: CanvasNodeState, contentHeight: number): number | null {
-  if (!shouldContentFitIframeNode(node) || contentHeight <= 0) return null;
+  if (!shouldContentFitIframeNode(node) || !Number.isFinite(contentHeight) || contentHeight <= 0) return null;
   const want = Math.min(contentHeight + AUTO_FIT_TITLEBAR_HEIGHT + AUTO_FIT_BODY_PADDING, AUTO_FIT_MAX_HEIGHT_IFRAME);
   return want > node.size.height + 8 ? want : null;
 }
+
+/** Keep an automatically growing card clear without moving its neighbors or
+ * changing its column. Groups and screen-pinned cards retain authored placement. */
+export function contentFitPosition(
+  node: CanvasNodeState,
+  height: number,
+  allNodes: CanvasNodeState[],
+): CanvasNodeState['position'] {
+  if (height <= node.size.height || node.pinned || node.data.parentGroup) return node.position;
+  const obstacles = allNodes.filter((other) => other.id !== node.id && !other.pinned && other.type !== 'group');
+  const position = { ...node.position };
+  let blocker = findBlocker(position, node.size.width, height, obstacles, 24);
+  while (blocker) {
+    position.y = blocker.position.y + blocker.size.height + 24;
+    blocker = findBlocker(position, node.size.width, height, obstacles, 24);
+  }
+  return position;
+}

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,8 +104,9 @@ 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
@@ -122,6 +124,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
         return;
       }
       isPanning.current = true;
+      document.documentElement.classList.add('is-canvas-panning');
       lastPointer.current = { x: e.clientX, y: e.clientY };
       container.setPointerCapture(e.pointerId);
     },
@@ -147,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
@@ -207,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);
 
@@ -219,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;
 }