pmx-canvas 0.6.1 → 0.6.2

package/dist/types/client/canvas/use-pan-zoom.d.ts

@@ -10,7 +10,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 declare function usePanZoom({ viewport, onViewportChange, onViewportCommit, disabled }: PanZoomOptions): import("preact/src").RefObject<HTMLDivElement>;

package/docs/node-types.md

@@ -328,7 +328,7 @@ Groups are spatial containers that visually contain other nodes. They render
 as dashed-border frames with a title bar and optional accent color.
 
 - Select 2+ nodes and click "Group" in the selection bar
-- Ungroup from the frame's ⋯ menu, the right-click menu, or Shift+G — the frame dissolves and
+- Ungroup from the frame's ⋯ menu, the double-click menu, or Shift+G — the frame dissolves and
   its children stay as independent nodes (one undo step); `canvas_group { action: "ungroup" }`
   does exactly the same
 - Collapsing a group hides children and shows a summary

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmx-canvas",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Spatial canvas workbench for coding agents \u2014 infinite 2D canvas with agent-native CLI, MCP integration, nodes, edges, file watching, and snapshots",
   "type": "module",
   "main": "./src/server/index.ts",

package/skills/pmx-canvas/SKILL.md

@@ -155,9 +155,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 +235,10 @@ 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
+the node back with `canvas_query { action: "layout" }` and use its persisted width and height for
+subsequent placement or layout; the mounted app may have changed the requested dimensions.
 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 +335,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

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-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/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;
 }

package/src/client/nodes/ExtAppFrame.tsx

@@ -1467,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/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 } : {}),

package/src/client/theme/global.css

@@ -1377,7 +1377,7 @@ body,
   animation: session-panel-in 180ms ease;
 }
 .session-panel.is-collapsed {
-  width: 28px;
+  width: 40px;
   align-items: center;
   padding-top: 10px;
   gap: 10px;
@@ -1390,6 +1390,17 @@ body,
   text-transform: uppercase;
   color: var(--c-dim);
 }
+.session-collapsed-live {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  font: 9px var(--mono);
+  color: var(--c-dim);
+}
+.session-collapsed-live .session-live-dot {
+  background: var(--c-ok);
+}
 
 .session-panel-header {
   height: var(--hud-bar-height);
@@ -1717,7 +1728,7 @@ body,
 }
 .session-timeline-filters .activity-filter {
   flex-shrink: 0;
-  padding: 2px 4px;
+  padding: 2px 3px;
 }
 
 .session-timeline-row {
@@ -3745,6 +3756,12 @@ body,
 }
 
 /* Node resize handle */
+.canvas-node:has(.node-resize-handle) {
+  /* Keep the four-pixel corner grab inside the shell's inner clip, not on
+     its rounded border. The other corners retain the standard card radius. */
+  border-bottom-right-radius: 8px;
+}
+
 .canvas-node .node-resize-handle {
   position: absolute;
   bottom: 0;
@@ -3789,7 +3806,9 @@ html.is-node-dragging .attention-field-layer {
 }
 
 html.is-node-dragging,
-html.is-node-dragging * {
+html.is-node-dragging *,
+html.is-canvas-panning,
+html.is-canvas-panning * {
   cursor: grabbing !important;
   user-select: none !important;
   -webkit-user-select: none !important;

package/src/server/canvas-operations.ts

@@ -726,7 +726,7 @@ function shouldTreatFileContentAsPath(input: CanvasAddNodeInput): boolean {
   const content = input.content?.trim() ?? '';
   if (!content || content.includes('\n') || content.includes('\r')) return false;
   if (typeof input.data?.path === 'string' && input.data.path.length > 0) return true;
-  if (existsSync(resolve(content))) return true;
+  if (existsSync(resolve(canvasState.getWorkspaceRoot(), content))) return true;
   if (!input.title) return true;
   return content.startsWith('/') || content.startsWith('./') || content.startsWith('../') || content.includes('/');
 }
@@ -748,7 +748,7 @@ function buildFileNodeData(input: CanvasAddNodeInput): Record<string, unknown> {
 
   const rawPath =
     typeof input.data?.path === 'string' && input.data.path.length > 0 ? input.data.path : (input.content ?? '');
-  const resolved = resolve(rawPath);
+  const resolved = resolve(canvasState.getWorkspaceRoot(), rawPath);
   const fileName = basename(resolved) || rawPath;
   const data: Record<string, unknown> = {
     ...(input.data ?? {}),