Developer
d472c41092
Create SDD proposal, spec, and tasks for splitting monolithic pages and routers into focused components and services. Targets: - Frontend pages: 50-150 lines max (from 300-1600) - Backend routers: 300-400 lines max (from 800-2900) - Follow main branch pattern: thin pages + extracted components Quality gates: tsc, build, py_compile, file size limits
95 lines
4.4 KiB
Markdown
95 lines
4.4 KiB
Markdown
## Scope
|
|
|
|
This change is a **pure structural refactoring** to split monolithic pages and routers into focused components and services. No API contracts, database schemas, or user-facing behaviors change.
|
|
|
|
### In Scope
|
|
|
|
#### 1. Frontend Page Extraction
|
|
|
|
Split the following pages into a thin page shell + extracted components:
|
|
|
|
**`pages/ToolWorkshopPage.tsx` (1,269 → ~80 lines)**
|
|
- Extract `ToolTypesTab` → `components/features/tool-workshop/ToolTypesTab.tsx`
|
|
- Extract `ToolConfigsTab` → `components/features/tool-workshop/ToolConfigsTab.tsx`
|
|
- Extract `ConfigFoldersTab` → `components/features/tool-workshop/ConfigFoldersTab.tsx`
|
|
- Page becomes: tab switcher only, imports the 3 tabs
|
|
|
|
**`pages/ConfigProfilesPage.tsx` (1,611 → ~80 lines)**
|
|
- Extract `ConfigProfileListView` → list view + mobile list view
|
|
- Extract `ConfigProfileDetailView` → detail view with edit toggle
|
|
- Extract `ConfigProfileEditForm` → edit/create form
|
|
- Extract `ConfigProfileMobileView` → mobile view state machine wrapper
|
|
- Page becomes: router between list/detail/edit views
|
|
|
|
**`pages/TerminalPage.tsx` (571 → ~80 lines)**
|
|
- Extract `TerminalSessionManager` → session tabs + auto-create logic
|
|
- Extract `TerminalKeyboardShortcuts` → shortcut handler hook (already exists, just use it)
|
|
- Extract `MobileTerminalOverlay` → mobile overlay toolbar + tabs
|
|
- Page becomes: choose between desktop (`TerminalComponent` + `TerminalSessionTabs`) and mobile (`MobileTerminalOverlay` + `TerminalComponent`) wrappers
|
|
|
|
**`pages/SettingsPage.tsx` (284 → ~80 lines)**
|
|
- Extract `SettingsNavigation` → settings nav sidebar
|
|
- Extract `GeneralSettingsTab`, `SSHKeysTab` (already separate pages, but move sections into components if inline)
|
|
- Page becomes: nav + `<Outlet>` for nested routes
|
|
|
|
**`pages/SshKeysPage.tsx` (277 → ~80 lines)**
|
|
- Extract `SSHKeyList` → list with actions
|
|
- Extract `SSHKeyCreateForm` → create form
|
|
- Page becomes: layout wrapper + conditionally render list or form
|
|
|
|
**`pages/RepoWorkspacePage.tsx` (505 → ~150 lines)**
|
|
- Extract `WorkspaceLayout` → sidebar + main content layout
|
|
- Page becomes: data loader + layout wrapper
|
|
|
|
**`pages/ProjectsPage.tsx` (433 → ~100 lines)**
|
|
- Extract `ProjectList` → list with cards
|
|
- Extract `ProjectCreateDialog` → create form in dialog
|
|
- Extract `ProjectEditDialog` → edit form in dialog
|
|
- Page becomes: data loader + layout + dialog state manager
|
|
|
|
#### 2. Backend Router Slimming
|
|
|
|
**`api/tool/tool_instances.py` (2,900 → ~300 lines)**
|
|
- Extract terminal WebSocket handlers → `api/tool/terminal.py` (~400 lines)
|
|
- Extract instance lifecycle (create/start/stop/delete/restart) → `api/tool/tool_lifecycle.py` (~600 lines)
|
|
- Keep in `tool_instances.py`: CRUD endpoints (GET list, GET detail, POST, PATCH, DELETE) + instance proxy endpoint
|
|
|
|
**`api/project/git_repositories.py` (1,588 → ~300 lines)**
|
|
- Extract git command orchestration into `services/git/operations.py`
|
|
- Router keeps: auth, parameter validation, response building, error handling
|
|
- Service functions: `clone_repo`, `fetch_repo`, `pull_repo`, `push_repo`, `merge_repo`, etc.
|
|
|
|
**`api/config/config_profiles.py` (842 → ~200 lines)**
|
|
- Extract resolver orchestration into `services/config/resolver_service.py`
|
|
- Extract CRUD helpers into `services/config/crud_service.py`
|
|
- Router keeps: endpoint definitions, auth, input validation
|
|
|
|
### Out of Scope
|
|
|
|
- Any new features or behavioral changes
|
|
- Database schema changes (no migrations)
|
|
- API contract changes (same endpoints, same request/response shapes)
|
|
- Frontend UI behavior changes (same components, same interactions)
|
|
- Moving existing `features/` components (already organized)
|
|
- Renaming files (naming already done)
|
|
- CSS changes (styles already work)
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. All pages ≤ 150 lines (except `RepoWorkspacePage` which may stay at ~150)
|
|
2. All API routers ≤ 400 lines
|
|
3. All existing tests pass without modification (behavior unchanged)
|
|
4. All existing API endpoints return identical responses
|
|
5. Frontend `npm run typecheck` passes
|
|
6. Frontend `npm run build` passes
|
|
7. Backend `py_compile` passes on all files
|
|
8. No import errors in browser console
|
|
9. File count increases (more files, smaller files)
|
|
|
|
## Preconditions
|
|
|
|
- `dev` branch is stable (all fixes from this session are committed)
|
|
- Backend compiles (`py_compile` pass)
|
|
- Frontend typechecks and builds (`tsc`, `vite build` pass)
|
|
- Current tests pass (or known failures are documented)
|