Component Reference

Overview

ClawDesk’s UI is built with React 18 and organized into layout components, detail views, modals, and specialized widgets. All state flows through a centralized Zustand store (useStore()).

Layout Components

`App` (`src/App.tsx`)

Root application component. Orchestrates the entire layout, initializes the app, applies theme, and sets up mobile-specific listeners (keyboard, back button, app lifecycle).

View routing: Renders the appropriate detail view based on mainView store state.

`ServerProfileTabs` (`src/components/ServerProfileTabs.tsx`)

Tabbed UI above the sidebar for switching between saved server profiles. Each profile stores its own server URL and authentication token, enabling quick switching between multiple OpenClaw servers.

Features:

Tab bar with profile names and add/remove controls
Per-profile token storage (isolated credentials)
Active profile indicator
Inline profile creation

Left sidebar with session management and navigation.

Features:

Session list grouped by date (Today, Yesterday, This Week, This Month, Older)
Debounced session search (300ms)
Unread message badges
Context menu (right-click/long-press) for rename/delete
Agent selector dropdown
Navigation buttons: New Chat, Dashboard, Server Usage, Nodes
Collapsible/expandable session groups

Sub-components: SessionItem, RenameModal, AgentSelector

Session filtering rules:

Hides spawned subagent sessions (spawned: true)
Hides system sessions (agent:X:main, agent:X:cron)
Hides cron sessions
Always shows the currently active session
Deduplicates by session key

Header bar with session name display, thinking mode toggle, theme toggle, right panel toggle, and settings button. Shows connection status indicator.

`RightPanel` (`src/components/RightPanel.tsx`)

Resizable right panel with three tabs:

Tab	Content
Skills	Installed skills list + ClawHub “Available” sub-tab
Crons	Cron job list with status toggles
Hooks	Internal hooks list with master toggle

Features: Drag-to-resize handle, debounced search, ClawHub sort options (downloads, stars, trending, updated).

Sub-components: SkillItem, ClawHubSkillItem, HookItem, CronJobItem

Chat Components

`ChatArea` (`src/components/ChatArea.tsx`)

Main message display area with streaming support.

Features:

Message bubbles (user/assistant styling)
Markdown rendering with GFM tables, code blocks with copy button
Thinking block display (collapsible, with streaming indicator)
Tool call inline display (running spinner, collapsed results, expandable)
Subagent block rendering
Image attachment display
Date separators between messages
Auto-scroll with smart behavior (instant on session switch, smooth on new messages)
Typing indicator and compaction indicator

Sub-components: MessageBubble, ToolCallBubble, ToolCallBlock, MessageContent, ThinkingBlock, DateSeparator

`InputArea` (`src/components/InputArea.tsx`)

Message composition area.

Features:

Auto-expanding textarea (max 200px height)
Voice input (browser SpeechRecognition + Capacitor)
Wake word detection (configurable words, 3s cooldown)
Image attachment with preview thumbnails
File validation (images only, 5MB max)
Character count with capacity warning
Send/Stop button toggle
Keyboard shortcuts: Enter=send, Shift+Enter=newline

Detail View Components

`SkillDetailView` (`src/components/SkillDetailView.tsx`)

Individual skill inspector showing metadata, requirements, installation options, and enable/disable toggle.

`CronJobDetailView` (`src/components/CronJobDetailView.tsx`)

Full cron job editor with sections for:

Schedule (cron expression, interval, one-time)
Execution (session target, wake mode, agent, delete-after-run)
Payload (system event or agent turn with model/thinking/timeout)
Delivery (none, announce, webhook)
Content (markdown editor)
Runtime state (last run status, errors, timing)

`CreateCronJobView` (`src/components/CreateCronJobView.tsx`)

New cron job creation form with all configuration sections.

`AgentDetailView` (`src/components/AgentDetailView.tsx`)

Agent profile editor with avatar display, name editing, model selection, workspace file browser, and file editor. Supports agent deletion (except ‘main’).