prompt_objects 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ad31b1bb32afdf58701be9b0b163314ce9944a1e2df465f81540e36c5e7aa10
-  data.tar.gz: 865fdc2ee3c868cbc48ac86e4034472e71ea12b51a31d99b71bc446a50a45eb9
+  metadata.gz: 0fe57111f23be7238465e5a386d48d8d694cd4599e2113e6378150951efcd303
+  data.tar.gz: '07192c4f47af2d7aa9530fdc61b65cb97fba77ae84133a30533d3f07314e0b79'
 SHA512:
-  metadata.gz: 1c1cdf27920d51f61ce89feb4df5f7eb8f6d9c37f43ba53c7578d56193fcf9e3016fc465a0d4e4fcac3a74d9c15ac09ecb3031b867f5b04ac155d2e5bb6aeb75
-  data.tar.gz: abf9df3fff47f105b8e0b516784712c980a155f0adf1b2fc770f329aabde0144d8f4e4b139627d5cc6d734c1041abfc5dc85fc5e65f6dd4a8d023545e6f1bdcb
+  metadata.gz: 66d2e26018f49685968bccfd075b2e7cf74fb4bd0cbdf0730f4f3c68c3101be232235beb86a8a1cde73bdf2707c1a679b916d53c8b4c1fb2f9d455d965e4d246
+  data.tar.gz: 5fb3e4b088aaf7a6a99e08e144f090c68e2a63b0b009fe43929d93daa8da7b9e6b0c330ae048c2d6bda9fbcdef385000c0f255695a539e922393fc3c84a59e84

data/frontend/src/App.tsx

@@ -9,7 +9,7 @@ import { NotificationPanel } from './components/NotificationPanel'
 import { ThreadsSidebar } from './components/ThreadsSidebar'
 
 export default function App() {
-  const { sendMessage, respondToNotification, createSession, switchSession, switchLLM, createThread } =
+  const { sendMessage, respondToNotification, createSession, switchSession, switchLLM, createThread, updatePrompt } =
     useWebSocket()
   const { selectedPO, busOpen, notifications } = useStore()
   const selectedPOData = useSelectedPO()
@@ -72,6 +72,7 @@ export default function App() {
               createSession={createSession}
               switchSession={switchSession}
               createThread={createThread}
+              updatePrompt={updatePrompt}
             />
           ) : (
             <Dashboard />

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/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/hooks/useWebSocket.ts

@@ -352,6 +352,21 @@ export function useWebSocket() {
     )
   }, [])
 
+  // Update a PO's prompt (markdown body)
+  const updatePrompt = useCallback((target: string, prompt: string) => {
+    if (!ws.current || ws.current.readyState !== WebSocket.OPEN) {
+      console.error('WebSocket not connected')
+      return
+    }
+
+    ws.current.send(
+      JSON.stringify({
+        type: 'update_prompt',
+        payload: { target, prompt },
+      })
+    )
+  }, [])
+
   return {
     sendMessage,
     respondToNotification,
@@ -359,5 +374,6 @@ export function useWebSocket() {
     switchSession,
     switchLLM,
     createThread,
+    updatePrompt,
   }
 }

data/frontend/src/types/index.ts

@@ -16,6 +16,7 @@ export interface ToolCall {
 
 export interface ToolResult {
   tool_call_id: string
+  name?: string  // Name of the tool that was called
   content: string
 }
 
@@ -42,11 +43,21 @@ export interface CurrentSession {
   messages: Message[]
 }
 
+export interface CapabilityInfo {
+  name: string
+  description: string
+  parameters?: Record<string, unknown>
+}
+
+// Alias for backwards compatibility
+export type UniversalCapability = CapabilityInfo
+
 export interface PromptObject {
   name: string
   description: string
   status: 'idle' | 'thinking' | 'calling_tool'
-  capabilities: string[]
+  capabilities: CapabilityInfo[]
+  universal_capabilities?: CapabilityInfo[]
   current_session: CurrentSession | null
   sessions: Session[]
   prompt?: string  // The markdown body/prompt

data/lib/prompt_objects/environment.rb

@@ -40,6 +40,7 @@ module PromptObjects
                 :manifest, :env_path, :auto_commit, :session_store,
                 :current_provider, :current_model
     attr_accessor :on_po_registered  # Callback for when a PO is registered
+    attr_accessor :on_po_modified    # Callback for when a PO is modified (capabilities changed, etc.)
 
     # Initialize from an environment path (with manifest) or objects directory.
     # @param env_path [String, nil] Path to environment directory (preferred)
@@ -207,6 +208,13 @@ module PromptObjects
       po
     end
 
+    # Notify that a PO has been modified (for live updates in web UI).
+    # Call this after modifying a PO's config/capabilities programmatically.
+    # @param po [PromptObject] The modified PO
+    def notify_po_modified(po)
+      @on_po_modified&.call(po)
+    end
+
     # Load a prompt object by name from the objects directory.
     # @param name [String] Name of the prompt object (without .md extension)
     # @return [PromptObject]
@@ -267,13 +275,16 @@ module PromptObjects
       @registry.register(Universal::Think.new)
       @registry.register(Universal::CreateCapability.new)
       @registry.register(Universal::AddCapability.new)
+      @registry.register(Universal::RemoveCapability.new)
       @registry.register(Universal::ListCapabilities.new)
       @registry.register(Universal::ListPrimitives.new)
       @registry.register(Universal::AddPrimitive.new)
       @registry.register(Universal::CreatePrimitive.new)
+      @registry.register(Universal::DeletePrimitive.new)
       @registry.register(Universal::VerifyPrimitive.new)
       @registry.register(Universal::ModifyPrimitive.new)
       @registry.register(Universal::RequestPrimitive.new)
+      @registry.register(Universal::ModifyPrompt.new)
     end
   end
 

data/lib/prompt_objects/prompt_object.rb

@@ -5,6 +5,7 @@ module PromptObjects
   # It interprets messages semantically using its markdown "soul" as the system prompt.
   class PromptObject < Capability
     attr_reader :config, :body, :history, :session_id, :path
+    attr_accessor :on_history_updated  # Callback for real-time updates during receive loop
 
     # @param config [Hash] Parsed frontmatter (name, description, capabilities)
     # @param body [String] Markdown body (the "soul" - becomes system prompt)
@@ -95,6 +96,9 @@ module PromptObjects
           tool_msg = { role: :tool, results: results }
           @history << tool_msg
           persist_message(tool_msg)
+
+          # Notify callback for real-time UI updates (tool calls as they happen)
+          notify_history_updated
         else
           # No tool calls - we have our final response
           assistant_msg = { role: :assistant, content: response.content }
@@ -341,6 +345,12 @@ module PromptObjects
       messages.last&.dig(:id)
     end
 
+    # Notify the history updated callback if registered.
+    # Used for real-time UI updates during the receive loop.
+    def notify_history_updated
+      @on_history_updated&.call(self, @session_id, @history)
+    end
+
     # --- Session Persistence Helpers ---
 
     # Load existing session or create a new one.