pmx-canvas 0.7.3 → 0.8.0

package/src/server/scope-fence.ts

@@ -25,6 +25,7 @@
  */
 import { type FenceRect, fenceRectFromNodes } from '../shared/scope-fence.js';
 import { canvasState } from './canvas-state.js';
+import { resolvePatchGeometry, validCanvasNodeUpdates } from './canvas-geometry.js';
 import type { Operation } from './operations/types.js';
 
 /** Bounding box of the fenced nodes plus padding; null when none of them exist. */
@@ -103,6 +104,48 @@ function groupChildren(input: Record<string, unknown>): string[] {
   return 'children' in data ? stringList(data.children) : [];
 }
 
+/** Automatic frames are write targets when their descendants can cause a re-fit.
+ * Conservatively include them even if the resulting bounds happen to be equal.
+ * A manual frame does not re-fit, so propagation stops there. */
+function includeAutoFrameParents(nodeIds: string[]): string[] {
+  const targets = new Set(nodeIds);
+  for (const id of targets) {
+    const parentId = canvasState.getNode(id)?.data.parentGroup;
+    if (typeof parentId !== 'string') continue;
+    const parent = canvasState.getNode(parentId);
+    if (parent?.type === 'group' && parent.data.frameMode !== 'manual') targets.add(parentId);
+  }
+  return [...targets];
+}
+
+/** `canvasState.applyUpdates`: group moves translate children unless that child has its own position update. */
+function applyUpdatesTarget(input: Record<string, unknown>): FenceTarget {
+  const updates = validCanvasNodeUpdates(input.updates);
+  const explicitPositionIds = new Set(
+    updates.filter((update) => update.position !== undefined).map((update) => update.id),
+  );
+  const nodeIds: string[] = [];
+  const points: Array<{ x: number; y: number }> = [];
+  for (const update of updates) {
+    const id = update.id;
+    nodeIds.push(id);
+    if (!update.position) continue;
+    const { x, y } = update.position;
+    points.push({ x, y });
+    const node = canvasState.getNode(id);
+    if (node?.type !== 'group') continue;
+    const deltaX = x - node.position.x;
+    const deltaY = y - node.position.y;
+    for (const childId of stringList(node.data.children)) {
+      if (explicitPositionIds.has(childId)) continue;
+      nodeIds.push(childId);
+      const child = canvasState.getNode(childId);
+      if (child) points.push({ x: child.position.x + deltaX, y: child.position.y + deltaY });
+    }
+  }
+  return { nodeIds: includeAutoFrameParents(nodeIds), points };
+}
+
 function createTarget(input: Record<string, unknown>, extraNodeIds: string[] = []): FenceTarget {
   const x = Number(input.x);
   const y = Number(input.y);
@@ -118,17 +161,19 @@ export function describeOpTarget(op: Operation, rawInput: unknown): FenceTarget
   const input = asRecord(rawInput);
   if (BOARD_WIDE_OPS.has(op.name)) return { boardWide: true };
   switch (op.name) {
+    case 'canvas.apply-updates':
+      return applyUpdatesTarget(input);
     case 'node.update': {
-      // A group's membership change reparents (and may reposition) its children.
-      const nodeIds = [str(input.id), ...groupChildren(input)];
-      // A move's DESTINATION must also land inside the fence — otherwise an
-      // agent relocates a fenced node outward, and since the fence rect is
-      // derived from live node positions, that grows its own writable region
-      // past the human-seeded region.
-      const x = Number(input.x);
-      const y = Number(input.y);
-      if (Number.isFinite(x) && Number.isFinite(y)) return { points: [{ x, y }], nodeIds };
-      return { nodeIds };
+      const id = str(input.id);
+      const existing = canvasState.getNode(id);
+      const geometry = existing ? resolvePatchGeometry(input, existing) : {};
+      // Share the bulk translation rules after resolving PATCH aliases and
+      // omitted axes. Check children's destinations as well as the group origin.
+      const target = applyUpdatesTarget({ updates: [{ id, ...geometry }] });
+      return {
+        ...target,
+        nodeIds: includeAutoFrameParents([id, ...(target.nodeIds ?? []), ...groupChildren(input)]),
+      };
     }
     case 'node.remove':
       return { nodeIds: [str(input.id)] };

package/src/server/server.ts

@@ -62,8 +62,10 @@ import { getMcpAppHostSnapshot } from './mcp-app-host.js';
 import { closeMcpAppSession, closeAllMcpAppSessions } from './mcp-app-runtime.js';
 import { findOpenCanvasPosition } from './placement.js';
 import { overlapsAny } from '../shared/placement.js';
+import { CANVAS_APP_WRITE_CONTRACT } from '../shared/canvas-app.js';
+import { withoutExternalMcp } from './mcp-app-runtime.js';
 import { mutationHistory } from './mutation-history.js';
-import { buildAgentContextPreamble } from './agent-context.js';
+import { buildAgentContextPreamble } from '../shared/agent-context.js';
 import { buildCanvasAxSurfaceSnapshot } from './ax-context.js';
 import { resolveNodeAxCapabilities } from './ax-interaction.js';
 import { normalizeCanvasTheme, type CanvasTheme } from './canvas-db.js';
@@ -145,20 +147,27 @@ agentPresence.setSessionStartListener((presence) => {
   const startedAt = new Date().toISOString();
   return canvasState.saveSnapshot(`Before session · ${presence.label} · ${startedAt.slice(11, 16)}`)?.id ?? null;
 });
-agentPresence.setSessionEndListener((presence, startSnapshotId, endedBy) => {
+agentPresence.setSessionEndListener((presence, startSnapshotId, endedBy, startedAt) => {
   const ax = canvasState.getAxState();
   const endedAt = new Date().toISOString();
+  const layout = canvasState.getLayout();
   let snapshot = startSnapshotId
     ? (canvasState.listSnapshots({ all: true }).find((entry) => entry.id === startSnapshotId) ?? null)
     : null;
-  let unchanged = !startSnapshotId && canvasState.getLayout().nodes.length === 0;
+  let unchanged = !startSnapshotId && layout.nodes.length === 0;
+  // Nodes the session added and changed: the diff against the start snapshot,
+  // or every node when the board was empty at attach (no snapshot was taken).
+  let addedIds = startSnapshotId ? new Set<string>() : new Set(layout.nodes.map((node) => node.id));
+  let modifiedIds = new Set<string>();
   // A session that changed NOTHING on the board leaves no snapshot behind —
   // session churn (idle timeouts, receipt tests, attach/detach cycles) was
   // flooding the History drawer with identical boards.
   if (snapshot) {
     const snapData = canvasState.getSnapshotData(snapshot.id);
     if (snapData) {
-      const diff = diffLayouts(snapData.name, snapData, canvasState.getLayout());
+      const diff = diffLayouts(snapData.name, snapData, layout);
+      addedIds = new Set(diff.addedNodes.map((node) => node.id));
+      modifiedIds = new Set(diff.modifiedNodes.map((node) => node.id));
       if (
         diff.addedNodes.length === 0 &&
         diff.removedNodes.length === 0 &&
@@ -188,6 +197,10 @@ agentPresence.setSessionEndListener((presence, startSnapshotId, endedBy) => {
     rejected: ax.approvalGates.filter((gate) => gate.status === 'rejected').length,
     held: ax.approvalGates.filter((gate) => gate.status === 'held').length,
   };
+  const context = sessionContextActivity(layout.nodes, startedAt, addedIds, modifiedIds);
+  // Reading or pinning is something the human wants to see even when the
+  // board itself did not change ("did the agent read what I pinned?").
+  if (context.read.length > 0 || context.pinned.length > 0) unchanged = false;
   // No agent `sessionId` here: the SSE envelope reserves that key for the
   // workbench session and would overwrite it. The label is what the receipt shows.
   emitPrimaryWorkbenchEvent('agent-session-ended', {
@@ -198,9 +211,63 @@ agentPresence.setSessionEndListener((presence, startSnapshotId, endedBy) => {
     counts,
     unchanged,
     snapshot: snapshot ? { id: snapshot.id, name: snapshot.name } : null,
+    context,
   });
 });
 
+interface ReceiptNode {
+  id: string;
+  title: string;
+  reason?: string;
+}
+
+/**
+ * What an agent session did with the board's context (docs/design/AgentContext.dc.html
+ * lens and receipt): nodes read since it attached, pins it made, nodes it created and
+ * edited, and pinned nodes whose content changed after the latest read.
+ */
+function sessionContextActivity(
+  nodes: CanvasNodeState[],
+  startedAt: string | null,
+  addedIds: Set<string>,
+  modifiedIds: Set<string>,
+): {
+  read: ReceiptNode[];
+  pinned: ReceiptNode[];
+  created: ReceiptNode[];
+  edited: ReceiptNode[];
+  changedSinceRead: ReceiptNode[];
+} {
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const entry = (node: CanvasNodeState): ReceiptNode => ({
+    id: node.id,
+    title: typeof node.data.title === 'string' && node.data.title.trim() ? node.data.title : node.id,
+  });
+  const boardId = canvasState.activeBoardId;
+  const read = startedAt
+    ? canvasState.getReadNodeIdsSince(boardId, startedAt).flatMap((id) => {
+        const node = byId.get(id);
+        return node ? [entry(node)] : [];
+      })
+    : [];
+  const pinned = Object.entries(canvasState.getContextPinMeta()).flatMap(([id, meta]) => {
+    const node = byId.get(id);
+    if (!node || meta.pinnedBy.actor !== 'agent' || !startedAt || meta.pinnedAt < startedAt) return [];
+    return [{ ...entry(node), ...(meta.reason ? { reason: meta.reason } : {}) }];
+  });
+  const created = nodes.filter((node) => addedIds.has(node.id) && node.createdBy?.actor === 'agent').map(entry);
+  const edited = nodes.filter((node) => modifiedIds.has(node.id) && node.lastEditedBy?.actor === 'agent').map(entry);
+  const readStatus = new Map(canvasState.getNodeReadStatus(boardId).map((status) => [status.nodeId, status]));
+  const changedSinceRead = [...canvasState.contextPinnedNodeIds].flatMap((id) => {
+    const node = byId.get(id);
+    const status = readStatus.get(id);
+    // Only pins this session read: the receipt says "changed after <agent> read it".
+    const readThisSession = status && startedAt !== null && status.lastReadAt >= startedAt;
+    return node && status && readThisSession && (node.contentRevision ?? 0) > status.readRevision ? [entry(node)] : [];
+  });
+  return { read, pinned, created, edited, changedSinceRead };
+}
+
 // Webview-runner wiring (plan-008 Wave 3): the webview ops never import this
 // module — the Bun.WebView automation runner is injected here, mirroring the
 // setOperationEventEmitter pattern. The closures call the real automation
@@ -1181,6 +1248,7 @@ const CANVAS_STATIC_MIME: Record<string, string> = {
   '.json': 'application/json',
   '.map': 'application/json',
   '.wasm': 'application/wasm',
+  '.woff2': 'font/woff2',
 };
 
 const CANVAS_FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
@@ -3263,6 +3331,7 @@ export interface CanvasServerOptions {
   workspaceRoot?: string;
   autoOpenBrowser?: boolean;
   allowPortFallback?: boolean;
+  allowExternalMcp?: boolean;
 }
 
 export function startCanvasServer(options: CanvasServerOptions = {}): string | null {
@@ -3281,6 +3350,12 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
     primaryWorkbenchAutoOpenEnabled = options.autoOpenBrowser;
   }
 
+  // A recorded agent read changes what the workbench marks as read; tell the
+  // browser only (an MCP notification would make a read cause more reads).
+  canvasState.setContextReadListener((boardId) => {
+    emitPrimaryWorkbenchEvent('context-status-changed', { boardId });
+  });
+
   // Ensure direct HTTP server usage records undo/redo history, not just PmxCanvas.start().
   canvasState.onMutation((info) => {
     mutationHistory.record({
@@ -3304,7 +3379,9 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
   if (loaded) {
     console.log('  Canvas state restored from .pmx-canvas/canvas.db');
     primeCanvasRuntimeBackends({ forceRehydrateExtApps: true });
-    void syncCanvasRuntimeBackends({ forceRehydrateExtApps: true, alreadyPrimed: true }).finally(() => {
+    const rehydrate = () => syncCanvasRuntimeBackends({ forceRehydrateExtApps: true, alreadyPrimed: true });
+    const pending = options.allowExternalMcp === false ? withoutExternalMcp(rehydrate) : rehydrate();
+    void pending.finally(() => {
       emitPrimaryWorkbenchEvent('canvas-layout-update', { layout: canvasState.getLayout() });
     });
   }
@@ -3361,6 +3438,7 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
               workspace: activeWorkspaceRoot,
               pid: process.pid,
               version: serverPackageVersion(),
+              contracts: [CANVAS_APP_WRITE_CONTRACT],
               persistence: canvasState.persistenceHealth,
             });
           }

package/src/server/spatial-analysis.ts

@@ -11,7 +11,7 @@
  */
 
 import type { CanvasAnnotation, CanvasNodeState, CanvasEdge } from './canvas-state.js';
-import { summarizeNodeForAgentContext } from './agent-context.js';
+import { summarizeNodeForAgentContext } from '../shared/agent-context.js';
 
 // ── Types ────────────────────────────────────────────────────────────
 
@@ -73,7 +73,7 @@ export interface SpatialContext {
 // ── Helpers ──────────────────────────────────────────────────────────
 
 /** Euclidean distance between two node centers */
-function centerDistance(a: CanvasNodeState, b: CanvasNodeState): number {
+export function centerDistance(a: CanvasNodeState, b: CanvasNodeState): number {
   const ax = a.position.x + a.size.width / 2;
   const ay = a.position.y + a.size.height / 2;
   const bx = b.position.x + b.size.width / 2;

package/src/server/workboard.ts

@@ -77,7 +77,12 @@ export function buildWorkboardSpec(workItems: PmxAxWorkItem[]): JsonRenderSpec {
         };
         cardChildren.push(`${cardId}-detail`);
       }
-      elements[cardId] = { type: 'Card', props: { title: item.title }, children: cardChildren };
+      // wrap-anywhere: an unbreakable token in a title must wrap, not spill into the next column.
+      elements[cardId] = {
+        type: 'Card',
+        props: { title: item.title, className: 'wrap-anywhere' },
+        children: cardChildren,
+      };
       columnChildren.push(cardId);
     }
     elements[columnId] = {

package/src/{server → shared}/agent-context.ts

@@ -1,5 +1,5 @@
-import type { CanvasNodeState } from './canvas-state.js';
-import { getCanvasNodeKind } from '../shared/canvas-node-kind.js';
+import type { CanvasNodeState } from '../server/canvas-state.js';
+import { getCanvasNodeKind } from './canvas-node-kind.js';
 
 const DEFAULT_CONTEXT_TEXT_LENGTH = 700;
 const DEFAULT_WEBPAGE_CONTEXT_TEXT_LENGTH = 1600;

package/src/shared/agent-presence.ts

@@ -1,7 +1,7 @@
 /**
- * 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".
+ * Agent presence — the contract behind every agent surface in the rail chrome.
+ * Shared by server and client so the two cannot drift. See
+ * docs/ax-state-contract.md, "Agent presence (contract)".
  *
  * Presence is DERIVED from feeds that already exist (AX activity ingest,
  * agent-originated mutations) plus an explicit set for adapters with richer
@@ -148,15 +148,3 @@ export function agentPhaseLabel(presence: Pick<AgentPresence, 'phase' | 'detail'
       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/canvas-app.ts

@@ -0,0 +1,62 @@
+import { z } from 'zod';
+
+export const CANVAS_APP_URI = 'ui://pmx/canvas';
+// Independent of package version: older builds can share the same version.
+export const CANVAS_APP_WRITE_CONTRACT = 'pmx-embedded-workbench-v4';
+
+const point = z.object({ x: z.number(), y: z.number() });
+export const canvasAppSnapshotSchema = z.object({
+  boardId: z.string().nullable(),
+  boardName: z.string(),
+  boards: z.array(z.object({ id: z.string(), name: z.string() })),
+  // A digest of this projection, not the board's content-delta cursor.
+  revision: z.string(),
+  nodes: z.array(
+    z.object({
+      id: z.string(),
+      type: z.string(),
+      title: z.string(),
+      text: z.string(),
+      contentRevision: z.number().int().nonnegative(),
+      // Only standalone Markdown within the editing limit; never a truncated draft.
+      editableContent: z.string().optional(),
+      position: point,
+      size: z.object({ width: z.number(), height: z.number() }),
+      image: z.string().optional(),
+    }),
+  ),
+  edges: z.array(z.object({ id: z.string(), from: z.string(), to: z.string(), label: z.string() })),
+  pinnedNodeIds: z.array(z.string()),
+});
+
+export type CanvasAppSnapshot = z.infer<typeof canvasAppSnapshotSchema>;
+
+/** Share only curated text, never image bytes or the whole board's contents. */
+export function canvasAppContext(
+  snapshot: Pick<CanvasAppSnapshot, 'boardId' | 'boardName' | 'pinnedNodeIds'> & {
+    nodes: Pick<CanvasAppSnapshot['nodes'][number], 'id' | 'type' | 'title' | 'text' | 'contentRevision'>[];
+  },
+  selectedIds: string[],
+  focusedIds: string[] = [],
+) {
+  const existing = new Set(snapshot.nodes.map((node) => node.id));
+  const selected = new Set(selectedIds.filter((id) => existing.has(id)).slice(0, 20));
+  const pinned = new Set(snapshot.pinnedNodeIds.filter((id) => existing.has(id)).slice(0, 20));
+  const focused = new Set(focusedIds.filter((id) => existing.has(id)).slice(0, 20));
+  return {
+    boardId: snapshot.boardId,
+    boardName: snapshot.boardName,
+    selectedNodeIds: [...selected],
+    focusedNodeIds: [...focused],
+    pinnedNodeIds: [...pinned],
+    nodes: snapshot.nodes
+      .filter((node) => selected.has(node.id) || pinned.has(node.id) || focused.has(node.id))
+      .map((node) => ({
+        id: node.id,
+        type: node.type,
+        title: node.title,
+        contentRevision: node.contentRevision,
+        text: node.text.slice(0, 700),
+      })),
+  };
+}

package/src/shared/themes.ts

@@ -11,8 +11,8 @@
  */
 
 export const CANVAS_THEMES = [
-  'dark',
-  'light',
+  'harbor',
+  'daylight',
   'high-contrast',
   'midnight',
   'sepia',
@@ -28,7 +28,7 @@ export function isCanvasTheme(value: unknown): value is CanvasThemeName {
   return typeof value === 'string' && (CANVAS_THEMES as readonly string[]).includes(value);
 }
 
-export function normalizeCanvasThemeName(value: unknown, fallback: CanvasThemeName = 'dark'): CanvasThemeName {
+export function normalizeCanvasThemeName(value: unknown, fallback: CanvasThemeName = 'harbor'): CanvasThemeName {
   return isCanvasTheme(value) ? value : fallback;
 }
 
@@ -43,8 +43,8 @@ export interface CanvasThemeMeta {
 }
 
 export const CANVAS_THEME_META: Record<CanvasThemeName, CanvasThemeMeta> = {
-  dark: { label: 'Dark', scheme: 'dark', swatchBg: '#081524', swatchAccent: '#4BBCFF' },
-  light: { label: 'Light', scheme: 'light', swatchBg: '#F4EFE6', swatchAccent: '#1A7ABF' },
+  harbor: { label: 'Harbor', scheme: 'dark', swatchBg: '#081524', swatchAccent: '#4BBCFF' },
+  daylight: { label: 'Daylight', scheme: 'light', swatchBg: '#F6F7F9', swatchAccent: '#1A7ABF' },
   'high-contrast': { label: 'High contrast', scheme: 'dark', swatchBg: '#000000', swatchAccent: '#00ffff' },
   midnight: { label: 'Midnight', scheme: 'dark', swatchBg: '#0A0D1C', swatchAccent: '#8B96FF' },
   sepia: { label: 'Sepia', scheme: 'light', swatchBg: '#F2E7D5', swatchAccent: '#B4632C' },

package/src/client/canvas/FocusFieldLayer.tsx

@@ -1,116 +0,0 @@
-import { attentionPrimaryNodeIds, attentionRegions, attentionSecondaryNodeIds } from '../state/attention-store';
-import { nodes } from '../state/canvas-store';
-
-interface Rect {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-function getNodeRect(nodeId: string): Rect | null {
-  const node = nodes.value.get(nodeId);
-  if (!node) return null;
-  return {
-    left: node.position.x,
-    top: node.position.y,
-    width: node.size.width,
-    height: node.size.height,
-  };
-}
-
-function getRegionRect(nodeIds: string[]): Rect | null {
-  const rects = nodeIds.map((nodeId) => getNodeRect(nodeId)).filter((rect): rect is Rect => rect !== null);
-  if (rects.length === 0) return null;
-
-  const minLeft = Math.min(...rects.map((rect) => rect.left));
-  const minTop = Math.min(...rects.map((rect) => rect.top));
-  const maxRight = Math.max(...rects.map((rect) => rect.left + rect.width));
-  const maxBottom = Math.max(...rects.map((rect) => rect.top + rect.height));
-  const padX = 54;
-  const padY = 46;
-
-  return {
-    left: minLeft - padX,
-    top: minTop - padY,
-    width: maxRight - minLeft + padX * 2,
-    height: maxBottom - minTop + padY * 2,
-  };
-}
-
-function rectStyle(rect: Rect, radius: number): Record<string, string> {
-  return {
-    left: `${rect.left}px`,
-    top: `${rect.top}px`,
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    borderRadius: `${radius}px`,
-  };
-}
-
-export function FocusFieldLayer() {
-  const primaryNodeIds = Array.from(attentionPrimaryNodeIds.value);
-  const secondaryNodeIds = Array.from(attentionSecondaryNodeIds.value);
-  const regions = attentionRegions.value;
-
-  if (primaryNodeIds.length === 0 && secondaryNodeIds.length === 0) return null;
-
-  // A region that spans (nearly) the whole populated board distinguishes
-  // nothing — pins far apart degrade the glow into a border around
-  // everything. Skip those; the per-node halos still mark the pins.
-  const all = [...nodes.value.values()];
-  const boardArea =
-    all.length > 0
-      ? (Math.max(...all.map((n) => n.position.x + n.size.width)) - Math.min(...all.map((n) => n.position.x))) *
-        (Math.max(...all.map((n) => n.position.y + n.size.height)) - Math.min(...all.map((n) => n.position.y)))
-      : 0;
-
-  return (
-    <div class="attention-field-layer" aria-hidden="true">
-      {regions.map((region) => {
-        const rect = getRegionRect(region.nodeIds);
-        if (!rect) return null;
-        if (boardArea > 0 && rect.width * rect.height >= boardArea * 0.75) return null;
-        return <div key={region.id} class="attention-field-region" style={rectStyle(rect, 42)} />;
-      })}
-      {secondaryNodeIds.map((nodeId) => {
-        const rect = getNodeRect(nodeId);
-        if (!rect) return null;
-        return (
-          <div
-            key={`secondary-${nodeId}`}
-            class="attention-field-node attention-field-secondary"
-            style={rectStyle(
-              {
-                left: rect.left - 18,
-                top: rect.top - 18,
-                width: rect.width + 36,
-                height: rect.height + 36,
-              },
-              28,
-            )}
-          />
-        );
-      })}
-      {primaryNodeIds.map((nodeId) => {
-        const rect = getNodeRect(nodeId);
-        if (!rect) return null;
-        return (
-          <div
-            key={`primary-${nodeId}`}
-            class="attention-field-node attention-field-primary"
-            style={rectStyle(
-              {
-                left: rect.left - 24,
-                top: rect.top - 24,
-                width: rect.width + 48,
-                height: rect.height + 48,
-              },
-              30,
-            )}
-          />
-        );
-      })}
-    </div>
-  );
-}

package/src/client/canvas/kind-colors.ts

@@ -1,23 +0,0 @@
-import type { CanvasNodeState } from '../types';
-
-/** Kind color per node type, as CSS tokens so every theme keeps its palette. */
-export const KIND_COLOR: Record<CanvasNodeState['type'], string> = {
-  markdown: 'var(--c-accent)',
-  'mcp-app': 'var(--c-ok)',
-  webpage: 'var(--c-warn)',
-  'json-render': 'var(--c-ok)',
-  graph: 'var(--c-purple)',
-  board: 'var(--c-accent)',
-  prompt: 'var(--c-accent)',
-  response: 'var(--c-ok)',
-  status: 'var(--c-warn)',
-  context: 'var(--c-muted)',
-  ledger: 'var(--c-dim)',
-  trace: 'var(--c-purple)',
-  file: 'var(--c-accent)',
-  diff: 'var(--c-ok)',
-  mermaid: 'var(--c-purple)',
-  image: 'var(--c-ok)',
-  html: 'var(--c-warn)',
-  group: 'var(--c-accent)',
-};