prompt_objects 0.3.1 → 0.5.0

data/frontend/src/components/MarkdownMessage.tsx

@@ -30,7 +30,7 @@ export function MarkdownMessage({ content, className = '' }: MarkdownMessageProp
 
             return (
               <code
-                className="bg-po-bg px-1.5 py-0.5 rounded text-po-accent font-mono text-sm"
+                className="bg-po-surface-2 px-1 py-0.5 rounded text-po-accent font-mono text-[0.9em]"
                 {...props}
               >
                 {children}
@@ -52,29 +52,29 @@ export function MarkdownMessage({ content, className = '' }: MarkdownMessageProp
           },
           // Styled paragraphs
           p({ children }) {
-            return <p className="mb-3 last:mb-0">{children}</p>
+            return <p className="mb-2 last:mb-0">{children}</p>
           },
           // Styled lists
           ul({ children }) {
-            return <ul className="list-disc list-inside mb-3 space-y-1">{children}</ul>
+            return <ul className="list-disc list-inside mb-2 space-y-0.5">{children}</ul>
           },
           ol({ children }) {
-            return <ol className="list-decimal list-inside mb-3 space-y-1">{children}</ol>
+            return <ol className="list-decimal list-inside mb-2 space-y-0.5">{children}</ol>
           },
           // Styled headings
           h1({ children }) {
-            return <h1 className="text-xl font-bold mb-2 mt-4 first:mt-0">{children}</h1>
+            return <h1 className="text-base font-bold mb-1.5 mt-3 first:mt-0 text-po-text-primary">{children}</h1>
           },
           h2({ children }) {
-            return <h2 className="text-lg font-bold mb-2 mt-3 first:mt-0">{children}</h2>
+            return <h2 className="text-sm font-bold mb-1.5 mt-2 first:mt-0 text-po-text-primary">{children}</h2>
           },
           h3({ children }) {
-            return <h3 className="text-base font-bold mb-2 mt-2 first:mt-0">{children}</h3>
+            return <h3 className="text-xs font-bold mb-1 mt-1.5 first:mt-0 text-po-text-primary">{children}</h3>
           },
           // Styled blockquotes
           blockquote({ children }) {
             return (
-              <blockquote className="border-l-4 border-po-accent pl-4 my-3 text-gray-400 italic">
+              <blockquote className="border-l-2 border-po-accent pl-3 my-2 text-po-text-secondary italic">
                 {children}
               </blockquote>
             )
@@ -82,26 +82,26 @@ export function MarkdownMessage({ content, className = '' }: MarkdownMessageProp
           // Styled tables
           table({ children }) {
             return (
-              <div className="overflow-x-auto my-3">
-                <table className="min-w-full border border-po-border">{children}</table>
+              <div className="overflow-x-auto my-2">
+                <table className="min-w-full border border-po-border text-xs">{children}</table>
               </div>
             )
           },
           th({ children }) {
             return (
-              <th className="border border-po-border bg-po-bg px-3 py-2 text-left font-medium">
+              <th className="border border-po-border bg-po-surface-2 px-2 py-1 text-left font-medium text-po-text-primary">
                 {children}
               </th>
             )
           },
           td({ children }) {
             return (
-              <td className="border border-po-border px-3 py-2">{children}</td>
+              <td className="border border-po-border px-2 py-1 text-po-text-secondary">{children}</td>
             )
           },
           // Horizontal rule
           hr() {
-            return <hr className="border-po-border my-4" />
+            return <hr className="border-po-border my-3" />
           },
         }}
       >
@@ -121,17 +121,17 @@ function CodeBlock({ language, code }: { language: string; code: string }) {
   }
 
   return (
-    <div className="relative group my-3">
+    <div className="relative group my-2">
       {/* 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">
+      <div className="flex items-center justify-between bg-po-surface-2 px-2.5 py-1 rounded-t border border-b-0 border-po-border">
+        <span className="text-2xs text-po-text-ghost font-mono">
           {language || 'text'}
         </span>
         <button
           onClick={handleCopy}
-          className="text-xs text-gray-400 hover:text-white transition-colors"
+          className="text-2xs text-po-text-ghost hover:text-po-text-primary transition-colors duration-150"
         >
-          {copied ? 'Copied!' : 'Copy'}
+          {copied ? 'Copied' : 'Copy'}
         </button>
       </div>
       {/* Code with syntax highlighting */}
@@ -141,9 +141,11 @@ function CodeBlock({ language, code }: { language: string; code: string }) {
         PreTag="div"
         customStyle={{
           margin: 0,
-          borderRadius: '0 0 0.375rem 0.375rem',
-          border: '1px solid rgb(55, 65, 81)',
+          borderRadius: '0 0 0.25rem 0.25rem',
+          border: '1px solid #3d3a37',
           borderTop: 'none',
+          fontSize: '11px',
+          background: '#222120',
         }}
       >
         {code}

data/frontend/src/components/MethodList.tsx

@@ -0,0 +1,90 @@
+import type { PromptObject, CapabilityInfo } from '../types'
+
+interface MethodListProps {
+  po: PromptObject
+  selectedCapability: CapabilityInfo | null
+  onSelectCapability: (cap: CapabilityInfo | null) => void
+}
+
+export function MethodList({ po, selectedCapability, onSelectCapability }: MethodListProps) {
+  const capabilities = po.capabilities || []
+  const universalCapabilities = po.universal_capabilities || []
+
+  const handleClick = (cap: CapabilityInfo) => {
+    if (selectedCapability?.name === cap.name) {
+      onSelectCapability(null) // Toggle off
+    } else {
+      onSelectCapability(cap)
+    }
+  }
+
+  return (
+    <div className="h-full border-r border-po-border overflow-auto bg-po-surface">
+      {/* Source (prompt view) */}
+      <button
+        onClick={() => onSelectCapability(null)}
+        className={`w-full text-left px-2.5 py-1 text-xs font-mono border-b border-po-border transition-colors duration-150 ${
+          selectedCapability === null
+            ? 'bg-po-accent-wash text-po-accent'
+            : 'text-po-text-secondary hover:bg-po-surface-2'
+        }`}
+      >
+        Source
+      </button>
+
+      {/* Declared capabilities */}
+      {capabilities.length > 0 && (
+        <div>
+          <div className="px-2.5 py-1.5 border-b border-po-border">
+            <span className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider">
+              Methods ({capabilities.length})
+            </span>
+          </div>
+          {capabilities.map((cap) => (
+            <button
+              key={cap.name}
+              onClick={() => handleClick(cap)}
+              className={`w-full text-left px-2.5 py-1 text-xs font-mono transition-colors duration-150 ${
+                selectedCapability?.name === cap.name
+                  ? 'bg-po-accent-wash text-po-accent'
+                  : 'text-po-accent hover:bg-po-surface-2'
+              }`}
+            >
+              {cap.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Universal capabilities */}
+      {universalCapabilities.length > 0 && (
+        <div>
+          <div className="px-2.5 py-1.5 border-b border-po-border border-t border-po-border">
+            <span className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider">
+              Universal ({universalCapabilities.length})
+            </span>
+          </div>
+          {universalCapabilities.map((cap) => (
+            <button
+              key={cap.name}
+              onClick={() => handleClick(cap)}
+              className={`w-full text-left px-2.5 py-1 text-xs font-mono transition-colors duration-150 ${
+                selectedCapability?.name === cap.name
+                  ? 'bg-po-accent-wash text-po-text-secondary'
+                  : 'text-po-text-secondary hover:bg-po-surface-2'
+              }`}
+            >
+              {cap.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {capabilities.length === 0 && universalCapabilities.length === 0 && (
+        <div className="px-2.5 py-4 text-2xs text-po-text-ghost text-center">
+          No capabilities
+        </div>
+      )}
+    </div>
+  )
+}

data/frontend/src/components/ModelSelector.tsx

@@ -28,7 +28,6 @@ export function ModelSelector({ switchLLM }: Props) {
     setIsOpen(false)
   }
 
-  // Provider display names
   const providerNames: Record<string, string> = {
     openai: 'OpenAI',
     anthropic: 'Anthropic',
@@ -41,14 +40,14 @@ export function ModelSelector({ switchLLM }: Props) {
     <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"
+        className="flex items-center gap-1.5 px-2 py-0.5 text-xs bg-po-surface-2 border border-po-border rounded hover:border-po-border-focus transition-colors duration-150"
       >
-        <span className="text-gray-400">
+        <span className="text-po-text-tertiary">
           {providerNames[llmConfig.current_provider] || llmConfig.current_provider}
         </span>
-        <span className="text-white font-medium">{llmConfig.current_model}</span>
+        <span className="font-mono text-po-text-primary">{llmConfig.current_model}</span>
         <svg
-          className={`w-4 h-4 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          className={`w-3 h-3 text-po-text-ghost transition-transform ${isOpen ? 'rotate-180' : ''}`}
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -58,13 +57,13 @@ export function ModelSelector({ switchLLM }: Props) {
       </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">
+        <div className="absolute right-0 top-full mt-1 w-60 bg-po-surface-2 border border-po-border rounded 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">
+              <div className="px-2.5 py-1.5 bg-po-surface text-2xs font-medium text-po-text-ghost uppercase tracking-wider flex items-center justify-between">
                 <span>{providerNames[provider.name] || provider.name}</span>
                 {!provider.available && (
-                  <span className="text-red-400 text-[10px] normal-case">
+                  <span className="text-po-error text-2xs normal-case">
                     {provider.name === 'ollama' ? 'Not Running' : 'No API Key'}
                   </span>
                 )}
@@ -81,22 +80,22 @@ export function ModelSelector({ switchLLM }: Props) {
                     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 ${
+                    className={`w-full px-2.5 py-1.5 text-left text-xs font-mono flex items-center justify-between transition-colors duration-150 ${
                       isSelected
-                        ? 'bg-po-accent/20 text-po-accent'
+                        ? 'bg-po-accent-wash text-po-accent'
                         : isAvailable
-                        ? 'text-gray-300 hover:bg-po-border'
-                        : 'text-gray-600 cursor-not-allowed'
+                        ? 'text-po-text-secondary hover:bg-po-surface-3'
+                        : 'text-po-text-ghost cursor-not-allowed'
                     }`}
                   >
                     <span className="flex items-center gap-2">
                       {model}
                       {isDefault && (
-                        <span className="text-[10px] text-gray-500">(default)</span>
+                        <span className="text-2xs text-po-text-ghost">(default)</span>
                       )}
                     </span>
                     {isSelected && (
-                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                      <svg className="w-3 h-3" 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"

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}
+        </>
+      )}
+    </>
+  )
+}