prompt_objects 0.1.0 → 0.3.0

data/frontend/src/components/CapabilitiesPanel.tsx

@@ -1,4 +1,5 @@
-import type { PromptObject } from '../types'
+import { useState } from 'react'
+import type { PromptObject, CapabilityInfo } from '../types'
 
 interface CapabilitiesPanelProps {
   po: PromptObject
@@ -6,38 +7,134 @@ interface CapabilitiesPanelProps {
 
 export function CapabilitiesPanel({ po }: CapabilitiesPanelProps) {
   const capabilities = po.capabilities || []
+  const universalCapabilities = po.universal_capabilities || []
 
   return (
     <div className="h-full overflow-auto p-4">
-      <h3 className="text-lg font-medium text-white mb-4">Capabilities</h3>
+      {/* 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-center py-8">
-          No capabilities defined.
-        </div>
-      ) : (
-        <div className="space-y-2">
-          {capabilities.map((cap, index) => (
-            <div
-              key={index}
-              className="bg-po-surface border border-po-border rounded-lg p-3"
-            >
-              <div className="font-mono text-sm text-po-accent">{cap}</div>
-            </div>
+        {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>
+  )
+}
 
-      <div className="mt-6 p-4 bg-po-bg rounded-lg border border-po-border">
-        <h4 className="text-sm font-medium text-gray-400 mb-2">
-          Universal Capabilities
-        </h4>
-        <p className="text-xs text-gray-500">
-          All Prompt Objects automatically have access to universal capabilities
-          like <code className="text-po-accent">ask_human</code>,{' '}
-          <code className="text-po-accent">think</code>, and{' '}
-          <code className="text-po-accent">request_capability</code>.
-        </p>
+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

@@ -133,13 +133,15 @@ function MessageBubble({ message }: { message: Message }) {
   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="text-xs text-gray-500 bg-po-bg rounded p-2 font-mono">
-        <div className="text-gray-400 mb-1">Tool Result:</div>
-        <div className="whitespace-pre-wrap break-all">
-          {message.content?.slice(0, 500)}
-          {message.content && message.content.length > 500 && '...'}
-        </div>
+      <div className="space-y-2 ml-11">
+        {results.map((result, idx) => (
+          <ToolResultDisplay key={result.tool_call_id || idx} result={result} />
+        ))}
       </div>
     )
   }
@@ -249,3 +251,38 @@ function ToolCallDisplay({ toolCall }: { toolCall: ToolCall }) {
     </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/ContextMenu.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from 'react'
+
+interface ContextMenuItem {
+  label: string
+  onClick: () => void
+  icon?: string
+  danger?: boolean
+}
+
+interface ContextMenuProps {
+  x: number
+  y: number
+  items: ContextMenuItem[]
+  onClose: () => void
+}
+
+export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [onClose])
+
+  // Adjust position to stay within viewport
+  const adjustedStyle = {
+    top: y,
+    left: x,
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 bg-po-surface border border-po-border rounded-lg shadow-xl py-1 min-w-[160px]"
+      style={adjustedStyle}
+    >
+      {items.map((item, idx) => (
+        <button
+          key={idx}
+          onClick={() => {
+            item.onClick()
+            onClose()
+          }}
+          className={`w-full text-left px-3 py-1.5 text-xs hover:bg-po-bg transition-colors flex items-center gap-2 ${
+            item.danger ? 'text-red-400 hover:text-red-300' : 'text-gray-300 hover:text-white'
+          }`}
+        >
+          {item.icon && <span>{item.icon}</span>}
+          {item.label}
+        </button>
+      ))}
+    </div>
+  )
+}

data/frontend/src/components/MessageBus.tsx

@@ -41,9 +41,10 @@ export function MessageBus() {
                 </span>
               </div>
               <div className="text-gray-300 break-words">
-                {msg.content.length > 200
-                  ? msg.content.slice(0, 200) + '...'
-                  : msg.content}
+                {(() => {
+                  const text = msg.summary || (typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content))
+                  return text.length > 200 ? text.slice(0, 200) + '...' : text
+                })()}
               </div>
             </div>
           ))

data/frontend/src/components/ModelSelector.tsx

@@ -33,6 +33,8 @@ export function ModelSelector({ switchLLM }: Props) {
     openai: 'OpenAI',
     anthropic: 'Anthropic',
     gemini: 'Gemini',
+    ollama: 'Ollama',
+    openrouter: 'OpenRouter',
   }
 
   return (
@@ -62,7 +64,9 @@ export function ModelSelector({ switchLLM }: Props) {
               <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>
+                  <span className="text-red-400 text-[10px] normal-case">
+                    {provider.name === 'ollama' ? 'Not Running' : 'No API Key'}
+                  </span>
                 )}
               </div>
               {provider.models.map((model) => {

data/frontend/src/components/PODetail.tsx

@@ -9,6 +9,7 @@ interface PODetailProps {
   createSession: (target: string, name?: string) => void
   switchSession: (target: string, sessionId: string) => void
   createThread: (target: string, name?: string) => void
+  updatePrompt: (target: string, prompt: string) => void
 }
 
 export function PODetail({
@@ -16,6 +17,7 @@ export function PODetail({
   createSession,
   switchSession,
   createThread,
+  updatePrompt,
 }: PODetailProps) {
   const { activeTab, setActiveTab, selectPO } = useStore()
   const po = useSelectedPO()
@@ -95,7 +97,12 @@ export function PODetail({
           />
         )}
         {activeTab === 'capabilities' && <CapabilitiesPanel po={po} />}
-        {activeTab === 'prompt' && <PromptPanel po={po} />}
+        {activeTab === 'prompt' && (
+          <PromptPanel
+            po={po}
+            onSave={(prompt) => updatePrompt(po.name, prompt)}
+          />
+        )}
       </div>
     </div>
   )

data/frontend/src/components/PromptPanel.tsx

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

data/frontend/src/components/ThreadsSidebar.tsx

@@ -1,10 +1,13 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
+import { ContextMenu } from './ContextMenu'
 import type { PromptObject, Session, ThreadType } from '../types'
 
 interface ThreadsSidebarProps {
   po: PromptObject
   switchSession: (target: string, sessionId: string) => void
   createThread: (target: string) => void
+  requestUsage?: (sessionId: string, includeTree?: boolean) => void
+  exportThread?: (sessionId: string, format?: string) => void
 }
 
 // Build a flat list with depth info
@@ -59,12 +62,18 @@ function ThreadTypeIcon({ type }: { type: ThreadType }) {
   }
 }
 
-export function ThreadsSidebar({ po, switchSession, createThread }: ThreadsSidebarProps) {
+export function ThreadsSidebar({ po, switchSession, createThread, requestUsage, exportThread }: ThreadsSidebarProps) {
   const sessions = po.sessions || []
   const currentSessionId = po.current_session?.id
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; sessionId: string } | null>(null)
 
   const threadList = useMemo(() => buildThreadList(sessions), [sessions])
 
+  const handleContextMenu = (e: React.MouseEvent, sessionId: string) => {
+    e.preventDefault()
+    setContextMenu({ x: e.clientX, y: e.clientY, sessionId })
+  }
+
   return (
     <div className="h-full flex flex-col">
       <div className="p-3 border-b border-po-border flex items-center justify-between">
@@ -88,6 +97,7 @@ export function ThreadsSidebar({ po, switchSession, createThread }: ThreadsSideb
             <button
               key={session.id}
               onClick={() => switchSession(po.name, session.id)}
+              onContextMenu={(e) => handleContextMenu(e, session.id)}
               className={`w-full text-left p-2 rounded text-xs transition-colors ${
                 session.id === currentSessionId
                   ? 'bg-po-accent/20 border border-po-accent'
@@ -114,6 +124,40 @@ export function ThreadsSidebar({ po, switchSession, createThread }: ThreadsSideb
           ))
         )}
       </div>
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+          items={[
+            ...(requestUsage ? [
+              {
+                label: 'View Usage',
+                icon: '📊',
+                onClick: () => requestUsage(contextMenu.sessionId),
+              },
+              {
+                label: 'View Tree Usage',
+                icon: '🌳',
+                onClick: () => requestUsage(contextMenu.sessionId, true),
+              },
+            ] : []),
+            ...(exportThread ? [
+              {
+                label: 'Export as Markdown',
+                icon: '📄',
+                onClick: () => exportThread(contextMenu.sessionId, 'markdown'),
+              },
+              {
+                label: 'Export as JSON',
+                icon: '📋',
+                onClick: () => exportThread(contextMenu.sessionId, 'json'),
+              },
+            ] : []),
+          ]}
+        />
+      )}
     </div>
   )
 }