pmx-canvas 0.3.0 → 0.3.2

package/src/client/canvas/AttentionHistory.tsx

@@ -42,7 +42,17 @@ export function AttentionHistory() {
         aria-label={unread > 0 ? `Recent updates — ${unread} new` : 'Recent updates'}
         title={unread > 0 ? `${unread} new updates since last viewed` : 'Recent updates'}
       >
-        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
           <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
           <circle cx="4.5" cy="8" r="1.1" fill="currentColor" stroke="none" />
           <line x1="6.5" y1="6.5" x2="12.5" y2="6.5" />

package/src/client/canvas/CanvasNode.tsx

@@ -1,9 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import {
-  attentionPrimaryNodeIds,
-  attentionPulseNodeIds,
-  attentionSecondaryNodeIds,
-} from '../state/attention-store';
+import { attentionPrimaryNodeIds, attentionPulseNodeIds, attentionSecondaryNodeIds } from '../state/attention-store';
 import {
   activeNodeId,
   activeNeighborNodeIds,
@@ -55,16 +51,19 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
   const renameRef = useRef<HTMLInputElement>(null);
 
   // ── Drag (with snap alignment) ──────────────────────
-  const handleMove = useCallback((id: string, x: number, y: number) => {
-    const snap = snapToGuides(x, y, node.size.width, node.size.height);
-    const current = nodes.value.get(id);
-    if (current?.position.x === snap.x && current.position.y === snap.y) {
+  const handleMove = useCallback(
+    (id: string, x: number, y: number) => {
+      const snap = snapToGuides(x, y, node.size.width, node.size.height);
+      const current = nodes.value.get(id);
+      if (current?.position.x === snap.x && current.position.y === snap.y) {
+        activeGuides.value = snap.guides.length > 0 ? snap.guides : null;
+        return;
+      }
+      updateNode(id, { position: { x: snap.x, y: snap.y } });
       activeGuides.value = snap.guides.length > 0 ? snap.guides : null;
-      return;
-    }
-    updateNode(id, { position: { x: snap.x, y: snap.y } });
-    activeGuides.value = snap.guides.length > 0 ? snap.guides : null;
-  }, [node.size.width, node.size.height]);
+    },
+    [node.size.width, node.size.height],
+  );
 
   const handleDragEnd = useCallback(() => {
     clearSnapCache();
@@ -196,7 +195,16 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         autoFitPersistTimer.current = null;
       }
     };
-  }, [node.id, node.type, node.data.mode, node.data.strictSize, node.collapsed, node.dockPosition, node.size.width, node.size.height]);
+  }, [
+    node.id,
+    node.type,
+    node.data.mode,
+    node.data.strictSize,
+    node.collapsed,
+    node.dockPosition,
+    node.size.width,
+    node.size.height,
+  ]);
 
   const isPinned = node.pinned;
   const isTrace = node.type === 'trace';
@@ -237,12 +245,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
     .join(' ');
 
   return (
-    <div
-      class={nodeClass}
-      style={nodeStyle}
-      onPointerDown={handlePointerDown}
-      onContextMenu={handleContextMenuEvent}
-    >
+    <div class={nodeClass} style={nodeStyle} onPointerDown={handlePointerDown} onContextMenu={handleContextMenuEvent}>
       <div class="node-titlebar" onPointerDown={handleTitlePointerDown}>
         <span class="node-type-icon" aria-hidden="true">
           {(() => {
@@ -345,10 +348,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
         </div>
       )}
       {!node.collapsed && (
-        <div
-          class="node-resize-handle"
-          onPointerDown={(e) => startResize(e, node.size.width, node.size.height)}
-        />
+        <div class="node-resize-handle" onPointerDown={(e) => startResize(e, node.size.width, node.size.height)} />
       )}
       {/* Connection port handles — visible on hover, drag to connect */}
       {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
@@ -364,10 +364,22 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
             const hh = node.size.height / 2;
             let px: number, py: number;
             switch (side) {
-              case 'top':    px = cx; py = cy - hh; break;
-              case 'bottom': px = cx; py = cy + hh; break;
-              case 'left':   px = cx - hw; py = cy; break;
-              case 'right':  px = cx + hw; py = cy; break;
+              case 'top':
+                px = cx;
+                py = cy - hh;
+                break;
+              case 'bottom':
+                px = cx;
+                py = cy + hh;
+                break;
+              case 'left':
+                px = cx - hw;
+                py = cy;
+                break;
+              case 'right':
+                px = cx + hw;
+                py = cy;
+                break;
             }
             draggingEdge.value = {
               fromId: node.id,

package/src/client/canvas/CanvasViewport.tsx

@@ -102,7 +102,8 @@ function findAnnotationAtPoint(
       point.x > annotation.bounds.x + annotation.bounds.width + pad ||
       point.y < annotation.bounds.y - pad ||
       point.y > annotation.bounds.y + annotation.bounds.height + pad
-    ) continue;
+    )
+      continue;
     if (annotation.type === 'text') return annotation;
     for (let index = 1; index < annotation.points.length; index++) {
       const start = annotation.points[index - 1];
@@ -175,9 +176,7 @@ function extractUrlsFromText(text: string): string[] {
   const trimmed = text.trim();
   if (!trimmed) return [];
 
-  const rawCandidates = trimmed.includes('\n')
-    ? trimmed.split(/\r?\n/)
-    : trimmed.split(/\s+/);
+  const rawCandidates = trimmed.includes('\n') ? trimmed.split(/\r?\n/) : trimmed.split(/\s+/);
   const seen = new Set<string>();
   const urls: string[] = [];
 
@@ -236,7 +235,12 @@ export function getRenderableWorldNodes(
   return worldNodes;
 }
 
-export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotationMode = false, annotationTool = null }: CanvasViewportProps) {
+export function CanvasViewport({
+  onNodeContextMenu,
+  onCanvasContextMenu,
+  annotationMode = false,
+  annotationTool = null,
+}: CanvasViewportProps) {
   const v = viewport.value;
   const isLassoing = useRef(false);
   const isAnnotating = useRef(false);
@@ -405,7 +409,7 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         const previous = annotationPoints.current.at(-1);
         if (previous && Math.hypot(point.x - previous.x, point.y - previous.y) < 2) return;
         annotationPoints.current = [...annotationPoints.current, point];
-        setDraftAnnotation((draft) => draft ? { ...draft, points: annotationPoints.current } : null);
+        setDraftAnnotation((draft) => (draft ? { ...draft, points: annotationPoints.current } : null));
         return;
       }
 
@@ -465,12 +469,7 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         if (node.dockPosition !== null) continue;
         const nx = node.position.x;
         const ny = node.position.y;
-        if (
-          nx + node.size.width > worldMinX &&
-          nx < worldMaxX &&
-          ny + node.size.height > worldMinY &&
-          ny < worldMaxY
-        ) {
+        if (nx + node.size.width > worldMinX && nx < worldMaxX && ny + node.size.height > worldMinY && ny < worldMaxY) {
           hits.push(node.id);
         }
       }
@@ -626,58 +625,77 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
     if (dropCounter.current <= 0) {
       dropCounter.current = 0;
       setDropActive(false);
-          }
+    }
   }, []);
 
-  const handleDrop = useCallback(async (e: DragEvent) => {
-    e.preventDefault();
-    setDropActive(false);
-        dropCounter.current = 0;
+  const handleDrop = useCallback(
+    async (e: DragEvent) => {
+      e.preventDefault();
+      setDropActive(false);
+      dropCounter.current = 0;
 
-    const container = containerRef.current;
-    if (!container || !e.dataTransfer) return;
+      const container = containerRef.current;
+      if (!container || !e.dataTransfer) return;
 
-    const rect = container.getBoundingClientRect();
-    const vp = viewport.value;
-    const baseWx = (e.clientX - rect.left - vp.x) / vp.scale;
-    const baseWy = (e.clientY - rect.top - vp.y) / vp.scale;
+      const rect = container.getBoundingClientRect();
+      const vp = viewport.value;
+      const baseWx = (e.clientX - rect.left - vp.x) / vp.scale;
+      const baseWy = (e.clientY - rect.top - vp.y) / vp.scale;
 
-    const files = Array.from(e.dataTransfer.files);
-    if (files.length === 0) {
-      const urls = getTransferUrls(e.dataTransfer);
-      await createWebpageNodes(urls, baseWx, baseWy);
-      return;
-    }
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length === 0) {
+        const urls = getTransferUrls(e.dataTransfer);
+        await createWebpageNodes(urls, baseWx, baseWy);
+        return;
+      }
 
-    const nodeW = 400;
-    const nodeH = 300;
-    const spacing = 20;
-    const cols = Math.ceil(Math.sqrt(files.length));
-
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i];
-      const col = i % cols;
-      const row = Math.floor(i / cols);
-      const wx = baseWx - (cols * (nodeW + spacing)) / 2 + col * (nodeW + spacing);
-      const wy = baseWy - nodeH / 2 + row * (nodeH + spacing);
-
-      const type = nodeTypeFromFilename(file.name);
-      const fileName = file.name;
-
-      if (type === 'image') {
-        const reader = new FileReader();
-        const dataUri: string = await new Promise((resolve) => {
-          reader.onload = () => resolve(reader.result as string);
-          reader.readAsDataURL(file);
-        });
-        await createNodeFromClient({ type: 'image', title: fileName, content: dataUri, x: wx, y: wy, width: nodeW, height: nodeH });
-      } else {
-        const text = await file.text();
-        const isWide = type === 'markdown' || type === 'file';
-        await createNodeFromClient({ type, title: fileName, content: text, x: wx, y: wy, width: isWide ? 720 : nodeW, height: isWide ? 500 : nodeH });
+      const nodeW = 400;
+      const nodeH = 300;
+      const spacing = 20;
+      const cols = Math.ceil(Math.sqrt(files.length));
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const col = i % cols;
+        const row = Math.floor(i / cols);
+        const wx = baseWx - (cols * (nodeW + spacing)) / 2 + col * (nodeW + spacing);
+        const wy = baseWy - nodeH / 2 + row * (nodeH + spacing);
+
+        const type = nodeTypeFromFilename(file.name);
+        const fileName = file.name;
+
+        if (type === 'image') {
+          const reader = new FileReader();
+          const dataUri: string = await new Promise((resolve) => {
+            reader.onload = () => resolve(reader.result as string);
+            reader.readAsDataURL(file);
+          });
+          await createNodeFromClient({
+            type: 'image',
+            title: fileName,
+            content: dataUri,
+            x: wx,
+            y: wy,
+            width: nodeW,
+            height: nodeH,
+          });
+        } else {
+          const text = await file.text();
+          const isWide = type === 'markdown' || type === 'file';
+          await createNodeFromClient({
+            type,
+            title: fileName,
+            content: text,
+            x: wx,
+            y: wy,
+            width: isWide ? 720 : nodeW,
+            height: isWide ? 500 : nodeH,
+          });
+        }
       }
-    }
-  }, [containerRef, createWebpageNodes]);
+    },
+    [containerRef, createWebpageNodes],
+  );
 
   useEffect(() => {
     const handlePaste = async (e: ClipboardEvent) => {
@@ -750,13 +768,14 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         height: '100%',
         position: 'relative',
         overflow: 'hidden',
-        cursor: annotationTool === 'eraser'
-          ? 'cell'
-          : annotationTool === 'text'
-            ? 'text'
-          : annotationMode || draggingEdge.value || isLassoing.current
-            ? 'crosshair'
-            : 'grab',
+        cursor:
+          annotationTool === 'eraser'
+            ? 'cell'
+            : annotationTool === 'text'
+              ? 'text'
+              : annotationMode || draggingEdge.value || isLassoing.current
+                ? 'crosshair'
+                : 'grab',
       }}
     >
       {/* D4: CSS matrix(a,b,c,d,tx,ty) — scale uniformly (a=d=scale, b=c=0)
@@ -784,7 +803,18 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
         ))}
         {/* Snap alignment guide lines */}
         {activeGuides.value && (
-          <svg class="snap-guides-svg" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none', overflow: 'visible' }}>
+          <svg
+            class="snap-guides-svg"
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              pointerEvents: 'none',
+              overflow: 'visible',
+            }}
+          >
             {activeGuides.value.map((g, i) =>
               g.axis === 'x' ? (
                 <line key={i} x1={g.pos} y1={g.from - 20} x2={g.pos} y2={g.to + 20} class="snap-guide-line" />
@@ -795,7 +825,12 @@ export function CanvasViewport({ onNodeContextMenu, onCanvasContextMenu, annotat
           </svg>
         )}
       </div>
-      {annotationMode && <div class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}${annotationTool === 'text' ? ' text' : ''}`} aria-hidden="true" />}
+      {annotationMode && (
+        <div
+          class={`annotation-capture-layer${annotationTool === 'eraser' ? ' erasing' : ''}${annotationTool === 'text' ? ' text' : ''}`}
+          aria-hidden="true"
+        />
+      )}
       {textDraft && (
         <input
           class="annotation-text-input"

package/src/client/canvas/CommandPalette.tsx

@@ -39,7 +39,7 @@ function fuzzyMatch(query: string, text: string): { match: boolean; score: numbe
     if (t[ti] === q[qi]) {
       indices.push(ti);
       // Consecutive chars bonus
-      score += (lastIdx === ti - 1) ? 10 : 1;
+      score += lastIdx === ti - 1 ? 10 : 1;
       // Start-of-word bonus
       if (ti === 0 || t[ti - 1] === ' ' || t[ti - 1] === '-' || t[ti - 1] === '_') score += 5;
       lastIdx = ti;
@@ -94,13 +94,7 @@ function parseTypeFilter(query: string): { typeFilter: CanvasNodeState['type'] |
 }
 
 // ── Component ───────────────────────────────────────────────
-export function CommandPalette({
-  onClose,
-  onToggleMinimap,
-}: {
-  onClose: () => void;
-  onToggleMinimap: () => void;
-}) {
+export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => void; onToggleMinimap: () => void }) {
   const [query, setQuery] = useState('');
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -135,11 +129,46 @@ export function CommandPalette({
 
     // Action items
     const actions: Array<{ label: string; badge: string; action: () => void }> = [
-      { label: 'New note (markdown node)', badge: 'CREATE', action: () => { createNodeFromClient({ type: 'markdown', title: 'New note', width: 520, height: 360 }); onClose(); } },
-      { label: 'Fit all nodes', badge: 'VIEW', action: () => { fitAll(window.innerWidth, window.innerHeight); onClose(); } },
-      { label: 'Auto-arrange (grid)', badge: 'LAYOUT', action: () => { autoArrange(); onClose(); } },
-      { label: 'Auto-arrange (graph-aware)', badge: 'LAYOUT', action: () => { forceDirectedArrange(); onClose(); } },
-      { label: 'Toggle minimap', badge: 'VIEW', action: () => { onToggleMinimap(); onClose(); } },
+      {
+        label: 'New note (markdown node)',
+        badge: 'CREATE',
+        action: () => {
+          createNodeFromClient({ type: 'markdown', title: 'New note', width: 520, height: 360 });
+          onClose();
+        },
+      },
+      {
+        label: 'Fit all nodes',
+        badge: 'VIEW',
+        action: () => {
+          fitAll(window.innerWidth, window.innerHeight);
+          onClose();
+        },
+      },
+      {
+        label: 'Auto-arrange (grid)',
+        badge: 'LAYOUT',
+        action: () => {
+          autoArrange();
+          onClose();
+        },
+      },
+      {
+        label: 'Auto-arrange (graph-aware)',
+        badge: 'LAYOUT',
+        action: () => {
+          forceDirectedArrange();
+          onClose();
+        },
+      },
+      {
+        label: 'Toggle minimap',
+        badge: 'VIEW',
+        action: () => {
+          onToggleMinimap();
+          onClose();
+        },
+      },
       {
         label: 'Toggle theme (dark/light)',
         badge: 'THEME',
@@ -215,7 +244,9 @@ export function CommandPalette({
 
   // Clear highlights on unmount (palette close)
   useEffect(() => {
-    return () => { searchHighlightIds.value = null; };
+    return () => {
+      searchHighlightIds.value = null;
+    };
   }, []);
 
   // Clamp selected index
@@ -268,15 +299,22 @@ export function CommandPalette({
           placeholder={`Search nodes and actions... (${MOD_KEY}+K)`}
         />
         <div class="command-palette-hint">
-          <span><kbd>{'\u2191'}</kbd><kbd>{'\u2193'}</kbd> navigate</span>
-          <span><kbd>{'\u21B5'}</kbd> select</span>
-          <span><kbd>esc</kbd> close</span>
-          <span><kbd>type:</kbd> filter by type</span>
+          <span>
+            <kbd>{'\u2191'}</kbd>
+            <kbd>{'\u2193'}</kbd> navigate
+          </span>
+          <span>
+            <kbd>{'\u21B5'}</kbd> select
+          </span>
+          <span>
+            <kbd>esc</kbd> close
+          </span>
+          <span>
+            <kbd>type:</kbd> filter by type
+          </span>
         </div>
         <div class="command-palette-results" ref={listRef}>
-          {filtered.length === 0 && (
-            <div class="command-palette-empty">No matching nodes or actions</div>
-          )}
+          {filtered.length === 0 && <div class="command-palette-empty">No matching nodes or actions</div>}
           {filtered.map((item, i) => (
             <button
               key={item.id}
@@ -285,15 +323,11 @@ export function CommandPalette({
               onMouseEnter={() => setSelectedIndex(i)}
               onClick={() => item.action()}
             >
-              <span class={`command-palette-badge${item.badgeClass ? ` ${item.badgeClass}` : ''}`}>
-                {item.badge}
-              </span>
+              <span class={`command-palette-badge${item.badgeClass ? ` ${item.badgeClass}` : ''}`}>{item.badge}</span>
               <span class="command-palette-label">
                 {item.indices.length > 0 ? highlightMatch(item.label, item.indices) : item.label}
               </span>
-              {item.description && (
-                <span class="command-palette-desc">{item.description}</span>
-              )}
+              {item.description && <span class="command-palette-desc">{item.description}</span>}
             </button>
           ))}
         </div>

package/src/client/canvas/ContextMenu.tsx

@@ -103,9 +103,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
     items = buildCanvasMenuItems(menu.canvasX, menu.canvasY);
   }
   const keyCounts = new Map<string, number>();
-  const estimatedHeight = items.some((item) => item.render)
-    ? items.length * 32 + 168
-    : items.length * 32 + 8;
+  const estimatedHeight = items.some((item) => item.render) ? items.length * 32 + 168 : items.length * 32 + 8;
 
   // Keep menu on screen
   const adjustedX = Math.min(menu.x, Math.max(12, window.innerWidth - 240));
@@ -128,7 +126,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
           ? 'separator'
           : item.render
             ? 'custom'
-          : `${item.label ?? 'item'}:${item.shortcut ?? ''}`;
+            : `${item.label ?? 'item'}:${item.shortcut ?? ''}`;
         const nextCount = (keyCounts.get(baseKey) ?? 0) + 1;
         keyCounts.set(baseKey, nextCount);
         const itemKey = `${baseKey}:${nextCount}`;
@@ -239,10 +237,7 @@ function renderGroupColorSection(node: CanvasNodeState, onClose: () => void): Co
                 onClose();
               }}
             >
-              <span
-                class="context-menu-color-dot"
-                style={{ '--swatch-color': preset.value }}
-              />
+              <span class="context-menu-color-dot" style={{ '--swatch-color': preset.value }} />
               <span>{preset.label}</span>
             </button>
           );
@@ -267,7 +262,12 @@ function renderGroupColorSection(node: CanvasNodeState, onClose: () => void): Co
   );
 }
 
-function centeredPosition(canvasX: number, canvasY: number, width: number, height: number): {
+function centeredPosition(
+  canvasX: number,
+  canvasY: number,
+  width: number,
+  height: number,
+): {
   x: number;
   y: number;
 } {
@@ -452,9 +452,7 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
   const pending = pendingConnection.value;
   if (pending && pending.from !== node.id) {
     const sourceNode = nodes.value.get(pending.from);
-    const sourceTitle = sourceNode
-      ? ((sourceNode.data.title as string) || sourceNode.id).slice(0, 20)
-      : pending.from;
+    const sourceTitle = sourceNode ? ((sourceNode.data.title as string) || sourceNode.id).slice(0, 20) : pending.from;
     items.push({
       label: `Connect from "${sourceTitle}"`,
       action: () => {
@@ -472,9 +470,7 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
   });
 
   // Show edge count
-  const edgeCount = Array.from(edges.value.values()).filter(
-    (e) => e.from === node.id || e.to === node.id,
-  ).length;
+  const edgeCount = Array.from(edges.value.values()).filter((e) => e.from === node.id || e.to === node.id).length;
   if (edgeCount > 0) {
     items.push({
       label: `${edgeCount} edge${edgeCount !== 1 ? 's' : ''} connected`,
@@ -502,8 +498,7 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
   if (node.type === 'mcp-app' || node.type === 'json-render' || node.type === 'graph') {
     if (node.data.chartConfig) {
       // Chart ext-app node — chart-specific actions
-      const chartTitle =
-        ((node.data.chartConfig as Record<string, unknown>).title as string) || 'chart';
+      const chartTitle = ((node.data.chartConfig as Record<string, unknown>).title as string) || 'chart';
       items.push({
         label: 'Copy chart data',
         action: () => {
@@ -527,9 +522,7 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
         items.push({
           label: 'Copy spec',
           action: () => {
-            navigator.clipboard.writeText(
-              JSON.stringify(node.data.spec ?? node.data.graphConfig ?? {}, null, 2),
-            );
+            navigator.clipboard.writeText(JSON.stringify(node.data.spec ?? node.data.graphConfig ?? {}, null, 2));
           },
         });
       }

package/src/client/canvas/ContextPinBar.tsx

@@ -1,8 +1,4 @@
-import {
-  clearContextPins,
-  contextPinnedNodeIds,
-  hasOpenDockedContextPanel,
-} from '../state/canvas-store';
+import { clearContextPins, contextPinnedNodeIds, hasOpenDockedContextPanel } from '../state/canvas-store';
 import { attentionHistoryOpen } from '../state/attention-store';
 
 export function ContextPinBar() {

package/src/client/canvas/ContextPinHud.tsx

@@ -9,12 +9,7 @@ export function ContextPinHud() {
       <span class="context-pin-hud-label">
         {'\u2726'} {count} in context
       </span>
-      <button
-        type="button"
-        class="context-pin-hud-clear"
-        onClick={clearContextPins}
-        title="Clear all context pins"
-      >
+      <button type="button" class="context-pin-hud-clear" onClick={clearContextPins} title="Clear all context pins">
         ×
       </button>
     </div>

package/src/client/canvas/DockedNode.tsx

@@ -59,7 +59,9 @@ function ContextDockedNode({ node }: { node: CanvasNodeState }) {
                 e.stopPropagation();
                 expand();
               }}
-              title={hasItems ? `${count} item${count === 1 ? '' : 's'} in agent context — expand` : 'Expand agent context'}
+              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'}
             >
               {'▸'}
@@ -157,9 +159,7 @@ export function DockedNode({ node }: { node: CanvasNodeState }) {
           </button>
         </div>
       </div>
-      {!node.collapsed && (
-        <div class="docked-node-body">{renderDockedContent(node)}</div>
-      )}
+      {!node.collapsed && <div class="docked-node-body">{renderDockedContent(node)}</div>}
     </div>
   );
 }