feat(FN-3178): iconize fast badge and list indicators

Merged FN-3178: Added icon-based fast indicators to TaskCard and ListView components, replacing text badges with visual icons for quicker status scanning at a glance. Both the task card and list view layers were updated with matching CSS and component changes, along with corresponding test coverage.

Fusion-Task-Id: FN-3178

packages/dashboard/app/components/ListView.css

@@ -509,15 +509,18 @@
 .list-execution-mode-badge {
   display: inline-flex;
   align-items: center;
-  padding: 2px 8px;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
   border-radius: var(--radius-pill);
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
   line-height: 1;
 }
 
+.list-execution-mode-badge svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .list-execution-mode-badge--fast {
   background: color-mix(in srgb, var(--color-warning) 20%, transparent);
   color: var(--color-warning);

packages/dashboard/app/components/ListView.tsx

@@ -1,6 +1,6 @@
 import "./ListView.css";
 import { useState, useCallback, useMemo, Fragment, useEffect, useRef } from "react";
-import { ArrowUpDown, ArrowUp, ArrowDown, Link, Columns3, EyeOff, Eye, ChevronRight } from "lucide-react";
+import { ArrowUpDown, ArrowUp, ArrowDown, Link, Columns3, EyeOff, Eye, ChevronRight, Zap } from "lucide-react";
 import type { Task, TaskDetail, Column, TaskCreateInput } from "@fusion/core";
 import { COLUMN_LABELS, COLUMNS, getErrorMessage } from "@fusion/core";
 import { batchUpdateTaskModels, fetchNodes } from "../api";
@@ -938,7 +938,14 @@ export function ListView({
                               <div className="list-card-row">
                                 <span className="list-card-id">{task.id}</span>
                                 {task.executionMode === "fast" && (
-                                  <span className="list-execution-mode-badge list-execution-mode-badge--fast">Fast</span>
+                                  <span
+                                    className="list-execution-mode-badge list-execution-mode-badge--fast"
+                                    title="Fast mode"
+                                    aria-label="Fast mode"
+                                  >
+                                    <Zap aria-hidden="true" />
+                                    <span className="visually-hidden">Fast mode</span>
+                                  </span>
                                 )}
                                 <span className="list-card-spacer" />
                                 {isStuckState ? (
@@ -1121,7 +1128,14 @@ export function ListView({
                                   <td className="list-cell list-cell-title">
                                     <div className="list-title-content">
                                       {task.executionMode === "fast" && (
-                                        <span className="list-execution-mode-badge list-execution-mode-badge--fast">Fast</span>
+                                        <span
+                                          className="list-execution-mode-badge list-execution-mode-badge--fast"
+                                          title="Fast mode"
+                                          aria-label="Fast mode"
+                                        >
+                                          <Zap aria-hidden="true" />
+                                          <span className="visually-hidden">Fast mode</span>
+                                        </span>
                                       )}
                                       <span className="list-title-text">{task.title || task.description}</span>
                                     </div>

packages/dashboard/app/components/TaskCard.css

@@ -225,14 +225,17 @@
 .card-execution-mode-badge {
   display: inline-flex;
   align-items: center;
-  font-size: 0.625rem;
+  justify-content: center;
-  font-weight: 600;
+  width: 1rem;
-  text-transform: uppercase;
+  height: 1rem;
-  letter-spacing: 0.4px;
-  padding: 2px 8px;
   border-radius: var(--radius-pill);
 }
 
+.card-execution-mode-badge svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
 .card-execution-mode-badge--fast {
   background: color-mix(in srgb, var(--color-warning) 20%, transparent);
   color: var(--color-warning);

packages/dashboard/app/components/TaskCard.tsx

@@ -1,6 +1,6 @@
 import "./TaskCard.css";
 import { memo, useCallback, useState, useRef, useEffect, useMemo } from "react";
-import { Link, Clock, Layers, Pencil, ChevronDown, Folder, Target, Bot, Trash2, RotateCw } from "lucide-react";
+import { Link, Clock, Layers, Pencil, ChevronDown, Folder, Target, Bot, Trash2, RotateCw, Zap } from "lucide-react";
 import type { Task, TaskDetail, Column, PrInfo, IssueInfo, TaskPriority } from "@fusion/core";
 import { COLUMN_LABELS, DEFAULT_TASK_PRIORITY, TASK_PRIORITIES, VALID_TRANSITIONS, getErrorMessage } from "@fusion/core";
 import { fetchTaskDetail, uploadAttachment, fetchMission, fetchAgent } from "../api";
@@ -1313,7 +1313,14 @@ function TaskCardComponent({
           </span>
         )}
         {task.executionMode === "fast" && (
-          <span className="card-execution-mode-badge card-execution-mode-badge--fast">Fast</span>
+          <span
+            className="card-execution-mode-badge card-execution-mode-badge--fast"
+            title="Fast mode"
+            aria-label="Fast mode"
+          >
+            <Zap aria-hidden="true" />
+            <span className="visually-hidden">Fast mode</span>
+          </span>
         )}
         {task.missionId && (
           <span

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

@@ -133,8 +133,11 @@ describe("ListView", () => {
 
     const fastRow = container.querySelector('tr[data-id="FN-001"]') as HTMLElement;
     const standardRow = container.querySelector('tr[data-id="FN-002"]') as HTMLElement;
+    const fastBadge = fastRow.querySelector(".list-execution-mode-badge");
 
-    expect(fastRow.querySelector(".list-execution-mode-badge")?.textContent).toBe("Fast");
+    expect(fastBadge).not.toBeNull();
+    expect(fastBadge?.getAttribute("aria-label")).toBe("Fast mode");
+    expect(fastBadge?.querySelector("svg")).not.toBeNull();
     expect(standardRow.querySelector(".list-execution-mode-badge")).toBeNull();
   });
 
@@ -2367,8 +2370,11 @@ describe("ListView - Bulk Selection", () => {
 
       const fastCard = container.querySelector('.list-card[data-id="FN-001"]') as HTMLElement;
       const standardCard = container.querySelector('.list-card[data-id="FN-002"]') as HTMLElement;
+      const fastBadge = fastCard.querySelector(".list-execution-mode-badge");
 
-      expect(fastCard.querySelector(".list-execution-mode-badge")?.textContent).toBe("Fast");
+      expect(fastBadge).not.toBeNull();
+      expect(fastBadge?.getAttribute("aria-label")).toBe("Fast mode");
+      expect(fastBadge?.querySelector("svg")).not.toBeNull();
       expect(standardCard.querySelector(".list-execution-mode-badge")).toBeNull();
     });
 

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

@@ -17,6 +17,7 @@ vi.mock("lucide-react", () => ({
   Bot: () => null,
   Trash2: () => null,
   RotateCw: () => null,
+  Zap: () => <svg data-testid="icon-zap" />,
 }));
 
 vi.mock("../ProviderIcon", () => ({
@@ -97,7 +98,10 @@ describe("TaskCard", () => {
       <TaskCard task={makeTask({ executionMode: "fast" })} onOpenDetail={noop} addToast={noop} />,
     );
 
-    expect(container.querySelector(".card-execution-mode-badge")?.textContent).toBe("Fast");
+    const fastBadge = container.querySelector(".card-execution-mode-badge");
+    expect(fastBadge).not.toBeNull();
+    expect(screen.getByTestId("icon-zap")).toBeDefined();
+    expect(fastBadge?.getAttribute("aria-label")).toBe("Fast mode");
 
     rerender(
       <TaskCard task={makeTask({ executionMode: "standard" })} onOpenDetail={noop} addToast={noop} />,
@@ -117,7 +121,8 @@ describe("TaskCard", () => {
       <TaskCard task={makeTask({ executionMode: "fast" })} onOpenDetail={noop} addToast={noop} />,
     );
 
-    expect(container.querySelector(".card-execution-mode-badge")?.textContent).toBe("Fast");
+    expect(container.querySelector(".card-execution-mode-badge")).not.toBeNull();
+    expect(screen.getByTestId("icon-zap")).toBeDefined();
   });
 
   describe("retry button on failed tasks", () => {