pmx-canvas 0.3.0 → 0.3.1

package/src/client/state/attention-bridge.ts

@@ -106,10 +106,7 @@ function entryFromContextPin(event: ContextPinWatchEvent): AttentionEntry | null
     'context',
     'Context updated',
     detail,
-    [
-      ...event.added.map((node) => node.id),
-      ...event.removed.map((node) => node.id),
-    ],
+    [...event.added.map((node) => node.id), ...event.removed.map((node) => node.id)],
     event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now(),
   );
 }
@@ -148,10 +145,7 @@ function entryFromRemove(event: RemoveWatchEvent): AttentionEntry | null {
     'remove',
     'Items removed',
     parts.join(' · '),
-    [
-      ...event.nodes.map((node) => node.id),
-      ...event.edges.flatMap((edge) => [edge.fromId, edge.toId]),
-    ],
+    [...event.nodes.map((node) => node.id), ...event.edges.flatMap((edge) => [edge.fromId, edge.toId])],
     event.timestamp ? Date.parse(event.timestamp) || Date.now() : Date.now(),
   );
 }
@@ -318,7 +312,8 @@ export function resetAttentionBridge(): void {
 }
 
 export function syncAttentionFromSse(message: SseMessage): void {
-  const entries = reducer.handleMessage(message)
+  const entries = reducer
+    .handleMessage(message)
     .map((event) => entryFromEvent(event))
     .filter((entry): entry is AttentionEntry => entry !== null);
 

package/src/client/state/attention-store.ts

@@ -1,13 +1,7 @@
 import { signal } from '@preact/signals';
 import type { SemanticAttentionRegion } from '../../shared/semantic-attention.js';
 
-export type AttentionTone =
-  | 'context'
-  | 'relationship'
-  | 'group'
-  | 'cluster'
-  | 'neighborhood'
-  | 'remove';
+export type AttentionTone = 'context' | 'relationship' | 'group' | 'cluster' | 'neighborhood' | 'remove';
 
 export interface AttentionEntry {
   id: string;

package/src/client/state/canvas-store.ts

@@ -1,5 +1,13 @@
 import { batch, computed, signal } from '@preact/signals';
-import { isExcalidrawNode, type CanvasAnnotation, type CanvasEdge, type CanvasLayout, type CanvasNodeState, type ConnectionStatus, type ViewportState } from '../types';
+import {
+  isExcalidrawNode,
+  type CanvasAnnotation,
+  type CanvasEdge,
+  type CanvasLayout,
+  type CanvasNodeState,
+  type ConnectionStatus,
+  type ViewportState,
+} from '../types';
 import { computeAutoArrange } from '../../shared/auto-arrange';
 import { pushCanvasUpdate, updateViewportFromClient } from './intent-bridge';
 
@@ -29,7 +37,7 @@ export const axSurfaceState = signal<unknown>(null);
 export const expandedNodeId = signal<string | null>(null);
 export const pendingExpandedNodeCloseId = signal<string | null>(null);
 let expandedCloseTimer: ReturnType<typeof setTimeout> | null = null;
-let pendingCloseInitialCheckpointAt: unknown = undefined;
+let pendingCloseInitialCheckpointAt: unknown;
 const EXCALIDRAW_CLOSE_POLL_MS = 100;
 const EXCALIDRAW_CLOSE_MAX_WAIT_MS = 2500;
 
@@ -54,10 +62,7 @@ export const selectedNodeIds = signal<Set<string>>(new Set());
 // ── Context pins (persistent context for agent queries) ──────
 export const contextPinnedNodeIds = signal<Set<string>>(new Set());
 
-export function getNeighborNodeIds(
-  nodeId: string | null,
-  edgeMap: Map<string, CanvasEdge>,
-): Set<string> {
+export function getNeighborNodeIds(nodeId: string | null, edgeMap: Map<string, CanvasEdge>): Set<string> {
   if (!nodeId) return new Set();
 
   const neighborIds = new Set<string>();
@@ -392,10 +397,7 @@ export function commitViewport(next: ViewportState): void {
   commitViewportWithOptions(next);
 }
 
-function commitViewportWithOptions(
-  next: ViewportState,
-  options: { recordHistory?: boolean } = {},
-): void {
+function commitViewportWithOptions(next: ViewportState, options: { recordHistory?: boolean } = {}): void {
   viewport.value = next;
   persistLayout(options);
   void updateViewportFromClient(next, options);
@@ -412,9 +414,7 @@ export function applyServerCanvasLayout(
     if (node.zIndex >= nextMaxZ) nextMaxZ = node.zIndex + 1;
   }
 
-  const edgeSource = layout.edges.filter(
-    (edge) => nextNodes.has(edge.from) && nextNodes.has(edge.to),
-  );
+  const edgeSource = layout.edges.filter((edge) => nextNodes.has(edge.from) && nextNodes.has(edge.to));
   const nextEdges = new Map<string, CanvasEdge>();
   for (const edge of edgeSource) {
     nextEdges.set(edge.id, edge);
@@ -424,8 +424,7 @@ export function applyServerCanvasLayout(
     nextAnnotations.set(annotation.id, annotation);
   }
 
-  const nextActiveNodeId =
-    activeNodeId.value !== null && nextNodes.has(activeNodeId.value) ? activeNodeId.value : null;
+  const nextActiveNodeId = activeNodeId.value !== null && nextNodes.has(activeNodeId.value) ? activeNodeId.value : null;
   const nextExpandedNodeId =
     expandedNodeId.value !== null && nextNodes.has(expandedNodeId.value) ? expandedNodeId.value : null;
   const nextSelectedNodeIds = filterNodeIdSet(selectedNodeIds.value, nextNodes);
@@ -618,11 +617,15 @@ export function focusNode(id: string, options: { recordHistory?: boolean } = {})
   const v = viewport.value;
   const cx = node.position.x + node.size.width / 2;
   const cy = node.position.y + node.size.height / 2;
-  animateViewport({
-    x: window.innerWidth / 2 - cx * v.scale,
-    y: window.innerHeight / 2 - cy * v.scale,
-    scale: v.scale,
-  }, 300, options);
+  animateViewport(
+    {
+      x: window.innerWidth / 2 - cx * v.scale,
+      y: window.innerHeight / 2 - cy * v.scale,
+      scale: v.scale,
+    },
+    300,
+    options,
+  );
   bringToFront(id);
 }
 
@@ -669,10 +672,18 @@ export function walkGraph(direction: 'up' | 'down' | 'left' | 'right'): void {
     // Dot product with direction vector, normalized by distance
     let dot: number;
     switch (direction) {
-      case 'up':    dot = -dy; break;
-      case 'down':  dot =  dy; break;
-      case 'left':  dot = -dx; break;
-      case 'right': dot =  dx; break;
+      case 'up':
+        dot = -dy;
+        break;
+      case 'down':
+        dot = dy;
+        break;
+      case 'left':
+        dot = -dx;
+        break;
+      case 'right':
+        dot = dx;
+        break;
     }
 
     // Only consider nodes that are at least somewhat in the right direction
@@ -727,10 +738,7 @@ export function collapseExpandedNode(): void {
     const pollForSave = () => {
       const latestNode = nodes.value.get(closingNodeId);
       const latestCheckpointAt = (latestNode?.data.appCheckpoint as { updatedAt?: unknown } | undefined)?.updatedAt;
-      if (
-        latestCheckpointAt !== undefined &&
-        latestCheckpointAt !== pendingCloseInitialCheckpointAt
-      ) {
+      if (latestCheckpointAt !== undefined && latestCheckpointAt !== pendingCloseInitialCheckpointAt) {
         finishExpandedNodeClose(closingNodeId);
         return;
       }
@@ -762,10 +770,14 @@ export function autoArrange(): void {
       updateNode(id, { position });
     }
     for (const [groupId, bounds] of result.groupBounds.entries()) {
-      updateNodeWithOptions(groupId, {
-        position: { x: bounds.x, y: bounds.y },
-        size: { width: bounds.width, height: bounds.height },
-      }, { skipGroupChildTranslation: true });
+      updateNodeWithOptions(
+        groupId,
+        {
+          position: { x: bounds.x, y: bounds.y },
+          size: { width: bounds.width, height: bounds.height },
+        },
+        { skipGroupChildTranslation: true },
+      );
     }
   });
   persistLayout();
@@ -780,10 +792,14 @@ export function forceDirectedArrange(): void {
       updateNode(id, { position });
     }
     for (const [groupId, bounds] of result.groupBounds.entries()) {
-      updateNodeWithOptions(groupId, {
-        position: { x: bounds.x, y: bounds.y },
-        size: { width: bounds.width, height: bounds.height },
-      }, { skipGroupChildTranslation: true });
+      updateNodeWithOptions(
+        groupId,
+        {
+          position: { x: bounds.x, y: bounds.y },
+          size: { width: bounds.width, height: bounds.height },
+        },
+        { skipGroupChildTranslation: true },
+      );
     }
   });
   persistLayout();

package/src/client/state/intent-bridge.ts

@@ -2,12 +2,7 @@ function logRequestError(action: string, error: unknown): void {
   console.error(`[intent-bridge] ${action} failed`, error);
 }
 
-async function requestJson<T>(
-  action: string,
-  url: string,
-  fallback: T,
-  init?: RequestInit,
-): Promise<T> {
+async function requestJson<T>(action: string, url: string, fallback: T, init?: RequestInit): Promise<T> {
   try {
     const res = await fetch(url, init);
     return (await res.json()) as T;
@@ -17,11 +12,7 @@ async function requestJson<T>(
   }
 }
 
-async function requestOk(
-  action: string,
-  url: string,
-  init?: RequestInit,
-): Promise<{ ok: boolean }> {
+async function requestOk(action: string, url: string, init?: RequestInit): Promise<{ ok: boolean }> {
   try {
     const res = await fetch(url, init);
     return { ok: res.ok };
@@ -31,11 +22,7 @@ async function requestOk(
   }
 }
 
-async function requestBestEffort(
-  action: string,
-  url: string,
-  init?: RequestInit,
-): Promise<void> {
+async function requestBestEffort(action: string, url: string, init?: RequestInit): Promise<void> {
   try {
     await fetch(url, init);
   } catch (error) {
@@ -44,15 +31,17 @@ async function requestBestEffort(
 }
 
 /** Dispatch user intents from the canvas to the server (for TUI consumption). */
-export async function sendIntent(
-  type: string,
-  payload: Record<string, unknown> = {},
-): Promise<{ ok: boolean }> {
-  return requestJson('sendIntent', '/api/workbench/intent', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ type, payload }),
-  });
+export async function sendIntent(type: string, payload: Record<string, unknown> = {}): Promise<{ ok: boolean }> {
+  return requestJson(
+    'sendIntent',
+    '/api/workbench/intent',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type, payload }),
+    },
+  );
 }
 
 /**
@@ -88,11 +77,16 @@ export async function vetoGhostIntent(intent: {
 
 /** Fetch rendered markdown HTML from the server. */
 export async function renderMarkdown(markdown: string): Promise<string> {
-  const data = await requestJson<{ html?: string }>('renderMarkdown', '/api/render', {}, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ markdown }),
-  });
+  const data = await requestJson<{ html?: string }>(
+    'renderMarkdown',
+    '/api/render',
+    {},
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ markdown }),
+    },
+  );
   return data.html ?? '';
 }
 
@@ -105,15 +99,17 @@ export async function fetchFile(path: string): Promise<{
 }
 
 /** Save file content to the server. */
-export async function saveFile(
-  path: string,
-  content: string,
-): Promise<{ ok: boolean; updatedAt?: string }> {
-  return requestJson('saveFile', '/api/file/save', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ path, content }),
-  });
+export async function saveFile(path: string, content: string): Promise<{ ok: boolean; updatedAt?: string }> {
+  return requestJson(
+    'saveFile',
+    '/api/file/save',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, content }),
+    },
+  );
 }
 
 /** Fetch current workbench state. */
@@ -136,11 +132,16 @@ export async function fetchCanvasState(): Promise<Record<string, unknown>> {
 }
 
 export async function saveCanvasTheme(theme: string): Promise<{ ok: boolean; theme?: string }> {
-  return requestJson('saveCanvasTheme', '/api/canvas/theme', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ theme }),
-  });
+  return requestJson(
+    'saveCanvasTheme',
+    '/api/canvas/theme',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ theme }),
+    },
+  );
 }
 
 /** Fetch available slash commands for prompt completion. */
@@ -157,17 +158,22 @@ export async function submitCanvasPrompt(
   threadNodeId?: string,
 ): Promise<{ ok: boolean; nodeId?: string; error?: string }> {
   if (!text.trim()) return { ok: false, error: 'Prompt text is required' };
-  return requestJson('submitCanvasPrompt', '/api/canvas/prompt', { ok: false, error: 'Network error' }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      text,
-      ...(position ? { position } : {}),
-      ...(parentNodeId ? { parentNodeId } : {}),
-      ...(contextNodeIds && contextNodeIds.length > 0 ? { contextNodeIds } : {}),
-      ...(threadNodeId ? { threadNodeId } : {}),
-    }),
-  });
+  return requestJson(
+    'submitCanvasPrompt',
+    '/api/canvas/prompt',
+    { ok: false, error: 'Network error' },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        text,
+        ...(position ? { position } : {}),
+        ...(parentNodeId ? { parentNodeId } : {}),
+        ...(contextNodeIds && contextNodeIds.length > 0 ? { contextNodeIds } : {}),
+        ...(threadNodeId ? { threadNodeId } : {}),
+      }),
+    },
+  );
 }
 
 /** Submit a reply into an existing prompt thread. */
@@ -203,11 +209,16 @@ export async function createEdgeFromClient(
   type: string,
   label?: string,
 ): Promise<{ ok: boolean; id?: string }> {
-  return requestJson('createEdgeFromClient', '/api/canvas/edge', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ from, to, type, label }),
-  });
+  return requestJson(
+    'createEdgeFromClient',
+    '/api/canvas/edge',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ from, to, type, label }),
+    },
+  );
 }
 
 /** Create a canvas node via the server. Returns the new node ID. */
@@ -220,11 +231,16 @@ export async function createNodeFromClient(opts: {
   width?: number;
   height?: number;
 }): Promise<{ ok: boolean; id?: string }> {
-  return requestJson('createNodeFromClient', '/api/canvas/node', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(opts),
-  });
+  return requestJson(
+    'createNodeFromClient',
+    '/api/canvas/node',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(opts),
+    },
+  );
 }
 
 /** Update a canvas node via the server. */
@@ -241,11 +257,16 @@ export async function updateNodeFromClient(
     data?: Record<string, unknown>;
   },
 ): Promise<{ ok: boolean; id?: string }> {
-  return requestJson('updateNodeFromClient', `/api/canvas/node/${encodeURIComponent(id)}`, { ok: false }, {
-    method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(patch),
-  });
+  return requestJson(
+    'updateNodeFromClient',
+    `/api/canvas/node/${encodeURIComponent(id)}`,
+    { ok: false },
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(patch),
+    },
+  );
 }
 
 /** Refresh a webpage node from its persisted URL on the server. */
@@ -253,18 +274,28 @@ export async function refreshWebpageNodeFromClient(
   id: string,
   url?: string,
 ): Promise<{ ok: boolean; id?: string; error?: string }> {
-  return requestJson('refreshWebpageNodeFromClient', `/api/canvas/node/${encodeURIComponent(id)}/refresh`, { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(url ? { url } : {}),
-  });
+  return requestJson(
+    'refreshWebpageNodeFromClient',
+    `/api/canvas/node/${encodeURIComponent(id)}/refresh`,
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(url ? { url } : {}),
+    },
+  );
 }
 
 /** Remove a canvas node via the server. */
 export async function removeNodeFromClient(id: string): Promise<{ ok: boolean; removed?: string }> {
-  return requestJson('removeNodeFromClient', `/api/canvas/node/${encodeURIComponent(id)}`, { ok: false }, {
-    method: 'DELETE',
-  });
+  return requestJson(
+    'removeNodeFromClient',
+    `/api/canvas/node/${encodeURIComponent(id)}`,
+    { ok: false },
+    {
+      method: 'DELETE',
+    },
+  );
 }
 
 // ── PMX-AX node interactions ──────────────────────────────────
@@ -292,7 +323,10 @@ export async function fetchAxSurfaceState(): Promise<unknown> {
 }
 
 /** Ask the server to open a node's surface in the system browser. */
-export async function openNodeInSystemBrowserRequest(nodeId: string, url?: string): Promise<{ ok: boolean; opened: boolean }> {
+export async function openNodeInSystemBrowserRequest(
+  nodeId: string,
+  url?: string,
+): Promise<{ ok: boolean; opened: boolean }> {
   return requestJson<{ ok: boolean; opened: boolean }>(
     'openNodeInSystemBrowserRequest',
     '/api/canvas/open-external',
@@ -324,14 +358,19 @@ export async function updateViewportFromClient(
   viewport: { x: number; y: number; scale: number },
   options: { recordHistory?: boolean } = {},
 ): Promise<{ ok: boolean }> {
-  return requestJson('updateViewportFromClient', '/api/canvas/viewport', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      ...viewport,
-      ...(options.recordHistory === false ? { recordHistory: false } : {}),
-    }),
-  });
+  return requestJson(
+    'updateViewportFromClient',
+    '/api/canvas/viewport',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        ...viewport,
+        ...(options.recordHistory === false ? { recordHistory: false } : {}),
+      }),
+    },
+  );
 }
 
 // ── Group API ─────────────────────────────────────────────────
@@ -346,29 +385,44 @@ export async function createGroupFromClient(opts: {
   width?: number;
   height?: number;
 }): Promise<{ ok: boolean; id?: string }> {
-  return requestJson('createGroupFromClient', '/api/canvas/group', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(opts),
-  });
+  return requestJson(
+    'createGroupFromClient',
+    '/api/canvas/group',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(opts),
+    },
+  );
 }
 
 /** Add nodes to an existing group. */
 export async function addToGroupFromClient(groupId: string, childIds: string[]): Promise<{ ok: boolean }> {
-  return requestJson('addToGroupFromClient', '/api/canvas/group/add', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ groupId, childIds }),
-  });
+  return requestJson(
+    'addToGroupFromClient',
+    '/api/canvas/group/add',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ groupId, childIds }),
+    },
+  );
 }
 
 /** Ungroup all children from a group. */
 export async function ungroupFromClient(groupId: string): Promise<{ ok: boolean }> {
-  return requestJson('ungroupFromClient', '/api/canvas/group/ungroup', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ groupId }),
-  });
+  return requestJson(
+    'ungroupFromClient',
+    '/api/canvas/group/ungroup',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ groupId }),
+    },
+  );
 }
 
 // ── Snapshot API ──────────────────────────────────────────────
@@ -386,11 +440,16 @@ export async function listSnapshots(): Promise<CanvasSnapshotInfo[]> {
 }
 
 export async function saveSnapshot(name: string): Promise<{ ok: boolean; snapshot?: CanvasSnapshotInfo }> {
-  return requestJson('saveSnapshot', '/api/canvas/snapshots', { ok: false }, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ name }),
-  });
+  return requestJson(
+    'saveSnapshot',
+    '/api/canvas/snapshots',
+    { ok: false },
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    },
+  );
 }
 
 export async function restoreSnapshot(id: string): Promise<{ ok: boolean }> {
@@ -403,9 +462,14 @@ export async function deleteSnapshot(id: string): Promise<{ ok: boolean }> {
 
 /** Remove a canvas edge via the server. */
 export async function removeEdgeFromClient(edgeId: string): Promise<{ ok: boolean }> {
-  return requestJson('removeEdgeFromClient', '/api/canvas/edge', { ok: false }, {
-    method: 'DELETE',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ edge_id: edgeId }),
-  });
+  return requestJson(
+    'removeEdgeFromClient',
+    '/api/canvas/edge',
+    { ok: false },
+    {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ edge_id: edgeId }),
+    },
+  );
 }

package/src/client/state/intent-store.ts

@@ -63,7 +63,10 @@ function setPhase(id: string, phase: IntentPhase, ms: number, settledNodeId?: st
   next.set(id, { ...current, phase, ...(settledNodeId ? { settledNodeId } : {}) });
   writeIntents(next);
   clearExitTimer(id);
-  exitTimers.set(id, setTimeout(() => removeIntent(id), ms));
+  exitTimers.set(
+    id,
+    setTimeout(() => removeIntent(id), ms),
+  );
 }
 
 /** Resolve a ghost into a real node — the settle morph, then removal. */