alex
78aaddb2b5
- Add frontend-foundation change (FN-005) with 46 tasks - Add deployment-config change (FN-006) with 27 tasks - Add runfusion-poc/opencode-poc change (FN-008) with 25 tasks - Add config-secrets change (FN-009) with 31 tasks - Add codeserver-spawn change (FN-010) with 38 tasks - Include project specsheet and configuration - Archive completed deployment-config change
72 lines
3.1 KiB
Markdown
72 lines
3.1 KiB
Markdown
## 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 |