prompt_objects 0.3.1 → 0.5.0

data/frontend/src/components/MessageBus.tsx

@@ -1,56 +0,0 @@
-import { useRef, useEffect } from 'react'
-import { useStore } from '../store'
-
-export function MessageBus() {
-  const { busMessages, toggleBus } = useStore()
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [busMessages])
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="flex items-center justify-between p-3 border-b border-po-border">
-        <h3 className="font-medium text-white">Message Bus</h3>
-        <button
-          onClick={toggleBus}
-          className="text-gray-400 hover:text-white transition-colors"
-        >
-          ✕
-        </button>
-      </div>
-
-      <div className="flex-1 overflow-auto p-3 space-y-2">
-        {busMessages.length === 0 ? (
-          <div className="text-gray-500 text-sm text-center py-4">
-            No messages yet
-          </div>
-        ) : (
-          busMessages.map((msg, index) => (
-            <div
-              key={index}
-              className="text-xs bg-po-bg rounded p-2 border border-po-border"
-            >
-              <div className="flex items-center gap-2 mb-1">
-                <span className="text-po-accent font-medium">{msg.from}</span>
-                <span className="text-gray-500">→</span>
-                <span className="text-po-warning font-medium">{msg.to}</span>
-                <span className="text-gray-600 ml-auto">
-                  {new Date(msg.timestamp).toLocaleTimeString()}
-                </span>
-              </div>
-              <div className="text-gray-300 break-words">
-                {(() => {
-                  const text = msg.summary || (typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content))
-                  return text.length > 200 ? text.slice(0, 200) + '...' : text
-                })()}
-              </div>
-            </div>
-          ))
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-    </div>
-  )
-}

data/frontend/src/components/POCard.tsx

@@ -1,56 +0,0 @@
-import { useStore, usePONotifications } from '../store'
-import type { PromptObject } from '../types'
-
-interface POCardProps {
-  po: PromptObject
-}
-
-export function POCard({ po }: POCardProps) {
-  const { selectPO } = useStore()
-  const notifications = usePONotifications(po.name)
-
-  const statusColors = {
-    idle: 'bg-gray-500',
-    thinking: 'bg-po-accent animate-pulse',
-    calling_tool: 'bg-po-warning animate-pulse',
-  }
-
-  const statusLabels = {
-    idle: 'Idle',
-    thinking: 'Thinking...',
-    calling_tool: 'Calling tool...',
-  }
-
-  return (
-    <button
-      onClick={() => selectPO(po.name)}
-      className="bg-po-surface border border-po-border rounded-lg p-4 text-left hover:border-po-accent transition-colors group"
-    >
-      <div className="flex items-start justify-between mb-2">
-        <h3 className="font-medium text-white group-hover:text-po-accent transition-colors">
-          {po.name}
-        </h3>
-        <div className="flex items-center gap-2">
-          {notifications.length > 0 && (
-            <span className="bg-po-warning text-black text-xs font-bold px-1.5 py-0.5 rounded-full">
-              {notifications.length}
-            </span>
-          )}
-          <div
-            className={`w-2 h-2 rounded-full ${statusColors[po.status]}`}
-            title={statusLabels[po.status]}
-          />
-        </div>
-      </div>
-
-      <p className="text-sm text-gray-400 line-clamp-2 mb-3">
-        {po.description || 'No description'}
-      </p>
-
-      <div className="flex items-center justify-between text-xs text-gray-500">
-        <span>{po.capabilities?.length || 0} capabilities</span>
-        <span>{po.sessions?.length || 0} sessions</span>
-      </div>
-    </button>
-  )
-}

data/frontend/src/components/PODetail.tsx

@@ -1,124 +0,0 @@
-import { useStore, useSelectedPO, usePONotifications } from '../store'
-import { ChatPanel } from './ChatPanel'
-import { SessionsPanel } from './SessionsPanel'
-import { CapabilitiesPanel } from './CapabilitiesPanel'
-import { PromptPanel } from './PromptPanel'
-
-interface PODetailProps {
-  sendMessage: (target: string, content: string) => void
-  createSession: (target: string, name?: string) => void
-  switchSession: (target: string, sessionId: string) => void
-  createThread: (target: string, name?: string) => void
-  updatePrompt: (target: string, prompt: string) => void
-}
-
-export function PODetail({
-  sendMessage,
-  createSession,
-  switchSession,
-  createThread,
-  updatePrompt,
-}: PODetailProps) {
-  const { activeTab, setActiveTab, selectPO } = useStore()
-  const po = useSelectedPO()
-  const notifications = usePONotifications(po?.name || '')
-
-  if (!po) {
-    return (
-      <div className="h-full flex items-center justify-center text-gray-500">
-        Select a Prompt Object
-      </div>
-    )
-  }
-
-  const tabs = [
-    { id: 'chat' as const, label: 'Chat' },
-    { id: 'sessions' as const, label: `Threads (${po.sessions?.length || 0})` },
-    { id: 'capabilities' as const, label: `Capabilities (${po.capabilities?.length || 0})` },
-    { id: 'prompt' as const, label: 'Prompt' },
-  ]
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* PO Header */}
-      <div className="border-b border-po-border bg-po-surface px-4 py-3">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => selectPO(null)}
-              className="text-gray-400 hover:text-white transition-colors"
-            >
-              ← Back
-            </button>
-            <h2 className="text-lg font-semibold text-white">{po.name}</h2>
-            {notifications.length > 0 && (
-              <span className="bg-po-warning text-black text-xs font-bold px-2 py-0.5 rounded-full">
-                {notifications.length} pending
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-2 text-sm">
-            <StatusIndicator status={po.status} />
-          </div>
-        </div>
-        <p className="text-sm text-gray-400">{po.description}</p>
-      </div>
-
-      {/* Tabs */}
-      <div className="border-b border-po-border bg-po-surface px-4">
-        <div className="flex gap-1">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
-                activeTab === tab.id
-                  ? 'text-po-accent border-po-accent'
-                  : 'text-gray-400 border-transparent hover:text-white'
-              }`}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Tab content */}
-      <div className="flex-1 overflow-hidden">
-        {activeTab === 'chat' && (
-          <ChatPanel po={po} sendMessage={sendMessage} />
-        )}
-        {activeTab === 'sessions' && (
-          <SessionsPanel
-            po={po}
-            createSession={createSession}
-            switchSession={switchSession}
-            createThread={createThread}
-          />
-        )}
-        {activeTab === 'capabilities' && <CapabilitiesPanel po={po} />}
-        {activeTab === 'prompt' && (
-          <PromptPanel
-            po={po}
-            onSave={(prompt) => updatePrompt(po.name, prompt)}
-          />
-        )}
-      </div>
-    </div>
-  )
-}
-
-function StatusIndicator({ status }: { status: string }) {
-  const config = {
-    idle: { color: 'bg-gray-500', label: 'Idle' },
-    thinking: { color: 'bg-po-accent animate-pulse', label: 'Thinking...' },
-    calling_tool: { color: 'bg-po-warning animate-pulse', label: 'Calling tool...' },
-  }[status] || { color: 'bg-gray-500', label: status }
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className={`w-2 h-2 rounded-full ${config.color}`} />
-      <span className="text-gray-400">{config.label}</span>
-    </div>
-  )
-}

data/frontend/src/components/PromptPanel.tsx

@@ -1,156 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import type { PromptObject } from '../types'
-import { MarkdownMessage } from './MarkdownMessage'
-
-interface PromptPanelProps {
-  po: PromptObject
-  onSave?: (prompt: string) => void
-}
-
-export function PromptPanel({ po, onSave }: PromptPanelProps) {
-  const prompt = po.prompt || ''
-  const config = po.config || {}
-  const [isEditing, setIsEditing] = useState(false)
-  const [editedPrompt, setEditedPrompt] = useState(prompt)
-  const [saveStatus, setSaveStatus] = useState<'saved' | 'saving' | 'unsaved'>('saved')
-  const saveTimeoutRef = useRef<number | null>(null)
-
-  // Sync editedPrompt when po.prompt changes from server
-  useEffect(() => {
-    if (!isEditing) {
-      setEditedPrompt(prompt)
-    }
-  }, [prompt, isEditing])
-
-  // Debounced auto-save
-  const debouncedSave = useCallback((newPrompt: string) => {
-    if (saveTimeoutRef.current) {
-      clearTimeout(saveTimeoutRef.current)
-    }
-
-    setSaveStatus('unsaved')
-
-    saveTimeoutRef.current = window.setTimeout(() => {
-      if (onSave && newPrompt !== prompt) {
-        setSaveStatus('saving')
-        onSave(newPrompt)
-        // Assume save succeeded - server will broadcast update
-        setTimeout(() => setSaveStatus('saved'), 500)
-      } else {
-        setSaveStatus('saved')
-      }
-    }, 1000) // 1 second debounce
-  }, [onSave, prompt])
-
-  const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newPrompt = e.target.value
-    setEditedPrompt(newPrompt)
-    debouncedSave(newPrompt)
-  }
-
-  const handleStartEditing = () => {
-    setEditedPrompt(prompt)
-    setIsEditing(true)
-  }
-
-  const handleStopEditing = () => {
-    // Save any pending changes
-    if (saveTimeoutRef.current) {
-      clearTimeout(saveTimeoutRef.current)
-    }
-    if (editedPrompt !== prompt && onSave) {
-      onSave(editedPrompt)
-    }
-    setIsEditing(false)
-    setSaveStatus('saved')
-  }
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current)
-      }
-    }
-  }, [])
-
-  return (
-    <div className="h-full overflow-auto p-4">
-      {/* Config/Frontmatter */}
-      <div className="mb-6">
-        <h3 className="text-lg font-medium text-white mb-3">Configuration</h3>
-        <div className="bg-po-bg rounded-lg border border-po-border p-4">
-          <pre className="text-sm text-gray-300 font-mono whitespace-pre-wrap">
-            {JSON.stringify(config, null, 2)}
-          </pre>
-        </div>
-      </div>
-
-      {/* Prompt/Body */}
-      <div>
-        <div className="flex items-center justify-between mb-3">
-          <h3 className="text-lg font-medium text-white">Prompt</h3>
-          <div className="flex items-center gap-3">
-            {isEditing && (
-              <span className={`text-xs ${
-                saveStatus === 'saved' ? 'text-green-400' :
-                saveStatus === 'saving' ? 'text-yellow-400' :
-                'text-gray-400'
-              }`}>
-                {saveStatus === 'saved' ? 'Saved' :
-                 saveStatus === 'saving' ? 'Saving...' :
-                 'Unsaved changes'}
-              </span>
-            )}
-            <button
-              onClick={isEditing ? handleStopEditing : handleStartEditing}
-              className={`px-3 py-1 text-sm rounded transition-colors ${
-                isEditing
-                  ? 'bg-po-accent text-black hover:bg-po-accent/80'
-                  : 'bg-po-surface border border-po-border text-gray-300 hover:text-white hover:border-po-accent'
-              }`}
-            >
-              {isEditing ? 'Done' : 'Edit'}
-            </button>
-          </div>
-        </div>
-
-        <div className="bg-po-bg rounded-lg border border-po-border">
-          {isEditing ? (
-            <textarea
-              value={editedPrompt}
-              onChange={handlePromptChange}
-              className="w-full h-96 p-4 bg-transparent text-gray-200 font-mono text-sm resize-none focus:outline-none focus:ring-1 focus:ring-po-accent rounded-lg"
-              placeholder="Enter prompt markdown..."
-              spellCheck={false}
-            />
-          ) : (
-            <div className="p-4">
-              {prompt ? (
-                <div className="prose prose-invert max-w-none">
-                  <MarkdownMessage content={prompt} />
-                </div>
-              ) : (
-                <p className="text-gray-500 italic">No prompt defined. Click Edit to add one.</p>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Raw source toggle (only in view mode) */}
-      {!isEditing && (
-        <details className="mt-6">
-          <summary className="text-sm text-gray-400 cursor-pointer hover:text-white">
-            View raw source
-          </summary>
-          <div className="mt-2 bg-po-bg rounded-lg border border-po-border p-4">
-            <pre className="text-xs text-gray-400 font-mono whitespace-pre-wrap overflow-x-auto">
-              {prompt || '(empty)'}
-            </pre>
-          </div>
-        </details>
-      )}
-    </div>
-  )
-}

data/frontend/src/components/SessionsPanel.tsx

@@ -1,174 +0,0 @@
-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>
-  )
-}