prompt_objects 0.4.0 → 0.6.0

data/frontend/src/components/Inspector.tsx

@@ -0,0 +1,263 @@
+import { useState, useMemo } from 'react'
+import { useStore, usePONotifications, useEnvData } from '../store'
+import { useResize } from '../hooks/useResize'
+import { MethodList } from './MethodList'
+import { SourcePane } from './SourcePane'
+import { EnvDataPane } from './EnvDataPane'
+import { Workspace } from './Workspace'
+import { ContextMenu } from './ContextMenu'
+import { PaneSlot } from './PaneSlot'
+import type { PromptObject, CapabilityInfo } from '../types'
+
+interface InspectorProps {
+  po: PromptObject
+  sendMessage: (target: string, content: string, newThread?: boolean) => void
+  createSession?: (target: string, name?: string) => void
+  switchSession: (target: string, sessionId: string) => void
+  createThread: (target: string) => void
+  updatePrompt: (target: string, prompt: string) => void
+  requestUsage?: (sessionId: string, includeTree?: boolean) => void
+  exportThread?: (sessionId: string, format?: string) => void
+  requestEnvData: (sessionId: string) => void
+}
+
+export function Inspector({
+  po,
+  sendMessage,
+  switchSession,
+  createThread,
+  updatePrompt,
+  requestUsage,
+  exportThread,
+  requestEnvData,
+}: InspectorProps) {
+  const [selectedCapability, setSelectedCapability] = useState<CapabilityInfo | null>(null)
+  const [threadMenuOpen, setThreadMenuOpen] = useState(false)
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; sessionId: string } | null>(null)
+  const notifications = usePONotifications(po.name)
+  const topPaneCollapsed = useStore((s) => s.topPaneCollapsed)
+  const toggleTopPane = useStore((s) => s.toggleTopPane)
+  const envDataPaneCollapsed = useStore((s) => s.envDataPaneCollapsed)
+  const toggleEnvDataPane = useStore((s) => s.toggleEnvDataPane)
+
+  const topPaneResize = useResize({
+    direction: 'vertical',
+    initialSize: 260,
+    minSize: 120,
+    maxSize: 600,
+  })
+
+  const envDataResize = useResize({
+    direction: 'vertical',
+    initialSize: 160,
+    minSize: 80,
+    maxSize: 400,
+  })
+
+  const methodListResize = useResize({
+    direction: 'horizontal',
+    initialSize: 192,
+    minSize: 120,
+    maxSize: 320,
+  })
+
+  const sessions = po.sessions || []
+  const currentSessionId = po.current_session?.id
+  const sessionRootMap = useStore((s) => s.sessionRootMap)
+  const rootThreadId = currentSessionId ? sessionRootMap[currentSessionId] : undefined
+  const envDataEntries = useEnvData(rootThreadId)
+
+  // Sort sessions: current first, then by updated_at desc
+  const sortedSessions = useMemo(() => {
+    return [...sessions].sort((a, b) => {
+      if (a.id === currentSessionId) return -1
+      if (b.id === currentSessionId) return 1
+      return (b.updated_at || '').localeCompare(a.updated_at || '')
+    })
+  }, [sessions, currentSessionId])
+
+  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_6px_rgba(212,149,42,0.7)]',
+    calling_tool: 'shadow-[0_0_6px_rgba(59,154,110,0.7)]',
+  }[po.status] || ''
+
+  const statusLabelColor = {
+    idle: 'text-po-text-ghost',
+    thinking: 'text-po-status-active',
+    calling_tool: 'text-po-status-calling',
+  }[po.status] || 'text-po-text-ghost'
+
+  const statusLabel = {
+    idle: 'idle',
+    thinking: 'thinking...',
+    calling_tool: 'calling tool...',
+  }[po.status] || po.status
+
+  const handleThreadContextMenu = (e: React.MouseEvent, sessionId: string) => {
+    e.preventDefault()
+    setContextMenu({ x: e.clientX, y: e.clientY, sessionId })
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Inspector Header */}
+      <div className="h-8 bg-po-surface-2 border-b border-po-border flex items-center px-3 gap-2 flex-shrink-0">
+        <div className="relative flex-shrink-0">
+          <div className={`w-2 h-2 rounded-full ${statusDot} ${statusGlow} ${isActive ? 'animate-pulse' : ''}`} />
+        </div>
+        <span className="font-mono text-xs text-po-text-primary font-medium">{po.name}</span>
+        <span className={`text-2xs font-medium truncate ${statusLabelColor} ${isActive ? 'animate-pulse' : ''}`}>{statusLabel}</span>
+        {po.description && (
+          <span className="text-2xs text-po-text-ghost truncate hidden sm:inline">{po.description}</span>
+        )}
+        {notifications.length > 0 && (
+          <span className="text-2xs font-mono bg-po-warning text-po-bg px-1 rounded font-bold">
+            {notifications.length}
+          </span>
+        )}
+
+        <div className="flex-1" />
+
+        {/* Thread picker */}
+        <div className="relative">
+          <button
+            onClick={() => setThreadMenuOpen(!threadMenuOpen)}
+            className="flex items-center gap-1 text-2xs text-po-text-secondary hover:text-po-text-primary transition-colors duration-150"
+          >
+            <span className="font-mono">
+              {currentSessionId
+                ? sessions.find(s => s.id === currentSessionId)?.name || `Thread ${currentSessionId.slice(0, 6)}`
+                : 'No thread'}
+            </span>
+            <svg className={`w-3 h-3 transition-transform ${threadMenuOpen ? '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>
+
+          {threadMenuOpen && (
+            <div className="absolute right-0 top-full mt-1 w-56 bg-po-surface-2 border border-po-border rounded shadow-xl z-50 overflow-hidden">
+              <button
+                onClick={() => { createThread(po.name); setThreadMenuOpen(false) }}
+                className="w-full text-left px-2.5 py-1.5 text-xs text-po-accent hover:bg-po-surface-3 transition-colors duration-150 border-b border-po-border"
+              >
+                + New Thread
+              </button>
+              <div className="max-h-48 overflow-auto">
+                {sortedSessions.map((session) => (
+                  <button
+                    key={session.id}
+                    onClick={() => { switchSession(po.name, session.id); setThreadMenuOpen(false) }}
+                    onContextMenu={(e) => handleThreadContextMenu(e, session.id)}
+                    className={`w-full text-left px-2.5 py-1.5 text-xs transition-colors duration-150 ${
+                      session.id === currentSessionId
+                        ? 'bg-po-accent-wash text-po-accent'
+                        : 'text-po-text-secondary hover:bg-po-surface-3'
+                    }`}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      {session.thread_type === 'delegation' && <span className="text-po-status-delegated">&#8627;</span>}
+                      <span className="font-mono truncate flex-1">
+                        {session.name || `Thread ${session.id.slice(0, 6)}`}
+                      </span>
+                      <span className="text-2xs text-po-text-ghost">{session.message_count}m</span>
+                    </div>
+                    {session.parent_po && (
+                      <div className="text-2xs text-po-status-delegated mt-0.5">from {session.parent_po}</div>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Top: Methods + Source (collapsible, resizable height) */}
+      <PaneSlot
+        label="Methods | Source"
+        collapsed={topPaneCollapsed}
+        onToggle={toggleTopPane}
+        height={topPaneResize.size}
+        resizeHandle={
+          <div
+            className="resize-handle-h"
+            onMouseDown={topPaneResize.onMouseDown}
+          />
+        }
+      >
+        <div className="flex h-full">
+          {/* Method List (resizable width) */}
+          <div style={{ width: methodListResize.size }} className="flex-shrink-0">
+            <MethodList
+              po={po}
+              selectedCapability={selectedCapability}
+              onSelectCapability={setSelectedCapability}
+            />
+          </div>
+
+          {/* Resize handle */}
+          <div
+            className="resize-handle"
+            onMouseDown={methodListResize.onMouseDown}
+          />
+
+          {/* Source Pane */}
+          <SourcePane
+            po={po}
+            selectedCapability={selectedCapability}
+            onSave={(prompt) => updatePrompt(po.name, prompt)}
+          />
+        </div>
+      </PaneSlot>
+
+      {/* Middle: Env Data (collapsible, resizable height) */}
+      <PaneSlot
+        label={`Env Data${envDataEntries.length > 0 ? ` (${envDataEntries.length})` : ''}`}
+        collapsed={envDataPaneCollapsed}
+        onToggle={toggleEnvDataPane}
+        height={envDataResize.size}
+        resizeHandle={
+          <div
+            className="resize-handle-h"
+            onMouseDown={envDataResize.onMouseDown}
+          />
+        }
+      >
+        <EnvDataPane sessionId={currentSessionId} requestEnvData={requestEnvData} />
+      </PaneSlot>
+
+      {/* Bottom: Workspace */}
+      <div className="flex-1 overflow-hidden">
+        <Workspace po={po} sendMessage={sendMessage} />
+      </div>
+
+      {/* Context menu for thread right-click */}
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+          items={[
+            ...(requestUsage ? [
+              { label: 'View Usage', onClick: () => requestUsage(contextMenu.sessionId) },
+              { label: 'View Tree Usage', onClick: () => requestUsage(contextMenu.sessionId, true) },
+            ] : []),
+            ...(exportThread ? [
+              { label: 'Export Markdown', onClick: () => exportThread(contextMenu.sessionId, 'markdown') },
+              { label: 'Export JSON', onClick: () => exportThread(contextMenu.sessionId, 'json') },
+            ] : []),
+          ]}
+        />
+      )}
+    </div>
+  )
+}

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"