prompt_objects 0.3.1 → 0.5.0

data/frontend/src/canvas/constants.ts

@@ -0,0 +1,95 @@
+// Canvas visualization constants
+
+// Colors (hex values matching warm po-* palette)
+export const COLORS = {
+  // Node colors
+  background: 0x1a1918,
+  surface: 0x222120,
+  border: 0x3d3a37,
+  accent: 0xd4952a,
+  accentHover: 0xe0a940,
+  success: 0x3b9a6e,
+  warning: 0xd4952a,
+  error: 0xc45c4a,
+
+  // Status colors
+  statusIdle: 0x78726a,
+  statusThinking: 0xd4952a,
+  statusCallingTool: 0x3b9a6e,
+
+  // Canvas-specific
+  nodeFill: 0x222120,
+  nodeGlow: 0xd4952a,
+  toolCallFill: 0x3b9a6e,
+  arcColor: 0xd4952a,
+  particleColor: 0xe0a940,
+  gridColor: 0x222120,
+} as const
+
+// CSS color strings (for CSS2DRenderer elements)
+export const CSS_COLORS = {
+  accent: '#d4952a',
+  accentHover: '#e0a940',
+  warning: '#d4952a',
+  success: '#3b9a6e',
+  error: '#c45c4a',
+  textPrimary: '#e8e2da',
+  textSecondary: '#a8a29a',
+  textMuted: '#78726a',
+  surface: '#222120',
+  border: '#3d3a37',
+  statusIdle: '#78726a',
+  statusThinking: '#d4952a',
+  statusCallingTool: '#3b9a6e',
+} as const
+
+// Node dimensions
+export const NODE = {
+  poRadius: 40,
+  poSides: 6, // hexagon
+  toolCallRadius: 18,
+  labelOffsetY: 55,
+  badgeOffsetX: 30,
+  badgeOffsetY: -30,
+} as const
+
+// Camera
+export const CAMERA = {
+  zoomMin: 0.1,
+  zoomMax: 5,
+  zoomSpeed: 0.1,
+  fitPadding: 1.3, // 30% padding
+} as const
+
+// Animation
+export const ANIMATION = {
+  positionLerpFactor: 0.1,
+  toolCallFadeInDuration: 0.4,
+  toolCallActiveDuration: 8,
+  toolCallFadeOutDuration: 1.5,
+  arcLifetime: 6,
+  arcFadeDuration: 2,
+  particleSpeed: 0.4,
+  particleCount: 5,
+  pulseSpeed: 2,
+} as const
+
+// Force simulation
+export const FORCE = {
+  chargeStrength: -300,
+  centerStrength: 0.05,
+  collisionRadius: 60, // radius + 20
+  linkDistance: 200,
+  alphaDecay: 0.02,
+  velocityDecay: 0.4,
+} as const
+
+// Bloom
+export const BLOOM = {
+  strength: 0.8,
+  radius: 0.4,
+  threshold: 0.6,
+} as const
+
+// Sync throttling
+export const SYNC_THROTTLE_MS = 100

data/frontend/src/canvas/controls/CameraControls.ts

@@ -0,0 +1,98 @@
+import * as THREE from 'three'
+import { CAMERA } from '../constants'
+
+export class CameraControls {
+  private camera: THREE.OrthographicCamera
+  private domElement: HTMLElement
+  private isPanning = false
+  private panStart = new THREE.Vector2()
+
+  private onWheel: (e: WheelEvent) => void
+  private onPointerDown: (e: PointerEvent) => void
+  private onPointerMove: (e: PointerEvent) => void
+  private onPointerUp: (e: PointerEvent) => void
+
+  constructor(camera: THREE.OrthographicCamera, domElement: HTMLElement) {
+    this.camera = camera
+    this.domElement = domElement
+
+    this.onWheel = this.handleWheel.bind(this)
+    this.onPointerDown = this.handlePointerDown.bind(this)
+    this.onPointerMove = this.handlePointerMove.bind(this)
+    this.onPointerUp = this.handlePointerUp.bind(this)
+
+    domElement.addEventListener('wheel', this.onWheel, { passive: false })
+    domElement.addEventListener('pointerdown', this.onPointerDown)
+    domElement.addEventListener('pointermove', this.onPointerMove)
+    domElement.addEventListener('pointerup', this.onPointerUp)
+  }
+
+  private handleWheel(e: WheelEvent): void {
+    e.preventDefault()
+    const delta = e.deltaY > 0 ? 1 - CAMERA.zoomSpeed : 1 + CAMERA.zoomSpeed
+    const newZoom = this.camera.zoom * delta
+    this.camera.zoom = THREE.MathUtils.clamp(newZoom, CAMERA.zoomMin, CAMERA.zoomMax)
+    this.camera.updateProjectionMatrix()
+  }
+
+  private handlePointerDown(e: PointerEvent): void {
+    // Shift+left click or middle mouse button for panning
+    if ((e.button === 0 && e.shiftKey) || e.button === 1) {
+      this.isPanning = true
+      this.panStart.set(e.clientX, e.clientY)
+      this.domElement.setPointerCapture(e.pointerId)
+    }
+  }
+
+  private handlePointerMove(e: PointerEvent): void {
+    if (!this.isPanning) return
+
+    const dx = e.clientX - this.panStart.x
+    const dy = e.clientY - this.panStart.y
+
+    // Convert screen pixels to world units based on zoom
+    const worldDx = -dx / this.camera.zoom
+    const worldDy = dy / this.camera.zoom
+
+    this.camera.position.x += worldDx
+    this.camera.position.y += worldDy
+
+    this.panStart.set(e.clientX, e.clientY)
+  }
+
+  private handlePointerUp(e: PointerEvent): void {
+    if (this.isPanning) {
+      this.isPanning = false
+      this.domElement.releasePointerCapture(e.pointerId)
+    }
+  }
+
+  fitAll(bounds: THREE.Box3): void {
+    if (bounds.isEmpty()) return
+
+    const center = new THREE.Vector3()
+    bounds.getCenter(center)
+    const size = new THREE.Vector3()
+    bounds.getSize(size)
+
+    this.camera.position.x = center.x
+    this.camera.position.y = center.y
+
+    const viewWidth = this.camera.right - this.camera.left
+    const viewHeight = this.camera.top - this.camera.bottom
+
+    const scaleX = viewWidth / (size.x * CAMERA.fitPadding)
+    const scaleY = viewHeight / (size.y * CAMERA.fitPadding)
+
+    this.camera.zoom = Math.min(scaleX, scaleY, CAMERA.zoomMax)
+    this.camera.zoom = Math.max(this.camera.zoom, CAMERA.zoomMin)
+    this.camera.updateProjectionMatrix()
+  }
+
+  dispose(): void {
+    this.domElement.removeEventListener('wheel', this.onWheel)
+    this.domElement.removeEventListener('pointerdown', this.onPointerDown)
+    this.domElement.removeEventListener('pointermove', this.onPointerMove)
+    this.domElement.removeEventListener('pointerup', this.onPointerUp)
+  }
+}

data/frontend/src/canvas/edges/MessageArc.ts

@@ -0,0 +1,149 @@
+import * as THREE from 'three'
+import { COLORS, ANIMATION } from '../constants'
+
+export class MessageArc {
+  readonly id: string
+  readonly from: string
+  readonly to: string
+  readonly group: THREE.Group
+
+  private curve: THREE.QuadraticBezierCurve3
+  private line: THREE.Line
+  private lineMaterial: THREE.LineBasicMaterial
+  private particles: THREE.Points
+  private particleMaterial: THREE.PointsMaterial
+  private particlePositions: Float32Array
+  private particleTs: number[] // parameter t for each particle on the curve
+
+  private startPoint = new THREE.Vector3()
+  private endPoint = new THREE.Vector3()
+  private controlPoint = new THREE.Vector3()
+  private age = 0
+  private expired = false
+
+  constructor(id: string, from: string, to: string, startPos: THREE.Vector3, endPos: THREE.Vector3) {
+    this.id = id
+    this.from = from
+    this.to = to
+    this.group = new THREE.Group()
+
+    this.startPoint.copy(startPos)
+    this.endPoint.copy(endPos)
+    this.computeControlPoint()
+
+    this.curve = new THREE.QuadraticBezierCurve3(
+      this.startPoint,
+      this.controlPoint,
+      this.endPoint
+    )
+
+    // Arc line
+    const linePoints = this.curve.getPoints(50)
+    const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints)
+    this.lineMaterial = new THREE.LineBasicMaterial({
+      color: COLORS.arcColor,
+      transparent: true,
+      opacity: 0.4,
+    })
+    this.line = new THREE.Line(lineGeometry, this.lineMaterial)
+    this.group.add(this.line)
+
+    // Particles traveling along the curve
+    const count = ANIMATION.particleCount
+    this.particlePositions = new Float32Array(count * 3)
+    this.particleTs = []
+
+    for (let i = 0; i < count; i++) {
+      this.particleTs.push(i / count)
+    }
+
+    const particleGeometry = new THREE.BufferGeometry()
+    particleGeometry.setAttribute(
+      'position',
+      new THREE.BufferAttribute(this.particlePositions, 3)
+    )
+
+    this.particleMaterial = new THREE.PointsMaterial({
+      color: COLORS.particleColor,
+      size: 4,
+      transparent: true,
+      opacity: 0.8,
+      sizeAttenuation: false,
+    })
+
+    this.particles = new THREE.Points(particleGeometry, this.particleMaterial)
+    this.group.add(this.particles)
+
+    this.updateParticlePositions()
+  }
+
+  private computeControlPoint(): void {
+    // Perpendicular offset at midpoint
+    const mid = new THREE.Vector3().addVectors(this.startPoint, this.endPoint).multiplyScalar(0.5)
+    const dir = new THREE.Vector3().subVectors(this.endPoint, this.startPoint)
+    const dist = dir.length()
+    // Perpendicular in 2D: rotate 90 degrees
+    const perp = new THREE.Vector3(-dir.y, dir.x, 0).normalize()
+    this.controlPoint.copy(mid).addScaledVector(perp, dist * 0.3)
+  }
+
+  updateEndpoints(startPos: THREE.Vector3, endPos: THREE.Vector3): void {
+    this.startPoint.copy(startPos)
+    this.endPoint.copy(endPos)
+    this.computeControlPoint()
+
+    this.curve.v0.copy(this.startPoint)
+    this.curve.v1.copy(this.controlPoint)
+    this.curve.v2.copy(this.endPoint)
+
+    // Rebuild line geometry
+    const linePoints = this.curve.getPoints(50)
+    this.line.geometry.dispose()
+    this.line.geometry = new THREE.BufferGeometry().setFromPoints(linePoints)
+  }
+
+  private updateParticlePositions(): void {
+    for (let i = 0; i < this.particleTs.length; i++) {
+      const point = this.curve.getPoint(this.particleTs[i])
+      this.particlePositions[i * 3] = point.x
+      this.particlePositions[i * 3 + 1] = point.y
+      this.particlePositions[i * 3 + 2] = point.z
+    }
+    this.particles.geometry.attributes.position.needsUpdate = true
+  }
+
+  update(delta: number): void {
+    this.age += delta
+
+    // Advance particles
+    for (let i = 0; i < this.particleTs.length; i++) {
+      this.particleTs[i] = (this.particleTs[i] + delta * ANIMATION.particleSpeed) % 1
+    }
+    this.updateParticlePositions()
+
+    // Fade out in last 2 seconds of lifetime
+    const fadeStart = ANIMATION.arcLifetime - ANIMATION.arcFadeDuration
+    if (this.age > fadeStart) {
+      const fadeProgress = (this.age - fadeStart) / ANIMATION.arcFadeDuration
+      const alpha = Math.max(1 - fadeProgress, 0)
+      this.lineMaterial.opacity = 0.4 * alpha
+      this.particleMaterial.opacity = 0.8 * alpha
+    }
+
+    if (this.age >= ANIMATION.arcLifetime) {
+      this.expired = true
+    }
+  }
+
+  isExpired(): boolean {
+    return this.expired
+  }
+
+  dispose(): void {
+    this.line.geometry.dispose()
+    this.lineMaterial.dispose()
+    this.particles.geometry.dispose()
+    this.particleMaterial.dispose()
+    this.group.parent?.remove(this.group)
+  }
+}

data/frontend/src/canvas/inspector/InspectorPanel.tsx

@@ -0,0 +1,31 @@
+import { useCanvasStore } from '../canvasStore'
+import { POInspector } from './POInspector'
+import { ToolCallInspector } from './ToolCallInspector'
+
+export function InspectorPanel() {
+  const selectedNode = useCanvasStore((s) => s.selectedNode)
+
+  if (!selectedNode) return null
+
+  return (
+    <aside className="w-80 border-l border-po-border bg-po-surface overflow-hidden flex flex-col">
+      <div className="h-8 bg-po-surface-2 border-b border-po-border flex items-center px-3">
+        <span className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider flex-1">Inspector</span>
+        <button
+          onClick={() => useCanvasStore.getState().selectNode(null)}
+          className="text-2xs text-po-text-ghost hover:text-po-text-secondary transition-colors duration-150"
+          title="Close inspector"
+        >
+          {'\u2715'}
+        </button>
+      </div>
+      <div className="flex-1 overflow-auto">
+        {selectedNode.type === 'po' ? (
+          <POInspector poName={selectedNode.id} />
+        ) : (
+          <ToolCallInspector toolCallId={selectedNode.id} />
+        )}
+      </div>
+    </aside>
+  )
+}

data/frontend/src/canvas/inspector/POInspector.tsx

@@ -0,0 +1,262 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { useStore, usePONotifications } from '../../store'
+import { useWebSocket } from '../../hooks/useWebSocket'
+
+interface Props {
+  poName: string
+}
+
+const statusColors: Record<string, string> = {
+  idle: 'bg-po-status-idle',
+  thinking: 'bg-po-status-active animate-pulse',
+  calling_tool: 'bg-po-status-calling animate-pulse',
+}
+
+export function POInspector({ poName }: Props) {
+  const po = useStore((s) => s.promptObjects[poName])
+  const notifications = usePONotifications(poName)
+  const { updatePrompt, respondToNotification } = useWebSocket()
+  const { selectPO, setCurrentView } = useStore()
+
+  if (!po) {
+    return (
+      <div className="p-4 text-po-text-ghost text-xs font-mono">
+        Prompt Object "{poName}" not found.
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 space-y-5">
+      {/* Header */}
+      <div>
+        <div className="flex items-center gap-2 mb-1">
+          <h3 className="text-sm font-mono font-medium text-po-text-primary">{po.name}</h3>
+          <div className={`w-2 h-2 rounded-full ${statusColors[po.status] || statusColors.idle}`} />
+        </div>
+        <p className="text-xs text-po-text-secondary">{po.description}</p>
+        <span className="inline-block mt-1 text-2xs text-po-text-ghost bg-po-surface-2 px-1.5 py-0.5 rounded font-mono">
+          {po.status}
+        </span>
+      </div>
+
+      {/* Capabilities */}
+      <div>
+        <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider mb-2">
+          Capabilities ({po.capabilities?.length || 0})
+        </h4>
+        <div className="space-y-1">
+          {(po.capabilities || []).map((cap) => (
+            <CapabilityItem key={cap.name} name={cap.name} description={cap.description} />
+          ))}
+        </div>
+      </div>
+
+      {/* Prompt */}
+      <PromptSection
+        prompt={po.prompt || ''}
+        onSave={(prompt) => updatePrompt(poName, prompt)}
+      />
+
+      {/* Sessions */}
+      <div>
+        <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider mb-2">
+          Sessions ({po.sessions?.length || 0})
+        </h4>
+        {po.current_session && (
+          <div className="text-xs text-po-text-tertiary">
+            Current: <span className="text-po-text-secondary font-mono">{po.current_session.id.slice(0, 8)}...</span>
+            <span className="ml-2">({po.current_session.messages.length} messages)</span>
+          </div>
+        )}
+      </div>
+
+      {/* Notifications */}
+      {notifications.length > 0 && (
+        <div>
+          <h4 className="text-2xs font-medium text-po-warning uppercase tracking-wider mb-2">
+            Pending Requests ({notifications.length})
+          </h4>
+          <div className="space-y-2">
+            {notifications.map((n) => (
+              <NotificationCard
+                key={n.id}
+                notification={n}
+                onRespond={(response) => respondToNotification(n.id, response)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Link to full detail */}
+      <button
+        onClick={() => {
+          selectPO(poName)
+          setCurrentView('dashboard')
+        }}
+        className="text-xs text-po-accent hover:underline font-mono transition-colors duration-150"
+      >
+        Open in browser view
+      </button>
+    </div>
+  )
+}
+
+function CapabilityItem({ name, description }: { name: string; description: string }) {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <div className="bg-po-surface-2 border border-po-border rounded overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full px-2.5 py-1.5 flex items-center justify-between hover:bg-po-surface-3 transition-colors duration-150"
+      >
+        <span className="font-mono text-xs text-po-accent">{name}</span>
+        <span className="text-po-text-ghost text-xs">{expanded ? '\u25BC' : '\u25B8'}</span>
+      </button>
+      {expanded && (
+        <div className="px-2.5 py-2 border-t border-po-border bg-po-surface">
+          <p className="text-xs text-po-text-secondary">{description}</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function PromptSection({ prompt, onSave }: { prompt: string; onSave: (p: string) => void }) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [edited, setEdited] = useState(prompt)
+  const saveTimeoutRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (!isEditing) setEdited(prompt)
+  }, [prompt, isEditing])
+
+  const debouncedSave = useCallback(
+    (value: string) => {
+      if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current)
+      saveTimeoutRef.current = window.setTimeout(() => {
+        if (value !== prompt) onSave(value)
+      }, 1000)
+    },
+    [onSave, prompt]
+  )
+
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current)
+    }
+  }, [])
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider">Prompt</h4>
+        <button
+          onClick={() => {
+            if (isEditing && edited !== prompt) onSave(edited)
+            setIsEditing(!isEditing)
+          }}
+          className={`text-2xs px-1.5 py-0.5 rounded transition-colors duration-150 ${
+            isEditing
+              ? 'bg-po-accent text-po-bg'
+              : 'text-po-text-tertiary hover:text-po-text-primary hover:bg-po-surface-2'
+          }`}
+        >
+          {isEditing ? 'Done' : 'Edit'}
+        </button>
+      </div>
+      {isEditing ? (
+        <textarea
+          value={edited}
+          onChange={(e) => {
+            setEdited(e.target.value)
+            debouncedSave(e.target.value)
+          }}
+          className="w-full h-40 bg-po-bg border border-po-border rounded p-2 text-xs text-po-text-primary font-mono resize-none focus:outline-none focus:border-po-accent"
+          spellCheck={false}
+        />
+      ) : (
+        <div className="bg-po-surface-2 border border-po-border rounded p-2 max-h-32 overflow-auto">
+          <pre className="text-xs text-po-text-secondary font-mono whitespace-pre-wrap">
+            {prompt || '(no prompt)'}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function NotificationCard({
+  notification,
+  onRespond,
+}: {
+  notification: { id: string; type: string; message: string; options: string[] }
+  onRespond: (response: string) => void
+}) {
+  const [customInput, setCustomInput] = useState('')
+  const [showCustom, setShowCustom] = useState(false)
+
+  return (
+    <div className="bg-po-surface-2 border border-po-border rounded p-2">
+      <span className="text-2xs font-mono bg-po-warning text-po-bg px-1.5 py-0.5 rounded font-bold">
+        {notification.type}
+      </span>
+      <p className="text-xs text-po-text-primary mt-1.5 mb-2">{notification.message}</p>
+
+      {notification.options.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mb-1.5">
+          {notification.options.map((opt, i) => (
+            <button
+              key={i}
+              onClick={() => onRespond(opt)}
+              className="px-2 py-0.5 text-xs bg-po-surface border border-po-border rounded hover:border-po-accent hover:text-po-accent transition-colors duration-150 text-po-text-secondary"
+            >
+              {opt}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showCustom ? (
+        <div className="flex gap-1.5 mt-1.5">
+          <input
+            type="text"
+            value={customInput}
+            onChange={(e) => setCustomInput(e.target.value)}
+            placeholder="Custom response..."
+            className="flex-1 bg-po-bg border border-po-border rounded px-2 py-1 text-xs text-po-text-primary placeholder-po-text-ghost focus:outline-none focus:border-po-accent"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && customInput.trim()) {
+                onRespond(customInput.trim())
+                setCustomInput('')
+                setShowCustom(false)
+              }
+            }}
+            autoFocus
+          />
+          <button
+            onClick={() => {
+              if (customInput.trim()) {
+                onRespond(customInput.trim())
+                setCustomInput('')
+                setShowCustom(false)
+              }
+            }}
+            className="px-2 py-1 text-xs bg-po-accent text-po-bg rounded font-medium"
+          >
+            Send
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setShowCustom(true)}
+          className="text-2xs text-po-text-ghost hover:text-po-text-secondary transition-colors duration-150 mt-1"
+        >
+          + Custom
+        </button>
+      )}
+    </div>
+  )
+}

data/frontend/src/canvas/inspector/ToolCallInspector.tsx

@@ -0,0 +1,67 @@
+import { useCanvasStore } from '../canvasStore'
+
+interface Props {
+  toolCallId: string
+}
+
+const statusColors: Record<string, string> = {
+  active: 'text-po-accent',
+  completed: 'text-po-success',
+  error: 'text-po-error',
+}
+
+export function ToolCallInspector({ toolCallId }: Props) {
+  const toolCall = useCanvasStore((s) => s.activeToolCalls.get(toolCallId))
+
+  if (!toolCall) {
+    return (
+      <div className="p-4 text-po-text-ghost text-xs font-mono">
+        Tool call not found or has expired.
+      </div>
+    )
+  }
+
+  const duration = toolCall.completedAt
+    ? ((toolCall.completedAt - toolCall.startedAt) / 1000).toFixed(1) + 's'
+    : ((Date.now() - toolCall.startedAt) / 1000).toFixed(1) + 's (running)'
+
+  return (
+    <div className="p-4 space-y-4">
+      {/* Header */}
+      <div>
+        <h3 className="text-sm font-mono font-medium text-po-text-primary">{toolCall.toolName}</h3>
+        <div className="flex items-center gap-2 mt-1">
+          <span className={`text-xs font-mono font-medium ${statusColors[toolCall.status] || ''}`}>
+            {toolCall.status}
+          </span>
+          <span className="text-2xs text-po-text-ghost font-mono">{duration}</span>
+        </div>
+        <div className="text-xs text-po-text-tertiary mt-1">
+          Called by: <span className="text-po-accent font-mono">{toolCall.callerPO}</span>
+        </div>
+      </div>
+
+      {/* Parameters */}
+      <div>
+        <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider mb-2">Parameters</h4>
+        <div className="bg-po-surface-2 border border-po-border rounded p-2.5 overflow-auto max-h-48">
+          <pre className="text-xs text-po-text-secondary font-mono whitespace-pre-wrap">
+            {JSON.stringify(toolCall.params, null, 2)}
+          </pre>
+        </div>
+      </div>
+
+      {/* Result */}
+      {toolCall.result && (
+        <div>
+          <h4 className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider mb-2">Result</h4>
+          <div className="bg-po-surface-2 border border-po-border rounded p-2.5 overflow-auto max-h-64">
+            <pre className="text-xs text-po-text-secondary font-mono whitespace-pre-wrap">
+              {toolCall.result}
+            </pre>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}