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

feat(FN-1323): unify list and board agent-active styling

Browse Source 
- Apply consistent agent-active state styling across ListView and BoardView
- Add .agent-active CSS class to unify visual indicator styling
- Update ListView component to use unified active state classes
- Add ListView test coverage for agent-active state rendering
This commit is contained in:
gsxdsm
2026-04-09 10:10:25 -07:00
parent 1c6c3d1700
commit 8a6b4b8c94
3 changed files with 77 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dashboard/app/components/ListView.tsx
View File

@@ -832,7 +832,7 @@ export function ListView({
return (
<div
key={task.id}
className={`list-card${isSelectionMode ? " list-card--selectable" : ""}`}
className={`list-card${isAgentActive ? " agent-active" : ""}${isSelectionMode ? " list-card--selectable" : ""}`}
onClick={() => handleRowClick(task)}
data-id={task.id}
>
@@ -858,7 +858,7 @@ export function ListView({
{isStuckState ? (
<span className="list-status-badge stuck">Stuck</span>
) : hasStatus ? (
<span className={`list-status-badge${isFailed ? " failed" : ""}${isAgentActive ? " pulsing" : ""}`}>
<span className={`list-status-badge list-status-badge--${task.column}${isFailed ? " failed" : ""}${isAgentActive ? " pulsing" : ""}`}>
{task.status}
</span>
) : null}
@@ -1044,7 +1044,7 @@ export function ListView({
</span>
) : task.status ? (
<span
className={`list-status-badge${isFailed ? " failed" : ""}${
className={`list-status-badge list-status-badge--${task.column}${isFailed ? " failed" : ""}${
isAgentActive ? " pulsing" : ""
}`}
>

36
packages/dashboard/app/components/__tests__/ListView.test.tsx
View File

@@ -2249,5 +2249,41 @@ describe("ListView - Bulk Selection", () => {
expect(screen.getByText("2 selected")).toBeInTheDocument();
expect(screen.getByText("Bulk Edit Models:")).toBeInTheDocument();
});
it("applies agent-active class to mobile cards when task is in-progress and not paused/failed", () => {
mockMobileViewport();
const { container } = renderListView({
tasks: [
createMockTask({
id: "FN-001",
status: "executing",
column: "in-progress",
}),
],
globalPaused: false,
});
const card = container.querySelector('.list-card[data-id="FN-001"]');
expect(card?.className).toContain("agent-active");
});
it("does not apply agent-active class to mobile cards when globalPaused is true", () => {
mockMobileViewport();
const { container } = renderListView({
tasks: [
createMockTask({
id: "FN-001",
status: "executing",
column: "in-progress",
}),
],
globalPaused: true,
});
const card = container.querySelector('.list-card[data-id="FN-001"]');
expect(card?.className).not.toContain("agent-active");
});
});
});