prompt_objects 0.6.0 → 0.7.0

data/frontend/src/components/Inspector.tsx

@@ -1,263 +0,0 @@
-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

@@ -1,155 +0,0 @@
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import { useState } from 'react'
-
-interface MarkdownMessageProps {
-  content: string
-  className?: string
-}
-
-export function MarkdownMessage({ content, className = '' }: MarkdownMessageProps) {
-  return (
-    <div className={`markdown-content ${className}`}>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-          // Code blocks with syntax highlighting
-          code({ className, children, ...props }) {
-            const match = /language-(\w+)/.exec(className || '')
-            const language = match ? match[1] : ''
-            const codeString = String(children).replace(/\n$/, '')
-            const isBlock = codeString.includes('\n') || match
-
-            if (isBlock) {
-              return (
-                <CodeBlock language={language} code={codeString} />
-              )
-            }
-
-            return (
-              <code
-                className="bg-po-surface-2 px-1 py-0.5 rounded text-po-accent font-mono text-[0.9em]"
-                {...props}
-              >
-                {children}
-              </code>
-            )
-          },
-          // Styled links
-          a({ href, children }) {
-            return (
-              <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-po-accent hover:underline"
-              >
-                {children}
-              </a>
-            )
-          },
-          // Styled paragraphs
-          p({ children }) {
-            return <p className="mb-2 last:mb-0">{children}</p>
-          },
-          // Styled lists
-          ul({ children }) {
-            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-2 space-y-0.5">{children}</ol>
-          },
-          // Styled headings
-          h1({ children }) {
-            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-sm font-bold mb-1.5 mt-2 first:mt-0 text-po-text-primary">{children}</h2>
-          },
-          h3({ children }) {
-            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-2 border-po-accent pl-3 my-2 text-po-text-secondary italic">
-                {children}
-              </blockquote>
-            )
-          },
-          // Styled tables
-          table({ children }) {
-            return (
-              <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-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-2 py-1 text-po-text-secondary">{children}</td>
-            )
-          },
-          // Horizontal rule
-          hr() {
-            return <hr className="border-po-border my-3" />
-          },
-        }}
-      >
-        {content}
-      </ReactMarkdown>
-    </div>
-  )
-}
-
-function CodeBlock({ language, code }: { language: string; code: string }) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(code)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
-  return (
-    <div className="relative group my-2">
-      {/* Language label and copy button */}
-      <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-2xs text-po-text-ghost hover:text-po-text-primary transition-colors duration-150"
-        >
-          {copied ? 'Copied' : 'Copy'}
-        </button>
-      </div>
-      {/* Code with syntax highlighting */}
-      <SyntaxHighlighter
-        style={oneDark}
-        language={language || 'text'}
-        PreTag="div"
-        customStyle={{
-          margin: 0,
-          borderRadius: '0 0 0.25rem 0.25rem',
-          border: '1px solid #3d3a37',
-          borderTop: 'none',
-          fontSize: '11px',
-          background: '#222120',
-        }}
-      >
-        {code}
-      </SyntaxHighlighter>
-    </div>
-  )
-}

data/frontend/src/components/MethodList.tsx

@@ -1,90 +0,0 @@
-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

@@ -1,115 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { useStore } from '../store'
-
-interface Props {
-  switchLLM: (provider: string, model?: string) => void
-}
-
-export function ModelSelector({ switchLLM }: Props) {
-  const { llmConfig } = useStore()
-  const [isOpen, setIsOpen] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
-
-  if (!llmConfig) return null
-
-  const handleSelectModel = (provider: string, model: string) => {
-    switchLLM(provider, model)
-    setIsOpen(false)
-  }
-
-  const providerNames: Record<string, string> = {
-    openai: 'OpenAI',
-    anthropic: 'Anthropic',
-    gemini: 'Gemini',
-    ollama: 'Ollama',
-    openrouter: 'OpenRouter',
-  }
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        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-po-text-tertiary">
-          {providerNames[llmConfig.current_provider] || llmConfig.current_provider}
-        </span>
-        <span className="font-mono text-po-text-primary">{llmConfig.current_model}</span>
-        <svg
-          className={`w-3 h-3 text-po-text-ghost transition-transform ${isOpen ? '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>
-
-      {isOpen && (
-        <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-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-po-error text-2xs normal-case">
-                    {provider.name === 'ollama' ? 'Not Running' : 'No API Key'}
-                  </span>
-                )}
-              </div>
-              {provider.models.map((model) => {
-                const isSelected =
-                  provider.name === llmConfig.current_provider &&
-                  model === llmConfig.current_model
-                const isAvailable = provider.available
-                const isDefault = model === provider.default_model
-
-                return (
-                  <button
-                    key={`${provider.name}-${model}`}
-                    onClick={() => isAvailable && handleSelectModel(provider.name, model)}
-                    disabled={!isAvailable}
-                    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-wash text-po-accent'
-                        : isAvailable
-                        ? '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-2xs text-po-text-ghost">(default)</span>
-                      )}
-                    </span>
-                    {isSelected && (
-                      <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"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    )}
-                  </button>
-                )
-              })}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}