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 265140177f
6 changed files with 234 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;/);