prompt_objects 0.5.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/Inspector.tsx

@@ -1,232 +0,0 @@
-import { useState, useMemo } from 'react'
-import { useStore, usePONotifications } from '../store'
-import { useResize } from '../hooks/useResize'
-import { MethodList } from './MethodList'
-import { SourcePane } from './SourcePane'
-import { Workspace } from './Workspace'
-import { ContextMenu } from './ContextMenu'
-import { PaneSlot } from './PaneSlot'
-import type { PromptObject, CapabilityInfo } from '../types'
-
-interface InspectorProps {
-  po: PromptObject
-  sendMessage: (target: string, content: string, newThread?: boolean) => void
-  createSession?: (target: string, name?: string) => void
-  switchSession: (target: string, sessionId: string) => void
-  createThread: (target: string) => void
-  updatePrompt: (target: string, prompt: string) => void
-  requestUsage?: (sessionId: string, includeTree?: boolean) => void
-  exportThread?: (sessionId: string, format?: string) => void
-}
-
-export function Inspector({
-  po,
-  sendMessage,
-  switchSession,
-  createThread,
-  updatePrompt,
-  requestUsage,
-  exportThread,
-}: InspectorProps) {
-  const [selectedCapability, setSelectedCapability] = useState<CapabilityInfo | null>(null)
-  const [threadMenuOpen, setThreadMenuOpen] = useState(false)
-  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; sessionId: string } | null>(null)
-  const notifications = usePONotifications(po.name)
-  const topPaneCollapsed = useStore((s) => s.topPaneCollapsed)
-  const toggleTopPane = useStore((s) => s.toggleTopPane)
-
-  const topPaneResize = useResize({
-    direction: 'vertical',
-    initialSize: 260,
-    minSize: 120,
-    maxSize: 600,
-  })
-
-  const methodListResize = useResize({
-    direction: 'horizontal',
-    initialSize: 192,
-    minSize: 120,
-    maxSize: 320,
-  })
-
-  const sessions = po.sessions || []
-  const currentSessionId = po.current_session?.id
-
-  // Sort sessions: current first, then by updated_at desc
-  const sortedSessions = useMemo(() => {
-    return [...sessions].sort((a, b) => {
-      if (a.id === currentSessionId) return -1
-      if (b.id === currentSessionId) return 1
-      return (b.updated_at || '').localeCompare(a.updated_at || '')
-    })
-  }, [sessions, currentSessionId])
-
-  const isActive = po.status !== 'idle'
-
-  const statusDot = {
-    idle: 'bg-po-status-idle',
-    thinking: 'bg-po-status-active',
-    calling_tool: 'bg-po-status-calling',
-  }[po.status] || 'bg-po-status-idle'
-
-  const statusGlow = {
-    idle: '',
-    thinking: 'shadow-[0_0_6px_rgba(212,149,42,0.7)]',
-    calling_tool: 'shadow-[0_0_6px_rgba(59,154,110,0.7)]',
-  }[po.status] || ''
-
-  const statusLabelColor = {
-    idle: 'text-po-text-ghost',
-    thinking: 'text-po-status-active',
-    calling_tool: 'text-po-status-calling',
-  }[po.status] || 'text-po-text-ghost'
-
-  const statusLabel = {
-    idle: 'idle',
-    thinking: 'thinking...',
-    calling_tool: 'calling tool...',
-  }[po.status] || po.status
-
-  const handleThreadContextMenu = (e: React.MouseEvent, sessionId: string) => {
-    e.preventDefault()
-    setContextMenu({ x: e.clientX, y: e.clientY, sessionId })
-  }
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* Inspector Header */}
-      <div className="h-8 bg-po-surface-2 border-b border-po-border flex items-center px-3 gap-2 flex-shrink-0">
-        <div className="relative flex-shrink-0">
-          <div className={`w-2 h-2 rounded-full ${statusDot} ${statusGlow} ${isActive ? 'animate-pulse' : ''}`} />
-        </div>
-        <span className="font-mono text-xs text-po-text-primary font-medium">{po.name}</span>
-        <span className={`text-2xs font-medium truncate ${statusLabelColor} ${isActive ? 'animate-pulse' : ''}`}>{statusLabel}</span>
-        {po.description && (
-          <span className="text-2xs text-po-text-ghost truncate hidden sm:inline">{po.description}</span>
-        )}
-        {notifications.length > 0 && (
-          <span className="text-2xs font-mono bg-po-warning text-po-bg px-1 rounded font-bold">
-            {notifications.length}
-          </span>
-        )}
-
-        <div className="flex-1" />
-
-        {/* Thread picker */}
-        <div className="relative">
-          <button
-            onClick={() => setThreadMenuOpen(!threadMenuOpen)}
-            className="flex items-center gap-1 text-2xs text-po-text-secondary hover:text-po-text-primary transition-colors duration-150"
-          >
-            <span className="font-mono">
-              {currentSessionId
-                ? sessions.find(s => s.id === currentSessionId)?.name || `Thread ${currentSessionId.slice(0, 6)}`
-                : 'No thread'}
-            </span>
-            <svg className={`w-3 h-3 transition-transform ${threadMenuOpen ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
-
-          {threadMenuOpen && (
-            <div className="absolute right-0 top-full mt-1 w-56 bg-po-surface-2 border border-po-border rounded shadow-xl z-50 overflow-hidden">
-              <button
-                onClick={() => { createThread(po.name); setThreadMenuOpen(false) }}
-                className="w-full text-left px-2.5 py-1.5 text-xs text-po-accent hover:bg-po-surface-3 transition-colors duration-150 border-b border-po-border"
-              >
-                + New Thread
-              </button>
-              <div className="max-h-48 overflow-auto">
-                {sortedSessions.map((session) => (
-                  <button
-                    key={session.id}
-                    onClick={() => { switchSession(po.name, session.id); setThreadMenuOpen(false) }}
-                    onContextMenu={(e) => handleThreadContextMenu(e, session.id)}
-                    className={`w-full text-left px-2.5 py-1.5 text-xs transition-colors duration-150 ${
-                      session.id === currentSessionId
-                        ? 'bg-po-accent-wash text-po-accent'
-                        : 'text-po-text-secondary hover:bg-po-surface-3'
-                    }`}
-                  >
-                    <div className="flex items-center gap-1.5">
-                      {session.thread_type === 'delegation' && <span className="text-po-status-delegated">&#8627;</span>}
-                      <span className="font-mono truncate flex-1">
-                        {session.name || `Thread ${session.id.slice(0, 6)}`}
-                      </span>
-                      <span className="text-2xs text-po-text-ghost">{session.message_count}m</span>
-                    </div>
-                    {session.parent_po && (
-                      <div className="text-2xs text-po-status-delegated mt-0.5">from {session.parent_po}</div>
-                    )}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Top: Methods + Source (collapsible, resizable height) */}
-      <PaneSlot
-        label="Methods | Source"
-        collapsed={topPaneCollapsed}
-        onToggle={toggleTopPane}
-        height={topPaneResize.size}
-        resizeHandle={
-          <div
-            className="resize-handle-h"
-            onMouseDown={topPaneResize.onMouseDown}
-          />
-        }
-      >
-        <div className="flex h-full">
-          {/* Method List (resizable width) */}
-          <div style={{ width: methodListResize.size }} className="flex-shrink-0">
-            <MethodList
-              po={po}
-              selectedCapability={selectedCapability}
-              onSelectCapability={setSelectedCapability}
-            />
-          </div>
-
-          {/* Resize handle */}
-          <div
-            className="resize-handle"
-            onMouseDown={methodListResize.onMouseDown}
-          />
-
-          {/* Source Pane */}
-          <SourcePane
-            po={po}
-            selectedCapability={selectedCapability}
-            onSave={(prompt) => updatePrompt(po.name, prompt)}
-          />
-        </div>
-      </PaneSlot>
-
-      {/* Bottom: Workspace */}
-      <div className="flex-1 overflow-hidden">
-        <Workspace po={po} sendMessage={sendMessage} />
-      </div>
-
-      {/* Context menu for thread right-click */}
-      {contextMenu && (
-        <ContextMenu
-          x={contextMenu.x}
-          y={contextMenu.y}
-          onClose={() => setContextMenu(null)}
-          items={[
-            ...(requestUsage ? [
-              { label: 'View Usage', onClick: () => requestUsage(contextMenu.sessionId) },
-              { label: 'View Tree Usage', onClick: () => requestUsage(contextMenu.sessionId, true) },
-            ] : []),
-            ...(exportThread ? [
-              { label: 'Export Markdown', onClick: () => exportThread(contextMenu.sessionId, 'markdown') },
-              { label: 'Export JSON', onClick: () => exportThread(contextMenu.sessionId, 'json') },
-            ] : []),
-          ]}
-        />
-      )}
-    </div>
-  )
-}