Story: Dashboard Visual Components with Tremor

[prosdev]

Branch: feat/dashboard-visuals
Priority: Medium
Parent Epic: #145
Type: Story
Dependencies: #148 (Web Dashboard Foundation)

Description

Implement the visual dashboard components including charts, stat cards, health indicators, simple LanceDB metrics, and basic package list. Use Tremor's copy-and-paste dashboard components built on React, Tailwind CSS, and Radix UI.

This brings the dashboard to life with interactive, informative visualizations and completes the v0.7.1 feature set.

Acceptance Criteria

• Stat cards display key metrics (files, components, vectors)
• Language distribution chart (bar or pie chart)
• Component type breakdown chart
• Health status cards with color indicators
• Vector index health card (coverage %, search quality)
• Basic package list for monorepos
• Loading states for async data
• Error states with helpful messages
• All components are responsive (mobile-friendly)
• Accessible (ARIA labels, keyboard navigation)
• Component tests with React Testing Library

Technical Requirements

Components to Build:

1. StatsOverviewCard - Total files, components, vectors, last scan time
2. LanguageChart - Language breakdown as bar chart (Tremor BarChart)
3. ComponentTypeChart - Component types as donut chart (Tremor DonutChart)
4. HealthStatusCard - Health checks with status indicators (Tremor Card + Badge)
5. VectorIndexCard - NEW: Simple LanceDB metrics
   • Embedding count, coverage %, avg search quality
   • Uses: Tremor Card + Metric + ProgressBar
6. PackageList - Simple list with file counts (Tremor BarList)

Data Fetching:

import useSWR from 'swr';

export function useStats(repoPath?: string) {
  const { data, error, isLoading } = useSWR(
    `/api/stats${repoPath ? `?path=${repoPath}` : ''}`,
    fetcher,
    { refreshInterval: 60000 }
  );
  
  return { stats: data, isLoading, error };
}

Tremor Components:

• Card, Metric, Text
• BarChart, DonutChart
• ProgressBar (for coverage)
• Badge, Tracker
• BarList
• Sparkline (for search quality)

Dependencies:

{
  "dependencies": {
    "swr": "^2.2.4",
    "@tremor/react": "^3.17.0",
    "recharts": "^2.10.0"
  }
}

LanceDB Integration:
Story 3 already includes LanceDB access. This story adds:

• /api/embeddings/stats endpoint
• Query LanceDB for coverage and quality metrics
• Display in VectorIndexCard

Testing:

• Component unit tests
• Test loading states
• Test error states
• Test with various data shapes
• Accessibility tests

Files to Create:

• apps/dashboard/components/stats-overview-card.tsx
• apps/dashboard/components/language-chart.tsx
• apps/dashboard/components/component-type-chart.tsx
• apps/dashboard/components/health-status-card.tsx
• apps/dashboard/components/vector-index-card.tsx ← NEW
• apps/dashboard/components/package-list.tsx
• apps/dashboard/hooks/use-stats.ts
• apps/dashboard/lib/api-client.ts
• apps/dashboard/__tests__/components/*.test.tsx

Files to Modify:

• apps/dashboard/app/page.tsx (compose components)
• apps/dashboard/app/api/stats/route.ts (add vector index stats)
• apps/dashboard/package.json (add dependencies)

Note: Advanced package explorer (drill-down, detailed views) moved to v0.7.2 for scope management.

[prosdev]

⚠️ Depends on: #148 (Web Dashboard Foundation)