Files

Haze e02cf05baf feat(update): implement auto-update functionality with electron-updater

- Add AppUpdater module with update lifecycle management
- Create UpdateSettings UI component with progress display
- Add Progress UI component based on Radix UI
- Create update Zustand store for state management
- Register update IPC handlers in main process
- Auto-check for updates on production startup
- Add commit documentation for commits 2-6

2026-02-05 23:36:12 +08:00

3.1 KiB

Raw Blame History

Commit 3: Setup Wizard

Summary

Implement a functional multi-step setup wizard for first-run user onboarding, guiding users through environment checks, AI provider configuration, channel connection, and skill selection.

Changes

React Renderer

`src/pages/Setup/index.tsx`

Complete rewrite with functional implementation:

Step 0: Welcome - Introduction to ClawX
Step 1: Runtime Check - Verify Node.js, OpenClaw, and Gateway status
Step 2: Provider Configuration - Select AI provider and enter API key
Step 3: Channel Connection - Choose messaging channel (WhatsApp, Telegram, etc.)
Step 4: Skill Selection - Toggle predefined skill bundles
Step 5: Complete - Summary of configuration

New components:

WelcomeContent - Welcome message and features overview
RuntimeContent - Environment checks with real Gateway status
ProviderContent - Provider selection with API key input and validation
ChannelContent - Channel type selection with QR code placeholder
SkillsContent - Skill bundle toggles
CompleteContent - Configuration summary

Features:

Animated transitions using Framer Motion
Progress indicator with step navigation
Dynamic canProceed state based on step requirements
API key visibility toggle
Simulated API key validation

`src/stores/settings.ts`

Added setupComplete: boolean to state
Added markSetupComplete() action
Setup status persisted via Zustand persist middleware

`src/App.tsx`

Added useLocation for route tracking
Added redirect logic: if setupComplete is false, navigate to /setup
Fixed handleNavigate callback signature for IPC events

Technical Details

Setup Flow

Welcome -> Runtime -> Provider -> Channel -> Skills -> Complete
   |          |          |          |          |          |
   v          v          v          v          v          v
 [Skip]   [Check]   [Validate]  [Select]   [Toggle]   [Finish]
   |          |          |          |          |          |
   +---------+----------+----------+----------+----------+
                                                         |
                                              markSetupComplete()
                                                         |
                                                 Navigate to /

Provider Types

Anthropic (Claude) - API key starts with sk-ant-
OpenAI (GPT) - API key starts with sk-
Google (Gemini) - Length validation
Ollama (Local) - No API key required
Custom - Configurable base URL

Channel Types

WhatsApp - QR code connection
Telegram - Bot token
Discord - Bot token
Slack - OAuth/Bot token
WeChat - QR code connection

Skill Bundles

Productivity - Calendar, reminders, notes
Developer - Code assistance, git operations
Information - Web search, news, weather
Entertainment - Music, games, trivia

UI/UX Features

Gradient background with glassmorphism cards
Step progress dots with completion indicators
Animated page transitions
Back/Skip/Next navigation
Toast notifications on completion

Version

v0.1.0-alpha (incremental)

3.1 KiB Raw Blame History