prompt_objects 0.3.1 → 0.5.0

data/frontend/package-lock.json

@@ -10,16 +10,20 @@
       "dependencies": {
         "@types/react-syntax-highlighter": "^15.5.13",
         "clsx": "^2.1.1",
+        "d3-force": "^3.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-markdown": "^10.1.0",
         "react-syntax-highlighter": "^16.1.0",
         "remark-gfm": "^4.0.1",
+        "three": "^0.182.0",
         "zustand": "^5.0.0"
       },
       "devDependencies": {
+        "@types/d3-force": "^3.0.10",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "@types/three": "^0.182.0",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
         "postcss": "^8.4.49",
@@ -332,6 +336,13 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -1219,6 +1230,13 @@
         "win32"
       ]
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1264,6 +1282,13 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1353,12 +1378,42 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.22.0"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -1386,6 +1441,13 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.69",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
+      "integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -1705,6 +1767,47 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1911,6 +2014,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -2624,6 +2734,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
+      "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -4006,6 +4123,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",

data/frontend/package.json

@@ -12,16 +12,20 @@
   "dependencies": {
     "@types/react-syntax-highlighter": "^15.5.13",
     "clsx": "^2.1.1",
+    "d3-force": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.0",
     "remark-gfm": "^4.0.1",
+    "three": "^0.182.0",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
+    "@types/d3-force": "^3.0.10",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",

data/frontend/src/App.tsx

@@ -1,96 +1,95 @@
-import { useState } from 'react'
 import { useWebSocket } from './hooks/useWebSocket'
 import { useStore, useSelectedPO } from './store'
-import { Header } from './components/Header'
-import { Dashboard } from './components/Dashboard'
-import { PODetail } from './components/PODetail'
-import { MessageBus } from './components/MessageBus'
+import { useResize } from './hooks/useResize'
+import { SystemBar } from './components/SystemBar'
+import { ObjectList } from './components/ObjectList'
+import { Inspector } from './components/Inspector'
+import { Transcript } from './components/Transcript'
 import { NotificationPanel } from './components/NotificationPanel'
-import { ThreadsSidebar } from './components/ThreadsSidebar'
 import { UsagePanel } from './components/UsagePanel'
+import { CanvasView } from './canvas/CanvasView'
 
 export default function App() {
   const { sendMessage, respondToNotification, createSession, switchSession, switchLLM, createThread, updatePrompt, requestUsage, exportThread } =
     useWebSocket()
-  const { selectedPO, busOpen, notifications, usageData, clearUsageData } = useStore()
+  const { selectedPO, busOpen, notifications, usageData, clearUsageData, currentView } = useStore()
   const selectedPOData = useSelectedPO()
-  const [splitView, setSplitView] = useState(true) // Default to split view
+
+  const objectListResize = useResize({
+    direction: 'horizontal',
+    initialSize: 192,
+    minSize: 120,
+    maxSize: 320,
+  })
+
+  const transcriptResize = useResize({
+    direction: 'vertical',
+    initialSize: 180,
+    minSize: 80,
+    maxSize: 400,
+    inverted: true,
+  })
 
   return (
     <div className="h-screen flex flex-col bg-po-bg">
-      <Header switchLLM={switchLLM} />
+      <SystemBar switchLLM={switchLLM} />
 
-      <div className="flex-1 flex overflow-hidden">
-        {/* Split view: Dashboard sidebar on left when PO selected */}
-        {splitView && selectedPO && (
-          <>
-            {/* PO List */}
-            <aside className="w-56 border-r border-po-border bg-po-surface overflow-hidden flex flex-col">
-              <div className="p-3 border-b border-po-border flex items-center justify-between">
-                <h2 className="text-sm font-medium text-gray-400">Prompt Objects</h2>
-                <button
-                  onClick={() => setSplitView(false)}
-                  className="text-xs text-gray-500 hover:text-white"
-                  title="Hide sidebar"
-                >
-                  ✕
-                </button>
-              </div>
-              <div className="flex-1 overflow-auto">
-                <Dashboard compact />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Main view area */}
+        <div className="flex-1 flex overflow-hidden">
+          {currentView === 'canvas' ? (
+            <CanvasView />
+          ) : (
+            <>
+              {/* Object List - resizable */}
+              <div style={{ width: objectListResize.size }} className="flex-shrink-0">
+                <ObjectList />
               </div>
-            </aside>
-
-            {/* Threads List for selected PO */}
-            {selectedPOData && (
-              <aside className="w-56 border-r border-po-border bg-po-bg overflow-hidden">
-                <ThreadsSidebar
-                  po={selectedPOData}
-                  switchSession={switchSession}
-                  createThread={createThread}
-                  requestUsage={requestUsage}
-                  exportThread={exportThread}
-                />
-              </aside>
-            )}
-          </>
-        )}
 
-        {/* Main content */}
-        <main className="flex-1 overflow-hidden flex flex-col">
-          {/* Show expand button when sidebar is hidden */}
-          {!splitView && selectedPO && (
-            <button
-              onClick={() => setSplitView(true)}
-              className="absolute left-2 top-16 z-10 bg-po-surface border border-po-border rounded px-2 py-1 text-xs text-gray-400 hover:text-white hover:border-po-accent transition-colors"
-              title="Show dashboard sidebar"
-            >
-              ☰ POs
-            </button>
-          )}
+              {/* Resize handle */}
+              <div
+                className="resize-handle"
+                onMouseDown={objectListResize.onMouseDown}
+              />
 
-          {selectedPO ? (
-            <PODetail
-              sendMessage={sendMessage}
-              createSession={createSession}
-              switchSession={switchSession}
-              createThread={createThread}
-              updatePrompt={updatePrompt}
-            />
-          ) : (
-            <Dashboard />
+              {/* Main content */}
+              <main className="flex-1 overflow-hidden flex flex-col">
+                {selectedPO && selectedPOData ? (
+                  <Inspector
+                    po={selectedPOData}
+                    sendMessage={sendMessage}
+                    createSession={createSession}
+                    switchSession={switchSession}
+                    createThread={createThread}
+                    updatePrompt={updatePrompt}
+                    requestUsage={requestUsage}
+                    exportThread={exportThread}
+                  />
+                ) : (
+                  <div className="h-full flex items-center justify-center text-po-text-ghost">
+                    <span className="font-mono text-xs">Select an object</span>
+                  </div>
+                )}
+              </main>
+            </>
           )}
-        </main>
+        </div>
 
-        {/* Message Bus sidebar */}
+        {/* Transcript - resizable bottom pane, visible in both views */}
         {busOpen && (
-          <aside className="w-80 flex-shrink-0 border-l border-po-border bg-po-surface overflow-hidden">
-            <MessageBus />
-          </aside>
+          <>
+            <div
+              className="resize-handle-h"
+              onMouseDown={transcriptResize.onMouseDown}
+            />
+            <div style={{ height: transcriptResize.size }} className="flex-shrink-0">
+              <Transcript />
+            </div>
+          </>
         )}
       </div>
 
-      {/* Notification panel */}
+      {/* Notification panel - floating */}
       {notifications.length > 0 && (
         <NotificationPanel respondToNotification={respondToNotification} />
       )}

data/frontend/src/canvas/CanvasView.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef, useCallback } from 'react'
+import { useStore } from '../store'
+import { useCanvasStore } from './canvasStore'
+import { SceneManager } from './SceneManager'
+import { InspectorPanel } from './inspector/InspectorPanel'
+
+export function CanvasView() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const sceneRef = useRef<SceneManager | null>(null)
+  const syncScheduled = useRef(false)
+
+  // Schedule a throttled sync via requestAnimationFrame
+  const scheduleSync = useCallback(() => {
+    if (syncScheduled.current) return
+    syncScheduled.current = true
+    requestAnimationFrame(() => {
+      syncScheduled.current = false
+      const scene = sceneRef.current
+      if (!scene) return
+      const state = useStore.getState()
+      scene.syncPromptObjects(state.promptObjects)
+      scene.syncBusMessages(state.busMessages)
+      scene.syncNotifications(state.notifications)
+    })
+  }, [])
+
+  // Mount/unmount SceneManager
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const scene = new SceneManager(container)
+    sceneRef.current = scene
+
+    // Initial sync
+    const state = useStore.getState()
+    scene.syncPromptObjects(state.promptObjects)
+    scene.syncBusMessages(state.busMessages)
+    scene.syncNotifications(state.notifications)
+    scene.start()
+
+    // Fit all after a short delay to let force layout settle
+    const fitTimer = setTimeout(() => scene.fitAll(), 500)
+
+    return () => {
+      clearTimeout(fitTimer)
+      scene.dispose()
+      sceneRef.current = null
+    }
+  }, [])
+
+  // Subscribe to store changes (non-React API to avoid re-renders)
+  useEffect(() => {
+    const unsub = useStore.subscribe(scheduleSync)
+    return unsub
+  }, [scheduleSync])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'f' && !e.ctrlKey && !e.metaKey) {
+        // Don't intercept when typing in an input
+        if ((e.target as HTMLElement).tagName === 'INPUT' || (e.target as HTMLElement).tagName === 'TEXTAREA') return
+        sceneRef.current?.fitAll()
+      }
+      if (e.key === 'Escape') {
+        useCanvasStore.getState().selectNode(null)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  const showLabels = useCanvasStore((s) => s.showLabels)
+  const toggleLabels = useCanvasStore((s) => s.toggleLabels)
+
+  return (
+    <div className="flex-1 flex overflow-hidden relative">
+      {/* Three.js container */}
+      <div ref={containerRef} className="flex-1 relative" />
+
+      {/* Toolbar overlay */}
+      <div className="absolute top-3 left-3 flex gap-2 z-10">
+        <button
+          onClick={() => sceneRef.current?.fitAll()}
+          className="px-2.5 py-1 text-xs bg-po-surface-2/80 backdrop-blur border border-po-border rounded hover:border-po-accent transition-colors duration-150 text-po-text-secondary hover:text-po-text-primary"
+          title="Fit all nodes (F)"
+        >
+          Fit All
+        </button>
+        <button
+          onClick={toggleLabels}
+          className={`px-2.5 py-1 text-xs backdrop-blur border rounded transition-colors duration-150 ${
+            showLabels
+              ? 'bg-po-accent-wash border-po-accent text-po-accent'
+              : 'bg-po-surface-2/80 border-po-border text-po-text-secondary hover:text-po-text-primary'
+          }`}
+          title="Toggle labels"
+        >
+          Labels
+        </button>
+      </div>
+
+      {/* Help hint */}
+      <div className="absolute bottom-3 left-3 text-2xs text-po-text-ghost z-10 font-mono">
+        Scroll to zoom · Shift+drag to pan · F to fit · Click node to inspect
+      </div>
+
+      {/* Inspector panel */}
+      <InspectorPanel />
+    </div>
+  )
+}

data/frontend/src/canvas/ForceLayout.ts

@@ -0,0 +1,115 @@
+import {
+  forceSimulation,
+  forceManyBody,
+  forceCenter,
+  forceCollide,
+  forceLink,
+  type Simulation,
+  type SimulationNodeDatum,
+  type SimulationLinkDatum,
+} from 'd3-force'
+import { FORCE } from './constants'
+
+export interface ForceNode extends SimulationNodeDatum {
+  id: string
+  type: 'po' | 'toolcall'
+}
+
+export interface ForceLink extends SimulationLinkDatum<ForceNode> {
+  id: string
+}
+
+export class ForceLayout {
+  private simulation: Simulation<ForceNode, ForceLink>
+  private nodes: ForceNode[] = []
+  private links: ForceLink[] = []
+  private dirty = false
+
+  constructor() {
+    this.simulation = forceSimulation<ForceNode, ForceLink>()
+      .alphaDecay(FORCE.alphaDecay)
+      .velocityDecay(FORCE.velocityDecay)
+      .force('charge', forceManyBody<ForceNode>().strength(FORCE.chargeStrength))
+      .force('center', forceCenter<ForceNode>(0, 0).strength(FORCE.centerStrength))
+      .force(
+        'collision',
+        forceCollide<ForceNode>().radius(FORCE.collisionRadius)
+      )
+      .force(
+        'link',
+        forceLink<ForceNode, ForceLink>()
+          .id((d) => d.id)
+          .distance(FORCE.linkDistance)
+      )
+      .stop() // Manual tick mode — we call tick() from animation loop
+  }
+
+  addNode(id: string, type: 'po' | 'toolcall'): void {
+    if (this.nodes.find((n) => n.id === id)) return
+    this.nodes.push({ id, type })
+    this.dirty = true
+  }
+
+  removeNode(id: string): void {
+    const idx = this.nodes.findIndex((n) => n.id === id)
+    if (idx === -1) return
+    this.nodes.splice(idx, 1)
+    // Also remove any links referencing this node
+    this.links = this.links.filter((l) => {
+      const src = typeof l.source === 'object' ? (l.source as ForceNode).id : l.source
+      const tgt = typeof l.target === 'object' ? (l.target as ForceNode).id : l.target
+      return src !== id && tgt !== id
+    })
+    this.dirty = true
+  }
+
+  addLink(id: string, sourceId: string, targetId: string): void {
+    if (this.links.find((l) => l.id === id)) return
+    this.links.push({ id, source: sourceId, target: targetId })
+    this.dirty = true
+  }
+
+  removeLink(id: string): void {
+    const idx = this.links.findIndex((l) => l.id === id)
+    if (idx === -1) return
+    this.links.splice(idx, 1)
+    this.dirty = true
+  }
+
+  tick(): void {
+    if (this.dirty) {
+      this.rebuild()
+      this.dirty = false
+    }
+    this.simulation.tick()
+  }
+
+  getPositions(): Map<string, { x: number; y: number }> {
+    const positions = new Map<string, { x: number; y: number }>()
+    for (const node of this.nodes) {
+      positions.set(node.id, { x: node.x ?? 0, y: node.y ?? 0 })
+    }
+    return positions
+  }
+
+  reheat(): void {
+    this.simulation.alpha(0.8).restart().stop()
+  }
+
+  private rebuild(): void {
+    this.simulation.nodes(this.nodes)
+    const linkForce = this.simulation.force('link') as ReturnType<
+      typeof forceLink<ForceNode, ForceLink>
+    >
+    if (linkForce) {
+      linkForce.links(this.links)
+    }
+    this.reheat()
+  }
+
+  dispose(): void {
+    this.simulation.stop()
+    this.nodes = []
+    this.links = []
+  }
+}