From 70708673934221e7d5b46b8c6763ab092c77dfc5 Mon Sep 17 00:00:00 2001 From: Developer Date: Fri, 5 Jun 2026 10:33:10 +0000 Subject: [PATCH] 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 --- .../changes/reorganize-long-files/spec.md | 52 +++++-- .../changes/reorganize-long-files/tasks.md | 135 ++++++++++++------ 2 files changed, 134 insertions(+), 53 deletions(-) diff --git a/openspec/changes/reorganize-long-files/spec.md b/openspec/changes/reorganize-long-files/spec.md index 813b312..72b7999 100644 --- a/openspec/changes/reorganize-long-files/spec.md +++ b/openspec/changes/reorganize-long-files/spec.md @@ -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 diff --git a/openspec/changes/reorganize-long-files/tasks.md b/openspec/changes/reorganize-long-files/tasks.md index 1be5bde..1c9d293 100644 --- a/openspec/changes/reorganize-long-files/tasks.md +++ b/openspec/changes/reorganize-long-files/tasks.md @@ -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