The Hermes Desktop application is a React-based frontend embedded in an Electron shell. It provides a rich user experience for conversational AI through tightly integrated React components, efficient state management using nanostores, and extensibility via assistant-ui components. This page covers the main UI components that collectively make up the desktop app's user interface: chat composer, session sidebar, profile switcher, command center, settings panels (model, appearance, MCP), and the assistant-ui thread component.
ChatBar)ChatBar is the core user input component for the Hermes Desktop app, enabling users to compose, edit, and submit chat messages with rich attachment support.
Rich, performant text input:
The chat composer uses a specialized rich editor supporting inline rich chips for files and session references (via RICH_INPUT_SLOT) apps/desktop/src/app/chat/composer/index.tsx53
It optimizes input rendering by isolating the editor DOM changes from outer UI chrome updates, using state hooks like useComposerDraft for the detached "source of truth" of the draft content apps/desktop/src/app/chat/composer/index.tsx157-163
Attachment management:
Attachments (files, images, URLs) are managed within the composer scope, tracked with nanostores ($attachments) and exposed to the UI as chips. Attachments can be added through drag-and-drop, paste, or file picker dialogs apps/desktop/src/app/chat/composer/index.tsx75-122 The uploadComposerAttachment function handles staging files/images into the session workspace and rewriting attachments with gateway-side references, supporting both local and remote modes apps/desktop/src/app/session/hooks/use-prompt-actions/index.ts86-169
Slash commands and completions:
The input supports slash command triggers (/) and at-completions (@) through middleware chains. These completions come from useSlashCompletions and useAtCompletions hooks, which interface with the Hermes gateway and the current session context apps/desktop/src/app/chat/composer/index.tsx147-150
Voice integration:
Voice recording and playback are integrated with VoiceActivity and VoicePlaybackActivity components, supporting audio capture and transcription workflows apps/desktop/src/app/chat/composer/index.tsx62-63
Pop-out composer window:
useComposerPopout provides docked and floating composer states, allowing users to detach the composer UI from the main app window and reposition it freely, including drag gesture handling apps/desktop/src/app/chat/composer/index.tsx132-139
The submission pipeline ensures extensibility and intercepts inputs for local slash command execution or gateway forwarding.
Sources:
apps/desktop/src/app/chat/composer/index.tsx apps/desktop/src/app/chat/index.tsx apps/desktop/src/app/session/hooks/use-prompt-actions/index.ts
ChatSidebar)Manages navigation and display of conversational sessions (historical and active).
Session Listing and Ordering:
Sessions are maintained in the global $sessions nanostore. The sidebar subscribes for updates to reflect session ordering, pinning, selection, and session grouping apps/desktop/src/app/chat/sidebar/index.tsx93-95
It implements both manual and automatic order reconciliations for session tiles, including support for virtualized scrolling for performance.
Pinning and Legacy Handling:
To accommodate compressed sessions, pinning works on lineage root IDs via sessionPinId enabling UI to continue referencing an unchanging root despite incoming rotation/shard updates apps/desktop/src/store/session.ts169-171
Search Integration:
Sidebar search uses partial session metadata via search queries, with results normalized into SessionInfo structures that the sidebar renders apps/desktop/src/app/chat/sidebar/index.tsx198-200 The searchSessions function from the Hermes API is used for this purpose apps/desktop/src/app/chat/sidebar/index.tsx26
UI Organization:
The sidebar groups sessions by agents and projects, optionally flattening scroll panes on narrow viewports for compact display (controlled by a CSS variant compact) apps/desktop/src/app/chat/sidebar/index.tsx180-185
ProfileRail)Allows switching between multiple agent profiles, isolating conversational contexts.
Profiles Store:
Profiles are held in the $profiles nanostore. The ProfileRail component queries this store and renders interactive profile tiles allowing switching apps/desktop/src/store/profile.ts6
Gateway Profile Swap:
Changing profiles triggers a swap or reconnection via the Hermes gateway to the target profile's backend session apps/desktop/src/app/contrib/wiring.tsx35 The $activeGatewayProfile nanostore tracks the currently active profile apps/desktop/src/store/profile.ts10
Sources:
apps/desktop/src/app/chat/sidebar/index.tsx apps/desktop/src/store/profile.ts apps/desktop/src/store/session.ts apps/desktop/src/store/layout.ts apps/desktop/src/app/chat/index.tsx apps/desktop/src/app/contrib/wiring.tsx
CommandPalette)The Command Center UI aggregates global commands, skill invocations, and model/profile management interactions in a pop-over or panel style UI accessible via keyboard shortcuts or UI buttons.
CommandPalette component apps/desktop/src/app/contrib/wiring.tsx65 is a lazy-loaded overlay view that provides a centralized interface for various actions.ContribWiringContext to access actions like openMemoryGraph, refreshSessions, and requestGateway apps/desktop/src/app/contrib/wiring.tsx159-161Sources:
apps/desktop/src/app/contrib/wiring.tsx
Settings are organized into distinct panels within the desktop app, managed by the SettingsView component apps/desktop/src/app/contrib/wiring.tsx123
Model Settings: Manages LLM model selection, reasoning effort, fast mode toggle, and provider configurations. Uses $currentModel, $currentProvider, and $currentReasoningEffort nanostores apps/desktop/src/store/session.ts20-25 The ModelSettings component apps/desktop/src/app/settings/config-settings.tsx10 handles the UI for these settings.
Appearance Settings: Controls theme selection and font preferences, mapped through useTheme hook that provides theme lists and active theme names apps/desktop/src/app/chat/composer/index.tsx148-150 The AppearanceSettings component apps/desktop/src/app/settings/config-settings.tsx12 manages these. The styles.css file defines custom properties for theming, including colors, fonts, and shadows apps/desktop/src/styles.css60-133
MCP (Mixture of Chat Processes) Settings: Configures MCP parameters including delivery modes and concurrency settings, interfacing with MCP backends and the gateway. The McpSettings component apps/desktop/src/app/settings/config-settings.tsx14 handles this.
These panels are typically React controlled components that read and write to global configuration nanostores and trigger config save requests to the Electron bridge.
Sources:
apps/desktop/src/app/chat/composer/index.tsx apps/desktop/src/app/contrib/wiring.tsx apps/desktop/src/app/settings/config-settings.tsx apps/desktop/src/store/session.ts apps/desktop/src/styles.css
Thread)This is the core chat rendering interface derived from the @assistant-ui/react runtime:
Integration: Wrapped in AssistantRuntimeProvider, Thread renders the conversation message bubbles, rationales, tool outputs, and streaming updates apps/desktop/src/app/chat/index.tsx8-11 The Thread component reacts to $messages nanostore updates for conversational history apps/desktop/src/store/session.ts10
Message Rendering: Uses markdown rendering with incremental repair of streaming markdown to allow fluid text updates without flickering, via components like MarkdownText incorporating memoized KaTeX math rendering and LRU caching for performance apps/desktop/src/components/assistant-ui/markdown-text.tsx11-51 The preprocessWithTailRepair function ensures robust markdown parsing during streaming apps/desktop/src/components/assistant-ui/markdown-text.tsx55-62
Attachment Support: Embedded images, audio, and video assets are served using media URLs optimized for local memory use or proxied via the Hermes remote gateway apps/desktop/src/components/assistant-ui/markdown-text.tsx64-210 The MediaAttachment component handles rendering different media types apps/desktop/src/components/assistant-ui/markdown-text.tsx114-210
Voice and Accessibility: Supports voice playback synchronization with unspoken assistant messages through VoiceActivity components, ensuring smooth text-to-speech integration.
Sources:
apps/desktop/src/app/chat/index.tsx apps/desktop/src/components/assistant-ui/markdown-text.tsx apps/desktop/src/store/session.ts
The desktop UI components leverage reactive nanostores for state:
The chat composer, sidebar, and thread subscribe to relevant stores such as $sessions, $profiles, $messages, and $gatewayState.
Gateway events from the Electron main process propagate asynchronously into these stores, with hooks like useGatewayEventHandler orchestrating event dispatch and updates apps/desktop/src/app/session/hooks/use-message-stream/gateway-event.ts158-177
Session selections, profile switches, and model settings write back to nanostores triggering UI updates and backend gateway requests.
Sources:
apps/desktop/src/app/chat/composer/index.tsx apps/desktop/src/app/chat/composer/hooks/use-at-completions.ts apps/desktop/src/app/chat/composer/hooks/use-composer-draft.ts apps/desktop/src/app/chat/composer/hooks/use-slash-completions.ts apps/desktop/src/app/chat/index.tsx apps/desktop/src/app/session/hooks/use-message-stream/gateway-event.ts apps/desktop/src/app/session/hooks/use-prompt-actions/submit.ts apps/desktop/src/store/session.ts
| Component | Purpose | Key Stores / Hooks | Key Files |
|---|---|---|---|
| Chat Composer | Text input, attachments, slash commands | $composerAttachments, useComposerDraft | apps/desktop/src/app/chat/composer/index.tsx |
| Session Sidebar | Session navigation, pinning, search | $sessions, $pinnedSessionIds | apps/desktop/src/app/chat/sidebar/index.tsx |
| Profile Switcher | Agent context partitioning | $profiles, $activeGatewayProfile | apps/desktop/src/app/chat/sidebar/profile-switcher.tsx |
| Command Center | Global commands & skill invocation | ContribWiringContext | apps/desktop/src/app/command-palette/index.tsx |
| Settings Panels | Model, appearance, MCP configs | $currentModel, useTheme | apps/desktop/src/app/settings/index.tsx, apps/desktop/src/app/settings/config-settings.tsx |
| Assistant-UI Thread | Conversation thread rendering | $messages | apps/desktop/src/app/chat/index.tsx, apps/desktop/src/components/assistant-ui/thread.tsx |
The Hermes Desktop UI comprises modular React components, each focused on a clear responsibility:
ChatBar is the highly interactive user input host with rich features including voice, attachments, slash commands, and a detachable pop-out mode.
The sidebar presents persistent historic conversational sessions and profile contexts, allowing seamless multi-agent switching and session management.
The assistant UI (Thread) renders the evolving conversation using advanced markdown, media embedding, and voice synchronization.
Settings panels and the command center offer configuration and command execution surface tightly integrated with the underlying Hermes gateway and state nanostores.
These pieces together form a reactive, extensible, and performant desktop interface for the Hermes AI agent system.
Refresh this wiki
This wiki was recently refreshed. Please wait 4 days to refresh again.