Replace the iframe-based Control UI embed with a native React
implementation that communicates directly with the Gateway via
gateway:rpc IPC calls and chat event streaming.
New components:
- ChatToolbar: session selector dropdown, refresh button, thinking toggle
- ChatMessage: message bubbles with markdown (react-markdown + GFM),
collapsible thinking blocks, tool use cards, image attachments
- ChatInput: textarea with Enter to send, Shift+Enter for new line
- message-utils: extractText/extractThinking/extractImages/extractToolUse
ported from OpenClaw's message-extract.ts
Rewritten chat store with:
- Session management (sessions.list, switchSession)
- Proper chat.history loading with raw message preservation
- chat.send with idempotencyKey and run tracking
- Streaming via handleChatEvent (delta/final/error/aborted)
- Thinking toggle (show/hide reasoning blocks)
The Dashboard crashed with 'channels.slice is not a function' because
channels.status returns a deeply nested object per channel ID, not a
Channel[] array. Same issue with skills.status.
For now, use empty arrays since channel/skill management is deferred
to their dedicated pages. Will properly parse the complex response
format when those pages are implemented.
- The session.webRequest.onHeadersReceived was stripping X-Frame-Options
and modifying CSP for ALL responses including the Vite dev server,
which could break the main app rendering. Now only applies to
gateway URLs (127.0.0.1:18789 / localhost:18789).
- Dashboard: only fetch channels/skills when gateway is running
- Dashboard: guard against non-array channels/skills data
- Gateway store: use dynamic import() instead of require() for chat
store to avoid ESM/CJS issues in Vite
- Fix channels store: use channels.status instead of channels.list
- Fix skills store: use skills.status instead of skills.list
- Fix chat store: correct chat.history response parsing (messages in payload)
- Fix chat store: handle chat.send async flow (ack + event streaming)
- Add chat event handling for streaming AI responses (delta/final/error)
- Wire gateway:chat-message IPC events to chat store
- Fix health check: use WebSocket status instead of nonexistent /health endpoint
- Fix waitForReady: probe via WebSocket instead of HTTP
- Gracefully degrade when methods are unsupported (no white screen)
- Replace mock API key validation with actual API calls to verify keys
- Add validateApiKeyWithProvider() with provider-specific implementations
- Support Anthropic, OpenAI, Google, and OpenRouter validation
- Add OpenRouter as a new provider option in setup wizard and settings
- Fix setup page to call real validation instead of mock length check
- Allow validation during setup before provider is saved
- Return user-friendly error messages instead of raw API errors
- 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
- Add comprehensive Channels page with connection statistics and status display
- Implement AddChannelDialog with type-specific connection flows:
- QR code-based connection for WhatsApp/WeChat
- Token-based connection for Telegram/Discord/Slack
- Enhance channels store with addChannel, deleteChannel, and requestQrCode actions
- Update electron-store usage to dynamic imports for ESM compatibility
- Add channel connection instructions and documentation links
Add complete provider configuration system with the following features:
- Secure API key storage using Electron's safeStorage encryption
- Provider CRUD operations with IPC handlers
- Lazy-loaded electron-store for ESM compatibility
- Provider settings UI component with add/edit/delete functionality
- API key masking for display (shows first/last 4 chars)
- Basic API key format validation per provider type
- Default provider selection
- Provider enable/disable toggle
New files:
- electron/utils/secure-storage.ts: Encrypted key storage and provider config
- src/stores/providers.ts: Zustand store for provider state
- src/components/settings/ProvidersSettings.tsx: Provider management UI
Add complete setup wizard implementation with the following features:
- Welcome step with feature highlights
- Environment check step with Node.js, OpenClaw, and Gateway verification
- AI Provider selection with API key input and validation UI
- Channel connection step with QR code placeholder
- Skill bundle selection with recommended bundles pre-selected
- Completion summary showing all configured options
Additional changes:
- Add setupComplete state and markSetupComplete action to settings store
- Auto-redirect to setup wizard on first launch
- Track setup completion in persisted settings
Improve Gateway lifecycle management with the following features:
- Add exponential backoff reconnection (1s-30s delay, max 10 attempts)
- Add health check monitoring every 30 seconds
- Add proper restart method with graceful shutdown
- Handle server-initiated notifications (channel status, chat messages)
- Add 'reconnecting' state for better UI feedback
- Enhance IPC handlers with isConnected and health check endpoints
- Update preload script with new event channels
- Improve type safety and error handling throughout
Also fixes several TypeScript errors and unused variable warnings.
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)
