prompt_objects 0.3.1 → 0.5.0

data/frontend/src/components/CapabilitiesPanel.tsx

@@ -1,141 +0,0 @@
-import { useState } from 'react'
-import type { PromptObject, CapabilityInfo } from '../types'
-
-interface CapabilitiesPanelProps {
-  po: PromptObject
-}
-
-export function CapabilitiesPanel({ po }: CapabilitiesPanelProps) {
-  const capabilities = po.capabilities || []
-  const universalCapabilities = po.universal_capabilities || []
-
-  return (
-    <div className="h-full overflow-auto p-4">
-      {/* Declared Capabilities */}
-      <div className="mb-6">
-        <h3 className="text-lg font-medium text-white mb-3">
-          Declared Capabilities
-          <span className="ml-2 text-sm text-gray-500">({capabilities.length})</span>
-        </h3>
-
-        {capabilities.length === 0 ? (
-          <div className="text-gray-500 text-sm py-4 px-3 bg-po-bg rounded-lg border border-po-border">
-            No capabilities declared. This PO can only use universal capabilities.
-          </div>
-        ) : (
-          <div className="space-y-1">
-            {capabilities.map((cap) => (
-              <CapabilityItem key={cap.name} capability={cap} accent />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Universal Capabilities */}
-      <div>
-        <h3 className="text-lg font-medium text-white mb-3">
-          Universal Capabilities
-          <span className="ml-2 text-sm text-gray-500">({universalCapabilities.length})</span>
-        </h3>
-        <p className="text-xs text-gray-500 mb-3">
-          Available to all Prompt Objects automatically.
-        </p>
-
-        <div className="space-y-1">
-          {universalCapabilities.map((cap) => (
-            <CapabilityItem key={cap.name} capability={cap} />
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface CapabilityItemProps {
-  capability: CapabilityInfo
-  accent?: boolean  // Use accent color for name (for declared caps)
-}
-
-function CapabilityItem({ capability, accent }: CapabilityItemProps) {
-  const [expanded, setExpanded] = useState(false)
-
-  return (
-    <div className="bg-po-bg border border-po-border rounded-lg overflow-hidden">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="w-full px-3 py-2 flex items-center justify-between hover:bg-po-surface transition-colors"
-      >
-        <span className={`font-mono text-sm ${accent ? 'text-po-accent' : 'text-gray-300'}`}>
-          {capability.name}
-        </span>
-        <span className="text-gray-500 text-xs">{expanded ? '▼' : '▶'}</span>
-      </button>
-      {expanded && (
-        <div className="px-3 py-2 border-t border-po-border bg-po-surface space-y-3">
-          <p className="text-xs text-gray-400">{capability.description}</p>
-
-          {capability.parameters && (
-            <ParametersDisplay parameters={capability.parameters} />
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-interface ParametersDisplayProps {
-  parameters: Record<string, unknown>
-}
-
-function ParametersDisplay({ parameters }: ParametersDisplayProps) {
-  const properties = (parameters.properties as Record<string, unknown>) || {}
-  const required = (parameters.required as string[]) || []
-
-  const propertyNames = Object.keys(properties)
-
-  if (propertyNames.length === 0) {
-    return null
-  }
-
-  return (
-    <div>
-      <div className="text-xs text-gray-500 mb-2 font-medium">Parameters</div>
-      <div className="space-y-2">
-        {propertyNames.map((propName) => {
-          const prop = properties[propName] as Record<string, unknown>
-          const isRequired = required.includes(propName)
-
-          const propType = prop.type ? String(prop.type) : null
-          const propDescription = prop.description ? String(prop.description) : null
-          const propEnum = prop.enum as string[] | undefined
-
-          return (
-            <div key={propName} className="bg-po-bg rounded p-2">
-              <div className="flex items-center gap-2">
-                <span className="font-mono text-xs text-po-accent">{propName}</span>
-                {propType && (
-                  <span className="text-xs text-gray-600">({propType})</span>
-                )}
-                {isRequired && (
-                  <span className="text-xs text-red-400">required</span>
-                )}
-              </div>
-              {propDescription && (
-                <p className="text-xs text-gray-500 mt-1">{propDescription}</p>
-              )}
-              {propEnum && propEnum.length > 0 && (
-                <div className="mt-1 flex flex-wrap gap-1">
-                  {propEnum.map((val) => (
-                    <span key={val} className="text-xs bg-po-surface px-1.5 py-0.5 rounded text-gray-400">
-                      {val}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}

data/frontend/src/components/ChatPanel.tsx

@@ -1,288 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { useStore } from '../store'
-import { MarkdownMessage } from './MarkdownMessage'
-import type { PromptObject, Message, ToolCall } from '../types'
-
-interface ChatPanelProps {
-  po: PromptObject
-  sendMessage: (target: string, content: string, newThread?: boolean) => void
-}
-
-export function ChatPanel({ po, sendMessage }: ChatPanelProps) {
-  const [input, setInput] = useState('')
-  const [continueThread, setContinueThread] = useState(false)
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const { streamingContent } = useStore()
-
-  const messages = po.current_session?.messages || []
-  const streaming = streamingContent[po.name]
-  const hasMessages = messages.length > 0
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages, streaming])
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!input.trim()) return
-
-    const content = input.trim()
-
-    // Determine if we should create a new thread
-    const shouldCreateNewThread = !continueThread && hasMessages
-
-    // Send message to server - it will handle thread creation + message in one operation
-    // Server sends immediate session_updated with user message for instant feedback
-    sendMessage(po.name, content, shouldCreateNewThread)
-    setInput('')
-  }
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* Messages */}
-      <div className="flex-1 overflow-auto p-4 space-y-4">
-        {messages.length === 0 && !streaming && (
-          <div className="h-full flex items-center justify-center text-gray-500">
-            <div className="text-center">
-              <div className="text-2xl mb-2">💬</div>
-              <div>Start a conversation with {po.name}</div>
-            </div>
-          </div>
-        )}
-
-        {messages.map((message, index) => (
-          <MessageBubble key={index} message={message} />
-        ))}
-
-        {/* Streaming content */}
-        {streaming && (
-          <div className="flex gap-3">
-            <div className="w-8 h-8 rounded-full bg-po-accent flex items-center justify-center text-white text-sm font-medium flex-shrink-0">
-              AI
-            </div>
-            <div className="flex-1 bg-po-surface rounded-lg p-3 text-gray-200">
-              <MarkdownMessage content={streaming} />
-              <span className="inline-block w-2 h-4 bg-po-accent animate-pulse ml-1" />
-            </div>
-          </div>
-        )}
-
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <form onSubmit={handleSubmit} className="border-t border-po-border p-4">
-        <div className="flex gap-3">
-          <input
-            type="text"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder={`Message ${po.name}...`}
-            className="flex-1 bg-po-surface border border-po-border rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-po-accent"
-            disabled={po.status !== 'idle'}
-          />
-          <button
-            type="submit"
-            disabled={!input.trim() || po.status !== 'idle'}
-            className="px-4 py-2 bg-po-accent text-white rounded-lg font-medium hover:bg-po-accent/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            Send
-          </button>
-        </div>
-
-        {/* Thread toggle - only show when there are existing messages */}
-        {hasMessages && (
-          <div className="flex items-center gap-3 mt-2 text-xs">
-            <button
-              type="button"
-              onClick={() => setContinueThread(false)}
-              className={`px-2 py-1 rounded transition-colors ${
-                !continueThread
-                  ? 'bg-po-accent/20 text-po-accent border border-po-accent'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              New thread
-            </button>
-            <button
-              type="button"
-              onClick={() => setContinueThread(true)}
-              className={`px-2 py-1 rounded transition-colors ${
-                continueThread
-                  ? 'bg-po-accent/20 text-po-accent border border-po-accent'
-                  : 'text-gray-400 hover:text-white'
-              }`}
-            >
-              Continue thread
-            </button>
-            <span className="text-gray-500">
-              {continueThread
-                ? 'Will add to current conversation'
-                : 'Will start a fresh conversation'}
-            </span>
-          </div>
-        )}
-      </form>
-    </div>
-  )
-}
-
-function MessageBubble({ message }: { message: Message }) {
-  const isUser = message.role === 'user'
-  const isAssistant = message.role === 'assistant'
-  const isTool = message.role === 'tool'
-
-  if (isTool) {
-    // Tool messages contain results from tool calls
-    const results = message.results || []
-    if (results.length === 0) return null
-
-    return (
-      <div className="space-y-2 ml-11">
-        {results.map((result, idx) => (
-          <ToolResultDisplay key={result.tool_call_id || idx} result={result} />
-        ))}
-      </div>
-    )
-  }
-
-  return (
-    <div className={`flex gap-3 ${isUser ? 'flex-row-reverse' : ''}`}>
-      <div
-        className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0 ${
-          isUser ? 'bg-po-border text-white' : 'bg-po-accent text-white'
-        }`}
-      >
-        {isUser ? 'You' : 'AI'}
-      </div>
-      <div
-        className={`flex-1 max-w-[80%] rounded-lg p-3 ${
-          isUser
-            ? 'bg-po-accent text-white'
-            : 'bg-po-surface text-gray-200'
-        }`}
-      >
-        {message.content && (
-          isAssistant ? (
-            <MarkdownMessage content={message.content} />
-          ) : (
-            <div className="whitespace-pre-wrap">{message.content}</div>
-          )
-        )}
-
-        {/* Tool calls */}
-        {isAssistant && message.tool_calls && message.tool_calls.length > 0 && (
-          <div className="mt-2 space-y-2">
-            {message.tool_calls.map((tc) => (
-              <ToolCallDisplay key={tc.id} toolCall={tc} />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function ToolCallDisplay({ toolCall }: { toolCall: ToolCall }) {
-  const [expanded, setExpanded] = useState(false)
-  const { notifications } = useStore()
-
-  // Special display for ask_human
-  if (toolCall.name === 'ask_human') {
-    const question = toolCall.arguments.question as string
-    const options = toolCall.arguments.options as string[] | undefined
-
-    // Check if there's a pending notification for this (by matching question)
-    const isPending = notifications.some((n) => n.message === question)
-
-    return (
-      <div className="bg-po-warning/10 border border-po-warning/30 rounded-lg p-3">
-        <div className="flex items-center gap-2 mb-2">
-          <span className="text-po-warning text-sm font-medium">
-            Waiting for human input
-          </span>
-          {isPending ? (
-            <span className="text-xs bg-po-warning text-black px-2 py-0.5 rounded animate-pulse">
-              PENDING
-            </span>
-          ) : (
-            <span className="text-xs bg-green-600 text-white px-2 py-0.5 rounded">
-              RESOLVED
-            </span>
-          )}
-        </div>
-        <p className="text-gray-200 text-sm mb-2">{question}</p>
-        {options && options.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {options.map((opt, i) => (
-              <span
-                key={i}
-                className="text-xs bg-po-bg px-2 py-1 rounded text-gray-400"
-              >
-                {opt}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  // Default display for other tool calls - expandable
-  return (
-    <div className="text-xs bg-po-bg/50 rounded overflow-hidden">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="w-full px-2 py-1 text-left font-mono flex items-center gap-1 hover:bg-po-bg/70 transition-colors"
-      >
-        <span className="text-gray-500">{expanded ? '▼' : '▶'}</span>
-        <span className="text-po-accent">{toolCall.name}</span>
-        <span className="text-gray-500">
-          ({Object.keys(toolCall.arguments).length} args)
-        </span>
-      </button>
-      {expanded && (
-        <div className="px-2 pb-2 border-t border-po-border/50">
-          <pre className="text-gray-400 whitespace-pre-wrap break-all mt-1 text-[10px] leading-relaxed">
-            {JSON.stringify(toolCall.arguments, null, 2)}
-          </pre>
-        </div>
-      )}
-    </div>
-  )
-}
-
-function ToolResultDisplay({ result }: { result: { tool_call_id: string; name?: string; content: string } }) {
-  const [expanded, setExpanded] = useState(false)
-  const content = result.content || ''
-  const truncatedContent = content.slice(0, 200)
-  const isTruncated = content.length > 200
-
-  return (
-    <div className="text-xs bg-po-surface/50 border border-po-border/30 rounded overflow-hidden">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="w-full px-2 py-1 text-left font-mono flex items-center gap-1 hover:bg-po-surface transition-colors"
-      >
-        <span className="text-gray-500">{expanded ? '▼' : '▶'}</span>
-        <span className="text-gray-400">↳ Result</span>
-        {result.name && <span className="text-po-accent/70">from {result.name}</span>}
-      </button>
-      {expanded && (
-        <div className="px-2 pb-2 border-t border-po-border/30">
-          <pre className="text-gray-400 whitespace-pre-wrap break-all mt-1 text-[10px] leading-relaxed">
-            {content}
-          </pre>
-        </div>
-      )}
-      {!expanded && (
-        <div className="px-2 pb-1 text-gray-500">
-          <span className="whitespace-pre-wrap break-all">
-            {truncatedContent}
-            {isTruncated && '...'}
-          </span>
-        </div>
-      )}
-    </div>
-  )
-}

data/frontend/src/components/Dashboard.tsx

@@ -1,83 +0,0 @@
-import { usePromptObjects, useStore, usePONotifications } from '../store'
-import { POCard } from './POCard'
-import type { PromptObject } from '../types'
-
-interface DashboardProps {
-  compact?: boolean
-}
-
-export function Dashboard({ compact = false }: DashboardProps) {
-  const promptObjects = usePromptObjects()
-
-  if (promptObjects.length === 0) {
-    return (
-      <div className="h-full flex items-center justify-center text-gray-500">
-        <div className="text-center">
-          <div className="text-4xl mb-4">🔮</div>
-          <div className="text-lg">No Prompt Objects loaded</div>
-          <div className="text-sm mt-2">
-            Waiting for environment to connect...
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // Compact mode: simple list for sidebar
-  if (compact) {
-    return (
-      <div className="p-2 space-y-1">
-        {promptObjects.map((po) => (
-          <CompactPOItem key={po.name} po={po} />
-        ))}
-      </div>
-    )
-  }
-
-  // Full dashboard view
-  return (
-    <div className="h-full overflow-auto p-6">
-      <h1 className="text-2xl font-semibold text-white mb-6">
-        Prompt Objects
-      </h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-        {promptObjects.map((po) => (
-          <POCard key={po.name} po={po} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function CompactPOItem({ po }: { po: PromptObject }) {
-  const { selectPO, selectedPO } = useStore()
-  const notifications = usePONotifications(po.name)
-  const isSelected = selectedPO === po.name
-
-  const statusColors = {
-    idle: 'bg-gray-500',
-    thinking: 'bg-po-accent animate-pulse',
-    calling_tool: 'bg-po-warning animate-pulse',
-  }
-
-  return (
-    <button
-      onClick={() => selectPO(po.name)}
-      className={`w-full text-left px-3 py-2 rounded transition-colors flex items-center gap-2 ${
-        isSelected
-          ? 'bg-po-accent/20 border border-po-accent'
-          : 'hover:bg-po-bg border border-transparent'
-      }`}
-    >
-      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${statusColors[po.status]}`} />
-      <span className={`flex-1 truncate text-sm ${isSelected ? 'text-white' : 'text-gray-300'}`}>
-        {po.name}
-      </span>
-      {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>
-      )}
-    </button>
-  )
-}

data/frontend/src/components/Header.tsx

@@ -1,141 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { useStore, useNotificationCount } from '../store'
-import { ModelSelector } from './ModelSelector'
-
-interface Props {
-  switchLLM: (provider: string, model?: string) => void
-}
-
-export function Header({ switchLLM }: Props) {
-  const { connected, environment, selectedPO, selectPO, toggleBus, busOpen, notifications } =
-    useStore()
-  const notificationCount = useNotificationCount()
-  const [showNotifications, setShowNotifications] = useState(false)
-  const [animate, setAnimate] = useState(false)
-  const prevCount = useRef(notificationCount)
-
-  // Animate badge when count increases
-  useEffect(() => {
-    if (notificationCount > prevCount.current) {
-      setAnimate(true)
-      const timer = setTimeout(() => setAnimate(false), 500)
-      return () => clearTimeout(timer)
-    }
-    prevCount.current = notificationCount
-  }, [notificationCount])
-
-  return (
-    <header className="h-14 bg-po-surface border-b border-po-border flex items-center px-4 gap-4">
-      {/* Logo / Title */}
-      <button
-        onClick={() => selectPO(null)}
-        className="text-lg font-semibold text-white hover:text-po-accent transition-colors"
-      >
-        PromptObjects
-      </button>
-
-      {/* Environment info */}
-      {environment && (
-        <div className="text-sm text-gray-400">
-          <span className="text-gray-500">/</span>
-          <span className="ml-2">{environment.name}</span>
-          <span className="ml-3 text-gray-500">
-            {environment.po_count} POs, {environment.primitive_count} primitives
-          </span>
-        </div>
-      )}
-
-      {/* Breadcrumb for selected PO */}
-      {selectedPO && (
-        <div className="text-sm text-gray-400">
-          <span className="text-gray-500">/</span>
-          <span className="ml-2 text-po-accent">{selectedPO}</span>
-        </div>
-      )}
-
-      <div className="flex-1" />
-
-      {/* Model selector */}
-      <ModelSelector switchLLM={switchLLM} />
-
-      {/* Connection status */}
-      <div className="flex items-center gap-2 text-sm">
-        <div
-          className={`w-2 h-2 rounded-full ${
-            connected ? 'bg-green-500' : 'bg-red-500'
-          }`}
-        />
-        <span className="text-gray-400">
-          {connected ? 'Connected' : 'Disconnected'}
-        </span>
-      </div>
-
-      {/* Notification bell with badge */}
-      <div className="relative">
-        <button
-          onClick={() => setShowNotifications(!showNotifications)}
-          className={`relative p-2 rounded transition-colors ${
-            notificationCount > 0
-              ? 'text-po-warning hover:bg-po-warning/20'
-              : 'text-gray-400 hover:text-white hover:bg-po-border'
-          }`}
-          title={notificationCount > 0 ? `${notificationCount} pending requests` : 'No notifications'}
-        >
-          {/* Bell icon */}
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-          </svg>
-          {/* Badge */}
-          {notificationCount > 0 && (
-            <span
-              className={`absolute -top-1 -right-1 bg-po-warning text-black text-xs font-bold w-5 h-5 flex items-center justify-center rounded-full ${
-                animate ? 'animate-bounce' : ''
-              }`}
-            >
-              {notificationCount}
-            </span>
-          )}
-        </button>
-
-        {/* Dropdown with notification summaries */}
-        {showNotifications && notifications.length > 0 && (
-          <div className="absolute right-0 top-full mt-2 w-80 bg-po-surface border border-po-border rounded-lg shadow-xl z-50">
-            <div className="p-3 border-b border-po-border">
-              <h3 className="font-medium text-white">Pending Requests</h3>
-            </div>
-            <div className="max-h-64 overflow-auto">
-              {notifications.map((n) => (
-                <div key={n.id} className="p-3 border-b border-po-border last:border-0 hover:bg-po-bg">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="text-xs bg-po-warning text-black px-1.5 py-0.5 rounded font-medium">
-                      {n.type}
-                    </span>
-                    <span className="text-xs text-po-accent">{n.po_name}</span>
-                  </div>
-                  <p className="text-sm text-gray-300 line-clamp-2">{n.message}</p>
-                </div>
-              ))}
-            </div>
-            <div className="p-2 border-t border-po-border">
-              <p className="text-xs text-gray-500 text-center">
-                Respond in the notification panel below
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Message Bus toggle */}
-      <button
-        onClick={toggleBus}
-        className={`px-3 py-1.5 text-sm rounded transition-colors ${
-          busOpen
-            ? 'bg-po-accent text-white'
-            : 'bg-po-border text-gray-300 hover:bg-po-accent/50'
-        }`}
-      >
-        Bus
-      </button>
-    </header>
-  )
-}