ekko b9f9e62179 feat: Media rendering enhancements and group chat optimizations (#444)
* fix: add missing i18n key and unify session data source (#408)

- Add `chat.sessionNotFound` translation key to all 8 locales
- Fix history page data source inconsistency:
  - Change `getHermesSession` to prioritize database over CLI
  - Now consistent with `listHermesSessions` behavior
  - Prevents "session in list but detail not found" issue
- Update CI workflow to trigger on base branch PRs
- Remove debug log from sessions-db

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: filter special characters and emoji in speech playback (#409)

- Update extractReadableText to filter special characters like *#
- Only keep common punctuation marks for speech synthesis
- Remove emoji, symbols, and special unicode characters
- Improve text-to-speech readability

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add drawer panel with mobile sidebar support and customizable button (#412)

* feat: add drawer panel with mobile sidebar support

- Add DrawerPanel component with Terminal and Files tabs
- Extract TerminalPanel and FilesPanel from existing views
- Add mobile sidebar toggle functionality with overlay
- Add rainbow breathing light effect to drawer button
- Remove Tools section from AppSidebar (Terminal/Files entries)
- Add i18n support for drawer and file tree
- Optimize mobile button layout and spacing
- Fix z-index hierarchy for proper layering
- Add responsive sidebar behavior (PC: always visible, Mobile: toggle)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: customize drawer button with arc rainbow border

- Change drawer button to semi-circle shape贴着右边
- Add arrow icon pointing left (向左箭头)
- Add rainbow border from top to bottom through semi-circle arc
- Slow down animation from 4s to 8s for smoother effect
- Move drawer button wrapper to messages area only (not贯穿header和input)
- Add semi-transparent accent color background to button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: resolve profile switching state sync issue (#414) (#415)

* fix: resolve profile switching state sync issue (#414)

Fix bug where switching to a different profile would still show the
old profile name in the UI and prevent switching back to default.

Root cause:
- Frontend relied entirely on fetchProfiles() return value to set
  activeProfileName
- Backend Hermes CLI may return stale active flag due to timing
  issues between profile use and profile list commands
- This caused frontend to display wrong profile and prevented
  switching back to default

Solution:
- Immediately set activeProfileName when switchProfile API succeeds
- Don't rely solely on listProfiles() result which may have stale data
- Use activeProfileName instead of activeProfile?.name in ProfileSelector

Changes:
- profiles store: Set activeProfileName immediately after successful switch
- ProfileSelector: Use activeProfileName computed property
- Add test to verify activeProfileName updates on switch

Fixes #414

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refine: improve error handling for profile switching failures

Add proper error handling for edge cases:
- If fetchProfiles() fails after successful switch, keep the updated
  activeProfileName (don't let fetchProfiles failure undo the switch)
- Add test cases to verify:
  1. API failure doesn't change state
  2. fetchProfiles failure doesn't affect successful switch

This ensures the UI remains consistent even when profile list refresh
fails after a successful profile switch.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refine: add rollback mechanism for profile switching verification

Add backend verification after profile switch:
- Save old activeProfileName before setting new value
- After fetchProfiles, verify backend reports expected active profile
- If backend reports different profile, rollback frontend state and return false
- This handles edge case where API returns 200 but backend didn't actually switch

Test cases:
-  Normal switch: updates and verifies successfully
-  API failure: doesn't change state
-  fetchProfiles failure: assumes success (API returned 200)
-  Backend verification fails: rolls back to old profile

This ensures frontend state always matches backend reality, even in
edge cases where hermes profile use succeeded but gateway/cleanup
steps failed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refine: add user feedback for profile operations

Improve user experience with success/error messages:
- ProfileSelector: Add error message when switch fails
- ProfileCard: Add success message before reload on switch
- ProfileSelector: Use async/await for better error handling
- ProfileCard: Add 500ms delay before reload to show success message

Before: Silent failures, no feedback
After: Clear success/error messages for all operations

Example feedback:
- Success: "已切换到配置 qinghe"
- Failure: "切换配置失败,网关可能需要手动重启"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: update frontend changelog for v0.5.7 (#419)

* docs: update frontend changelog for v0.5.7

- Update changelog.ts with v0.5.7 release date and changes
- Add i18n translation keys for all languages (en, zh, de, es, fr, ja, ko, pt)
- Include v0.5.7 changelog entries:
  - Optimize context compression and session sync
  - Add startup delays to prevent database race conditions

Changes:
- packages/client/src/data/changelog.ts: Update v0.5.7 entry
- packages/client/src/i18n/locales/*.ts: Add changelog translation section

This enables the changelog modal in the UI to display v0.5.7 release notes.

* feat: add v0.5.7 changelog translations to all supported languages

Add new_0_5_7_1, new_0_5_7_2, and new_0_5_7_3 changelog entries to all
locale files (en, zh, de, es, fr, ja, ko, pt) with proper translations
for each language.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: remove duplicate changelog sections causing syntax errors

Remove duplicate changelog object sections that were causing TypeScript
syntax errors in all locale files (en, zh, de, es, fr, ja, ko, pt).
The actual changelog entries are already correctly placed in the main
changelog section of each file.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add v0.5.8 changelog and fix profile parsing issue

Add v0.5.8 changelog entries based on PRs merged since v0.5.7:
- Drawer panel with mobile sidebar support (#412)
- Profile switching state sync fix (#414)
- Speech playback special character filtering (#409)
- Missing i18n key and session data source unification (#408)
- Vite build optimization for faster Docker builds (#403)

Also fix issue #417: Profile names with long hyphenated names fail
to parse in profile list regex. Change \s{2,} to \s+ to handle
compressed column spacing when profile names are long.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: remove enter key submit from profile creation and rename modals

Remove @keyup.enter handlers from NInput components in:
- ProfileCreateModal: prevent accidental profile creation when pressing enter
- ProfileRenameModal: prevent accidental profile rename when pressing enter

Users must now explicitly click the confirm button to submit, preventing
unintended profile operations.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: allow free text input for profile names

Remove frontend character filtering from profile creation and rename
modals. Users can now input any characters including spaces and
uppercase letters to test backend Hermes CLI validation.

Changes:
- ProfileCreateModal: Remove toLowerCase() and character filtering
- ProfileRenameModal: Remove toLowerCase() and character filtering
- Use v-model:value binding instead of :value with @input

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: improve error handling for profile creation

Display backend error messages when profile creation fails instead of
generic "failed" message. This helps users understand why their
profile name was rejected (e.g., invalid characters).

Changes:
- API layer: Capture and return error messages from backend
- ProfileCreateModal: Display specific error message from backend

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add profile name validation with i18n support

Add client-side validation for profile names to prevent invalid input
before sending to backend. Only lowercase letters, numbers, underscores,
and hyphens are allowed.

Changes:
- ProfileCreateModal: Add input validation with real-time feedback
- ProfileRenameModal: Add input validation with real-time feedback
- Add nameValidation i18n key for all 8 languages
- Filter invalid characters on input and show warning message

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor: revert profile parsing regex changes

Revert the regex changes in hermes-cli.ts and gateway-manager.ts
back to requiring \s{2,} (at least 2 spaces). Since frontend now
validates profile names to only allow lowercase letters, numbers,
underscores, and hyphens, the relaxed regex is no longer needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor: revert profile parsing regex changes

Revert the regex changes in gateway-manager.ts and hermes-cli.ts
back to requiring \s{2,} (at least 2 spaces). Since frontend now
validates profile names to only allow lowercase letters, numbers,
underscores, and hyphens, the relaxed regex is no longer needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor: remove tooltip from drawer button

Remove the NTooltip wrapper from the floating drawer button.
The "Terminal & Files" tooltip is no longer shown on hover.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update assets images (#421)

Updated two asset images in the client package.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: bump version to 0.5.8

Release v0.5.8

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: improve profile list parsing to handle long profile names (#425)

Fixed issue #423 where long profile names caused parsing failures.

Changes:
- gateway-manager.ts: Use `.+?` instead of `\S+` to match profile names, allowing names that overflow table column width
- hermes-cli.ts: Use `\s+` instead of `\s{2,}` for first delimiter to handle cases where long profile names reduce spacing to 1 space

The regex now correctly parses profile output even when profile names are long enough to compress table formatting, ensuring all profiles appear in the UI regardless of name length.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: add GitHub issue templates

Add structured issue templates to guide users when submitting issues:
- Bug Report template with version info, reproduction steps, and environment details
- Feature Request template with problem statement, solution, and priority
- General Issue template for questions that don't fit other categories
- Config to enable blank issues and provide contact links to documentation and discussions

Templates use YAML forms for better structure and validation of required fields.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: unify profile management across the application (#432)

This commit addresses long-standing profile inconsistency issues by establishing
`~/.hermes/active_profile` file as the single source of truth for all profile
operations throughout the application.

## Changes

### Backend (Server)

**1. profiles.ts - Enhanced profile switching**
- Switch from CLI polling to direct file verification (Hermes CLI writes synchronously)
- Verify `active_profile` file with quick retry (max 2 attempts × 100ms = 300ms)
- Update GatewayManager only after file verification succeeds
- Add comprehensive logging for debugging

**2. profiles.ts - Authoritative API responses**
- Override CLI's active flag with `active_profile` file in `list()` endpoint
- Add warning when CLI output differs from file (detects inconsistencies)
- Ensures API responses always match actual runtime state

**3. jobs.ts - Use authoritative profile source**
- `resolveProfile()` falls back to `getActiveProfileName()` when no profile in request
- Ensures jobs operate on correct profile even if frontend doesn't specify

**4. cron-history.ts - Fix run history to respect active profile**
- Changed from fixed `~/.hermes/cron/output/` to `getActiveProfileDir()/cron/output/`
- Run history now correctly switches with profile (e.g., `~/.hermes/profiles/hermes/cron/output/`)

**5. proxy-handler.ts - Add fallback to authoritative source**
- If no profile in request headers/query, read from `getActiveProfileName()`
- Prevents proxy from using wrong default profile

### Frontend (Client)

**1. api/client.ts - Simplified profile resolution**
- Prioritize `useProfilesStore().activeProfileName` over localStorage
- localStorage fallback only for early initialization

**2. api/hermes/chat.ts - Consistent profile resolution**
- Same pattern: store first, localStorage fallback only during init

**3. stores/session-browser-prefs.ts - Clean up fallback logic**
- Prioritize store, remove redundant localStorage read

## Problem Solved

Previously, multiple components had different ways of determining the active profile:
- CLI output (◆ marker) - could be stale
- GatewayManager memory - startup cache only
- localStorage - frontend cache
- Various fallbacks scattered across codebase

This caused inconsistencies where:
- Frontend showed one profile but API used another
- Jobs ran on wrong profile
- Run history displayed wrong data
- Profile switches appeared to fail (but actually succeeded)

## Solution

All components now derive the active profile from the same authoritative source:
- `~/.hermes/active_profile` file (written synchronously by `hermes profile use`)
- `getActiveProfileName()` function (reads the file)
- Single source of truth = no inconsistencies

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: add v0.5.9 changelog entries (#434)

- Add unified profile management across the application
- Add GitHub issue and pull request templates

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: Enhance Markdown Media Rendering (Image/Video/File Support) (#438)

* feat: enhance markdown media rendering with image, video, and file support

- Add image display with thumbnail preview (200x160px) and click-to-fullscreen
- Add video playback support for .mp4 and .webm formats with HTML5 player
- Add file card UI for downloads with icon and filename
- Convert local file paths (/tmp/*) to download URLs with auth token
- Add AI output format guidelines system prompt (llm-prompt.ts)
- Increase max download file size from 100MB to 200MB
- Add documentation for AI output format constraints

This enables AI agents to return images, videos, and files using standard
Markdown syntax, which the frontend renders as interactive media elements
instead of plain text links.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: resolve unused parameter TypeScript errors in MarkdownRenderer

Use underscore prefix for unused match parameters in replace callbacks

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: optimize group chat prompts and fix media handling (#439)

Group Chat Prompt Improvements:
- Add AI_OUTPUT_FORMAT_GUIDELINES to group chat system prompts
- Fix duplicate member issue in room member list (deduplicate by name)
- Handle empty agentDescription with default fallback
- Add rule for sending files to users using proper format

Chat Run Socket Integration:
- Integrate getSystemPrompt() into chat-run-socket.ts
- Append media format guidelines to all chat instructions
- Ensure consistent format enforcement across chat and group chat

Media Format Guidelines:
- Simplify "注意事项" section (remove frontend implementation details)
- Add "发送文件给用户" section with clear examples
- Update video format description to mention embedded player

URL Encoding Fix:
- Fix double URL encoding in download.ts (decode first, then encode)
- Prevent %25E8... double-encoded paths, now correctly %E8...

This ensures AI agents in both private chat and group chat follow
consistent media formatting rules when returning images, videos, and files.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-04 19:48:40 +08:00
2026-05-03 22:10:40 +08:00
2026-04-18 08:27:40 +08:00
2026-05-04 12:46:26 +08:00
2026-04-11 15:59:14 +08:00
2026-04-11 15:59:14 +08:00

Hermes Web UI 中文

A full-featured web dashboard for Hermes Agent.
Manage AI chat sessions, monitor usage & costs, configure platform channels,
schedule cron jobs, browse skills — all from a clean, responsive web interface.

npm install -g hermes-web-ui && hermes-web-ui start

Hermes Web UI Demo

Hermes Web UI Demo

npm version license stars


Features

AI Chat

  • Real-time streaming via SSE with async run support
  • Multi-session management — create, rename, delete, switch between sessions
  • Self-built session database — local SQLite storage with automatic sync from Hermes state.db on first startup
  • Session grouping by source (Telegram, Discord, Slack, etc.) with collapsible accordion
  • Active session indicator — live sessions pin to top with spinner icon
  • Sessions sorted by latest message time
  • Markdown rendering with syntax highlighting and code copy
  • Tool call detail expansion (arguments / result)
  • File upload support
  • File download support — download user-uploaded files and agent-generated files across local, Docker, SSH, and Singularity backends
  • Session search — Ctrl+K global search across all conversations
  • Global model selector — discovers models from ~/.hermes/auth.json credential pool
  • Per-session model display badge and context token usage

Platform Channels

Unified configuration for 8 platforms in one page:

Platform Features
Telegram Bot token, mention control, reactions, free-response chats
Discord Bot token, mention, auto-thread, reactions, channel allow/ignore lists
Slack Bot token, mention control, bot message handling
WhatsApp Enable/disable, mention control, mention patterns
Matrix Access token, homeserver, auto-thread, DM mention threads
Feishu (Lark) App ID / Secret, mention control
WeChat QR code login (scan in browser, auto-save credentials)
WeCom Bot ID / Secret
  • Credential management writes to ~/.hermes/.env
  • Channel behavior settings write to ~/.hermes/config.yaml
  • Auto gateway restart on config change
  • Per-platform configured/unconfigured status detection

Usage Analytics

  • Total token usage breakdown (input / output)
  • Session count with daily average
  • Estimated cost tracking & cache hit rate
  • Model usage distribution chart
  • 30-day daily trend (bar chart + data table)

Scheduled Jobs

  • Create, edit, pause, resume, delete cron jobs
  • Trigger immediate execution
  • Cron expression quick presets

Model Management

  • Auto-discover models from credential pool (~/.hermes/auth.json)
  • Fetch available models from each provider endpoint (/v1/models)
  • Add, update, and delete providers (preset & custom OpenAI-compatible)
  • OpenAI Codex & Nous Portal OAuth login
  • Provider URL auto-detection for non-v1 API versions (e.g. /v4)
  • Provider-level model grouping with default model switching

Multi-Profile & Gateway

  • Create, rename, delete, and switch between Hermes profiles
  • Clone existing profile or import from archive (.tar.gz)
  • Export profile for backup or sharing
  • Multi-gateway management — start, stop, and monitor gateway per profile
  • Auto port conflict resolution
  • Profile-scoped configuration and cache isolation

File Browser

  • Browse files on remote backends (local, Docker, SSH, Singularity)
  • Upload, download, rename, copy, move, and delete files
  • Create directories
  • View file content with syntax highlighting

Group Chat

  • Multi-agent chat rooms with real-time messaging via Socket.IO
  • @mention routing — mention an agent to trigger a contextual reply
  • Context compression — automatic conversation summarization when history exceeds token threshold
  • Typing status and reply progress indicators
  • Room creation, deletion, and invite code management
  • Agent management — add/remove agents from rooms with per-agent profiles
  • SQLite message persistence
  • Mobile responsive with collapsible sidebar

Skills & Memory

  • Browse and search installed skills
  • View skill details and attached files
  • User notes and profile management

Logs

  • View agent / gateway / error logs
  • Filter by log level, log file, and keyword
  • Structured log parsing with HTTP access log highlighting

Authentication

  • Token-based auth (auto-generated on first run or set via AUTH_TOKEN env var)
  • Optional username/password login — set via settings page after initial token auth
  • Auth can be disabled with AUTH_DISABLED=1

Settings

  • Display (streaming, compact mode, reasoning, cost display)
  • Agent (max turns, timeout, tool enforcement)
  • Memory (enable/disable, char limits)
  • Session reset (idle timeout, scheduled reset)
  • Privacy (PII redaction)
  • Model settings (default model & provider)
  • API server configuration

Web Terminal

  • Integrated terminal powered by node-pty and @xterm/xterm
  • Multi-session support — create, switch between, and close terminal sessions
  • Real-time keyboard input and PTY output streaming via WebSocket
  • Window resize support

Quick Start

npm install -g hermes-web-ui
hermes-web-ui start

Open http://localhost:8648

One-line Setup (Auto-detect OS)

Automatically installs Node.js (if missing) and hermes-web-ui on Debian/Ubuntu/macOS:

bash <(curl -fsSL https://raw.githubusercontent.com/EKKOLearnAI/hermes-web-ui/main/scripts/setup.sh)

WSL

bash <(curl -fsSL https://raw.githubusercontent.com/EKKOLearnAI/hermes-web-ui/main/scripts/setup.sh)
hermes-web-ui start

WSL auto-detects and uses hermes gateway run for background startup (no launchd/systemd).

Docker Compose

Run Web UI together with Hermes Agent:

# Use pre-built image (Recommended)
WEBUI_IMAGE=ekkoye8888/hermes-web-ui:latest docker compose up -d hermes-agent hermes-webui

# Or build from source
docker compose up -d --build hermes-agent hermes-webui

docker compose logs -f hermes-webui

Open http://localhost:6060

  • Persistent Hermes data is stored in ./hermes_data
  • Web UI auth token is stored in ./hermes_data/hermes-web-ui/.token
  • On first run with auth enabled, the token is printed to container logs
  • All runtime settings are environment-variable driven in docker-compose.yml

For detailed notes and troubleshooting, see docs/docker.md.

CLI Commands

Command Description
hermes-web-ui start Start in background (daemon mode)
hermes-web-ui start --port 9000 Start on custom port
hermes-web-ui stop Stop background process
hermes-web-ui restart Restart background process
hermes-web-ui status Check if running
hermes-web-ui update Update to latest version & restart
hermes-web-ui -v Show version number
hermes-web-ui -h Show help message

Auto Configuration

On startup the BFF server automatically:

  • Validates ~/.hermes/config.yaml and fills missing api_server fields
  • Backs up original config to config.yaml.bak if modified
  • Detects and starts the gateway if needed
  • Resolves port conflicts (kills stale processes)
  • Opens browser on successful startup

Development

git clone https://github.com/EKKOLearnAI/hermes-web-ui.git
cd hermes-web-ui
npm install
npm run dev
npm run build   # outputs to dist/

Architecture

Browser → BFF (Koa, :8648) → Hermes Gateway (:8642)
                ↓
           Hermes CLI (sessions, logs, version)
                ↓
           ~/.hermes/config.yaml  (channel behavior)
           ~/.hermes/auth.json    (credential pool)
           Tencent iLink API      (WeChat QR login)

The frontend is designed with multi-agent extensibility — all Hermes-specific code is namespaced under hermes/ directories (API, components, views, stores), making it straightforward to add new agent integrations alongside.

The BFF layer handles API proxy (with path rewriting), SSE streaming, file upload and download (multi-backend: local/Docker/SSH/Singularity), session CRUD via CLI, config/credential management, WeChat QR login, model discovery, skills/memory management, log reading, and static file serving.

Tech Stack

Frontend: Vue 3 + TypeScript + Vite + Naive UI + Pinia + Vue Router + vue-i18n + SCSS + markdown-it + highlight.js

Backend: Koa 2 (BFF server) + node-pty (web terminal)

Star History

Star History Chart

Sponsor

如果你觉得这个项目对你有帮助,欢迎支持我:

Sponsor

License

MIT

Languages
TypeScript 72.6%
Vue 23%
Python 2.8%
JavaScript 1.1%
SCSS 0.3%