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

feat(FN-1035): replace hardcoded colors with theme-aware CSS variables in agent UI

Browse Source 
- Replace hardcoded color values in AgentDetailView with --in-progress CSS variable
- Fix card size badges to use theme-aware CSS variables
- Replace hardcoded log entry colors with CSS variables in AgentLogViewer
- Remove duplicate CSS variable definitions from AgentListModal
- Update central styles.css with proper CSS variable declarations for agent UI
- Update AgentListModal tests to reflect removed duplicate CSS variables
This commit is contained in:
gsxdsm
2026-04-06 16:12:11 -07:00
parent d490ea7038
commit c18a92cee4
5 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/dashboard/app/components/AgentDetailView.tsx
View File

@@ -617,19 +617,19 @@ function LogEntry({ entry, showTimestamp }: { entry: AgentLogEntry; showTimestam
return {
color: "var(--accent)",
borderLeft: "3px solid var(--accent)",
background: "rgba(124, 92, 191, 0.08)",
background: "var(--log-tool-bg)",
};
case "tool_result":
return {
color: "var(--color-success, #3fb950)",
borderLeft: "3px solid var(--color-success, #3fb950)",
background: "rgba(76, 175, 80, 0.06)",
color: "var(--color-success)",
borderLeft: "3px solid var(--color-success)",
background: "var(--log-success-bg)",
};
case "tool_error":
return {
color: "var(--color-error, #f85149)",
borderLeft: "3px solid var(--color-error, #f85149)",
background: "rgba(229, 57, 53, 0.06)",
color: "var(--color-error)",
borderLeft: "3px solid var(--color-error)",
background: "var(--log-error-bg)",
};
case "thinking":
return {

18
packages/dashboard/app/components/AgentListModal.tsx
View File

@@ -593,20 +593,8 @@ export function AgentListModal({ isOpen, onClose, addToast, projectId }: AgentLi
<style>{`
:host, .modal--wide {
/* Agent state CSS variables - define fallback values */
--state-idle-bg: rgba(139, 148, 158, 0.15);
--state-idle-text: #8b949e;
--state-idle-border: #8b949e;
--state-active-bg: rgba(46, 160, 67, 0.15);
--state-active-text: #3fb950;
--state-active-border: #3fb950;
--state-paused-bg: rgba(227, 179, 65, 0.15);
--state-paused-text: #e3b541;
--state-paused-border: #e3b541;
--state-error-bg: rgba(248, 81, 73, 0.15);
--state-error-text: #f85149;
--state-error-border: #f85149;
--text-secondary: var(--text-muted, #8b949e);
/* Scoped alias — maps to the global --text-muted defined in styles.css */
--text-secondary: var(--text-muted);
}
/* === Modal shell === */
@@ -885,7 +873,7 @@ export function AgentListModal({ isOpen, onClose, addToast, projectId }: AgentLi
}
.agent-icon--clickable:focus {
outline: 2px solid var(--accent, #58a6ff);
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}

18
packages/dashboard/app/components/AgentLogViewer.tsx
View File

@@ -251,11 +251,11 @@ export function AgentLogViewer({ entries, loading, executorModel, validatorModel
key={i}
className="agent-log-tool"
style={{
color: "var(--accent, #7c5cbf)",
color: "var(--accent)",
margin: "4px 0",
padding: "2px 6px",
borderLeft: "3px solid var(--accent, #7c5cbf)",
background: "rgba(124, 92, 191, 0.08)",
borderLeft: "3px solid var(--accent)",
background: "var(--log-tool-bg)",
}}
>
{agentBadge}{timestampSpan}⚡ {entry.text}
@@ -304,11 +304,11 @@ export function AgentLogViewer({ entries, loading, executorModel, validatorModel
key={i}
className="agent-log-tool-result"
style={{
color: "var(--success, #4caf50)",
color: "var(--color-success)",
margin: "2px 0",
padding: "2px 6px",
borderLeft: "3px solid var(--success, #4caf50)",
background: "rgba(76, 175, 80, 0.06)",
borderLeft: "3px solid var(--color-success)",
background: "var(--log-success-bg)",
fontSize: "12px",
}}
>
@@ -334,11 +334,11 @@ export function AgentLogViewer({ entries, loading, executorModel, validatorModel
key={i}
className="agent-log-tool-error"
style={{
color: "var(--error, #e53935)",
color: "var(--color-error)",
margin: "2px 0",
padding: "2px 6px",
borderLeft: "3px solid var(--error, #e53935)",
background: "rgba(229, 57, 53, 0.06)",
borderLeft: "3px solid var(--color-error)",
background: "var(--log-error-bg)",
fontSize: "12px",
}}
>

11
packages/dashboard/app/components/__tests__/AgentListModal.test.tsx
View File

@@ -789,7 +789,7 @@ describe("AgentListModal", () => {
});
describe("CSS variables for agent states", () => {
it("has CSS variables defined for agent state badges", async () => {
it("uses CSS variables for agent state badges via global styles.css", async () => {
render(
<AgentListModal
isOpen={true}
@@ -802,13 +802,12 @@ describe("AgentListModal", () => {
expect(screen.getByText("Agents")).toBeTruthy();
});
// Check that style tag is present with CSS variables
// Agent state variables are defined globally in styles.css (:root),
// not duplicated in the inline style tag. The inline style only
// defines the scoped --text-secondary alias.
const styleTag = document.querySelector("style");
expect(styleTag).toBeTruthy();
expect(styleTag?.textContent).toContain("--state-idle-bg");
expect(styleTag?.textContent).toContain("--state-active-bg");
expect(styleTag?.textContent).toContain("--state-paused-bg");
expect(styleTag?.textContent).toContain("--state-error-bg");
expect(styleTag?.textContent).toContain("--text-secondary");
});
});

48
packages/dashboard/app/styles.css
View File

@@ -198,6 +198,14 @@
--icon-milestone: var(--triage);
--icon-slice: var(--in-review);
--icon-feature: #3b82f6;
/* === Accent Color === */
--accent: #7c5cbf;
/* === Log Entry Background Tokens === */
--log-tool-bg: color-mix(in srgb, var(--accent) 8%, transparent);
--log-success-bg: color-mix(in srgb, var(--color-success) 6%, transparent);
--log-error-bg: color-mix(in srgb, var(--color-error) 6%, transparent);
}
html,
@@ -808,12 +816,12 @@ body {
}
.btn-warning {
background: #d29922;
border-color: #e3b341;
background: var(--triage);
border-color: color-mix(in srgb, var(--triage) 80%, white);
color: #fff;
}
.btn-warning:hover {
background: #e3b341;
background: color-mix(in srgb, var(--triage) 80%, white);
box-shadow: var(--glow-warning);
}
@@ -841,8 +849,8 @@ body {
}
.btn--primary:hover {
background: #4c9aff;
border-color: #4c9aff;
background: color-mix(in srgb, var(--todo) 80%, white);
border-color: color-mix(in srgb, var(--todo) 80%, white);
}
.btn--danger {
@@ -1179,19 +1187,19 @@ body {
/* Size S: subtle green tint (low effort) */
.card-size-badge.size-s {
background: rgba(63, 185, 80, 0.15);
background: color-mix(in srgb, var(--color-success) 15%, transparent);
color: var(--color-success);
}
/* Size M: neutral tint (medium effort) */
.card-size-badge.size-m {
background: rgba(139, 148, 158, 0.15);
background: color-mix(in srgb, var(--text-muted) 15%, transparent);
color: var(--text-muted);
}
/* Size L: subtle amber tint (higher effort) */
.card-size-badge.size-l {
background: rgba(210, 153, 34, 0.15);
background: color-mix(in srgb, var(--triage) 15%, transparent);
color: var(--triage);
}
@@ -8606,6 +8614,14 @@ html .column.drag-over * {
/* Logo accent for light mode */
--logo-accent: var(--todo);
/* Accent color for light mode */
--accent: #6a4fa0;
/* Log entry backgrounds (lower intensity for light backgrounds) */
--log-tool-bg: color-mix(in srgb, var(--accent) 6%, transparent);
--log-success-bg: color-mix(in srgb, var(--color-success) 5%, transparent);
--log-error-bg: color-mix(in srgb, var(--color-error) 5%, transparent);
--shadow: var(--shadow-lg);
}
@@ -8671,12 +8687,12 @@ html .column.drag-over * {
}
[data-theme="light"] .btn-warning {
background: #9a6700;
border-color: #7d5400;
background: var(--triage);
border-color: color-mix(in srgb, var(--triage) 70%, black);
}
[data-theme="light"] .btn-warning:hover {
background: #7d5400;
background: color-mix(in srgb, var(--triage) 70%, black);
box-shadow: var(--glow-warning);
}
@@ -20599,8 +20615,8 @@ html .column.drag-over * {
}
.run-card--active {
border-color: #06b6d4;
background: rgba(6, 182, 212, 0.05);
border-color: var(--in-progress);
background: color-mix(in srgb, var(--in-progress) 5%, transparent);
}
.run-header {
@@ -20615,13 +20631,13 @@ html .column.drag-over * {
align-items: center;
gap: 6px;
font-weight: 600;
color: #06b6d4;
color: var(--in-progress);
}
.live-dot {
width: 8px;
height: 8px;
background: #06b6d4;
background: var(--in-progress);
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@@ -20641,7 +20657,7 @@ html .column.drag-over * {
}
.run-status.active {
color: #06b6d4;
color: var(--in-progress);
}
.run-status.completed {