prompt_objects 0.3.0 → 0.4.0

data/frontend/src/canvas/nodes/PONode.ts

@@ -0,0 +1,249 @@
+import * as THREE from 'three'
+import { CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'
+import { COLORS, CSS_COLORS, NODE, ANIMATION } from '../constants'
+
+const vertexShader = /* glsl */ `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`
+
+const fragmentShader = /* glsl */ `
+  uniform vec3 uColor;
+  uniform vec3 uGlowColor;
+  uniform float uGlowIntensity;
+  uniform float uTime;
+  uniform float uHovered;
+  uniform float uSelected;
+
+  varying vec2 vUv;
+
+  void main() {
+    // Distance from center (0 at center, 1 at edge)
+    float dist = length(vUv - 0.5) * 2.0;
+
+    // Base dark fill
+    vec3 base = uColor * 0.3;
+
+    // Edge glow
+    float edgeGlow = smoothstep(0.5, 1.0, dist) * uGlowIntensity;
+    // Animated pulse
+    float pulse = sin(uTime * ${ANIMATION.pulseSpeed.toFixed(1)}) * 0.15 + 0.85;
+    edgeGlow *= pulse;
+
+    vec3 color = mix(base, uGlowColor, edgeGlow);
+
+    // Hover brightening
+    color = mix(color, uGlowColor * 1.2, uHovered * 0.3);
+
+    // Selection brightening
+    color = mix(color, uGlowColor * 1.5, uSelected * 0.4);
+
+    // Alpha: solid center, slight transparency at edges
+    float alpha = smoothstep(1.0, 0.8, dist);
+
+    gl_FragColor = vec4(color, alpha);
+  }
+`
+
+type POStatus = 'idle' | 'thinking' | 'calling_tool'
+
+const STATUS_COLORS: Record<POStatus, number> = {
+  idle: COLORS.statusIdle,
+  thinking: COLORS.statusThinking,
+  calling_tool: COLORS.statusCallingTool,
+}
+
+const STATUS_CSS_COLORS: Record<POStatus, string> = {
+  idle: CSS_COLORS.statusIdle,
+  thinking: CSS_COLORS.statusThinking,
+  calling_tool: CSS_COLORS.statusCallingTool,
+}
+
+// Color for when this PO is being called by another PO (delegation)
+const DELEGATED_COLOR = 0x06b6d4 // cyan-500
+const DELEGATED_CSS_COLOR = '#06b6d4'
+
+export class PONode {
+  readonly id: string
+  readonly group: THREE.Group
+  readonly mesh: THREE.Mesh
+
+  private material: THREE.ShaderMaterial
+  private statusRing: THREE.LineLoop
+  private statusRingMaterial: THREE.LineBasicMaterial
+  private label: CSS2DObject
+  private labelEl: HTMLDivElement
+  private nameEl: HTMLSpanElement
+  private statusEl: HTMLSpanElement
+  private badge: CSS2DObject
+  private badgeEl: HTMLDivElement
+  private badgeCountEl: HTMLSpanElement
+
+  private targetPosition = new THREE.Vector3()
+
+  constructor(id: string, name: string) {
+    this.id = id
+    this.group = new THREE.Group()
+    this.group.userData = { type: 'po', id }
+
+    // Hexagonal geometry
+    const geometry = new THREE.CircleGeometry(NODE.poRadius, NODE.poSides)
+
+    // Shader material
+    this.material = new THREE.ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms: {
+        uColor: { value: new THREE.Color(COLORS.nodeFill) },
+        uGlowColor: { value: new THREE.Color(COLORS.nodeGlow) },
+        uGlowIntensity: { value: 0.5 },
+        uTime: { value: 0 },
+        uHovered: { value: 0 },
+        uSelected: { value: 0 },
+      },
+      transparent: true,
+    })
+
+    this.mesh = new THREE.Mesh(geometry, this.material)
+    this.mesh.userData = { type: 'po', id }
+    this.group.add(this.mesh)
+
+    // Status ring (hex outline)
+    const ringGeometry = new THREE.BufferGeometry()
+    const ringPoints: THREE.Vector3[] = []
+    for (let i = 0; i <= NODE.poSides; i++) {
+      const angle = (i / NODE.poSides) * Math.PI * 2 - Math.PI / 2
+      ringPoints.push(
+        new THREE.Vector3(
+          Math.cos(angle) * (NODE.poRadius + 3),
+          Math.sin(angle) * (NODE.poRadius + 3),
+          0
+        )
+      )
+    }
+    ringGeometry.setFromPoints(ringPoints)
+
+    this.statusRingMaterial = new THREE.LineBasicMaterial({
+      color: STATUS_COLORS.idle,
+      transparent: true,
+      opacity: 0.6,
+    })
+    this.statusRing = new THREE.LineLoop(ringGeometry, this.statusRingMaterial)
+    this.group.add(this.statusRing)
+
+    // CSS2D Label (name + status)
+    this.labelEl = document.createElement('div')
+    this.labelEl.className = 'canvas-node-label'
+
+    this.nameEl = document.createElement('span')
+    this.nameEl.className = 'canvas-node-name'
+    this.nameEl.textContent = name
+
+    this.statusEl = document.createElement('span')
+    this.statusEl.className = 'canvas-node-status'
+    this.statusEl.textContent = 'idle'
+
+    this.labelEl.appendChild(this.nameEl)
+    this.labelEl.appendChild(this.statusEl)
+
+    this.label = new CSS2DObject(this.labelEl)
+    this.label.position.set(0, -NODE.labelOffsetY, 0)
+    this.group.add(this.label)
+
+    // Notification badge
+    this.badgeEl = document.createElement('div')
+    this.badgeEl.className = 'canvas-node-badge'
+    this.badgeEl.style.display = 'none'
+
+    this.badgeCountEl = document.createElement('span')
+    this.badgeCountEl.textContent = '0'
+    this.badgeEl.appendChild(this.badgeCountEl)
+
+    this.badge = new CSS2DObject(this.badgeEl)
+    this.badge.position.set(NODE.badgeOffsetX, -NODE.badgeOffsetY, 0)
+    this.group.add(this.badge)
+  }
+
+  setStatus(status: POStatus): void {
+    this.statusRingMaterial.color.setHex(STATUS_COLORS[status])
+
+    // Update glow intensity based on status
+    const intensity = status === 'idle' ? 0.3 : status === 'thinking' ? 0.8 : 0.6
+    this.material.uniforms.uGlowIntensity.value = intensity
+
+    // Update glow color for calling_tool
+    if (status === 'calling_tool') {
+      this.material.uniforms.uGlowColor.value.setHex(COLORS.statusCallingTool)
+    } else {
+      this.material.uniforms.uGlowColor.value.setHex(COLORS.nodeGlow)
+    }
+
+    this.statusEl.textContent = status.replace('_', ' ')
+    this.statusEl.style.color = STATUS_CSS_COLORS[status]
+  }
+
+  setDelegatedBy(callerName: string): void {
+    // Override visual to show this PO is working on behalf of another PO.
+    // The server doesn't send status updates for delegated POs, so we
+    // infer this from the caller's tool_calls.
+    this.statusRingMaterial.color.setHex(DELEGATED_COLOR)
+    this.statusRingMaterial.opacity = 1.0
+    this.material.uniforms.uGlowColor.value.setHex(DELEGATED_COLOR)
+    this.material.uniforms.uGlowIntensity.value = 0.7
+    this.statusEl.textContent = `called by ${callerName}`
+    this.statusEl.style.color = DELEGATED_CSS_COLOR
+  }
+
+  clearDelegated(): void {
+    // Restore to whatever the server status is — caller should
+    // call setStatus() after this to re-apply server state.
+    this.statusRingMaterial.opacity = 0.6
+  }
+
+  setNotificationCount(count: number): void {
+    if (count > 0) {
+      this.badgeEl.style.display = 'flex'
+      this.badgeCountEl.textContent = String(count)
+    } else {
+      this.badgeEl.style.display = 'none'
+    }
+  }
+
+  setHovered(hovered: boolean): void {
+    this.material.uniforms.uHovered.value = hovered ? 1 : 0
+  }
+
+  setSelected(selected: boolean): void {
+    this.material.uniforms.uSelected.value = selected ? 1 : 0
+    this.statusRingMaterial.opacity = selected ? 1.0 : 0.6
+  }
+
+  setPosition(x: number, y: number): void {
+    this.targetPosition.set(x, y, 0)
+  }
+
+  getPosition(): THREE.Vector3 {
+    return this.group.position.clone()
+  }
+
+  update(_delta: number, elapsed: number): void {
+    // Lerp toward target position
+    this.group.position.lerp(this.targetPosition, ANIMATION.positionLerpFactor)
+
+    // Update time uniform for pulse animation
+    this.material.uniforms.uTime.value = elapsed
+  }
+
+  dispose(): void {
+    this.mesh.geometry.dispose()
+    this.material.dispose()
+    this.statusRing.geometry.dispose()
+    this.statusRingMaterial.dispose()
+    this.labelEl.remove()
+    this.badgeEl.remove()
+    this.group.parent?.remove(this.group)
+  }
+}

data/frontend/src/canvas/nodes/ToolCallNode.ts

@@ -0,0 +1,116 @@
+import * as THREE from 'three'
+import { CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'
+import { COLORS, NODE, ANIMATION } from '../constants'
+
+type Phase = 'fadein' | 'active' | 'fadeout' | 'expired'
+
+export class ToolCallNode {
+  readonly id: string
+  readonly callerPO: string
+  readonly group: THREE.Group
+  readonly mesh: THREE.Mesh
+
+  private material: THREE.MeshBasicMaterial
+  private label: CSS2DObject
+  private labelEl: HTMLDivElement
+  private phase: Phase = 'fadein'
+  private phaseTime = 0
+  private targetPosition = new THREE.Vector3()
+
+  constructor(id: string, toolName: string, callerPO: string) {
+    this.id = id
+    this.callerPO = callerPO
+    this.group = new THREE.Group()
+    this.group.userData = { type: 'toolcall', id }
+
+    // Diamond shape (rotated square)
+    const r = NODE.toolCallRadius
+    const shape = new THREE.Shape()
+    shape.moveTo(0, r)
+    shape.lineTo(r, 0)
+    shape.lineTo(0, -r)
+    shape.lineTo(-r, 0)
+    shape.closePath()
+
+    const geometry = new THREE.ShapeGeometry(shape)
+
+    this.material = new THREE.MeshBasicMaterial({
+      color: COLORS.toolCallFill,
+      transparent: true,
+      opacity: 0,
+    })
+
+    this.mesh = new THREE.Mesh(geometry, this.material)
+    this.mesh.userData = { type: 'toolcall', id }
+    this.group.add(this.mesh)
+
+    // Label
+    this.labelEl = document.createElement('div')
+    this.labelEl.className = 'canvas-toolcall-label'
+    this.labelEl.textContent = toolName
+
+    this.label = new CSS2DObject(this.labelEl)
+    this.label.position.set(0, -(NODE.toolCallRadius + 12), 0)
+    this.group.add(this.label)
+  }
+
+  setPosition(x: number, y: number): void {
+    this.targetPosition.set(x, y, 0)
+  }
+
+  triggerFadeOut(): void {
+    if (this.phase !== 'expired') {
+      this.phase = 'fadeout'
+      this.phaseTime = 0
+    }
+  }
+
+  isExpired(): boolean {
+    return this.phase === 'expired'
+  }
+
+  update(delta: number): void {
+    this.phaseTime += delta
+    this.group.position.lerp(this.targetPosition, ANIMATION.positionLerpFactor)
+
+    switch (this.phase) {
+      case 'fadein':
+        this.material.opacity = Math.min(this.phaseTime / ANIMATION.toolCallFadeInDuration, 1)
+        if (this.phaseTime >= ANIMATION.toolCallFadeInDuration) {
+          this.phase = 'active'
+          this.phaseTime = 0
+        }
+        break
+
+      case 'active':
+        this.material.opacity = 1
+        if (this.phaseTime >= ANIMATION.toolCallActiveDuration) {
+          this.phase = 'fadeout'
+          this.phaseTime = 0
+        }
+        break
+
+      case 'fadeout':
+        this.material.opacity = Math.max(
+          1 - this.phaseTime / ANIMATION.toolCallFadeOutDuration,
+          0
+        )
+        this.labelEl.style.opacity = String(this.material.opacity)
+        if (this.phaseTime >= ANIMATION.toolCallFadeOutDuration) {
+          this.phase = 'expired'
+        }
+        break
+
+      case 'expired':
+        this.material.opacity = 0
+        break
+    }
+  }
+
+  dispose(): void {
+    this.mesh.geometry.dispose()
+    this.material.dispose()
+    this.labelEl.remove()
+    this.group.parent?.remove(this.group)
+  }
+}

data/frontend/src/canvas/types.ts

@@ -0,0 +1,24 @@
+// Canvas-specific type definitions
+
+export interface CanvasNodeSelection {
+  type: 'po' | 'toolcall'
+  id: string
+}
+
+export interface ActiveToolCall {
+  id: string
+  toolName: string
+  callerPO: string
+  params: Record<string, unknown>
+  status: 'active' | 'completed' | 'error'
+  result?: string
+  startedAt: number
+  completedAt?: number
+}
+
+export interface ActiveMessageArc {
+  id: string
+  from: string
+  to: string
+  timestamp: number
+}

data/frontend/src/components/ChatPanel.tsx

@@ -12,11 +12,13 @@ export function ChatPanel({ po, sendMessage }: ChatPanelProps) {
   const [input, setInput] = useState('')
   const [continueThread, setContinueThread] = useState(false)
   const messagesEndRef = useRef<HTMLDivElement>(null)
-  const { streamingContent } = useStore()
+  const { streamingContent, connected } = useStore()
 
   const messages = po.current_session?.messages || []
   const streaming = streamingContent[po.name]
   const hasMessages = messages.length > 0
+  const isBusy = po.status !== 'idle' && connected
+  const canSend = connected && !isBusy && !!input.trim()
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
@@ -72,18 +74,24 @@ export function ChatPanel({ po, sendMessage }: ChatPanelProps) {
 
       {/* Input */}
       <form onSubmit={handleSubmit} className="border-t border-po-border p-4">
+        {!connected && (
+          <div className="mb-2 text-xs text-po-warning flex items-center gap-2">
+            <div className="w-2 h-2 rounded-full bg-po-warning animate-pulse" />
+            Reconnecting...
+          </div>
+        )}
         <div className="flex gap-3">
           <input
             type="text"
             value={input}
             onChange={(e) => setInput(e.target.value)}
-            placeholder={`Message ${po.name}...`}
-            className="flex-1 bg-po-surface border border-po-border rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-po-accent"
-            disabled={po.status !== 'idle'}
+            placeholder={!connected ? 'Disconnected — waiting to reconnect...' : isBusy ? `${po.name} is ${po.status.replace('_', ' ')}...` : `Message ${po.name}...`}
+            className="flex-1 bg-po-surface border border-po-border rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-po-accent disabled:opacity-50"
+            disabled={isBusy}
           />
           <button
             type="submit"
-            disabled={!input.trim() || po.status !== 'idle'}
+            disabled={!canSend}
             className="px-4 py-2 bg-po-accent text-white rounded-lg font-medium hover:bg-po-accent/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             Send

data/frontend/src/components/Header.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 export function Header({ switchLLM }: Props) {
-  const { connected, environment, selectedPO, selectPO, toggleBus, busOpen, notifications } =
+  const { connected, environment, selectedPO, selectPO, toggleBus, busOpen, notifications, currentView, setCurrentView } =
     useStore()
   const notificationCount = useNotificationCount()
   const [showNotifications, setShowNotifications] = useState(false)
@@ -125,6 +125,18 @@ export function Header({ switchLLM }: Props) {
         )}
       </div>
 
+      {/* Canvas toggle */}
+      <button
+        onClick={() => setCurrentView(currentView === 'canvas' ? 'dashboard' : 'canvas')}
+        className={`px-3 py-1.5 text-sm rounded transition-colors ${
+          currentView === 'canvas'
+            ? 'bg-po-accent text-white'
+            : 'bg-po-border text-gray-300 hover:bg-po-accent/50'
+        }`}
+      >
+        Canvas
+      </button>
+
       {/* Message Bus toggle */}
       <button
         onClick={toggleBus}