Story: Web Dashboard Foundation (Setup + API)

[prosdev]

Branch: feat/dashboard-foundation
Priority: High
Parent Epic: #145
Type: Story
Dependencies: #146 (Data Collection Infrastructure)

Description

Set up a complete Next.js application in apps/dashboard/ with React 19, Tailwind CSS, and Tremor components. Includes both the frontend structure and API routes that expose repository statistics to the dashboard.

This establishes the complete foundation for the web-based dashboard - both UI structure and data layer.

Acceptance Criteria

Frontend:

• apps/dashboard/ directory created with Next.js 16
• React 19 configured and working
• Tailwind CSS integrated with config matching website/
• Tremor components installed and configured
• Basic layout with header and main content area
• Routing configured (App Router)
• TypeScript configured with strict mode
• Turborepo pipeline includes dashboard build
• pnpm workspace includes apps/*
• Development server runs with pnpm dev

API:

• GET /api/stats returns comprehensive repository statistics
• GET /api/health returns health check information
• All endpoints return JSON with proper TypeScript types
• Error handling returns appropriate HTTP status codes
• API validates repository path exists and is indexed
• Integration tests cover all endpoints

Technical Requirements

Next.js Setup:

cd apps/
npx create-next-app@latest dashboard --typescript --tailwind --app --no-src-dir
cd dashboard
npm install @tremor/react

Dependencies:

{
  "dependencies": {
    "next": "^15.5.7",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "@tremor/react": "^3.17.0"
  }
}

Directory Structure:

apps/dashboard/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── api/
│   │   ├── stats/route.ts
│   │   └── health/route.ts
│   └── globals.css
├── components/
├── lib/
│   ├── types.ts
│   └── api-client.ts
├── next.config.js
├── tailwind.config.ts
└── package.json

API Endpoints:

1. GET /api/stats

   • Returns: DetailedIndexStats
   • Caching: 5 minute cache header

2. GET /api/health

   • Returns: Health status of indexer, vector storage, GitHub
   • Caching: 1 minute cache header

Testing:

• Development server starts without errors
• Build succeeds (pnpm build)
• TypeScript compilation passes
• Tailwind CSS compiles correctly
• API integration tests

Files to Create:

• apps/dashboard/ (entire directory structure)
• apps/dashboard/app/api/stats/route.ts
• apps/dashboard/app/api/health/route.ts
• apps/dashboard/lib/types.ts
• apps/dashboard/lib/api-client.ts
• apps/dashboard/__tests__/api/stats.test.ts
• apps/dashboard/README.md

Files to Modify:

• pnpm-workspace.yaml (add apps/*)
• turbo.json (add dashboard pipeline)
• apps/dashboard/next.config.js (external packages config)
• apps/dashboard/package.json (add core dependency)

[prosdev]

⚠️ Depends on: #146 (Data Collection Infrastructure)