prompt_objects 0.3.1 → 0.4.0

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-3 py-1.5 text-sm bg-po-surface/80 backdrop-blur border border-po-border rounded hover:border-po-accent transition-colors text-gray-300 hover:text-white"
+          title="Fit all nodes (F)"
+        >
+          Fit All
+        </button>
+        <button
+          onClick={toggleLabels}
+          className={`px-3 py-1.5 text-sm backdrop-blur border rounded transition-colors ${
+            showLabels
+              ? 'bg-po-accent/20 border-po-accent text-white'
+              : 'bg-po-surface/80 border-po-border text-gray-300 hover:text-white'
+          }`}
+          title="Toggle labels"
+        >
+          Labels
+        </button>
+      </div>
+
+      {/* Help hint */}
+      <div className="absolute bottom-3 left-3 text-xs text-gray-500 z-10">
+        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 = []
+  }
+}