prompt_objects 0.5.0 → 0.7.0

data/frontend/src/components/SourcePane.tsx

@@ -1,202 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import type { PromptObject, CapabilityInfo } from '../types'
-
-interface SourcePaneProps {
-  po: PromptObject
-  selectedCapability: CapabilityInfo | null
-  onSave?: (prompt: string) => void
-}
-
-export function SourcePane({ po, selectedCapability, onSave }: SourcePaneProps) {
-  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)
-        setTimeout(() => setSaveStatus('saved'), 500)
-      } else {
-        setSaveStatus('saved')
-      }
-    }, 1000)
-  }, [onSave, prompt])
-
-  const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newPrompt = e.target.value
-    setEditedPrompt(newPrompt)
-    debouncedSave(newPrompt)
-  }
-
-  const handleToggleEdit = () => {
-    if (isEditing) {
-      // Save on exit
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current)
-      }
-      if (editedPrompt !== prompt && onSave) {
-        onSave(editedPrompt)
-      }
-      setIsEditing(false)
-      setSaveStatus('saved')
-    } else {
-      setEditedPrompt(prompt)
-      setIsEditing(true)
-    }
-  }
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current)
-      }
-    }
-  }, [])
-
-  // Capability detail view
-  if (selectedCapability) {
-    return (
-      <div className="flex-1 overflow-auto bg-po-bg">
-        <div className="px-3 py-2 border-b border-po-border bg-po-surface">
-          <span className="font-mono text-xs text-po-accent">{selectedCapability.name}</span>
-        </div>
-        <div className="p-3 space-y-3">
-          <p className="text-xs text-po-text-secondary">{selectedCapability.description}</p>
-          {selectedCapability.parameters && (
-            <ParametersView parameters={selectedCapability.parameters} />
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  // Prompt source view
-  return (
-    <div className="flex-1 overflow-auto bg-po-bg flex flex-col">
-      {/* Header with edit toggle and save status */}
-      <div className="px-3 py-1.5 border-b border-po-border bg-po-surface flex items-center gap-2 flex-shrink-0">
-        <span className="text-2xs text-po-text-ghost uppercase tracking-wider flex-1">Source</span>
-
-        {isEditing && (
-          <span className="flex items-center gap-1">
-            <span className={`w-1.5 h-1.5 rounded-full ${
-              saveStatus === 'saved' ? 'bg-po-success' :
-              saveStatus === 'saving' ? 'bg-po-accent animate-pulse' :
-              'bg-po-text-ghost'
-            }`} />
-            <span className={`text-2xs ${
-              saveStatus === 'saved' ? 'text-po-success' :
-              saveStatus === 'saving' ? 'text-po-accent' :
-              'text-po-text-ghost'
-            }`}>
-              {saveStatus === 'saved' ? 'saved' : saveStatus === 'saving' ? 'saving' : 'unsaved'}
-            </span>
-          </span>
-        )}
-
-        <button
-          onClick={handleToggleEdit}
-          className={`text-2xs px-1.5 py-0.5 rounded transition-colors duration-150 ${
-            isEditing
-              ? 'bg-po-accent text-po-bg'
-              : 'text-po-text-tertiary hover:text-po-text-primary hover:bg-po-surface-2'
-          }`}
-        >
-          {isEditing ? 'Done' : 'Edit'}
-        </button>
-      </div>
-
-      {/* Config (collapsed) */}
-      {Object.keys(config).length > 0 && (
-        <details className="border-b border-po-border">
-          <summary className="px-3 py-1 text-2xs text-po-text-ghost cursor-pointer hover:text-po-text-secondary transition-colors duration-150">
-            Frontmatter
-          </summary>
-          <pre className="px-3 pb-2 text-2xs text-po-text-tertiary font-mono whitespace-pre-wrap">
-            {JSON.stringify(config, null, 2)}
-          </pre>
-        </details>
-      )}
-
-      {/* Prompt content */}
-      {isEditing ? (
-        <textarea
-          value={editedPrompt}
-          onChange={handlePromptChange}
-          className="flex-1 w-full p-3 bg-transparent text-po-text-primary font-mono text-xs resize-none focus:outline-none"
-          placeholder="Enter prompt markdown..."
-          spellCheck={false}
-        />
-      ) : (
-        <pre className="flex-1 p-3 text-xs text-po-text-secondary font-mono whitespace-pre-wrap overflow-auto">
-          {prompt || '(empty)'}
-        </pre>
-      )}
-    </div>
-  )
-}
-
-function ParametersView({ parameters }: { parameters: Record<string, unknown> }) {
-  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-2xs text-po-text-ghost uppercase tracking-wider mb-1.5">Parameters</div>
-      <div className="space-y-1.5">
-        {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-surface rounded p-2">
-              <div className="flex items-center gap-1.5">
-                <span className="font-mono text-2xs text-po-accent">{propName}</span>
-                {propType && <span className="text-2xs text-po-text-ghost">({propType})</span>}
-                {isRequired && <span className="text-2xs text-po-error">req</span>}
-              </div>
-              {propDescription && (
-                <p className="text-2xs text-po-text-tertiary mt-0.5">{propDescription}</p>
-              )}
-              {propEnum && propEnum.length > 0 && (
-                <div className="mt-1 flex flex-wrap gap-1">
-                  {propEnum.map((val) => (
-                    <span key={val} className="text-2xs bg-po-surface-2 px-1 py-0.5 rounded text-po-text-ghost">
-                      {val}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}

data/frontend/src/components/SystemBar.tsx

@@ -1,74 +0,0 @@
-import { useStore, useNotificationCount } from '../store'
-import { ModelSelector } from './ModelSelector'
-
-interface Props {
-  switchLLM: (provider: string, model?: string) => void
-}
-
-export function SystemBar({ switchLLM }: Props) {
-  const { connected, environment, toggleBus, busOpen, currentView, setCurrentView } =
-    useStore()
-  const notificationCount = useNotificationCount()
-
-  return (
-    <header className="h-8 bg-po-surface-2 border-b border-po-border flex items-center px-3 gap-3 flex-shrink-0">
-      {/* Logo / Environment */}
-      <div className="flex items-center gap-1.5 text-xs">
-        <span className="font-mono text-po-text-primary font-medium">PromptObjects</span>
-        {environment && (
-          <>
-            <span className="text-po-text-ghost">/</span>
-            <span className="text-po-text-secondary">{environment.name}</span>
-          </>
-        )}
-      </div>
-
-      <div className="flex-1" />
-
-      {/* Connection dot */}
-      <div
-        className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
-          connected ? 'bg-po-success' : 'bg-po-error animate-pulse'
-        }`}
-        title={connected ? 'Connected' : 'Disconnected'}
-      />
-
-      {/* Model selector */}
-      <ModelSelector switchLLM={switchLLM} />
-
-      {/* Notification count */}
-      {notificationCount > 0 && (
-        <span
-          className="text-2xs font-mono bg-po-warning text-po-bg px-1.5 py-0.5 rounded font-bold"
-          title={`${notificationCount} pending requests`}
-        >
-          {notificationCount}
-        </span>
-      )}
-
-      {/* Canvas toggle */}
-      <button
-        onClick={() => setCurrentView(currentView === 'canvas' ? 'dashboard' : 'canvas')}
-        className={`text-xs px-2 py-0.5 rounded transition-colors duration-150 ${
-          currentView === 'canvas'
-            ? 'bg-po-accent text-po-bg font-medium'
-            : 'text-po-text-secondary hover:text-po-text-primary hover:bg-po-surface-3'
-        }`}
-      >
-        Canvas
-      </button>
-
-      {/* Transcript toggle */}
-      <button
-        onClick={toggleBus}
-        className={`text-xs px-2 py-0.5 rounded transition-colors duration-150 ${
-          busOpen
-            ? 'bg-po-accent text-po-bg font-medium'
-            : 'text-po-text-secondary hover:text-po-text-primary hover:bg-po-surface-3'
-        }`}
-      >
-        Transcript
-      </button>
-    </header>
-  )
-}

data/frontend/src/components/Transcript.tsx

@@ -1,76 +0,0 @@
-import { useRef, useEffect, useState } from 'react'
-import { useStore } from '../store'
-
-export function Transcript() {
-  const { busMessages, toggleBus } = useStore()
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [busMessages])
-
-  return (
-    <div className="h-full flex flex-col border-t border-po-border">
-      {/* Header */}
-      <div className="h-6 bg-po-surface-2 border-b border-po-border flex items-center px-3 flex-shrink-0">
-        <span className="text-2xs font-medium text-po-text-ghost uppercase tracking-wider flex-1">
-          Transcript
-        </span>
-        <button
-          onClick={toggleBus}
-          className="text-2xs text-po-text-ghost hover:text-po-text-secondary transition-colors duration-150"
-        >
-          {'\u2715'}
-        </button>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-auto px-3 py-1 font-mono">
-        {busMessages.length === 0 ? (
-          <div className="text-2xs text-po-text-ghost text-center py-2">
-            No messages
-          </div>
-        ) : (
-          busMessages.map((msg, index) => (
-            <TranscriptRow key={index} msg={msg} />
-          ))
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-    </div>
-  )
-}
-
-function TranscriptRow({ msg }: { msg: { from: string; to: string; content: string | Record<string, unknown>; summary?: string; timestamp: string } }) {
-  const [expanded, setExpanded] = useState(false)
-  const fullText = msg.summary || (typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content, null, 2))
-  const isLong = fullText.length > 120
-  const truncated = isLong ? fullText.slice(0, 120) + '...' : fullText
-
-  return (
-    <div>
-      <div
-        onClick={() => isLong && setExpanded(!expanded)}
-        className={`text-2xs leading-relaxed flex items-baseline gap-1.5 ${isLong ? 'cursor-pointer hover:bg-po-surface-2' : ''} ${expanded ? 'bg-po-surface-2' : ''}`}
-      >
-        <span className="text-po-text-ghost flex-shrink-0 whitespace-nowrap">
-          {new Date(msg.timestamp).toLocaleTimeString('en-US', { hour12: false })}
-        </span>
-        <span className="text-po-accent flex-shrink-0">{msg.from}</span>
-        <span className="text-po-text-ghost">{'\u2192'}</span>
-        <span className="text-po-status-calling flex-shrink-0">{msg.to}</span>
-        {!expanded && (
-          <span className="text-po-text-secondary truncate">{truncated}</span>
-        )}
-        {isLong && (
-          <span className="text-po-text-ghost flex-shrink-0 ml-auto">{expanded ? '\u25BC' : '\u25B8'}</span>
-        )}
-      </div>
-      {expanded && (
-        <pre className="text-2xs text-po-text-secondary whitespace-pre-wrap break-all pl-[4.5rem] pb-1.5 bg-po-surface-2 rounded-b mb-0.5">
-          {fullText}
-        </pre>
-      )}
-    </div>
-  )
-}

data/frontend/src/components/UsagePanel.tsx

@@ -1,105 +0,0 @@
-interface UsageData {
-  session_id: string
-  include_tree: boolean
-  input_tokens: number
-  output_tokens: number
-  total_tokens: number
-  estimated_cost_usd: number
-  calls: number
-  by_model: Record<string, {
-    input_tokens: number
-    output_tokens: number
-    estimated_cost_usd: number
-    calls: number
-  }>
-}
-
-interface UsagePanelProps {
-  usage: UsageData
-  onClose: () => void
-}
-
-function formatTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
-  return n.toString()
-}
-
-function formatCost(usd: number): string {
-  if (usd === 0) return '$0.00'
-  if (usd < 0.01) return `$${usd.toFixed(4)}`
-  return `$${usd.toFixed(2)}`
-}
-
-export function UsagePanel({ usage, onClose }: UsagePanelProps) {
-  const models = Object.entries(usage.by_model)
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div
-        className="bg-po-surface-2 border border-po-border rounded shadow-2xl w-[400px] max-h-[80vh] overflow-auto"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between px-4 py-2.5 border-b border-po-border">
-          <h3 className="font-mono text-xs text-po-text-primary">
-            Token Usage {usage.include_tree && <span className="text-po-text-ghost ml-1">(full tree)</span>}
-          </h3>
-          <button onClick={onClose} className="text-po-text-ghost hover:text-po-text-primary transition-colors duration-150">
-            {'\u2715'}
-          </button>
-        </div>
-
-        <div className="p-4 space-y-4">
-          {/* Summary */}
-          <div className="grid grid-cols-3 gap-2">
-            <div className="bg-po-surface rounded p-2.5 text-center">
-              <div className="text-sm font-mono text-po-accent">{formatTokens(usage.input_tokens)}</div>
-              <div className="text-2xs text-po-text-ghost uppercase tracking-wider mt-0.5">Input</div>
-            </div>
-            <div className="bg-po-surface rounded p-2.5 text-center">
-              <div className="text-sm font-mono text-po-warning">{formatTokens(usage.output_tokens)}</div>
-              <div className="text-2xs text-po-text-ghost uppercase tracking-wider mt-0.5">Output</div>
-            </div>
-            <div className="bg-po-surface rounded p-2.5 text-center">
-              <div className="text-sm font-mono text-po-text-primary">{formatCost(usage.estimated_cost_usd)}</div>
-              <div className="text-2xs text-po-text-ghost uppercase tracking-wider mt-0.5">Est. Cost</div>
-            </div>
-          </div>
-
-          <div className="flex justify-between text-2xs text-po-text-ghost px-1 font-mono">
-            <span>{usage.calls} call{usage.calls !== 1 ? 's' : ''}</span>
-            <span>{formatTokens(usage.total_tokens)} total</span>
-          </div>
-
-          {/* Per-model breakdown */}
-          {models.length > 0 && (
-            <div>
-              <h4 className="text-2xs text-po-text-ghost uppercase tracking-wider mb-2">By Model</h4>
-              <div className="space-y-1.5">
-                {models.map(([model, data]) => (
-                  <div key={model} className="bg-po-surface rounded p-2.5">
-                    <div className="flex items-center justify-between mb-1">
-                      <span className="text-xs font-mono text-po-text-primary">{model}</span>
-                      <span className="text-2xs text-po-text-ghost">{data.calls} call{data.calls !== 1 ? 's' : ''}</span>
-                    </div>
-                    <div className="flex justify-between text-2xs text-po-text-ghost font-mono">
-                      <span>In: {formatTokens(data.input_tokens)}</span>
-                      <span>Out: {formatTokens(data.output_tokens)}</span>
-                      <span>{formatCost(data.estimated_cost_usd)}</span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {usage.calls === 0 && (
-            <div className="text-center text-po-text-ghost text-xs py-4 font-mono">
-              No usage data recorded.
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}