prompt_objects 0.6.0 → 0.7.0

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>
-  )
-}

data/frontend/src/components/Workspace.tsx

@@ -1,260 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-import { useStore } from '../store'
-import { MarkdownMessage } from './MarkdownMessage'
-import type { PromptObject, Message, ToolCall } from '../types'
-
-interface WorkspaceProps {
-  po: PromptObject
-  sendMessage: (target: string, content: string, newThread?: boolean) => void
-}
-
-export function Workspace({ po, sendMessage }: WorkspaceProps) {
-  const [input, setInput] = useState('')
-  const [continueThread, setContinueThread] = useState(false)
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const { streamingContent, connected } = useStore()
-
-  const messages = po.current_session?.messages || []
-  const streaming = streamingContent[po.name]
-  const hasMessages = messages.length > 0
-  const isBusy = po.status !== 'idle' && connected
-  const canSend = connected && !isBusy && !!input.trim()
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages, streaming])
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!input.trim()) return
-    const content = input.trim()
-    const shouldCreateNewThread = !continueThread && hasMessages
-    sendMessage(po.name, content, shouldCreateNewThread)
-    setInput('')
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      if (canSend) {
-        handleSubmit(e)
-      }
-    }
-  }
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* Messages */}
-      <div className="flex-1 overflow-auto px-4 py-2 space-y-1">
-        {messages.length === 0 && !streaming && (
-          <div className="h-full flex items-center justify-center">
-            <span className="font-mono text-xs text-po-text-ghost">&gt; _</span>
-          </div>
-        )}
-
-        {messages.map((message, index) => (
-          <WorkspaceEntry key={index} message={message} />
-        ))}
-
-        {/* Streaming content */}
-        {streaming && (
-          <div className="py-1">
-            <MarkdownMessage content={streaming} className="text-po-text-primary text-xs" />
-            <span className="inline-block w-1.5 h-3.5 bg-po-accent animate-pulse ml-0.5 align-text-bottom" />
-          </div>
-        )}
-
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <div className="border-t border-po-border bg-po-surface-2 px-4 py-2">
-        {!connected && (
-          <div className="mb-1.5 text-2xs text-po-warning flex items-center gap-1.5 font-mono">
-            <div className="w-1.5 h-1.5 rounded-full bg-po-warning animate-pulse" />
-            reconnecting...
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="flex items-center gap-2">
-          <span className="text-po-text-ghost font-mono text-xs select-none">&gt;</span>
-          <input
-            type="text"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={!connected ? 'disconnected' : isBusy ? `${po.status.replace('_', ' ')}...` : ''}
-            className="flex-1 bg-transparent text-po-text-primary font-mono text-xs placeholder-po-text-ghost focus:outline-none disabled:opacity-50"
-            disabled={isBusy}
-          />
-        </form>
-
-        {/* Thread toggle */}
-        {hasMessages && (
-          <div className="flex items-center gap-2 mt-1.5 text-2xs font-mono">
-            <button
-              type="button"
-              onClick={() => setContinueThread(false)}
-              className={`px-1.5 py-0.5 rounded transition-colors duration-150 ${
-                !continueThread
-                  ? 'bg-po-accent-wash text-po-accent'
-                  : 'text-po-text-ghost hover:text-po-text-secondary'
-              }`}
-            >
-              new thread
-            </button>
-            <button
-              type="button"
-              onClick={() => setContinueThread(true)}
-              className={`px-1.5 py-0.5 rounded transition-colors duration-150 ${
-                continueThread
-                  ? 'bg-po-accent-wash text-po-accent'
-                  : 'text-po-text-ghost hover:text-po-text-secondary'
-              }`}
-            >
-              continue
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function WorkspaceEntry({ message }: { message: Message }) {
-  const isUser = message.role === 'user'
-  const isAssistant = message.role === 'assistant'
-  const isTool = message.role === 'tool'
-
-  // Tool results
-  if (isTool) {
-    const results = message.results || []
-    if (results.length === 0) return null
-    return (
-      <div className="space-y-1 pl-4">
-        {results.map((result, idx) => (
-          <ToolResultFrame key={result.tool_call_id || idx} result={result} />
-        ))}
-      </div>
-    )
-  }
-
-  // User message: REPL-style "> message"
-  if (isUser) {
-    return (
-      <div className="py-1">
-        <span className="font-mono text-xs text-po-text-ghost select-none">&gt; </span>
-        <span className="font-mono text-xs text-po-text-primary whitespace-pre-wrap">{message.content}</span>
-      </div>
-    )
-  }
-
-  // Assistant message: plain text with markdown
-  if (isAssistant) {
-    return (
-      <div className="py-1">
-        {message.content && (
-          <MarkdownMessage content={message.content} className="text-po-text-primary text-xs" />
-        )}
-
-        {/* Tool calls as bordered frames */}
-        {message.tool_calls && message.tool_calls.length > 0 && (
-          <div className="mt-1 space-y-1">
-            {message.tool_calls.map((tc) => (
-              <ToolCallFrame key={tc.id} toolCall={tc} />
-            ))}
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  return null
-}
-
-function ToolCallFrame({ toolCall }: { toolCall: ToolCall }) {
-  const [expanded, setExpanded] = useState(false)
-  const { notifications } = useStore()
-
-  // ask_human: amber-bordered frame
-  if (toolCall.name === 'ask_human') {
-    const question = toolCall.arguments.question as string
-    const options = toolCall.arguments.options as string[] | undefined
-    const isPending = notifications.some((n) => n.message === question)
-
-    return (
-      <div className="border-l-2 border-po-warning bg-po-accent-wash rounded-r px-3 py-2 my-1">
-        <div className="flex items-center gap-2 mb-1">
-          <span className="text-2xs font-mono text-po-warning">ask_human</span>
-          {isPending ? (
-            <span className="text-2xs bg-po-warning text-po-bg px-1.5 py-0.5 rounded font-bold animate-pulse">
-              PENDING
-            </span>
-          ) : (
-            <span className="text-2xs bg-po-success text-po-bg px-1.5 py-0.5 rounded font-bold">
-              RESOLVED
-            </span>
-          )}
-        </div>
-        <p className="text-xs text-po-text-primary mb-1.5">{question}</p>
-        {options && options.length > 0 && (
-          <div className="flex flex-wrap gap-1.5">
-            {options.map((opt, i) => (
-              <span key={i} className="text-2xs font-mono bg-po-surface-2 px-1.5 py-0.5 rounded text-po-text-secondary">
-                {opt}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  // Default tool call: bordered frame
-  const argsStr = JSON.stringify(toolCall.arguments, null, 2)
-
-  return (
-    <div className="border-l-2 border-po-status-calling rounded-r overflow-hidden my-1">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="w-full text-left px-3 py-1 flex items-center gap-1.5 hover:bg-po-surface-2 transition-colors duration-150 bg-po-surface"
-      >
-        <span className="text-2xs text-po-text-ghost">{expanded ? '\u25BC' : '\u25B8'}</span>
-        <span className="text-xs font-mono text-po-status-calling">{toolCall.name}</span>
-        <span className="text-2xs text-po-text-ghost">
-          ({Object.keys(toolCall.arguments).length} args)
-        </span>
-      </button>
-      {expanded && (
-        <pre className="px-3 py-1.5 bg-po-surface text-2xs text-po-text-tertiary font-mono whitespace-pre-wrap break-all">
-          {argsStr}
-        </pre>
-      )}
-    </div>
-  )
-}
-
-function ToolResultFrame({ result }: { result: { tool_call_id: string; name?: string; content: string } }) {
-  const [expanded, setExpanded] = useState(false)
-  const content = result.content || ''
-  const chars = content.length
-
-  return (
-    <div className="border-l-2 border-po-status-calling rounded-r overflow-hidden my-0.5">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="w-full text-left px-3 py-1 flex items-center gap-1.5 hover:bg-po-surface-2 transition-colors duration-150 bg-po-surface"
-      >
-        <span className="text-2xs text-po-text-ghost">{expanded ? '\u25BC' : '\u25B8'}</span>
-        <span className="text-2xs text-po-text-tertiary">Result</span>
-        {result.name && <span className="text-2xs text-po-status-calling font-mono">{result.name}</span>}
-        <span className="text-2xs text-po-text-ghost">({chars} chars)</span>
-      </button>
-      {expanded && (
-        <pre className="px-3 py-1.5 bg-po-surface text-2xs text-po-text-tertiary font-mono whitespace-pre-wrap break-all">
-          {content}
-        </pre>
-      )}
-    </div>
-  )
-}

data/frontend/src/components/index.ts

@@ -1,12 +0,0 @@
-export { SystemBar } from './SystemBar'
-export { ObjectList } from './ObjectList'
-export { Inspector } from './Inspector'
-export { MethodList } from './MethodList'
-export { SourcePane } from './SourcePane'
-export { Workspace } from './Workspace'
-export { Transcript } from './Transcript'
-export { NotificationPanel } from './NotificationPanel'
-export { MarkdownMessage } from './MarkdownMessage'
-export { ModelSelector } from './ModelSelector'
-export { ContextMenu } from './ContextMenu'
-export { UsagePanel } from './UsagePanel'

data/frontend/src/hooks/useResize.ts

@@ -1,55 +0,0 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
-
-interface UseResizeOptions {
-  direction: 'horizontal' | 'vertical'
-  initialSize: number
-  minSize: number
-  maxSize: number
-  /** If true, dragging down/right increases size. If false (for bottom panels), dragging up increases. */
-  inverted?: boolean
-}
-
-export function useResize({ direction, initialSize, minSize, maxSize, inverted = false }: UseResizeOptions) {
-  const [size, setSize] = useState(initialSize)
-  const dragging = useRef(false)
-  const startPos = useRef(0)
-  const startSize = useRef(0)
-
-  const onMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    dragging.current = true
-    startPos.current = direction === 'horizontal' ? e.clientX : e.clientY
-    startSize.current = size
-    document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize'
-    document.body.style.userSelect = 'none'
-  }, [direction, size])
-
-  useEffect(() => {
-    const onMouseMove = (e: MouseEvent) => {
-      if (!dragging.current) return
-      const currentPos = direction === 'horizontal' ? e.clientX : e.clientY
-      const delta = currentPos - startPos.current
-      const newSize = inverted
-        ? startSize.current - delta
-        : startSize.current + delta
-      setSize(Math.min(maxSize, Math.max(minSize, newSize)))
-    }
-
-    const onMouseUp = () => {
-      if (dragging.current) {
-        dragging.current = false
-        document.body.style.cursor = ''
-        document.body.style.userSelect = ''
-      }
-    }
-
-    document.addEventListener('mousemove', onMouseMove)
-    document.addEventListener('mouseup', onMouseUp)
-    return () => {
-      document.removeEventListener('mousemove', onMouseMove)
-      document.removeEventListener('mouseup', onMouseUp)
-    }
-  }, [direction, minSize, maxSize, inverted])
-
-  return { size, onMouseDown }
-}