feat(dashboard): add working indicator for active sessions

Visual feedback when an agent is actively processing:

1. **Spinner on status dots** (SessionCard.js, Modal.js)
   - Status dot gets a spinning ring animation when session is active/starting
   - Uses CSS border trick with transparent borders except top

2. **Working indicator in chat** (ChatMessages.js, Modal.js)
   - Shows at bottom of conversation when agent is working
   - Bouncing dots animation ("...") next to "Agent is working" text
   - Only visible for active/starting statuses

3. **CSS animations** (styles.css)
   - spin-ring: 0.8s rotation for the status dot border
   - bounce-dot: staggered vertical bounce for the working dots

4. **Status metadata** (status.js)
   - Added `spinning: true` flag for active and starting statuses
   - Used by components to conditionally render spinner elements

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
teernisse
2026-02-25 15:20:18 -05:00
parent 7cf51427b7
commit 8224acbba7
5 changed files with 64 additions and 12 deletions

View File

@@ -35,7 +35,7 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
<div class="flex items-start justify-between gap-2.5">
<div class="min-w-0">
<div class="flex items-center gap-2.5">
<span class="h-2 w-2 shrink-0 rounded-full ${statusMeta.dot}"></span>
<span class="h-2 w-2 shrink-0 rounded-full ${statusMeta.dot} ${statusMeta.spinning ? 'spinner-dot' : ''}" style=${{ color: statusMeta.borderColor }}></span>
<span class="truncate font-display text-base font-medium text-bright">${session.project || session.name || 'Session'}</span>
</div>
<div class="mt-2 flex flex-wrap items-center gap-2">