prompt_objects 0.4.0 → 0.6.0

data/frontend/src/components/NotificationPanel.tsx

@@ -5,28 +5,28 @@ interface NotificationPanelProps {
   respondToNotification: (id: string, response: string) => void
 }
 
-export function NotificationPanel({
-  respondToNotification,
-}: NotificationPanelProps) {
+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 className="fixed bottom-4 right-4 w-96 max-h-[60vh] overflow-auto bg-po-surface-2 border border-po-warning/30 rounded-lg shadow-2xl z-50">
+      {/* Header */}
+      <div className="sticky top-0 bg-po-surface-2 border-b border-po-border px-3 py-2 flex items-center gap-2">
+        <div className="w-2 h-2 rounded-full bg-po-warning animate-pulse" />
+        <span className="text-xs font-medium text-po-text-primary flex-1">
+          Pending Requests ({notifications.length})
+        </span>
       </div>
+
+      {/* Notifications */}
       <div className="p-2 space-y-2">
         {notifications.map((notification) => (
           <NotificationCard
             key={notification.id}
             notification={notification}
-            onRespond={(response) =>
-              respondToNotification(notification.id, response)
-            }
+            onRespond={(response) => respondToNotification(notification.id, response)}
             onViewPO={() => selectPO(notification.po_name)}
           />
         ))}
@@ -47,18 +47,10 @@ interface NotificationCardProps {
   onViewPO: () => void
 }
 
-function NotificationCard({
-  notification,
-  onRespond,
-  onViewPO,
-}: NotificationCardProps) {
+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())
@@ -68,28 +60,31 @@ function NotificationCard({
   }
 
   return (
-    <div className="bg-po-bg border border-po-border rounded-lg p-3">
+    <div className="bg-po-surface border border-po-border rounded-lg p-3">
+      {/* Header: type badge + PO name */}
       <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">
+        <span className="text-2xs font-mono bg-po-warning text-po-bg px-1.5 py-0.5 rounded font-bold">
           {notification.type}
         </span>
         <button
           onClick={onViewPO}
-          className="text-xs text-po-accent hover:underline"
+          className="text-xs font-mono text-po-accent hover:underline"
         >
           {notification.po_name}
         </button>
       </div>
 
-      <p className="text-sm text-gray-200 mb-3">{notification.message}</p>
+      {/* Message */}
+      <p className="text-xs text-po-text-primary mb-3">{notification.message}</p>
 
+      {/* Quick response options */}
       {notification.options.length > 0 && (
-        <div className="flex flex-wrap gap-2 mb-2">
+        <div className="flex flex-wrap gap-1.5 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"
+              onClick={() => onRespond(option)}
+              className="px-2.5 py-1 text-xs bg-po-surface-2 border border-po-border rounded hover:border-po-accent hover:text-po-accent transition-colors duration-150 text-po-text-secondary"
             >
               {option}
             </button>
@@ -97,34 +92,35 @@ function NotificationCard({
         </div>
       )}
 
+      {/* Custom response */}
       {showCustom ? (
-        <div className="flex gap-2">
+        <div className="flex gap-1.5">
           <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"
+            className="flex-1 bg-po-surface-2 border border-po-border rounded px-2 py-1 text-xs text-po-text-primary placeholder-po-text-ghost 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"
+            className="px-2 py-1 text-xs bg-po-accent text-po-bg rounded font-medium hover:bg-po-accent-muted transition-colors duration-150"
           >
             Send
           </button>
           <button
             onClick={() => setShowCustom(false)}
-            className="px-2 py-1 text-sm text-gray-400 hover:text-white"
+            className="text-po-text-ghost hover:text-po-text-secondary transition-colors duration-150"
           >
-            Cancel
+            {'\u2715'}
           </button>
         </div>
       ) : (
         <button
           onClick={() => setShowCustom(true)}
-          className="text-xs text-gray-400 hover:text-white"
+          className="text-2xs text-po-text-ghost hover:text-po-text-secondary transition-colors duration-150"
         >
           + Custom response
         </button>

data/frontend/src/components/ObjectList.tsx

@@ -0,0 +1,78 @@
+import { usePromptObjects, useStore, usePONotifications } from '../store'
+import type { PromptObject } from '../types'
+
+export function ObjectList() {
+  const promptObjects = usePromptObjects()
+
+  return (
+    <aside className="h-full bg-po-surface border-r border-po-border flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="px-3 py-2 border-b border-po-border">
+        <span className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider">
+          Objects ({promptObjects.length})
+        </span>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-auto py-1">
+        {promptObjects.length === 0 ? (
+          <div className="px-3 py-4 text-2xs text-po-text-ghost text-center">
+            Waiting for connection...
+          </div>
+        ) : (
+          promptObjects.map((po) => (
+            <ObjectItem key={po.name} po={po} />
+          ))
+        )}
+      </div>
+    </aside>
+  )
+}
+
+function ObjectItem({ po }: { po: PromptObject }) {
+  const { selectPO, selectedPO } = useStore()
+  const notifications = usePONotifications(po.name)
+  const isSelected = selectedPO === po.name
+
+  const isActive = po.status !== 'idle'
+
+  const statusDot = {
+    idle: 'bg-po-status-idle',
+    thinking: 'bg-po-status-active',
+    calling_tool: 'bg-po-status-calling',
+  }[po.status] || 'bg-po-status-idle'
+
+  const statusGlow = {
+    idle: '',
+    thinking: 'shadow-[0_0_5px_rgba(212,149,42,0.6)]',
+    calling_tool: 'shadow-[0_0_5px_rgba(59,154,110,0.6)]',
+  }[po.status] || ''
+
+  return (
+    <button
+      onClick={() => selectPO(po.name)}
+      className={`w-full text-left h-7 px-3 flex items-center gap-2 transition-colors duration-150 ${
+        isSelected
+          ? 'bg-po-accent-wash border-l-2 border-po-accent'
+          : 'border-l-2 border-transparent hover:bg-po-surface-2'
+      }`}
+    >
+      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${statusDot} ${statusGlow} ${isActive ? 'animate-pulse' : ''}`} />
+      <span className={`flex-1 truncate font-mono text-xs ${
+        isSelected ? 'text-po-text-primary' : 'text-po-text-secondary'
+      }`}>
+        {po.name}
+      </span>
+      {po.delegated_by && (
+        <span className="text-2xs text-po-status-delegated truncate max-w-[60px]">
+          {po.delegated_by}
+        </span>
+      )}
+      {notifications.length > 0 && (
+        <span className="text-2xs font-mono bg-po-warning text-po-bg px-1 rounded font-bold flex-shrink-0">
+          {notifications.length}
+        </span>
+      )}
+    </button>
+  )
+}

data/frontend/src/components/PaneSlot.tsx

@@ -0,0 +1,30 @@
+interface PaneSlotProps {
+  label: string
+  collapsed: boolean
+  onToggle: () => void
+  height: number
+  resizeHandle?: React.ReactNode
+  children: React.ReactNode
+}
+
+export function PaneSlot({ label, collapsed, onToggle, height, resizeHandle, children }: PaneSlotProps) {
+  return (
+    <>
+      <div
+        className="h-7 bg-po-surface-2 border-b border-po-border flex items-center px-3 cursor-pointer hover:bg-po-surface-3 transition-colors duration-150 flex-shrink-0 select-none"
+        onClick={onToggle}
+      >
+        <span className="text-2xs font-mono text-po-text-secondary flex-1">{label}</span>
+        <span className="text-xs text-po-text-ghost">{collapsed ? '▼' : '▲'}</span>
+      </div>
+      {!collapsed && (
+        <>
+          <div className="flex-shrink-0 overflow-hidden" style={{ height }}>
+            {children}
+          </div>
+          {resizeHandle}
+        </>
+      )}
+    </>
+  )
+}

data/frontend/src/components/SourcePane.tsx

@@ -0,0 +1,202 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import type { PromptObject, CapabilityInfo } from '../types'
+
+interface SourcePaneProps {
+  po: PromptObject
+  selectedCapability: CapabilityInfo | null
+  onSave?: (prompt: string) => void
+}
+
+export function SourcePane({ po, selectedCapability, onSave }: SourcePaneProps) {
+  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)
+        setTimeout(() => setSaveStatus('saved'), 500)
+      } else {
+        setSaveStatus('saved')
+      }
+    }, 1000)
+  }, [onSave, prompt])
+
+  const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newPrompt = e.target.value
+    setEditedPrompt(newPrompt)
+    debouncedSave(newPrompt)
+  }
+
+  const handleToggleEdit = () => {
+    if (isEditing) {
+      // Save on exit
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+      if (editedPrompt !== prompt && onSave) {
+        onSave(editedPrompt)
+      }
+      setIsEditing(false)
+      setSaveStatus('saved')
+    } else {
+      setEditedPrompt(prompt)
+      setIsEditing(true)
+    }
+  }
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  // Capability detail view
+  if (selectedCapability) {
+    return (
+      <div className="flex-1 overflow-auto bg-po-bg">
+        <div className="px-3 py-2 border-b border-po-border bg-po-surface">
+          <span className="font-mono text-xs text-po-accent">{selectedCapability.name}</span>
+        </div>
+        <div className="p-3 space-y-3">
+          <p className="text-xs text-po-text-secondary">{selectedCapability.description}</p>
+          {selectedCapability.parameters && (
+            <ParametersView parameters={selectedCapability.parameters} />
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Prompt source view
+  return (
+    <div className="flex-1 overflow-auto bg-po-bg flex flex-col">
+      {/* Header with edit toggle and save status */}
+      <div className="px-3 py-1.5 border-b border-po-border bg-po-surface flex items-center gap-2 flex-shrink-0">
+        <span className="text-2xs text-po-text-ghost uppercase tracking-wider flex-1">Source</span>
+
+        {isEditing && (
+          <span className="flex items-center gap-1">
+            <span className={`w-1.5 h-1.5 rounded-full ${
+              saveStatus === 'saved' ? 'bg-po-success' :
+              saveStatus === 'saving' ? 'bg-po-accent animate-pulse' :
+              'bg-po-text-ghost'
+            }`} />
+            <span className={`text-2xs ${
+              saveStatus === 'saved' ? 'text-po-success' :
+              saveStatus === 'saving' ? 'text-po-accent' :
+              'text-po-text-ghost'
+            }`}>
+              {saveStatus === 'saved' ? 'saved' : saveStatus === 'saving' ? 'saving' : 'unsaved'}
+            </span>
+          </span>
+        )}
+
+        <button
+          onClick={handleToggleEdit}
+          className={`text-2xs px-1.5 py-0.5 rounded transition-colors duration-150 ${
+            isEditing
+              ? 'bg-po-accent text-po-bg'
+              : 'text-po-text-tertiary hover:text-po-text-primary hover:bg-po-surface-2'
+          }`}
+        >
+          {isEditing ? 'Done' : 'Edit'}
+        </button>
+      </div>
+
+      {/* Config (collapsed) */}
+      {Object.keys(config).length > 0 && (
+        <details className="border-b border-po-border">
+          <summary className="px-3 py-1 text-2xs text-po-text-ghost cursor-pointer hover:text-po-text-secondary transition-colors duration-150">
+            Frontmatter
+          </summary>
+          <pre className="px-3 pb-2 text-2xs text-po-text-tertiary font-mono whitespace-pre-wrap">
+            {JSON.stringify(config, null, 2)}
+          </pre>
+        </details>
+      )}
+
+      {/* Prompt content */}
+      {isEditing ? (
+        <textarea
+          value={editedPrompt}
+          onChange={handlePromptChange}
+          className="flex-1 w-full p-3 bg-transparent text-po-text-primary font-mono text-xs resize-none focus:outline-none"
+          placeholder="Enter prompt markdown..."
+          spellCheck={false}
+        />
+      ) : (
+        <pre className="flex-1 p-3 text-xs text-po-text-secondary font-mono whitespace-pre-wrap overflow-auto">
+          {prompt || '(empty)'}
+        </pre>
+      )}
+    </div>
+  )
+}
+
+function ParametersView({ parameters }: { parameters: Record<string, unknown> }) {
+  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-2xs text-po-text-ghost uppercase tracking-wider mb-1.5">Parameters</div>
+      <div className="space-y-1.5">
+        {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-surface rounded p-2">
+              <div className="flex items-center gap-1.5">
+                <span className="font-mono text-2xs text-po-accent">{propName}</span>
+                {propType && <span className="text-2xs text-po-text-ghost">({propType})</span>}
+                {isRequired && <span className="text-2xs text-po-error">req</span>}
+              </div>
+              {propDescription && (
+                <p className="text-2xs text-po-text-tertiary mt-0.5">{propDescription}</p>
+              )}
+              {propEnum && propEnum.length > 0 && (
+                <div className="mt-1 flex flex-wrap gap-1">
+                  {propEnum.map((val) => (
+                    <span key={val} className="text-2xs bg-po-surface-2 px-1 py-0.5 rounded text-po-text-ghost">
+                      {val}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

data/frontend/src/components/SystemBar.tsx

@@ -0,0 +1,74 @@
+import { useStore, useNotificationCount } from '../store'
+import { ModelSelector } from './ModelSelector'
+
+interface Props {
+  switchLLM: (provider: string, model?: string) => void
+}
+
+export function SystemBar({ switchLLM }: Props) {
+  const { connected, environment, toggleBus, busOpen, currentView, setCurrentView } =
+    useStore()
+  const notificationCount = useNotificationCount()
+
+  return (
+    <header className="h-8 bg-po-surface-2 border-b border-po-border flex items-center px-3 gap-3 flex-shrink-0">
+      {/* Logo / Environment */}
+      <div className="flex items-center gap-1.5 text-xs">
+        <span className="font-mono text-po-text-primary font-medium">PromptObjects</span>
+        {environment && (
+          <>
+            <span className="text-po-text-ghost">/</span>
+            <span className="text-po-text-secondary">{environment.name}</span>
+          </>
+        )}
+      </div>
+
+      <div className="flex-1" />
+
+      {/* Connection dot */}
+      <div
+        className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+          connected ? 'bg-po-success' : 'bg-po-error animate-pulse'
+        }`}
+        title={connected ? 'Connected' : 'Disconnected'}
+      />
+
+      {/* Model selector */}
+      <ModelSelector switchLLM={switchLLM} />
+
+      {/* Notification count */}
+      {notificationCount > 0 && (
+        <span
+          className="text-2xs font-mono bg-po-warning text-po-bg px-1.5 py-0.5 rounded font-bold"
+          title={`${notificationCount} pending requests`}
+        >
+          {notificationCount}
+        </span>
+      )}
+
+      {/* Canvas toggle */}
+      <button
+        onClick={() => setCurrentView(currentView === 'canvas' ? 'dashboard' : 'canvas')}
+        className={`text-xs px-2 py-0.5 rounded transition-colors duration-150 ${
+          currentView === 'canvas'
+            ? 'bg-po-accent text-po-bg font-medium'
+            : 'text-po-text-secondary hover:text-po-text-primary hover:bg-po-surface-3'
+        }`}
+      >
+        Canvas
+      </button>
+
+      {/* Transcript toggle */}
+      <button
+        onClick={toggleBus}
+        className={`text-xs px-2 py-0.5 rounded transition-colors duration-150 ${
+          busOpen
+            ? 'bg-po-accent text-po-bg font-medium'
+            : 'text-po-text-secondary hover:text-po-text-primary hover:bg-po-surface-3'
+        }`}
+      >
+        Transcript
+      </button>
+    </header>
+  )
+}

data/frontend/src/components/Transcript.tsx

@@ -0,0 +1,76 @@
+import { useRef, useEffect, useState } from 'react'
+import { useStore } from '../store'
+
+export function Transcript() {
+  const { busMessages, toggleBus } = useStore()
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [busMessages])
+
+  return (
+    <div className="h-full flex flex-col border-t border-po-border">
+      {/* Header */}
+      <div className="h-6 bg-po-surface-2 border-b border-po-border flex items-center px-3 flex-shrink-0">
+        <span className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider flex-1">
+          Transcript
+        </span>
+        <button
+          onClick={toggleBus}
+          className="text-2xs text-po-text-ghost hover:text-po-text-secondary transition-colors duration-150"
+        >
+          {'\u2715'}
+        </button>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-auto px-3 py-1 font-mono">
+        {busMessages.length === 0 ? (
+          <div className="text-2xs text-po-text-ghost text-center py-2">
+            No messages
+          </div>
+        ) : (
+          busMessages.map((msg, index) => (
+            <TranscriptRow key={index} msg={msg} />
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+    </div>
+  )
+}
+
+function TranscriptRow({ msg }: { msg: { from: string; to: string; content: string | Record<string, unknown>; summary?: string; timestamp: string } }) {
+  const [expanded, setExpanded] = useState(false)
+  const fullText = msg.summary || (typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content, null, 2))
+  const isLong = fullText.length > 120
+  const truncated = isLong ? fullText.slice(0, 120) + '...' : fullText
+
+  return (
+    <div>
+      <div
+        onClick={() => isLong && setExpanded(!expanded)}
+        className={`text-2xs leading-relaxed flex items-baseline gap-1.5 ${isLong ? 'cursor-pointer hover:bg-po-surface-2' : ''} ${expanded ? 'bg-po-surface-2' : ''}`}
+      >
+        <span className="text-po-text-ghost flex-shrink-0 whitespace-nowrap">
+          {new Date(msg.timestamp).toLocaleTimeString('en-US', { hour12: false })}
+        </span>
+        <span className="text-po-accent flex-shrink-0">{msg.from}</span>
+        <span className="text-po-text-ghost">{'\u2192'}</span>
+        <span className="text-po-status-calling flex-shrink-0">{msg.to}</span>
+        {!expanded && (
+          <span className="text-po-text-secondary truncate">{truncated}</span>
+        )}
+        {isLong && (
+          <span className="text-po-text-ghost flex-shrink-0 ml-auto">{expanded ? '\u25BC' : '\u25B8'}</span>
+        )}
+      </div>
+      {expanded && (
+        <pre className="text-2xs text-po-text-secondary whitespace-pre-wrap break-all pl-[4.5rem] pb-1.5 bg-po-surface-2 rounded-b mb-0.5">
+          {fullText}
+        </pre>
+      )}
+    </div>
+  )
+}