feat(FN-4122): simplify fan-out badge label, inherit count color from paren

Simplified the fan-out badge label to match the design spec and removed the now-redundant CSS overrides in TaskCard.css, inheriting the count color from the task column instead. Also stabilized verification tests and added a changeset for the patch release.

Fusion-Task-Id: FN-4122

Fusion-Task-Lineage: 7dba6f5b-5143-49e9-8edb-2f54a1e2b608

packages/dashboard/app/components/TaskCard.css

@@ -416,7 +416,6 @@
   align-items: center;
   gap: calc(var(--space-xs) / 2);
   font-size: 0.6875rem;
-  color: var(--color-info);
   position: relative;
   cursor: default;
 }
@@ -432,23 +431,6 @@
   padding-inline: calc(var(--space-xs) / 2);
 }
 
-.card-fanout-badge--high-impact {
-  color: var(--color-warning);
-  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
-  border-radius: var(--radius-pill);
-  padding-inline: var(--space-xs);
-  font-weight: 600;
-}
-
-.card-fanout-badge--high-impact .card-fanout-count {
-  color: var(--text);
-}
-
-.card-fanout-badge--escalated {
-  color: var(--color-error);
-  background: color-mix(in srgb, var(--color-error) 16%, transparent);
-}
-
 .card-scope-badge[data-tooltip]:hover::after,
 .card-fanout-badge[data-tooltip]:hover::after {
   content: attr(data-tooltip);
@@ -562,9 +544,6 @@
     display: none;
   }
 
-  .card-fanout-badge--high-impact {
-    padding-inline: calc(var(--space-xs) / 2);
-  }
 }
 
 .card-agent-badge--loading {

packages/dashboard/app/components/TaskCard.tsx

@@ -1649,14 +1649,13 @@ function TaskCardComponent({
           )}
           {fanout && fanout.totalCount > 0 && (
             <span
-              className={`card-fanout-badge${fanout.staleBlockedByDependentIds.length > 0 ? " card-fanout-badge--stale" : ""}${fanout.isHighFanout ? " card-fanout-badge--high-impact" : ""}${fanout.escalation ? " card-fanout-badge--escalated" : ""}`}
+              className={`card-fanout-badge${fanout.staleBlockedByDependentIds.length > 0 ? " card-fanout-badge--stale" : ""}`}
               data-tooltip={`Blocking ${fanout.totalCount} active task(s); ${fanout.activeTodoCount} waiting in todo${fanout.isHighFanout ? ` (high fan-out threshold: ${HIGH_FANOUT_BLOCKER_TODO_THRESHOLD})` : ""}${fanout.escalation ? ` · escalated after ${Math.floor(fanout.escalation.blockingAgeMs / 60000)}m in blocking column` : ""}`}
             >
               <GitBranch size={12} style={{ verticalAlign: "middle" }} />
               <span>
                 {fanout.escalation ? "Escalated" : fanout.isHighFanout ? "High fan-out" : "Blocks"}{" "}
                 <span className="card-fanout-count">{fanout.totalCount}</span>
-                {fanout.isHighFanout ? ` (${fanout.activeTodoCount} todo)` : ""}
                 {fanout.staleBlockedByDependentIds.length > 0 ? ` (${fanout.staleBlockedByDependentIds.length} stale)` : ""}
               </span>
             </span>

packages/dashboard/app/components/__tests__/TaskCard.test.tsx

@@ -50,6 +50,14 @@ function makeTask(overrides: Partial<Task> = {}): Task {
 
 const noop = () => {};
 
+const highFanout = {
+  totalCount: 7,
+  activeTodoCount: 3,
+  dependentIds: ["FN-002", "FN-003"],
+  staleBlockedByDependentIds: [],
+  isHighFanout: true,
+} as const;
+
 afterEach(() => {
   vi.useRealTimers();
 });
@@ -234,16 +242,32 @@ describe("TaskCard", () => {
     expect(badge.textContent).toContain("(1 stale)");
   });
 
+  it("renders high fan-out badge without visible todo suffix while keeping tooltip context", () => {
+    render(
+      <TaskCard
+        task={makeTask({ column: "in-progress" })}
+        fanout={highFanout}
+        onOpenDetail={noop}
+        addToast={noop}
+      />,
+    );
+
+    const badge = screen.getByText("High fan-out").closest(".card-fanout-badge") as HTMLElement;
+    expect(badge).not.toBeNull();
+    expect(badge.textContent).toContain("High fan-out 7");
+    expect(badge.textContent).not.toContain("todo)");
+    expect(badge.getAttribute("data-tooltip")).toContain("3 waiting in todo");
+  });
+
   it("escalates only threshold-crossing fan-out badges", () => {
     const { rerender } = render(
       <TaskCard
         task={makeTask({ column: "in-progress" })}
         fanout={{
+          ...highFanout,
           totalCount: 8,
           activeTodoCount: 5,
           dependentIds: ["FN-003"],
-          staleBlockedByDependentIds: [],
-          isHighFanout: true,
           escalation: { blockerId: "FN-001", activeTodoCount: 5, totalActiveCount: 8, blockingAgeMs: 3_600_000 },
         }}
         onOpenDetail={noop}
@@ -251,11 +275,11 @@ describe("TaskCard", () => {
       />,
     );
 
-    let badge = document.querySelector(".card-fanout-badge--high-impact") as HTMLElement;
+    let badge = screen.getByText("Escalated").closest(".card-fanout-badge") as HTMLElement;
     expect(badge).not.toBeNull();
-    expect(badge).toHaveClass("card-fanout-badge--escalated");
     expect(badge.textContent).toContain("Escalated");
-    expect(badge.textContent).toContain("(5 todo)");
+    expect(badge.textContent).toContain("8");
+    expect(badge.textContent).not.toContain("todo)");
 
     rerender(
       <TaskCard
@@ -267,7 +291,7 @@ describe("TaskCard", () => {
     );
 
     badge = screen.getByText("Blocks").closest(".card-fanout-badge") as HTMLElement;
-    expect(badge).not.toHaveClass("card-fanout-badge--high-impact");
+    expect(badge).not.toBeNull();
   });
 
   it("shows plain paused label when pausedByAgentId is not set", () => {