pragma-so 0.1.0

package/ui/src/components/testing/ApiTesterPanel.jsx

@@ -0,0 +1,187 @@
+import { useState } from 'react'
+import { proxyTestingRequest } from '../../api'
+
+function statusClass(code) {
+  if (code >= 200 && code < 300) return 'success'
+  if (code >= 400 && code < 500) return 'client-error'
+  return 'server-error'
+}
+
+function hasBody(method) {
+  return ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method?.toUpperCase())
+}
+
+function EndpointCard({ taskId, endpoint, panel, services, processStatuses, defaultExpanded }) {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const [bodyText, setBodyText] = useState(() => {
+    if (endpoint.body == null) return ''
+    if (typeof endpoint.body === 'string') return endpoint.body
+    return JSON.stringify(endpoint.body, null, 2)
+  })
+  const [headersEntries, setHeadersEntries] = useState(() => {
+    if (endpoint.headers && typeof endpoint.headers === 'object') {
+      return Object.entries(endpoint.headers).map(([k, v]) => ({ key: k, value: v }))
+    }
+    return []
+  })
+  const [responseData, setResponseData] = useState(null)
+  const [responseLoading, setResponseLoading] = useState(false)
+  const [responseError, setResponseError] = useState('')
+
+  const method = (endpoint.method || 'GET').toUpperCase()
+  const path = endpoint.path || '/'
+  const description = endpoint.description || ''
+
+  const processName = panel.process || ''
+  const svc = services[processName]
+  const svcStatus = svc?.id ? (processStatuses[svc.id] || svc.status) : null
+  const isReady = svcStatus === 'ready'
+
+  function addHeader() {
+    setHeadersEntries(prev => [...prev, { key: '', value: '' }])
+  }
+
+  function removeHeader(index) {
+    setHeadersEntries(prev => prev.filter((_, i) => i !== index))
+  }
+
+  function updateHeader(index, field, value) {
+    setHeadersEntries(prev => prev.map((h, i) => i === index ? { ...h, [field]: value } : h))
+  }
+
+  async function handleSend() {
+    if (responseLoading || !isReady) return
+    setResponseLoading(true)
+    setResponseError('')
+    setResponseData(null)
+
+    const hdrs = {}
+    for (const h of headersEntries) {
+      if (h.key.trim()) hdrs[h.key.trim()] = h.value
+    }
+
+    try {
+      const result = await proxyTestingRequest(taskId, {
+        process_name: processName,
+        method,
+        path,
+        headers: Object.keys(hdrs).length > 0 ? hdrs : undefined,
+        body: hasBody(method) && bodyText.trim() ? bodyText.trim() : undefined,
+      })
+      setResponseData(result)
+    } catch (err) {
+      setResponseError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setResponseLoading(false)
+    }
+  }
+
+  return (
+    <div className="api-endpoint-card">
+      <div className="api-endpoint-header" onClick={() => setExpanded(v => !v)}>
+        <span className={`api-method-badge ${method.toLowerCase()}`}>{method}</span>
+        <span className="api-endpoint-path">{path}</span>
+        {description && <span className="api-endpoint-desc">{description}</span>}
+        <span style={{ marginLeft: 'auto', opacity: 0.4, fontSize: 11 }}>{expanded ? '▲' : '▼'}</span>
+      </div>
+
+      {expanded && (
+        <div className="api-endpoint-body">
+          <div className="api-headers-editor">
+            <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 4, opacity: 0.7 }}>Headers</div>
+            {headersEntries.map((h, i) => (
+              <div key={i} className="api-header-row">
+                <input
+                  className="api-header-input"
+                  placeholder="Key"
+                  value={h.key}
+                  onChange={e => updateHeader(i, 'key', e.target.value)}
+                />
+                <input
+                  className="api-header-input"
+                  placeholder="Value"
+                  value={h.value}
+                  onChange={e => updateHeader(i, 'value', e.target.value)}
+                />
+                <button
+                  className="api-header-remove-btn"
+                  onClick={() => removeHeader(i)}
+                  title="Remove header"
+                >
+                  x
+                </button>
+              </div>
+            ))}
+            <button className="api-header-add-btn" onClick={addHeader}>+ Add Header</button>
+          </div>
+
+          {hasBody(method) && (
+            <div style={{ marginTop: 8 }}>
+              <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 4, opacity: 0.7 }}>Body</div>
+              <textarea
+                className="api-body-editor"
+                value={bodyText}
+                onChange={e => setBodyText(e.target.value)}
+                placeholder='{ "key": "value" }'
+              />
+            </div>
+          )}
+
+          <button
+            className="api-send-btn"
+            onClick={handleSend}
+            disabled={responseLoading || !isReady}
+          >
+            {responseLoading ? 'Sending...' : !isReady ? 'Waiting for server...' : 'Send Request'}
+          </button>
+
+          {responseError && (
+            <div className="error" style={{ marginTop: 8, fontSize: 12 }}>Error: {responseError}</div>
+          )}
+
+          {responseData && (
+            <div className="api-response">
+              <div className="api-response-status">
+                <span className={`api-response-status-code ${statusClass(responseData.status)}`}>
+                  {responseData.status}
+                </span>
+                {responseData.elapsed_ms != null && (
+                  <span style={{ opacity: 0.6 }}>{responseData.elapsed_ms}ms</span>
+                )}
+              </div>
+              <pre className="api-response-body">
+                {typeof responseData.body === 'string'
+                  ? responseData.body
+                  : JSON.stringify(responseData.body, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ApiTesterPanel({ taskId, panel, services, processStatuses }) {
+  const endpoints = Array.isArray(panel?.endpoints) ? panel.endpoints : []
+
+  if (endpoints.length === 0) {
+    return <div className="muted" style={{ padding: 12 }}>No endpoints configured.</div>
+  }
+
+  return (
+    <div className="api-tester">
+      {endpoints.map((ep, i) => (
+        <EndpointCard
+          key={`${ep.method}-${ep.path}-${i}`}
+          taskId={taskId}
+          endpoint={ep}
+          panel={panel}
+          services={services}
+          processStatuses={processStatuses}
+          defaultExpanded={i === 0}
+        />
+      ))}
+    </div>
+  )
+}

package/ui/src/components/testing/LogViewerPanel.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function LogViewerPanel({ panel, services, processLogs }) {
+  const [filter, setFilter] = useState('all')
+  const [autoScroll, setAutoScroll] = useState(true)
+  const contentRef = useRef(null)
+
+  const processName = panel.process || ''
+  const svc = services[processName]
+  const serviceId = svc?.id || null
+
+  const rawLogs = serviceId && processLogs[serviceId] ? processLogs[serviceId] : []
+
+  const filteredLogs = filter === 'all'
+    ? rawLogs
+    : rawLogs.filter(entry => (entry?.stream || 'stdout') === filter)
+
+  useEffect(() => {
+    if (autoScroll && contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight
+    }
+  }, [filteredLogs.length, autoScroll])
+
+  return (
+    <div className="log-viewer">
+      <div className="log-viewer-filters">
+        {['all', 'stdout', 'stderr', 'system'].map(f => (
+          <button
+            key={f}
+            className={`log-viewer-filter-btn ${filter === f ? 'active' : ''}`}
+            onClick={() => setFilter(f)}
+          >
+            {f === 'all' ? 'All' : f}
+          </button>
+        ))}
+        <button
+          className={`log-viewer-filter-btn ${autoScroll ? 'active' : ''}`}
+          onClick={() => setAutoScroll(v => !v)}
+          style={{ marginLeft: 'auto' }}
+        >
+          Auto-scroll
+        </button>
+      </div>
+
+      <div className="log-viewer-content" ref={contentRef}>
+        {filteredLogs.length === 0 ? (
+          <div className="muted" style={{ fontSize: 12 }}>No logs yet.</div>
+        ) : (
+          filteredLogs.map((entry, i) => {
+            const stream = entry?.stream || 'stdout'
+            const text = entry?.text || ''
+            const ts = entry?.timestamp ? new Date(entry.timestamp).toLocaleTimeString() : ''
+            return (
+              <div key={i} className={`log-entry log-entry-${stream}`}>
+                {ts && <span style={{ opacity: 0.5, marginRight: 8 }}>[{ts}]</span>}
+                {text}
+              </div>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}

package/ui/src/components/testing/TerminalPanel.jsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react'
+import { sendServiceStdin, openRuntimeServiceStream } from '../../api'
+
+export function TerminalPanel({ taskId, panel, services, processStatuses }) {
+  const [logs, setLogs] = useState([])
+  const [inputValue, setInputValue] = useState('')
+  const outputRef = useRef(null)
+  const cleanupRef = useRef(null)
+
+  const processName = panel.process || ''
+  const svc = services[processName]
+  const serviceId = svc?.id || null
+  const svcStatus = serviceId ? (processStatuses[serviceId] || svc?.status) : null
+
+  const suggestedInputs = Array.isArray(panel?.suggested_inputs) ? panel.suggested_inputs : []
+
+  useEffect(() => {
+    if (!serviceId) return
+
+    setLogs([])
+    const cleanup = openRuntimeServiceStream(serviceId, {
+      onLog(entry) {
+        if (!entry) return
+        setLogs(prev => [...prev, entry])
+      },
+      onStatus() {},
+      onReady() {},
+    })
+    cleanupRef.current = cleanup
+
+    return () => {
+      cleanup()
+      cleanupRef.current = null
+    }
+  }, [serviceId])
+
+  useEffect(() => {
+    if (outputRef.current) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight
+    }
+  }, [logs])
+
+  async function handleSend(text) {
+    if (!serviceId || !text) return
+    try {
+      await sendServiceStdin(serviceId, text + '\n')
+    } catch (err) {
+      console.error('Failed to send stdin:', err)
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend(inputValue)
+      setInputValue('')
+    }
+  }
+
+  return (
+    <div className="terminal-panel">
+      <pre className="terminal-output" ref={outputRef}>
+        {logs.length === 0
+          ? (svcStatus ? 'Waiting for output...' : 'Process not started.')
+          : logs.map((entry, i) => {
+              const text = entry?.text || ''
+              const stream = entry?.stream || 'stdout'
+              return (
+                <span key={i} className={stream === 'stderr' ? 'log-entry-stderr' : ''}>
+                  {text}
+                </span>
+              )
+            })
+        }
+      </pre>
+
+      {suggestedInputs.length > 0 && (
+        <div className="terminal-suggested">
+          {suggestedInputs.map((input, i) => (
+            <button
+              key={i}
+              className="terminal-suggested-btn"
+              onClick={() => handleSend(input)}
+              disabled={!serviceId}
+            >
+              {input}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="terminal-input-row">
+        <input
+          className="terminal-input"
+          value={inputValue}
+          onChange={e => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={serviceId ? 'Type a command...' : 'Process not started'}
+          disabled={!serviceId}
+        />
+      </div>
+    </div>
+  )
+}

package/ui/src/components/testing/WebPreviewPanel.jsx

@@ -0,0 +1,78 @@
+import { useState } from 'react'
+
+export function WebPreviewPanel({ panel, services, config, processStatuses }) {
+  const [device, setDevice] = useState('desktop')
+  const [iframeKey, setIframeKey] = useState(0)
+
+  const processName = panel.process || ''
+  const svc = services[processName]
+  const svcStatus = svc?.id ? (processStatuses[svc.id] || svc.status) : null
+  const isReady = svcStatus === 'ready'
+
+  const processes = Array.isArray(config?.processes) ? config.processes : []
+  const processConfig = processes.find(p => p.name === processName)
+  const port = processConfig?.port || 3000
+  const path = panel.path || '/'
+  const url = `http://localhost:${port}${path}`
+
+  function handleRefresh() {
+    setIframeKey(k => k + 1)
+  }
+
+  function handleOpenExternal() {
+    window.open(url, '_blank')
+  }
+
+  return (
+    <div className="web-preview">
+      <div className="web-preview-toolbar">
+        <button
+          className={`web-preview-device-btn ${device === 'desktop' ? 'active' : ''}`}
+          onClick={() => setDevice('desktop')}
+          title="Desktop"
+        >
+          Desktop
+        </button>
+        <button
+          className={`web-preview-device-btn ${device === 'tablet' ? 'active' : ''}`}
+          onClick={() => setDevice('tablet')}
+          title="Tablet"
+        >
+          Tablet
+        </button>
+        <button
+          className={`web-preview-device-btn ${device === 'mobile' ? 'active' : ''}`}
+          onClick={() => setDevice('mobile')}
+          title="Mobile"
+        >
+          Mobile
+        </button>
+        <button className="web-preview-device-btn" onClick={handleRefresh} title="Refresh">
+          Refresh
+        </button>
+        <button className="web-preview-device-btn" onClick={handleOpenExternal} title="Open in new tab">
+          Open
+        </button>
+        <span className="web-preview-url">{url}</span>
+      </div>
+
+      <div className="web-preview-container">
+        {!isReady ? (
+          <div className="web-preview-waiting">
+            <span className="conv-thinking-dot" />
+            <span style={{ marginLeft: 8 }}>Waiting for server to be ready...</span>
+          </div>
+        ) : (
+          <div className={`web-preview-frame ${device}`}>
+            <iframe
+              key={iframeKey}
+              className="web-preview-iframe"
+              src={url}
+              title="Web Preview"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/ui/src/hooks/useAgents.js

@@ -0,0 +1,81 @@
+import { useState, useMemo } from 'react'
+import { ApiError, fetchAgents, fetchHumans } from '../api'
+import { ORCHESTRATOR_AGENT_ID, errorText } from '../lib/conversationUtils'
+
+export function useAgents() {
+  const [agents, setAgents] = useState([])
+  const [agentsLoading, setAgentsLoading] = useState(false)
+  const [agentsError, setAgentsError] = useState('')
+  const [humans, setHumans] = useState([])
+
+  const orchestratorRuntime = useMemo(() => {
+    return agents.find((agent) => agent?.id === ORCHESTRATOR_AGENT_ID) ?? null
+  }, [agents])
+
+  const recipientAgents = useMemo(() => {
+    return agents.filter((agent) => agent && agent.id && agent.id !== ORCHESTRATOR_AGENT_ID)
+  }, [agents])
+
+  const agentById = useMemo(() => {
+    const map = Object.create(null)
+    for (const agent of agents) {
+      if (!agent || typeof agent.id !== 'string' || !agent.id) continue
+      map[agent.id] = agent
+    }
+    return map
+  }, [agents])
+
+  async function loadAgents() {
+    setAgentsLoading(true)
+    setAgentsError('')
+    try {
+      setAgents(await fetchAgents())
+    } catch (error) {
+      if (error instanceof ApiError && error.code === 'NO_ACTIVE_WORKSPACE') {
+        setAgents([])
+        setAgentsError('No active workspace.')
+        return
+      }
+      setAgentsError(errorText(error))
+    } finally {
+      setAgentsLoading(false)
+    }
+  }
+
+  async function loadHumans() {
+    try {
+      setHumans(await fetchHumans())
+    } catch {
+      // Humans are non-critical; keep empty list on failure.
+    }
+  }
+
+  async function resolveOrchestratorRuntime() {
+    if (orchestratorRuntime) return orchestratorRuntime
+    try {
+      const latestAgents = await fetchAgents()
+      setAgents(latestAgents)
+      const runtime = latestAgents.find((agent) => agent?.id === ORCHESTRATOR_AGENT_ID) ?? null
+      if (runtime) return runtime
+      setAgentsError('Orchestrator agent is missing from this workspace.')
+      return null
+    } catch (error) {
+      setAgentsError(errorText(error))
+      return null
+    }
+  }
+
+  function clearAgentsData() {
+    setAgents([])
+    setHumans([])
+    setAgentsError('')
+  }
+
+  return {
+    agents, setAgents,
+    agentsLoading, agentsError, setAgentsError,
+    humans, setHumans,
+    orchestratorRuntime, recipientAgents, agentById,
+    loadAgents, loadHumans, resolveOrchestratorRuntime, clearAgentsData,
+  }
+}