admin/DeskClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b8ab0208d0ac970ff28c66b89e25e6eb112c1369
DeskClaw/build_process/commit_1_project_skeleton.md
Haze b8ab0208d0 feat(core): initialize project skeleton with Electron + React + TypeScript 
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)
2026-02-05 23:09:17 +08:00

3.9 KiB
Raw Blame History

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
Reference in New Issue View Git Blame Copy Permalink