Phase 2.2 -- Interaction Components & Animations

Parent: #762

Context

Build the interaction layer: command palette, notifications, loading states, error handling, and animation primitives. These patterns are used across all pages.

Scope

Command Palette

• cmdk integration with React Router
• Fuzzy search across pages, agents, tasks, settings
• Contextual actions (e.g., on Agent page: "View profile", "Assign task")
• Keyboard shortcut: Cmd+K / Ctrl+K
• Recent items, pinned items

Notification System

• Toast notifications (success, error, warning, info) replacing PrimeVue Toast
• Notification queue with auto-dismiss and manual dismiss
• Stacking behavior for multiple simultaneous toasts

State Components

• Loading skeletons (per-component, matching component shape -- not generic gray boxes)
• Error boundaries with retry button and error detail expansion
• Empty states with contextual help text and action buttons
• Confirmation dialogs (replacing PrimeVue ConfirmDialog)

Animation Primitives

• Framer Motion patterns: page transitions, card entrance (staggered), list reorder
• Real-time update flash (subtle highlight on WebSocket-driven changes)
• Status transition animations (smooth color/icon changes, not jarring swaps)
• Layout animations for expanding/collapsing panels
• Spring physics configuration for drag-drop feedback

Inline Editing

• Click-to-edit pattern for text fields
• Toggle between view and edit mode
• Save/cancel with keyboard (Enter/Escape)
• Optimistic update with rollback on error

Deliverables

• cmdk command palette working with router navigation
• Toast notification system
• Loading skeletons, error boundaries, empty states, confirmation dialogs
• Framer Motion animation primitives documented and reusable
• Inline editing pattern
• Storybook stories for all interaction components
• Playwright visual regression baselines
• Unit tests for command palette search, notification queue, error boundary

Blocked by

• feat: design tokens and core UI components #775 (design tokens + core components)