feat(HAI-015): add agent-active glow effect to TaskCard

- Add agent-active CSS with animated purple border glow using in-progress theme color
- Apply agent-active class conditionally in TaskCard component
- Add TaskCard agent-active unit tests
- Move TaskCard tests to __tests__ directory

packages/dashboard/app/components/TaskCard.tsx

@@ -51,7 +51,8 @@ export function TaskCard({ task, queued, onOpenDetail, addToast }: TaskCardProps
     }
   }, [task.id, onOpenDetail, addToast]);
 
-  const cardClass = `card${dragging ? " dragging" : ""}${queued ? " queued" : ""}`;
+  const isAgentActive = !queued && ACTIVE_STATUSES.has(task.status as string);
+  const cardClass = `card${dragging ? " dragging" : ""}${queued ? " queued" : ""}${isAgentActive ? " agent-active" : ""}`;
 
   return (
     <div

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

@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+
+/**
+ * Tests for the agent-active class logic in TaskCard.
+ *
+ * Since no DOM environment (jsdom/happy-dom) or @testing-library/react is available,
+ * we extract and test the class computation logic directly.
+ */
+
+const ACTIVE_STATUSES = new Set(["planning", "researching", "executing", "finalizing", "merging", "specifying"]);
+
+/** Mirrors the cardClass computation from TaskCard.tsx */
+function computeCardClass(opts: { dragging?: boolean; queued?: boolean; status?: string }): string {
+  const { dragging = false, queued = false, status } = opts;
+  const isAgentActive = !queued && ACTIVE_STATUSES.has(status as string);
+  return `card${dragging ? " dragging" : ""}${queued ? " queued" : ""}${isAgentActive ? " agent-active" : ""}`;
+}
+
+describe("TaskCard agent-active class", () => {
+  it("applies agent-active for an active status (executing)", () => {
+    const cls = computeCardClass({ status: "executing" });
+    expect(cls).toContain("agent-active");
+  });
+
+  it("applies agent-active for all active statuses", () => {
+    for (const status of ["planning", "researching", "executing", "finalizing", "merging", "specifying"]) {
+      const cls = computeCardClass({ status });
+      expect(cls).toContain("agent-active");
+    }
+  });
+
+  it("does NOT apply agent-active when status is undefined", () => {
+    const cls = computeCardClass({});
+    expect(cls).not.toContain("agent-active");
+  });
+
+  it("does NOT apply agent-active for non-active status (idle)", () => {
+    const cls = computeCardClass({ status: "idle" });
+    expect(cls).not.toContain("agent-active");
+  });
+
+  it("does NOT apply agent-active for queued card even with active status", () => {
+    const cls = computeCardClass({ status: "executing", queued: true });
+    expect(cls).not.toContain("agent-active");
+    expect(cls).toContain("queued");
+  });
+
+  it("does NOT apply agent-active for queued card with no status", () => {
+    const cls = computeCardClass({ queued: true });
+    expect(cls).not.toContain("agent-active");
+  });
+
+  it("combines dragging and agent-active correctly", () => {
+    const cls = computeCardClass({ status: "executing", dragging: true });
+    expect(cls).toContain("agent-active");
+    expect(cls).toContain("dragging");
+  });
+
+  it("base card class is always present", () => {
+    expect(computeCardClass({})).toBe("card");
+    expect(computeCardClass({ status: "executing" })).toMatch(/^card /);
+  });
+});

packages/dashboard/app/styles.css

@@ -185,6 +185,19 @@ html, body {
 .card:active { cursor: grabbing; }
 .card.dragging { opacity: 0.4; transform: scale(0.98); }
 
+/* Agent-active glow: animated border glow when an agent is actively working on a task.
+   Uses the in-progress column color to stay consistent with the theme. */
+.card.agent-active {
+  border-color: var(--in-progress);
+  box-shadow: 0 0 8px rgba(188, 140, 255, 0.4), 0 0 20px rgba(188, 140, 255, 0.15);
+  animation: agent-glow 2.5s ease-in-out infinite;
+}
+
+@keyframes agent-glow {
+  0%, 100% { box-shadow: 0 0 8px rgba(188, 140, 255, 0.4), 0 0 20px rgba(188, 140, 255, 0.15); }
+  50%      { box-shadow: 0 0 12px rgba(188, 140, 255, 0.6), 0 0 28px rgba(188, 140, 255, 0.25); }
+}
+
 .card-header {
   display: flex;
   align-items: center;