Developer
6bd7443e68
- Extract CreateSessionForm component with self-contained form state - Extract SessionList component managing confirmations and health polling - Extract SessionCard presentational component for active/recent variants - Add ConfirmDialog reusable UI primitive - Slim sessions page from ~668 lines to 156 lines - Keep lastSession section inline per design decision Quality gates: tsc (pass), eslint (pass), build (pass) Refs: repo-restructure Task 4.2
2.8 KiB
2.8 KiB
Task 4.2 Apply Report: Extract Sessions Page Components
Status: Success
Files Created (5)
apps/web/src/components/ui/ConfirmDialog.tsx(48 lines) — Reusable modal confirmation dialogapps/web/src/components/features/session/SessionCard.tsx(204 lines) — Presentational session card supporting "active" and "recent" variantsapps/web/src/components/features/session/SessionList.tsx(194 lines) — Manages stop/delete confirmation state, tunnel health polling, and API callsapps/web/src/components/features/session/CreateSessionForm.tsx(173 lines) — Self-contained create session form with project/repo/tool type selectsapps/web/src/components/features/session/index.ts(3 lines) — Barrel export for session feature components
Files Modified (3)
apps/web/src/pages/sessions.tsx— Slimmed from ~668 lines to 156 lines- Removed inline form state, list state, confirmation state, tunnel health polling
- Removed all API calls (createInstance, startInstance, stopInstance, deleteInstance, etc.)
- Keeps: data loading (sessions, projects, toolTypes), lastSession section, layout composition
- Imports CreateSessionForm and SessionList from components/features/session
apps/web/src/components/ui/index.ts— Added ConfirmDialog export
Quality Gate Results
| Gate | Result |
|---|---|
npm run typecheck |
✅ PASS — zero errors |
npm run lint |
✅ PASS — zero warnings |
npm run build |
✅ PASS — build succeeds in 10.28s |
wc -l pages/sessions.tsx |
✅ 156 lines (≤ 200) |
wc -l components/features/session/CreateSessionForm.tsx |
✅ 173 lines (≤ 300) |
wc -l components/features/session/SessionList.tsx |
✅ 194 lines (≤ 300) |
wc -l components/features/session/SessionCard.tsx |
✅ 204 lines (≤ 300) |
wc -l components/ui/ConfirmDialog.tsx |
✅ 48 lines (≤ 300) |
Architecture
- SessionsPage (156 lines): Orchestrates data loading, keeps lastSession UI inline, composes CreateSessionForm and SessionList
- CreateSessionForm (173 lines): Owns form state, repository loading, submission with create+start+config update
- SessionList (194 lines): Owns confirmation IDs, tunnel health state, recreating state, health polling useEffect, makes stop/delete/recreate API calls
- SessionCard (204 lines): Pure presentational component, renders active card or recent list item based on variant prop
- ConfirmDialog (48 lines): Reusable modal dialog for future use (not yet used by SessionList which keeps inline confirmations)
Notes
- No behavior changes — all user flows work identically
- SessionList handles inline confirmations to match original UX (not modal dialogs)
- Tunnel health polling remains in SessionList (active variant only) with 30s interval
- onOpen callback handles navigation for terminal URLs and project fallback