docs: update reorganize-long-files spec to include CSS reorganization

Add Phase 2 (CSS Reorganization) covering: - Restore styles/ directory (tokens, global, utilities, syntax-highlight) - Restore styles/pages/*.css for page-specific styles - Restore 11 component CSS modules from monolithic styles.css - Delete styles.css after extraction Shift frontend page extraction phases to 3-7. Add visual regression checks to integration phase. Quality gates unchanged: tsc, build, py_compile, file size limits
2026-06-05 10:33:10 +00:00
parent d472c41092
commit 7070867393
2 changed files with 134 additions and 53 deletions
@@ -47,7 +47,40 @@ Split the following pages into a thin page shell + extracted components:
 - Extract `ProjectEditDialog` → edit form in dialog
 - Page becomes: data loader + layout + dialog state manager

-#### 2. Backend Router Slimming
+#### 2. CSS Reorganization
+
+**`styles.css` (5,683 lines → deleted)**
+- Restore `styles/` directory with extracted files:
+  - `styles/tokens.css` — CSS custom properties (colors, spacing, typography)
+  - `styles/global.css` — global reset, body, shell layout
+  - `styles/utilities.css` — utility classes (.stack, .card, .muted, etc.)
+  - `styles/syntax-highlight.css` — code highlighting
+- Restore `styles/pages/*.css` — page-specific styles:
+  - `styles/pages/dashboard.css`
+  - `styles/pages/projects.css`
+  - `styles/pages/sessions.css`
+  - `styles/pages/settings.css`
+  - `styles/pages/ssh-keys.css`
+  - `styles/pages/git-history.css`
+  - `styles/pages/repo-workspace.css`
+- Restore component CSS modules:
+  - `components/features/terminal/TerminalComponent.module.css`
+  - `components/features/git/GitToolbar.module.css`
+  - `components/features/git/CommitDialog.module.css`
+  - `components/features/git/MergeDialog.module.css`
+  - `components/features/git/FileEditor.module.css`
+  - `components/features/git/FileBrowser.module.css`
+  - `components/features/git/FileViewer.module.css`
+  - `components/features/git/CommitPanel.module.css`
+  - `components/features/session/InstanceList.module.css`
+  - `components/features/settings/SettingsTabLayout.module.css`
+  - `components/layout/AppShell.module.css`
+- Update all component imports to use `import styles from './ComponentName.module.css'`
+- Update `main.tsx` to import `styles/tokens.css`, `styles/global.css`, `styles/utilities.css`, `styles/syntax-highlight.css`
+- Update each page to import its `styles/pages/*.css`
+- Delete monolithic `styles.css`
+
+#### 3. Backend Router Slimming

 **`api/tool/tool_instances.py` (2,900 → ~300 lines)**
 - Extract terminal WebSocket handlers → `api/tool/terminal.py` (~400 lines)
@@ -72,19 +105,20 @@ Split the following pages into a thin page shell + extracted components:
 - Frontend UI behavior changes (same components, same interactions)
 - Moving existing `features/` components (already organized)
 - Renaming files (naming already done)
- CSS changes (styles already work)
+- Changing any CSS rules (only moving them)

 ## 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)
+3. No monolithic `styles.css` — all CSS in `styles/` directory or `.module.css` files
+4. All existing tests pass without modification (behavior unchanged)
+5. All existing API endpoints return identical responses
+6. Frontend `npm run typecheck` passes
+7. Frontend `npm run build` passes
+8. Backend `py_compile` passes on all files
+9. No import errors in browser console
+10. File count increases (more files, smaller files)

 ## Preconditions

@@ -39,59 +39,106 @@
 - [ ] 1.4.3 Update `api/config/config_profiles.py` to call services
 - [ ] 1.4.4 Verify `py_compile` passes

-## Phase 2: Frontend — Tool Workshop Page
+## Phase 2: CSS Reorganization

- [ ] 2.1 Extract `ToolTypesTab` from `pages/ToolWorkshopPage.tsx` into `components/features/tool-workshop/ToolTypesTab.tsx`
- [ ] 2.2 Extract `ToolConfigsTab` into `components/features/tool-workshop/ToolConfigsTab.tsx`
- [ ] 2.3 Extract `ConfigFoldersTab` into `components/features/tool-workshop/ConfigFoldersTab.tsx`
- [ ] 2.4 Slim `pages/ToolWorkshopPage.tsx` to ~80 lines (tab switcher only)
- [ ] 2.5 Update imports in all consumers
- [ ] 2.6 Verify `tsc --noEmit` and `npm run build` pass
+### 2.1 Restore `styles/` Directory Structure
+- [ ] 2.1.1 Create `styles/` directory
+- [ ] 2.1.2 Extract `styles/tokens.css` from `styles.css` — CSS custom properties
+- [ ] 2.1.3 Extract `styles/global.css` from `styles.css` — global reset, body, shell layout
+- [ ] 2.1.4 Extract `styles/utilities.css` from `styles.css` — utility classes (.stack, .card, .muted, .dialog, etc.)
+- [ ] 2.1.5 Extract `styles/syntax-highlight.css` from `styles.css` — code highlighting
+- [ ] 2.1.6 Update `main.tsx` to import: `styles/tokens.css`, `styles/global.css`, `styles/utilities.css`, `styles/syntax-highlight.css`
+- [ ] 2.1.7 Verify build passes

-## Phase 3: Frontend — Config Profiles Page
+### 2.2 Restore Page-Specific CSS
+- [ ] 2.2.1 Extract `styles/pages/dashboard.css` from `styles.css`
+- [ ] 2.2.2 Extract `styles/pages/projects.css` from `styles.css`
+- [ ] 2.2.3 Extract `styles/pages/sessions.css` from `styles.css`
+- [ ] 2.2.4 Extract `styles/pages/settings.css` from `styles.css`
+- [ ] 2.2.5 Extract `styles/pages/ssh-keys.css` from `styles.css`
+- [ ] 2.2.6 Extract `styles/pages/git-history.css` from `styles.css`
+- [ ] 2.2.7 Extract `styles/pages/repo-workspace.css` from `styles.css`
+- [ ] 2.2.8 Update each page to import its page CSS
+- [ ] 2.2.9 Verify build passes

- [ ] 3.1 Extract `ConfigProfileListView` into `components/features/config-profiles/ConfigProfileListView.tsx`
- [ ] 3.2 Extract `ConfigProfileDetailView` into `components/features/config-profiles/ConfigProfileDetailView.tsx`
- [ ] 3.3 Extract `ConfigProfileEditForm` into `components/features/config-profiles/ConfigProfileEditForm.tsx`
- [ ] 3.4 Extract `ConfigProfileMobileView` into `components/features/config-profiles/ConfigProfileMobileView.tsx`
- [ ] 3.5 Slim `pages/ConfigProfilesPage.tsx` to ~80 lines
- [ ] 3.6 Update imports
- [ ] 3.7 Verify `tsc --noEmit` and `npm run build` pass
+### 2.3 Restore Component CSS Modules
+- [ ] 2.3.1 Create `components/features/terminal/TerminalComponent.module.css` from terminal styles in `styles.css`
+- [ ] 2.3.2 Create `components/features/git/GitToolbar.module.css` from git toolbar styles in `styles.css`
+- [ ] 2.3.3 Create `components/features/git/CommitDialog.module.css` from commit dialog styles in `styles.css`
+- [ ] 2.3.4 Create `components/features/git/MergeDialog.module.css` from merge dialog styles in `styles.css`
+- [ ] 2.3.5 Create `components/features/git/FileEditor.module.css` from file editor styles in `styles.css`
+- [ ] 2.3.6 Create `components/features/git/FileBrowser.module.css` from file browser styles in `styles.css`
+- [ ] 2.3.7 Create `components/features/git/FileViewer.module.css` from file viewer styles in `styles.css`
+- [ ] 2.3.8 Create `components/features/git/CommitPanel.module.css` from commit panel styles in `styles.css`
+- [ ] 2.3.9 Create `components/features/session/InstanceList.module.css` from instance list styles in `styles.css`
+- [ ] 2.3.10 Create `components/features/settings/SettingsTabLayout.module.css` from settings tab layout styles in `styles.css`
+- [ ] 2.3.11 Create `components/layout/AppShell.module.css` from shell styles in `styles.css`
+- [ ] 2.3.12 Update each component to use `import styles from './ComponentName.module.css'`
+- [ ] 2.3.13 Remove extracted styles from `styles.css`
+- [ ] 2.3.14 Verify build passes

-## Phase 4: Frontend — Terminal Page
+### 2.4 Verify and Delete Monolith
+- [ ] 2.4.1 Confirm `styles.css` is empty (or only has truly unclassifiable styles)
+- [ ] 2.4.2 Delete `styles.css`
+- [ ] 2.4.3 Verify build passes
+- [ ] 2.4.4 Verify no visual regressions

- [ ] 4.1 Extract `TerminalSessionManager` (tabs + auto-create) into `components/features/terminal/TerminalSessionManager.tsx`
- [ ] 4.2 Extract `MobileTerminalOverlay` into `components/features/terminal/MobileTerminalOverlay.tsx`
- [ ] 4.3 Extract fullscreen keyboard shortcut handler into `hooks/use-terminal-shortcuts.ts`
- [ ] 4.4 Slim `pages/TerminalPage.tsx` to ~80 lines
- [ ] 4.5 Update imports
- [ ] 4.6 Verify `tsc --noEmit` and `npm run build` pass
+## Phase 3: Frontend — Tool Workshop Page

-## Phase 5: Frontend — Settings & SSH Keys Pages
+- [ ] 3.1 Extract `ToolTypesTab` from `pages/ToolWorkshopPage.tsx` into `components/features/tool-workshop/ToolTypesTab.tsx`
+- [ ] 3.2 Extract `ToolConfigsTab` into `components/features/tool-workshop/ToolConfigsTab.tsx`
+- [ ] 3.3 Extract `ConfigFoldersTab` into `components/features/tool-workshop/ConfigFoldersTab.tsx`
+- [ ] 3.4 Slim `pages/ToolWorkshopPage.tsx` to ~80 lines (tab switcher only)
+- [ ] 3.5 Update imports in all consumers
+- [ ] 3.6 Verify `tsc --noEmit` and `npm run build` pass

- [ ] 5.1 Extract `SettingsNavigation` into `components/features/settings/SettingsNavigation.tsx`
- [ ] 5.2 Slim `pages/SettingsPage.tsx` to ~80 lines
- [ ] 5.3 Extract `SSHKeyList` into `components/features/ssh-keys/SSHKeyList.tsx`
- [ ] 5.4 Extract `SSHKeyCreateForm` into `components/features/ssh-keys/SSHKeyCreateForm.tsx`
- [ ] 5.5 Slim `pages/SshKeysPage.tsx` to ~80 lines
+## Phase 4: Frontend — Config Profiles Page
+
+- [ ] 4.1 Extract `ConfigProfileListView` into `components/features/config-profiles/ConfigProfileListView.tsx`
+- [ ] 4.2 Extract `ConfigProfileDetailView` into `components/features/config-profiles/ConfigProfileDetailView.tsx`
+- [ ] 4.3 Extract `ConfigProfileEditForm` into `components/features/config-profiles/ConfigProfileEditForm.tsx`
+- [ ] 4.4 Extract `ConfigProfileMobileView` into `components/features/config-profiles/ConfigProfileMobileView.tsx`
+- [ ] 4.5 Slim `pages/ConfigProfilesPage.tsx` to ~80 lines
+- [ ] 4.6 Update imports
+- [ ] 4.7 Verify `tsc --noEmit` and `npm run build` pass
+
+## Phase 5: Frontend — Terminal Page
+
+- [ ] 5.1 Extract `TerminalSessionManager` (tabs + auto-create) into `components/features/terminal/TerminalSessionManager.tsx`
+- [ ] 5.2 Extract `MobileTerminalOverlay` into `components/features/terminal/MobileTerminalOverlay.tsx`
+- [ ] 5.3 Extract fullscreen keyboard shortcut handler into `hooks/use-terminal-shortcuts.ts`
+- [ ] 5.4 Slim `pages/TerminalPage.tsx` to ~80 lines
+- [ ] 5.5 Update imports
 - [ ] 5.6 Verify `tsc --noEmit` and `npm run build` pass

-## Phase 6: Frontend — Projects & Repo Workspace Pages
+## Phase 6: Frontend — Settings & SSH Keys Pages

- [ ] 6.1 Extract `ProjectList` into `components/features/project/ProjectList.tsx`
- [ ] 6.2 Extract `ProjectCreateDialog` into `components/features/project/ProjectCreateDialog.tsx`
- [ ] 6.3 Extract `ProjectEditDialog` into `components/features/project/ProjectEditDialog.tsx`
- [ ] 6.4 Slim `pages/ProjectsPage.tsx` to ~100 lines
- [ ] 6.5 Extract `WorkspaceLayout` into `components/features/workspace/WorkspaceLayout.tsx`
- [ ] 6.6 Slim `pages/RepoWorkspacePage.tsx` to ~150 lines
- [ ] 6.7 Verify `tsc --noEmit` and `npm run build` pass
+- [ ] 6.1 Extract `SettingsNavigation` into `components/features/settings/SettingsNavigation.tsx`
+- [ ] 6.2 Slim `pages/SettingsPage.tsx` to ~80 lines
+- [ ] 6.3 Extract `SSHKeyList` into `components/features/ssh-keys/SSHKeyList.tsx`
+- [ ] 6.4 Extract `SSHKeyCreateForm` into `components/features/ssh-keys/SSHKeyCreateForm.tsx`
+- [ ] 6.5 Slim `pages/SshKeysPage.tsx` to ~80 lines
+- [ ] 6.6 Verify `tsc --noEmit` and `npm run build` pass

-## Phase 7: Integration and Verification
+## Phase 7: Frontend — Projects & Repo Workspace Pages

- [ ] 7.1 Run backend `py_compile` on all files
- [ ] 7.2 Run frontend `npm run typecheck`
- [ ] 7.3 Run frontend `npm run build`
- [ ] 7.4 Run frontend tests: `npm test`
- [ ] 7.5 Verify file size targets met (pages ≤ 150, routers ≤ 400)
- [ ] 7.6 Verify no 404s or import errors in browser console
- [ ] 7.7 Manual smoke test: create project, start terminal, open config profiles
+- [ ] 7.1 Extract `ProjectList` into `components/features/project/ProjectList.tsx`
+- [ ] 7.2 Extract `ProjectCreateDialog` into `components/features/project/ProjectCreateDialog.tsx`
+- [ ] 7.3 Extract `ProjectEditDialog` into `components/features/project/ProjectEditDialog.tsx`
+- [ ] 7.4 Slim `pages/ProjectsPage.tsx` to ~100 lines
+- [ ] 7.5 Extract `WorkspaceLayout` into `components/features/workspace/WorkspaceLayout.tsx`
+- [ ] 7.6 Slim `pages/RepoWorkspacePage.tsx` to ~150 lines
+- [ ] 7.7 Verify `tsc --noEmit` and `npm run build` pass
+
+## Phase 8: Integration and Verification
+
+- [ ] 8.1 Run backend `py_compile` on all files
+- [ ] 8.2 Run frontend `npm run typecheck`
+- [ ] 8.3 Run frontend `npm run build`
+- [ ] 8.4 Run frontend tests: `npm test`
+- [ ] 8.5 Verify file size targets met (pages ≤ 150, routers ≤ 400, no `styles.css` monolith)
+- [ ] 8.6 Verify no 404s or import errors in browser console
+- [ ] 8.7 Manual smoke test: create project, start terminal, open config profiles
+- [ ] 8.8 Verify visual regression: colors, spacing, typography unchanged
+- [ ] 8.9 Verify mobile terminal styles intact
+- [ ] 8.10 Verify notification dropdown styles intact