b8ab0208d0
Set up the complete project foundation for ClawX, a graphical AI assistant: - Electron main process with IPC handlers, menu, tray, and gateway management - React renderer with routing, layout components, and page scaffolding - Zustand state management for gateway, settings, channels, skills, chat, and cron - shadcn/ui components with Tailwind CSS and CSS variable theming - Build tooling with Vite, electron-builder, and TypeScript configuration - Testing setup with Vitest and Playwright - Development configurations (ESLint, Prettier, gitignore, env example)
109 lines
3.9 KiB
Markdown
109 lines
3.9 KiB
Markdown
# Commit 1: Project Skeleton
|
|
|
|
## Summary
|
|
Initialize the ClawX project with Electron + React + TypeScript architecture, including all foundational components for v0.1.0 Alpha.
|
|
|
|
## Changes
|
|
|
|
### Project Configuration
|
|
- `package.json` - Project dependencies and scripts
|
|
- `tsconfig.json` / `tsconfig.node.json` - TypeScript configuration
|
|
- `vite.config.ts` - Vite bundler configuration with Electron plugins
|
|
- `tailwind.config.js` / `postcss.config.js` - Tailwind CSS setup
|
|
- `electron-builder.yml` - Multi-platform packaging configuration
|
|
- `.eslintrc.cjs` / `.prettierrc` - Code style configuration
|
|
- `vitest.config.ts` - Test framework configuration
|
|
- `.gitignore` / `.env.example` - Git and environment setup
|
|
|
|
### Electron Main Process (`electron/`)
|
|
- `main/index.ts` - Main process entry point
|
|
- `main/window.ts` - Window state management
|
|
- `main/tray.ts` - System tray functionality
|
|
- `main/menu.ts` - Application menu
|
|
- `main/ipc-handlers.ts` - IPC communication handlers
|
|
- `gateway/manager.ts` - Gateway process lifecycle management
|
|
- `gateway/client.ts` - Typed Gateway RPC client
|
|
- `gateway/protocol.ts` - JSON-RPC protocol definitions
|
|
- `preload/index.ts` - Context bridge for renderer
|
|
- `utils/config.ts` - Configuration constants
|
|
- `utils/logger.ts` - Logging utility
|
|
- `utils/paths.ts` - Path resolution helpers
|
|
- `utils/store.ts` - Persistent storage
|
|
|
|
### React Renderer (`src/`)
|
|
- `main.tsx` / `App.tsx` - Application entry and root component
|
|
- `styles/globals.css` - Global styles with CSS variables
|
|
|
|
#### Components
|
|
- `components/ui/` - shadcn/ui base components (Button, Card, Input, Badge, etc.)
|
|
- `components/layout/MainLayout.tsx` - Main application layout
|
|
- `components/layout/Sidebar.tsx` - Navigation sidebar
|
|
- `components/layout/Header.tsx` - Top header bar
|
|
- `components/common/` - Common components (LoadingSpinner, StatusBadge, ErrorBoundary)
|
|
|
|
#### Pages
|
|
- `pages/Dashboard/index.tsx` - Overview dashboard
|
|
- `pages/Chat/index.tsx` - Chat interface
|
|
- `pages/Channels/index.tsx` - Channel management
|
|
- `pages/Skills/index.tsx` - Skill browser
|
|
- `pages/Cron/index.tsx` - Scheduled tasks
|
|
- `pages/Settings/index.tsx` - Application settings
|
|
- `pages/Setup/index.tsx` - First-run setup wizard
|
|
|
|
#### State Management
|
|
- `stores/gateway.ts` - Gateway connection state
|
|
- `stores/settings.ts` - Application settings
|
|
- `stores/channels.ts` - Channel data
|
|
- `stores/skills.ts` - Skills data
|
|
- `stores/chat.ts` - Chat messages
|
|
- `stores/cron.ts` - Cron jobs
|
|
|
|
#### Types
|
|
- `types/electron.d.ts` - Electron API types
|
|
- `types/gateway.ts` - Gateway types
|
|
- `types/channel.ts` - Channel types
|
|
- `types/skill.ts` - Skill types
|
|
- `types/cron.ts` - Cron job types
|
|
|
|
### Resources
|
|
- `resources/icons/.gitkeep` - Placeholder for app icons
|
|
- `resources/skills/bundles.json` - Predefined skill bundles
|
|
|
|
### Tests
|
|
- `tests/setup.ts` - Test environment setup
|
|
- `tests/unit/utils.test.ts` - Utility function tests
|
|
- `tests/unit/stores.test.ts` - Store tests
|
|
|
|
## Technical Details
|
|
|
|
### Architecture Decisions
|
|
1. **Vite + Electron**: Using vite-plugin-electron for fast HMR during development
|
|
2. **Context Isolation**: All IPC communication through preload script with strict channel validation
|
|
3. **Zustand Stores**: Lightweight state management with persistence support
|
|
4. **shadcn/ui**: Customizable, accessible UI components based on Radix primitives
|
|
5. **Dual-port Architecture**: Separate ports for GUI (23333) and Gateway (18789)
|
|
|
|
### Key Features Implemented
|
|
- ✅ Electron main process with window management
|
|
- ✅ System tray integration
|
|
- ✅ Gateway process lifecycle management
|
|
- ✅ WebSocket communication layer
|
|
- ✅ JSON-RPC protocol support
|
|
- ✅ React router with all main pages
|
|
- ✅ Zustand state management
|
|
- ✅ Dark/Light theme support
|
|
- ✅ Responsive sidebar navigation
|
|
- ✅ Setup wizard flow
|
|
- ✅ Unit test setup with Vitest
|
|
|
|
## Version
|
|
v0.1.0-alpha
|
|
|
|
## Dependencies
|
|
- Electron 33.3.0
|
|
- React 19.0.0
|
|
- TypeScript 5.7.2
|
|
- Vite 6.0.6
|
|
- Zustand 5.0.2
|
|
- Tailwind CSS 3.4.17
|