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
parent 9442e5f77a
commit b8ab0208d0
71 changed files with 14086 additions and 3 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,20 @@
+# ClawX Environment Variables
+
+# OpenClaw Gateway Configuration
+OPENCLAW_GATEWAY_PORT=18789
+
+# Development Configuration
+VITE_DEV_SERVER_PORT=5173
+
+# Release Configuration (CI/CD)
+# Apple Developer Credentials
+APPLE_ID=your@email.com
+APPLE_APP_SPECIFIC_PASSWORD=xxxx-xxxx-xxxx-xxxx
+APPLE_TEAM_ID=XXXXXXXXXX
+
+# Code Signing Certificate
+CSC_LINK=path/to/certificate.p12
+CSC_KEY_PASSWORD=certificate_password
+
+# GitHub Token for releases
+GH_TOKEN=github_personal_access_token
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true, node: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', 'dist-electron', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-explicit-any': 'warn',
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,57 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Build outputs
+dist/
+dist-electron/
+release/
+*.local
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Test coverage
+coverage/
+
+# Cache
+.cache/
+.turbo/
+*.tsbuildinfo
+
+# Electron
+*.dmg
+*.exe
+*.AppImage
+*.deb
+*.rpm
+
+# Secrets
+*.p12
+*.pem
+*.key
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}
--- a/README.md
+++ b/README.md
@@ -1 +1,124 @@
 # ClawX
+
+> Graphical AI Assistant based on OpenClaw
+
+ClawX is a modern desktop application that provides a beautiful graphical interface for OpenClaw, making AI assistants accessible to everyone without command-line knowledge.
+
+## Features
+
+- 🎯 **Zero CLI Required** - Complete all installation, configuration, and usage through GUI
+- 🎨 **Modern UI** - Beautiful, intuitive desktop application interface
+- 📦 **Ready to Use** - Pre-installed skill bundles, ready immediately
+- 🖥️ **Cross-Platform** - Unified experience on macOS / Windows / Linux
+- 🔄 **Seamless Integration** - Fully compatible with OpenClaw ecosystem
+
+## Tech Stack
+
+- **Runtime**: Electron 33+
+- **Frontend**: React 19 + TypeScript
+- **UI Components**: shadcn/ui + Tailwind CSS
+- **State Management**: Zustand
+- **Build Tools**: Vite + electron-builder
+- **Testing**: Vitest + Playwright
+
+## Development
+
+### Prerequisites
+
+- Node.js 22+
+- pnpm (recommended) or npm
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/clawx/clawx.git
+cd clawx
+
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+```
+
+### Available Commands
+
+```bash
+# Development
+pnpm dev           # Start development server with hot reload
+pnpm build         # Build for production
+
+# Testing
+pnpm test          # Run unit tests
+pnpm test:e2e      # Run E2E tests
+pnpm test:coverage # Generate coverage report
+
+# Code Quality
+pnpm lint          # Run ESLint
+pnpm lint:fix      # Fix linting issues
+pnpm typecheck     # TypeScript type checking
+
+# Packaging
+pnpm package       # Package for current platform
+pnpm package:mac   # Package for macOS
+pnpm package:win   # Package for Windows
+pnpm package:linux # Package for Linux
+```
+
+## Project Structure
+
+```
+clawx/
+├── electron/           # Electron main process
+│   ├── main/          # Main process entry and handlers
+│   ├── gateway/       # Gateway process management
+│   ├── preload/       # Preload scripts
+│   └── utils/         # Utilities
+├── src/               # React renderer process
+│   ├── components/    # React components
+│   ├── pages/         # Page components
+│   ├── stores/        # Zustand state stores
+│   ├── hooks/         # Custom React hooks
+│   ├── types/         # TypeScript types
+│   └── styles/        # Global styles
+├── resources/         # Static resources
+├── tests/             # Test files
+└── build_process/     # Build documentation
+```
+
+## Architecture
+
+ClawX follows a dual-port architecture:
+
+- **Port 23333**: ClawX GUI (default interface)
+- **Port 18789**: OpenClaw Gateway (native management)
+
+```
+┌─────────────────────────────────┐
+│         ClawX App               │
+│  ┌───────────────────────────┐  │
+│  │ Electron Main Process     │  │
+│  │ - Window management       │  │
+│  │ - Gateway lifecycle       │  │
+│  │ - System integration      │  │
+│  └───────────────────────────┘  │
+│  ┌───────────────────────────┐  │
+│  │ React Renderer Process    │  │
+│  │ - Modern UI               │  │
+│  │ - WebSocket communication │  │
+│  └───────────────────────────┘  │
+└───────────────┬─────────────────┘
+                │ WebSocket (JSON-RPC)
+                ▼
+┌─────────────────────────────────┐
+│      OpenClaw Gateway           │
+│ - Message channel management    │
+│ - AI Agent runtime              │
+│ - Skills/plugins system         │
+└─────────────────────────────────┘
+```
+
+## License
+
+MIT
--- a/build_process/commit_1_project_skeleton.md
+++ b/build_process/commit_1_project_skeleton.md
@@ -0,0 +1,108 @@
+# 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
--- a/build_process/process.md
+++ b/build_process/process.md
@@ -1,6 +1,26 @@
-# Before:
+# ClawX Build Process
+
+## Progress
+
+### Before:
 * add `ClawX-项目架构与版本大纲.md`

-# Plan:
+### Completed:
+* [commit_1] Project skeleton - Electron + React + TypeScript foundation (v0.1.0-alpha)

-Initialize the project structure according to `ClawX-项目架构与版本大纲.md`, and add the fundamental dependencies as specified in the documentation and technology stack.
+### Plan:
+1. ~~Initialize project structure~~ ✅
+2. Add Gateway process management refinements
+3. Implement Setup wizard with actual functionality
+4. Add Provider configuration (API Key management)
+5. Implement Channel connection flows
+6. Add auto-update functionality
+7. Packaging and distribution setup
+
+## Version Milestones
+
+| Version | Status | Description |
+|---------|--------|-------------|
+| v0.1.0-alpha | ✅ Done | Core architecture, basic UI framework |
+| v0.5.0-beta | Pending | Setup wizard MVP, Node.js installer |
+| v1.0.0 | Pending | Production ready, all core features |
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -0,0 +1,81 @@
+appId: app.clawx.desktop
+productName: ClawX
+copyright: Copyright © 2026 ClawX
+compression: maximum
+
+directories:
+  output: release
+  buildResources: resources
+
+files:
+  - dist
+  - dist-electron
+  - package.json
+
+extraResources:
+  - from: resources/
+    to: resources/
+    filter:
+      - "**/*"
+
+publish:
+  - provider: github
+    owner: clawx
+    repo: clawx
+    releaseType: release
+
+mac:
+  category: public.app-category.productivity
+  icon: resources/icons/icon.icns
+  target:
+    - target: dmg
+      arch:
+        - universal
+    - target: zip
+      arch:
+        - universal
+  darkModeSupport: true
+  hardenedRuntime: true
+  gatekeeperAssess: false
+  entitlements: entitlements.mac.plist
+  entitlementsInherit: entitlements.mac.plist
+
+dmg:
+  contents:
+    - type: file
+      x: 130
+      y: 220
+    - type: link
+      path: /Applications
+      x: 410
+      y: 220
+
+win:
+  icon: resources/icons/icon.ico
+  target:
+    - target: nsis
+      arch:
+        - x64
+        - arm64
+  publisherName: ClawX Inc.
+
+nsis:
+  oneClick: false
+  allowToChangeInstallationDirectory: true
+  deleteAppDataOnUninstall: false
+  differentialPackage: true
+  createDesktopShortcut: true
+  createStartMenuShortcut: true
+
+linux:
+  icon: resources/icons
+  target:
+    - target: AppImage
+      arch:
+        - x64
+        - arm64
+    - target: deb
+      arch:
+        - x64
+  category: Utility
+  maintainer: ClawX Team
--- a/electron/gateway/client.ts
+++ b/electron/gateway/client.ts
@@ -0,0 +1,186 @@
+/**
+ * Gateway WebSocket Client
+ * Provides a typed interface for Gateway RPC calls
+ */
+import { GatewayManager } from './manager';
+
+/**
+ * Channel types supported by OpenClaw
+ */
+export type ChannelType = 'whatsapp' | 'telegram' | 'discord' | 'slack' | 'wechat';
+
+/**
+ * Channel status
+ */
+export interface Channel {
+  id: string;
+  type: ChannelType;
+  name: string;
+  status: 'connected' | 'disconnected' | 'connecting' | 'error';
+  lastActivity?: string;
+  error?: string;
+}
+
+/**
+ * Skill definition
+ */
+export interface Skill {
+  id: string;
+  name: string;
+  description: string;
+  enabled: boolean;
+  category?: string;
+  icon?: string;
+  configurable?: boolean;
+}
+
+/**
+ * Chat message
+ */
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: string;
+  channel?: string;
+  toolCalls?: ToolCall[];
+}
+
+/**
+ * Tool call in a message
+ */
+export interface ToolCall {
+  id: string;
+  name: string;
+  arguments: Record<string, unknown>;
+  result?: unknown;
+  status: 'pending' | 'running' | 'completed' | 'error';
+}
+
+/**
+ * Gateway Client
+ * Typed wrapper around GatewayManager for making RPC calls
+ */
+export class GatewayClient {
+  constructor(private manager: GatewayManager) {}
+  
+  // ==================== Channel Methods ====================
+  
+  /**
+   * List all channels
+   */
+  async listChannels(): Promise<Channel[]> {
+    return this.manager.rpc<Channel[]>('channels.list');
+  }
+  
+  /**
+   * Get channel by ID
+   */
+  async getChannel(channelId: string): Promise<Channel> {
+    return this.manager.rpc<Channel>('channels.get', { channelId });
+  }
+  
+  /**
+   * Connect a channel
+   */
+  async connectChannel(channelId: string): Promise<void> {
+    return this.manager.rpc<void>('channels.connect', { channelId });
+  }
+  
+  /**
+   * Disconnect a channel
+   */
+  async disconnectChannel(channelId: string): Promise<void> {
+    return this.manager.rpc<void>('channels.disconnect', { channelId });
+  }
+  
+  /**
+   * Get QR code for channel connection (e.g., WhatsApp)
+   */
+  async getChannelQRCode(channelType: ChannelType): Promise<string> {
+    return this.manager.rpc<string>('channels.getQRCode', { channelType });
+  }
+  
+  // ==================== Skill Methods ====================
+  
+  /**
+   * List all skills
+   */
+  async listSkills(): Promise<Skill[]> {
+    return this.manager.rpc<Skill[]>('skills.list');
+  }
+  
+  /**
+   * Enable a skill
+   */
+  async enableSkill(skillId: string): Promise<void> {
+    return this.manager.rpc<void>('skills.enable', { skillId });
+  }
+  
+  /**
+   * Disable a skill
+   */
+  async disableSkill(skillId: string): Promise<void> {
+    return this.manager.rpc<void>('skills.disable', { skillId });
+  }
+  
+  /**
+   * Get skill configuration
+   */
+  async getSkillConfig(skillId: string): Promise<Record<string, unknown>> {
+    return this.manager.rpc<Record<string, unknown>>('skills.getConfig', { skillId });
+  }
+  
+  /**
+   * Update skill configuration
+   */
+  async updateSkillConfig(skillId: string, config: Record<string, unknown>): Promise<void> {
+    return this.manager.rpc<void>('skills.updateConfig', { skillId, config });
+  }
+  
+  // ==================== Chat Methods ====================
+  
+  /**
+   * Send a chat message
+   */
+  async sendMessage(content: string, channelId?: string): Promise<ChatMessage> {
+    return this.manager.rpc<ChatMessage>('chat.send', { content, channelId });
+  }
+  
+  /**
+   * Get chat history
+   */
+  async getChatHistory(limit = 50, offset = 0): Promise<ChatMessage[]> {
+    return this.manager.rpc<ChatMessage[]>('chat.history', { limit, offset });
+  }
+  
+  /**
+   * Clear chat history
+   */
+  async clearChatHistory(): Promise<void> {
+    return this.manager.rpc<void>('chat.clear');
+  }
+  
+  // ==================== System Methods ====================
+  
+  /**
+   * Get Gateway health status
+   */
+  async getHealth(): Promise<{ status: string; uptime: number }> {
+    return this.manager.rpc<{ status: string; uptime: number }>('system.health');
+  }
+  
+  /**
+   * Get Gateway configuration
+   */
+  async getConfig(): Promise<Record<string, unknown>> {
+    return this.manager.rpc<Record<string, unknown>>('system.config');
+  }
+  
+  /**
+   * Update Gateway configuration
+   */
+  async updateConfig(config: Record<string, unknown>): Promise<void> {
+    return this.manager.rpc<void>('system.updateConfig', config);
+  }
+}
--- a/electron/gateway/manager.ts
+++ b/electron/gateway/manager.ts
@@ -0,0 +1,370 @@
+/**
+ * Gateway Process Manager
+ * Manages the OpenClaw Gateway process lifecycle
+ */
+import { spawn, ChildProcess, exec } from 'child_process';
+import { EventEmitter } from 'events';
+import WebSocket from 'ws';
+import { promisify } from 'util';
+import { PORTS } from '../utils/config';
+
+const execAsync = promisify(exec);
+
+/**
+ * Gateway connection status
+ */
+export interface GatewayStatus {
+  state: 'stopped' | 'starting' | 'running' | 'error';
+  port: number;
+  pid?: number;
+  uptime?: number;
+  error?: string;
+  connectedAt?: number;
+}
+
+/**
+ * Gateway Manager Events
+ */
+export interface GatewayManagerEvents {
+  status: (status: GatewayStatus) => void;
+  message: (message: unknown) => void;
+  exit: (code: number | null) => void;
+  error: (error: Error) => void;
+}
+
+/**
+ * Gateway Manager
+ * Handles starting, stopping, and communicating with the OpenClaw Gateway
+ */
+export class GatewayManager extends EventEmitter {
+  private process: ChildProcess | null = null;
+  private ws: WebSocket | null = null;
+  private status: GatewayStatus = { state: 'stopped', port: PORTS.OPENCLAW_GATEWAY };
+  private reconnectTimer: NodeJS.Timeout | null = null;
+  private pingInterval: NodeJS.Timeout | null = null;
+  private pendingRequests: Map<string, {
+    resolve: (value: unknown) => void;
+    reject: (error: Error) => void;
+    timeout: NodeJS.Timeout;
+  }> = new Map();
+  
+  constructor() {
+    super();
+  }
+  
+  /**
+   * Get current Gateway status
+   */
+  getStatus(): GatewayStatus {
+    return { ...this.status };
+  }
+  
+  /**
+   * Start Gateway process
+   */
+  async start(): Promise<void> {
+    if (this.status.state === 'running') {
+      return;
+    }
+    
+    this.setStatus({ state: 'starting' });
+    
+    try {
+      // Check if Gateway is already running
+      const existing = await this.findExistingGateway();
+      if (existing) {
+        console.log('Found existing Gateway on port', existing.port);
+        await this.connect(existing.port);
+        return;
+      }
+      
+      // Start new Gateway process
+      await this.startProcess();
+      
+      // Wait for Gateway to be ready
+      await this.waitForReady();
+      
+      // Connect WebSocket
+      await this.connect(this.status.port);
+      
+    } catch (error) {
+      this.setStatus({ state: 'error', error: String(error) });
+      throw error;
+    }
+  }
+  
+  /**
+   * Stop Gateway process
+   */
+  async stop(): Promise<void> {
+    // Clear timers
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.pingInterval) {
+      clearInterval(this.pingInterval);
+      this.pingInterval = null;
+    }
+    
+    // Close WebSocket
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+    
+    // Kill process
+    if (this.process) {
+      this.process.kill();
+      this.process = null;
+    }
+    
+    // Reject all pending requests
+    for (const [id, request] of this.pendingRequests) {
+      clearTimeout(request.timeout);
+      request.reject(new Error('Gateway stopped'));
+    }
+    this.pendingRequests.clear();
+    
+    this.setStatus({ state: 'stopped' });
+  }
+  
+  /**
+   * Make an RPC call to the Gateway
+   */
+  async rpc<T>(method: string, params?: unknown): Promise<T> {
+    return new Promise((resolve, reject) => {
+      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+        reject(new Error('Gateway not connected'));
+        return;
+      }
+      
+      const id = crypto.randomUUID();
+      
+      // Set timeout for request
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error(`RPC timeout: ${method}`));
+      }, 30000);
+      
+      // Store pending request
+      this.pendingRequests.set(id, {
+        resolve: resolve as (value: unknown) => void,
+        reject,
+        timeout,
+      });
+      
+      // Send request
+      const request = {
+        jsonrpc: '2.0',
+        id,
+        method,
+        params,
+      };
+      
+      this.ws.send(JSON.stringify(request));
+    });
+  }
+  
+  /**
+   * Find existing Gateway process
+   */
+  private async findExistingGateway(): Promise<{ port: number } | null> {
+    try {
+      // Try to connect to default port
+      const port = PORTS.OPENCLAW_GATEWAY;
+      const response = await fetch(`http://localhost:${port}/health`, {
+        signal: AbortSignal.timeout(2000),
+      });
+      
+      if (response.ok) {
+        return { port };
+      }
+    } catch {
+      // Gateway not running
+    }
+    
+    return null;
+  }
+  
+  /**
+   * Start Gateway process
+   */
+  private async startProcess(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      // Find openclaw command
+      const command = 'openclaw';
+      const args = ['gateway', 'run', '--port', String(this.status.port)];
+      
+      this.process = spawn(command, args, {
+        stdio: ['ignore', 'pipe', 'pipe'],
+        detached: false,
+        shell: true,
+      });
+      
+      this.process.on('error', (error) => {
+        console.error('Gateway process error:', error);
+        reject(error);
+      });
+      
+      this.process.on('exit', (code) => {
+        console.log('Gateway process exited with code:', code);
+        this.emit('exit', code);
+        
+        if (this.status.state === 'running') {
+          this.setStatus({ state: 'stopped' });
+          // Attempt to reconnect
+          this.scheduleReconnect();
+        }
+      });
+      
+      // Log stdout
+      this.process.stdout?.on('data', (data) => {
+        console.log('Gateway:', data.toString());
+      });
+      
+      // Log stderr
+      this.process.stderr?.on('data', (data) => {
+        console.error('Gateway error:', data.toString());
+      });
+      
+      // Store PID
+      if (this.process.pid) {
+        this.setStatus({ pid: this.process.pid });
+      }
+      
+      resolve();
+    });
+  }
+  
+  /**
+   * Wait for Gateway to be ready
+   */
+  private async waitForReady(retries = 30, interval = 1000): Promise<void> {
+    for (let i = 0; i < retries; i++) {
+      try {
+        const response = await fetch(`http://localhost:${this.status.port}/health`, {
+          signal: AbortSignal.timeout(1000),
+        });
+        
+        if (response.ok) {
+          return;
+        }
+      } catch {
+        // Gateway not ready yet
+      }
+      
+      await new Promise((resolve) => setTimeout(resolve, interval));
+    }
+    
+    throw new Error('Gateway failed to start');
+  }
+  
+  /**
+   * Connect WebSocket to Gateway
+   */
+  private async connect(port: number): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const wsUrl = `ws://localhost:${port}/ws`;
+      
+      this.ws = new WebSocket(wsUrl);
+      
+      this.ws.on('open', () => {
+        console.log('WebSocket connected to Gateway');
+        this.setStatus({
+          state: 'running',
+          port,
+          connectedAt: Date.now(),
+        });
+        this.startPing();
+        resolve();
+      });
+      
+      this.ws.on('message', (data) => {
+        try {
+          const message = JSON.parse(data.toString());
+          this.handleMessage(message);
+        } catch (error) {
+          console.error('Failed to parse WebSocket message:', error);
+        }
+      });
+      
+      this.ws.on('close', () => {
+        console.log('WebSocket disconnected');
+        if (this.status.state === 'running') {
+          this.setStatus({ state: 'stopped' });
+          this.scheduleReconnect();
+        }
+      });
+      
+      this.ws.on('error', (error) => {
+        console.error('WebSocket error:', error);
+        reject(error);
+      });
+    });
+  }
+  
+  /**
+   * Handle incoming WebSocket message
+   */
+  private handleMessage(message: { id?: string; result?: unknown; error?: unknown }): void {
+    // Check if this is a response to a pending request
+    if (message.id && this.pendingRequests.has(message.id)) {
+      const request = this.pendingRequests.get(message.id)!;
+      clearTimeout(request.timeout);
+      this.pendingRequests.delete(message.id);
+      
+      if (message.error) {
+        request.reject(new Error(String(message.error)));
+      } else {
+        request.resolve(message.result);
+      }
+      return;
+    }
+    
+    // Emit message for other handlers
+    this.emit('message', message);
+  }
+  
+  /**
+   * Start ping interval to keep connection alive
+   */
+  private startPing(): void {
+    if (this.pingInterval) {
+      clearInterval(this.pingInterval);
+    }
+    
+    this.pingInterval = setInterval(() => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        this.ws.ping();
+      }
+    }, 30000);
+  }
+  
+  /**
+   * Schedule reconnection attempt
+   */
+  private scheduleReconnect(): void {
+    if (this.reconnectTimer) {
+      return;
+    }
+    
+    this.reconnectTimer = setTimeout(async () => {
+      this.reconnectTimer = null;
+      try {
+        await this.start();
+      } catch (error) {
+        console.error('Reconnection failed:', error);
+        this.scheduleReconnect();
+      }
+    }, 5000);
+  }
+  
+  /**
+   * Update status and emit event
+   */
+  private setStatus(update: Partial<GatewayStatus>): void {
+    this.status = { ...this.status, ...update };
+    this.emit('status', this.status);
+  }
+}
--- a/electron/gateway/protocol.ts
+++ b/electron/gateway/protocol.ts
@@ -0,0 +1,200 @@
+/**
+ * Gateway Protocol Definitions
+ * JSON-RPC 2.0 protocol types for Gateway communication
+ */
+
+/**
+ * JSON-RPC 2.0 Request
+ */
+export interface JsonRpcRequest {
+  jsonrpc: '2.0';
+  id: string | number;
+  method: string;
+  params?: unknown;
+}
+
+/**
+ * JSON-RPC 2.0 Response
+ */
+export interface JsonRpcResponse<T = unknown> {
+  jsonrpc: '2.0';
+  id: string | number;
+  result?: T;
+  error?: JsonRpcError;
+}
+
+/**
+ * JSON-RPC 2.0 Error
+ */
+export interface JsonRpcError {
+  code: number;
+  message: string;
+  data?: unknown;
+}
+
+/**
+ * JSON-RPC 2.0 Notification (no id, no response expected)
+ */
+export interface JsonRpcNotification {
+  jsonrpc: '2.0';
+  method: string;
+  params?: unknown;
+}
+
+/**
+ * Standard JSON-RPC 2.0 Error Codes
+ */
+export enum JsonRpcErrorCode {
+  /** Invalid JSON was received */
+  PARSE_ERROR = -32700,
+  /** The JSON sent is not a valid Request object */
+  INVALID_REQUEST = -32600,
+  /** The method does not exist or is not available */
+  METHOD_NOT_FOUND = -32601,
+  /** Invalid method parameter(s) */
+  INVALID_PARAMS = -32602,
+  /** Internal JSON-RPC error */
+  INTERNAL_ERROR = -32603,
+  /** Server error range: -32000 to -32099 */
+  SERVER_ERROR = -32000,
+}
+
+/**
+ * Gateway-specific error codes
+ */
+export enum GatewayErrorCode {
+  /** Gateway not connected */
+  NOT_CONNECTED = -32001,
+  /** Authentication required */
+  AUTH_REQUIRED = -32002,
+  /** Permission denied */
+  PERMISSION_DENIED = -32003,
+  /** Resource not found */
+  NOT_FOUND = -32004,
+  /** Operation timeout */
+  TIMEOUT = -32005,
+  /** Rate limit exceeded */
+  RATE_LIMITED = -32006,
+}
+
+/**
+ * Gateway event types
+ */
+export enum GatewayEventType {
+  /** Gateway status changed */
+  STATUS_CHANGED = 'gateway.status_changed',
+  /** Channel status changed */
+  CHANNEL_STATUS_CHANGED = 'channel.status_changed',
+  /** New chat message received */
+  MESSAGE_RECEIVED = 'chat.message_received',
+  /** Message sent */
+  MESSAGE_SENT = 'chat.message_sent',
+  /** Tool call started */
+  TOOL_CALL_STARTED = 'tool.call_started',
+  /** Tool call completed */
+  TOOL_CALL_COMPLETED = 'tool.call_completed',
+  /** Error occurred */
+  ERROR = 'error',
+}
+
+/**
+ * Gateway event payload
+ */
+export interface GatewayEvent<T = unknown> {
+  type: GatewayEventType;
+  timestamp: string;
+  data: T;
+}
+
+/**
+ * Create a JSON-RPC request
+ */
+export function createRequest(
+  method: string,
+  params?: unknown,
+  id?: string | number
+): JsonRpcRequest {
+  return {
+    jsonrpc: '2.0',
+    id: id ?? crypto.randomUUID(),
+    method,
+    params,
+  };
+}
+
+/**
+ * Create a JSON-RPC success response
+ */
+export function createSuccessResponse<T>(
+  id: string | number,
+  result: T
+): JsonRpcResponse<T> {
+  return {
+    jsonrpc: '2.0',
+    id,
+    result,
+  };
+}
+
+/**
+ * Create a JSON-RPC error response
+ */
+export function createErrorResponse(
+  id: string | number,
+  code: number,
+  message: string,
+  data?: unknown
+): JsonRpcResponse {
+  return {
+    jsonrpc: '2.0',
+    id,
+    error: {
+      code,
+      message,
+      data,
+    },
+  };
+}
+
+/**
+ * Check if a message is a JSON-RPC request
+ */
+export function isRequest(message: unknown): message is JsonRpcRequest {
+  return (
+    typeof message === 'object' &&
+    message !== null &&
+    'jsonrpc' in message &&
+    message.jsonrpc === '2.0' &&
+    'method' in message &&
+    typeof message.method === 'string' &&
+    'id' in message
+  );
+}
+
+/**
+ * Check if a message is a JSON-RPC response
+ */
+export function isResponse(message: unknown): message is JsonRpcResponse {
+  return (
+    typeof message === 'object' &&
+    message !== null &&
+    'jsonrpc' in message &&
+    message.jsonrpc === '2.0' &&
+    'id' in message &&
+    ('result' in message || 'error' in message)
+  );
+}
+
+/**
+ * Check if a message is a JSON-RPC notification
+ */
+export function isNotification(message: unknown): message is JsonRpcNotification {
+  return (
+    typeof message === 'object' &&
+    message !== null &&
+    'jsonrpc' in message &&
+    message.jsonrpc === '2.0' &&
+    'method' in message &&
+    !('id' in message)
+  );
+}
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -0,0 +1,118 @@
+/**
+ * Electron Main Process Entry
+ * Manages window creation, system tray, and IPC handlers
+ */
+import { app, BrowserWindow, ipcMain, shell } from 'electron';
+import { join } from 'path';
+import { GatewayManager } from '../gateway/manager';
+import { registerIpcHandlers } from './ipc-handlers';
+import { createTray } from './tray';
+import { createMenu } from './menu';
+import { PORTS } from '../utils/config';
+
+// Disable GPU acceleration for better compatibility
+app.disableHardwareAcceleration();
+
+// Global references
+let mainWindow: BrowserWindow | null = null;
+const gatewayManager = new GatewayManager();
+
+/**
+ * Create the main application window
+ */
+function createWindow(): BrowserWindow {
+  const win = new BrowserWindow({
+    width: 1280,
+    height: 800,
+    minWidth: 960,
+    minHeight: 600,
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      nodeIntegration: false,
+      contextIsolation: true,
+      sandbox: false,
+    },
+    titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'default',
+    trafficLightPosition: { x: 16, y: 16 },
+    show: false,
+  });
+
+  // Show window when ready to prevent visual flash
+  win.once('ready-to-show', () => {
+    win.show();
+  });
+
+  // Handle external links
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: 'deny' };
+  });
+
+  // Load the app
+  if (process.env.VITE_DEV_SERVER_URL) {
+    win.loadURL(process.env.VITE_DEV_SERVER_URL);
+    // Open DevTools in development
+    win.webContents.openDevTools();
+  } else {
+    win.loadFile(join(__dirname, '../../dist/index.html'));
+  }
+
+  return win;
+}
+
+/**
+ * Initialize the application
+ */
+async function initialize(): Promise<void> {
+  // Set application menu
+  createMenu();
+
+  // Create the main window
+  mainWindow = createWindow();
+
+  // Create system tray
+  createTray(mainWindow);
+
+  // Register IPC handlers
+  registerIpcHandlers(gatewayManager, mainWindow);
+
+  // Handle window close
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+
+  // Start Gateway automatically (optional based on settings)
+  try {
+    await gatewayManager.start();
+    console.log('Gateway started successfully');
+  } catch (error) {
+    console.error('Failed to start Gateway:', error);
+    // Notify renderer about the error
+    mainWindow?.webContents.send('gateway:error', String(error));
+  }
+}
+
+// Application lifecycle
+app.whenReady().then(initialize);
+
+app.on('window-all-closed', () => {
+  // On macOS, keep the app running in the menu bar
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  // On macOS, re-create window when dock icon is clicked
+  if (BrowserWindow.getAllWindows().length === 0) {
+    mainWindow = createWindow();
+  }
+});
+
+app.on('before-quit', async () => {
+  // Clean up Gateway process
+  await gatewayManager.stop();
+});
+
+// Export for testing
+export { mainWindow, gatewayManager };
--- a/electron/main/ipc-handlers.ts
+++ b/electron/main/ipc-handlers.ts
@@ -0,0 +1,172 @@
+/**
+ * IPC Handlers
+ * Registers all IPC handlers for main-renderer communication
+ */
+import { ipcMain, BrowserWindow, shell, dialog, app } from 'electron';
+import { GatewayManager } from '../gateway/manager';
+
+/**
+ * Register all IPC handlers
+ */
+export function registerIpcHandlers(
+  gatewayManager: GatewayManager,
+  mainWindow: BrowserWindow
+): void {
+  // Gateway handlers
+  registerGatewayHandlers(gatewayManager, mainWindow);
+  
+  // Shell handlers
+  registerShellHandlers();
+  
+  // Dialog handlers
+  registerDialogHandlers();
+  
+  // App handlers
+  registerAppHandlers();
+}
+
+/**
+ * Gateway-related IPC handlers
+ */
+function registerGatewayHandlers(
+  gatewayManager: GatewayManager,
+  mainWindow: BrowserWindow
+): void {
+  // Get Gateway status
+  ipcMain.handle('gateway:status', () => {
+    return gatewayManager.getStatus();
+  });
+  
+  // Start Gateway
+  ipcMain.handle('gateway:start', async () => {
+    try {
+      await gatewayManager.start();
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: String(error) };
+    }
+  });
+  
+  // Stop Gateway
+  ipcMain.handle('gateway:stop', async () => {
+    try {
+      await gatewayManager.stop();
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: String(error) };
+    }
+  });
+  
+  // Restart Gateway
+  ipcMain.handle('gateway:restart', async () => {
+    try {
+      await gatewayManager.stop();
+      await gatewayManager.start();
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: String(error) };
+    }
+  });
+  
+  // Gateway RPC call
+  ipcMain.handle('gateway:rpc', async (_, method: string, params?: unknown) => {
+    try {
+      const result = await gatewayManager.rpc(method, params);
+      return { success: true, result };
+    } catch (error) {
+      return { success: false, error: String(error) };
+    }
+  });
+  
+  // Forward Gateway status events to renderer
+  gatewayManager.on('status', (status) => {
+    mainWindow.webContents.send('gateway:status-changed', status);
+  });
+  
+  gatewayManager.on('message', (message) => {
+    mainWindow.webContents.send('gateway:message', message);
+  });
+  
+  gatewayManager.on('exit', (code) => {
+    mainWindow.webContents.send('gateway:exit', code);
+  });
+}
+
+/**
+ * Shell-related IPC handlers
+ */
+function registerShellHandlers(): void {
+  // Open external URL
+  ipcMain.handle('shell:openExternal', async (_, url: string) => {
+    await shell.openExternal(url);
+  });
+  
+  // Open path in file explorer
+  ipcMain.handle('shell:showItemInFolder', async (_, path: string) => {
+    shell.showItemInFolder(path);
+  });
+  
+  // Open path
+  ipcMain.handle('shell:openPath', async (_, path: string) => {
+    return await shell.openPath(path);
+  });
+}
+
+/**
+ * Dialog-related IPC handlers
+ */
+function registerDialogHandlers(): void {
+  // Show open dialog
+  ipcMain.handle('dialog:open', async (_, options: Electron.OpenDialogOptions) => {
+    const result = await dialog.showOpenDialog(options);
+    return result;
+  });
+  
+  // Show save dialog
+  ipcMain.handle('dialog:save', async (_, options: Electron.SaveDialogOptions) => {
+    const result = await dialog.showSaveDialog(options);
+    return result;
+  });
+  
+  // Show message box
+  ipcMain.handle('dialog:message', async (_, options: Electron.MessageBoxOptions) => {
+    const result = await dialog.showMessageBox(options);
+    return result;
+  });
+}
+
+/**
+ * App-related IPC handlers
+ */
+function registerAppHandlers(): void {
+  // Get app version
+  ipcMain.handle('app:version', () => {
+    return app.getVersion();
+  });
+  
+  // Get app name
+  ipcMain.handle('app:name', () => {
+    return app.getName();
+  });
+  
+  // Get app path
+  ipcMain.handle('app:getPath', (_, name: Parameters<typeof app.getPath>[0]) => {
+    return app.getPath(name);
+  });
+  
+  // Get platform
+  ipcMain.handle('app:platform', () => {
+    return process.platform;
+  });
+  
+  // Quit app
+  ipcMain.handle('app:quit', () => {
+    app.quit();
+  });
+  
+  // Relaunch app
+  ipcMain.handle('app:relaunch', () => {
+    app.relaunch();
+    app.quit();
+  });
+}
--- a/electron/main/menu.ts
+++ b/electron/main/menu.ts
@@ -0,0 +1,201 @@
+/**
+ * Application Menu Configuration
+ * Creates the native application menu for macOS/Windows/Linux
+ */
+import { Menu, app, shell, BrowserWindow } from 'electron';
+
+/**
+ * Create application menu
+ */
+export function createMenu(): void {
+  const isMac = process.platform === 'darwin';
+  
+  const template: Electron.MenuItemConstructorOptions[] = [
+    // App menu (macOS only)
+    ...(isMac
+      ? [
+          {
+            label: app.name,
+            submenu: [
+              { role: 'about' as const },
+              { type: 'separator' as const },
+              {
+                label: 'Preferences...',
+                accelerator: 'Cmd+,',
+                click: () => {
+                  const win = BrowserWindow.getFocusedWindow();
+                  win?.webContents.send('navigate', '/settings');
+                },
+              },
+              { type: 'separator' as const },
+              { role: 'services' as const },
+              { type: 'separator' as const },
+              { role: 'hide' as const },
+              { role: 'hideOthers' as const },
+              { role: 'unhide' as const },
+              { type: 'separator' as const },
+              { role: 'quit' as const },
+            ],
+          },
+        ]
+      : []),
+    
+    // File menu
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'New Chat',
+          accelerator: 'CmdOrCtrl+N',
+          click: () => {
+            const win = BrowserWindow.getFocusedWindow();
+            win?.webContents.send('navigate', '/chat');
+          },
+        },
+        { type: 'separator' },
+        isMac ? { role: 'close' } : { role: 'quit' },
+      ],
+    },
+    
+    // Edit menu
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        ...(isMac
+          ? [
+              { role: 'pasteAndMatchStyle' as const },
+              { role: 'delete' as const },
+              { role: 'selectAll' as const },
+            ]
+          : [
+              { role: 'delete' as const },
+              { type: 'separator' as const },
+              { role: 'selectAll' as const },
+            ]),
+      ],
+    },
+    
+    // View menu
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forceReload' },
+        { role: 'toggleDevTools' },
+        { type: 'separator' },
+        { role: 'resetZoom' },
+        { role: 'zoomIn' },
+        { role: 'zoomOut' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+      ],
+    },
+    
+    // Navigate menu
+    {
+      label: 'Navigate',
+      submenu: [
+        {
+          label: 'Dashboard',
+          accelerator: 'CmdOrCtrl+1',
+          click: () => {
+            const win = BrowserWindow.getFocusedWindow();
+            win?.webContents.send('navigate', '/');
+          },
+        },
+        {
+          label: 'Chat',
+          accelerator: 'CmdOrCtrl+2',
+          click: () => {
+            const win = BrowserWindow.getFocusedWindow();
+            win?.webContents.send('navigate', '/chat');
+          },
+        },
+        {
+          label: 'Channels',
+          accelerator: 'CmdOrCtrl+3',
+          click: () => {
+            const win = BrowserWindow.getFocusedWindow();
+            win?.webContents.send('navigate', '/channels');
+          },
+        },
+        {
+          label: 'Skills',
+          accelerator: 'CmdOrCtrl+4',
+          click: () => {
+            const win = BrowserWindow.getFocusedWindow();
+            win?.webContents.send('navigate', '/skills');
+          },
+        },
+        {
+          label: 'Cron Tasks',
+          accelerator: 'CmdOrCtrl+5',
+          click: () => {
+            const win = BrowserWindow.getFocusedWindow();
+            win?.webContents.send('navigate', '/cron');
+          },
+        },
+        {
+          label: 'Settings',
+          accelerator: isMac ? 'Cmd+,' : 'Ctrl+,',
+          click: () => {
+            const win = BrowserWindow.getFocusedWindow();
+            win?.webContents.send('navigate', '/settings');
+          },
+        },
+      ],
+    },
+    
+    // Window menu
+    {
+      label: 'Window',
+      submenu: [
+        { role: 'minimize' },
+        { role: 'zoom' },
+        ...(isMac
+          ? [
+              { type: 'separator' as const },
+              { role: 'front' as const },
+              { type: 'separator' as const },
+              { role: 'window' as const },
+            ]
+          : [{ role: 'close' as const }]),
+      ],
+    },
+    
+    // Help menu
+    {
+      role: 'help',
+      submenu: [
+        {
+          label: 'Documentation',
+          click: async () => {
+            await shell.openExternal('https://docs.clawx.app');
+          },
+        },
+        {
+          label: 'Report Issue',
+          click: async () => {
+            await shell.openExternal('https://github.com/clawx/clawx/issues');
+          },
+        },
+        { type: 'separator' },
+        {
+          label: 'OpenClaw Documentation',
+          click: async () => {
+            await shell.openExternal('https://docs.openclaw.ai');
+          },
+        },
+      ],
+    },
+  ];
+  
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+}
--- a/electron/main/tray.ts
+++ b/electron/main/tray.ts
@@ -0,0 +1,145 @@
+/**
+ * System Tray Management
+ * Creates and manages the system tray icon and menu
+ */
+import { Tray, Menu, BrowserWindow, app, nativeImage } from 'electron';
+import { join } from 'path';
+
+let tray: Tray | null = null;
+
+/**
+ * Create system tray icon and menu
+ */
+export function createTray(mainWindow: BrowserWindow): Tray {
+  // Create tray icon
+  const iconPath = join(__dirname, '../../resources/icons/tray-icon.png');
+  
+  // Create a template image for macOS (adds @2x support automatically)
+  let icon = nativeImage.createFromPath(iconPath);
+  
+  // If icon doesn't exist, create a simple placeholder
+  if (icon.isEmpty()) {
+    // Create a simple 16x16 icon as placeholder
+    icon = nativeImage.createEmpty();
+  }
+  
+  // On macOS, set as template image for proper dark/light mode support
+  if (process.platform === 'darwin') {
+    icon.setTemplateImage(true);
+  }
+  
+  tray = new Tray(icon);
+  
+  // Set tooltip
+  tray.setToolTip('ClawX - AI Assistant');
+  
+  // Create context menu
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Show ClawX',
+      click: () => {
+        mainWindow.show();
+        mainWindow.focus();
+      },
+    },
+    {
+      type: 'separator',
+    },
+    {
+      label: 'Gateway Status',
+      enabled: false,
+    },
+    {
+      label: '  Running',
+      type: 'checkbox',
+      checked: true,
+      enabled: false,
+    },
+    {
+      type: 'separator',
+    },
+    {
+      label: 'Quick Actions',
+      submenu: [
+        {
+          label: 'Open Dashboard',
+          click: () => {
+            mainWindow.show();
+            mainWindow.webContents.send('navigate', '/');
+          },
+        },
+        {
+          label: 'Open Chat',
+          click: () => {
+            mainWindow.show();
+            mainWindow.webContents.send('navigate', '/chat');
+          },
+        },
+        {
+          label: 'Open Settings',
+          click: () => {
+            mainWindow.show();
+            mainWindow.webContents.send('navigate', '/settings');
+          },
+        },
+      ],
+    },
+    {
+      type: 'separator',
+    },
+    {
+      label: 'Check for Updates...',
+      click: () => {
+        mainWindow.webContents.send('update:check');
+      },
+    },
+    {
+      type: 'separator',
+    },
+    {
+      label: 'Quit ClawX',
+      click: () => {
+        app.quit();
+      },
+    },
+  ]);
+  
+  tray.setContextMenu(contextMenu);
+  
+  // Click to show window (Windows/Linux)
+  tray.on('click', () => {
+    if (mainWindow.isVisible()) {
+      mainWindow.hide();
+    } else {
+      mainWindow.show();
+      mainWindow.focus();
+    }
+  });
+  
+  // Double-click to show window (Windows)
+  tray.on('double-click', () => {
+    mainWindow.show();
+    mainWindow.focus();
+  });
+  
+  return tray;
+}
+
+/**
+ * Update tray tooltip with Gateway status
+ */
+export function updateTrayStatus(status: string): void {
+  if (tray) {
+    tray.setToolTip(`ClawX - ${status}`);
+  }
+}
+
+/**
+ * Destroy tray icon
+ */
+export function destroyTray(): void {
+  if (tray) {
+    tray.destroy();
+    tray = null;
+  }
+}
--- a/electron/main/window.ts
+++ b/electron/main/window.ts
@@ -0,0 +1,84 @@
+/**
+ * Window Management Utilities
+ * Handles window state persistence and multi-window management
+ */
+import { BrowserWindow, screen } from 'electron';
+import Store from 'electron-store';
+
+interface WindowState {
+  x?: number;
+  y?: number;
+  width: number;
+  height: number;
+  isMaximized: boolean;
+}
+
+const store = new Store<{ windowState: WindowState }>({
+  name: 'window-state',
+  defaults: {
+    windowState: {
+      width: 1280,
+      height: 800,
+      isMaximized: false,
+    },
+  },
+});
+
+/**
+ * Get saved window state with bounds validation
+ */
+export function getWindowState(): WindowState {
+  const state = store.get('windowState');
+  
+  // Validate that the window is visible on a screen
+  if (state.x !== undefined && state.y !== undefined) {
+    const displays = screen.getAllDisplays();
+    const isVisible = displays.some((display) => {
+      const { x, y, width, height } = display.bounds;
+      return (
+        state.x! >= x &&
+        state.x! < x + width &&
+        state.y! >= y &&
+        state.y! < y + height
+      );
+    });
+    
+    if (!isVisible) {
+      // Reset position if not visible
+      delete state.x;
+      delete state.y;
+    }
+  }
+  
+  return state;
+}
+
+/**
+ * Save window state
+ */
+export function saveWindowState(win: BrowserWindow): void {
+  const isMaximized = win.isMaximized();
+  
+  if (!isMaximized) {
+    const bounds = win.getBounds();
+    store.set('windowState', {
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.width,
+      height: bounds.height,
+      isMaximized,
+    });
+  } else {
+    store.set('windowState.isMaximized', true);
+  }
+}
+
+/**
+ * Track window state changes
+ */
+export function trackWindowState(win: BrowserWindow): void {
+  // Save state on window events
+  ['resize', 'move', 'close'].forEach((event) => {
+    win.on(event as any, () => saveWindowState(win));
+  });
+}
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -0,0 +1,159 @@
+/**
+ * Preload Script
+ * Exposes safe APIs to the renderer process via contextBridge
+ */
+import { contextBridge, ipcRenderer } from 'electron';
+
+/**
+ * IPC renderer methods exposed to the renderer process
+ */
+const electronAPI = {
+  /**
+   * IPC invoke (request-response pattern)
+   */
+  ipcRenderer: {
+    invoke: (channel: string, ...args: unknown[]) => {
+      const validChannels = [
+        // Gateway
+        'gateway:status',
+        'gateway:start',
+        'gateway:stop',
+        'gateway:restart',
+        'gateway:rpc',
+        // Shell
+        'shell:openExternal',
+        'shell:showItemInFolder',
+        'shell:openPath',
+        // Dialog
+        'dialog:open',
+        'dialog:save',
+        'dialog:message',
+        // App
+        'app:version',
+        'app:name',
+        'app:getPath',
+        'app:platform',
+        'app:quit',
+        'app:relaunch',
+        // Settings
+        'settings:get',
+        'settings:set',
+        'settings:getAll',
+        'settings:reset',
+        // Update
+        'update:check',
+        'update:download',
+        'update:install',
+        'update:getStatus',
+        // Env
+        'env:getConfig',
+        'env:setApiKey',
+        'env:deleteApiKey',
+        // Provider
+        'provider:validateKey',
+        // Cron
+        'cron:list',
+        'cron:create',
+        'cron:update',
+        'cron:delete',
+        'cron:toggle',
+        'cron:trigger',
+      ];
+      
+      if (validChannels.includes(channel)) {
+        return ipcRenderer.invoke(channel, ...args);
+      }
+      
+      throw new Error(`Invalid IPC channel: ${channel}`);
+    },
+    
+    /**
+     * Listen for events from main process
+     */
+    on: (channel: string, callback: (...args: unknown[]) => void) => {
+      const validChannels = [
+        'gateway:status-changed',
+        'gateway:message',
+        'gateway:exit',
+        'gateway:error',
+        'navigate',
+        'update:available',
+        'update:downloaded',
+        'update:status',
+        'cron:updated',
+      ];
+      
+      if (validChannels.includes(channel)) {
+        // Wrap the callback to strip the event
+        const subscription = (_event: Electron.IpcRendererEvent, ...args: unknown[]) => {
+          callback(...args);
+        };
+        ipcRenderer.on(channel, subscription);
+        
+        // Return unsubscribe function
+        return () => {
+          ipcRenderer.removeListener(channel, subscription);
+        };
+      }
+      
+      throw new Error(`Invalid IPC channel: ${channel}`);
+    },
+    
+    /**
+     * Listen for a single event from main process
+     */
+    once: (channel: string, callback: (...args: unknown[]) => void) => {
+      const validChannels = [
+        'gateway:status-changed',
+        'gateway:message',
+        'gateway:exit',
+        'gateway:error',
+        'navigate',
+        'update:available',
+        'update:downloaded',
+        'update:status',
+      ];
+      
+      if (validChannels.includes(channel)) {
+        ipcRenderer.once(channel, (_event, ...args) => callback(...args));
+        return;
+      }
+      
+      throw new Error(`Invalid IPC channel: ${channel}`);
+    },
+    
+    /**
+     * Remove all listeners for a channel
+     */
+    off: (channel: string, callback?: (...args: unknown[]) => void) => {
+      if (callback) {
+        ipcRenderer.removeListener(channel, callback as any);
+      } else {
+        ipcRenderer.removeAllListeners(channel);
+      }
+    },
+  },
+  
+  /**
+   * Open external URL in default browser
+   */
+  openExternal: (url: string) => {
+    return ipcRenderer.invoke('shell:openExternal', url);
+  },
+  
+  /**
+   * Get current platform
+   */
+  platform: process.platform,
+  
+  /**
+   * Check if running in development
+   */
+  isDev: process.env.NODE_ENV === 'development' || !!process.env.VITE_DEV_SERVER_URL,
+};
+
+// Expose the API to the renderer process
+contextBridge.exposeInMainWorld('electron', electronAPI);
+
+// Type declarations for the renderer process
+export type ElectronAPI = typeof electronAPI;
--- a/electron/utils/config.ts
+++ b/electron/utils/config.ts
@@ -0,0 +1,84 @@
+/**
+ * Application Configuration
+ * Centralized configuration constants and helpers
+ */
+
+/**
+ * Port configuration
+ */
+export const PORTS = {
+  /** ClawX GUI development server port */
+  CLAWX_DEV: 5173,
+  
+  /** ClawX GUI production port (for reference) */
+  CLAWX_GUI: 23333,
+  
+  /** OpenClaw Gateway port */
+  OPENCLAW_GATEWAY: 18789,
+} as const;
+
+/**
+ * Get port from environment or default
+ */
+export function getPort(key: keyof typeof PORTS): number {
+  const envKey = `CLAWX_PORT_${key}`;
+  const envValue = process.env[envKey];
+  return envValue ? parseInt(envValue, 10) : PORTS[key];
+}
+
+/**
+ * Application paths
+ */
+export const APP_PATHS = {
+  /** OpenClaw configuration directory */
+  OPENCLAW_CONFIG: '~/.openclaw',
+  
+  /** ClawX configuration directory */
+  CLAWX_CONFIG: '~/.clawx',
+  
+  /** Log files directory */
+  LOGS: '~/.clawx/logs',
+} as const;
+
+/**
+ * Update channels
+ */
+export const UPDATE_CHANNELS = ['stable', 'beta', 'dev'] as const;
+export type UpdateChannel = (typeof UPDATE_CHANNELS)[number];
+
+/**
+ * Default update configuration
+ */
+export const UPDATE_CONFIG = {
+  /** Check interval in milliseconds (6 hours) */
+  CHECK_INTERVAL: 6 * 60 * 60 * 1000,
+  
+  /** Default update channel */
+  DEFAULT_CHANNEL: 'stable' as UpdateChannel,
+  
+  /** Auto download updates */
+  AUTO_DOWNLOAD: false,
+  
+  /** Show update notifications */
+  SHOW_NOTIFICATION: true,
+};
+
+/**
+ * Gateway configuration
+ */
+export const GATEWAY_CONFIG = {
+  /** WebSocket reconnection delay (ms) */
+  RECONNECT_DELAY: 5000,
+  
+  /** RPC call timeout (ms) */
+  RPC_TIMEOUT: 30000,
+  
+  /** Health check interval (ms) */
+  HEALTH_CHECK_INTERVAL: 30000,
+  
+  /** Maximum startup retries */
+  MAX_STARTUP_RETRIES: 30,
+  
+  /** Startup retry interval (ms) */
+  STARTUP_RETRY_INTERVAL: 1000,
+};
--- a/electron/utils/logger.ts
+++ b/electron/utils/logger.ts
@@ -0,0 +1,133 @@
+/**
+ * Logger Utility
+ * Centralized logging with levels and file output
+ */
+import { app } from 'electron';
+import { join } from 'path';
+import { existsSync, mkdirSync, appendFileSync } from 'fs';
+
+/**
+ * Log levels
+ */
+export enum LogLevel {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3,
+}
+
+/**
+ * Current log level (can be changed at runtime)
+ */
+let currentLevel = LogLevel.INFO;
+
+/**
+ * Log file path
+ */
+let logFilePath: string | null = null;
+
+/**
+ * Initialize logger
+ */
+export function initLogger(): void {
+  try {
+    const logDir = join(app.getPath('userData'), 'logs');
+    
+    if (!existsSync(logDir)) {
+      mkdirSync(logDir, { recursive: true });
+    }
+    
+    const timestamp = new Date().toISOString().split('T')[0];
+    logFilePath = join(logDir, `clawx-${timestamp}.log`);
+  } catch (error) {
+    console.error('Failed to initialize logger:', error);
+  }
+}
+
+/**
+ * Set log level
+ */
+export function setLogLevel(level: LogLevel): void {
+  currentLevel = level;
+}
+
+/**
+ * Format log message
+ */
+function formatMessage(level: string, message: string, ...args: unknown[]): string {
+  const timestamp = new Date().toISOString();
+  const formattedArgs = args.length > 0 ? ' ' + args.map(arg => 
+    typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
+  ).join(' ') : '';
+  
+  return `[${timestamp}] [${level}] ${message}${formattedArgs}`;
+}
+
+/**
+ * Write to log file
+ */
+function writeToFile(formatted: string): void {
+  if (logFilePath) {
+    try {
+      appendFileSync(logFilePath, formatted + '\n');
+    } catch (error) {
+      // Silently fail if we can't write to file
+    }
+  }
+}
+
+/**
+ * Log debug message
+ */
+export function debug(message: string, ...args: unknown[]): void {
+  if (currentLevel <= LogLevel.DEBUG) {
+    const formatted = formatMessage('DEBUG', message, ...args);
+    console.debug(formatted);
+    writeToFile(formatted);
+  }
+}
+
+/**
+ * Log info message
+ */
+export function info(message: string, ...args: unknown[]): void {
+  if (currentLevel <= LogLevel.INFO) {
+    const formatted = formatMessage('INFO', message, ...args);
+    console.info(formatted);
+    writeToFile(formatted);
+  }
+}
+
+/**
+ * Log warning message
+ */
+export function warn(message: string, ...args: unknown[]): void {
+  if (currentLevel <= LogLevel.WARN) {
+    const formatted = formatMessage('WARN', message, ...args);
+    console.warn(formatted);
+    writeToFile(formatted);
+  }
+}
+
+/**
+ * Log error message
+ */
+export function error(message: string, ...args: unknown[]): void {
+  if (currentLevel <= LogLevel.ERROR) {
+    const formatted = formatMessage('ERROR', message, ...args);
+    console.error(formatted);
+    writeToFile(formatted);
+  }
+}
+
+/**
+ * Logger namespace export
+ */
+export const logger = {
+  debug,
+  info,
+  warn,
+  error,
+  setLevel: setLogLevel,
+  init: initLogger,
+};
--- a/electron/utils/paths.ts
+++ b/electron/utils/paths.ts
@@ -0,0 +1,72 @@
+/**
+ * Path Utilities
+ * Cross-platform path resolution helpers
+ */
+import { app } from 'electron';
+import { join } from 'path';
+import { homedir } from 'os';
+import { existsSync, mkdirSync } from 'fs';
+
+/**
+ * Expand ~ to home directory
+ */
+export function expandPath(path: string): string {
+  if (path.startsWith('~')) {
+    return path.replace('~', homedir());
+  }
+  return path;
+}
+
+/**
+ * Get OpenClaw config directory
+ */
+export function getOpenClawConfigDir(): string {
+  return join(homedir(), '.openclaw');
+}
+
+/**
+ * Get ClawX config directory
+ */
+export function getClawXConfigDir(): string {
+  return join(homedir(), '.clawx');
+}
+
+/**
+ * Get ClawX logs directory
+ */
+export function getLogsDir(): string {
+  return join(app.getPath('userData'), 'logs');
+}
+
+/**
+ * Get ClawX data directory
+ */
+export function getDataDir(): string {
+  return app.getPath('userData');
+}
+
+/**
+ * Ensure directory exists
+ */
+export function ensureDir(dir: string): void {
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+}
+
+/**
+ * Get resources directory (for bundled assets)
+ */
+export function getResourcesDir(): string {
+  if (app.isPackaged) {
+    return join(process.resourcesPath, 'resources');
+  }
+  return join(__dirname, '../../resources');
+}
+
+/**
+ * Get preload script path
+ */
+export function getPreloadPath(): string {
+  return join(__dirname, '../preload/index.js');
+}
--- a/electron/utils/store.ts
+++ b/electron/utils/store.ts
@@ -0,0 +1,123 @@
+/**
+ * Persistent Storage
+ * Electron-store wrapper for application settings
+ */
+import Store from 'electron-store';
+
+/**
+ * Application settings schema
+ */
+export interface AppSettings {
+  // General
+  theme: 'light' | 'dark' | 'system';
+  language: string;
+  startMinimized: boolean;
+  launchAtStartup: boolean;
+  
+  // Gateway
+  gatewayAutoStart: boolean;
+  gatewayPort: number;
+  
+  // Update
+  updateChannel: 'stable' | 'beta' | 'dev';
+  autoCheckUpdate: boolean;
+  autoDownloadUpdate: boolean;
+  skippedVersions: string[];
+  
+  // UI State
+  sidebarCollapsed: boolean;
+  devModeUnlocked: boolean;
+  
+  // Presets
+  selectedBundles: string[];
+  enabledSkills: string[];
+  disabledSkills: string[];
+}
+
+/**
+ * Default settings
+ */
+const defaults: AppSettings = {
+  // General
+  theme: 'system',
+  language: 'en',
+  startMinimized: false,
+  launchAtStartup: false,
+  
+  // Gateway
+  gatewayAutoStart: true,
+  gatewayPort: 18789,
+  
+  // Update
+  updateChannel: 'stable',
+  autoCheckUpdate: true,
+  autoDownloadUpdate: false,
+  skippedVersions: [],
+  
+  // UI State
+  sidebarCollapsed: false,
+  devModeUnlocked: false,
+  
+  // Presets
+  selectedBundles: ['productivity', 'developer'],
+  enabledSkills: [],
+  disabledSkills: [],
+};
+
+/**
+ * Create settings store
+ */
+export const settingsStore = new Store<AppSettings>({
+  name: 'settings',
+  defaults,
+});
+
+/**
+ * Get a setting value
+ */
+export function getSetting<K extends keyof AppSettings>(key: K): AppSettings[K] {
+  return settingsStore.get(key);
+}
+
+/**
+ * Set a setting value
+ */
+export function setSetting<K extends keyof AppSettings>(
+  key: K,
+  value: AppSettings[K]
+): void {
+  settingsStore.set(key, value);
+}
+
+/**
+ * Get all settings
+ */
+export function getAllSettings(): AppSettings {
+  return settingsStore.store;
+}
+
+/**
+ * Reset settings to defaults
+ */
+export function resetSettings(): void {
+  settingsStore.clear();
+}
+
+/**
+ * Export settings to JSON
+ */
+export function exportSettings(): string {
+  return JSON.stringify(settingsStore.store, null, 2);
+}
+
+/**
+ * Import settings from JSON
+ */
+export function importSettings(json: string): void {
+  try {
+    const settings = JSON.parse(json);
+    settingsStore.set(settings);
+  } catch (error) {
+    throw new Error('Invalid settings JSON');
+  }
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ClawX</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,85 @@
+{
+  "name": "clawx",
+  "version": "0.1.0",
+  "pnpm": {
+    "onlyBuiltDependencies": ["electron", "esbuild"]
+  },
+  "description": "ClawX - Graphical AI Assistant based on OpenClaw",
+  "main": "dist-electron/main/index.js",
+  "author": "ClawX Team",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "dev:electron": "electron .",
+    "build": "tsc && vite build && electron-builder",
+    "build:vite": "vite build",
+    "build:electron": "tsc -p tsconfig.node.json",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "package": "electron-builder",
+    "package:mac": "electron-builder --mac",
+    "package:win": "electron-builder --win",
+    "package:linux": "electron-builder --linux",
+    "package:all": "electron-builder -mwl"
+  },
+  "dependencies": {
+    "electron-store": "^10.0.0",
+    "electron-updater": "^6.3.9",
+    "ws": "^8.18.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@types/ws": "^8.5.13",
+    "@typescript-eslint/eslint-plugin": "^8.19.0",
+    "@typescript-eslint/parser": "^8.19.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "electron": "^33.3.0",
+    "electron-builder": "^25.1.8",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "framer-motion": "^11.15.0",
+    "jsdom": "^25.0.1",
+    "lucide-react": "^0.469.0",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.6",
+    "vite-plugin-electron": "^0.29.0",
+    "vite-plugin-electron-renderer": "^0.14.6",
+    "vitest": "^2.1.8",
+    "zustand": "^5.0.2"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+ignoredBuiltDependencies:
+  - electron
+  - esbuild
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/resources/icons/.gitkeep
+++ b/resources/icons/.gitkeep
@@ -0,0 +1,6 @@
+# Placeholder for icon files
+# Add the following icons:
+# - icon.icns (macOS)
+# - icon.ico (Windows)
+# - icon.png (Linux)
+# - tray-icon.png (System tray)
--- a/resources/skills/bundles.json
+++ b/resources/skills/bundles.json
@@ -0,0 +1,101 @@
+{
+  "bundles": [
+    {
+      "id": "productivity",
+      "name": "Productivity",
+      "nameZh": "效率办公",
+      "description": "Calendar, reminders, notes, email management",
+      "descriptionZh": "日历、提醒、笔记、邮件管理",
+      "icon": "📋",
+      "skills": [
+        "apple-reminders",
+        "apple-notes",
+        "himalaya",
+        "notion",
+        "obsidian",
+        "trello"
+      ],
+      "recommended": true
+    },
+    {
+      "id": "developer",
+      "name": "Developer Tools",
+      "nameZh": "开发者工具",
+      "description": "GitHub, coding assistant, terminal management",
+      "descriptionZh": "GitHub、代码助手、终端管理",
+      "icon": "💻",
+      "skills": [
+        "github",
+        "coding-agent",
+        "tmux"
+      ],
+      "recommended": true
+    },
+    {
+      "id": "smart-home",
+      "name": "Smart Home",
+      "nameZh": "智能家居",
+      "description": "Lights, music, device control",
+      "descriptionZh": "灯光、音乐、设备控制",
+      "icon": "🏠",
+      "skills": [
+        "openhue",
+        "sonoscli",
+        "spotify-player"
+      ]
+    },
+    {
+      "id": "media",
+      "name": "Media & Creative",
+      "nameZh": "多媒体创作",
+      "description": "Image generation, video processing, audio transcription",
+      "descriptionZh": "图片生成、视频处理、音频转写",
+      "icon": "🎨",
+      "skills": [
+        "openai-image-gen",
+        "nano-banana-pro",
+        "video-frames",
+        "openai-whisper-api"
+      ]
+    },
+    {
+      "id": "communication",
+      "name": "Communication",
+      "nameZh": "通讯增强",
+      "description": "Messaging, voice calls, notifications",
+      "descriptionZh": "消息管理、语音通话、通知",
+      "icon": "💬",
+      "skills": [
+        "discord",
+        "slack",
+        "voice-call",
+        "imsg"
+      ]
+    },
+    {
+      "id": "security",
+      "name": "Security & Privacy",
+      "nameZh": "安全隐私",
+      "description": "Password management, secrets",
+      "descriptionZh": "密码管理、密钥存储",
+      "icon": "🔐",
+      "skills": [
+        "1password"
+      ]
+    },
+    {
+      "id": "information",
+      "name": "Information",
+      "nameZh": "信息获取",
+      "description": "Weather, news, web browsing",
+      "descriptionZh": "天气、新闻、网页浏览",
+      "icon": "🌐",
+      "skills": [
+        "weather",
+        "blogwatcher",
+        "web-browse",
+        "summarize"
+      ]
+    }
+  ]
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,86 @@
+/**
+ * Root Application Component
+ * Handles routing and global providers
+ */
+import { Routes, Route, useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Toaster } from 'sonner';
+import { MainLayout } from './components/layout/MainLayout';
+import { Dashboard } from './pages/Dashboard';
+import { Chat } from './pages/Chat';
+import { Channels } from './pages/Channels';
+import { Skills } from './pages/Skills';
+import { Cron } from './pages/Cron';
+import { Settings } from './pages/Settings';
+import { Setup } from './pages/Setup';
+import { useSettingsStore } from './stores/settings';
+import { useGatewayStore } from './stores/gateway';
+
+function App() {
+  const navigate = useNavigate();
+  const theme = useSettingsStore((state) => state.theme);
+  const initGateway = useGatewayStore((state) => state.init);
+  
+  // Initialize Gateway connection on mount
+  useEffect(() => {
+    initGateway();
+  }, [initGateway]);
+  
+  // Listen for navigation events from main process
+  useEffect(() => {
+    const handleNavigate = (path: string) => {
+      navigate(path);
+    };
+    
+    const unsubscribe = window.electron.ipcRenderer.on('navigate', handleNavigate);
+    
+    return () => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    };
+  }, [navigate]);
+  
+  // Apply theme
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove('light', 'dark');
+    
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+      root.classList.add(systemTheme);
+    } else {
+      root.classList.add(theme);
+    }
+  }, [theme]);
+  
+  return (
+    <>
+      <Routes>
+        {/* Setup wizard (shown on first launch) */}
+        <Route path="/setup/*" element={<Setup />} />
+        
+        {/* Main application routes */}
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/chat" element={<Chat />} />
+          <Route path="/channels" element={<Channels />} />
+          <Route path="/skills" element={<Skills />} />
+          <Route path="/cron" element={<Cron />} />
+          <Route path="/settings/*" element={<Settings />} />
+        </Route>
+      </Routes>
+      
+      {/* Global toast notifications */}
+      <Toaster
+        position="bottom-right"
+        richColors
+        closeButton
+      />
+    </>
+  );
+}
+
+export default App;
--- a/src/components/common/ErrorBoundary.tsx
+++ b/src/components/common/ErrorBoundary.tsx
@@ -0,0 +1,74 @@
+/**
+ * Error Boundary Component
+ * Catches and displays errors in the component tree
+ */
+import { Component, ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+  
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+  
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+  
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      
+      return (
+        <div className="flex h-full items-center justify-center p-6">
+          <Card className="max-w-md">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <AlertTriangle className="h-6 w-6 text-destructive" />
+                <CardTitle>Something went wrong</CardTitle>
+              </div>
+              <CardDescription>
+                An unexpected error occurred. Please try again.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {this.state.error && (
+                <pre className="rounded-lg bg-muted p-4 text-sm overflow-auto max-h-40">
+                  {this.state.error.message}
+                </pre>
+              )}
+              <Button onClick={this.handleReset} className="w-full">
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Try Again
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      );
+    }
+    
+    return this.props.children;
+  }
+}
--- a/src/components/common/LoadingSpinner.tsx
+++ b/src/components/common/LoadingSpinner.tsx
@@ -0,0 +1,36 @@
+/**
+ * Loading Spinner Component
+ * Displays a spinning loader animation
+ */
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+};
+
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  return (
+    <div className={cn('flex items-center justify-center', className)}>
+      <Loader2 className={cn('animate-spin text-primary', sizeClasses[size])} />
+    </div>
+  );
+}
+
+/**
+ * Full page loading spinner
+ */
+export function PageLoader() {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <LoadingSpinner size="lg" />
+    </div>
+  );
+}
--- a/src/components/common/StatusBadge.tsx
+++ b/src/components/common/StatusBadge.tsx
@@ -0,0 +1,46 @@
+/**
+ * Status Badge Component
+ * Displays connection/state status with color coding
+ */
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+
+type Status = 'connected' | 'disconnected' | 'connecting' | 'error' | 'running' | 'stopped' | 'starting';
+
+interface StatusBadgeProps {
+  status: Status;
+  label?: string;
+  showDot?: boolean;
+}
+
+const statusConfig: Record<Status, { label: string; variant: 'success' | 'secondary' | 'warning' | 'destructive' }> = {
+  connected: { label: 'Connected', variant: 'success' },
+  running: { label: 'Running', variant: 'success' },
+  disconnected: { label: 'Disconnected', variant: 'secondary' },
+  stopped: { label: 'Stopped', variant: 'secondary' },
+  connecting: { label: 'Connecting', variant: 'warning' },
+  starting: { label: 'Starting', variant: 'warning' },
+  error: { label: 'Error', variant: 'destructive' },
+};
+
+export function StatusBadge({ status, label, showDot = true }: StatusBadgeProps) {
+  const config = statusConfig[status];
+  const displayLabel = label || config.label;
+  
+  return (
+    <Badge variant={config.variant} className="gap-1.5">
+      {showDot && (
+        <span
+          className={cn(
+            'h-1.5 w-1.5 rounded-full',
+            config.variant === 'success' && 'bg-green-600',
+            config.variant === 'secondary' && 'bg-gray-400',
+            config.variant === 'warning' && 'bg-yellow-600 animate-pulse',
+            config.variant === 'destructive' && 'bg-red-600'
+          )}
+        />
+      )}
+      {displayLabel}
+    </Badge>
+  );
+}
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,75 @@
+/**
+ * Header Component
+ * Top navigation bar with search and actions
+ */
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Search, Bell, Moon, Sun, Monitor } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useSettingsStore } from '@/stores/settings';
+
+// Page titles mapping
+const pageTitles: Record<string, string> = {
+  '/': 'Dashboard',
+  '/chat': 'Chat',
+  '/channels': 'Channels',
+  '/skills': 'Skills',
+  '/cron': 'Cron Tasks',
+  '/settings': 'Settings',
+};
+
+export function Header() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const theme = useSettingsStore((state) => state.theme);
+  const setTheme = useSettingsStore((state) => state.setTheme);
+  
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  // Get current page title
+  const currentTitle = pageTitles[location.pathname] || 'ClawX';
+  
+  // Cycle through themes
+  const cycleTheme = () => {
+    const themes: Array<'light' | 'dark' | 'system'> = ['light', 'dark', 'system'];
+    const currentIndex = themes.indexOf(theme);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    setTheme(themes[nextIndex]);
+  };
+  
+  // Get theme icon
+  const ThemeIcon = theme === 'light' ? Sun : theme === 'dark' ? Moon : Monitor;
+  
+  return (
+    <header className="flex h-14 items-center justify-between border-b bg-background px-6">
+      {/* Page Title */}
+      <h2 className="text-lg font-semibold">{currentTitle}</h2>
+      
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            className="w-64 pl-9"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        
+        {/* Theme Toggle */}
+        <Button variant="ghost" size="icon" onClick={cycleTheme}>
+          <ThemeIcon className="h-5 w-5" />
+        </Button>
+        
+        {/* Notifications */}
+        <Button variant="ghost" size="icon">
+          <Bell className="h-5 w-5" />
+        </Button>
+      </div>
+    </header>
+  );
+}
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -0,0 +1,36 @@
+/**
+ * Main Layout Component
+ * Provides the primary app layout with sidebar and content area
+ */
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+import { useSettingsStore } from '@/stores/settings';
+import { cn } from '@/lib/utils';
+
+export function MainLayout() {
+  const sidebarCollapsed = useSettingsStore((state) => state.sidebarCollapsed);
+  
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      {/* Sidebar */}
+      <Sidebar />
+      
+      {/* Main Content Area */}
+      <div
+        className={cn(
+          'flex flex-1 flex-col overflow-hidden transition-all duration-300',
+          sidebarCollapsed ? 'ml-16' : 'ml-64'
+        )}
+      >
+        {/* Header */}
+        <Header />
+        
+        {/* Page Content */}
+        <main className="flex-1 overflow-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -0,0 +1,206 @@
+/**
+ * Sidebar Component
+ * Navigation sidebar with menu items
+ */
+import { useState, useEffect } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import {
+  Home,
+  MessageSquare,
+  Radio,
+  Puzzle,
+  Clock,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  Terminal,
+  ExternalLink,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useSettingsStore } from '@/stores/settings';
+import { useGatewayStore } from '@/stores/gateway';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { toast } from 'sonner';
+
+interface NavItemProps {
+  to: string;
+  icon: React.ReactNode;
+  label: string;
+  badge?: string;
+  collapsed?: boolean;
+}
+
+function NavItem({ to, icon, label, badge, collapsed }: NavItemProps) {
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) =>
+        cn(
+          'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+          'hover:bg-accent hover:text-accent-foreground',
+          isActive
+            ? 'bg-accent text-accent-foreground'
+            : 'text-muted-foreground',
+          collapsed && 'justify-center px-2'
+        )
+      }
+    >
+      {icon}
+      {!collapsed && (
+        <>
+          <span className="flex-1">{label}</span>
+          {badge && (
+            <Badge variant="secondary" className="ml-auto">
+              {badge}
+            </Badge>
+          )}
+        </>
+      )}
+    </NavLink>
+  );
+}
+
+export function Sidebar() {
+  const location = useLocation();
+  const sidebarCollapsed = useSettingsStore((state) => state.sidebarCollapsed);
+  const setSidebarCollapsed = useSettingsStore((state) => state.setSidebarCollapsed);
+  const devModeUnlocked = useSettingsStore((state) => state.devModeUnlocked);
+  const setDevModeUnlocked = useSettingsStore((state) => state.setDevModeUnlocked);
+  const gatewayStatus = useGatewayStore((state) => state.status);
+  
+  const [versionClicks, setVersionClicks] = useState(0);
+  const [appVersion, setAppVersion] = useState('0.1.0');
+  
+  // Get app version
+  useEffect(() => {
+    window.electron.ipcRenderer.invoke('app:version').then((version) => {
+      setAppVersion(version as string);
+    });
+  }, []);
+  
+  // Handle version click for dev mode unlock
+  const handleVersionClick = () => {
+    const clicks = versionClicks + 1;
+    setVersionClicks(clicks);
+    
+    if (clicks >= 5) {
+      if (!devModeUnlocked) {
+        setDevModeUnlocked(true);
+        toast.success('Developer mode unlocked!');
+      }
+      setVersionClicks(0);
+    }
+    
+    // Reset after 2 seconds of inactivity
+    setTimeout(() => setVersionClicks(0), 2000);
+  };
+  
+  // Open developer console
+  const openDevConsole = () => {
+    window.electron.openExternal('http://localhost:18789');
+  };
+  
+  const navItems = [
+    { to: '/', icon: <Home className="h-5 w-5" />, label: 'Dashboard' },
+    { to: '/chat', icon: <MessageSquare className="h-5 w-5" />, label: 'Chat' },
+    { to: '/channels', icon: <Radio className="h-5 w-5" />, label: 'Channels' },
+    { to: '/skills', icon: <Puzzle className="h-5 w-5" />, label: 'Skills' },
+    { to: '/cron', icon: <Clock className="h-5 w-5" />, label: 'Cron Tasks' },
+    { to: '/settings', icon: <Settings className="h-5 w-5" />, label: 'Settings' },
+  ];
+  
+  return (
+    <aside
+      className={cn(
+        'fixed left-0 top-0 z-40 flex h-screen flex-col border-r bg-background transition-all duration-300',
+        sidebarCollapsed ? 'w-16' : 'w-64'
+      )}
+    >
+      {/* Header with drag region for macOS */}
+      <div className="drag-region flex h-14 items-center border-b px-4">
+        {/* macOS traffic light spacing */}
+        <div className="w-16" />
+        {!sidebarCollapsed && (
+          <h1 className="no-drag text-xl font-bold">ClawX</h1>
+        )}
+      </div>
+      
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 p-2">
+        {navItems.map((item) => (
+          <NavItem
+            key={item.to}
+            {...item}
+            collapsed={sidebarCollapsed}
+          />
+        ))}
+      </nav>
+      
+      {/* Footer */}
+      <div className="border-t p-2 space-y-2">
+        {/* Gateway Status */}
+        <div
+          className={cn(
+            'flex items-center gap-2 rounded-lg px-3 py-2',
+            sidebarCollapsed && 'justify-center px-2'
+          )}
+        >
+          <div
+            className={cn(
+              'h-2 w-2 rounded-full',
+              gatewayStatus.state === 'running' && 'bg-green-500',
+              gatewayStatus.state === 'starting' && 'bg-yellow-500 animate-pulse',
+              gatewayStatus.state === 'stopped' && 'bg-gray-400',
+              gatewayStatus.state === 'error' && 'bg-red-500'
+            )}
+          />
+          {!sidebarCollapsed && (
+            <span className="text-xs text-muted-foreground">
+              Gateway: {gatewayStatus.state}
+            </span>
+          )}
+        </div>
+        
+        {/* Developer Mode Button */}
+        {devModeUnlocked && !sidebarCollapsed && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start"
+            onClick={openDevConsole}
+          >
+            <Terminal className="h-4 w-4 mr-2" />
+            Developer Console
+            <ExternalLink className="h-3 w-3 ml-auto" />
+          </Button>
+        )}
+        
+        {/* Version */}
+        <button
+          onClick={handleVersionClick}
+          className={cn(
+            'w-full text-xs text-muted-foreground hover:text-foreground transition-colors',
+            sidebarCollapsed ? 'text-center' : 'px-3'
+          )}
+        >
+          {sidebarCollapsed ? `v${appVersion.split('.')[0]}` : `ClawX v${appVersion}`}
+        </button>
+        
+        {/* Collapse Toggle */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="w-full"
+          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+        >
+          {sidebarCollapsed ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </aside>
+  );
+}
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,43 @@
+/**
+ * Badge Component
+ * Based on shadcn/ui badge
+ */
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        success:
+          'border-transparent bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100',
+        warning:
+          'border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+/**
+ * Button Component
+ * Based on shadcn/ui button
+ */
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,82 @@
+/**
+ * Card Component
+ * Based on shadcn/ui card
+ */
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,28 @@
+/**
+ * Input Component
+ * Based on shadcn/ui input
+ */
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,27 @@
+/**
+ * Label Component
+ * Based on shadcn/ui label
+ */
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,32 @@
+/**
+ * Separator Component
+ * Based on shadcn/ui separator
+ */
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,30 @@
+/**
+ * Switch Component
+ * Based on shadcn/ui switch
+ */
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,72 @@
+/**
+ * Utility Functions
+ * Common utility functions for the application
+ */
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge class names with Tailwind CSS classes
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Format relative time (e.g., "2 minutes ago")
+ */
+export function formatRelativeTime(date: string | Date): string {
+  const now = new Date();
+  const then = new Date(date);
+  const diffMs = now.getTime() - then.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  
+  if (diffSec < 60) {
+    return 'just now';
+  } else if (diffMin < 60) {
+    return `${diffMin} minute${diffMin > 1 ? 's' : ''} ago`;
+  } else if (diffHour < 24) {
+    return `${diffHour} hour${diffHour > 1 ? 's' : ''} ago`;
+  } else if (diffDay < 7) {
+    return `${diffDay} day${diffDay > 1 ? 's' : ''} ago`;
+  } else {
+    return then.toLocaleDateString();
+  }
+}
+
+/**
+ * Format duration in seconds to human-readable string
+ */
+export function formatDuration(seconds: number): string {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+  
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  } else if (minutes > 0) {
+    return `${minutes}m ${secs}s`;
+  } else {
+    return `${secs}s`;
+  }
+}
+
+/**
+ * Delay for a specified number of milliseconds
+ */
+export function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Truncate text with ellipsis
+ */
+export function truncate(text: string, maxLength: number): string {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return text.slice(0, maxLength - 3) + '...';
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,16 @@
+/**
+ * React Application Entry Point
+ */
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+);
--- a/src/pages/Channels/index.tsx
+++ b/src/pages/Channels/index.tsx
@@ -0,0 +1,164 @@
+/**
+ * Channels Page
+ * Manage messaging channel connections
+ */
+import { useEffect } from 'react';
+import { Plus, Radio, RefreshCw, Settings } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useChannelsStore } from '@/stores/channels';
+import { StatusBadge } from '@/components/common/StatusBadge';
+import { LoadingSpinner } from '@/components/common/LoadingSpinner';
+import { CHANNEL_ICONS, CHANNEL_NAMES, type ChannelType } from '@/types/channel';
+
+export function Channels() {
+  const { channels, loading, error, fetchChannels, connectChannel, disconnectChannel } = useChannelsStore();
+  
+  // Fetch channels on mount
+  useEffect(() => {
+    fetchChannels();
+  }, [fetchChannels]);
+  
+  // Supported channel types for adding
+  const supportedTypes: ChannelType[] = ['whatsapp', 'telegram', 'discord', 'slack'];
+  
+  if (loading) {
+    return (
+      <div className="flex h-96 items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+  
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Channels</h1>
+          <p className="text-muted-foreground">
+            Connect and manage your messaging channels
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={fetchChannels}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </Button>
+          <Button>
+            <Plus className="h-4 w-4 mr-2" />
+            Add Channel
+          </Button>
+        </div>
+      </div>
+      
+      {/* Error Display */}
+      {error && (
+        <Card className="border-destructive">
+          <CardContent className="py-4 text-destructive">
+            {error}
+          </CardContent>
+        </Card>
+      )}
+      
+      {/* Channels Grid */}
+      {channels.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Radio className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium mb-2">No channels configured</h3>
+            <p className="text-muted-foreground text-center mb-4">
+              Connect a messaging channel to start using ClawX
+            </p>
+            <Button>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Your First Channel
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {channels.map((channel) => (
+            <Card key={channel.id}>
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <span className="text-3xl">
+                      {CHANNEL_ICONS[channel.type]}
+                    </span>
+                    <div>
+                      <CardTitle className="text-lg">{channel.name}</CardTitle>
+                      <CardDescription>
+                        {CHANNEL_NAMES[channel.type]}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <StatusBadge status={channel.status} />
+                </div>
+              </CardHeader>
+              <CardContent>
+                {channel.lastActivity && (
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Last activity: {new Date(channel.lastActivity).toLocaleString()}
+                  </p>
+                )}
+                {channel.error && (
+                  <p className="text-sm text-destructive mb-4">{channel.error}</p>
+                )}
+                <div className="flex gap-2">
+                  {channel.status === 'connected' ? (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => disconnectChannel(channel.id)}
+                    >
+                      Disconnect
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => connectChannel(channel.id)}
+                      disabled={channel.status === 'connecting'}
+                    >
+                      {channel.status === 'connecting' ? 'Connecting...' : 'Connect'}
+                    </Button>
+                  )}
+                  <Button variant="ghost" size="sm">
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+      
+      {/* Add Channel Types */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Supported Channels</CardTitle>
+          <CardDescription>
+            Click on a channel type to add it
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+            {supportedTypes.map((type) => (
+              <Button
+                key={type}
+                variant="outline"
+                className="h-auto flex-col gap-2 py-4"
+              >
+                <span className="text-3xl">{CHANNEL_ICONS[type]}</span>
+                <span>{CHANNEL_NAMES[type]}</span>
+              </Button>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default Channels;
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -0,0 +1,166 @@
+/**
+ * Chat Page
+ * Conversation interface with AI
+ */
+import { useState, useEffect, useRef } from 'react';
+import { Send, Trash2, Bot, User } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent } from '@/components/ui/card';
+import { useChatStore } from '@/stores/chat';
+import { LoadingSpinner } from '@/components/common/LoadingSpinner';
+import { cn, formatRelativeTime } from '@/lib/utils';
+
+export function Chat() {
+  const { messages, loading, sending, fetchHistory, sendMessage, clearHistory } = useChatStore();
+  const [input, setInput] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  
+  // Fetch history on mount
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+  
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+  
+  // Handle send message
+  const handleSend = async () => {
+    if (!input.trim() || sending) return;
+    
+    const content = input.trim();
+    setInput('');
+    await sendMessage(content);
+  };
+  
+  // Handle key press
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  
+  return (
+    <div className="flex h-[calc(100vh-8rem)] flex-col">
+      {/* Messages Area */}
+      <div className="flex-1 overflow-auto p-4 space-y-4">
+        {loading ? (
+          <div className="flex h-full items-center justify-center">
+            <LoadingSpinner size="lg" />
+          </div>
+        ) : messages.length === 0 ? (
+          <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
+            <Bot className="h-16 w-16 mb-4 opacity-50" />
+            <h3 className="text-lg font-medium">No messages yet</h3>
+            <p className="text-sm">Start a conversation with your AI assistant</p>
+          </div>
+        ) : (
+          <>
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                className={cn(
+                  'flex gap-3',
+                  message.role === 'user' ? 'flex-row-reverse' : 'flex-row'
+                )}
+              >
+                {/* Avatar */}
+                <div
+                  className={cn(
+                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
+                    message.role === 'user'
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted'
+                  )}
+                >
+                  {message.role === 'user' ? (
+                    <User className="h-4 w-4" />
+                  ) : (
+                    <Bot className="h-4 w-4" />
+                  )}
+                </div>
+                
+                {/* Message Content */}
+                <div
+                  className={cn(
+                    'max-w-[80%] rounded-lg px-4 py-2',
+                    message.role === 'user'
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted'
+                  )}
+                >
+                  <p className="whitespace-pre-wrap">{message.content}</p>
+                  <p
+                    className={cn(
+                      'mt-1 text-xs',
+                      message.role === 'user'
+                        ? 'text-primary-foreground/70'
+                        : 'text-muted-foreground'
+                    )}
+                  >
+                    {formatRelativeTime(message.timestamp)}
+                  </p>
+                  
+                  {/* Tool Calls */}
+                  {message.toolCalls && message.toolCalls.length > 0 && (
+                    <div className="mt-2 space-y-2">
+                      {message.toolCalls.map((tool) => (
+                        <Card key={tool.id} className="bg-background/50">
+                          <CardContent className="p-2">
+                            <p className="text-xs font-medium">
+                              Tool: {tool.name}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              Status: {tool.status}
+                            </p>
+                          </CardContent>
+                        </Card>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+            <div ref={messagesEndRef} />
+          </>
+        )}
+      </div>
+      
+      {/* Input Area */}
+      <div className="border-t p-4">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={clearHistory}
+            disabled={messages.length === 0}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+          
+          <Input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder="Type a message..."
+            disabled={sending}
+            className="flex-1"
+          />
+          
+          <Button onClick={handleSend} disabled={!input.trim() || sending}>
+            {sending ? (
+              <LoadingSpinner size="sm" className="text-primary-foreground" />
+            ) : (
+              <Send className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Chat;
--- a/src/pages/Cron/index.tsx
+++ b/src/pages/Cron/index.tsx
@@ -0,0 +1,215 @@
+/**
+ * Cron Page
+ * Manage scheduled tasks
+ */
+import { useEffect, useState } from 'react';
+import { Plus, Clock, Play, Pause, Trash2, Edit, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import { useCronStore } from '@/stores/cron';
+import { LoadingSpinner } from '@/components/common/LoadingSpinner';
+import { formatRelativeTime } from '@/lib/utils';
+import type { CronJob } from '@/types/cron';
+
+export function Cron() {
+  const { jobs, loading, error, fetchJobs, toggleJob, deleteJob, triggerJob } = useCronStore();
+  
+  // Fetch jobs on mount
+  useEffect(() => {
+    fetchJobs();
+  }, [fetchJobs]);
+  
+  // Statistics
+  const activeJobs = jobs.filter((j) => j.enabled);
+  const pausedJobs = jobs.filter((j) => !j.enabled);
+  
+  if (loading) {
+    return (
+      <div className="flex h-96 items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+  
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Cron Tasks</h1>
+          <p className="text-muted-foreground">
+            Schedule automated AI tasks
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={fetchJobs}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </Button>
+          <Button>
+            <Plus className="h-4 w-4 mr-2" />
+            New Task
+          </Button>
+        </div>
+      </div>
+      
+      {/* Statistics */}
+      <div className="grid grid-cols-3 gap-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-4">
+              <div className="rounded-full bg-primary/10 p-3">
+                <Clock className="h-6 w-6 text-primary" />
+              </div>
+              <div>
+                <p className="text-2xl font-bold">{jobs.length}</p>
+                <p className="text-sm text-muted-foreground">Total Tasks</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-4">
+              <div className="rounded-full bg-green-100 p-3 dark:bg-green-900">
+                <Play className="h-6 w-6 text-green-600" />
+              </div>
+              <div>
+                <p className="text-2xl font-bold">{activeJobs.length}</p>
+                <p className="text-sm text-muted-foreground">Running</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-4">
+              <div className="rounded-full bg-yellow-100 p-3 dark:bg-yellow-900">
+                <Pause className="h-6 w-6 text-yellow-600" />
+              </div>
+              <div>
+                <p className="text-2xl font-bold">{pausedJobs.length}</p>
+                <p className="text-sm text-muted-foreground">Paused</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      
+      {/* Error Display */}
+      {error && (
+        <Card className="border-destructive">
+          <CardContent className="py-4 text-destructive">
+            {error}
+          </CardContent>
+        </Card>
+      )}
+      
+      {/* Jobs List */}
+      {jobs.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Clock className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium mb-2">No scheduled tasks</h3>
+            <p className="text-muted-foreground text-center mb-4">
+              Create your first scheduled task to automate AI workflows
+            </p>
+            <Button>
+              <Plus className="h-4 w-4 mr-2" />
+              Create Task
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {jobs.map((job) => (
+            <CronJobCard
+              key={job.id}
+              job={job}
+              onToggle={(enabled) => toggleJob(job.id, enabled)}
+              onDelete={() => deleteJob(job.id)}
+              onTrigger={() => triggerJob(job.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface CronJobCardProps {
+  job: CronJob;
+  onToggle: (enabled: boolean) => void;
+  onDelete: () => void;
+  onTrigger: () => void;
+}
+
+function CronJobCard({ job, onToggle, onDelete, onTrigger }: CronJobCardProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <span className="text-2xl">📋</span>
+            <div>
+              <CardTitle className="text-lg">{job.name}</CardTitle>
+              <CardDescription className="flex items-center gap-2">
+                <Clock className="h-3 w-3" />
+                {job.schedule}
+              </CardDescription>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant={job.enabled ? 'success' : 'secondary'}>
+              {job.enabled ? 'Active' : 'Paused'}
+            </Badge>
+            <Switch
+              checked={job.enabled}
+              onCheckedChange={onToggle}
+            />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
+          {job.message}
+        </p>
+        
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <span>
+              Target: {job.target.channelName}
+            </span>
+            {job.lastRun && (
+              <span>
+                Last run: {formatRelativeTime(job.lastRun.time)}
+                {job.lastRun.success ? ' ✓' : ' ✗'}
+              </span>
+            )}
+            {job.nextRun && (
+              <span>
+                Next: {new Date(job.nextRun).toLocaleString()}
+              </span>
+            )}
+          </div>
+          
+          <div className="flex gap-1">
+            <Button variant="ghost" size="icon" onClick={onTrigger}>
+              <Play className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon">
+              <Edit className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon" onClick={onDelete}>
+              <Trash2 className="h-4 w-4 text-destructive" />
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default Cron;
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -0,0 +1,251 @@
+/**
+ * Dashboard Page
+ * Main overview page showing system status and quick actions
+ */
+import { useEffect } from 'react';
+import {
+  Activity,
+  MessageSquare,
+  Radio,
+  Puzzle,
+  Clock,
+  Settings,
+  Plus,
+  RefreshCw,
+  ExternalLink,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { useGatewayStore } from '@/stores/gateway';
+import { useChannelsStore } from '@/stores/channels';
+import { useSkillsStore } from '@/stores/skills';
+import { StatusBadge } from '@/components/common/StatusBadge';
+import { formatRelativeTime } from '@/lib/utils';
+
+export function Dashboard() {
+  const gatewayStatus = useGatewayStore((state) => state.status);
+  const { channels, fetchChannels } = useChannelsStore();
+  const { skills, fetchSkills } = useSkillsStore();
+  
+  // Fetch data on mount
+  useEffect(() => {
+    fetchChannels();
+    fetchSkills();
+  }, [fetchChannels, fetchSkills]);
+  
+  // Calculate statistics
+  const connectedChannels = channels.filter((c) => c.status === 'connected').length;
+  const enabledSkills = skills.filter((s) => s.enabled).length;
+  
+  // Calculate uptime
+  const uptime = gatewayStatus.connectedAt
+    ? Math.floor((Date.now() - gatewayStatus.connectedAt) / 1000)
+    : 0;
+  
+  return (
+    <div className="space-y-6">
+      {/* Status Cards */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {/* Gateway Status */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">Gateway</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-2">
+              <StatusBadge status={gatewayStatus.state} />
+            </div>
+            {gatewayStatus.state === 'running' && (
+              <p className="mt-1 text-xs text-muted-foreground">
+                Port: {gatewayStatus.port} | PID: {gatewayStatus.pid || 'N/A'}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+        
+        {/* Channels */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">Channels</CardTitle>
+            <Radio className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{connectedChannels}</div>
+            <p className="text-xs text-muted-foreground">
+              {connectedChannels} of {channels.length} connected
+            </p>
+          </CardContent>
+        </Card>
+        
+        {/* Skills */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">Skills</CardTitle>
+            <Puzzle className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{enabledSkills}</div>
+            <p className="text-xs text-muted-foreground">
+              {enabledSkills} of {skills.length} enabled
+            </p>
+          </CardContent>
+        </Card>
+        
+        {/* Uptime */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">Uptime</CardTitle>
+            <Clock className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {uptime > 0 ? formatUptime(uptime) : '—'}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {gatewayStatus.state === 'running' ? 'Since last restart' : 'Gateway not running'}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+      
+      {/* Quick Actions */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Quick Actions</CardTitle>
+          <CardDescription>Common tasks and shortcuts</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
+              <Link to="/channels">
+                <Plus className="h-5 w-5" />
+                <span>Add Channel</span>
+              </Link>
+            </Button>
+            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
+              <Link to="/skills">
+                <Puzzle className="h-5 w-5" />
+                <span>Browse Skills</span>
+              </Link>
+            </Button>
+            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
+              <Link to="/chat">
+                <MessageSquare className="h-5 w-5" />
+                <span>Open Chat</span>
+              </Link>
+            </Button>
+            <Button variant="outline" className="h-auto flex-col gap-2 py-4" asChild>
+              <Link to="/settings">
+                <Settings className="h-5 w-5" />
+                <span>Settings</span>
+              </Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+      
+      {/* Recent Activity */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        {/* Connected Channels */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Connected Channels</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {channels.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <Radio className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                <p>No channels configured</p>
+                <Button variant="link" asChild className="mt-2">
+                  <Link to="/channels">Add your first channel</Link>
+                </Button>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {channels.slice(0, 5).map((channel) => (
+                  <div
+                    key={channel.id}
+                    className="flex items-center justify-between rounded-lg border p-3"
+                  >
+                    <div className="flex items-center gap-3">
+                      <span className="text-lg">
+                        {channel.type === 'whatsapp' && '📱'}
+                        {channel.type === 'telegram' && '✈️'}
+                        {channel.type === 'discord' && '🎮'}
+                        {channel.type === 'slack' && '💼'}
+                      </span>
+                      <div>
+                        <p className="font-medium">{channel.name}</p>
+                        <p className="text-xs text-muted-foreground capitalize">
+                          {channel.type}
+                        </p>
+                      </div>
+                    </div>
+                    <StatusBadge status={channel.status} />
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+        
+        {/* Enabled Skills */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Active Skills</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {skills.filter((s) => s.enabled).length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <Puzzle className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                <p>No skills enabled</p>
+                <Button variant="link" asChild className="mt-2">
+                  <Link to="/skills">Enable some skills</Link>
+                </Button>
+              </div>
+            ) : (
+              <div className="flex flex-wrap gap-2">
+                {skills
+                  .filter((s) => s.enabled)
+                  .slice(0, 12)
+                  .map((skill) => (
+                    <Badge key={skill.id} variant="secondary">
+                      {skill.icon && <span className="mr-1">{skill.icon}</span>}
+                      {skill.name}
+                    </Badge>
+                  ))}
+                {skills.filter((s) => s.enabled).length > 12 && (
+                  <Badge variant="outline">
+                    +{skills.filter((s) => s.enabled).length - 12} more
+                  </Badge>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Format uptime in human-readable format
+ */
+function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  
+  if (days > 0) {
+    return `${days}d ${hours}h`;
+  } else if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  } else {
+    return `${minutes}m`;
+  }
+}
+
+export default Dashboard;
--- a/src/pages/Settings/index.tsx
+++ b/src/pages/Settings/index.tsx
@@ -0,0 +1,282 @@
+/**
+ * Settings Page
+ * Application configuration
+ */
+import { useState, useEffect } from 'react';
+import {
+  Sun,
+  Moon,
+  Monitor,
+  RefreshCw,
+  Loader2,
+  Terminal,
+  ExternalLink,
+  Info,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Separator } from '@/components/ui/separator';
+import { Badge } from '@/components/ui/badge';
+import { useSettingsStore } from '@/stores/settings';
+import { useGatewayStore } from '@/stores/gateway';
+
+export function Settings() {
+  const {
+    theme,
+    setTheme,
+    gatewayAutoStart,
+    setGatewayAutoStart,
+    autoCheckUpdate,
+    setAutoCheckUpdate,
+    autoDownloadUpdate,
+    setAutoDownloadUpdate,
+    devModeUnlocked,
+  } = useSettingsStore();
+  
+  const { status: gatewayStatus, restart: restartGateway } = useGatewayStore();
+  
+  const [appVersion, setAppVersion] = useState('0.1.0');
+  const [checkingUpdate, setCheckingUpdate] = useState(false);
+  
+  // Get app version
+  useEffect(() => {
+    window.electron.ipcRenderer.invoke('app:version').then((version) => {
+      setAppVersion(version as string);
+    });
+  }, []);
+  
+  // Check for updates
+  const handleCheckUpdate = async () => {
+    setCheckingUpdate(true);
+    try {
+      await window.electron.ipcRenderer.invoke('update:check');
+    } finally {
+      setCheckingUpdate(false);
+    }
+  };
+  
+  // Open developer console
+  const openDevConsole = () => {
+    window.electron.openExternal('http://localhost:18789');
+  };
+  
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <div>
+        <h1 className="text-2xl font-bold">Settings</h1>
+        <p className="text-muted-foreground">
+          Configure your ClawX experience
+        </p>
+      </div>
+      
+      {/* Appearance */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Appearance</CardTitle>
+          <CardDescription>Customize the look and feel</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>Theme</Label>
+            <div className="flex gap-2">
+              <Button
+                variant={theme === 'light' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setTheme('light')}
+              >
+                <Sun className="h-4 w-4 mr-2" />
+                Light
+              </Button>
+              <Button
+                variant={theme === 'dark' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setTheme('dark')}
+              >
+                <Moon className="h-4 w-4 mr-2" />
+                Dark
+              </Button>
+              <Button
+                variant={theme === 'system' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setTheme('system')}
+              >
+                <Monitor className="h-4 w-4 mr-2" />
+                System
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      
+      {/* Gateway */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Gateway</CardTitle>
+          <CardDescription>OpenClaw Gateway settings</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <Label>Status</Label>
+              <p className="text-sm text-muted-foreground">
+                Port: {gatewayStatus.port}
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge
+                variant={
+                  gatewayStatus.state === 'running'
+                    ? 'success'
+                    : gatewayStatus.state === 'error'
+                    ? 'destructive'
+                    : 'secondary'
+                }
+              >
+                {gatewayStatus.state}
+              </Badge>
+              <Button variant="outline" size="sm" onClick={restartGateway}>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Restart
+              </Button>
+            </div>
+          </div>
+          
+          <Separator />
+          
+          <div className="flex items-center justify-between">
+            <div>
+              <Label>Auto-start Gateway</Label>
+              <p className="text-sm text-muted-foreground">
+                Start Gateway when ClawX launches
+              </p>
+            </div>
+            <Switch
+              checked={gatewayAutoStart}
+              onCheckedChange={setGatewayAutoStart}
+            />
+          </div>
+        </CardContent>
+      </Card>
+      
+      {/* Updates */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Updates</CardTitle>
+          <CardDescription>Keep ClawX up to date</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between p-4 rounded-lg border">
+            <div>
+              <p className="font-medium">ClawX</p>
+              <p className="text-sm text-muted-foreground">
+                Version {appVersion}
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={handleCheckUpdate}
+              disabled={checkingUpdate}
+            >
+              {checkingUpdate ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Checking...
+                </>
+              ) : (
+                'Check for Updates'
+              )}
+            </Button>
+          </div>
+          
+          <Separator />
+          
+          <div className="flex items-center justify-between">
+            <div>
+              <Label>Auto-check for updates</Label>
+              <p className="text-sm text-muted-foreground">
+                Check for updates on startup
+              </p>
+            </div>
+            <Switch
+              checked={autoCheckUpdate}
+              onCheckedChange={setAutoCheckUpdate}
+            />
+          </div>
+          
+          <div className="flex items-center justify-between">
+            <div>
+              <Label>Auto-download updates</Label>
+              <p className="text-sm text-muted-foreground">
+                Download updates in the background
+              </p>
+            </div>
+            <Switch
+              checked={autoDownloadUpdate}
+              onCheckedChange={setAutoDownloadUpdate}
+            />
+          </div>
+        </CardContent>
+      </Card>
+      
+      {/* Developer */}
+      {devModeUnlocked && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Developer</CardTitle>
+            <CardDescription>Advanced options for developers</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label>OpenClaw Console</Label>
+              <p className="text-sm text-muted-foreground">
+                Access the native OpenClaw management interface
+              </p>
+              <Button variant="outline" onClick={openDevConsole}>
+                <Terminal className="h-4 w-4 mr-2" />
+                Open Developer Console
+                <ExternalLink className="h-3 w-3 ml-2" />
+              </Button>
+              <p className="text-xs text-muted-foreground">
+                Opens http://localhost:18789 in your browser
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+      
+      {/* About */}
+      <Card>
+        <CardHeader>
+          <CardTitle>About</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>
+            <strong>ClawX</strong> - Graphical AI Assistant
+          </p>
+          <p>Based on OpenClaw</p>
+          <p>Version {appVersion}</p>
+          <div className="flex gap-4 pt-2">
+            <Button
+              variant="link"
+              className="h-auto p-0"
+              onClick={() => window.electron.openExternal('https://docs.clawx.app')}
+            >
+              Documentation
+            </Button>
+            <Button
+              variant="link"
+              className="h-auto p-0"
+              onClick={() => window.electron.openExternal('https://github.com/clawx/clawx')}
+            >
+              GitHub
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default Settings;
--- a/src/pages/Setup/index.tsx
+++ b/src/pages/Setup/index.tsx
@@ -0,0 +1,323 @@
+/**
+ * Setup Wizard Page
+ * First-time setup experience for new users
+ */
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface SetupStep {
+  id: string;
+  title: string;
+  description: string;
+}
+
+const steps: SetupStep[] = [
+  {
+    id: 'welcome',
+    title: 'Welcome to ClawX',
+    description: 'Your AI assistant is ready to be configured',
+  },
+  {
+    id: 'runtime',
+    title: 'Environment Check',
+    description: 'Verifying system requirements',
+  },
+  {
+    id: 'provider',
+    title: 'AI Provider',
+    description: 'Configure your AI service',
+  },
+  {
+    id: 'channel',
+    title: 'Connect Channel',
+    description: 'Link a messaging app',
+  },
+  {
+    id: 'skills',
+    title: 'Choose Skills',
+    description: 'Select your skill bundles',
+  },
+  {
+    id: 'complete',
+    title: 'All Set!',
+    description: 'ClawX is ready to use',
+  },
+];
+
+export function Setup() {
+  const navigate = useNavigate();
+  const [currentStep, setCurrentStep] = useState(0);
+  
+  const step = steps[currentStep];
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === steps.length - 1;
+  
+  const handleNext = () => {
+    if (isLastStep) {
+      // Complete setup and go to dashboard
+      navigate('/');
+    } else {
+      setCurrentStep((i) => i + 1);
+    }
+  };
+  
+  const handleBack = () => {
+    setCurrentStep((i) => Math.max(i - 1, 0));
+  };
+  
+  const handleSkip = () => {
+    navigate('/');
+  };
+  
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
+      {/* Progress Indicator */}
+      <div className="flex justify-center pt-8">
+        <div className="flex items-center gap-2">
+          {steps.map((s, i) => (
+            <div key={s.id} className="flex items-center">
+              <div
+                className={cn(
+                  'flex h-8 w-8 items-center justify-center rounded-full border-2 transition-colors',
+                  i < currentStep
+                    ? 'border-primary bg-primary text-primary-foreground'
+                    : i === currentStep
+                    ? 'border-primary text-primary'
+                    : 'border-slate-600 text-slate-600'
+                )}
+              >
+                {i < currentStep ? (
+                  <Check className="h-4 w-4" />
+                ) : (
+                  <span className="text-sm">{i + 1}</span>
+                )}
+              </div>
+              {i < steps.length - 1 && (
+                <div
+                  className={cn(
+                    'h-0.5 w-8 transition-colors',
+                    i < currentStep ? 'bg-primary' : 'bg-slate-600'
+                  )}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      
+      {/* Step Content */}
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={step.id}
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -20 }}
+          className="mx-auto max-w-2xl p-8"
+        >
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold mb-2">{step.title}</h1>
+            <p className="text-slate-400">{step.description}</p>
+          </div>
+          
+          {/* Step-specific content */}
+          <div className="rounded-xl bg-white/10 backdrop-blur p-8 mb-8">
+            {currentStep === 0 && <WelcomeContent />}
+            {currentStep === 1 && <RuntimeContent />}
+            {currentStep === 2 && <ProviderContent />}
+            {currentStep === 3 && <ChannelContent />}
+            {currentStep === 4 && <SkillsContent />}
+            {currentStep === 5 && <CompleteContent />}
+          </div>
+          
+          {/* Navigation */}
+          <div className="flex justify-between">
+            <div>
+              {!isFirstStep && (
+                <Button variant="ghost" onClick={handleBack}>
+                  <ChevronLeft className="h-4 w-4 mr-2" />
+                  Back
+                </Button>
+              )}
+            </div>
+            <div className="flex gap-2">
+              {!isLastStep && (
+                <Button variant="ghost" onClick={handleSkip}>
+                  Skip Setup
+                </Button>
+              )}
+              <Button onClick={handleNext}>
+                {isLastStep ? (
+                  'Get Started'
+                ) : (
+                  <>
+                    Next
+                    <ChevronRight className="h-4 w-4 ml-2" />
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// Step content components (simplified versions)
+function WelcomeContent() {
+  return (
+    <div className="text-center space-y-4">
+      <div className="text-6xl mb-4">🤖</div>
+      <h2 className="text-xl font-semibold">Welcome to ClawX</h2>
+      <p className="text-slate-300">
+        ClawX is a graphical interface for OpenClaw, making it easy to use AI
+        assistants across your favorite messaging platforms.
+      </p>
+      <ul className="text-left space-y-2 text-slate-300">
+        <li>✅ Zero command-line required</li>
+        <li>✅ Modern, beautiful interface</li>
+        <li>✅ Pre-installed skill bundles</li>
+        <li>✅ Cross-platform support</li>
+      </ul>
+    </div>
+  );
+}
+
+function RuntimeContent() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">Checking Environment</h2>
+      <div className="space-y-3">
+        <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
+          <span>Node.js Runtime</span>
+          <span className="text-green-400">✓ Installed</span>
+        </div>
+        <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
+          <span>OpenClaw Package</span>
+          <span className="text-green-400">✓ Ready</span>
+        </div>
+        <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
+          <span>Gateway Service</span>
+          <span className="text-green-400">✓ Running</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProviderContent() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">Select AI Provider</h2>
+      <p className="text-slate-300">
+        Choose your preferred AI model provider
+      </p>
+      <div className="grid grid-cols-3 gap-4">
+        {[
+          { id: 'anthropic', name: 'Anthropic', model: 'Claude', icon: '🤖' },
+          { id: 'openai', name: 'OpenAI', model: 'GPT-4', icon: '💚' },
+          { id: 'google', name: 'Google', model: 'Gemini', icon: '🔷' },
+        ].map((provider) => (
+          <button
+            key={provider.id}
+            className="p-4 rounded-lg bg-white/5 hover:bg-white/10 transition-colors text-center"
+          >
+            <span className="text-3xl">{provider.icon}</span>
+            <p className="font-medium mt-2">{provider.name}</p>
+            <p className="text-sm text-slate-400">{provider.model}</p>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ChannelContent() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">Connect a Channel</h2>
+      <p className="text-slate-300">
+        Link a messaging app to start chatting with your AI
+      </p>
+      <div className="grid grid-cols-2 gap-4">
+        {[
+          { type: 'whatsapp', name: 'WhatsApp', icon: '📱' },
+          { type: 'telegram', name: 'Telegram', icon: '✈️' },
+          { type: 'discord', name: 'Discord', icon: '🎮' },
+          { type: 'slack', name: 'Slack', icon: '💼' },
+        ].map((channel) => (
+          <button
+            key={channel.type}
+            className="p-4 rounded-lg bg-white/5 hover:bg-white/10 transition-colors flex items-center gap-3"
+          >
+            <span className="text-2xl">{channel.icon}</span>
+            <span className="font-medium">{channel.name}</span>
+          </button>
+        ))}
+      </div>
+      <p className="text-sm text-slate-400 text-center">
+        You can add more channels later in Settings
+      </p>
+    </div>
+  );
+}
+
+function SkillsContent() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">Choose Skill Bundles</h2>
+      <p className="text-slate-300">
+        Select pre-configured skill packages
+      </p>
+      <div className="grid grid-cols-2 gap-4">
+        {[
+          { id: 'productivity', name: 'Productivity', icon: '📋', recommended: true },
+          { id: 'developer', name: 'Developer', icon: '💻', recommended: true },
+          { id: 'smart-home', name: 'Smart Home', icon: '🏠' },
+          { id: 'media', name: 'Media', icon: '🎨' },
+        ].map((bundle) => (
+          <button
+            key={bundle.id}
+            className={cn(
+              'p-4 rounded-lg bg-white/5 hover:bg-white/10 transition-colors text-left relative',
+              bundle.recommended && 'ring-2 ring-primary'
+            )}
+          >
+            <span className="text-2xl">{bundle.icon}</span>
+            <p className="font-medium mt-2">{bundle.name}</p>
+            {bundle.recommended && (
+              <span className="absolute top-2 right-2 text-xs bg-primary px-2 py-0.5 rounded">
+                Recommended
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CompleteContent() {
+  return (
+    <div className="text-center space-y-4">
+      <div className="text-6xl mb-4">🎉</div>
+      <h2 className="text-xl font-semibold">Setup Complete!</h2>
+      <p className="text-slate-300">
+        ClawX is configured and ready to use. You can now start chatting with
+        your AI assistant.
+      </p>
+      <div className="space-y-2 text-slate-300">
+        <p>✅ AI Provider configured</p>
+        <p>✅ Channel connected</p>
+        <p>✅ Skills enabled</p>
+        <p>✅ Gateway running</p>
+      </div>
+    </div>
+  );
+}
+
+export default Setup;
--- a/src/pages/Skills/index.tsx
+++ b/src/pages/Skills/index.tsx
@@ -0,0 +1,198 @@
+/**
+ * Skills Page
+ * Browse and manage AI skills
+ */
+import { useEffect, useState } from 'react';
+import { Search, Puzzle, RefreshCw, Lock } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
+import { useSkillsStore } from '@/stores/skills';
+import { LoadingSpinner } from '@/components/common/LoadingSpinner';
+import { cn } from '@/lib/utils';
+import type { SkillCategory } from '@/types/skill';
+
+const categoryLabels: Record<SkillCategory, string> = {
+  productivity: 'Productivity',
+  developer: 'Developer',
+  'smart-home': 'Smart Home',
+  media: 'Media',
+  communication: 'Communication',
+  security: 'Security',
+  information: 'Information',
+  utility: 'Utility',
+  custom: 'Custom',
+};
+
+export function Skills() {
+  const { skills, loading, error, fetchSkills, enableSkill, disableSkill } = useSkillsStore();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<SkillCategory | 'all'>('all');
+  
+  // Fetch skills on mount
+  useEffect(() => {
+    fetchSkills();
+  }, [fetchSkills]);
+  
+  // Filter skills
+  const filteredSkills = skills.filter((skill) => {
+    const matchesSearch = skill.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      skill.description.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesCategory = selectedCategory === 'all' || skill.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+  
+  // Get unique categories
+  const categories = Array.from(new Set(skills.map((s) => s.category)));
+  
+  // Handle toggle
+  const handleToggle = async (skillId: string, enabled: boolean) => {
+    try {
+      if (enabled) {
+        await disableSkill(skillId);
+      } else {
+        await enableSkill(skillId);
+      }
+    } catch (error) {
+      // Error handled in store
+    }
+  };
+  
+  if (loading) {
+    return (
+      <div className="flex h-96 items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+  
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Skills</h1>
+          <p className="text-muted-foreground">
+            Browse and manage AI skills
+          </p>
+        </div>
+        <Button variant="outline" onClick={fetchSkills}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+      
+      {/* Search and Filter */}
+      <div className="flex gap-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search skills..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex gap-2 flex-wrap">
+          <Button
+            variant={selectedCategory === 'all' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setSelectedCategory('all')}
+          >
+            All
+          </Button>
+          {categories.map((category) => (
+            <Button
+              key={category}
+              variant={selectedCategory === category ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setSelectedCategory(category)}
+            >
+              {categoryLabels[category]}
+            </Button>
+          ))}
+        </div>
+      </div>
+      
+      {/* Error Display */}
+      {error && (
+        <Card className="border-destructive">
+          <CardContent className="py-4 text-destructive">
+            {error}
+          </CardContent>
+        </Card>
+      )}
+      
+      {/* Skills Grid */}
+      {filteredSkills.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Puzzle className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium mb-2">No skills found</h3>
+            <p className="text-muted-foreground">
+              {searchQuery ? 'Try a different search term' : 'No skills available'}
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {filteredSkills.map((skill) => (
+            <Card key={skill.id} className={cn(skill.enabled && 'border-primary/50')}>
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <span className="text-2xl">{skill.icon || '🔧'}</span>
+                    <div>
+                      <CardTitle className="text-base flex items-center gap-2">
+                        {skill.name}
+                        {skill.isCore && (
+                          <Lock className="h-3 w-3 text-muted-foreground" />
+                        )}
+                      </CardTitle>
+                      <CardDescription className="text-xs">
+                        {categoryLabels[skill.category]}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <Switch
+                    checked={skill.enabled}
+                    onCheckedChange={() => handleToggle(skill.id, skill.enabled)}
+                    disabled={skill.isCore}
+                  />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground line-clamp-2">
+                  {skill.description}
+                </p>
+                {skill.version && (
+                  <Badge variant="outline" className="mt-2 text-xs">
+                    v{skill.version}
+                  </Badge>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+      
+      {/* Statistics */}
+      <Card>
+        <CardContent className="py-4">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">
+              {skills.filter((s) => s.enabled).length} of {skills.length} skills enabled
+            </span>
+            <span className="text-muted-foreground">
+              {skills.filter((s) => s.isCore).length} core skills
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default Skills;
--- a/src/stores/channels.ts
+++ b/src/stores/channels.ts
@@ -0,0 +1,90 @@
+/**
+ * Channels State Store
+ * Manages messaging channel state
+ */
+import { create } from 'zustand';
+import type { Channel } from '../types/channel';
+
+interface ChannelsState {
+  channels: Channel[];
+  loading: boolean;
+  error: string | null;
+  
+  // Actions
+  fetchChannels: () => Promise<void>;
+  connectChannel: (channelId: string) => Promise<void>;
+  disconnectChannel: (channelId: string) => Promise<void>;
+  setChannels: (channels: Channel[]) => void;
+  updateChannel: (channelId: string, updates: Partial<Channel>) => void;
+}
+
+export const useChannelsStore = create<ChannelsState>((set, get) => ({
+  channels: [],
+  loading: false,
+  error: null,
+  
+  fetchChannels: async () => {
+    set({ loading: true, error: null });
+    
+    try {
+      const result = await window.electron.ipcRenderer.invoke(
+        'gateway:rpc',
+        'channels.list'
+      ) as { success: boolean; result?: Channel[]; error?: string };
+      
+      if (result.success && result.result) {
+        set({ channels: result.result, loading: false });
+      } else {
+        set({ error: result.error || 'Failed to fetch channels', loading: false });
+      }
+    } catch (error) {
+      set({ error: String(error), loading: false });
+    }
+  },
+  
+  connectChannel: async (channelId) => {
+    const { updateChannel } = get();
+    updateChannel(channelId, { status: 'connecting' });
+    
+    try {
+      const result = await window.electron.ipcRenderer.invoke(
+        'gateway:rpc',
+        'channels.connect',
+        { channelId }
+      ) as { success: boolean; error?: string };
+      
+      if (result.success) {
+        updateChannel(channelId, { status: 'connected' });
+      } else {
+        updateChannel(channelId, { status: 'error', error: result.error });
+      }
+    } catch (error) {
+      updateChannel(channelId, { status: 'error', error: String(error) });
+    }
+  },
+  
+  disconnectChannel: async (channelId) => {
+    try {
+      await window.electron.ipcRenderer.invoke(
+        'gateway:rpc',
+        'channels.disconnect',
+        { channelId }
+      );
+      
+      const { updateChannel } = get();
+      updateChannel(channelId, { status: 'disconnected' });
+    } catch (error) {
+      console.error('Failed to disconnect channel:', error);
+    }
+  },
+  
+  setChannels: (channels) => set({ channels }),
+  
+  updateChannel: (channelId, updates) => {
+    set((state) => ({
+      channels: state.channels.map((channel) =>
+        channel.id === channelId ? { ...channel, ...updates } : channel
+      ),
+    }));
+  },
+}));
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -0,0 +1,129 @@
+/**
+ * Chat State Store
+ * Manages chat messages and conversation state
+ */
+import { create } from 'zustand';
+
+/**
+ * Tool call in a message
+ */
+interface ToolCall {
+  id: string;
+  name: string;
+  arguments: Record<string, unknown>;
+  result?: unknown;
+  status: 'pending' | 'running' | 'completed' | 'error';
+}
+
+/**
+ * Chat message
+ */
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: string;
+  channel?: string;
+  toolCalls?: ToolCall[];
+}
+
+interface ChatState {
+  messages: ChatMessage[];
+  loading: boolean;
+  sending: boolean;
+  error: string | null;
+  
+  // Actions
+  fetchHistory: (limit?: number) => Promise<void>;
+  sendMessage: (content: string, channelId?: string) => Promise<void>;
+  clearHistory: () => Promise<void>;
+  addMessage: (message: ChatMessage) => void;
+  updateMessage: (messageId: string, updates: Partial<ChatMessage>) => void;
+  setMessages: (messages: ChatMessage[]) => void;
+}
+
+export const useChatStore = create<ChatState>((set, get) => ({
+  messages: [],
+  loading: false,
+  sending: false,
+  error: null,
+  
+  fetchHistory: async (limit = 50) => {
+    set({ loading: true, error: null });
+    
+    try {
+      const result = await window.electron.ipcRenderer.invoke(
+        'gateway:rpc',
+        'chat.history',
+        { limit, offset: 0 }
+      ) as { success: boolean; result?: ChatMessage[]; error?: string };
+      
+      if (result.success && result.result) {
+        set({ messages: result.result, loading: false });
+      } else {
+        set({ error: result.error || 'Failed to fetch history', loading: false });
+      }
+    } catch (error) {
+      set({ error: String(error), loading: false });
+    }
+  },
+  
+  sendMessage: async (content, channelId) => {
+    const { addMessage } = get();
+    
+    // Add user message immediately
+    const userMessage: ChatMessage = {
+      id: crypto.randomUUID(),
+      role: 'user',
+      content,
+      timestamp: new Date().toISOString(),
+      channel: channelId,
+    };
+    addMessage(userMessage);
+    
+    set({ sending: true, error: null });
+    
+    try {
+      const result = await window.electron.ipcRenderer.invoke(
+        'gateway:rpc',
+        'chat.send',
+        { content, channelId }
+      ) as { success: boolean; result?: ChatMessage; error?: string };
+      
+      if (result.success && result.result) {
+        addMessage(result.result);
+      } else {
+        set({ error: result.error || 'Failed to send message' });
+      }
+    } catch (error) {
+      set({ error: String(error) });
+    } finally {
+      set({ sending: false });
+    }
+  },
+  
+  clearHistory: async () => {
+    try {
+      await window.electron.ipcRenderer.invoke('gateway:rpc', 'chat.clear');
+      set({ messages: [] });
+    } catch (error) {
+      console.error('Failed to clear history:', error);
+    }
+  },
+  
+  addMessage: (message) => {
+    set((state) => ({
+      messages: [...state.messages, message],
+    }));
+  },
+  
+  updateMessage: (messageId, updates) => {
+    set((state) => ({
+      messages: state.messages.map((msg) =>
+        msg.id === messageId ? { ...msg, ...updates } : msg
+      ),
+    }));
+  },
+  
+  setMessages: (messages) => set({ messages }),
+}));
--- a/src/stores/cron.ts
+++ b/src/stores/cron.ts
@@ -0,0 +1,100 @@
+/**
+ * Cron State Store
+ * Manages scheduled task state
+ */
+import { create } from 'zustand';
+import type { CronJob, CronJobCreateInput, CronJobUpdateInput } from '../types/cron';
+
+interface CronState {
+  jobs: CronJob[];
+  loading: boolean;
+  error: string | null;
+  
+  // Actions
+  fetchJobs: () => Promise<void>;
+  createJob: (input: CronJobCreateInput) => Promise<CronJob>;
+  updateJob: (id: string, input: CronJobUpdateInput) => Promise<void>;
+  deleteJob: (id: string) => Promise<void>;
+  toggleJob: (id: string, enabled: boolean) => Promise<void>;
+  triggerJob: (id: string) => Promise<void>;
+  setJobs: (jobs: CronJob[]) => void;
+}
+
+export const useCronStore = create<CronState>((set, get) => ({
+  jobs: [],
+  loading: false,
+  error: null,
+  
+  fetchJobs: async () => {
+    set({ loading: true, error: null });
+    
+    try {
+      const result = await window.electron.ipcRenderer.invoke('cron:list') as CronJob[];
+      set({ jobs: result, loading: false });
+    } catch (error) {
+      set({ error: String(error), loading: false });
+    }
+  },
+  
+  createJob: async (input) => {
+    try {
+      const job = await window.electron.ipcRenderer.invoke('cron:create', input) as CronJob;
+      set((state) => ({ jobs: [...state.jobs, job] }));
+      return job;
+    } catch (error) {
+      console.error('Failed to create cron job:', error);
+      throw error;
+    }
+  },
+  
+  updateJob: async (id, input) => {
+    try {
+      await window.electron.ipcRenderer.invoke('cron:update', id, input);
+      set((state) => ({
+        jobs: state.jobs.map((job) =>
+          job.id === id ? { ...job, ...input, updatedAt: new Date().toISOString() } : job
+        ),
+      }));
+    } catch (error) {
+      console.error('Failed to update cron job:', error);
+      throw error;
+    }
+  },
+  
+  deleteJob: async (id) => {
+    try {
+      await window.electron.ipcRenderer.invoke('cron:delete', id);
+      set((state) => ({
+        jobs: state.jobs.filter((job) => job.id !== id),
+      }));
+    } catch (error) {
+      console.error('Failed to delete cron job:', error);
+      throw error;
+    }
+  },
+  
+  toggleJob: async (id, enabled) => {
+    try {
+      await window.electron.ipcRenderer.invoke('cron:toggle', id, enabled);
+      set((state) => ({
+        jobs: state.jobs.map((job) =>
+          job.id === id ? { ...job, enabled } : job
+        ),
+      }));
+    } catch (error) {
+      console.error('Failed to toggle cron job:', error);
+      throw error;
+    }
+  },
+  
+  triggerJob: async (id) => {
+    try {
+      await window.electron.ipcRenderer.invoke('cron:trigger', id);
+    } catch (error) {
+      console.error('Failed to trigger cron job:', error);
+      throw error;
+    }
+  },
+  
+  setJobs: (jobs) => set({ jobs }),
+}));
--- a/src/stores/gateway.ts
+++ b/src/stores/gateway.ts
@@ -0,0 +1,73 @@
+/**
+ * Gateway State Store
+ * Manages Gateway connection state
+ */
+import { create } from 'zustand';
+import type { GatewayStatus } from '../types/gateway';
+
+interface GatewayState {
+  status: GatewayStatus;
+  isInitialized: boolean;
+  
+  // Actions
+  init: () => Promise<void>;
+  start: () => Promise<void>;
+  stop: () => Promise<void>;
+  restart: () => Promise<void>;
+  setStatus: (status: GatewayStatus) => void;
+}
+
+export const useGatewayStore = create<GatewayState>((set, get) => ({
+  status: {
+    state: 'stopped',
+    port: 18789,
+  },
+  isInitialized: false,
+  
+  init: async () => {
+    if (get().isInitialized) return;
+    
+    try {
+      // Get initial status
+      const status = await window.electron.ipcRenderer.invoke('gateway:status') as GatewayStatus;
+      set({ status, isInitialized: true });
+      
+      // Listen for status changes
+      window.electron.ipcRenderer.on('gateway:status-changed', (newStatus) => {
+        set({ status: newStatus as GatewayStatus });
+      });
+    } catch (error) {
+      console.error('Failed to initialize Gateway:', error);
+    }
+  },
+  
+  start: async () => {
+    try {
+      set({ status: { ...get().status, state: 'starting' } });
+      const result = await window.electron.ipcRenderer.invoke('gateway:start') as { success: boolean; error?: string };
+      
+      if (!result.success) {
+        set({ status: { ...get().status, state: 'error', error: result.error } });
+      }
+    } catch (error) {
+      set({ status: { ...get().status, state: 'error', error: String(error) } });
+    }
+  },
+  
+  stop: async () => {
+    try {
+      await window.electron.ipcRenderer.invoke('gateway:stop');
+      set({ status: { ...get().status, state: 'stopped' } });
+    } catch (error) {
+      console.error('Failed to stop Gateway:', error);
+    }
+  },
+  
+  restart: async () => {
+    const { stop, start } = get();
+    await stop();
+    await start();
+  },
+  
+  setStatus: (status) => set({ status }),
+}));
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -0,0 +1,82 @@
+/**
+ * Settings State Store
+ * Manages application settings
+ */
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type Theme = 'light' | 'dark' | 'system';
+type UpdateChannel = 'stable' | 'beta' | 'dev';
+
+interface SettingsState {
+  // General
+  theme: Theme;
+  language: string;
+  startMinimized: boolean;
+  launchAtStartup: boolean;
+  
+  // Gateway
+  gatewayAutoStart: boolean;
+  gatewayPort: number;
+  
+  // Update
+  updateChannel: UpdateChannel;
+  autoCheckUpdate: boolean;
+  autoDownloadUpdate: boolean;
+  
+  // UI State
+  sidebarCollapsed: boolean;
+  devModeUnlocked: boolean;
+  
+  // Actions
+  setTheme: (theme: Theme) => void;
+  setLanguage: (language: string) => void;
+  setStartMinimized: (value: boolean) => void;
+  setLaunchAtStartup: (value: boolean) => void;
+  setGatewayAutoStart: (value: boolean) => void;
+  setGatewayPort: (port: number) => void;
+  setUpdateChannel: (channel: UpdateChannel) => void;
+  setAutoCheckUpdate: (value: boolean) => void;
+  setAutoDownloadUpdate: (value: boolean) => void;
+  setSidebarCollapsed: (value: boolean) => void;
+  setDevModeUnlocked: (value: boolean) => void;
+  resetSettings: () => void;
+}
+
+const defaultSettings = {
+  theme: 'system' as Theme,
+  language: 'en',
+  startMinimized: false,
+  launchAtStartup: false,
+  gatewayAutoStart: true,
+  gatewayPort: 18789,
+  updateChannel: 'stable' as UpdateChannel,
+  autoCheckUpdate: true,
+  autoDownloadUpdate: false,
+  sidebarCollapsed: false,
+  devModeUnlocked: false,
+};
+
+export const useSettingsStore = create<SettingsState>()(
+  persist(
+    (set) => ({
+      ...defaultSettings,
+      
+      setTheme: (theme) => set({ theme }),
+      setLanguage: (language) => set({ language }),
+      setStartMinimized: (startMinimized) => set({ startMinimized }),
+      setLaunchAtStartup: (launchAtStartup) => set({ launchAtStartup }),
+      setGatewayAutoStart: (gatewayAutoStart) => set({ gatewayAutoStart }),
+      setGatewayPort: (gatewayPort) => set({ gatewayPort }),
+      setUpdateChannel: (updateChannel) => set({ updateChannel }),
+      setAutoCheckUpdate: (autoCheckUpdate) => set({ autoCheckUpdate }),
+      setAutoDownloadUpdate: (autoDownloadUpdate) => set({ autoDownloadUpdate }),
+      setSidebarCollapsed: (sidebarCollapsed) => set({ sidebarCollapsed }),
+      setDevModeUnlocked: (devModeUnlocked) => set({ devModeUnlocked }),
+      resetSettings: () => set(defaultSettings),
+    }),
+    {
+      name: 'clawx-settings',
+    }
+  )
+);
--- a/src/stores/skills.ts
+++ b/src/stores/skills.ts
@@ -0,0 +1,102 @@
+/**
+ * Skills State Store
+ * Manages skill/plugin state
+ */
+import { create } from 'zustand';
+import type { Skill } from '../types/skill';
+
+interface SkillsState {
+  skills: Skill[];
+  loading: boolean;
+  error: string | null;
+  
+  // Actions
+  fetchSkills: () => Promise<void>;
+  enableSkill: (skillId: string) => Promise<void>;
+  disableSkill: (skillId: string) => Promise<void>;
+  setSkills: (skills: Skill[]) => void;
+  updateSkill: (skillId: string, updates: Partial<Skill>) => void;
+}
+
+export const useSkillsStore = create<SkillsState>((set, get) => ({
+  skills: [],
+  loading: false,
+  error: null,
+  
+  fetchSkills: async () => {
+    set({ loading: true, error: null });
+    
+    try {
+      const result = await window.electron.ipcRenderer.invoke(
+        'gateway:rpc',
+        'skills.list'
+      ) as { success: boolean; result?: Skill[]; error?: string };
+      
+      if (result.success && result.result) {
+        set({ skills: result.result, loading: false });
+      } else {
+        set({ error: result.error || 'Failed to fetch skills', loading: false });
+      }
+    } catch (error) {
+      set({ error: String(error), loading: false });
+    }
+  },
+  
+  enableSkill: async (skillId) => {
+    const { updateSkill } = get();
+    
+    try {
+      const result = await window.electron.ipcRenderer.invoke(
+        'gateway:rpc',
+        'skills.enable',
+        { skillId }
+      ) as { success: boolean; error?: string };
+      
+      if (result.success) {
+        updateSkill(skillId, { enabled: true });
+      } else {
+        throw new Error(result.error || 'Failed to enable skill');
+      }
+    } catch (error) {
+      console.error('Failed to enable skill:', error);
+      throw error;
+    }
+  },
+  
+  disableSkill: async (skillId) => {
+    const { updateSkill, skills } = get();
+    
+    // Check if skill is a core skill
+    const skill = skills.find((s) => s.id === skillId);
+    if (skill?.isCore) {
+      throw new Error('Cannot disable core skill');
+    }
+    
+    try {
+      const result = await window.electron.ipcRenderer.invoke(
+        'gateway:rpc',
+        'skills.disable',
+        { skillId }
+      ) as { success: boolean; error?: string };
+      
+      if (result.success) {
+        updateSkill(skillId, { enabled: false });
+      } else {
+        throw new Error(result.error || 'Failed to disable skill');
+      }
+    } catch (error) {
+      console.error('Failed to disable skill:', error);
+      throw error;
+    }
+  },
+  
+  setSkills: (skills) => set({ skills }),
+  
+  updateSkill: (skillId, updates) => {
+    set((state) => ({
+      skills: state.skills.map((skill) =>
+        skill.id === skillId ? { ...skill, ...updates } : skill
+      ),
+    }));
+  },
+}));
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -0,0 +1,97 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-border rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-muted-foreground/30;
+}
+
+/* macOS traffic light spacing */
+.drag-region {
+  -webkit-app-region: drag;
+}
+
+.no-drag {
+  -webkit-app-region: no-drag;
+}
+
+/* Smooth transitions */
+.transition-theme {
+  @apply transition-colors duration-200;
+}
+
+/* Focus ring */
+.focus-ring {
+  @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
+}
--- a/src/types/channel.ts
+++ b/src/types/channel.ts
@@ -0,0 +1,74 @@
+/**
+ * Channel Type Definitions
+ * Types for messaging channels (WhatsApp, Telegram, etc.)
+ */
+
+/**
+ * Supported channel types
+ */
+export type ChannelType = 'whatsapp' | 'telegram' | 'discord' | 'slack' | 'wechat';
+
+/**
+ * Channel connection status
+ */
+export type ChannelStatus = 'connected' | 'disconnected' | 'connecting' | 'error';
+
+/**
+ * Channel data structure
+ */
+export interface Channel {
+  id: string;
+  type: ChannelType;
+  name: string;
+  status: ChannelStatus;
+  lastActivity?: string;
+  error?: string;
+  avatar?: string;
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * Channel configuration for each type
+ */
+export interface ChannelConfig {
+  whatsapp: {
+    phoneNumber?: string;
+  };
+  telegram: {
+    botToken?: string;
+    chatId?: string;
+  };
+  discord: {
+    botToken?: string;
+    guildId?: string;
+  };
+  slack: {
+    botToken?: string;
+    appToken?: string;
+  };
+  wechat: {
+    appId?: string;
+  };
+}
+
+/**
+ * Channel icons mapping
+ */
+export const CHANNEL_ICONS: Record<ChannelType, string> = {
+  whatsapp: '📱',
+  telegram: '✈️',
+  discord: '🎮',
+  slack: '💼',
+  wechat: '💬',
+};
+
+/**
+ * Channel display names
+ */
+export const CHANNEL_NAMES: Record<ChannelType, string> = {
+  whatsapp: 'WhatsApp',
+  telegram: 'Telegram',
+  discord: 'Discord',
+  slack: 'Slack',
+  wechat: 'WeChat',
+};
--- a/src/types/cron.ts
+++ b/src/types/cron.ts
@@ -0,0 +1,68 @@
+/**
+ * Cron Job Type Definitions
+ * Types for scheduled tasks
+ */
+
+import { ChannelType } from './channel';
+
+/**
+ * Cron job target (where to send the result)
+ */
+export interface CronJobTarget {
+  channelType: ChannelType;
+  channelId: string;
+  channelName: string;
+}
+
+/**
+ * Cron job last run info
+ */
+export interface CronJobLastRun {
+  time: string;
+  success: boolean;
+  error?: string;
+  duration?: number;
+}
+
+/**
+ * Cron job data structure
+ */
+export interface CronJob {
+  id: string;
+  name: string;
+  message: string;
+  schedule: string;
+  target: CronJobTarget;
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+  lastRun?: CronJobLastRun;
+  nextRun?: string;
+}
+
+/**
+ * Input for creating a cron job
+ */
+export interface CronJobCreateInput {
+  name: string;
+  message: string;
+  schedule: string;
+  target: CronJobTarget;
+  enabled?: boolean;
+}
+
+/**
+ * Input for updating a cron job
+ */
+export interface CronJobUpdateInput {
+  name?: string;
+  message?: string;
+  schedule?: string;
+  target?: CronJobTarget;
+  enabled?: boolean;
+}
+
+/**
+ * Schedule type for UI picker
+ */
+export type ScheduleType = 'daily' | 'weekly' | 'monthly' | 'interval' | 'custom';
--- a/src/types/electron.d.ts
+++ b/src/types/electron.d.ts
@@ -0,0 +1,26 @@
+/**
+ * Electron API Type Declarations
+ * Types for the APIs exposed via contextBridge
+ */
+
+export interface IpcRenderer {
+  invoke(channel: string, ...args: unknown[]): Promise<unknown>;
+  on(channel: string, callback: (...args: unknown[]) => void): (() => void) | void;
+  once(channel: string, callback: (...args: unknown[]) => void): void;
+  off(channel: string, callback?: (...args: unknown[]) => void): void;
+}
+
+export interface ElectronAPI {
+  ipcRenderer: IpcRenderer;
+  openExternal: (url: string) => Promise<void>;
+  platform: NodeJS.Platform;
+  isDev: boolean;
+}
+
+declare global {
+  interface Window {
+    electron: ElectronAPI;
+  }
+}
+
+export {};
--- a/src/types/gateway.ts
+++ b/src/types/gateway.ts
@@ -0,0 +1,25 @@
+/**
+ * Gateway Type Definitions
+ * Types for Gateway communication and data structures
+ */
+
+/**
+ * Gateway connection status
+ */
+export interface GatewayStatus {
+  state: 'stopped' | 'starting' | 'running' | 'error';
+  port: number;
+  pid?: number;
+  uptime?: number;
+  error?: string;
+  connectedAt?: number;
+}
+
+/**
+ * Gateway RPC response
+ */
+export interface GatewayRpcResponse<T = unknown> {
+  success: boolean;
+  result?: T;
+  error?: string;
+}
--- a/src/types/skill.ts
+++ b/src/types/skill.ts
@@ -0,0 +1,64 @@
+/**
+ * Skill Type Definitions
+ * Types for skills/plugins
+ */
+
+/**
+ * Skill category
+ */
+export type SkillCategory =
+  | 'productivity'
+  | 'developer'
+  | 'smart-home'
+  | 'media'
+  | 'communication'
+  | 'security'
+  | 'information'
+  | 'utility'
+  | 'custom';
+
+/**
+ * Skill data structure
+ */
+export interface Skill {
+  id: string;
+  name: string;
+  description: string;
+  enabled: boolean;
+  category: SkillCategory;
+  icon?: string;
+  version?: string;
+  author?: string;
+  configurable?: boolean;
+  isCore?: boolean;
+  dependencies?: string[];
+}
+
+/**
+ * Skill bundle (preset skill collection)
+ */
+export interface SkillBundle {
+  id: string;
+  name: string;
+  nameZh: string;
+  description: string;
+  descriptionZh: string;
+  icon: string;
+  skills: string[];
+  recommended?: boolean;
+}
+
+/**
+ * Skill configuration schema
+ */
+export interface SkillConfigSchema {
+  type: 'object';
+  properties: Record<string, {
+    type: 'string' | 'number' | 'boolean' | 'array';
+    title?: string;
+    description?: string;
+    default?: unknown;
+    enum?: unknown[];
+  }>;
+  required?: string[];
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,74 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -0,0 +1,44 @@
+/**
+ * Vitest Test Setup
+ * Global test configuration and mocks
+ */
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+
+// Mock window.electron API
+const mockElectron = {
+  ipcRenderer: {
+    invoke: vi.fn(),
+    on: vi.fn(),
+    once: vi.fn(),
+    off: vi.fn(),
+  },
+  openExternal: vi.fn(),
+  platform: 'darwin',
+  isDev: true,
+};
+
+Object.defineProperty(window, 'electron', {
+  value: mockElectron,
+  writable: true,
+});
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Reset mocks after each test
+afterEach(() => {
+  vi.clearAllMocks();
+});
--- a/tests/unit/stores.test.ts
+++ b/tests/unit/stores.test.ts
@@ -0,0 +1,75 @@
+/**
+ * Zustand Stores Tests
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useSettingsStore } from '@/stores/settings';
+import { useGatewayStore } from '@/stores/gateway';
+
+describe('Settings Store', () => {
+  beforeEach(() => {
+    // Reset store to default state
+    useSettingsStore.setState({
+      theme: 'system',
+      language: 'en',
+      sidebarCollapsed: false,
+      devModeUnlocked: false,
+      gatewayAutoStart: true,
+      gatewayPort: 18789,
+      autoCheckUpdate: true,
+      autoDownloadUpdate: false,
+      startMinimized: false,
+      launchAtStartup: false,
+      updateChannel: 'stable',
+    });
+  });
+  
+  it('should have default values', () => {
+    const state = useSettingsStore.getState();
+    expect(state.theme).toBe('system');
+    expect(state.sidebarCollapsed).toBe(false);
+    expect(state.gatewayAutoStart).toBe(true);
+  });
+  
+  it('should update theme', () => {
+    const { setTheme } = useSettingsStore.getState();
+    setTheme('dark');
+    expect(useSettingsStore.getState().theme).toBe('dark');
+  });
+  
+  it('should toggle sidebar collapsed state', () => {
+    const { setSidebarCollapsed } = useSettingsStore.getState();
+    setSidebarCollapsed(true);
+    expect(useSettingsStore.getState().sidebarCollapsed).toBe(true);
+  });
+  
+  it('should unlock dev mode', () => {
+    const { setDevModeUnlocked } = useSettingsStore.getState();
+    setDevModeUnlocked(true);
+    expect(useSettingsStore.getState().devModeUnlocked).toBe(true);
+  });
+});
+
+describe('Gateway Store', () => {
+  beforeEach(() => {
+    // Reset store
+    useGatewayStore.setState({
+      status: { state: 'stopped', port: 18789 },
+      isInitialized: false,
+    });
+  });
+  
+  it('should have default status', () => {
+    const state = useGatewayStore.getState();
+    expect(state.status.state).toBe('stopped');
+    expect(state.status.port).toBe(18789);
+  });
+  
+  it('should update status', () => {
+    const { setStatus } = useGatewayStore.getState();
+    setStatus({ state: 'running', port: 18789, pid: 12345 });
+    
+    const state = useGatewayStore.getState();
+    expect(state.status.state).toBe('running');
+    expect(state.status.pid).toBe(12345);
+  });
+});
--- a/tests/unit/utils.test.ts
+++ b/tests/unit/utils.test.ts
@@ -0,0 +1,45 @@
+/**
+ * Utility Functions Tests
+ */
+import { describe, it, expect } from 'vitest';
+import { cn, formatRelativeTime, formatDuration, truncate } from '@/lib/utils';
+
+describe('cn (class name merge)', () => {
+  it('should merge class names', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+  });
+  
+  it('should handle conditional classes', () => {
+    expect(cn('base', true && 'active')).toBe('base active');
+    expect(cn('base', false && 'active')).toBe('base');
+  });
+  
+  it('should merge tailwind classes correctly', () => {
+    expect(cn('px-2', 'px-4')).toBe('px-4');
+    expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500');
+  });
+});
+
+describe('formatDuration', () => {
+  it('should format seconds only', () => {
+    expect(formatDuration(45)).toBe('45s');
+  });
+  
+  it('should format minutes and seconds', () => {
+    expect(formatDuration(125)).toBe('2m 5s');
+  });
+  
+  it('should format hours and minutes', () => {
+    expect(formatDuration(3725)).toBe('1h 2m');
+  });
+});
+
+describe('truncate', () => {
+  it('should not truncate short text', () => {
+    expect(truncate('Hello', 10)).toBe('Hello');
+  });
+  
+  it('should truncate long text with ellipsis', () => {
+    expect(truncate('Hello World!', 8)).toBe('Hello...');
+  });
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@electron/*": ["electron/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "outDir": "dist-electron",
+    "declaration": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@electron/*": ["electron/*"]
+    }
+  },
+  "include": ["electron", "vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,58 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import electron from 'vite-plugin-electron';
+import renderer from 'vite-plugin-electron-renderer';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    electron([
+      {
+        // Main process entry file
+        entry: 'electron/main/index.ts',
+        onstart(options) {
+          options.startup();
+        },
+        vite: {
+          build: {
+            outDir: 'dist-electron/main',
+            rollupOptions: {
+              external: ['electron', 'electron-store', 'electron-updater', 'ws'],
+            },
+          },
+        },
+      },
+      {
+        // Preload scripts entry file
+        entry: 'electron/preload/index.ts',
+        onstart(options) {
+          options.reload();
+        },
+        vite: {
+          build: {
+            outDir: 'dist-electron/preload',
+            rollupOptions: {
+              external: ['electron'],
+            },
+          },
+        },
+      },
+    ]),
+    renderer(),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+      '@electron': resolve(__dirname, 'electron'),
+    },
+  },
+  server: {
+    port: 5173,
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+});
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    include: ['tests/**/*.{test,spec}.{ts,tsx}'],
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      exclude: ['node_modules/', 'tests/'],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+      '@electron': resolve(__dirname, 'electron'),
+    },
+  },
+});