Skip to content

Split oversized monolith source files#164

Open
friuns2 wants to merge 19 commits into
mainfrom
codex/split-monolith-source-files
Open

Split oversized monolith source files#164
friuns2 wants to merge 19 commits into
mainfrom
codex/split-monolith-source-files

Conversation

@friuns2
Copy link
Copy Markdown
Owner

@friuns2 friuns2 commented May 12, 2026

Summary

  • Split oversized Vue SFCs into external template/style/helper modules.
  • Extracted server bridge, gateway, desktop-state, and thread-conversation helpers into focused modules.
  • Kept the scanned source files under the 3000-line cap.

Size check

Largest scanned source files now:

2993 src/App.vue
2985 src/composables/useDesktopStateCore.mts
2973 src/server/codexAppServerBridge.ts
2956 src/components/content/ThreadConversation.vue
2945 src/components/sidebar/SidebarThreadTree.vue
2935 src/api/codexGateway.ts

Scan included *.ts, *.tsx, *.mts, *.cts, *.js, *.jsx, *.mjs, *.cjs, *.svelte, and *.vue, excluding dependency/build/output folders.

Verification

  • pnpm run build:frontend
  • pnpm run test:unit -> 11 files, 60 tests passed
  • pnpm run build:cli

Performance audit

  • Frontend build succeeds after the refactor.
  • Vite still reports the existing large minified index chunk warning around 501 kB; the refactor keeps runtime behavior split-equivalent and does not add request paths or polling work.

@qodo-free-for-open-source-projects
Copy link
Copy Markdown

Review Summary by Qodo

Split oversized monolith source files into focused modules

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Split oversized Vue SFCs and TypeScript monoliths into focused, modular files
• Extracted 28+ helper modules covering desktop state management, server operations, API gateways,
  and UI components
• Reduced largest source files from 3000+ lines to under 3000 lines (App.vue: 2993,
  useDesktopStateCore.mts: 2985, codexAppServerBridge.ts: 2973, ThreadConversation.vue: 2956,
  SidebarThreadTree.vue: 2945, codexGateway.ts: 2935)
• Key extractions include thread helpers, session recovery, notification readers, app server process
  management, review/directory normalization, inline payload sanitization, and storage management
• Maintained runtime behavior and build performance; frontend build succeeds with no new warnings
• All 60 unit tests pass across 11 test files
• Verified with pnpm run build:frontend, pnpm run test:unit, and pnpm run build:cli
Diagram
flowchart LR
  Monolith["Oversized Source Files<br/>3000+ lines"] -->|Extract Thread Logic| ThreadHelpers["desktopStateThreadHelpers.ts<br/>846 lines"]
  Monolith -->|Extract Server Ops| ServerModules["sessionRecovery.ts<br/>appServerProcess.ts<br/>threadInlinePayloads.ts"]
  Monolith -->|Extract API Logic| GatewayModules["codexGatewayReview.ts<br/>codexGatewayDirectory.ts<br/>codexGatewayTerminal.ts"]
  Monolith -->|Extract UI State| StateModules["desktopStateStorage.ts<br/>globalStateStore.ts"]
  Monolith -->|Extract Component Styles| StyleFiles["SidebarThreadTree.scoped.css<br/>App.scoped.css<br/>ThreadConversation.scoped.css"]
  ThreadHelpers --> Result["Refactored Codebase<br/>All files &lt; 3000 lines"]
  ServerModules --> Result
  GatewayModules --> Result
  StateModules --> Result
  StyleFiles --> Result
Loading

Grey Divider

File Changes

1. src/composables/desktopStateThreadHelpers.ts ✨ Enhancement +846/-0

Extract desktop state thread helper functions module

• Extracted 846 lines of thread management helper functions from a larger monolith
• Includes utilities for thread flattening, ordering, merging, and state comparison
• Provides functions for message handling, turn summaries, and workspace project organization
• Exports constants for debounce timings, reasoning effort options, and model fallback IDs

src/composables/desktopStateThreadHelpers.ts


2. src/server/sessionRecovery.ts ✨ Enhancement +738/-0

Add session recovery and file reversion module

• New 738-line module for session recovery and file change reversion
• Implements parsing of apply_patch commands and recovery of file changes from session logs
• Provides functions to revert turn file changes using git or direct file manipulation
• Includes session command merging and turn file info collection utilities

src/server/sessionRecovery.ts


3. src/composables/desktopStateNotificationReaders.ts ✨ Enhancement +798/-0

Add notification reader and normalization utilities module

• New 798-line module for parsing and normalizing RPC notifications
• Handles rate limit snapshots, token usage, server requests, and turn activity tracking
• Provides functions for reading reasoning, agent messages, and image generation events
• Includes normalization of pending server request methods and approval request detection

src/composables/desktopStateNotificationReaders.ts


View more (35)
4. src/server/appServerProcess.ts ✨ Enhancement +704/-0

Add app server process management class

• New 704-line module implementing the AppServerProcess class for managing codex app-server
 lifecycle
• Handles JSON-RPC communication, stream event buffering, and thread state caching
• Manages server-initiated requests (approvals, tool calls) and ChatGPT auth token refresh
• Provides item capture and merge functionality for turns

src/server/appServerProcess.ts


5. src/api/codexGateway.ts ✨ Enhancement +3/-453

Refactor gateway imports and extract review/directory logic

• Removed inline type imports for UiReviewFile, UiReviewFinding, UiReviewHunk, UiReviewLine
• Added imports from new extracted modules codexGatewayReview and codexGatewayDirectory
• Re-exported terminal functions from codexGatewayTerminal module
• Consolidated review and directory normalization logic into separate focused modules

src/api/codexGateway.ts


6. src/api/codexGatewayReview.ts ✨ Enhancement +226/-0

Extract review normalization and parsing module

• New 226-line module extracting review-related normalization and parsing functions
• Implements normalizeReviewSnapshot, parseReviewText, and readLatestReviewItem functions
• Handles normalization of review files, hunks, lines, and findings from API responses
• Parses review text into structured findings with location and metadata

src/api/codexGatewayReview.ts


7. src/server/threadInlinePayloads.ts ✨ Enhancement +578/-0

Extract thread inline payload sanitization logic

• Extracted new module handling inline payload sanitization for thread turns, including image and
 file attachment processing
• Implements session skill input recovery from session logs with caching mechanism
• Provides functions to persist inline data URLs to local files and convert them to proxy URLs
• Sanitizes thread turn payloads recursively to replace inline data with local file references

src/server/threadInlinePayloads.ts


8. src/server/composioRoutesSupport.ts ✨ Enhancement +524/-0

Add Composio CLI integration and connector support

• New module providing Composio CLI integration and connector management functionality
• Implements CLI invocation resolution, JSON parsing, and process spawning for Composio commands
• Provides functions to read Composio status, list connectors, manage connections, and handle
 authentication
• Includes type definitions for Composio API responses and user data structures

src/server/composioRoutesSupport.ts


9. src/server/backendQueueProcessor.ts ✨ Enhancement +507/-0

Implement backend queue processor for thread automation

• New module implementing backend queue processing for threaded message automation
• Manages queued turns with state persistence and recovery mechanisms
• Handles collaboration mode settings resolution and queued turn parameter building
• Provides BackendQueueProcessor class for scheduling and processing thread queues

src/server/backendQueueProcessor.ts


10. src/server/threadAutomations.ts ✨ Enhancement +420/-0

Add thread and project automation management

• New module for managing thread and project automation records with TOML serialization
• Implements heartbeat and cron automation types with file-based persistence
• Provides functions to create, read, update, and delete automation records
• Includes TOML parsing and serialization for automation configuration storage

src/server/threadAutomations.ts


11. src/composables/desktopStateStorage.ts ✨ Enhancement +448/-0

Extract desktop state storage and localStorage management

• New module for managing desktop UI state persistence using localStorage
• Implements storage and retrieval of thread read states, token usage, collaboration modes, and
 project metadata
• Provides normalization and validation functions for stored data structures
• Includes context-aware model and collaboration mode selection with legacy migration support

src/composables/desktopStateStorage.ts


12. src/server/globalStateStore.ts ✨ Enhancement +418/-0

Extract global state store and workspace management

• New module for managing global application state including workspace roots and thread titles
• Implements thread title caching with session index parsing and file signature tracking
• Provides workspace roots state management with persistence and mutation queueing
• Includes functions for pinned thread IDs and first-launch UI state management

src/server/globalStateStore.ts


13. src/api/codexGatewayDirectory.ts ✨ Enhancement +185/-0

Add directory API response normalization utilities

• New module providing normalization functions for directory API responses
• Implements parsing and validation of plugin, app, and MCP server information from API payloads
• Provides type-safe conversion of raw API data to normalized summary structures
• Includes support for marketplace metadata and branding information

src/api/codexGatewayDirectory.ts


14. src/appSettingsSupport.ts ✨ Enhancement +336/-0

App settings and preferences support module extraction

• Extracted application settings and preferences management into a dedicated module
• Includes localStorage-backed preference loaders for dark mode, chat width, send mode, and
 dictation language
• Provides terminal quick-command building, normalization, and persistence utilities
• Exports type definitions for chat width modes, terminal commands, and directory payloads

src/appSettingsSupport.ts


15. src/server/mediaProxyRoutes.ts ✨ Enhancement +255/-0

Server media proxy and upload routes extraction

• Extracted media proxy and file upload handling into dedicated server module
• Implements multipart form-data file upload parsing and temporary storage
• Provides transcription proxy with curl-impersonate fallback for Cloudflare bypass
• Includes connector logo fetching with base64 decoding support

src/server/mediaProxyRoutes.ts


16. src/components/content/threadConversationFileChanges.ts ✨ Enhancement +252/-0

Thread conversation file-change helper utilities extraction

• Extracted file-change summary and diff-viewer line building utilities
• Provides aggregation, merging, and comparison functions for file changes
• Implements unified diff parsing with line-number tracking for added/removed/context lines
• Includes formatting and labeling helpers for file operation badges and deltas

src/components/content/threadConversationFileChanges.ts


17. src/server/providerModelDiscovery.ts ✨ Enhancement +220/-0

Provider model discovery and endpoint utilities extraction

• Extracted provider model discovery and endpoint querying into focused module
• Implements OpenAI-compatible /models endpoint discovery with timeout handling
• Provides model ID normalization and validation from provider responses
• Includes comprehensive error logging and fallback handling for misconfigured providers

src/server/providerModelDiscovery.ts


18. src/server/threadSearchIndex.ts ✨ Enhancement +197/-0

Thread search index and document building extraction

• Extracted thread search indexing and full-text search document building
• Implements ripgrep-based file listing with hidden file and git exclusion
• Provides concurrent thread loading with message text extraction and searchability scoring
• Includes exact phrase matching and file path candidate scoring for search results

src/server/threadSearchIndex.ts


19. src/components/content/threadConversationPathHelpers.ts ✨ Enhancement +202/-0

Thread conversation path parsing helper utilities extraction

• Extracted file path parsing and normalization utilities for thread conversations
• Provides path validation, separator normalization, and dot-path resolution
• Implements markdown link parsing and file reference extraction with line numbers
• Includes heading tag/class mapping and link wrapper trimming utilities

src/components/content/threadConversationPathHelpers.ts


20. src/server/authRefresh.ts ✨ Enhancement +176/-0

ChatGPT authentication token refresh module extraction

• Extracted ChatGPT authentication token refresh logic into dedicated module
• Implements JWT payload decoding and token metadata extraction
• Provides OAuth token refresh with error handling and account ID recovery
• Includes auth file persistence with secure file permissions

src/server/authRefresh.ts


21. src/server/terminalQuickCommands.ts ✨ Enhancement +147/-0

Terminal quick-command discovery and formatting extraction

• Extracted terminal quick-command discovery from package.json, Makefile, and shell scripts
• Implements package manager detection (npm, pnpm, yarn, bun) for script formatting
• Provides deduplication and shell token quoting for command values
• Includes directory traversal for root and scripts/ directory command discovery

src/server/terminalQuickCommands.ts


22. src/server/projectCreation.ts ✨ Enhancement +117/-0

Project creation and repository cloning utilities extraction

• Extracted projectless thread directory creation and GitHub repository cloning utilities
• Implements date-based directory structure with slug generation from prompts
• Provides GitHub URL normalization for SSH and HTTPS clone URLs
• Includes symlink detection and unique folder creation with retry logic

src/server/projectCreation.ts


23. src/server/methodCatalog.ts ✨ Enhancement +125/-0

Method catalog schema discovery and caching extraction

• Extracted method catalog generation from Codex CLI schema output
• Implements JSON schema parsing for client request and server notification methods
• Provides caching of discovered methods and notifications with lazy loading
• Includes error handling for missing Codex CLI or schema generation failures

src/server/methodCatalog.ts


24. src/api/codexGatewayTerminal.ts ✨ Enhancement +106/-0

Terminal API gateway functions extraction

• Extracted terminal session and quick-command API gateway functions
• Implements terminal session normalization and validation from server responses
• Provides fetch wrappers for attach, status, input, resize, and close operations
• Includes quick-command fetching with source validation (package/script/make)

src/api/codexGatewayTerminal.ts


25. src/server/apiPerfConfig.ts ✨ Enhancement +86/-0

API performance configuration and logging setup extraction

• Extracted API performance logging configuration from environment and .env files
• Implements threshold parsing for millisecond and megabyte limits
• Provides byte-length calculation for various buffer types
• Includes fallback chain for environment variables, .env.local, and .env files

src/server/apiPerfConfig.ts


26. src/appExportMarkdown.ts ✨ Enhancement +73/-0

Thread markdown export formatter module extraction

• Extracted thread markdown export formatting into dedicated module
• Implements thread title, metadata, and message role formatting
• Provides command execution output and file attachment/image listing
• Includes markdown text escaping and export filename generation with timestamps

src/appExportMarkdown.ts


27. src/components/sidebar/SidebarThreadTree.vue ✨ Enhancement +1/-506

Sidebar thread tree component CSS extraction

• Extracted 509 lines of scoped CSS styles into external stylesheet
• Maintains all styling for thread tree, project groups, automation panels, and rename dialogs
• Reduces component file size while preserving visual behavior and responsive design
• References external SidebarThreadTree.scoped.css file

src/components/sidebar/SidebarThreadTree.vue


28. tests.md 🧪 Tests +110/-0

Test documentation for extracted helper modules

• Added comprehensive test documentation for four extracted helper modules
• Includes test steps for app export markdown, file-change helpers, server inline payloads, and
 desktop state storage
• Provides prerequisites, expected results, and rollback procedures for each feature
• Documents manual verification steps for theme consistency and persistence behavior

tests.md


29. src/App.scoped.css Additional files +1037/-0

...

src/App.scoped.css


30. src/App.template.html Additional files +1065/-0

...

src/App.template.html


31. src/App.vue Additional files +26/-2516

...

src/App.vue


32. src/components/content/ThreadConversation.scoped.css Additional files +1149/-0

...

src/components/content/ThreadConversation.scoped.css


33. src/components/content/ThreadConversation.template.html Additional files +866/-0

...

src/components/content/ThreadConversation.template.html


34. src/components/content/ThreadConversation.vue Additional files +17/-2461

...

src/components/content/ThreadConversation.vue


35. src/components/sidebar/SidebarThreadTree.scoped.css Additional files +504/-0

...

src/components/sidebar/SidebarThreadTree.scoped.css


36. src/composables/useDesktopState.ts Additional files +1/-5485

...

src/composables/useDesktopState.ts


37. src/composables/useDesktopStateCore.mts Additional files +2985/-0

...

src/composables/useDesktopStateCore.mts


38. src/server/codexAppServerBridge.ts Additional files +606/-5173

...

src/server/codexAppServerBridge.ts


Grey Divider

Qodo Logo

@qodo-free-for-open-source-projects
Copy link
Copy Markdown

qodo-free-for-open-source-projects Bot commented May 12, 2026

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (2)

Grey Divider


Action required

1. Inline payload missing theme steps 📘 Rule violation ⚙ Maintainability
Description
The new Server inline payload helper split section instructs manual UI verification (inline media
rendering, skill chips) but does not include required light-theme and dark-theme steps/results. This
makes the manual test instructions incomplete per the checklist requirements for UI changes.
Code

tests.md[R361-381]

+### Server inline payload helper split
+
+#### Feature/Change Name
+Codex bridge inline payload and session-skill recovery extraction.
+
+#### Prerequisites/Setup
+1. Dependencies installed with `pnpm install`
+2. Existing Codex session fixtures covered by the server bridge unit tests
+
+#### Steps
+1. Run `pnpm run test:unit -- src/server/codexAppServerBridge.inlinePayload.test.ts src/server/codexAppServerBridge.archive.test.ts`.
+2. Run `pnpm run build:cli`.
+3. Manually open a thread that contains generated/inline image or file payload content.
+4. Confirm inline media still renders through local proxy URLs instead of huge inline payloads.
+5. Open a thread whose user message used skills and confirm skill chips remain associated with the correct turn.
+
+#### Expected Results
+- Inline payload sanitization tests pass.
+- Archive recovery tests continue to pass through the bridge re-export.
+- CLI build succeeds with the extracted server module.
+- Session skill inputs and local inline-media proxying behave the same after extraction.
Evidence
PR Compliance ID 2 requires newly added/updated tests.md feature sections to include light/dark UI
verification steps/results when UI behavior is involved. The added section at tests.md[361-381]
includes UI checks (inline media rendering, skill chips) but contains no light/dark verification
steps.

AGENTS.md
tests.md[361-381]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The `Server inline payload helper split` manual test section includes UI verification steps but omits required light-theme and dark-theme verification steps/results.

## Issue Context
PR Compliance requires that any new/updated `tests.md` feature section covering UI behavior includes both light and dark theme checks.

## Fix Focus Areas
- tests.md[361-385]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

2. App.scoped.css uses :global dark overrides 📘 Rule violation ⚙ Maintainability
Description
New dark-theme overrides for major shared UI surfaces (e.g., codex-login-modal) are implemented as
component-scoped :global(:root.dark) rules in src/App.scoped.css instead of being centralized in
src/style.css. This increases risk of scattered/duplicated theme behavior and conflicts with the
checklist’s preferred approach for shared/large feature UIs.
Code

src/App.scoped.css[R769-800]

+:global(:root.dark) .codex-login-modal {
+  @apply border-zinc-700 bg-zinc-900;
+}
+
+:global(:root.dark) .codex-login-modal-title {
+  @apply text-zinc-100;
+}
+
+:global(:root.dark) .codex-login-modal-close,
+:global(:root.dark) .codex-login-modal-cancel {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-200 hover:bg-zinc-700;
+}
+
+:global(:root.dark) .codex-login-modal-copy {
+  @apply text-zinc-300;
+}
+
+:global(:root.dark) .codex-login-modal-link {
+  @apply text-sky-300 hover:text-sky-200;
+}
+
+:global(:root.dark) .codex-login-modal-input {
+  @apply border-zinc-600 bg-zinc-950 text-zinc-100 placeholder:text-zinc-500 focus:border-zinc-400;
+}
+
+:global(:root.dark) .codex-login-modal-error {
+  @apply bg-rose-950/40 text-rose-200;
+}
+
+:global(:root.dark) .codex-login-modal-submit {
+  @apply border-zinc-200 bg-zinc-100 text-zinc-900 hover:bg-white;
+}
Evidence
PR Compliance ID 4 prefers decisive dark-theme overrides for shared route/large feature UIs to be
placed in the global theme stylesheet (src/style.css) rather than component-scoped
:global(:root.dark) rules. The added rules in src/App.scoped.css[769-800] define dark-mode
styling for codex-login-modal using :global(:root.dark) selectors.

AGENTS.md
src/App.scoped.css[769-800]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`src/App.scoped.css` introduces/retains multiple component-scoped `:global(:root.dark)` selectors for major shared UI elements (e.g., the login modal). The compliance checklist prefers decisive dark-theme overrides for shared route/large feature UIs to live in the global stylesheet (`src/style.css`).

## Issue Context
Centralizing decisive theme overrides reduces duplication and makes dark-mode behavior consistent across shared surfaces.

## Fix Focus Areas
- src/App.scoped.css[769-800]
- src/style.css[1-2000]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Qodo Logo

Comment thread tests.md
Comment on lines +361 to +381
### Server inline payload helper split

#### Feature/Change Name
Codex bridge inline payload and session-skill recovery extraction.

#### Prerequisites/Setup
1. Dependencies installed with `pnpm install`
2. Existing Codex session fixtures covered by the server bridge unit tests

#### Steps
1. Run `pnpm run test:unit -- src/server/codexAppServerBridge.inlinePayload.test.ts src/server/codexAppServerBridge.archive.test.ts`.
2. Run `pnpm run build:cli`.
3. Manually open a thread that contains generated/inline image or file payload content.
4. Confirm inline media still renders through local proxy URLs instead of huge inline payloads.
5. Open a thread whose user message used skills and confirm skill chips remain associated with the correct turn.

#### Expected Results
- Inline payload sanitization tests pass.
- Archive recovery tests continue to pass through the bridge re-export.
- CLI build succeeds with the extracted server module.
- Session skill inputs and local inline-media proxying behave the same after extraction.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Inline payload missing theme steps 📘 Rule violation ⚙ Maintainability

The new Server inline payload helper split section instructs manual UI verification (inline media
rendering, skill chips) but does not include required light-theme and dark-theme steps/results. This
makes the manual test instructions incomplete per the checklist requirements for UI changes.
Agent Prompt
## Issue description
The `Server inline payload helper split` manual test section includes UI verification steps but omits required light-theme and dark-theme verification steps/results.

## Issue Context
PR Compliance requires that any new/updated `tests.md` feature section covering UI behavior includes both light and dark theme checks.

## Fix Focus Areas
- tests.md[361-385]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants