prompt_objects 0.5.0 → 0.7.0

data/frontend/src/hooks/useWebSocket.ts

@@ -1,517 +0,0 @@
-import { useEffect, useRef, useCallback } from 'react'
-import { useStore } from '../store'
-import type {
-  WSMessage,
-  PromptObject,
-  BusMessage,
-  Notification,
-  Environment,
-  Message,
-  LLMConfig,
-  SendMessagePayload,
-  RespondToNotificationPayload,
-  CreateSessionPayload,
-  SwitchSessionPayload,
-  CreateThreadPayload,
-  ThreadType,
-} from '../types'
-
-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,
-    updateSessionMessages,
-    switchPOSession,
-    addBusMessage,
-    addNotification,
-    removeNotification,
-    appendStreamChunk,
-    clearStream,
-    setPendingResponse,
-    clearPendingResponse,
-    setLLMConfig,
-    updateCurrentLLM,
-    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
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-    const isDev = window.location.port === '5173'
-    const host = isDev ? 'localhost:3000' : window.location.host
-    const wsUrl = `${protocol}//${host}`
-
-    console.log('Connecting to WebSocket:', wsUrl)
-    const socket = new WebSocket(wsUrl)
-    ws.current = socket
-
-    socket.onopen = () => {
-      // Guard against stale handler from a replaced socket
-      if (ws.current !== socket) return
-      console.log('WebSocket connected')
-      setConnected(true)
-
-      // Clear any pending reconnect
-      if (reconnectTimeout.current) {
-        clearTimeout(reconnectTimeout.current)
-        reconnectTimeout.current = null
-      }
-    }
-
-    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')
-      // 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)
-    }
-
-    socket.onerror = (error) => {
-      if (ws.current !== socket) return
-      console.error('WebSocket error:', error)
-    }
-
-    socket.onmessage = (event) => {
-      if (ws.current !== socket) return
-      try {
-        const message: WSMessage = JSON.parse(event.data)
-        // Always call the latest handler via ref — no stale closures
-        handleMessageRef.current(message)
-      } catch (error) {
-        console.error('Failed to parse WebSocket message:', error)
-      }
-    }
-  }, [setConnected, resetOnDisconnect])
-
-  // 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
-      }
-    }
-  }, [connect])
-
-  // Send message to a PO
-  const sendMessage = useCallback((target: string, content: string, newThread?: boolean) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    const payload: SendMessagePayload = { target, content, new_thread: newThread }
-    ws.current.send(
-      JSON.stringify({
-        type: 'send_message',
-        payload,
-      })
-    )
-  }, [])
-
-  // Respond to a notification
-  const respondToNotification = useCallback((id: string, response: string) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    const payload: RespondToNotificationPayload = { id, response }
-    ws.current.send(
-      JSON.stringify({
-        type: 'respond_to_notification',
-        payload,
-      })
-    )
-  }, [])
-
-  // Create a new session
-  const createSession = useCallback((target: string, name?: string) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    const payload: CreateSessionPayload = { target, name }
-    ws.current.send(
-      JSON.stringify({
-        type: 'create_session',
-        payload,
-      })
-    )
-  }, [])
-
-  // Switch to a different session
-  const switchSession = useCallback((target: string, sessionId: string) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    const payload: SwitchSessionPayload = { target, session_id: sessionId }
-    ws.current.send(
-      JSON.stringify({
-        type: 'switch_session',
-        payload,
-      })
-    )
-  }, [])
-
-  // Switch LLM provider/model
-  const switchLLM = useCallback((provider: string, model?: string) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    ws.current.send(
-      JSON.stringify({
-        type: 'switch_llm',
-        payload: { provider, model },
-      })
-    )
-  }, [])
-
-  // Create a new thread (defaults to root thread)
-  const createThread = useCallback((target: string, name?: string, threadType?: ThreadType) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    const payload: CreateThreadPayload = { target, name, thread_type: threadType }
-    ws.current.send(
-      JSON.stringify({
-        type: 'create_thread',
-        payload,
-      })
-    )
-  }, [])
-
-  // Request usage data for a session
-  const requestUsage = useCallback((sessionId: string, includeTree?: boolean) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    ws.current.send(
-      JSON.stringify({
-        type: 'get_session_usage',
-        payload: { session_id: sessionId, include_tree: includeTree || false },
-      })
-    )
-  }, [])
-
-  // Export a thread as markdown or JSON
-  const exportThread = useCallback((sessionId: string, format?: string) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    ws.current.send(
-      JSON.stringify({
-        type: 'export_thread',
-        payload: { session_id: sessionId, format: format || 'markdown' },
-      })
-    )
-  }, [])
-
-  // Update a PO's prompt (markdown body)
-  const updatePrompt = useCallback((target: string, prompt: string) => {
-    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket not connected')
-      return
-    }
-
-    ws.current.send(
-      JSON.stringify({
-        type: 'update_prompt',
-        payload: { target, prompt },
-      })
-    )
-  }, [])
-
-  return {
-    sendMessage,
-    respondToNotification,
-    createSession,
-    switchSession,
-    switchLLM,
-    createThread,
-    updatePrompt,
-    requestUsage,
-    exportThread,
-  }
-}

data/frontend/src/index.css

@@ -1,103 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Base styles */
-html {
-  color-scheme: dark;
-  font-size: 14px;
-}
-
-body {
-  @apply antialiased;
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  @apply bg-po-bg;
-}
-
-::-webkit-scrollbar-thumb {
-  @apply bg-po-border rounded-full;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  @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/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-import './index.css'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-)