pmx-canvas 0.3.0 → 0.3.2

package/src/client/nodes/ResponseNode.tsx

@@ -32,10 +32,7 @@ function RenderedMarkdown({ html }: { html: string }) {
   return <div ref={containerRef} />;
 }
 
-export function ResponseNode({
-  node,
-  expanded = false,
-}: { node: CanvasNodeState; expanded?: boolean }) {
+export function ResponseNode({ node, expanded = false }: { node: CanvasNodeState; expanded?: boolean }) {
   const content = (node.data.content as string) || '';
   const status = (node.data.status as string) || 'streaming';
   const [rendered, setRendered] = useState('');
@@ -59,18 +56,11 @@ export function ResponseNode({
   }, [content]);
 
   const handleReply = useCallback(() => {
-    submitCanvasPrompt(
-      '',
-      { x: node.position.x, y: node.position.y + node.size.height + 24 },
-      node.id,
-    );
+    submitCanvasPrompt('', { x: node.position.x, y: node.position.y + node.size.height + 24 }, node.id);
   }, [node]);
 
   return (
-    <div
-      class="response-node-inner"
-      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
-    >
+    <div class="response-node-inner" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       {/* Streaming indicator */}
       {isStreaming && (
         <div

package/src/client/nodes/StatusNode.tsx

@@ -2,17 +2,13 @@ import { PHASE_COLORS } from '../theme/tokens';
 import type { CanvasNodeState } from '../types';
 
 export function getStatusDisplayPhase(node: CanvasNodeState): string {
-  const phase = typeof node.data.phase === 'string' && node.data.phase.trim().length > 0
-    ? node.data.phase.trim()
-    : '';
+  const phase = typeof node.data.phase === 'string' && node.data.phase.trim().length > 0 ? node.data.phase.trim() : '';
   if (phase) return phase;
-  const content = typeof node.data.content === 'string' && node.data.content.trim().length > 0
-    ? node.data.content.trim()
-    : '';
+  const content =
+    typeof node.data.content === 'string' && node.data.content.trim().length > 0 ? node.data.content.trim() : '';
   if (content) return content;
-  const status = typeof node.data.status === 'string' && node.data.status.trim().length > 0
-    ? node.data.status.trim()
-    : '';
+  const status =
+    typeof node.data.status === 'string' && node.data.status.trim().length > 0 ? node.data.status.trim() : '';
   return status || 'idle';
 }
 

package/src/client/nodes/StatusSummary.tsx

@@ -21,15 +21,9 @@ export function StatusSummary({ node }: { node: CanvasNodeState }) {
           flexShrink: 0,
         }}
       />
-      <span
-        style={{ color: phaseColor, fontSize: '10px', textTransform: 'uppercase', fontWeight: 600 }}
-      >
-        {phase}
-      </span>
+      <span style={{ color: phaseColor, fontSize: '10px', textTransform: 'uppercase', fontWeight: 600 }}>{phase}</span>
       {activeTool && (
-        <span style={{ color: 'var(--c-warn)', fontSize: '10px', fontFamily: 'var(--mono)' }}>
-          ⚙ {activeTool}
-        </span>
+        <span style={{ color: 'var(--c-warn)', fontSize: '10px', fontFamily: 'var(--mono)' }}>⚙ {activeTool}</span>
       )}
       {subagent && subagent.state !== 'completed' && (
         <span style={{ color: 'var(--c-subagent)', fontSize: '10px' }}>⠉ {subagent.name}</span>

package/src/client/nodes/WebpageNode.tsx

@@ -20,11 +20,12 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
   const url = typeof node.data.url === 'string' ? node.data.url : '';
   const pageTitle = typeof node.data.pageTitle === 'string' ? node.data.pageTitle : '';
   const description = typeof node.data.description === 'string' ? node.data.description : '';
-  const excerpt = typeof node.data.excerpt === 'string'
-    ? node.data.excerpt
-    : typeof node.data.content === 'string'
-      ? node.data.content
-      : '';
+  const excerpt =
+    typeof node.data.excerpt === 'string'
+      ? node.data.excerpt
+      : typeof node.data.content === 'string'
+        ? node.data.content
+        : '';
   const status = typeof node.data.status === 'string' ? node.data.status : 'idle';
   const error = typeof node.data.error === 'string' ? node.data.error : '';
   const fetchedAt = formatFetchedAt(typeof node.data.fetchedAt === 'string' ? node.data.fetchedAt : undefined);
@@ -55,12 +56,7 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
     return <div style={{ color: 'var(--c-dim)', fontStyle: 'italic', padding: '12px' }}>No webpage URL set</div>;
   }
 
-  const statusTone =
-    status === 'ready'
-      ? 'var(--c-ok)'
-      : status === 'error'
-        ? 'var(--c-danger)'
-        : 'var(--c-warn)';
+  const statusTone = status === 'ready' ? 'var(--c-ok)' : status === 'error' ? 'var(--c-danger)' : 'var(--c-warn)';
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', height: '100%' }}>
@@ -123,7 +119,9 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
             />
           )}
           {description && (
-            <p style={{ margin: 0, color: 'var(--c-text-soft)', lineHeight: 1.5, fontSize: expanded ? '14px' : '12px' }}>
+            <p
+              style={{ margin: 0, color: 'var(--c-text-soft)', lineHeight: 1.5, fontSize: expanded ? '14px' : '12px' }}
+            >
               {description}
             </p>
           )}
@@ -232,7 +230,8 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
               background: 'rgba(255,255,255,0.03)',
             }}
           >
-            Live preview (best effort). If this stays blank, the site likely blocks framing. The cached text snapshot below still works.
+            Live preview (best effort). If this stays blank, the site likely blocks framing. The cached text snapshot
+            below still works.
           </div>
           <iframe
             class="webpage-node-iframe"
@@ -274,7 +273,14 @@ export function WebpageNode({ node, expanded = false }: { node: CanvasNodeState;
         }}
       >
         {excerpt ? (
-          <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.55, color: 'var(--c-text)', fontSize: expanded ? '14px' : '12px' }}>
+          <div
+            style={{
+              whiteSpace: 'pre-wrap',
+              lineHeight: 1.55,
+              color: 'var(--c-text)',
+              fontSize: expanded ? '14px' : '12px',
+            }}
+          >
             {excerpt}
           </div>
         ) : (

package/src/client/nodes/iframe-document-url.ts

@@ -7,12 +7,14 @@ interface FrameDocumentCreateResponse {
 }
 
 function isFrameDocumentCreateResponse(value: unknown): value is FrameDocumentCreateResponse {
-  return Boolean(value)
-    && typeof value === 'object'
-    && value !== null
-    && !Array.isArray(value)
-    && 'ok' in value
-    && typeof (value as { ok: unknown }).ok === 'boolean';
+  return (
+    Boolean(value) &&
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    'ok' in value &&
+    typeof (value as { ok: unknown }).ok === 'boolean'
+  );
 }
 
 export async function createIframeDocumentUrl(html: string, sandbox: string): Promise<string> {
@@ -21,17 +23,21 @@ export async function createIframeDocumentUrl(html: string, sandbox: string): Pr
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ html, sandbox }),
   });
-  const json = await response.json() as unknown;
+  const json = (await response.json()) as unknown;
   if (!response.ok || !isFrameDocumentCreateResponse(json) || !json.ok || typeof json.url !== 'string') {
-    const message = isFrameDocumentCreateResponse(json) && json.error
-      ? json.error
-      : `Frame document request failed with HTTP ${response.status}`;
+    const message =
+      isFrameDocumentCreateResponse(json) && json.error
+        ? json.error
+        : `Frame document request failed with HTTP ${response.status}`;
     throw new Error(message);
   }
   return json.url;
 }
 
-export function useIframeDocument(html: string, sandbox: string): { attributes: { src?: string }; ready: boolean; key: string } {
+export function useIframeDocument(
+  html: string,
+  sandbox: string,
+): { attributes: { src?: string }; ready: boolean; key: string } {
   const [src, setSrc] = useState<string | null>(null);
 
   useEffect(() => {
@@ -50,9 +56,12 @@ export function useIframeDocument(html: string, sandbox: string): { attributes:
     };
   }, [html, sandbox]);
 
-  return useMemo(() => ({
-    attributes: src ? { src } : {},
-    ready: Boolean(src),
-    key: src ?? '',
-  }), [src]);
+  return useMemo(
+    () => ({
+      attributes: src ? { src } : {},
+      ready: Boolean(src),
+      key: src ?? '',
+    }),
+    [src],
+  );
 }

package/src/client/nodes/image-warnings.ts

@@ -52,13 +52,7 @@ function metadataWarnings(node: CanvasNodeState): ImageNodeWarning[] {
 }
 
 function looksLikeLoginCapture(node: CanvasNodeState): boolean {
-  const haystack = [
-    node.data.title,
-    node.data.caption,
-    node.data.alt,
-    node.data.src,
-    node.data.path,
-  ]
+  const haystack = [node.data.title, node.data.caption, node.data.alt, node.data.src, node.data.path]
     .map((value) => readTrimmedString(value)?.toLowerCase() ?? '')
     .join(' ');
 

package/src/client/nodes/md-format.ts

@@ -168,11 +168,26 @@ export function getSelectionRect(ta: HTMLTextAreaElement): { top: number; left:
   const mirror = document.createElement('div');
   const style = getComputedStyle(ta);
   const props = [
-    'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'letterSpacing',
-    'wordSpacing', 'textIndent', 'whiteSpace', 'wordWrap', 'overflowWrap',
-    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
-    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
-    'boxSizing', 'width',
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+    'lineHeight',
+    'letterSpacing',
+    'wordSpacing',
+    'textIndent',
+    'whiteSpace',
+    'wordWrap',
+    'overflowWrap',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'boxSizing',
+    'width',
   ] as const;
   for (const p of props) {
     mirror.style[p] = style[p];

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();