prompt_objects 0.3.1 → 0.5.0

data/frontend/src/hooks/useWebSocket.ts

@@ -19,9 +19,15 @@ import type {
 export function useWebSocket() {
   const ws = useRef<WebSocket | null>(null)
   const reconnectTimeout = useRef<number | null>(null)
+  const disposed = useRef(false)
+
+  // Use a ref for the message handler so the WS always calls the latest version,
+  // regardless of when `connect()` was created or how many reconnections happened.
+  const handleMessageRef = useRef<(message: WSMessage) => void>(() => {})
 
   const {
     setConnected,
+    resetOnDisconnect,
     setEnvironment,
     setPromptObject,
     removePromptObject,
@@ -39,7 +45,237 @@ export function useWebSocket() {
     setUsageData,
   } = useStore()
 
+  // Keep the handler ref up to date every render
+  handleMessageRef.current = (message: WSMessage) => {
+    switch (message.type) {
+      case 'environment':
+        setEnvironment(message.payload as Environment)
+        break
+
+      case 'po_state': {
+        const { name, state } = message.payload as {
+          name: string
+          state: Partial<PromptObject>
+        }
+        setPromptObject(name, state)
+        break
+      }
+
+      case 'po_response': {
+        const { target, content } = message.payload as {
+          target: string
+          content: string
+        }
+        setPendingResponse(target, content)
+        // Clear after a short delay to allow UI to update
+        setTimeout(() => clearPendingResponse(target), 100)
+        break
+      }
+
+      case 'stream': {
+        const { target, chunk } = message.payload as {
+          target: string
+          chunk: string
+        }
+        appendStreamChunk(target, chunk)
+        break
+      }
+
+      case 'stream_end': {
+        const { target } = message.payload as { target: string }
+        clearStream(target)
+        break
+      }
+
+      case 'bus_message':
+        addBusMessage(message.payload as BusMessage)
+        break
+
+      case 'notification':
+        addNotification(message.payload as Notification)
+        break
+
+      case 'notification_resolved': {
+        const { id } = message.payload as { id: string }
+        removeNotification(id)
+        break
+      }
+
+      // Live file updates
+      case 'po_added': {
+        const { name, state } = message.payload as {
+          name: string
+          state: Partial<PromptObject>
+        }
+        console.log('PO added:', name)
+        setPromptObject(name, state)
+        break
+      }
+
+      case 'po_modified': {
+        const { name, state } = message.payload as {
+          name: string
+          state: Partial<PromptObject>
+        }
+        console.log('PO modified:', name)
+        setPromptObject(name, state)
+        break
+      }
+
+      case 'po_removed': {
+        const { name } = message.payload as { name: string }
+        console.log('PO removed:', name)
+        removePromptObject(name)
+        break
+      }
+
+      case 'po_delegation_started': {
+        const { target, caller } = message.payload as {
+          target: string
+          caller: string
+          thread_id: string
+          tool_call_id: string
+        }
+        // Mark the target PO as delegated — it's now working on behalf of caller
+        setPromptObject(target, { status: 'thinking', delegated_by: caller })
+        break
+      }
+
+      case 'po_delegation_completed': {
+        const { target } = message.payload as {
+          target: string
+          caller: string
+          thread_id: string
+          tool_call_id: string
+        }
+        // Delegation finished — target PO returns to idle
+        setPromptObject(target, { status: 'idle', delegated_by: null })
+        break
+      }
+
+      case 'session_updated': {
+        const { target, session_id, messages } = message.payload as {
+          target: string
+          session_id: string
+          messages: Message[]
+        }
+        updateSessionMessages(target, session_id, messages)
+        break
+      }
+
+      case 'thread_created': {
+        const { target, thread_id, thread_type } = message.payload as {
+          target: string
+          thread_id: string
+          name: string | null
+          thread_type: ThreadType
+        }
+        console.log('Thread created:', target, thread_id, thread_type)
+        // IMMEDIATELY switch to the new thread so user sees their message
+        // This ensures session_updated messages for this thread are displayed
+        switchPOSession(target, thread_id)
+        break
+      }
+
+      case 'thread_tree': {
+        // Thread tree response - could be used for navigation
+        console.log('Thread tree received:', message.payload)
+        break
+      }
+
+      case 'llm_config':
+        setLLMConfig(message.payload as LLMConfig)
+        break
+
+      case 'llm_switched': {
+        const { provider, model } = message.payload as {
+          provider: string
+          model: string
+        }
+        updateCurrentLLM(provider, model)
+        break
+      }
+
+      case 'session_usage': {
+        setUsageData(message.payload as Record<string, unknown>)
+        break
+      }
+
+      case 'thread_export': {
+        const { content, format, session_id } = message.payload as { content: string; format: string; session_id: string }
+        const mimeType = format === 'json' ? 'application/json' : 'text/markdown'
+        const ext = format === 'json' ? 'json' : 'md'
+        const blob = new Blob([content], { type: mimeType })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `${session_id}.${ext}`
+        a.click()
+        URL.revokeObjectURL(url)
+        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 'error': {
+        const { message: errorMsg } = message.payload as { message: string }
+        console.error('Server error:', errorMsg)
+        break
+      }
+
+      case 'pong':
+        // Heartbeat response, ignore
+        break
+
+      default:
+        console.log('Unknown message type:', message.type)
+    }
+  }
+
   const connect = useCallback(() => {
+    // Don't reconnect if we've been disposed (component unmounted)
+    if (disposed.current) return
+
+    // Close any existing connection before creating a new one
+    // to prevent duplicate connections racing each other
+    if (ws.current) {
+      // Remove handlers first so the close doesn't trigger another reconnect
+      ws.current.onclose = null
+      ws.current.onerror = null
+      ws.current.onmessage = null
+      ws.current.onopen = null
+      if (ws.current.readyState === WebSocket.OPEN || ws.current.readyState === WebSocket.CONNECTING) {
+        ws.current.close()
+      }
+      ws.current = null
+    }
+
     // Determine WebSocket URL
     // In dev mode (Vite on 5173), connect directly to Ruby server on 3000
     // In production, connect to same host
@@ -49,9 +285,12 @@ export function useWebSocket() {
     const wsUrl = `${protocol}//${host}`
 
     console.log('Connecting to WebSocket:', wsUrl)
-    ws.current = new WebSocket(wsUrl)
+    const socket = new WebSocket(wsUrl)
+    ws.current = socket
 
-    ws.current.onopen = () => {
+    socket.onopen = () => {
+      // Guard against stale handler from a replaced socket
+      if (ws.current !== socket) return
       console.log('WebSocket connected')
       setConnected(true)
 
@@ -62,219 +301,65 @@ export function useWebSocket() {
       }
     }
 
-    ws.current.onclose = () => {
+    socket.onclose = () => {
+      // Guard: if this socket was already replaced, ignore its close event.
+      // This prevents zombie onclose handlers from triggering reconnects
+      // after a fresh connection has already been established.
+      if (ws.current !== socket) return
+      if (disposed.current) return
+
       console.log('WebSocket disconnected')
-      setConnected(false)
+      // Reset PO statuses to idle and clear broken streams —
+      // prevents locked chat input and stale streaming indicators
+      resetOnDisconnect()
 
       // Attempt to reconnect after 2 seconds
+      if (reconnectTimeout.current) {
+        clearTimeout(reconnectTimeout.current)
+      }
       reconnectTimeout.current = window.setTimeout(() => {
         console.log('Attempting to reconnect...')
         connect()
       }, 2000)
     }
 
-    ws.current.onerror = (error) => {
+    socket.onerror = (error) => {
+      if (ws.current !== socket) return
       console.error('WebSocket error:', error)
     }
 
-    ws.current.onmessage = (event) => {
+    socket.onmessage = (event) => {
+      if (ws.current !== socket) return
       try {
         const message: WSMessage = JSON.parse(event.data)
-        handleMessage(message)
+        // Always call the latest handler via ref — no stale closures
+        handleMessageRef.current(message)
       } catch (error) {
         console.error('Failed to parse WebSocket message:', error)
       }
     }
-  }, [setConnected])
-
-  const handleMessage = useCallback(
-    (message: WSMessage) => {
-      switch (message.type) {
-        case 'environment':
-          setEnvironment(message.payload as Environment)
-          break
-
-        case 'po_state': {
-          const { name, state } = message.payload as {
-            name: string
-            state: Partial<PromptObject>
-          }
-          setPromptObject(name, state)
-          break
-        }
-
-        case 'po_response': {
-          const { target, content } = message.payload as {
-            target: string
-            content: string
-          }
-          setPendingResponse(target, content)
-          // Clear after a short delay to allow UI to update
-          setTimeout(() => clearPendingResponse(target), 100)
-          break
-        }
-
-        case 'stream': {
-          const { target, chunk } = message.payload as {
-            target: string
-            chunk: string
-          }
-          appendStreamChunk(target, chunk)
-          break
-        }
-
-        case 'stream_end': {
-          const { target } = message.payload as { target: string }
-          clearStream(target)
-          break
-        }
-
-        case 'bus_message':
-          addBusMessage(message.payload as BusMessage)
-          break
-
-        case 'notification':
-          addNotification(message.payload as Notification)
-          break
-
-        case 'notification_resolved': {
-          const { id } = message.payload as { id: string }
-          removeNotification(id)
-          break
-        }
-
-        // Live file updates
-        case 'po_added': {
-          const { name, state } = message.payload as {
-            name: string
-            state: Partial<PromptObject>
-          }
-          console.log('PO added:', name)
-          setPromptObject(name, state)
-          break
-        }
-
-        case 'po_modified': {
-          const { name, state } = message.payload as {
-            name: string
-            state: Partial<PromptObject>
-          }
-          console.log('PO modified:', name)
-          setPromptObject(name, state)
-          break
-        }
-
-        case 'po_removed': {
-          const { name } = message.payload as { name: string }
-          console.log('PO removed:', name)
-          removePromptObject(name)
-          break
-        }
-
-        case 'session_updated': {
-          const { target, session_id, messages } = message.payload as {
-            target: string
-            session_id: string
-            messages: Message[]
-          }
-          updateSessionMessages(target, session_id, messages)
-          break
-        }
-
-        case 'thread_created': {
-          const { target, thread_id, thread_type } = message.payload as {
-            target: string
-            thread_id: string
-            name: string | null
-            thread_type: ThreadType
-          }
-          console.log('Thread created:', target, thread_id, thread_type)
-          // IMMEDIATELY switch to the new thread so user sees their message
-          // This ensures session_updated messages for this thread are displayed
-          switchPOSession(target, thread_id)
-          break
-        }
-
-        case 'thread_tree': {
-          // Thread tree response - could be used for navigation
-          console.log('Thread tree received:', message.payload)
-          break
-        }
+  }, [setConnected, resetOnDisconnect])
 
-        case 'llm_config':
-          setLLMConfig(message.payload as LLMConfig)
-          break
-
-        case 'llm_switched': {
-          const { provider, model } = message.payload as {
-            provider: string
-            model: string
-          }
-          updateCurrentLLM(provider, model)
-          break
-        }
-
-        case 'session_usage': {
-          setUsageData(message.payload as Record<string, unknown>)
-          break
-        }
-
-        case 'thread_export': {
-          const { content, format, session_id } = message.payload as { content: string; format: string; session_id: string }
-          const mimeType = format === 'json' ? 'application/json' : 'text/markdown'
-          const ext = format === 'json' ? 'json' : 'md'
-          const blob = new Blob([content], { type: mimeType })
-          const url = URL.createObjectURL(blob)
-          const a = document.createElement('a')
-          a.href = url
-          a.download = `${session_id}.${ext}`
-          a.click()
-          URL.revokeObjectURL(url)
-          break
-        }
-
-        case 'error': {
-          const { message: errorMsg } = message.payload as { message: string }
-          console.error('Server error:', errorMsg)
-          break
-        }
-
-        case 'pong':
-          // Heartbeat response, ignore
-          break
-
-        default:
-          console.log('Unknown message type:', message.type)
-      }
-    },
-    [
-      setEnvironment,
-      setPromptObject,
-      removePromptObject,
-      updateSessionMessages,
-      switchPOSession,
-      setPendingResponse,
-      clearPendingResponse,
-      appendStreamChunk,
-      clearStream,
-      addBusMessage,
-      addNotification,
-      removeNotification,
-      setLLMConfig,
-      updateCurrentLLM,
-      setUsageData,
-    ]
-  )
-
-  // Connect on mount
+  // Connect on mount, clean up on unmount
   useEffect(() => {
+    disposed.current = false
     connect()
 
     return () => {
+      disposed.current = true
       if (reconnectTimeout.current) {
         clearTimeout(reconnectTimeout.current)
+        reconnectTimeout.current = null
+      }
+      if (ws.current) {
+        // Remove handlers before closing to prevent zombie events
+        ws.current.onclose = null
+        ws.current.onerror = null
+        ws.current.onmessage = null
+        ws.current.onopen = null
+        ws.current.close()
+        ws.current = null
       }
-      ws.current?.close()
     }
   }, [connect])
 

data/frontend/src/index.css

@@ -5,6 +5,7 @@
 /* Base styles */
 html {
   color-scheme: dark;
+  font-size: 14px;
 }
 
 body {
@@ -13,8 +14,8 @@ body {
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -26,12 +27,77 @@ 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;
+}
+
+.resize-handle-h {
+  @apply h-1 cursor-row-resize hover:bg-po-accent/30 active:bg-po-accent/50 transition-colors;
+}
+
+/* Canvas CSS2DRenderer labels */
+.canvas-node-label {
+  text-align: center;
+  pointer-events: none;
+  user-select: none;
+}
+
+.canvas-node-name {
+  display: block;
+  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: #78726a;
+  font-size: 10px;
+  font-family: 'Geist Mono', 'IBM Plex Mono', monospace;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+}
+
+.canvas-node-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  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(212, 149, 42, 0.6);
+}
+
+.canvas-toolcall-label {
+  color: #3b9a6e;
+  font-size: 10px;
+  font-family: 'Geist Mono', 'IBM Plex Mono', monospace;
+  text-align: center;
+  pointer-events: none;
+  user-select: none;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+}

data/frontend/src/store/index.ts

@@ -13,6 +13,7 @@ interface Store {
   // Connection state
   connected: boolean
   setConnected: (connected: boolean) => void
+  resetOnDisconnect: () => void
 
   // Environment
   environment: Environment | null
@@ -32,12 +33,16 @@ interface Store {
   selectPO: (name: string | null) => void
   activeTab: 'chat' | 'sessions' | 'capabilities' | 'prompt'
   setActiveTab: (tab: Store['activeTab']) => void
+  currentView: 'dashboard' | 'canvas'
+  setCurrentView: (view: Store['currentView']) => void
 
   // Message Bus
   busMessages: BusMessage[]
   addBusMessage: (message: BusMessage) => void
   busOpen: boolean
   toggleBus: () => void
+  topPaneCollapsed: boolean
+  toggleTopPane: () => void
 
   // Notifications
   notifications: Notification[]
@@ -69,6 +74,20 @@ export const useStore = create<Store>((set) => ({
   // Connection
   connected: false,
   setConnected: (connected) => set({ connected }),
+  resetOnDisconnect: () =>
+    set((s) => {
+      // Reset all PO statuses to idle (server will re-send correct status on reconnect)
+      const resetPOs: Record<string, PromptObject> = {}
+      for (const [name, po] of Object.entries(s.promptObjects)) {
+        resetPOs[name] = po.status !== 'idle' ? { ...po, status: 'idle' } : po
+      }
+      return {
+        connected: false,
+        promptObjects: resetPOs,
+        streamingContent: {},   // Clear broken streams
+        pendingResponse: {},    // Clear stale pending responses
+      }
+    }),
 
   // Environment
   environment: null,
@@ -175,6 +194,8 @@ export const useStore = create<Store>((set) => ({
   selectPO: (name) => set({ selectedPO: name, activeTab: 'chat' }),
   activeTab: 'chat',
   setActiveTab: (activeTab) => set({ activeTab }),
+  currentView: 'dashboard',
+  setCurrentView: (currentView) => set({ currentView }),
 
   // Message Bus
   busMessages: [],
@@ -184,6 +205,8 @@ export const useStore = create<Store>((set) => ({
     })),
   busOpen: false,
   toggleBus: () => set((s) => ({ busOpen: !s.busOpen })),
+  topPaneCollapsed: false,
+  toggleTopPane: () => set((s) => ({ topPaneCollapsed: !s.topPaneCollapsed })),
 
   // Notifications
   notifications: [],

data/frontend/src/types/index.ts

@@ -62,6 +62,7 @@ export interface PromptObject {
   sessions: Session[]
   prompt?: string  // The markdown body/prompt
   config?: Record<string, unknown>  // The YAML frontmatter config
+  delegated_by?: string | null  // Name of the PO that called this one (set by delegation events)
 }
 
 export interface BusMessage {
@@ -109,6 +110,8 @@ export type WSMessageType =
   | 'po_added'
   | 'po_modified'
   | 'po_removed'
+  | 'po_delegation_started'
+  | 'po_delegation_completed'
   | 'stream'
   | 'stream_end'
   | 'bus_message'
@@ -123,6 +126,8 @@ export type WSMessageType =
   | 'llm_switched'
   | 'session_usage'
   | 'thread_export'
+  | 'prompt_updated'
+  | 'llm_error'
   | 'error'
   | 'pong'