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/App.tsx
+26 -14
View File
@@ -1,4 +1,5 @@
import { useRef, useState } from 'react'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { useClock } from './hooks/useClock'
import { useCommandCenter } from './hooks/useCommandCenter'
import { useLiveMetrics } from './hooks/useLiveMetrics'
@@ -25,6 +26,7 @@ export default function App() {
const clock = useClock()
const cc = useCommandCenter()
const [gpuChatActive, setGpuChatActive] = useState(false)
const [infraOpen, setInfraOpen] = useState(false)
const gpuBoost = gpuChatActive || cc.mainView === 'knowledge'
const { agentLoads, gpuLive } = useLiveMetrics(cc.agents, cc.gpu, cc.anims, gpuBoost)
const mainScrollRef = useRef<HTMLDivElement>(null)
@@ -74,9 +76,9 @@ export default function App() {
onSelectZone={cc.selectNode}
/>
<div ref={mainScrollRef} className="scrollbar-thin flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto bg-surface">
<div ref={mainScrollRef} className={cn('flex min-h-0 min-w-0 flex-1 flex-col bg-surface', isPlatform ? 'overflow-hidden' : 'scrollbar-thin overflow-y-auto')}>
<div className={cn('flex min-h-0 flex-1', isPlatform ? '' : 'flex-col')}>
<div className={cn('flex min-w-0 flex-1 flex-col gap-2', isPlatform ? 'p-2' : 'min-h-0 p-3')}>
<div className={cn('flex min-h-0 min-w-0 flex-1 flex-col', isPlatform ? 'gap-1 overflow-hidden p-1.5' : 'min-h-0 gap-2 p-3')}>
{isPlatform && (
<>
<div className="grid shrink-0 grid-cols-1 gap-2 xl:grid-cols-[1fr_auto]">
@@ -91,20 +93,30 @@ export default function App() {
/>
<GpuMonitor gpu={cc.gpu} live={gpuLive} />
</div>
<InfraQuickAccess
workload={cc.workload}
agents={cc.agents}
selectedNodeId={cc.selectedNodeId}
busy={cc.nodeBusy}
onSelectNode={cc.selectNode}
onSelectAgent={cc.selectAgent}
onProbe={cc.probeNodeId}
onOpenTerminal={cc.openTerminal}
/>
<button
type="button"
onClick={() => setInfraOpen((v) => !v)}
className="flex shrink-0 items-center gap-1 self-start rounded border border-border/60 px-2 py-0.5 text-[9px] text-foreground-muted hover:border-docker/30 hover:text-docker"
>
{infraOpen ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
Infrastructure & Apps
</button>
{infraOpen && (
<InfraQuickAccess
workload={cc.workload}
agents={cc.agents}
selectedNodeId={cc.selectedNodeId}
busy={cc.nodeBusy}
onSelectNode={cc.selectNode}
onSelectAgent={cc.selectAgent}
onProbe={cc.probeNodeId}
onOpenTerminal={cc.openTerminal}
/>
)}
</>
)}
<div className={cn('flex min-h-0 flex-col', isPlatform ? 'min-h-[300px] flex-1' : 'min-h-0 flex-1')}>
<div className={cn('flex min-h-0 flex-col', isPlatform ? 'min-h-0 flex-1 overflow-hidden' : 'min-h-0 flex-1')}>
{cc.mainView === 'platform' ? (
<PlatformTopology
workload={cc.workload}
@@ -139,7 +151,7 @@ export default function App() {
</div>
{isPlatform && (
<div className="flex w-[340px] shrink-0 flex-col border-l border-border">
<div className="flex w-[280px] shrink-0 flex-col border-l border-border">
<InspectorPanel
node={cc.selectedNode}
nodeDetail={cc.nodeDetail}