Phase 5.1 -- Real-Time UX & Animations

Parent: #762

Context

Design principle #2: "Real-time means visible." WebSocket exists but UI updates must produce visual feedback -- not silent state changes.

Scope

• Wire WebSocket subscriptions to ALL pages (currently only 6/15 in Vue app)
• Update flash: subtle highlight on any card/row that receives a WebSocket update (200ms glow, fade out)
• "Just updated" indicators: timestamp showing "2s ago" on recently changed items
• Animated state transitions: Framer Motion for status changes (e.g. task moving from pending -> active), approval status changes, agent status changes
• Activity stream auto-scroll: new items slide in at top with entrance animation
• Connection status: visible indicator when WebSocket disconnects/reconnects
• Optimistic updates: immediate UI response on user actions, rollback on error with notification

Deliverables

• WebSocket wired to all pages
• Update flash animation pattern
• State transition animations
• Connection status indicator
• Optimistic update pattern across all CRUD operations
• Integration tests for WebSocket event -> UI update flow

Blocked by

• Phase 4 pages substantially complete (feat: Dashboard page (metric cards, sparklines, activity feed, budget burn) #777-feat: Login page + first-run bootstrap (login, setup, agent activation) #789)