Add agent workbench terminal and live PostgreSQL/Trino SQL consoles.

Clicking agents opens a dedicated terminal panel; topology PostgreSQL/Trino nodes open SQL workbench with ten demo queries and Postgres vs Trino benchmark.
2026-06-25 01:10:57 +00:00
parent d4538a002f
commit 170eb2418b
10 changed files with 598 additions and 19 deletions
@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react'
+import { Loader2, Terminal } from 'lucide-react'
+import type { Agent, TerminalLine } from '../../types'
+import { getAgentMeta } from '../../lib/agentMeta'
+import { cn } from '../../lib/utils'
+import { subTabIdle } from '../../lib/tabActive'
+
+type Props = {
+  agent: Agent
+  lines: TerminalLine[]
+  busy: boolean
+  onSendPrompt: (message: string, agentId?: string) => void
+}
+
+const LEVEL: Record<string, string> = {
+  info: 'text-foreground-muted',
+  ok: 'text-success',
+  warn: 'text-warning',
+  err: 'text-danger',
+  cmd: 'text-docker',
+  llm: 'text-violet-400',
+  fetch: 'text-cyan-400',
+  probe: 'text-amber-300',
+}
+
+export function AgentWorkbench({ agent, lines, busy, onSendPrompt }: Props) {
+  const meta = getAgentMeta(agent.id)
+  const Icon = meta.icon
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [lines, busy])
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-[#0a0e14]">
+      <header className="flex shrink-0 items-center gap-3 border-b border-border/60 px-4 py-3">
+        <span
+          className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-border/80 bg-surface-overlay"
+          style={{ color: meta.accent, boxShadow: `0 0 24px ${meta.accent}33` }}
+        >
+          <Icon className="h-6 w-6" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate text-base font-bold text-foreground">{agent.name}</h3>
+          <p className="text-[11px] text-docker">{meta.domain} · {agent.zone}</p>
+          <p className="truncate text-[10px] text-foreground-muted">{agent.role}</p>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {busy && (
+            <span className="flex items-center gap-1 text-[10px] text-success">
+              <Loader2 className="h-3 w-3 animate-spin" /> Live
+            </span>
+          )}
+          <span className="flex items-center gap-1 rounded border border-emerald-500/40 bg-emerald-500/10 px-2 py-1 text-[10px] text-emerald-300">
+            <Terminal className="h-3 w-3" /> Agent terminal
+          </span>
+        </div>
+      </header>
+
+      <div className="flex shrink-0 flex-wrap gap-1 border-b border-border/40 px-3 py-2">
+        {(agent.suggested_prompts || []).slice(0, 6).map((prompt) => (
+          <button
+            key={prompt}
+            type="button"
+            onClick={() => onSendPrompt(prompt, agent.id)}
+            className={cn('rounded border border-border/60 px-2 py-1 text-[10px] text-foreground-muted hover:border-docker/40 hover:text-docker', subTabIdle)}
+          >
+            {prompt}
+          </button>
+        ))}
+      </div>
+
+      <div className="scrollbar-thin min-h-0 flex-1 overflow-y-auto px-4 py-2 font-mono text-[11px] leading-relaxed">
+        {lines.length === 0 && (
+          <p className="py-8 text-center text-foreground-faint">
+            Agent terminal ready — probe output and LLM responses appear here
+          </p>
+        )}
+        {lines.map((line) => (
+          <div key={line.id} className={LEVEL[line.level] || 'text-foreground-muted'}>
+            <span className="text-foreground-faint/50">
+              {line.ts ? new Date(line.ts).toLocaleTimeString('en-US', { hour12: false }) : ''}
+            </span>{' '}
+            <span className="text-docker/70">[{line.phase}]</span> {line.text}
+          </div>
+        ))}
+        {busy && <span className="text-docker animate-pulse">█</span>}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  )
+}