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

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

@@ -1745,20 +1745,24 @@ body {
background: var(--badge-mission-bg-hover);
}
.card-agent-row {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-xs);
}
.card-agent-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-size: 10px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--text-muted);
background: var(--card-agent-badge-bg, rgba(139, 148, 158, 0.15));
border: 1px solid var(--card-agent-badge-border, rgba(139, 148, 158, 0.28));
background: color-mix(in srgb, var(--text-muted) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
padding: 2px 6px;
border-radius: 9999px;
flex-shrink: 0;
max-width: 120px;
border-radius: var(--radius-pill);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;