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
3.1 KiB
3.1 KiB
1. Setup & Dependencies
- 1.1 Install frontend dependencies: react-router-dom, @tanstack/react-query, zustand, @headlessui/react
- 1.2 Set up Tailwind CSS configuration (tailwind.config.js, postcss.config.js)
- 1.3 Create environment type definitions in apps/web/src/env.d.ts
- 1.4 Add Vite environment variables to .env.example (VITE_API_URL, VITE_OIDC_ISSUER, etc.)
2. API Client & Types
- 2.1 Create apps/web/src/api/client.ts with typed fetch wrapper and auth header injection
- 2.2 Generate or create TypeScript interfaces matching backend schemas (Project, User, etc.)
- 2.3 Implement error handling with ApiError class
- 2.4 Add request/response logging in debug mode
3. Authentication
- 3.1 Create apps/web/src/auth/oidc.ts with PKCE code generation and token exchange
- 3.2 Implement auth store (Zustand) with state: loading, authenticated, unauthenticated, error
- 3.3 Create AuthProvider component wrapping the app
- 3.4 Implement login redirect to Authentik authorize endpoint
- 3.5 Implement callback handler (/callback route) for code exchange
- 3.6 Implement logout with end_session_endpoint redirect
- 3.7 Add token refresh logic for expired access tokens
4. Routing & Layout
- 4.1 Set up React Router with route definitions in apps/web/src/router.tsx
- 4.2 Create DashboardLayout component with header, sidebar, and outlet
- 4.3 Implement RouteGuard component for protected routes
- 4.4 Add public routes: /login, /callback
- 4.5 Add protected routes: /, /projects, /projects/:id, /tools, /settings
5. Dashboard Shell
- 5.1 Create Header component with app name and user avatar dropdown
- 5.2 Create Sidebar component with navigation links
- 5.3 Implement mobile-responsive sidebar toggle
- 5.4 Add active route highlighting in sidebar
- 5.5 Create Dashboard home page with welcome content
6. Project Management UI
- 6.1 Create ProjectList page fetching from /api/v1/projects
- 6.2 Implement ProjectCard component for list view
- 6.3 Add empty state when no projects exist
- 6.4 Create ProjectDetail page at /projects/:id
- 6.5 Implement NewProject form with validation (name, description)
- 6.6 Implement EditProject form with pre-filled data
- 6.7 Add delete confirmation dialog for projects
- 6.8 Wire up TanStack Query mutations for create/update/delete
7. Placeholder Pages
- 7.1 Create Tools page placeholder
- 7.2 Create Settings page placeholder
- 7.3 Create Repositories page placeholder
8. Testing & Verification
- 8.1 Write unit tests for auth store
- 8.2 Write unit tests for API client error handling
- 8.3 Write tests for RouteGuard component
- 8.4 Update App.test.tsx to test routing
- 8.5 Run
pnpm testand fix any failures - 8.6 Run
pnpm lintand fix any issues - 8.7 Run
pnpm typecheckand fix any errors
9. Documentation
- 9.1 Update docs/development.md with frontend auth setup instructions
- 9.2 Update README.md with new environment variables
- 9.3 Add frontend architecture notes to docs/architecture.md