root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): neutralize non-running agent state colors

Browse Source 
Only running shows green and error shows red; idle/active/paused share
the neutral gray border and badge across the agent list, board, and
org-chart views.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-05 19:50:44 -07:00
parent 8eb5c3dc60
commit c76db0616b
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/agent-state-color-neutral.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Agent list color now signals run status only: `running` is green, `error` is red, and `idle` / `active` / `paused` all use the neutral gray. Previously `active` shared green with `running` and `paused` was yellow, which made the list visually busy and obscured which agents were actually executing. Applies to the badge, list card border, board card border, and org-chart node card across all agent views.

18
packages/dashboard/app/components/AgentsView.css
View File

@@ -745,17 +745,17 @@
border: 1px solid var(--state-idle-border);
}
.agent-badge--active,
.agent-badge--running {
background: var(--state-active-bg);
color: var(--state-active-text);
border: 1px solid var(--state-active-border);
}
.agent-badge--active,
.agent-badge--paused {
background: var(--state-paused-bg);
color: var(--state-paused-text);
border: 1px solid var(--state-paused-border);
background: var(--state-idle-bg);
color: var(--state-idle-text);
border: 1px solid var(--state-idle-border);
}
.agent-badge--error,
@@ -765,28 +765,27 @@
border: 1px solid var(--state-error-border);
}
.agent-board-card--idle { border-top-color: var(--state-idle-border); }
.agent-board-card--idle,
.agent-board-card--active,
.agent-board-card--paused { border-top-color: var(--state-idle-border); }
.agent-board-card--running {
border-top-color: var(--state-active-border);
background: var(--state-active-bg);
}
.agent-board-card--paused { border-top-color: var(--state-paused-border); }
.agent-board-card--error,
.agent-board-card--terminated { border-top-color: var(--state-error-border); }
.agent-card--idle { border-left-color: var(--state-idle-border); }
.agent-card--idle,
.agent-card--active,
.agent-card--paused { border-left-color: var(--state-idle-border); }
.agent-card--running {
border-left-color: var(--state-active-border);
background: var(--state-active-bg);
}
.agent-card--active:hover,
.agent-card--running:hover {
background: color-mix(in srgb, var(--state-active-border) 20%, var(--card-hover));
}
.agent-card--paused { border-left-color: var(--state-paused-border); }
.agent-card--error,
.agent-card--terminated { border-left-color: var(--state-error-border); }
@@ -916,7 +915,6 @@
box-shadow: var(--focus-ring-strong);
}
.org-chart-node-card--active,
.org-chart-node-card--running {
background: var(--state-active-bg);
}