diff --git a/canvas/src/components/Toolbar.tsx b/canvas/src/components/Toolbar.tsx
index 230e5227..a51e9fa0 100644
--- a/canvas/src/components/Toolbar.tsx
+++ b/canvas/src/components/Toolbar.tsx
@@ -154,10 +154,10 @@ export function Toolbar() {
{counts.failed > 0 && (
)}
- ·
-
+ ·
+
{counts.roots} workspace{counts.roots !== 1 ? "s" : ""}
- {counts.children > 0 && + {counts.children} sub}
+ {counts.children > 0 && + {counts.children} sub}
@@ -172,7 +172,7 @@ export function Toolbar() {
type="button"
onClick={stopAll}
disabled={stopping}
- className="flex items-center gap-1.5 px-2.5 py-1 bg-red-950/50 hover:bg-red-900/60 border border-red-800/40 rounded-lg transition-colors disabled:opacity-50"
+ className="flex items-center gap-1.5 px-2.5 py-1 bg-bad/10 hover:bg-bad/20 border border-bad/40 rounded-lg transition-colors disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-bad/40"
title={`Stop all running tasks (${counts.activeTasks} active)`}
aria-label={stopping ? "Stopping all running tasks" : `Stop all running tasks (${counts.activeTasks} active)`}
>
@@ -191,7 +191,7 @@ export function Toolbar() {
type="button"
onClick={() => setRestartConfirmOpen(true)}
disabled={restartingAll}
- className="flex items-center gap-1.5 px-2.5 py-1 bg-amber-950/40 hover:bg-amber-900/50 border border-amber-800/40 rounded-lg transition-colors disabled:opacity-50"
+ className="flex items-center gap-1.5 px-2.5 py-1 bg-warm/10 hover:bg-warm/20 border border-warm/40 rounded-lg transition-colors disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-warm/40"
title={`Restart ${needsRestartNodes.length} workspace${needsRestartNodes.length === 1 ? "" : "s"} that need to pick up config or secret changes`}
aria-label={restartingAll ? "Restarting workspaces" : `Restart ${needsRestartNodes.length} workspace${needsRestartNodes.length === 1 ? "" : "s"} pending config or secret changes`}
>
@@ -216,10 +216,10 @@ export function Toolbar() {
aria-pressed={showA2AEdges}
aria-label={showA2AEdges ? "Hide A2A edges" : "Show A2A edges"}
title={showA2AEdges ? "Hide A2A delegation edges" : "Show A2A delegation edges (last 60 min)"}
- className={`flex items-center justify-center w-7 h-7 border rounded-lg transition-colors ${
+ className={`flex items-center justify-center w-7 h-7 border rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${
showA2AEdges
- ? "bg-blue-950/50 hover:bg-blue-900/50 border-blue-800/40 text-accent"
- : "bg-surface-card/50 hover:bg-surface-card/50 border-line/40 text-ink-soft hover:text-ink-mid"
+ ? "bg-accent/15 hover:bg-accent/25 border-accent/50 text-accent"
+ : "bg-surface-card hover:bg-surface-card/70 border-line text-ink-mid hover:text-ink"
}`}
>
{/* Mesh / network icon */}
@@ -255,7 +255,7 @@ export function Toolbar() {
}}
aria-label="Open audit trail for selected workspace"
title="Audit — view ledger for the selected workspace"
- className="flex items-center justify-center w-7 h-7 bg-surface-card/50 hover:bg-surface-card/50 border border-line/40 rounded-lg transition-colors text-ink-soft hover:text-ink-mid"
+ className="flex items-center justify-center w-7 h-7 bg-surface-card hover:bg-surface-card/70 border border-line rounded-lg transition-colors text-ink-mid hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
>
{/* Scroll / ledger icon */}