prompt_objects 0.4.0 → 0.6.0

data/frontend/src/components/UsagePanel.tsx

@@ -37,52 +37,52 @@ export function UsagePanel({ usage, onClose }: UsagePanelProps) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
       <div
-        className="bg-po-surface border border-po-border rounded-lg shadow-2xl w-[420px] max-h-[80vh] overflow-auto"
+        className="bg-po-surface-2 border border-po-border rounded shadow-2xl w-[400px] max-h-[80vh] overflow-auto"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between p-4 border-b border-po-border">
-          <h3 className="font-medium text-white">
-            Token Usage {usage.include_tree && <span className="text-xs text-gray-400 ml-1">(full tree)</span>}
+        <div className="flex items-center justify-between px-4 py-2.5 border-b border-po-border">
+          <h3 className="font-mono text-xs text-po-text-primary">
+            Token Usage {usage.include_tree && <span className="text-po-text-ghost ml-1">(full tree)</span>}
           </h3>
-          <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
-            &times;
+          <button onClick={onClose} className="text-po-text-ghost hover:text-po-text-primary transition-colors duration-150">
+            {'\u2715'}
           </button>
         </div>
 
         <div className="p-4 space-y-4">
           {/* Summary */}
-          <div className="grid grid-cols-3 gap-3">
-            <div className="bg-po-bg rounded-lg p-3 text-center">
-              <div className="text-lg font-mono text-po-accent">{formatTokens(usage.input_tokens)}</div>
-              <div className="text-[10px] text-gray-500 uppercase tracking-wider">Input</div>
+          <div className="grid grid-cols-3 gap-2">
+            <div className="bg-po-surface rounded p-2.5 text-center">
+              <div className="text-sm font-mono text-po-accent">{formatTokens(usage.input_tokens)}</div>
+              <div className="text-2xs text-po-text-ghost uppercase tracking-wider mt-0.5">Input</div>
             </div>
-            <div className="bg-po-bg rounded-lg p-3 text-center">
-              <div className="text-lg font-mono text-po-warning">{formatTokens(usage.output_tokens)}</div>
-              <div className="text-[10px] text-gray-500 uppercase tracking-wider">Output</div>
+            <div className="bg-po-surface rounded p-2.5 text-center">
+              <div className="text-sm font-mono text-po-warning">{formatTokens(usage.output_tokens)}</div>
+              <div className="text-2xs text-po-text-ghost uppercase tracking-wider mt-0.5">Output</div>
             </div>
-            <div className="bg-po-bg rounded-lg p-3 text-center">
-              <div className="text-lg font-mono text-white">{formatCost(usage.estimated_cost_usd)}</div>
-              <div className="text-[10px] text-gray-500 uppercase tracking-wider">Est. Cost</div>
+            <div className="bg-po-surface rounded p-2.5 text-center">
+              <div className="text-sm font-mono text-po-text-primary">{formatCost(usage.estimated_cost_usd)}</div>
+              <div className="text-2xs text-po-text-ghost uppercase tracking-wider mt-0.5">Est. Cost</div>
             </div>
           </div>
 
-          <div className="flex justify-between text-xs text-gray-400 px-1">
-            <span>{usage.calls} LLM call{usage.calls !== 1 ? 's' : ''}</span>
-            <span>{formatTokens(usage.total_tokens)} total tokens</span>
+          <div className="flex justify-between text-2xs text-po-text-ghost px-1 font-mono">
+            <span>{usage.calls} call{usage.calls !== 1 ? 's' : ''}</span>
+            <span>{formatTokens(usage.total_tokens)} total</span>
           </div>
 
           {/* Per-model breakdown */}
           {models.length > 0 && (
             <div>
-              <h4 className="text-xs text-gray-500 uppercase tracking-wider mb-2">By Model</h4>
-              <div className="space-y-2">
+              <h4 className="text-2xs text-po-text-ghost uppercase tracking-wider mb-2">By Model</h4>
+              <div className="space-y-1.5">
                 {models.map(([model, data]) => (
-                  <div key={model} className="bg-po-bg rounded-lg p-3">
+                  <div key={model} className="bg-po-surface rounded p-2.5">
                     <div className="flex items-center justify-between mb-1">
-                      <span className="text-xs font-mono text-white">{model}</span>
-                      <span className="text-xs text-gray-400">{data.calls} call{data.calls !== 1 ? 's' : ''}</span>
+                      <span className="text-xs font-mono text-po-text-primary">{model}</span>
+                      <span className="text-2xs text-po-text-ghost">{data.calls} call{data.calls !== 1 ? 's' : ''}</span>
                     </div>
-                    <div className="flex justify-between text-[10px] text-gray-500">
+                    <div className="flex justify-between text-2xs text-po-text-ghost font-mono">
                       <span>In: {formatTokens(data.input_tokens)}</span>
                       <span>Out: {formatTokens(data.output_tokens)}</span>
                       <span>{formatCost(data.estimated_cost_usd)}</span>
@@ -94,8 +94,8 @@ export function UsagePanel({ usage, onClose }: UsagePanelProps) {
           )}
 
           {usage.calls === 0 && (
-            <div className="text-center text-gray-500 text-sm py-4">
-              No usage data recorded for this thread.
+            <div className="text-center text-po-text-ghost text-xs py-4 font-mono">
+              No usage data recorded.
             </div>
           )}
         </div>

data/frontend/src/components/Workspace.tsx

@@ -0,0 +1,260 @@
+import { useState, useRef, useEffect } from 'react'
+import { useStore } from '../store'
+import { MarkdownMessage } from './MarkdownMessage'
+import type { PromptObject, Message, ToolCall } from '../types'
+
+interface WorkspaceProps {
+  po: PromptObject
+  sendMessage: (target: string, content: string, newThread?: boolean) => void
+}
+
+export function Workspace({ po, sendMessage }: WorkspaceProps) {
+  const [input, setInput] = useState('')
+  const [continueThread, setContinueThread] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  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' })
+  }, [messages, streaming])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!input.trim()) return
+    const content = input.trim()
+    const shouldCreateNewThread = !continueThread && hasMessages
+    sendMessage(po.name, content, shouldCreateNewThread)
+    setInput('')
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      if (canSend) {
+        handleSubmit(e)
+      }
+    }
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Messages */}
+      <div className="flex-1 overflow-auto px-4 py-2 space-y-1">
+        {messages.length === 0 && !streaming && (
+          <div className="h-full flex items-center justify-center">
+            <span className="font-mono text-xs text-po-text-ghost">&gt; _</span>
+          </div>
+        )}
+
+        {messages.map((message, index) => (
+          <WorkspaceEntry key={index} message={message} />
+        ))}
+
+        {/* Streaming content */}
+        {streaming && (
+          <div className="py-1">
+            <MarkdownMessage content={streaming} className="text-po-text-primary text-xs" />
+            <span className="inline-block w-1.5 h-3.5 bg-po-accent animate-pulse ml-0.5 align-text-bottom" />
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="border-t border-po-border bg-po-surface-2 px-4 py-2">
+        {!connected && (
+          <div className="mb-1.5 text-2xs text-po-warning flex items-center gap-1.5 font-mono">
+            <div className="w-1.5 h-1.5 rounded-full bg-po-warning animate-pulse" />
+            reconnecting...
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="flex items-center gap-2">
+          <span className="text-po-text-ghost font-mono text-xs select-none">&gt;</span>
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={!connected ? 'disconnected' : isBusy ? `${po.status.replace('_', ' ')}...` : ''}
+            className="flex-1 bg-transparent text-po-text-primary font-mono text-xs placeholder-po-text-ghost focus:outline-none disabled:opacity-50"
+            disabled={isBusy}
+          />
+        </form>
+
+        {/* Thread toggle */}
+        {hasMessages && (
+          <div className="flex items-center gap-2 mt-1.5 text-2xs font-mono">
+            <button
+              type="button"
+              onClick={() => setContinueThread(false)}
+              className={`px-1.5 py-0.5 rounded transition-colors duration-150 ${
+                !continueThread
+                  ? 'bg-po-accent-wash text-po-accent'
+                  : 'text-po-text-ghost hover:text-po-text-secondary'
+              }`}
+            >
+              new thread
+            </button>
+            <button
+              type="button"
+              onClick={() => setContinueThread(true)}
+              className={`px-1.5 py-0.5 rounded transition-colors duration-150 ${
+                continueThread
+                  ? 'bg-po-accent-wash text-po-accent'
+                  : 'text-po-text-ghost hover:text-po-text-secondary'
+              }`}
+            >
+              continue
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function WorkspaceEntry({ message }: { message: Message }) {
+  const isUser = message.role === 'user'
+  const isAssistant = message.role === 'assistant'
+  const isTool = message.role === 'tool'
+
+  // Tool results
+  if (isTool) {
+    const results = message.results || []
+    if (results.length === 0) return null
+    return (
+      <div className="space-y-1 pl-4">
+        {results.map((result, idx) => (
+          <ToolResultFrame key={result.tool_call_id || idx} result={result} />
+        ))}
+      </div>
+    )
+  }
+
+  // User message: REPL-style "> message"
+  if (isUser) {
+    return (
+      <div className="py-1">
+        <span className="font-mono text-xs text-po-text-ghost select-none">&gt; </span>
+        <span className="font-mono text-xs text-po-text-primary whitespace-pre-wrap">{message.content}</span>
+      </div>
+    )
+  }
+
+  // Assistant message: plain text with markdown
+  if (isAssistant) {
+    return (
+      <div className="py-1">
+        {message.content && (
+          <MarkdownMessage content={message.content} className="text-po-text-primary text-xs" />
+        )}
+
+        {/* Tool calls as bordered frames */}
+        {message.tool_calls && message.tool_calls.length > 0 && (
+          <div className="mt-1 space-y-1">
+            {message.tool_calls.map((tc) => (
+              <ToolCallFrame key={tc.id} toolCall={tc} />
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return null
+}
+
+function ToolCallFrame({ toolCall }: { toolCall: ToolCall }) {
+  const [expanded, setExpanded] = useState(false)
+  const { notifications } = useStore()
+
+  // ask_human: amber-bordered frame
+  if (toolCall.name === 'ask_human') {
+    const question = toolCall.arguments.question as string
+    const options = toolCall.arguments.options as string[] | undefined
+    const isPending = notifications.some((n) => n.message === question)
+
+    return (
+      <div className="border-l-2 border-po-warning bg-po-accent-wash rounded-r px-3 py-2 my-1">
+        <div className="flex items-center gap-2 mb-1">
+          <span className="text-2xs font-mono text-po-warning">ask_human</span>
+          {isPending ? (
+            <span className="text-2xs bg-po-warning text-po-bg px-1.5 py-0.5 rounded font-bold animate-pulse">
+              PENDING
+            </span>
+          ) : (
+            <span className="text-2xs bg-po-success text-po-bg px-1.5 py-0.5 rounded font-bold">
+              RESOLVED
+            </span>
+          )}
+        </div>
+        <p className="text-xs text-po-text-primary mb-1.5">{question}</p>
+        {options && options.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {options.map((opt, i) => (
+              <span key={i} className="text-2xs font-mono bg-po-surface-2 px-1.5 py-0.5 rounded text-po-text-secondary">
+                {opt}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Default tool call: bordered frame
+  const argsStr = JSON.stringify(toolCall.arguments, null, 2)
+
+  return (
+    <div className="border-l-2 border-po-status-calling rounded-r overflow-hidden my-1">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full text-left px-3 py-1 flex items-center gap-1.5 hover:bg-po-surface-2 transition-colors duration-150 bg-po-surface"
+      >
+        <span className="text-2xs text-po-text-ghost">{expanded ? '\u25BC' : '\u25B8'}</span>
+        <span className="text-xs font-mono text-po-status-calling">{toolCall.name}</span>
+        <span className="text-2xs text-po-text-ghost">
+          ({Object.keys(toolCall.arguments).length} args)
+        </span>
+      </button>
+      {expanded && (
+        <pre className="px-3 py-1.5 bg-po-surface text-2xs text-po-text-tertiary font-mono whitespace-pre-wrap break-all">
+          {argsStr}
+        </pre>
+      )}
+    </div>
+  )
+}
+
+function ToolResultFrame({ result }: { result: { tool_call_id: string; name?: string; content: string } }) {
+  const [expanded, setExpanded] = useState(false)
+  const content = result.content || ''
+  const chars = content.length
+
+  return (
+    <div className="border-l-2 border-po-status-calling rounded-r overflow-hidden my-0.5">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full text-left px-3 py-1 flex items-center gap-1.5 hover:bg-po-surface-2 transition-colors duration-150 bg-po-surface"
+      >
+        <span className="text-2xs text-po-text-ghost">{expanded ? '\u25BC' : '\u25B8'}</span>
+        <span className="text-2xs text-po-text-tertiary">Result</span>
+        {result.name && <span className="text-2xs text-po-status-calling font-mono">{result.name}</span>}
+        <span className="text-2xs text-po-text-ghost">({chars} chars)</span>
+      </button>
+      {expanded && (
+        <pre className="px-3 py-1.5 bg-po-surface text-2xs text-po-text-tertiary font-mono whitespace-pre-wrap break-all">
+          {content}
+        </pre>
+      )}
+    </div>
+  )
+}

data/frontend/src/components/index.ts

@@ -1,11 +1,12 @@
-export { Header } from './Header'
-export { Dashboard } from './Dashboard'
-export { POCard } from './POCard'
-export { PODetail } from './PODetail'
-export { ChatPanel } from './ChatPanel'
-export { SessionsPanel } from './SessionsPanel'
-export { CapabilitiesPanel } from './CapabilitiesPanel'
-export { MessageBus } from './MessageBus'
+export { SystemBar } from './SystemBar'
+export { ObjectList } from './ObjectList'
+export { Inspector } from './Inspector'
+export { MethodList } from './MethodList'
+export { SourcePane } from './SourcePane'
+export { Workspace } from './Workspace'
+export { Transcript } from './Transcript'
 export { NotificationPanel } from './NotificationPanel'
 export { MarkdownMessage } from './MarkdownMessage'
-export { PromptPanel } from './PromptPanel'
+export { ModelSelector } from './ModelSelector'
+export { ContextMenu } from './ContextMenu'
+export { UsagePanel } from './UsagePanel'

data/frontend/src/hooks/useResize.ts

@@ -0,0 +1,55 @@
+import { useState, useCallback, useEffect, useRef } from 'react'
+
+interface UseResizeOptions {
+  direction: 'horizontal' | 'vertical'
+  initialSize: number
+  minSize: number
+  maxSize: number
+  /** If true, dragging down/right increases size. If false (for bottom panels), dragging up increases. */
+  inverted?: boolean
+}
+
+export function useResize({ direction, initialSize, minSize, maxSize, inverted = false }: UseResizeOptions) {
+  const [size, setSize] = useState(initialSize)
+  const dragging = useRef(false)
+  const startPos = useRef(0)
+  const startSize = useRef(0)
+
+  const onMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    dragging.current = true
+    startPos.current = direction === 'horizontal' ? e.clientX : e.clientY
+    startSize.current = size
+    document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize'
+    document.body.style.userSelect = 'none'
+  }, [direction, size])
+
+  useEffect(() => {
+    const onMouseMove = (e: MouseEvent) => {
+      if (!dragging.current) return
+      const currentPos = direction === 'horizontal' ? e.clientX : e.clientY
+      const delta = currentPos - startPos.current
+      const newSize = inverted
+        ? startSize.current - delta
+        : startSize.current + delta
+      setSize(Math.min(maxSize, Math.max(minSize, newSize)))
+    }
+
+    const onMouseUp = () => {
+      if (dragging.current) {
+        dragging.current = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+      }
+    }
+
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+  }, [direction, minSize, maxSize, inverted])
+
+  return { size, onMouseDown }
+}

data/frontend/src/hooks/useWebSocket.ts

@@ -8,6 +8,7 @@ import type {
   Environment,
   Message,
   LLMConfig,
+  EnvDataEntry,
   SendMessagePayload,
   RespondToNotificationPayload,
   CreateSessionPayload,
@@ -43,6 +44,8 @@ export function useWebSocket() {
     setLLMConfig,
     updateCurrentLLM,
     setUsageData,
+    setEnvData,
+    setSessionRoot,
   } = useStore()
 
   // Keep the handler ref up to date every render
@@ -215,6 +218,57 @@ export function useWebSocket() {
         break
       }
 
+      case 'prompt_updated': {
+        const { target, success } = message.payload as { target: string; success: boolean }
+        if (!success) console.warn('Prompt update failed for:', target)
+        break
+      }
+
+      case 'llm_error': {
+        const { po_name, error, provider, model } = message.payload as {
+          po_name: string
+          provider: string
+          model: string
+          error: string
+          error_class: string
+        }
+        console.error(`LLM error for ${po_name} (${provider}/${model}):`, error)
+        // Reset PO to idle so UI isn't stuck in "thinking" state
+        setPromptObject(po_name, { status: 'idle' })
+        break
+      }
+
+      case 'session_created':
+        // Session creation confirmed — po_state update follows with full state
+        break
+
+      case 'session_switched':
+        // Session switch confirmed — po_state update follows with full state
+        break
+
+      case 'env_data_changed': {
+        const { root_thread_id, entries } = message.payload as {
+          action: string
+          root_thread_id: string
+          key: string
+          stored_by: string
+          entries: EnvDataEntry[]
+        }
+        setEnvData(root_thread_id, entries)
+        break
+      }
+
+      case 'env_data_list': {
+        const { session_id, root_thread_id, entries } = message.payload as {
+          session_id: string
+          root_thread_id: string
+          entries: EnvDataEntry[]
+        }
+        setEnvData(root_thread_id, entries)
+        setSessionRoot(session_id, root_thread_id)
+        break
+      }
+
       case 'error': {
         const { message: errorMsg } = message.payload as { message: string }
         console.error('Server error:', errorMsg)
@@ -460,6 +514,21 @@ export function useWebSocket() {
     )
   }, [])
 
+  // Request env data for a session
+  const requestEnvData = useCallback((sessionId: string) => {
+    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
+      console.error('WebSocket not connected')
+      return
+    }
+
+    ws.current.send(
+      JSON.stringify({
+        type: 'get_env_data_list',
+        payload: { session_id: sessionId },
+      })
+    )
+  }, [])
+
   // Update a PO's prompt (markdown body)
   const updatePrompt = useCallback((target: string, prompt: string) => {
     if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
@@ -485,5 +554,6 @@ export function useWebSocket() {
     updatePrompt,
     requestUsage,
     exportThread,
+    requestEnvData,
   }
 }

data/frontend/src/index.css

@@ -13,8 +13,8 @@ body {
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -26,16 +26,31 @@ body {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-po-accent;
+  @apply bg-po-border-focus;
+}
+
+/* Selection */
+::selection {
+  background: rgba(212, 149, 42, 0.3);
 }
 
 /* Custom utilities */
 @layer utilities {
   .scrollbar-thin {
     scrollbar-width: thin;
+    scrollbar-color: #3d3a37 #1a1918;
   }
 }
 
+/* Resize handles */
+.resize-handle {
+  @apply w-1 cursor-col-resize hover:bg-po-accent/30 active:bg-po-accent/50 transition-colors border-l border-po-border;
+}
+
+.resize-handle-h {
+  @apply h-1 cursor-row-resize hover:bg-po-accent/30 active:bg-po-accent/50 transition-colors border-t border-po-border;
+}
+
 /* Canvas CSS2DRenderer labels */
 .canvas-node-label {
   text-align: center;
@@ -45,16 +60,18 @@ body {
 
 .canvas-node-name {
   display: block;
-  color: #ffffff;
+  color: #e8e2da;
   font-size: 12px;
   font-weight: 500;
+  font-family: 'Geist Mono', 'IBM Plex Mono', monospace;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }
 
 .canvas-node-status {
   display: block;
-  color: #6b7280;
+  color: #78726a;
   font-size: 10px;
+  font-family: 'Geist Mono', 'IBM Plex Mono', monospace;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }
 
@@ -64,20 +81,20 @@ body {
   justify-content: center;
   width: 20px;
   height: 20px;
-  background: #f59e0b;
-  color: #000000;
+  background: #d4952a;
+  color: #1a1918;
   font-size: 10px;
   font-weight: 700;
   border-radius: 50%;
   pointer-events: none;
   user-select: none;
-  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
+  box-shadow: 0 0 8px rgba(212, 149, 42, 0.6);
 }
 
 .canvas-toolcall-label {
-  color: #93c5fd;
+  color: #3b9a6e;
   font-size: 10px;
-  font-family: monospace;
+  font-family: 'Geist Mono', 'IBM Plex Mono', monospace;
   text-align: center;
   pointer-events: none;
   user-select: none;