feat(HAI-011): complete Step 1+2 — add progress indicator to TaskCard with styles

packages/dashboard/app/components/TaskCard.tsx

@@ -77,6 +77,24 @@ export function TaskCard({ task, queued, onOpenDetail, addToast }: TaskCardProps
       <div className="card-title">
         {task.title || (task.description ? task.description.slice(0, 60) + (task.description.length > 60 ? "…" : "") : task.id)}
       </div>
+      {task.steps.length > 0 && (() => {
+        const completedSteps = task.steps.filter(s => s.status === "done").length;
+        const totalSteps = task.steps.length;
+        return (
+          <div className="card-progress">
+            <div className="card-progress-bar">
+              <div
+                className="card-progress-fill"
+                style={{
+                  width: `${(completedSteps / totalSteps) * 100}%`,
+                  backgroundColor: COLUMN_TEXT_COLOR_MAP[task.column],
+                }}
+              />
+            </div>
+            <span className="card-progress-label">{completedSteps}/{totalSteps}</span>
+          </div>
+        );
+      })()}
       {((task.dependencies && task.dependencies.length > 0) || queued) && (
         <div className="card-meta">
           {task.dependencies && task.dependencies.length > 0 && (

packages/dashboard/app/styles.css

@@ -238,6 +238,35 @@ html, body {
   color: var(--triage);
 }
 
+.card-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.card-progress-bar {
+  flex: 1;
+  height: 3px;
+  background: var(--border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.card-progress-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s;
+}
+
+.card-progress-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-family: "SF Mono", Monaco, Consolas, monospace;
+  flex-shrink: 0;
+}
+
 /* === Modals === */
 .modal-overlay {
   display: none;