Project architecture and file structure conventions for all process types. Use when: (1) Creating new files or modules, (2) Deciding where code should go, (3) Converting single-file components to directories, (4) Reviewing code for structure compliance, (5) Adding new bridges, services, agents, or workers.
Determine correct file placement and structure for an Electron multi-process project.
Is it UI (React components, hooks, pages)?
└── YES → src/renderer/ → see references/renderer.md
Is it an IPC handler responding to renderer calls?
└── YES → src/process/bridge/ → see references/process.md
Is it business logic running in the main process?
└── YES → src/process/services/ → see references/process.md
Is it an AI platform connection (API client, message protocol)?
└── YES → src/process/agent/<platform>/
Is it a background task that runs in a worker thread?
└── YES → src/process/worker/
Is it used by BOTH main and renderer processes?
└── YES → src/common/
Is it an HTTP/WebSocket endpoint?
└── YES → src/process/webserver/
Is it a plugin/extension resolver or loader?
└── YES → src/process/extensions/
Is it a messaging channel (Lark, DingTalk, Telegram)?
└── YES → src/process/channels/
Hard rules — violating them causes runtime crashes.
| Process | Can use | Cannot use |
|---|---|---|
Main (src/process/) | Node.js, Electron main APIs, fs, path, child_process | DOM APIs (document, window, React) |
Renderer (src/renderer/) | DOM APIs, React, browser APIs | Node.js APIs (fs, path), Electron main APIs |
Worker (src/process/worker/) | Node.js APIs | DOM APIs, Electron APIs |
Preload (src/preload.ts) | contextBridge, ipcRenderer | DOM manipulation, Node.js fs |
Cross-process communication:
src/preload.ts + src/process/bridge/*.tssrc/process/worker/WorkerProtocol.ts// NEVER in renderer
import { something } from '@process/services/foo'; // crashes at runtime
// Use IPC instead
const result = await window.api.someMethod(); // goes through preload
| Scope | Convention | Reason |
|---|---|---|
| Renderer component/module dirs | PascalCase | React convention — dir name = component name |
| Everything else | lowercase | Node.js convention |
| Categorical dirs (everywhere) | lowercase | components/, hooks/, utils/, services/ |
| Platform dirs (everywhere) | lowercase | acp/, codex/, gemini/ — cross-process consistency |
Quick test: "Inside
src/renderer/AND represents a specific component/feature (not a category)?" → PascalCase. Otherwise → lowercase.
| Content | Convention | Examples |
|---|---|---|
| React components, classes | PascalCase | SettingsModal.tsx, CronService.ts |
| Hooks | camelCase with use prefix | useTheme.ts, useCronJobs.ts |
| Utilities, helpers | camelCase | formatDate.ts, cronUtils.ts |
| Entry points | index.ts / index.tsx | Required for directory-based modules |
| Config, types, constants | camelCase | types.ts, constants.ts |
| Styles | kebab-case or Name.module.css | chat-layout.css |
index.tsx.pages/<PageName>/. Promote to shared only when a second consumer appears.Tests mirror source files in tests/ subdirectories:
| Source | Test |
|---|---|
src/process/services/CronService.ts | tests/unit/cronService.test.ts |
src/renderer/hooks/ui/useAutoScroll.ts | tests/unit/useAutoScroll.dom.test.ts |
src/process/extensions/ExtensionLoader.ts | tests/unit/extensions/extensionLoader.test.ts |
When tests/unit/ exceeds 10 direct children, group into subdirectories matching source structure.
preload.tsindex.tsx / index.ts entry pointpages/<PageName>/, not in shared dirsvitest.config.ts → coverage.exclude