prompt_objects 0.1.0

data/frontend/src/components/MarkdownMessage.tsx

@@ -0,0 +1,153 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { useState } from 'react'
+
+interface MarkdownMessageProps {
+  content: string
+  className?: string
+}
+
+export function MarkdownMessage({ content, className = '' }: MarkdownMessageProps) {
+  return (
+    <div className={`markdown-content ${className}`}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Code blocks with syntax highlighting
+          code({ className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '')
+            const language = match ? match[1] : ''
+            const codeString = String(children).replace(/\n$/, '')
+            const isBlock = codeString.includes('\n') || match
+
+            if (isBlock) {
+              return (
+                <CodeBlock language={language} code={codeString} />
+              )
+            }
+
+            return (
+              <code
+                className="bg-po-bg px-1.5 py-0.5 rounded text-po-accent font-mono text-sm"
+                {...props}
+              >
+                {children}
+              </code>
+            )
+          },
+          // Styled links
+          a({ href, children }) {
+            return (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-po-accent hover:underline"
+              >
+                {children}
+              </a>
+            )
+          },
+          // Styled paragraphs
+          p({ children }) {
+            return <p className="mb-3 last:mb-0">{children}</p>
+          },
+          // Styled lists
+          ul({ children }) {
+            return <ul className="list-disc list-inside mb-3 space-y-1">{children}</ul>
+          },
+          ol({ children }) {
+            return <ol className="list-decimal list-inside mb-3 space-y-1">{children}</ol>
+          },
+          // Styled headings
+          h1({ children }) {
+            return <h1 className="text-xl font-bold mb-2 mt-4 first:mt-0">{children}</h1>
+          },
+          h2({ children }) {
+            return <h2 className="text-lg font-bold mb-2 mt-3 first:mt-0">{children}</h2>
+          },
+          h3({ children }) {
+            return <h3 className="text-base font-bold mb-2 mt-2 first:mt-0">{children}</h3>
+          },
+          // Styled blockquotes
+          blockquote({ children }) {
+            return (
+              <blockquote className="border-l-4 border-po-accent pl-4 my-3 text-gray-400 italic">
+                {children}
+              </blockquote>
+            )
+          },
+          // Styled tables
+          table({ children }) {
+            return (
+              <div className="overflow-x-auto my-3">
+                <table className="min-w-full border border-po-border">{children}</table>
+              </div>
+            )
+          },
+          th({ children }) {
+            return (
+              <th className="border border-po-border bg-po-bg px-3 py-2 text-left font-medium">
+                {children}
+              </th>
+            )
+          },
+          td({ children }) {
+            return (
+              <td className="border border-po-border px-3 py-2">{children}</td>
+            )
+          },
+          // Horizontal rule
+          hr() {
+            return <hr className="border-po-border my-4" />
+          },
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}
+
+function CodeBlock({ language, code }: { language: string; code: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="relative group my-3">
+      {/* Language label and copy button */}
+      <div className="flex items-center justify-between bg-po-bg/80 px-3 py-1 rounded-t border border-b-0 border-po-border">
+        <span className="text-xs text-gray-500 font-mono">
+          {language || 'text'}
+        </span>
+        <button
+          onClick={handleCopy}
+          className="text-xs text-gray-400 hover:text-white transition-colors"
+        >
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+      {/* Code with syntax highlighting */}
+      <SyntaxHighlighter
+        style={oneDark}
+        language={language || 'text'}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          borderRadius: '0 0 0.375rem 0.375rem',
+          border: '1px solid rgb(55, 65, 81)',
+          borderTop: 'none',
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  )
+}

data/frontend/src/components/MessageBus.tsx

@@ -0,0 +1,55 @@
+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">
+                {msg.content.length > 200
+                  ? msg.content.slice(0, 200) + '...'
+                  : msg.content}
+              </div>
+            </div>
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+    </div>
+  )
+}

data/frontend/src/components/ModelSelector.tsx

@@ -0,0 +1,112 @@
+import { useState, useRef, useEffect } from 'react'
+import { useStore } from '../store'
+
+interface Props {
+  switchLLM: (provider: string, model?: string) => void
+}
+
+export function ModelSelector({ switchLLM }: Props) {
+  const { llmConfig } = useStore()
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  if (!llmConfig) return null
+
+  const handleSelectModel = (provider: string, model: string) => {
+    switchLLM(provider, model)
+    setIsOpen(false)
+  }
+
+  // Provider display names
+  const providerNames: Record<string, string> = {
+    openai: 'OpenAI',
+    anthropic: 'Anthropic',
+    gemini: 'Gemini',
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-1.5 text-sm bg-po-border rounded hover:bg-po-accent/50 transition-colors"
+      >
+        <span className="text-gray-400">
+          {providerNames[llmConfig.current_provider] || llmConfig.current_provider}
+        </span>
+        <span className="text-white font-medium">{llmConfig.current_model}</span>
+        <svg
+          className={`w-4 h-4 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-2 w-64 bg-po-surface border border-po-border rounded-lg shadow-xl z-50 overflow-hidden">
+          {llmConfig.providers.map((provider) => (
+            <div key={provider.name}>
+              <div className="px-3 py-2 bg-po-bg text-xs font-medium text-gray-400 uppercase tracking-wide flex items-center justify-between">
+                <span>{providerNames[provider.name] || provider.name}</span>
+                {!provider.available && (
+                  <span className="text-red-400 text-[10px] normal-case">No API Key</span>
+                )}
+              </div>
+              {provider.models.map((model) => {
+                const isSelected =
+                  provider.name === llmConfig.current_provider &&
+                  model === llmConfig.current_model
+                const isAvailable = provider.available
+                const isDefault = model === provider.default_model
+
+                return (
+                  <button
+                    key={`${provider.name}-${model}`}
+                    onClick={() => isAvailable && handleSelectModel(provider.name, model)}
+                    disabled={!isAvailable}
+                    className={`w-full px-3 py-2 text-left text-sm flex items-center justify-between transition-colors ${
+                      isSelected
+                        ? 'bg-po-accent/20 text-po-accent'
+                        : isAvailable
+                        ? 'text-gray-300 hover:bg-po-border'
+                        : 'text-gray-600 cursor-not-allowed'
+                    }`}
+                  >
+                    <span className="flex items-center gap-2">
+                      {model}
+                      {isDefault && (
+                        <span className="text-[10px] text-gray-500">(default)</span>
+                      )}
+                    </span>
+                    {isSelected && (
+                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

data/frontend/src/components/NotificationPanel.tsx

@@ -0,0 +1,134 @@
+import { useState } from 'react'
+import { useStore } from '../store'
+
+interface NotificationPanelProps {
+  respondToNotification: (id: string, response: string) => void
+}
+
+export function NotificationPanel({
+  respondToNotification,
+}: NotificationPanelProps) {
+  const { notifications, selectPO } = useStore()
+
+  if (notifications.length === 0) return null
+
+  return (
+    <div className="fixed bottom-4 right-4 w-96 max-h-[60vh] overflow-auto bg-po-surface border border-po-border rounded-lg shadow-xl">
+      <div className="sticky top-0 bg-po-surface border-b border-po-border p-3">
+        <h3 className="font-medium text-white">
+          Notifications ({notifications.length})
+        </h3>
+      </div>
+      <div className="p-2 space-y-2">
+        {notifications.map((notification) => (
+          <NotificationCard
+            key={notification.id}
+            notification={notification}
+            onRespond={(response) =>
+              respondToNotification(notification.id, response)
+            }
+            onViewPO={() => selectPO(notification.po_name)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface NotificationCardProps {
+  notification: {
+    id: string
+    po_name: string
+    type: string
+    message: string
+    options: string[]
+  }
+  onRespond: (response: string) => void
+  onViewPO: () => void
+}
+
+function NotificationCard({
+  notification,
+  onRespond,
+  onViewPO,
+}: NotificationCardProps) {
+  const [customInput, setCustomInput] = useState('')
+  const [showCustom, setShowCustom] = useState(false)
+
+  const handleOptionClick = (option: string) => {
+    onRespond(option)
+  }
+
+  const handleCustomSubmit = () => {
+    if (customInput.trim()) {
+      onRespond(customInput.trim())
+      setCustomInput('')
+      setShowCustom(false)
+    }
+  }
+
+  return (
+    <div className="bg-po-bg border border-po-border rounded-lg p-3">
+      <div className="flex items-center gap-2 mb-2">
+        <span className="text-xs bg-po-warning text-black px-2 py-0.5 rounded font-medium">
+          {notification.type}
+        </span>
+        <button
+          onClick={onViewPO}
+          className="text-xs text-po-accent hover:underline"
+        >
+          {notification.po_name}
+        </button>
+      </div>
+
+      <p className="text-sm text-gray-200 mb-3">{notification.message}</p>
+
+      {notification.options.length > 0 && (
+        <div className="flex flex-wrap gap-2 mb-2">
+          {notification.options.map((option, index) => (
+            <button
+              key={index}
+              onClick={() => handleOptionClick(option)}
+              className="px-3 py-1.5 text-sm bg-po-surface border border-po-border rounded hover:border-po-accent transition-colors"
+            >
+              {option}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {showCustom ? (
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={customInput}
+            onChange={(e) => setCustomInput(e.target.value)}
+            placeholder="Custom response..."
+            className="flex-1 bg-po-surface border border-po-border rounded px-2 py-1 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-po-accent"
+            onKeyDown={(e) => e.key === 'Enter' && handleCustomSubmit()}
+            autoFocus
+          />
+          <button
+            onClick={handleCustomSubmit}
+            className="px-2 py-1 text-sm bg-po-accent text-white rounded hover:bg-po-accent/80"
+          >
+            Send
+          </button>
+          <button
+            onClick={() => setShowCustom(false)}
+            className="px-2 py-1 text-sm text-gray-400 hover:text-white"
+          >
+            Cancel
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => setShowCustom(true)}
+          className="text-xs text-gray-400 hover:text-white"
+        >
+          + Custom response
+        </button>
+      )}
+    </div>
+  )
+}

data/frontend/src/components/POCard.tsx

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,117 @@
+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
+}
+
+export function PODetail({
+  sendMessage,
+  createSession,
+  switchSession,
+  createThread,
+}: 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} />}
+      </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

@@ -0,0 +1,51 @@
+import type { PromptObject } from '../types'
+import { MarkdownMessage } from './MarkdownMessage'
+
+interface PromptPanelProps {
+  po: PromptObject
+}
+
+export function PromptPanel({ po }: PromptPanelProps) {
+  const prompt = po.prompt || ''
+  const config = po.config || {}
+
+  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>
+        <h3 className="text-lg font-medium text-white mb-3">Prompt</h3>
+        <div className="bg-po-bg rounded-lg border border-po-border p-4">
+          {prompt ? (
+            <div className="prose prose-invert max-w-none">
+              <MarkdownMessage content={prompt} />
+            </div>
+          ) : (
+            <p className="text-gray-500 italic">No prompt defined</p>
+          )}
+        </div>
+      </div>
+
+      {/* Raw source toggle */}
+      <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>
+  )
+}