pmx-canvas 0.3.0 → 0.3.2

package/src/client/canvas/SnapshotPanel.tsx

@@ -87,13 +87,16 @@ export function SnapshotPanel({
     }
   }, [nameInput]);
 
-  const handleRestore = useCallback(async (id: string) => {
-    setConfirming(null);
-    setRestoringId(id);
-    const result = await restoreSnapshot(id);
-    setRestoringId(null);
-    if (result.ok) onClose();
-  }, [onClose]);
+  const handleRestore = useCallback(
+    async (id: string) => {
+      setConfirming(null);
+      setRestoringId(id);
+      const result = await restoreSnapshot(id);
+      setRestoringId(null);
+      if (result.ok) onClose();
+    },
+    [onClose],
+  );
 
   const handleDelete = useCallback(async (id: string) => {
     const result = await deleteSnapshot(id);
@@ -111,20 +114,11 @@ export function SnapshotPanel({
   const top = anchorRect ? anchorRect.bottom + 8 : 48;
 
   return (
-    <div
-      ref={panelRef}
-      class="snapshot-panel"
-      style={{ left: `${left}px`, top: `${top}px` }}
-    >
+    <div ref={panelRef} class="snapshot-panel" style={{ left: `${left}px`, top: `${top}px` }}>
       {/* Header */}
       <div class="snapshot-panel-header">
         <span class="snapshot-panel-title">Snapshots</span>
-        <button
-          type="button"
-          class="snapshot-panel-close"
-          onClick={onClose}
-          title="Close"
-        >
+        <button type="button" class="snapshot-panel-close" onClick={onClose} title="Close">
           {'\u00d7'}
         </button>
       </div>
@@ -137,99 +131,87 @@ export function SnapshotPanel({
           class="snapshot-name-input"
           value={nameInput}
           onInput={(e) => setNameInput((e.target as HTMLInputElement).value)}
-          onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') handleSave();
+          }}
           placeholder="Snapshot name..."
           maxLength={80}
           disabled={saving}
         />
-        <button
-          type="button"
-          class="snapshot-save-btn"
-          onClick={handleSave}
-          disabled={!nameInput.trim() || saving}
-        >
+        <button type="button" class="snapshot-save-btn" onClick={handleSave} disabled={!nameInput.trim() || saving}>
           {saving ? '...' : 'Save'}
         </button>
       </div>
 
-      <div class="snapshot-restore-note">
-        Restoring replaces the current canvas. You can undo it if needed.
-      </div>
+      <div class="snapshot-restore-note">Restoring replaces the current canvas. You can undo it if needed.</div>
 
       {/* Snapshot list */}
       <div class="snapshot-list">
-        {loading && (
-          <div class="snapshot-empty">Loading...</div>
-        )}
+        {loading && <div class="snapshot-empty">Loading...</div>}
 
         {!loading && snapshots.length === 0 && (
-          <div class="snapshot-empty">
-            No snapshots yet. Save one to capture the current canvas state.
-          </div>
+          <div class="snapshot-empty">No snapshots yet. Save one to capture the current canvas state.</div>
         )}
 
-        {!loading && snapshots.map((snap) => (
-          <div key={snap.id} class="snapshot-item">
-            <div class="snapshot-item-info">
-              <span class="snapshot-item-name">{snap.name}</span>
-              <span class="snapshot-item-meta">
-                {snap.nodeCount} node{snap.nodeCount !== 1 ? 's' : ''}
-                {snap.edgeCount > 0 ? ` \u00b7 ${snap.edgeCount} edge${snap.edgeCount !== 1 ? 's' : ''}` : ''}
-                {' \u00b7 '}
-                {timeAgo(snap.createdAt)}
-              </span>
-            </div>
-            <div class="snapshot-item-actions">
-              {confirming?.id === snap.id ? (
-                <>
-                  <button
-                    type="button"
-                    class={`snapshot-action-btn ${confirming.action === 'delete' ? 'snapshot-action-confirm' : 'snapshot-action-restore'}`}
-                    onClick={() => confirming.action === 'delete' ? handleDelete(snap.id) : handleRestore(snap.id)}
-                    title={confirming.action === 'delete' ? 'Confirm delete' : 'Confirm restore'}
-                    disabled={restoringId !== null}
-                  >
-                    {confirming.action === 'delete'
-                      ? 'Delete'
-                      : restoringId === snap.id
-                        ? 'Restoring...'
-                        : 'Confirm'}
-                  </button>
-                  <button
-                    type="button"
-                    class="snapshot-action-btn"
-                    onClick={() => setConfirming(null)}
-                    title="Cancel"
-                    disabled={restoringId !== null}
-                  >
-                    Cancel
-                  </button>
-                </>
-              ) : (
-                <>
-                  <button
-                    type="button"
-                    class="snapshot-action-btn snapshot-action-restore"
-                    onClick={() => setConfirming({ id: snap.id, action: 'restore' })}
-                    title="Restore this snapshot"
-                    disabled={restoringId !== null}
-                  >
-                    {restoringId === snap.id ? 'Restoring...' : 'Restore'}
-                  </button>
-                  <button
-                    type="button"
-                    class="snapshot-action-btn snapshot-action-delete"
-                    onClick={() => setConfirming({ id: snap.id, action: 'delete' })}
-                    title="Delete this snapshot"
-                    disabled={restoringId !== null}
-                  >
-                    {'\u2715'}
-                  </button>
-                </>
-              )}
+        {!loading &&
+          snapshots.map((snap) => (
+            <div key={snap.id} class="snapshot-item">
+              <div class="snapshot-item-info">
+                <span class="snapshot-item-name">{snap.name}</span>
+                <span class="snapshot-item-meta">
+                  {snap.nodeCount} node{snap.nodeCount !== 1 ? 's' : ''}
+                  {snap.edgeCount > 0 ? ` \u00b7 ${snap.edgeCount} edge${snap.edgeCount !== 1 ? 's' : ''}` : ''}
+                  {' \u00b7 '}
+                  {timeAgo(snap.createdAt)}
+                </span>
+              </div>
+              <div class="snapshot-item-actions">
+                {confirming?.id === snap.id ? (
+                  <>
+                    <button
+                      type="button"
+                      class={`snapshot-action-btn ${confirming.action === 'delete' ? 'snapshot-action-confirm' : 'snapshot-action-restore'}`}
+                      onClick={() => (confirming.action === 'delete' ? handleDelete(snap.id) : handleRestore(snap.id))}
+                      title={confirming.action === 'delete' ? 'Confirm delete' : 'Confirm restore'}
+                      disabled={restoringId !== null}
+                    >
+                      {confirming.action === 'delete' ? 'Delete' : restoringId === snap.id ? 'Restoring...' : 'Confirm'}
+                    </button>
+                    <button
+                      type="button"
+                      class="snapshot-action-btn"
+                      onClick={() => setConfirming(null)}
+                      title="Cancel"
+                      disabled={restoringId !== null}
+                    >
+                      Cancel
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <button
+                      type="button"
+                      class="snapshot-action-btn snapshot-action-restore"
+                      onClick={() => setConfirming({ id: snap.id, action: 'restore' })}
+                      title="Restore this snapshot"
+                      disabled={restoringId !== null}
+                    >
+                      {restoringId === snap.id ? 'Restoring...' : 'Restore'}
+                    </button>
+                    <button
+                      type="button"
+                      class="snapshot-action-btn snapshot-action-delete"
+                      onClick={() => setConfirming({ id: snap.id, action: 'delete' })}
+                      title="Delete this snapshot"
+                      disabled={restoringId !== null}
+                    >
+                      {'\u2715'}
+                    </button>
+                  </>
+                )}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
       </div>
     </div>
   );

package/src/client/canvas/auto-fit.ts

@@ -19,11 +19,13 @@ export const AUTO_FIT_BODY_PADDING = 24;
  *  height bridge (use-iframe-content-height) instead; webpage intentionally
  *  scrolls. Excluding them from the DOM path is behaviour-neutral. */
 function isIframeNode(node: CanvasNodeState): boolean {
-  return node.type === 'html'
-    || node.type === 'json-render'
-    || node.type === 'graph'
-    || node.type === 'mcp-app'
-    || node.type === 'webpage';
+  return (
+    node.type === 'html' ||
+    node.type === 'json-render' ||
+    node.type === 'graph' ||
+    node.type === 'mcp-app' ||
+    node.type === 'webpage'
+  );
 }
 
 /** Authored iframe surfaces whose content has a bounded natural height — they may
@@ -39,11 +41,13 @@ function isContentFitSurface(node: CanvasNodeState): boolean {
 /** Shared exemptions: never auto-size a node the user/agent has fixed or a node
  *  whose height is controlled elsewhere. */
 function isAutoSizeExempt(node: CanvasNodeState): boolean {
-  return node.collapsed === true
-    || node.dockPosition != null
-    || node.data.strictSize === true
-    || node.data.userResized === true
-    || node.type === 'group';
+  return (
+    node.collapsed === true ||
+    node.dockPosition != null ||
+    node.data.strictSize === true ||
+    node.data.userResized === true ||
+    node.type === 'group'
+  );
 }
 
 /** DOM-content nodes (markdown/status/file/…) whose body scrollHeight is directly
@@ -71,9 +75,6 @@ export function shouldContentFitIframeNode(node: CanvasNodeState): boolean {
  */
 export function computeContentGrowHeight(node: CanvasNodeState, contentHeight: number): number | null {
   if (!shouldContentFitIframeNode(node) || contentHeight <= 0) return null;
-  const want = Math.min(
-    contentHeight + AUTO_FIT_TITLEBAR_HEIGHT + AUTO_FIT_BODY_PADDING,
-    AUTO_FIT_MAX_HEIGHT_IFRAME,
-  );
+  const want = Math.min(contentHeight + AUTO_FIT_TITLEBAR_HEIGHT + AUTO_FIT_BODY_PADDING, AUTO_FIT_MAX_HEIGHT_IFRAME);
   return want > node.size.height + 8 ? want : null;
 }

package/src/client/canvas/snap-guides.ts

@@ -19,8 +19,16 @@ export interface SnapResult {
 /** Active guide lines to render. Null when not dragging. */
 export const activeGuides = signal<GuideLine[] | null>(null);
 
-interface RefEdgeX { val: number; minY: number; maxY: number }
-interface RefEdgeY { val: number; minX: number; maxX: number }
+interface RefEdgeX {
+  val: number;
+  minY: number;
+  maxY: number;
+}
+interface RefEdgeY {
+  val: number;
+  minX: number;
+  maxX: number;
+}
 
 /** Cached reference edges — built once at drag-start, reused on every pointermove. */
 let cachedRefX: RefEdgeX[] = [];
@@ -37,10 +45,7 @@ function getChildIds(node: CanvasNodeState | undefined): string[] {
   return node.data.children.filter((childId): childId is string => typeof childId === 'string');
 }
 
-function collectExcludedReferenceIds(
-  dragId: string,
-  allNodes: CanvasNodeState[],
-): Set<string> {
+function collectExcludedReferenceIds(dragId: string, allNodes: CanvasNodeState[]): Set<string> {
   const nodeMap = new Map(allNodes.map((node) => [node.id, node]));
   const excluded = new Set<string>([dragId]);
   const dragNode = nodeMap.get(dragId);
@@ -105,12 +110,7 @@ export function clearSnapCache(): void {
  * Snap a dragging node's proposed position to cached reference edges.
  * Must call buildSnapCache() before the first call in a drag session.
  */
-export function snapToGuides(
-  proposedX: number,
-  proposedY: number,
-  nodeW: number,
-  nodeH: number,
-): SnapResult {
+export function snapToGuides(proposedX: number, proposedY: number, nodeW: number, nodeH: number): SnapResult {
   const dragEdgesX = [proposedX, proposedX + nodeW / 2, proposedX + nodeW];
   const dragEdgesY = [proposedY, proposedY + nodeH / 2, proposedY + nodeH];
   const offX = [0, nodeW / 2, nodeW];

package/src/client/canvas/use-node-resize.ts

@@ -41,11 +41,7 @@ export function useNodeResize({ nodeId, viewport, onResize, onResizeEnd }: NodeR
         const scale = viewport.value.scale;
         const dw = (pointer.x - startPointer.current.x) / scale;
         const dh = (pointer.y - startPointer.current.y) / scale;
-        onResize(
-          nodeId,
-          Math.max(MIN_WIDTH, startSize.current.w + dw),
-          Math.max(MIN_HEIGHT, startSize.current.h + dh),
-        );
+        onResize(nodeId, Math.max(MIN_WIDTH, startSize.current.w + dw), Math.max(MIN_HEIGHT, startSize.current.h + dh));
       };
 
       const onPointerMove = (ev: PointerEvent) => {

package/src/client/canvas/use-pan-zoom.ts

@@ -31,15 +31,18 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
   const lastPinchDist = useRef(0);
   const wheelCommitTimer = useRef<number | null>(null);
 
-  const scheduleViewportCommit = useCallback((next: ViewportState) => {
-    if (wheelCommitTimer.current !== null) {
-      window.clearTimeout(wheelCommitTimer.current);
-    }
-    wheelCommitTimer.current = window.setTimeout(() => {
-      wheelCommitTimer.current = null;
-      onViewportCommit(next);
-    }, 140);
-  }, [onViewportCommit]);
+  const scheduleViewportCommit = useCallback(
+    (next: ViewportState) => {
+      if (wheelCommitTimer.current !== null) {
+        window.clearTimeout(wheelCommitTimer.current);
+      }
+      wheelCommitTimer.current = window.setTimeout(() => {
+        wheelCommitTimer.current = null;
+        onViewportCommit(next);
+      }, 140);
+    },
+    [onViewportCommit],
+  );
 
   const handleWheel = useCallback(
     (e: WheelEvent) => {
@@ -79,15 +82,18 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
     [disabled, viewport, onViewportChange, scheduleViewportCommit],
   );
 
-  const handlePointerDown = useCallback((e: PointerEvent) => {
-    if (disabled) return;
-    // Only pan when clicking the canvas background (not nodes)
-    const container = containerRef.current;
-    if (!container || e.target !== container) return;
-    isPanning.current = true;
-    lastPointer.current = { x: e.clientX, y: e.clientY };
-    container.setPointerCapture(e.pointerId);
-  }, [disabled]);
+  const handlePointerDown = useCallback(
+    (e: PointerEvent) => {
+      if (disabled) return;
+      // Only pan when clicking the canvas background (not nodes)
+      const container = containerRef.current;
+      if (!container || e.target !== container) return;
+      isPanning.current = true;
+      lastPointer.current = { x: e.clientX, y: e.clientY };
+      container.setPointerCapture(e.pointerId);
+    },
+    [disabled],
+  );
 
   const handlePointerMove = useCallback(
     (e: PointerEvent) => {
@@ -183,14 +189,7 @@ export function usePanZoom({ viewport, onViewportChange, onViewportCommit, disab
       el.removeEventListener('touchmove', handleTouchMove);
       el.removeEventListener('touchend', handleTouchEnd);
     };
-  }, [
-    handleWheel,
-    handlePointerDown,
-    handlePointerMove,
-    handlePointerUp,
-    handleTouchMove,
-    handleTouchEnd,
-  ]);
+  }, [handleWheel, handlePointerDown, handlePointerMove, handlePointerUp, handleTouchMove, handleTouchEnd]);
 
   return containerRef;
 }

package/src/client/ext-app/bridge.ts

@@ -32,10 +32,7 @@ interface JsonRpcErrorResponse extends JsonRpcBase {
 }
 
 type JsonRpcResponseMessage = JsonRpcSuccessResponse | JsonRpcErrorResponse;
-type JsonRpcMessage =
-  | JsonRpcRequestMessage
-  | JsonRpcNotificationMessage
-  | JsonRpcResponseMessage;
+type JsonRpcMessage = JsonRpcRequestMessage | JsonRpcNotificationMessage | JsonRpcResponseMessage;
 
 type DisplayMode = 'inline' | 'fullscreen' | 'pip';
 
@@ -256,10 +253,7 @@ export class AppBridge {
     this.notificationHandlers.set(method, (params) => callback(params as TParams));
   }
 
-  private setRequestHandler<TParams, TResult>(
-    method: string,
-    callback: RequestHandler<TParams, TResult>,
-  ): void {
+  private setRequestHandler<TParams, TResult>(method: string, callback: RequestHandler<TParams, TResult>): void {
     this.requestHandlers.set(method, (params, extra) => callback(params as TParams, extra));
   }
 
@@ -447,10 +441,7 @@ export class AppBridge {
     }
   }
 
-  private async handleRequest(
-    message: JsonRpcRequestMessage,
-    extra: RequestExtra,
-  ): Promise<unknown> {
+  private async handleRequest(message: JsonRpcRequestMessage, extra: RequestExtra): Promise<unknown> {
     if (message.method === 'ui/initialize') {
       return this.handleInitialize(message.params);
     }

package/src/client/icons.tsx

@@ -5,7 +5,13 @@ interface IconProps {
   class?: string;
 }
 
-const defaults = { fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' } as const;
+const defaults = {
+  fill: 'none',
+  stroke: 'currentColor',
+  'stroke-width': '1.5',
+  'stroke-linecap': 'round',
+  'stroke-linejoin': 'round',
+} as const;
 
 function Icon({ size = 16, children, ...rest }: IconProps & { children: JSX.Element | JSX.Element[] }): JSX.Element {
   return (
@@ -240,8 +246,28 @@ export function IconLogo({ size = 22, class: className }: IconProps): JSX.Elemen
       class={className}
       aria-hidden="true"
     >
-      <rect x="8" y="8" width="48" height="48" rx="7" fill="none" stroke="currentColor" stroke-width="2.2" opacity="0.35" />
-      <rect x="16" y="16" width="32" height="32" rx="5" fill="none" stroke="currentColor" stroke-width="2.2" opacity="0.6" />
+      <rect
+        x="8"
+        y="8"
+        width="48"
+        height="48"
+        rx="7"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.2"
+        opacity="0.35"
+      />
+      <rect
+        x="16"
+        y="16"
+        width="32"
+        height="32"
+        rx="5"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.2"
+        opacity="0.6"
+      />
       <rect x="24" y="24" width="16" height="16" rx="3" fill="none" stroke="currentColor" stroke-width="2.2" />
       <rect x="29" y="29" width="6" height="6" rx="1" fill="currentColor" />
     </svg>
@@ -439,22 +465,39 @@ export function IconNodeGraph(p: IconProps): JSX.Element {
 /** Map a node type → its Focus Field icon component. */
 export function getNodeIcon(type: string): (p: IconProps) => JSX.Element {
   switch (type) {
-    case 'markdown': return IconNodeMarkdown;
-    case 'prompt': return IconNodePrompt;
-    case 'response': return IconNodeResponse;
-    case 'file': return IconNodeFile;
-    case 'image': return IconNodeImage;
-    case 'webpage': return IconNodeWebpage;
-    case 'context': return IconNodeContext;
-    case 'group': return IconNodeGroup;
-    case 'status': return IconNodeStatus;
-    case 'trace': return IconNodeTrace;
-    case 'ledger': return IconNodeLedger;
-    case 'mcp-app': return IconNodeMcpApp;
-    case 'ext-app': return IconNodeExtApp;
-    case 'json-render': return IconNodeJsonRender;
-    case 'graph': return IconNodeGraph;
-    case 'html': return IconNodeWebpage;
-    default: return IconNodeMarkdown;
+    case 'markdown':
+      return IconNodeMarkdown;
+    case 'prompt':
+      return IconNodePrompt;
+    case 'response':
+      return IconNodeResponse;
+    case 'file':
+      return IconNodeFile;
+    case 'image':
+      return IconNodeImage;
+    case 'webpage':
+      return IconNodeWebpage;
+    case 'context':
+      return IconNodeContext;
+    case 'group':
+      return IconNodeGroup;
+    case 'status':
+      return IconNodeStatus;
+    case 'trace':
+      return IconNodeTrace;
+    case 'ledger':
+      return IconNodeLedger;
+    case 'mcp-app':
+      return IconNodeMcpApp;
+    case 'ext-app':
+      return IconNodeExtApp;
+    case 'json-render':
+      return IconNodeJsonRender;
+    case 'graph':
+      return IconNodeGraph;
+    case 'html':
+      return IconNodeWebpage;
+    default:
+      return IconNodeMarkdown;
   }
 }

package/src/client/nodes/ContextNode.tsx

@@ -82,9 +82,7 @@ function stripHtmlToText(value: string): string {
     .trim();
 }
 
-export function normalizeContextNodeFallback(
-  nodeData: Record<string, unknown>,
-): ContextNodeFallbackDisplay | null {
+export function normalizeContextNodeFallback(nodeData: Record<string, unknown>): ContextNodeFallbackDisplay | null {
   const title = asTrimmedString(nodeData.title);
   const content = asTrimmedString(nodeData.content);
   const rendered = stripHtmlToText(asTrimmedString(nodeData.rendered));
@@ -135,24 +133,23 @@ export function ContextNode({
   node,
   expanded = false,
   pinnedNodes = [],
-}: { node: CanvasNodeState; expanded?: boolean; pinnedNodes?: CanvasNodeState[] }) {
+}: {
+  node: CanvasNodeState;
+  expanded?: boolean;
+  pinnedNodes?: CanvasNodeState[];
+}) {
   const cards = (node.data.cards as ContextCard[]) ?? [];
   const auxTabs = (node.data.auxTabs as Array<{ id: string; url: string; reason?: string }>) ?? [];
   const pinnedContext = pinnedNodes.map(normalizePinnedContextDisplay);
   const hasPinnedContext = pinnedContext.length > 0;
-  const currentTokens =
-    typeof node.data.currentTokens === 'number' ? node.data.currentTokens : null;
+  const currentTokens = typeof node.data.currentTokens === 'number' ? node.data.currentTokens : null;
   const tokenLimit = typeof node.data.tokenLimit === 'number' ? node.data.tokenLimit : null;
   const utilization = typeof node.data.utilization === 'number' ? node.data.utilization : null;
-  const messagesLength =
-    typeof node.data.messagesLength === 'number' ? node.data.messagesLength : null;
-  const percent =
-    utilization !== null ? Math.max(0, Math.min(100, Math.round(utilization * 100))) : null;
+  const messagesLength = typeof node.data.messagesLength === 'number' ? node.data.messagesLength : null;
+  const percent = utilization !== null ? Math.max(0, Math.min(100, Math.round(utilization * 100))) : null;
   const barColor = usageBarColor(utilization ?? 0);
   const fallback =
-    !hasPinnedContext && cards.length === 0 && auxTabs.length === 0
-      ? normalizeContextNodeFallback(node.data)
-      : null;
+    !hasPinnedContext && cards.length === 0 && auxTabs.length === 0 ? normalizeContextNodeFallback(node.data) : null;
 
   const openCard = async (card: ContextCard): Promise<void> => {
     const path = typeof card.path === 'string' ? card.path.trim() : '';
@@ -254,9 +251,7 @@ export function ContextNode({
                 borderLeft: '2px solid var(--c-accent)',
               }}
             >
-              <div style={{ fontWeight: 600, color: 'var(--c-text)', marginBottom: '2px' }}>
-                {display.title}
-              </div>
+              <div style={{ fontWeight: 600, color: 'var(--c-text)', marginBottom: '2px' }}>{display.title}</div>
               {display.summary && (
                 <div
                   style={{
@@ -347,9 +342,7 @@ export function ContextNode({
                   borderLeft: '2px solid var(--c-accent)',
                 }}
               >
-                <div style={{ fontWeight: 600, color: 'var(--c-text)', marginBottom: '2px' }}>
-                  {display.title}
-                </div>
+                <div style={{ fontWeight: 600, color: 'var(--c-text)', marginBottom: '2px' }}>{display.title}</div>
                 <div
                   style={{
                     color: 'var(--c-muted)',
@@ -478,9 +471,7 @@ export function ContextNode({
             >
               {tab.url}
               {tab.reason && (
-                <span style={{ color: 'var(--c-dim)', fontSize: '10px', marginLeft: '6px' }}>
-                  ({tab.reason})
-                </span>
+                <span style={{ color: 'var(--c-dim)', fontSize: '10px', marginLeft: '6px' }}>({tab.reason})</span>
               )}
             </a>
           ))}
@@ -496,9 +487,7 @@ export function ContextNode({
             borderLeft: '2px solid var(--c-accent)',
           }}
         >
-          <div style={{ fontWeight: 600, color: 'var(--c-text)', marginBottom: '4px' }}>
-            {fallback.title}
-          </div>
+          <div style={{ fontWeight: 600, color: 'var(--c-text)', marginBottom: '4px' }}>{fallback.title}</div>
           {fallback.summary && (
             <div
               style={{