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
This commit is contained in:
Dustin Byrne
2026-03-25 21:44:26 -04:00
3 changed files with 78 additions and 1 deletions

View File

@@ -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;