prompt_objects 0.6.0 → 0.7.0

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

@@ -1,249 +0,0 @@
-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 = 0x5a8fc2 // steel blue (matches po-status-delegated)
-const DELEGATED_CSS_COLOR = '#5a8fc2'
-
-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

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

@@ -1,24 +0,0 @@
-// 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/ContextMenu.tsx

@@ -1,68 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-interface ContextMenuItem {
-  label: string
-  onClick: () => void
-  icon?: string
-  danger?: boolean
-}
-
-interface ContextMenuProps {
-  x: number
-  y: number
-  items: ContextMenuItem[]
-  onClose: () => void
-}
-
-export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        onClose()
-      }
-    }
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    document.addEventListener('keydown', handleEscape)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-      document.removeEventListener('keydown', handleEscape)
-    }
-  }, [onClose])
-
-  const adjustedStyle = {
-    top: y,
-    left: x,
-  }
-
-  return (
-    <div
-      ref={menuRef}
-      className="fixed z-50 bg-po-surface-2 border border-po-border rounded shadow-xl py-0.5 min-w-[140px]"
-      style={adjustedStyle}
-    >
-      {items.map((item, idx) => (
-        <button
-          key={idx}
-          onClick={() => {
-            item.onClick()
-            onClose()
-          }}
-          className={`w-full text-left px-2.5 py-1.5 text-xs transition-colors duration-150 flex items-center gap-1.5 ${
-            item.danger
-              ? 'text-po-error hover:bg-po-surface-3'
-              : 'text-po-text-secondary hover:bg-po-surface-3 hover:text-po-text-primary'
-          }`}
-        >
-          {item.icon && <span>{item.icon}</span>}
-          {item.label}
-        </button>
-      ))}
-    </div>
-  )
-}

data/frontend/src/components/EnvDataPane.tsx

@@ -1,69 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useStore, useEnvData } from '../store'
-import type { EnvDataEntry } from '../types'
-
-interface EnvDataPaneProps {
-  sessionId: string | undefined
-  requestEnvData: (sessionId: string) => void
-}
-
-export function EnvDataPane({ sessionId, requestEnvData }: EnvDataPaneProps) {
-  const sessionRootMap = useStore((s) => s.sessionRootMap)
-  const rootThreadId = sessionId ? sessionRootMap[sessionId] : undefined
-  const entries = useEnvData(rootThreadId)
-  const [expandedKey, setExpandedKey] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (sessionId) {
-      requestEnvData(sessionId)
-    }
-  }, [sessionId, requestEnvData])
-
-  if (entries.length === 0) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <span className="font-mono text-xs text-po-text-ghost">No shared data</span>
-      </div>
-    )
-  }
-
-  return (
-    <div className="h-full overflow-auto px-2 py-1">
-      {entries.map((entry) => (
-        <EnvDataRow
-          key={entry.key}
-          entry={entry}
-          expanded={expandedKey === entry.key}
-          onToggle={() => setExpandedKey(expandedKey === entry.key ? null : entry.key)}
-        />
-      ))}
-    </div>
-  )
-}
-
-function EnvDataRow({ entry, expanded, onToggle }: { entry: EnvDataEntry; expanded: boolean; onToggle: () => void }) {
-  return (
-    <div className="border-b border-po-border last:border-b-0">
-      <button
-        onClick={onToggle}
-        className="w-full text-left px-1.5 py-1.5 hover:bg-po-surface-3 transition-colors duration-150 flex items-center gap-2"
-      >
-        <span className="text-2xs text-po-text-ghost">{expanded ? '▼' : '▶'}</span>
-        <span className="font-mono text-sm text-po-accent truncate">{entry.key}</span>
-        <span className="text-xs text-po-text-ghost truncate flex-1">{entry.short_description}</span>
-        <span className="text-xs text-po-text-ghost flex-shrink-0">{entry.stored_by}</span>
-      </button>
-      {expanded && (
-        <div className="px-2 pb-2">
-          <div className="text-xs text-po-text-ghost mb-1">
-            stored by <span className="text-po-text-secondary">{entry.stored_by}</span>
-            {entry.updated_at && <> &middot; {new Date(entry.updated_at).toLocaleTimeString()}</>}
-          </div>
-          <pre className="font-mono text-xs text-po-text-primary bg-po-surface-1 rounded p-2 overflow-auto max-h-40 whitespace-pre-wrap break-all">
-            {typeof entry.value === 'string' ? entry.value : JSON.stringify(entry.value, null, 2)}
-          </pre>
-        </div>
-      )}
-    </div>
-  )
-}