prompt_objects 0.1.0

data/frontend/src/components/SessionsPanel.tsx

@@ -0,0 +1,174 @@
+import { useMemo } from 'react'
+import type { PromptObject, Session, ThreadType } from '../types'
+
+interface SessionsPanelProps {
+  po: PromptObject
+  createSession: (target: string, name?: string) => void
+  switchSession: (target: string, sessionId: string) => void
+  createThread?: (target: string, name?: string) => void
+}
+
+// Build a tree structure from flat sessions list
+interface ThreadNode {
+  session: Session
+  children: ThreadNode[]
+  depth: number
+}
+
+function buildThreadTree(sessions: Session[]): ThreadNode[] {
+  const sessionMap = new Map<string, Session>()
+  const childrenMap = new Map<string, Session[]>()
+
+  // Index all sessions
+  sessions.forEach((s) => {
+    sessionMap.set(s.id, s)
+    if (s.parent_session_id) {
+      const children = childrenMap.get(s.parent_session_id) || []
+      children.push(s)
+      childrenMap.set(s.parent_session_id, children)
+    }
+  })
+
+  // Build tree recursively
+  function buildNode(session: Session, depth: number): ThreadNode {
+    const children = childrenMap.get(session.id) || []
+    return {
+      session,
+      children: children
+        .sort((a, b) => (a.updated_at || '').localeCompare(b.updated_at || ''))
+        .map((child) => buildNode(child, depth + 1)),
+      depth,
+    }
+  }
+
+  // Get root sessions (no parent)
+  const roots = sessions
+    .filter((s) => !s.parent_session_id)
+    .sort((a, b) => (b.updated_at || '').localeCompare(a.updated_at || ''))
+
+  return roots.map((root) => buildNode(root, 0))
+}
+
+// Flatten tree for rendering
+function flattenTree(nodes: ThreadNode[]): ThreadNode[] {
+  const result: ThreadNode[] = []
+  function traverse(node: ThreadNode) {
+    result.push(node)
+    node.children.forEach(traverse)
+  }
+  nodes.forEach(traverse)
+  return result
+}
+
+// Thread type icons/badges
+function ThreadTypeBadge({ type }: { type: ThreadType }) {
+  switch (type) {
+    case 'delegation':
+      return (
+        <span className="text-xs bg-purple-600/30 text-purple-300 px-1.5 py-0.5 rounded">
+          ↳ delegation
+        </span>
+      )
+    case 'fork':
+      return (
+        <span className="text-xs bg-blue-600/30 text-blue-300 px-1.5 py-0.5 rounded">
+          ⑂ fork
+        </span>
+      )
+    case 'continuation':
+      return (
+        <span className="text-xs bg-gray-600/30 text-gray-300 px-1.5 py-0.5 rounded">
+          → continued
+        </span>
+      )
+    default:
+      return null
+  }
+}
+
+export function SessionsPanel({
+  po,
+  createSession,
+  switchSession,
+  createThread,
+}: SessionsPanelProps) {
+  const sessions = po.sessions || []
+  const currentSessionId = po.current_session?.id
+
+  // Build and flatten thread tree
+  const flatNodes = useMemo(() => {
+    const tree = buildThreadTree(sessions)
+    return flattenTree(tree)
+  }, [sessions])
+
+  const handleNewThread = () => {
+    if (createThread) {
+      createThread(po.name)
+    } else {
+      // Fallback to createSession
+      const name = prompt('Thread name (optional):')
+      createSession(po.name, name || undefined)
+    }
+  }
+
+  return (
+    <div className="h-full overflow-auto p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-medium text-white">Threads</h3>
+        <button
+          onClick={handleNewThread}
+          className="px-3 py-1.5 bg-po-accent text-white text-sm rounded hover:bg-po-accent/80 transition-colors"
+        >
+          + New Thread
+        </button>
+      </div>
+
+      {flatNodes.length === 0 ? (
+        <div className="text-gray-500 text-center py-8">
+          No threads yet. Start a conversation to create one.
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {flatNodes.map(({ session, depth }) => (
+            <button
+              key={session.id}
+              onClick={() => switchSession(po.name, session.id)}
+              className={`w-full text-left p-3 rounded-lg border transition-colors ${
+                session.id === currentSessionId
+                  ? 'bg-po-accent/20 border-po-accent'
+                  : 'bg-po-surface border-po-border hover:border-po-accent/50'
+              }`}
+              style={{ marginLeft: `${depth * 16}px`, width: `calc(100% - ${depth * 16}px)` }}
+            >
+              <div className="flex items-center gap-2 mb-1">
+                {depth > 0 && (
+                  <span className="text-gray-500 text-xs">↳</span>
+                )}
+                <span className="font-medium text-white truncate flex-1">
+                  {session.name || `Thread ${session.id.slice(0, 8)}`}
+                </span>
+                <ThreadTypeBadge type={session.thread_type} />
+                {session.id === currentSessionId && (
+                  <span className="text-xs bg-po-accent text-white px-2 py-0.5 rounded flex-shrink-0">
+                    Active
+                  </span>
+                )}
+              </div>
+              <div className="text-sm text-gray-400 flex items-center gap-2">
+                <span>{session.message_count} messages</span>
+                {session.parent_po && (
+                  <span className="text-purple-400">from {session.parent_po}</span>
+                )}
+                {session.updated_at && (
+                  <span className="ml-auto">
+                    {new Date(session.updated_at).toLocaleDateString()}
+                  </span>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

data/frontend/src/components/ThreadsSidebar.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from 'react'
+import type { PromptObject, Session, ThreadType } from '../types'
+
+interface ThreadsSidebarProps {
+  po: PromptObject
+  switchSession: (target: string, sessionId: string) => void
+  createThread: (target: string) => void
+}
+
+// Build a flat list with depth info
+interface ThreadItem {
+  session: Session
+  depth: number
+}
+
+function buildThreadList(sessions: Session[]): ThreadItem[] {
+  const childrenMap = new Map<string, Session[]>()
+
+  // Index children
+  sessions.forEach((s) => {
+    if (s.parent_session_id) {
+      const children = childrenMap.get(s.parent_session_id) || []
+      children.push(s)
+      childrenMap.set(s.parent_session_id, children)
+    }
+  })
+
+  // Build flat list with depth
+  const result: ThreadItem[] = []
+
+  function traverse(session: Session, depth: number) {
+    result.push({ session, depth })
+    const children = childrenMap.get(session.id) || []
+    children
+      .sort((a, b) => (a.updated_at || '').localeCompare(b.updated_at || ''))
+      .forEach((child) => traverse(child, depth + 1))
+  }
+
+  // Get roots and traverse
+  const roots = sessions
+    .filter((s) => !s.parent_session_id)
+    .sort((a, b) => (b.updated_at || '').localeCompare(a.updated_at || ''))
+
+  roots.forEach((root) => traverse(root, 0))
+
+  return result
+}
+
+function ThreadTypeIcon({ type }: { type: ThreadType }) {
+  switch (type) {
+    case 'delegation':
+      return <span className="text-purple-400" title="Delegation">↳</span>
+    case 'fork':
+      return <span className="text-blue-400" title="Fork">⑂</span>
+    case 'continuation':
+      return <span className="text-gray-400" title="Continuation">→</span>
+    default:
+      return null
+  }
+}
+
+export function ThreadsSidebar({ po, switchSession, createThread }: ThreadsSidebarProps) {
+  const sessions = po.sessions || []
+  const currentSessionId = po.current_session?.id
+
+  const threadList = useMemo(() => buildThreadList(sessions), [sessions])
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-3 border-b border-po-border flex items-center justify-between">
+        <h2 className="text-sm font-medium text-gray-400">Threads</h2>
+        <button
+          onClick={() => createThread(po.name)}
+          className="text-xs text-gray-500 hover:text-po-accent transition-colors"
+          title="New thread"
+        >
+          + New
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-2 space-y-1">
+        {threadList.length === 0 ? (
+          <div className="text-xs text-gray-500 text-center py-4">
+            No threads yet
+          </div>
+        ) : (
+          threadList.map(({ session, depth }) => (
+            <button
+              key={session.id}
+              onClick={() => switchSession(po.name, session.id)}
+              className={`w-full text-left p-2 rounded text-xs transition-colors ${
+                session.id === currentSessionId
+                  ? 'bg-po-accent/20 border border-po-accent'
+                  : 'hover:bg-po-surface border border-transparent'
+              }`}
+              style={{ paddingLeft: `${8 + depth * 12}px` }}
+            >
+              <div className="flex items-center gap-1">
+                {depth > 0 && <ThreadTypeIcon type={session.thread_type} />}
+                <span className={`truncate flex-1 ${session.id === currentSessionId ? 'text-white' : 'text-gray-300'}`}>
+                  {session.name || `Thread ${session.id.slice(0, 6)}`}
+                </span>
+                {session.id === currentSessionId && (
+                  <span className="w-1.5 h-1.5 rounded-full bg-po-accent flex-shrink-0" />
+                )}
+              </div>
+              <div className="text-gray-500 text-[10px] mt-0.5">
+                {session.message_count} msgs
+                {session.parent_po && (
+                  <span className="text-purple-400 ml-1">from {session.parent_po}</span>
+                )}
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

data/frontend/src/components/index.ts

@@ -0,0 +1,11 @@
+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 { NotificationPanel } from './NotificationPanel'
+export { MarkdownMessage } from './MarkdownMessage'
+export { PromptPanel } from './PromptPanel'

data/frontend/src/hooks/useWebSocket.ts

@@ -0,0 +1,363 @@
+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 {
+    setConnected,
+    setEnvironment,
+    setPromptObject,
+    removePromptObject,
+    updateSessionMessages,
+    switchPOSession,
+    addBusMessage,
+    addNotification,
+    removeNotification,
+    appendStreamChunk,
+    clearStream,
+    setPendingResponse,
+    clearPendingResponse,
+    setLLMConfig,
+    updateCurrentLLM,
+  } = useStore()
+
+  const connect = useCallback(() => {
+    // 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)
+    ws.current = new WebSocket(wsUrl)
+
+    ws.current.onopen = () => {
+      console.log('WebSocket connected')
+      setConnected(true)
+
+      // Clear any pending reconnect
+      if (reconnectTimeout.current) {
+        clearTimeout(reconnectTimeout.current)
+        reconnectTimeout.current = null
+      }
+    }
+
+    ws.current.onclose = () => {
+      console.log('WebSocket disconnected')
+      setConnected(false)
+
+      // Attempt to reconnect after 2 seconds
+      reconnectTimeout.current = window.setTimeout(() => {
+        console.log('Attempting to reconnect...')
+        connect()
+      }, 2000)
+    }
+
+    ws.current.onerror = (error) => {
+      console.error('WebSocket error:', error)
+    }
+
+    ws.current.onmessage = (event) => {
+      try {
+        const message: WSMessage = JSON.parse(event.data)
+        handleMessage(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
+        }
+
+        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 '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,
+    ]
+  )
+
+  // Connect on mount
+  useEffect(() => {
+    connect()
+
+    return () => {
+      if (reconnectTimeout.current) {
+        clearTimeout(reconnectTimeout.current)
+      }
+      ws.current?.close()
+    }
+  }, [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,
+      })
+    )
+  }, [])
+
+  return {
+    sendMessage,
+    respondToNotification,
+    createSession,
+    switchSession,
+    switchLLM,
+    createThread,
+  }
+}

data/frontend/src/index.css

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Base styles */
+html {
+  color-scheme: dark;
+}
+
+body {
+  @apply antialiased;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-po-bg;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-po-border rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-po-accent;
+}
+
+/* Custom utilities */
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+  }
+}