prompt_objects 0.6.0 → 0.7.0

data/frontend/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "prompt-objects-frontend",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
-  },
-  "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",
-    "tailwindcss": "^3.4.16",
-    "typescript": "^5.6.3",
-    "vite": "^6.0.3"
-  }
-}

data/frontend/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

data/frontend/src/App.tsx

@@ -1,104 +0,0 @@
-import { useWebSocket } from './hooks/useWebSocket'
-import { useStore, useSelectedPO } from './store'
-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 { UsagePanel } from './components/UsagePanel'
-import { CanvasView } from './canvas/CanvasView'
-
-export default function App() {
-  const { sendMessage, respondToNotification, createSession, switchSession, switchLLM, createThread, updatePrompt, requestUsage, exportThread, requestEnvData } =
-    useWebSocket()
-  const { selectedPO, busOpen, notifications, usageData, clearUsageData, currentView } = useStore()
-  const selectedPOData = useSelectedPO()
-
-  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">
-      <SystemBar switchLLM={switchLLM} />
-
-      <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>
-
-              {/* Resize handle */}
-              <div
-                className="resize-handle"
-                onMouseDown={objectListResize.onMouseDown}
-              />
-
-              {/* 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}
-                    requestEnvData={requestEnvData}
-                  />
-                ) : (
-                  <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>
-            </>
-          )}
-        </div>
-
-        {/* Transcript - resizable bottom pane, visible in both views */}
-        {busOpen && (
-          <>
-            <div
-              className="resize-handle-h"
-              onMouseDown={transcriptResize.onMouseDown}
-            />
-            <div style={{ height: transcriptResize.size }} className="flex-shrink-0">
-              <Transcript />
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Notification panel - floating */}
-      {notifications.length > 0 && (
-        <NotificationPanel respondToNotification={respondToNotification} />
-      )}
-
-      {/* Usage panel modal */}
-      {usageData && (
-        <UsagePanel usage={usageData as any} onClose={clearUsageData} />
-      )}
-    </div>
-  )
-}

data/frontend/src/canvas/CanvasView.tsx

@@ -1,113 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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 = []
-  }
-}