pmx-canvas 0.1.23 → 0.1.25

package/src/server/canvas-operations.ts

@@ -103,7 +103,8 @@ interface CanvasAddNodeInput {
   strictSize?: boolean;
 }
 
-export const MARKDOWN_NODE_DEFAULT_SIZE = { width: 520, height: 360 };
+export const MARKDOWN_NODE_DEFAULT_SIZE = { width: 640, height: 420 };
+export const MCP_APP_NODE_DEFAULT_SIZE = { width: 960, height: 600 };
 
 interface CanvasCreateGroupInput {
   title?: string;
@@ -1099,8 +1100,84 @@ function collectGridArrangeExcludedNodeIds(nodes: CanvasNodeState[]): Set<string
   return excluded;
 }
 
+interface ArrangeObstacleRect {
+  id: string;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+}
+
+const GRID_OBSTACLE_GAP_Y = 72;
+
+function rectsOverlap(a: ArrangeObstacleRect, b: ArrangeObstacleRect): boolean {
+  return (
+    a.position.x < b.position.x + b.size.width &&
+    a.position.x + a.size.width > b.position.x &&
+    a.position.y < b.position.y + b.size.height &&
+    a.position.y + a.size.height > b.position.y
+  );
+}
+
+function collectGridArrangeObstacles(nodes: CanvasNodeState[], excludedIds: Set<string>): ArrangeObstacleRect[] {
+  return nodes
+    .filter((node) => excludedIds.has(node.id) && node.dockPosition === null)
+    .map((node) => ({
+      id: node.id,
+      position: { ...node.position },
+      size: { ...node.size },
+    }));
+}
+
+function buildUpdatedArrangeRect(
+  update: CanvasNodeUpdate,
+  nodesById: Map<string, CanvasNodeState>,
+): ArrangeObstacleRect | null {
+  const node = nodesById.get(update.id);
+  if (!node) return null;
+  return {
+    id: update.id,
+    position: update.position ? { ...update.position } : { ...node.position },
+    size: update.size ? { ...update.size } : { ...node.size },
+  };
+}
+
+function shiftGridUpdatesBelowObstacles(
+  updates: CanvasNodeUpdate[],
+  nodes: CanvasNodeState[],
+  obstacles: ArrangeObstacleRect[],
+): CanvasNodeUpdate[] {
+  if (updates.length === 0 || obstacles.length === 0) return updates;
+
+  // Grid arrange only sees movable nodes, so preserved locked/docked-group frames
+  // need a separate obstacle pass before applying the planned positions.
+  const nodesById = new Map(nodes.map((node) => [node.id, node]));
+  let shifted = updates;
+
+  for (let attempt = 0; attempt <= obstacles.length; attempt++) {
+    const plannedRects = shifted
+      .map((update) => buildUpdatedArrangeRect(update, nodesById))
+      .filter((rect): rect is ArrangeObstacleRect => rect !== null);
+    if (plannedRects.length === 0) return shifted;
+
+    const blockers = obstacles.filter((obstacle) =>
+      plannedRects.some((rect) => rect.id !== obstacle.id && rectsOverlap(rect, obstacle)),
+    );
+    if (blockers.length === 0) return shifted;
+
+    const minPlannedY = Math.min(...plannedRects.map((rect) => rect.position.y));
+    const blockerBottom = Math.max(...blockers.map((rect) => rect.position.y + rect.size.height));
+    const deltaY = blockerBottom + GRID_OBSTACLE_GAP_Y - minPlannedY;
+    if (deltaY <= 0) return shifted;
+
+    shifted = shifted.map((update) => update.position
+      ? { ...update, position: { x: update.position.x, y: update.position.y + deltaY } }
+      : update);
+  }
+
+  return shifted;
+}
+
 export function arrangeCanvasNodes(layout: CanvasArrangeMode): { arranged: number; layout: CanvasArrangeMode } {
-  const nodes = canvasState.getLayout().nodes;
+  const nodes = canvasState.getLayoutForPersistence().nodes;
   const excludedIds = layout === 'grid'
     ? collectGridArrangeExcludedNodeIds(nodes)
     : collectArrangeExcludedNodeIds(nodes);
@@ -1135,6 +1212,9 @@ export function arrangeCanvasNodes(layout: CanvasArrangeMode): { arranged: numbe
         size: { width: bounds.width, height: bounds.height },
       });
     }
+    const obstacles = collectGridArrangeObstacles(nodes, excludedIds);
+    const shiftedUpdates = shiftGridUpdatesBelowObstacles(updates, nodes, obstacles);
+    updates.splice(0, updates.length, ...shiftedUpdates);
   }
 
   canvasState.withSuppressedRecording(() => {
@@ -1578,8 +1658,20 @@ export async function executeCanvasBatch(
               ...(typeof args.width === 'number' ? { width: args.width } : {}),
               ...(typeof args.height === 'number' ? { height: args.height } : {}),
               ...(args.strictSize === true ? { strictSize: true } : {}),
-              defaultWidth: type === 'html' ? 720 : type === 'markdown' ? MARKDOWN_NODE_DEFAULT_SIZE.width : 360,
-              defaultHeight: type === 'html' ? 640 : type === 'markdown' ? MARKDOWN_NODE_DEFAULT_SIZE.height : 200,
+              defaultWidth: type === 'html'
+                ? 720
+                : type === 'markdown'
+                  ? MARKDOWN_NODE_DEFAULT_SIZE.width
+                  : type === 'mcp-app'
+                    ? MCP_APP_NODE_DEFAULT_SIZE.width
+                    : 360,
+              defaultHeight: type === 'html'
+                ? 640
+                : type === 'markdown'
+                  ? MARKDOWN_NODE_DEFAULT_SIZE.height
+                  : type === 'mcp-app'
+                    ? MCP_APP_NODE_DEFAULT_SIZE.height
+                    : 200,
               fileMode: 'auto',
             });
             result = { ok: true, ...serializeCreatedNode(created.node) };

package/src/server/canvas-state.ts

@@ -30,7 +30,9 @@ import {
   checkpointCanvasDb,
   finalizeCanvasDbForClose,
   type PersistedCanvasState,
+  type CanvasTheme,
 } from './canvas-db.js';
+import { normalizeCanvasTheme } from './canvas-db.js';
 import {
   type CanvasPlacementRect,
   computeGroupBounds,
@@ -39,6 +41,13 @@ import {
   GROUP_TITLEBAR_HEIGHT,
   resolveGroupCollision,
 } from './placement.js';
+import {
+  createEmptyAxState,
+  normalizeAxState,
+  type PmxAxFocusState,
+  type PmxAxSource,
+  type PmxAxState,
+} from './ax-state.js';
 
 function logCanvasStateWarning(action: string, error: unknown, details?: Record<string, unknown>): void {
   console.warn(`[canvas-state] ${action}`, { error, ...(details ?? {}) });
@@ -186,6 +195,7 @@ export interface CanvasAnnotation {
 
 export interface CanvasLayout {
   viewport: ViewportState;
+  theme: CanvasTheme;
   nodes: CanvasNodeState[];
   edges: CanvasEdge[];
   annotations: CanvasAnnotation[];
@@ -199,10 +209,10 @@ export interface CanvasNodeUpdate {
   dockPosition?: 'left' | 'right' | null;
 }
 
-export type CanvasChangeType = 'pins' | 'nodes';
+export type CanvasChangeType = 'pins' | 'nodes' | 'ax';
 
 export interface MutationRecordInfo {
-  operationType: 'addNode' | 'updateNode' | 'removeNode' | 'addEdge' | 'removeEdge' | 'addAnnotation' | 'removeAnnotation' | 'clear' | 'restoreSnapshot' | 'setPins' | 'arrange' | 'batch' | 'groupNodes' | 'ungroupNodes' | 'viewport';
+  operationType: 'addNode' | 'updateNode' | 'removeNode' | 'addEdge' | 'removeEdge' | 'addAnnotation' | 'removeAnnotation' | 'clear' | 'restoreSnapshot' | 'setPins' | 'setAxFocus' | 'arrange' | 'batch' | 'groupNodes' | 'ungroupNodes' | 'viewport';
   description: string;
   forward: () => void;
   inverse: () => void;
@@ -260,7 +270,9 @@ class CanvasStateManager {
   private edges = new Map<string, CanvasEdge>();
   private annotations = new Map<string, CanvasAnnotation>();
   private _viewport: ViewportState = { x: 0, y: 0, scale: 1 };
+  private _theme: CanvasTheme = 'dark';
   private _contextPinnedNodeIds = new Set<string>();
+  private _axState: PmxAxState = createEmptyAxState();
   private _workspaceRoot = process.cwd();
 
   // ── Change listeners (for MCP resource notifications) ──────
@@ -310,6 +322,18 @@ class CanvasStateManager {
     }
   }
 
+  private currentNodeIdSet(): Set<string> {
+    return new Set(this.nodes.keys());
+  }
+
+  private normalizeAxForCurrentNodes(state: unknown): PmxAxState {
+    return normalizeAxState(state, this.currentNodeIdSet());
+  }
+
+  private applyAxState(state: PmxAxState): void {
+    this._axState = this.normalizeAxForCurrentNodes(state);
+  }
+
   private applyResolvedGroupBounds(
     group: CanvasNodeState,
     groupId: string,
@@ -376,6 +400,14 @@ class CanvasStateManager {
     return normalized;
   }
 
+  private nodeForRead(node: CanvasNodeState): CanvasNodeState {
+    const resolved = this.resolveNodeDataBlobs(node);
+    return {
+      ...resolved,
+      pinned: resolved.pinned || this._contextPinnedNodeIds.has(resolved.id),
+    };
+  }
+
   private reflowAllGroups(): void {
     const groups = Array.from(this.nodes.values())
       .filter((node): node is CanvasNodeState => node.type === 'group')
@@ -788,11 +820,13 @@ class CanvasStateManager {
   private emptyPersistedState(): PersistedCanvasState {
     return {
       version: 1,
+      theme: this._theme,
       viewport: { x: 0, y: 0, scale: 1 },
       nodes: [],
       edges: [],
       annotations: [],
       contextPins: [],
+      ax: createEmptyAxState(),
     };
   }
 
@@ -863,11 +897,13 @@ class CanvasStateManager {
     try {
       const payload = this.externalizePersistedStateBlobs({
         version: 1,
+        theme: this._theme,
         viewport: this._viewport,
         nodes: Array.from(this.nodes.values()),
         edges: Array.from(this.edges.values()),
         annotations: Array.from(this.annotations.values()),
         contextPins: Array.from(this._contextPinnedNodeIds),
+        ax: this.getAxState(),
       });
       saveStateToDB(this._db, payload);
     } catch (error) {
@@ -909,12 +945,14 @@ class CanvasStateManager {
     this.edges.clear();
     this.annotations.clear();
     this._contextPinnedNodeIds.clear();
+    this._axState = createEmptyAxState();
 
     this._viewport = {
       x: state.viewport?.x ?? 0,
       y: state.viewport?.y ?? 0,
       scale: state.viewport?.scale ?? 1,
     };
+    this._theme = normalizeCanvasTheme(state.theme, this._theme);
 
     if (Array.isArray(state.nodes)) {
       for (const node of state.nodes) {
@@ -938,6 +976,7 @@ class CanvasStateManager {
         if (this.nodes.has(pinId)) this._contextPinnedNodeIds.add(pinId);
       }
     }
+    this._axState = this.normalizeAxForCurrentNodes(state.ax);
   }
 
   private readResolvedSnapshot(idOrName: string): {
@@ -1028,11 +1067,13 @@ class CanvasStateManager {
     try {
       const payload = this.externalizePersistedStateBlobs({
         version: 1,
+        theme: this._theme,
         viewport: this._viewport,
         nodes: Array.from(this.nodes.values()),
         edges: Array.from(this.edges.values()),
         annotations: Array.from(this.annotations.values()),
         contextPins: Array.from(this._contextPinnedNodeIds),
+        ax: this.getAxState(),
       });
       saveSnapshotToDB(this._db, snapshot, payload);
       snapshot.nodeCount = payload.nodes.length;
@@ -1117,19 +1158,23 @@ class CanvasStateManager {
 
     const previousState: PersistedCanvasState = this.externalizePersistedStateBlobs({
       version: 1,
+      theme: this._theme,
       viewport: structuredClone(this._viewport),
       nodes: Array.from(this.nodes.values(), (node) => structuredClone(node)),
       edges: Array.from(this.edges.values(), (edge) => structuredClone(edge)),
       annotations: Array.from(this.annotations.values(), (annotation) => structuredClone(annotation)),
       contextPins: Array.from(this._contextPinnedNodeIds),
+      ax: this.getAxState(),
     });
     const nextState: PersistedCanvasState = {
       version: 1,
+      theme: normalizeCanvasTheme(resolved.state.theme, this._theme),
       viewport: structuredClone(resolved.state.viewport),
       nodes: Array.isArray(resolved.state.nodes) ? resolved.state.nodes.map((node) => structuredClone(node)) : [],
       edges: Array.isArray(resolved.state.edges) ? resolved.state.edges.map((edge) => structuredClone(edge)) : [],
       annotations: Array.isArray(resolved.state.annotations) ? resolved.state.annotations.map((annotation) => structuredClone(annotation)) : [],
       contextPins: Array.isArray(resolved.state.contextPins) ? [...resolved.state.contextPins] : [],
+      ax: resolved.state.ax ? structuredClone(resolved.state.ax) : createEmptyAxState(),
     };
 
     try {
@@ -1137,6 +1182,7 @@ class CanvasStateManager {
       this.scheduleSave();
       this.notifyChange('nodes');
       this.notifyChange('pins');
+      this.notifyChange('ax');
       this.recordMutation({
         operationType: 'restoreSnapshot',
         description: `Restored snapshot "${resolved.snapshot.name}"`,
@@ -1145,12 +1191,14 @@ class CanvasStateManager {
           this.scheduleSave();
           this.notifyChange('nodes');
           this.notifyChange('pins');
+          this.notifyChange('ax');
         }),
         inverse: this.suppressed(() => {
           this.applyPersistedState(previousState);
           this.scheduleSave();
           this.notifyChange('nodes');
           this.notifyChange('pins');
+          this.notifyChange('ax');
         }),
       });
       return true;
@@ -1287,6 +1335,7 @@ class CanvasStateManager {
     const existing = this.nodes.get(id);
     const connectedEdges = existing ? this.getEdgesForNode(id).map((e) => structuredClone(e)) : [];
     const cloned = existing ? structuredClone(existing) : null;
+    const oldAxState = this.getAxState();
 
     // Prune from parent group's children list
     if (existing) {
@@ -1315,9 +1364,11 @@ class CanvasStateManager {
     this.nodes.delete(id);
     this.removeEdgesForNode(id);
     this._contextPinnedNodeIds.delete(id);
+    this.applyAxState(this._axState);
     this.scheduleSave();
     this.notifyChange('nodes');
     this.notifyChange('pins');
+    this.notifyChange('ax');
     if (cloned) {
       this.recordMutation({
         operationType: 'removeNode',
@@ -1326,6 +1377,9 @@ class CanvasStateManager {
         inverse: this.suppressed(() => {
           this.addNode(structuredClone(cloned));
           for (const edge of connectedEdges) this.addEdge(structuredClone(edge));
+          this.applyAxState(oldAxState);
+          this.scheduleSave();
+          this.notifyChange('ax');
         }),
       });
     }
@@ -1333,7 +1387,7 @@ class CanvasStateManager {
 
   getNode(id: string): CanvasNodeState | undefined {
     const node = this.nodes.get(id);
-    return node ? structuredClone(this.resolveNodeDataBlobs(node)) : undefined;
+    return node ? structuredClone(this.nodeForRead(node)) : undefined;
   }
 
   getNodeForPersistence(id: string): CanvasNodeState | undefined {
@@ -1435,7 +1489,8 @@ class CanvasStateManager {
   getLayout(): CanvasLayout {
     return {
       viewport: structuredClone(this._viewport),
-      nodes: Array.from(this.nodes.values(), (node) => structuredClone(node)),
+      theme: this._theme,
+      nodes: Array.from(this.nodes.values(), (node) => structuredClone(this.nodeForRead(node))),
       edges: Array.from(this.edges.values(), (edge) => structuredClone(edge)),
       annotations: this.getAnnotations(),
     };
@@ -1444,6 +1499,7 @@ class CanvasStateManager {
   getLayoutForPersistence(): CanvasLayout {
     return {
       viewport: structuredClone(this._viewport),
+      theme: this._theme,
       nodes: Array.from(this.nodes.values(), (node) => structuredClone(this.externalizeNodeDataBlobs(node))),
       edges: Array.from(this.edges.values(), (edge) => structuredClone(edge)),
       annotations: this.getAnnotations(),
@@ -1563,12 +1619,70 @@ class CanvasStateManager {
     });
   }
 
+  get theme(): CanvasTheme {
+    return this._theme;
+  }
+
+  setTheme(theme: CanvasTheme): CanvasTheme {
+    const next = normalizeCanvasTheme(theme, this._theme);
+    if (next === this._theme) return this._theme;
+    this._theme = next;
+    this.scheduleSave();
+    this.notifyChange('nodes');
+    return this._theme;
+  }
+
   // ── Context pins ─────────────────────────────────────────────
 
   get contextPinnedNodeIds(): Set<string> {
     return new Set(this._contextPinnedNodeIds);
   }
 
+  getAxState(): PmxAxState {
+    return structuredClone(this.normalizeAxForCurrentNodes(this._axState));
+  }
+
+  getAxFocus(): PmxAxFocusState {
+    return this.getAxState().focus;
+  }
+
+  setAxFocus(nodeIds: string[], options: { source?: PmxAxSource; recordHistory?: boolean } = {}): PmxAxFocusState {
+    const oldAxState = this.getAxState();
+    const nextAxState: PmxAxState = {
+      ...oldAxState,
+      focus: {
+        nodeIds,
+        primaryNodeId: nodeIds[0] ?? null,
+        updatedAt: new Date().toISOString(),
+        source: options.source ?? 'api',
+      },
+    };
+    this.applyAxState(nextAxState);
+    const appliedAxState = this.getAxState();
+    this.scheduleSave();
+    this.notifyChange('ax');
+    if (options.recordHistory === false) return appliedAxState.focus;
+    this.recordMutation({
+      operationType: 'setAxFocus',
+      description: `Set AX focus (${appliedAxState.focus.nodeIds.length} nodes)`,
+      forward: this.suppressed(() => {
+        this.applyAxState(appliedAxState);
+        this.scheduleSave();
+        this.notifyChange('ax');
+      }),
+      inverse: this.suppressed(() => {
+        this.applyAxState(oldAxState);
+        this.scheduleSave();
+        this.notifyChange('ax');
+      }),
+    });
+    return appliedAxState.focus;
+  }
+
+  clearAxFocus(): PmxAxFocusState {
+    return this.setAxFocus([], { source: 'system' });
+  }
+
   setContextPins(nodeIds: string[]): void {
     const oldPins = Array.from(this._contextPinnedNodeIds);
     this._contextPinnedNodeIds.clear();
@@ -1694,15 +1808,18 @@ class CanvasStateManager {
     const oldEdges = Array.from(this.edges.values()).map((e) => structuredClone(e));
     const oldAnnotations = Array.from(this.annotations.values()).map((annotation) => structuredClone(annotation));
     const oldPins = Array.from(this._contextPinnedNodeIds);
+    const oldAxState = this.getAxState();
     const oldViewport = { ...this._viewport };
     this.nodes.clear();
     this.edges.clear();
     this.annotations.clear();
     this._contextPinnedNodeIds.clear();
+    this._axState = createEmptyAxState();
     this._viewport = { x: 0, y: 0, scale: 1 };
     this.scheduleSave();
     this.notifyChange('nodes');
     this.notifyChange('pins');
+    this.notifyChange('ax');
     this.recordMutation({
       operationType: 'clear',
       description: `Cleared canvas (was ${oldNodes.length} nodes, ${oldEdges.length} edges)`,
@@ -1712,7 +1829,9 @@ class CanvasStateManager {
         for (const e of oldEdges) this.addEdge(structuredClone(e));
         for (const annotation of oldAnnotations) this.addAnnotation(structuredClone(annotation));
         this.setContextPins(oldPins);
+        this.applyAxState(oldAxState);
         this.setViewport(oldViewport);
+        this.notifyChange('ax');
       }),
     });
   }

package/src/server/index.ts

@@ -1,6 +1,8 @@
 import { EventEmitter } from 'node:events';
 import { canvasState, IMAGE_MIME_MAP } from './canvas-state.js';
 import type { CanvasAnnotation, CanvasNodeState, CanvasEdge, CanvasLayout, ViewportState } from './canvas-state.js';
+import { buildCanvasAxContext } from './ax-context.js';
+import type { PmxAxContext, PmxAxFocusState, PmxAxSource, PmxAxState } from './ax-state.js';
 import { findCanvasExtAppNodeId } from './ext-app-lookup.js';
 import { onFileNodeChanged } from './file-watcher.js';
 import { findOpenCanvasPosition, computeGroupBounds } from './placement.js';
@@ -11,6 +13,7 @@ import {
   addCanvasNode,
   addCanvasEdge,
   MARKDOWN_NODE_DEFAULT_SIZE,
+  MCP_APP_NODE_DEFAULT_SIZE,
   applyCanvasNodeUpdates,
   arrangeCanvasNodes,
   clearCanvas,
@@ -181,8 +184,16 @@ export class PmxCanvas extends EventEmitter {
     }
     const { id, needsCodeGraphRecompute } = addCanvasNode({
       ...input,
-      defaultWidth: input.type === 'markdown' ? MARKDOWN_NODE_DEFAULT_SIZE.width : 360,
-      defaultHeight: input.type === 'markdown' ? MARKDOWN_NODE_DEFAULT_SIZE.height : 200,
+      defaultWidth: input.type === 'markdown'
+        ? MARKDOWN_NODE_DEFAULT_SIZE.width
+        : input.type === 'mcp-app'
+          ? MCP_APP_NODE_DEFAULT_SIZE.width
+          : 360,
+      defaultHeight: input.type === 'markdown'
+        ? MARKDOWN_NODE_DEFAULT_SIZE.height
+        : input.type === 'mcp-app'
+          ? MCP_APP_NODE_DEFAULT_SIZE.height
+          : 200,
       fileMode: 'path',
       ...(input.strictSize ? { strictSize: true } : {}),
     });
@@ -402,7 +413,9 @@ export class PmxCanvas extends EventEmitter {
         y: node.position.y - 100,
       });
     }
+    const focus = canvasState.setAxFocus([id], { source: 'sdk', recordHistory: false });
     emitPrimaryWorkbenchEvent('canvas-focus-node', { nodeId: id, noPan });
+    emitPrimaryWorkbenchEvent('ax-state-changed', { focus });
     if (!noPan) {
       emitPrimaryWorkbenchEvent('canvas-viewport-update', { viewport: canvasState.viewport });
     }
@@ -410,6 +423,20 @@ export class PmxCanvas extends EventEmitter {
     return { focused: id, panned: !noPan };
   }
 
+  getAxState(): PmxAxState {
+    return canvasState.getAxState();
+  }
+
+  getAxContext(): PmxAxContext {
+    return buildCanvasAxContext();
+  }
+
+  setAxFocus(nodeIds: string[], options?: { source?: PmxAxSource }): PmxAxFocusState {
+    const focus = canvasState.setAxFocus(nodeIds, { source: options?.source ?? 'sdk' });
+    emitPrimaryWorkbenchEvent('ax-state-changed', { focus });
+    return focus;
+  }
+
   fitView(options?: {
     width?: number;
     height?: number;

package/src/server/mutation-history.ts

@@ -28,6 +28,7 @@ export type MutationOp =
   | 'arrange'
   | 'restoreSnapshot'
   | 'setPins'
+  | 'setAxFocus'
   | 'batch'
   | 'viewport'
   | 'groupNodes'
@@ -65,6 +66,13 @@ export interface SnapshotDiffResult {
   removedEdges: { id: string; from: string; to: string; type: string }[];
 }
 
+function comparableNodeData(data: Record<string, unknown>): Record<string, unknown> {
+  const comparable = { ...data };
+  delete comparable.title;
+  delete comparable.content;
+  return comparable;
+}
+
 // ── Ring Buffer ──────────────────────────────────────────────────────
 
 const MAX_ENTRIES = 200;
@@ -257,6 +265,10 @@ export function diffLayouts(
       changes.push(`content changed (${lenDiff >= 0 ? '+' : ''}${lenDiff} chars)`);
     }
 
+    if (JSON.stringify(comparableNodeData(snapNode.data)) !== JSON.stringify(comparableNodeData(curNode.data))) {
+      changes.push('data changed');
+    }
+
     if (changes.length > 0) {
       modifiedNodes.push({
         id,