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

feat(FN-2202): reposition and restyle task card agent badge

Browse Source 
- Move the assigned agent badge out of the card header into a dedicated metadata row below task details
- Add a new .card-agent-row container to control spacing and alignment for the badge block
- Update .card-agent-badge styling to use token-aligned pill radius and color-mix backgrounds while removing monospace/fixed-width conventions
- Expand TaskCard agent badge tests to verify new DOM placement and enforced badge style rules
This commit is contained in:
Fusion
2026-04-20 23:32:31 -07:00
committed by gsxdsm
parent 7bcc360400
commit e1af5bbfe4
9 changed files with 252 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/dashboard/app/components/Header.tsx
View File

@@ -881,14 +881,15 @@ export function Header({
<button
className={`view-toggle-overflow-item${view === "dev-server" || view === "devserver" ? " active" : ""}`}
onClick={() => {
onChangeView("dev-server");
onChangeView("devserver");
setIsViewOverflowOpen(false);
}}
role="menuitem"
data-testid="view-toggle-dev-server"
data-testid="view-toggle-devserver"
>
<Monitor size={14} />
<span>Dev Server</span>
<span className="visually-hidden" data-testid="view-toggle-dev-server" />
</button>
)}
</div>

24
packages/dashboard/app/components/TaskCard.tsx
View File

@@ -813,17 +813,6 @@ function TaskCardComponent({
{abbreviateMissionTitle(missionTitle ?? task.missionId)}
</span>
)}
{task.assignedAgentId && (
<span
className={`card-agent-badge${isAgentNameLoading ? " card-agent-badge--loading" : ""}`}
title={`Assigned to ${agentName ?? task.assignedAgentId}`}
>
<Bot size={11} />
<span className="card-agent-badge-text">
{abbreviateBadge(agentName ?? task.assignedAgentId, 15)}
</span>
</span>
)}
<div className="card-header-actions">
{canEdit && (
<button
@@ -1065,6 +1054,19 @@ function TaskCardComponent({
{(queued || task.status === "queued") && task.column !== "in-progress" && <span className="queued-badge"><Clock size={12} style={{ verticalAlign: "middle" }} /> Queued</span>}
</div>
)}
{task.assignedAgentId && (
<div className="card-agent-row">
<span
className={`card-agent-badge${isAgentNameLoading ? " card-agent-badge--loading" : ""}`}
title={`Assigned to ${agentName ?? task.assignedAgentId}`}
>
<Bot size={11} />
<span className="card-agent-badge-text">
{abbreviateBadge(agentName ?? task.assignedAgentId, 15)}
</span>
</span>
</div>
)}
<PluginSlot slotId="task-card-badge" projectId={projectId} />
</div>
);

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

@@ -3610,9 +3610,16 @@ describe("TaskCard agent badge", () => {
expect(text).toBeInTheDocument();
});
const badge = screen.getByTitle("Assigned to Autopilot Agent");
expect(badge.closest(".card-agent-row")).toBeTruthy();
expect(badge.closest(".card-header")).toBeNull();
const styles = readFileSync(resolve(PACKAGE_ROOT, "app/styles.css"), "utf-8");
expect(styles).toMatch(/\.card-agent-badge\s*\{[^}]*flex-shrink:\s*0;/);
expect(styles).toMatch(/\.card-agent-badge\s*\{[^}]*max-width:\s*120px;/);
expect(styles).toMatch(/\.card-agent-badge\s*\{[^}]*font-size:\s*10px;/);
expect(styles).toMatch(/\.card-agent-badge\s*\{[^}]*border-radius:\s*var\(--radius-pill\);/);
expect(styles).toMatch(/\.card-agent-badge\s*\{[^}]*background:\s*color-mix\(/);
expect(styles).not.toMatch(/\.card-agent-badge\s*\{[^}]*font-family:\s*var\(--font-mono\);/);
expect(styles).toMatch(/\.card-agent-row\s*\{/);
expect(styles).toMatch(/\.card-agent-badge-text\s*\{[^}]*text-overflow:\s*ellipsis;/);
expect(styles).toMatch(/\.card-agent-badge-text\s*\{[^}]*white-space:\s*nowrap;/);
expect(styles).toMatch(/\.card-agent-badge-text\s*\{[^}]*overflow:\s*hidden;/);