pmx-canvas 0.4.8 → 0.5.1

package/src/shared/agent-presence.ts

@@ -0,0 +1,162 @@
+/**
+ * Agent presence — the contract behind every agent surface in the rail chrome
+ * (rail-chrome-v2 phase 2). Shared by server and client so the two cannot
+ * drift. See design/rail-chrome-v2/PLAN.md, "Phase 2 contract".
+ *
+ * Presence is DERIVED from feeds that already exist (AX activity ingest,
+ * agent-originated mutations) plus an explicit set for adapters with richer
+ * hooks. Nothing here is a second source of truth for work items, gates, or
+ * steering — those stay in the AX state.
+ */
+
+export type AgentPhase = 'idle' | 'thinking' | 'tooling' | 'waiting-approval';
+
+export const AGENT_PHASES: readonly AgentPhase[] = ['idle', 'thinking', 'tooling', 'waiting-approval'];
+
+export interface AgentPresence {
+  /** Writer key: `agentId` when the host supplies one, else the source label. */
+  sessionId: string;
+  /** Host label (copilot, codex, mcp, api, cli, …). */
+  source: string;
+  agentId: string | null;
+  /** Display name. */
+  label: string;
+  phase: AgentPhase;
+  /** Tool or operation name while `tooling`. */
+  detail: string | null;
+  focusNodeId: string | null;
+  /** World coordinates. */
+  cursor: { x: number; y: number } | null;
+  /** A session is attached: `session-start` (or explicit attach) seen and no `session-end`. */
+  attached: boolean;
+  /** Fleet membership: the orchestrating writer's key this worker belongs to (chrome rolls workers up under it). */
+  parentAgentId?: string | null;
+  /** True when steering addressed to this writer can actually reach it: it is
+   * an attached session, or its consumer key has claimed deliveries before. */
+  steerable?: boolean;
+  /** Steers sitting unclaimed in this writer's delivery queue (pump-health:
+   * a growing count means the writer is not polling). Only set for steerable rows. */
+  pendingSteers?: number;
+  /** When this writer's consumer key last claimed its delivery queue — the
+   * proof-of-polling behind `steerable`. Absent for writers that never claimed
+   * (steerable only via an attached adapter loop). */
+  lastClaimAt?: string;
+  /** Agent writes observed for this writer — feeds the external-steering indicator. */
+  opCount: number;
+  /**
+   * The agent's REAL context window, when its host reports it (tokens used /
+   * window size). Null when no adapter reports — the top-bar meter then shows
+   * the pinned-context estimate against the configured budget instead, and
+   * says so.
+   */
+  contextUsage: { used: number; total: number } | null;
+  lastSeenAt: string;
+}
+
+export interface ContextBudget {
+  /** Estimated tokens of the pinned-context payload. */
+  used: number;
+  total: number;
+}
+
+/**
+ * One agent write, as the External Steering activity feed lists it. Derived
+ * from the same presence touch every agent-originated operation already
+ * makes — not a second log.
+ */
+export interface AgentActivityEntry {
+  id: string;
+  at: string;
+  /** Writer key after attribution (the session's when the write was folded into it). */
+  sessionId: string;
+  label: string;
+  /** Registry operation name (node.add, edge.remove, ax.work.create, …). */
+  op: string;
+  /** Human sentence: "Created markdown “Release plan”". */
+  summary: string;
+  nodeId: string | null;
+}
+
+export interface AgentPresenceSnapshot {
+  presences: AgentPresence[];
+  budget: ContextBudget;
+  /** True when any presence is attached — the master gate for agent chrome. */
+  sessionActive: boolean;
+  /** Most recent agent writes, newest first (bounded by MAX_ACTIVITY_ENTRIES). */
+  activity: AgentActivityEntry[];
+}
+
+/** Activity entries kept for the feed — oldest fall off. */
+export const MAX_ACTIVITY_ENTRIES = 50;
+
+/** Unattached writers fade this long after their last write. */
+// 5 min: 90s swept fleets and demos mid-run — a writer the human is looking
+// at kept vanishing (joint-gaps #1 / orchestration #8).
+export const PRESENCE_ACTIVITY_TTL_MS = 5 * 60_000;
+/** Attached sessions expire after this much quiet without a `session-end`. */
+export const PRESENCE_ATTACHED_IDLE_TTL_MS = 30 * 60_000;
+/** `tooling` decays to `idle` after this much quiet. */
+export const PRESENCE_TOOLING_SETTLE_MS = 4_000;
+/** Explicit `thinking` without any fresh touch settles to idle — hosts set it
+ * at turn start and often never send the turn-end idle, leaving three
+ * "Thinking" chips on a silent board. */
+export const PRESENCE_THINKING_SETTLE_MS = 3 * 60_000;
+export const MAX_PRESENCES = 16;
+/** Default `budget.total` when `PMX_CANVAS_CONTEXT_BUDGET_TOKENS` is unset. */
+export const CONTEXT_BUDGET_DEFAULT_TOKENS = 32_000;
+
+/**
+ * Source labels that name a TRANSPORT, not an agent. A write arriving under
+ * one of these while exactly one session is attached is the attached agent's
+ * own work reaching the board through that transport (Copilot/Codex/Claude
+ * Code all write via MCP or HTTP while their host holds the session).
+ */
+export const TRANSPORT_SOURCES: readonly string[] = ['api', 'mcp', 'sdk', 'cli'];
+
+/**
+ * The label a human-started session (*Start agent session* in the browser)
+ * carries until an agent writes into it — the session is a placeholder for
+ * whichever agent comes next, so the first identified writer names it.
+ */
+export const HUMAN_STARTED_SESSION_LABEL = 'Agent session';
+
+/** The one selector every agent surface reads. */
+export function isSessionActive(presences: readonly AgentPresence[]): boolean {
+  return presences.some((presence) => presence.attached);
+}
+
+/** Writers that are live but not attached — the External Steering mode. */
+export function externalWriters(presences: readonly AgentPresence[]): AgentPresence[] {
+  return presences.filter((presence) => !presence.attached);
+}
+
+/** Rough token estimate for a JSON payload (chars / 4) — good enough for a meter. */
+export function estimateTokens(text: string): number {
+  return Math.ceil(text.length / 4);
+}
+
+/** Chip label per phase — shared by the top-bar chip and the on-canvas cursor chip. */
+export function agentPhaseLabel(presence: Pick<AgentPresence, 'phase' | 'detail'>): string {
+  switch (presence.phase) {
+    case 'thinking':
+      return 'Thinking';
+    case 'tooling':
+      return presence.detail ? `Running ${presence.detail}` : 'Working';
+    case 'waiting-approval':
+      return 'Waiting on you';
+    default:
+      return 'Idle';
+  }
+}
+
+/**
+ * Stable per-agent identity hue (0-359) from the writer key. Phase colors
+ * kept telling the human WHAT an agent is doing while erasing WHO — two
+ * thinking agents rendered identically. Identity rides the glyph/border;
+ * phase stays on dots and labels.
+ */
+export function agentIdentityHue(key: string): number {
+  let hash = 5381;
+  for (let i = 0; i < key.length; i++) hash = ((hash << 5) + hash + key.charCodeAt(i)) | 0;
+  return ((hash % 360) + 360) % 360;
+}

package/src/shared/approval-gates.ts

@@ -0,0 +1,35 @@
+/**
+ * Unattended approval policy (rail-chrome-v2 phase 4, design item 3).
+ *
+ * A pending approval gate carries a TTL. If the human does not answer in time
+ * the gate resolves to `held` — the safe default: the action does NOT proceed,
+ * a `policy` entry lands in the timeline, and the gate can be reopened from the
+ * session panel. Shared so the server's sweeper and the client's countdown read
+ * one clock.
+ */
+
+export const DEFAULT_GATE_TTL_MS = 5 * 60_000;
+export const MIN_GATE_TTL_MS = 1_000;
+export const MAX_GATE_TTL_MS = 24 * 60 * 60_000;
+
+export function clampGateTtlMs(value: unknown, fallback = DEFAULT_GATE_TTL_MS): number {
+  const ms = typeof value === 'number' ? value : Number(value);
+  if (!Number.isFinite(ms) || ms <= 0) return fallback;
+  return Math.min(MAX_GATE_TTL_MS, Math.max(MIN_GATE_TTL_MS, Math.floor(ms)));
+}
+
+/** Milliseconds until a gate auto-holds (0 when expired, null when it has no TTL). */
+export function gateRemainingMs(gate: { expiresAt: string | null }, now = Date.now()): number | null {
+  if (!gate.expiresAt) return null;
+  const expires = Date.parse(gate.expiresAt);
+  if (!Number.isFinite(expires)) return null;
+  return Math.max(0, expires - now);
+}
+
+/** `M:SS` for the gate countdown ("auto-holds in 4:31"). */
+export function formatCountdown(ms: number): string {
+  const totalSeconds = Math.max(0, Math.ceil(ms / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}

package/src/shared/auto-arrange.ts

@@ -14,7 +14,6 @@ export interface ArrangeNode {
   position: ArrangePosition;
   size: ArrangeSize;
   pinned: boolean;
-  dockPosition: 'left' | 'right' | null;
   data: Record<string, unknown>;
 }
 
@@ -53,6 +52,8 @@ const UNIT_GAP_Y = 72;
 const COMPONENT_GAP_X = 220;
 const COMPONENT_GAP_Y = 180;
 const MAX_ROW_WIDTH = 3200;
+/** Units whose rects sit within this distance belong to one spatial cluster. */
+const CLUSTER_JOIN_DISTANCE = 320;
 const GROUP_PAD = 40;
 const GROUP_TITLEBAR_HEIGHT = 32;
 
@@ -88,7 +89,7 @@ function buildArrangeUnits(allNodes: ArrangeNode[]): {
   nodesById: Map<string, ArrangeNode>;
   nodeToUnit: Map<string, string>;
 } {
-  const movable = allNodes.filter((node) => !node.pinned && node.dockPosition === null);
+  const movable = allNodes.filter((node) => !node.pinned);
   const nodesById = new Map(movable.map((node) => [node.id, node]));
   const nodeToUnit = new Map<string, string>();
   const units: ArrangeUnit[] = [];
@@ -362,15 +363,70 @@ function computeGraphComponent(
   };
 }
 
-function placeComponents(components: ComponentLayout[]): Map<string, ArrangePosition> {
+/**
+ * Partition units into SPATIAL clusters of the current layout: units whose
+ * rects sit within CLUSTER_JOIN_DISTANCE of each other, plus units joined by
+ * an edge (a component must lay out together). Arranging then works per
+ * cluster, anchored at the cluster's own neighborhood — a global repack
+ * interleaved unrelated areas of the board (the QA cards and a demo cluster
+ * parked 10k units away) and destroyed spatial memory.
+ */
+function collectSpatialClusters(units: ArrangeUnit[], undirected: Map<string, Set<string>>): ArrangeUnit[][] {
+  const parent = new Map<string, string>(units.map((unit) => [unit.id, unit.id]));
+  const find = (id: string): string => {
+    let root = id;
+    while (parent.get(root) !== root) root = parent.get(root)!;
+    let cursor = id;
+    while (parent.get(cursor) !== cursor) {
+      const next = parent.get(cursor)!;
+      parent.set(cursor, root);
+      cursor = next;
+    }
+    return root;
+  };
+  const union = (a: string, b: string): void => {
+    const ra = find(a);
+    const rb = find(b);
+    if (ra !== rb) parent.set(ra, rb);
+  };
+
+  const pad = CLUSTER_JOIN_DISTANCE / 2;
+  for (let i = 0; i < units.length; i++) {
+    for (let j = i + 1; j < units.length; j++) {
+      const a = units[i];
+      const b = units[j];
+      const near =
+        a.origin.x - pad < b.origin.x + b.size.width + pad &&
+        a.origin.x + a.size.width + pad > b.origin.x - pad &&
+        a.origin.y - pad < b.origin.y + b.size.height + pad &&
+        a.origin.y + a.size.height + pad > b.origin.y - pad;
+      if (near) union(a.id, b.id);
+    }
+  }
+  for (const [from, neighbors] of undirected) {
+    for (const to of neighbors) if (parent.has(from) && parent.has(to)) union(from, to);
+  }
+
+  const byRoot = new Map<string, ArrangeUnit[]>();
+  for (const unit of units) {
+    const root = find(unit.id);
+    if (!byRoot.has(root)) byRoot.set(root, []);
+    byRoot.get(root)!.push(unit);
+  }
+  const clusters = Array.from(byRoot.values());
+  for (const cluster of clusters) cluster.sort((a, b) => a.sortKey.y - b.sortKey.y || a.sortKey.x - b.sortKey.x);
+  return clusters.sort((a, b) => a[0].sortKey.y - b[0].sortKey.y || a[0].sortKey.x - b[0].sortKey.x);
+}
+
+function placeComponents(components: ComponentLayout[], origin: ArrangePosition): Map<string, ArrangePosition> {
   const absolute = new Map<string, ArrangePosition>();
-  let cursorX = START_X;
-  let cursorY = START_Y;
+  let cursorX = origin.x;
+  let cursorY = origin.y;
   let rowHeight = 0;
 
   for (const component of components) {
-    if (cursorX > START_X && cursorX + component.size.width > MAX_ROW_WIDTH) {
-      cursorX = START_X;
+    if (cursorX > origin.x && cursorX - origin.x + component.size.width > MAX_ROW_WIDTH) {
+      cursorX = origin.x;
       cursorY += rowHeight + COMPONENT_GAP_Y;
       rowHeight = 0;
     }
@@ -403,12 +459,64 @@ export function computeAutoArrange(
   }
 
   const { outgoing, undirected, indegree, outdegree } = buildUnitGraphs(units, nodeToUnit, allEdges);
-  const components = collectComponents(units, undirected).map((component) =>
-    mode === 'graph'
-      ? computeGraphComponent(component, outgoing, undirected, indegree, outdegree)
-      : computeGridComponent(component),
-  );
-  const absoluteUnitPositions = placeComponents(components);
+  const clusters = collectSpatialClusters(units, undirected);
+  const absoluteUnitPositions = new Map<string, ArrangePosition>();
+  // Already-packed cluster rects: a cluster that grew past its old bounds is
+  // shifted below earlier clusters instead of overlapping them. Clusters are
+  // processed top-left first, so the cascade is deterministic.
+  const packedRects: Array<ArrangePosition & ArrangeSize> = [];
+
+  for (const clusterUnits of clusters) {
+    const components = collectComponents(clusterUnits, undirected).map((component) =>
+      mode === 'graph'
+        ? computeGraphComponent(component, outgoing, undirected, indegree, outdegree)
+        : computeGridComponent(component),
+    );
+    // Anchor the cluster at its own neighborhood, not a global origin.
+    const origin = {
+      x: Math.min(...clusterUnits.map((unit) => unit.origin.x)),
+      y: Math.min(...clusterUnits.map((unit) => unit.origin.y)),
+    };
+    const placed = placeComponents(components, origin);
+
+    const unitSizes = new Map(clusterUnits.map((unit) => [unit.id, unit.size]));
+    const boundsOf = (positions: Map<string, ArrangePosition>): ArrangePosition & ArrangeSize => {
+      let minX = Number.POSITIVE_INFINITY;
+      let minY = Number.POSITIVE_INFINITY;
+      let maxX = Number.NEGATIVE_INFINITY;
+      let maxY = Number.NEGATIVE_INFINITY;
+      for (const [unitId, position] of positions) {
+        const size = unitSizes.get(unitId);
+        if (!size) continue;
+        minX = Math.min(minX, position.x);
+        minY = Math.min(minY, position.y);
+        maxX = Math.max(maxX, position.x + size.width);
+        maxY = Math.max(maxY, position.y + size.height);
+      }
+      return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    };
+
+    let shifted = placed;
+    for (let attempt = 0; attempt <= packedRects.length; attempt++) {
+      const bounds = boundsOf(shifted);
+      const blockers = packedRects.filter(
+        (rect) =>
+          bounds.x < rect.x + rect.width + COMPONENT_GAP_X &&
+          bounds.x + bounds.width + COMPONENT_GAP_X > rect.x &&
+          bounds.y < rect.y + rect.height + COMPONENT_GAP_Y &&
+          bounds.y + bounds.height + COMPONENT_GAP_Y > rect.y,
+      );
+      if (blockers.length === 0) break;
+      const deltaY = Math.max(...blockers.map((rect) => rect.y + rect.height)) + COMPONENT_GAP_Y - bounds.y;
+      if (deltaY <= 0) break;
+      const next = new Map<string, ArrangePosition>();
+      for (const [unitId, position] of shifted) next.set(unitId, { x: position.x, y: position.y + deltaY });
+      shifted = next;
+    }
+
+    for (const [unitId, position] of shifted) absoluteUnitPositions.set(unitId, position);
+    packedRects.push(boundsOf(shifted));
+  }
 
   for (const unit of units) {
     const targetOrigin = absoluteUnitPositions.get(unit.id);

package/src/shared/ax-kinds.ts

@@ -0,0 +1,23 @@
+/**
+ * AX status and kind unions shared by the server's state model and the
+ * client's session panel, so a new status cannot be added on one side and
+ * silently render unrecognized on the other.
+ */
+export type AxWorkItemStatus = 'todo' | 'in-progress' | 'blocked' | 'done' | 'cancelled';
+
+/** `held` = auto-held by the unattended-approval policy: the action did NOT proceed. */
+export type AxApprovalStatus = 'pending' | 'approved' | 'rejected' | 'held';
+
+export type AxEventKind =
+  | 'prompt'
+  | 'assistant-message'
+  | 'tool-start'
+  | 'tool-result'
+  | 'failure'
+  | 'approval'
+  | 'steering'
+  | 'command'
+  | 'note'
+  | 'policy'
+  /** A human took over a node the agent was editing; the agent yielded (rail-chrome-v2 item 6). */
+  | 'yield';

package/src/shared/human-presence.ts

@@ -0,0 +1,30 @@
+/**
+ * Human collaborator presence (rail-chrome-v2 phase 8, design items 5 and 6).
+ * Every open workbench tab is a client; the server fans the set out over SSE
+ * so tabs see each other's cursors, and an agent write to a node a human is
+ * holding is refused until the grab ends (user wins). In-memory, TTL-swept,
+ * never persisted — like agent presence.
+ */
+export interface HumanPresence {
+  /** Per-tab id (sessionStorage), never an identity. */
+  clientId: string;
+  /** Display name shown on the cursor tag. */
+  name: string;
+  /** World coordinates of the pointer, null when it left the canvas. */
+  cursor: { x: number; y: number } | null;
+  /** The node this human is dragging or editing right now. */
+  grabbingNodeId: string | null;
+  lastSeenAt: string;
+}
+
+export interface HumanPresenceSnapshot {
+  humans: HumanPresence[];
+}
+
+/** A tab that stops reporting is gone after this. */
+export const HUMAN_PRESENCE_TTL_MS = 30_000;
+/** A grab the tab stops renewing (crash, tab closed mid-drag) releases after this. */
+export const HUMAN_GRAB_TTL_MS = 8_000;
+/** Cursor updates are throttled to this on the client. */
+export const HUMAN_CURSOR_THROTTLE_MS = 80;
+export const MAX_HUMANS = 32;

package/src/shared/iframe-probe.ts

@@ -0,0 +1,8 @@
+/**
+ * Handshake contract between /api/canvas/iframe-probe (server document) and
+ * probeSrcIframes (client). The probe document posts this marker to its parent;
+ * receiving it is the ONLY proof that src-URL iframes truly load — hosts that
+ * block sub-frame requests (the Claude Code desktop browser) still fire `load`
+ * on the error page they commit instead.
+ */
+export const IFRAME_PROBE_MESSAGE_SOURCE = 'pmx-canvas-iframe-probe';

package/src/shared/scope-fence.ts

@@ -0,0 +1,31 @@
+/**
+ * Scope fence geometry shared by the server's enforcement and the client's
+ * rendering so both draw the same box: the bounding box of the fenced nodes
+ * plus `padding` px. Null when none of the fenced nodes exist.
+ */
+export interface FenceRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function fenceRectFromNodes(
+  nodes: Iterable<{ position: { x: number; y: number }; size: { width: number; height: number } }>,
+  padding: number,
+): FenceRect | null {
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  let count = 0;
+  for (const node of nodes) {
+    count += 1;
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + node.size.width);
+    maxY = Math.max(maxY, node.position.y + node.size.height);
+  }
+  if (count === 0) return null;
+  return { x: minX - padding, y: minY - padding, width: maxX - minX + padding * 2, height: maxY - minY + padding * 2 };
+}

package/dist/types/client/canvas/DockedNode.d.ts

@@ -1,4 +0,0 @@
-import type { CanvasNodeState } from '../types';
-export declare function DockedNode({ node }: {
-    node: CanvasNodeState;
-}): import("preact/src").JSX.Element;

package/src/client/canvas/DockedNode.tsx

@@ -1,165 +0,0 @@
-import { ContextNode } from '../nodes/ContextNode';
-import { LedgerNode } from '../nodes/LedgerNode';
-import { StatusNode } from '../nodes/StatusNode';
-import { StatusSummary } from '../nodes/StatusSummary';
-import { closeAttentionHistory } from '../state/attention-store';
-import { getContextPinnedNodes, toggleCollapsed, undockNode } from '../state/canvas-store';
-import { TYPE_LABELS } from '../types';
-import type { CanvasNodeState } from '../types';
-
-function renderDockedContent(node: CanvasNodeState) {
-  switch (node.type) {
-    case 'status':
-      return <StatusNode node={node} />;
-    case 'ledger':
-      return <LedgerNode node={node} />;
-    case 'context':
-      return <ContextNode node={node} />;
-    default:
-      return null;
-  }
-}
-
-function getContextItemCount(node: CanvasNodeState): number {
-  const cards = Array.isArray(node.data.cards) ? (node.data.cards as unknown[]) : [];
-  const auxTabs = Array.isArray(node.data.auxTabs) ? (node.data.auxTabs as unknown[]) : [];
-  return cards.length + auxTabs.length;
-}
-
-function ContextDockedNode({ node }: { node: CanvasNodeState }) {
-  const pinnedNodes = getContextPinnedNodes();
-  const count = pinnedNodes.length > 0 ? pinnedNodes.length : getContextItemCount(node);
-  const hasItems = count > 0;
-  const collapsed = node.collapsed === true;
-
-  const expand = () => {
-    // Mutual exclusion with the Updates panel — only one side panel open at a
-    // time. They share the same right-edge anchor, so opening both at once
-    // would visually collide.
-    closeAttentionHistory();
-    toggleCollapsed(node.id);
-  };
-
-  if (collapsed) {
-    // Collapsed = a menu-height pill in the right of the top HUD row, mirroring
-    // the docked status widget on the left so the bar reads as one continuous menu.
-    return (
-      <div class="docked-node docked-node--collapsed" data-docked-node="true">
-        <div class="docked-node-header">
-          <span class="node-type-badge">Context</span>
-          {hasItems && (
-            <span class="docked-node-count" aria-hidden="true">
-              {count > 99 ? '99+' : count}
-            </span>
-          )}
-          <div class="docked-node-controls">
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                expand();
-              }}
-              title={
-                hasItems ? `${count} item${count === 1 ? '' : 's'} in agent context — expand` : 'Expand agent context'
-              }
-              aria-label={hasItems ? `Context — ${count} item${count === 1 ? '' : 's'}` : 'Expand agent context'}
-            >
-              {'▸'}
-            </button>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                undockNode(node.id);
-              }}
-              title="Undock to canvas"
-              aria-label="Undock to canvas"
-            >
-              {'⊙'}
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <aside class="context-dock-panel" data-docked-node="true" aria-label="Agent context">
-      <div class="context-dock-header">
-        <div class="context-dock-header-text">
-          <span class="context-dock-title">Context</span>
-          <span class="context-dock-subtitle">
-            {hasItems ? `${count} item${count === 1 ? '' : 's'} in agent context` : 'Active agent context'}
-          </span>
-        </div>
-        <div class="context-dock-controls">
-          <button
-            type="button"
-            class="context-dock-icon-button"
-            onClick={(e) => {
-              e.stopPropagation();
-              undockNode(node.id);
-            }}
-            aria-label="Undock to canvas"
-            title="Undock to canvas"
-          >
-            {'\u2299'}
-          </button>
-          <button
-            type="button"
-            class="context-dock-icon-button"
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleCollapsed(node.id);
-            }}
-            aria-label="Collapse context panel"
-            title="Collapse"
-          >
-            ×
-          </button>
-        </div>
-      </div>
-      <div class="context-dock-body">
-        <ContextNode node={node} pinnedNodes={pinnedNodes} />
-      </div>
-    </aside>
-  );
-}
-
-export function DockedNode({ node }: { node: CanvasNodeState }) {
-  if (node.type === 'context') {
-    return <ContextDockedNode node={node} />;
-  }
-
-  return (
-    <div class={`docked-node${node.collapsed ? ' docked-node--collapsed' : ''}`} data-docked-node="true">
-      <div class="docked-node-header">
-        <span class="node-type-badge">{TYPE_LABELS[node.type] ?? node.type}</span>
-        {node.type === 'status' && node.collapsed && <StatusSummary node={node} />}
-        <div class="docked-node-controls">
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleCollapsed(node.id);
-            }}
-            title={node.collapsed ? 'Expand' : 'Collapse'}
-          >
-            {node.collapsed ? '\u25B8' : '\u25BE'}
-          </button>
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              undockNode(node.id);
-            }}
-            title="Undock to canvas"
-          >
-            {'\u2299'}
-          </button>
-        </div>
-      </div>
-      {!node.collapsed && <div class="docked-node-body">{renderDockedContent(node)}</div>}
-    </div>
-  );
-}