ATC/atc-agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add MySQL/MongoDB consoles, fit topology without scroll, longer flow lines.

Browse Source 
Compact workbench panel, collapsible infra bar, narrower topology nodes with wider inter-stage gaps for visible connection lines.
This commit is contained in:
mo
2026-06-25 01:33:48 +00:00
parent 4e1cf9ef6c
commit 7da2dd60f0
9 changed files with 343 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/features/AgentWorkbench.tsx
+29 -33
View File
@@ -10,6 +10,7 @@ type Props = {
lines: TerminalLine[]
busy: boolean
onSendPrompt: (message: string, agentId?: string) => void
compact?: boolean
}
const LEVEL: Record<string, string> = {
@@ -23,7 +24,7 @@ const LEVEL: Record<string, string> = {
probe: 'text-amber-300',
}
export function AgentWorkbench({ agent, lines, busy, onSendPrompt }: Props) {
export function AgentWorkbench({ agent, lines, busy, onSendPrompt, compact }: Props) {
const meta = getAgentMeta(agent.id)
const Icon = meta.icon
const bottomRef = useRef<HTMLDivElement>(null)
@@ -33,49 +34,44 @@ export function AgentWorkbench({ agent, lines, busy, onSendPrompt }: Props) {
}, [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">
<div className="flex h-full min-h-0 flex-col">
<header className={cn('flex shrink-0 items-center gap-2 border-b border-border/60 px-2', compact ? 'py-1' : '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` }}
className={cn('flex shrink-0 items-center justify-center rounded-lg border border-border/80 bg-surface-overlay', compact ? 'h-7 w-7' : 'h-10 w-10')}
style={{ color: meta.accent, boxShadow: compact ? undefined : `0 0 24px ${meta.accent}33` }}
>
<Icon className="h-6 w-6" />
<Icon className={compact ? 'h-3.5 w-3.5' : 'h-5 w-5'} />
</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>
<h3 className={cn('truncate font-bold text-foreground', compact ? 'text-xs' : 'text-sm')}>{agent.name}</h3>
{!compact && <p className="text-[10px] text-docker">{meta.domain} · {agent.zone}</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
<div className="flex shrink-0 items-center gap-1.5">
{busy && <Loader2 className="h-3 w-3 animate-spin text-success" />}
<span className="flex items-center gap-1 rounded border border-emerald-500/40 bg-emerald-500/10 px-1.5 py-0.5 text-[9px] text-emerald-300">
<Terminal className="h-3 w-3" /> 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>
{!compact && (
<div className="flex shrink-0 flex-wrap gap-1 border-b border-border/40 px-2 py-1">
{(agent.suggested_prompts || []).slice(0, 4).map((prompt) => (
<button
key={prompt}
type="button"
onClick={() => onSendPrompt(prompt, agent.id)}
className={cn('rounded border border-border/60 px-1.5 py-0.5 text-[9px] 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">
<div className={cn('scrollbar-thin min-h-0 flex-1 overflow-y-auto font-mono leading-relaxed', compact ? 'px-2 py-1 text-[10px]' : 'px-3 py-2 text-[11px]')}>
{lines.length === 0 && (
<p className="py-8 text-center text-foreground-faint">
Agent terminal ready — probe output and LLM responses appear here
</p>
<p className="py-2 text-center text-foreground-faint">Agent terminal ready</p>
)}
{lines.map((line) => (
<div key={line.id} className={LEVEL[line.level] || 'text-foreground-muted'}>