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
49 lines
2.8 KiB
Markdown
49 lines
2.8 KiB
Markdown
# 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 dialog
|
|
- `apps/web/src/components/features/session/SessionCard.tsx` (204 lines) — Presentational session card supporting "active" and "recent" variants
|
|
- `apps/web/src/components/features/session/SessionList.tsx` (194 lines) — Manages stop/delete confirmation state, tunnel health polling, and API calls
|
|
- `apps/web/src/components/features/session/CreateSessionForm.tsx` (173 lines) — Self-contained create session form with project/repo/tool type selects
|
|
- `apps/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
|