## 1. Setup & Dependencies

- [x] 1.1 Install frontend dependencies: react-router-dom, @tanstack/react-query, zustand, @headlessui/react
- [x] 1.2 Set up Tailwind CSS configuration (tailwind.config.js, postcss.config.js)
- [x] 1.3 Create environment type definitions in apps/web/src/env.d.ts
- [x] 1.4 Add Vite environment variables to .env.example (VITE_API_URL, VITE_OIDC_ISSUER, etc.)

## 2. API Client & Types

- [x] 2.1 Create apps/web/src/api/client.ts with typed fetch wrapper and auth header injection
- [x] 2.2 Generate or create TypeScript interfaces matching backend schemas (Project, User, etc.)
- [x] 2.3 Implement error handling with ApiError class
- [x] 2.4 Add request/response logging in debug mode

## 3. Authentication

- [x] 3.1 Create apps/web/src/auth/oidc.ts with PKCE code generation and token exchange
- [x] 3.2 Implement auth store (Zustand) with state: loading, authenticated, unauthenticated, error
- [x] 3.3 Create AuthProvider component wrapping the app
- [x] 3.4 Implement login redirect to Authentik authorize endpoint
- [x] 3.5 Implement callback handler (/callback route) for code exchange
- [x] 3.6 Implement logout with end_session_endpoint redirect
- [x] 3.7 Add token refresh logic for expired access tokens

## 4. Routing & Layout

- [x] 4.1 Set up React Router with route definitions in apps/web/src/router.tsx
- [x] 4.2 Create DashboardLayout component with header, sidebar, and outlet
- [x] 4.3 Implement RouteGuard component for protected routes
- [x] 4.4 Add public routes: /login, /callback
- [x] 4.5 Add protected routes: /, /projects, /projects/:id, /tools, /settings

## 5. Dashboard Shell

- [x] 5.1 Create Header component with app name and user avatar dropdown
- [x] 5.2 Create Sidebar component with navigation links
- [x] 5.3 Implement mobile-responsive sidebar toggle
- [x] 5.4 Add active route highlighting in sidebar
- [x] 5.5 Create Dashboard home page with welcome content

## 6. Project Management UI

- [x] 6.1 Create ProjectList page fetching from /api/v1/projects
- [x] 6.2 Implement ProjectCard component for list view
- [x] 6.3 Add empty state when no projects exist
- [x] 6.4 Create ProjectDetail page at /projects/:id
- [x] 6.5 Implement NewProject form with validation (name, description)
- [x] 6.6 Implement EditProject form with pre-filled data
- [x] 6.7 Add delete confirmation dialog for projects
- [x] 6.8 Wire up TanStack Query mutations for create/update/delete

## 7. Placeholder Pages

- [x] 7.1 Create Tools page placeholder
- [x] 7.2 Create Settings page placeholder
- [x] 7.3 Create Repositories page placeholder

## 8. Testing & Verification

- [x] 8.1 Write unit tests for auth store
- [x] 8.2 Write unit tests for API client error handling
- [x] 8.3 Write tests for RouteGuard component
- [x] 8.4 Update App.test.tsx to test routing
- [x] 8.5 Run `pnpm test` and fix any failures
- [x] 8.6 Run `pnpm lint` and fix any issues
- [x] 8.7 Run `pnpm typecheck` and fix any errors

## 9. Documentation

- [x] 9.1 Update docs/development.md with frontend auth setup instructions
- [x] 9.2 Update README.md with new environment variables
- [x] 9.3 Add frontend architecture notes to docs/architecture.md