prompt_objects 0.3.1 → 0.5.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 = 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

@@ -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/ContextMenu.tsx

@@ -35,7 +35,6 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
     }
   }, [onClose])
 
-  // Adjust position to stay within viewport
   const adjustedStyle = {
     top: y,
     left: x,
@@ -44,7 +43,7 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
   return (
     <div
       ref={menuRef}
-      className="fixed z-50 bg-po-surface border border-po-border rounded-lg shadow-xl py-1 min-w-[160px]"
+      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) => (
@@ -54,8 +53,10 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
             item.onClick()
             onClose()
           }}
-          className={`w-full text-left px-3 py-1.5 text-xs hover:bg-po-bg transition-colors flex items-center gap-2 ${
-            item.danger ? 'text-red-400 hover:text-red-300' : 'text-gray-300 hover:text-white'
+          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>}

data/frontend/src/components/Inspector.tsx

@@ -0,0 +1,232 @@
+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>
+  )
+}