Agent Fleet Grid
A dashboard of six agents in a grid, each with a live status dot and a progress line. Running agents fill in bursts, flash green and start the next task, each on its own clock.
Also known as: multi agent dashboard, agent monitoring ui, dashboard skeleton.
Agents4 working
- api-tests128 specs
- docs-syncdocs/api-ref
- migrate-dbNeeds review
- lint-fixeslint --fix
- changelogv2.4.0 drafted
- auth-ttlfix/session-ttl
HTML
<div class="aia-agent-fleet-grid" role="status" aria-label="6 agents, 4 working">
<div class="aia-agent-fleet-grid-head"><span>Agents</span><span class="aia-agent-fleet-grid-sum"><i aria-hidden="true"></i>4 working</span></div>
<ul class="aia-agent-fleet-grid-tiles">
<li class="aia-agent-fleet-grid-run"><b>api-tests</b><span>128 specs</span></li>
<li class="aia-agent-fleet-grid-run"><b>docs-sync</b><span>docs/api-ref</span></li>
<li class="aia-agent-fleet-grid-wait"><b>migrate-db</b><span>Needs review</span></li>
<li class="aia-agent-fleet-grid-run"><b>lint-fix</b><span>eslint --fix</span></li>
<li class="aia-agent-fleet-grid-done"><b>changelog</b><span>v2.4.0 drafted</span></li>
<li class="aia-agent-fleet-grid-run"><b>auth-ttl</b><span>fix/session-ttl</span></li>
</ul>
</div>CSS
.aia-agent-fleet-grid {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
position: relative;
box-sizing: border-box;
overflow: hidden;
border-radius: 0.8em;
background: color-mix(in srgb, var(--c) 5%, #0d0d11);
box-shadow: 0 0 0 1px rgb(255 255 255 / 0.09), 0 1em 2.2em -1em rgb(0 0 0 / 0.55);
color: #e4e4e7;
--ok: #4ade80;
--wait: #fbbf24;
width: 25em;
padding: 0.85em;
}
.aia-agent-fleet-grid-head {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0.15em 0.65em;
font-size: 0.82em;
font-weight: 600;
}
.aia-agent-fleet-grid-sum {
display: inline-flex;
align-items: center;
gap: 0.45em;
color: rgb(255 255 255 / 0.55);
font-weight: 500;
}
.aia-agent-fleet-grid-sum i {
width: 0.45em;
height: 0.45em;
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--c) 25%, transparent);
}
.aia-agent-fleet-grid-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.45em;
margin: 0;
padding: 0;
list-style: none;
}
.aia-agent-fleet-grid-tiles li {
--dur: 5.4s;
--k: var(--c);
position: relative;
display: grid;
gap: 0.2em;
padding: 0.6em 0.65em 0.75em 1.55em;
overflow: hidden;
border-radius: 0.55em;
background: rgb(255 255 255 / 0.04);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.aia-agent-fleet-grid-tiles li:nth-child(2) { --dur: 7.2s; animation-delay: -2.1s; }
.aia-agent-fleet-grid-tiles li:nth-child(4) { --dur: 4.6s; animation-delay: -3.4s; }
.aia-agent-fleet-grid-tiles li:nth-child(6) { --dur: 6.3s; animation-delay: -1.2s; }
.aia-agent-fleet-grid-tiles b {
overflow: hidden;
font: 600 0.78em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
text-overflow: ellipsis;
white-space: nowrap;
}
.aia-agent-fleet-grid-tiles span {
overflow: hidden;
color: rgb(255 255 255 / 0.48);
font-size: 0.7em;
text-overflow: ellipsis;
white-space: nowrap;
}
/* the status dot */
.aia-agent-fleet-grid-tiles li::before {
content: "";
position: absolute;
left: 0.65em;
top: 0.95em;
width: 0.45em;
height: 0.45em;
border-radius: 50%;
background: var(--k);
box-shadow: 0 0 0.5em var(--k);
}
/* the progress line */
.aia-agent-fleet-grid-tiles li::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.14em;
background: var(--k);
transform-origin: left;
}
.aia-agent-fleet-grid-run::before,
.aia-agent-fleet-grid-run::after {
animation: aia-agent-fleet-grid-light var(--dur) cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation-delay: inherit;
}
.aia-agent-fleet-grid-run::after {
animation-name: aia-agent-fleet-grid-fill;
}
.aia-agent-fleet-grid-tiles .aia-agent-fleet-grid-wait { --k: var(--wait); }
.aia-agent-fleet-grid-wait::before {
animation: aia-agent-fleet-grid-breathe 1.8s ease-in-out infinite;
}
.aia-agent-fleet-grid-tiles .aia-agent-fleet-grid-wait::after { transform: scaleX(0.7); opacity: 0.6; }
.aia-agent-fleet-grid-tiles .aia-agent-fleet-grid-done { --k: var(--ok); }
.aia-agent-fleet-grid-tiles .aia-agent-fleet-grid-done::before { box-shadow: none; }
.aia-agent-fleet-grid-tiles .aia-agent-fleet-grid-done::after { opacity: 0.45; }
@keyframes aia-agent-fleet-grid-fill {
0% { transform: scaleX(0); background: var(--c); opacity: 1; }
18% { transform: scaleX(0.22); }
30% { transform: scaleX(0.3); }
48% { transform: scaleX(0.58); }
62% { transform: scaleX(0.66); }
78% { transform: scaleX(1); background: var(--c); }
82%, 92% { transform: scaleX(1); background: var(--ok); opacity: 1; }
98% { transform: scaleX(1); background: var(--ok); opacity: 0; }
100% { transform: scaleX(0); opacity: 0; }
}
@keyframes aia-agent-fleet-grid-light {
0%, 78%, 100% { background: var(--c); box-shadow: 0 0 0.5em var(--c); }
82%, 94% { background: var(--ok); box-shadow: 0 0 0.6em var(--ok); }
}
@keyframes aia-agent-fleet-grid-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-fleet-grid-tiles li::before,
.aia-agent-fleet-grid-tiles li::after {
animation-play-state: paused;
}
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-fleet-grid, .aia-agent-fleet-grid *, .aia-agent-fleet-grid::before, .aia-agent-fleet-grid::after, .aia-agent-fleet-grid *::before, .aia-agent-fleet-grid *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.