What Changed

Created a reusable EmptyState component with contextual variants for different zero-data experiences:

• EmptyState component: Icon, headline, subtext, primary CTA, secondary CTA
• 6 variants: no-agents, no-sessions, no-skills, no-results, first-run, generic
• Pre-configured exports: EmptyStates.NoAgents, EmptyStates.NoSessions, etc.
• Integrated into 2 existing views:
  • AgentDashboard: shows when no agents exist
  • SkillsMarketplace: shows no-skills (empty) or no-results (filtered)

Files Created

• apps/web-next/src/components/ui/empty-state/EmptyState.tsx
• apps/web-next/src/components/ui/empty-state/index.ts

Files Modified

• apps/web-next/src/views/AgentDashboard.tsx - Added EmptyState import and conditional
• apps/web-next/src/views/SkillsMarketplace.tsx - Added EmptyState with variant switching

How to Test

1. Run dev server: cd apps/web-next && pnpm dev
2. Visit AgentDashboard - EmptyState shows when no agents (currently always has mock data)
3. Visit SkillsMarketplace - EmptyState shows:
   • "no-skills" when no skills installed
   • "no-results" when search/filter returns empty

import { EmptyState, EmptyStates } from './components/ui/empty-state';

// Use pre-configured variant
<EmptyStates.NoAgents
  action={{ label: 'Create', onClick: () => {} }}
/>

// Or customize
<EmptyState
  variant="no-sessions"
  title="Custom Title"
  description="Custom description"
  action={{ label: 'Start Session', onClick: handleStart }}
  secondaryAction={{ label: 'Learn More', onClick: handleLearn }}
/>

Accessibility Notes

• Semantic heading structure
• Focus management for CTA buttons
• Screen reader friendly iconography

Known Limitations

• Currently integrated with mock data; needs real data integration for production
• Animation is basic (fade-in only)