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.
This commit is contained in:
mo
2026-06-25 01:10:57 +00:00
parent d4538a002f
commit 170eb2418b
10 changed files with 598 additions and 19 deletions
+11 -6
View File
@@ -36,20 +36,25 @@ function AgentCard({
type="button"
onClick={onSelect}
className={cn(
'flex h-[118px] w-[140px] shrink-0 flex-col gap-1 rounded-lg border bg-surface-raised p-1.5 text-left shadow-sm dark:bg-surface-overlay',
selected ? 'border-docker/50 ring-1 ring-docker/20' : 'border-border hover:border-border-strong',
'flex h-[136px] w-[168px] shrink-0 flex-col gap-1 rounded-lg border bg-surface-raised p-1.5 text-left shadow-sm dark:bg-surface-overlay',
selected ? 'border-docker ring-2 ring-docker/30 shadow-[0_0_20px_rgba(13,183,237,0.15)]' : 'border-border hover:border-docker/30',
)}
>
<div className="flex items-center gap-1.5">
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface" style={{ color: meta.accent }}>
<Icon className="h-3.5 w-3.5" />
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-surface" style={{ color: meta.accent }}>
<Icon className="h-4 w-4" />
</span>
<div className="min-w-0 flex-1">
<p className="truncate text-[11px] font-semibold text-foreground">{agent.name.split(' ·')[0]}</p>
<p className="truncate text-[12px] font-semibold text-foreground">{agent.name.split(' ·')[0]}</p>
<p className="truncate text-[8px] text-foreground-muted">{meta.domain}</p>
</div>
<span className={cn('h-1.5 w-1.5 shrink-0 rounded-full', busy ? 'bg-success animate-pulse' : 'bg-foreground-faint/30')} />
</div>
{selected && (
<span className="rounded border border-docker/40 bg-docker/10 px-1.5 py-0.5 text-[7px] font-semibold uppercase tracking-wide text-docker">
Terminal open
</span>
)}
<p className="line-clamp-2 text-[8px] leading-[10px] text-foreground-muted">{agent.role}</p>
<p className="h-[20px] line-clamp-2 text-[8px] leading-[10px] text-foreground-faint">{agentTaskLabel(agent.id, anim)}</p>
<div className="mt-auto space-y-0.5">
@@ -75,7 +80,7 @@ export function AgentFleet({ agents, animations, selectedId, loads, approvalCoun
<div className="mb-1 flex shrink-0 items-center justify-between gap-2">
<div className="min-w-0">
<h3 className="text-[9px] font-semibold uppercase tracking-wider text-foreground-muted">Agent Fleet</h3>
<p className="truncate text-[8px] text-foreground-faint">Klik agent stel vraag in chat · elk agent bewaakt één domein</p>
<p className="truncate text-[8px] text-foreground-faint">Click agent dedicated terminal opens below</p>
</div>
<div className="flex shrink-0 items-center gap-1.5">
<button