diff --git a/docs/hermes-ui-refactor-plan.md b/docs/hermes-ui-refactor-plan.md new file mode 100644 index 0000000..7094507 --- /dev/null +++ b/docs/hermes-ui-refactor-plan.md @@ -0,0 +1,206 @@ +# Hermes UI 全面重构规划 + +> 参考：`.tmp/hermes-web-ui`（官方 Vue + Koa 实现） +> 目标：ClawPanel Hermes 引擎视觉 + 功能与官方看齐，保留 editorial luxury 主题。 +> 作者：Cascade（AI 助手）｜日期：2026-04-24 + +--- + +## 🎯 总体目标 + +1. **功能完备度**对齐官方 `hermes-web-ui`，不再是"初级 UI"。 +2. **视觉风格**继续用已做好的 editorial luxury（暖黑 + 金色 + Serif 标题）。 +3. **架构**：前端 Vanilla JS + CSS scope，后端走 ClawPanel Rust 命令（部分已有，部分需新增）。 +4. **分阶段交付**，每阶段独立 PR，可回滚。 + +--- + +## 📊 官方 vs ClawPanel 现状对比 + +| 页面 | 官方功能 | ClawPanel 现状 | Gap | +|---|---|---|---| +| **Logs** | 文件列表、级别过滤、行数、搜索、**logger 列**、**access log 彩色（method/path/status）** | 文件列表、级别、行数、搜索 | 缺 logger 列 + access log 解析 + tail + 下载 | +| **Chat** | SSE 流式、工具可视化、**持久化 Session（SQLite）**、**会话搜索**、多 profile、token 用量、context length | localStorage 会话、流式、工具卡片 | **架构性差距**：无 DB session、无搜索、无 usage、无 profile | +| **Skills** | 分类列表、详情、**toggle enable**、**category 描述**、**skill files tree** | 只读分类列表 + 详情 | 缺 toggle、files tree、CRUD | +| **Memory** | 三段式（memory/user/**soul**）、**mtime 时间戳** | 二段式（memory/user） | 缺 soul 段、mtime 显示 | +| **Jobs (Cron)** | 完整 Job 字段（next_run_at、last_run_at、last_status、last_error、delivery、**origin** 聊天平台溯源、**repeat**、skills 绑定、model/provider 绑定） | 基础 CRUD + 统计 | 缺 next/last run 时间、历史、绑定、delivery | +| **Files** ⭐ | 完整文件管理器（上传/下载/删除/预览） | **页面不存在** | 整个缺失 | +| **Sessions** ⭐ | 独立会话浏览器（列表/搜索/重命名/删除/usage） | 无 | 整个缺失 | +| **Gateways** ⭐ | 多 Gateway 切换 | 单 Gateway（已有基础） | 多 gateway 管理 UI 缺 | +| **Models** | 模型库浏览 + 用量 | 只有仪表盘的模型配置 | 独立 Models 页缺 | +| **Profiles** ⭐ | Profile 管理（不同 config 切换） | 无 | 整个缺失 | +| **Usage** ⭐ | token 用量统计、成本分析 | 无 | 整个缺失 | +| **Terminal** ⭐ | 内置终端 | 无 | 整个缺失 | +| **Channels** | 消息渠道（飞书/Telegram 等） | 占位 "coming soon" | 整个缺失 | + +⭐ = 官方独有的全新页面 + +--- + +## 🛠️ 工作量评估 + +### 前端（Vanilla JS + hermes.css 组件） + +| 模块 | 代码量 | 复杂度 | +|---|---|---| +| Logs 重写 | ~300 行 | 中（含 access log 解析） | +| Chat 重写 | ~700 行 | 高（SSE + session DB + usage） | +| Skills 重写 | ~400 行 | 中（加 toggle + files） | +| Memory 重写 | ~250 行 | 低 | +| Cron 重写 | ~500 行 | 中高（字段丰富） | +| Files 新增 | ~400 行 | 中 | +| Sessions 新增 | ~450 行 | 中高 | +| Usage 新增 | ~200 行 | 低 | +| Profiles 新增 | ~250 行 | 中 | +| Models 新增 | ~300 行 | 中 | +| **合计** | **~3750 行** | — | + +### 后端（Rust 新增命令） + +| 命令 | 数据源 | 估计 | +|---|---|---| +| `hermes_sessions_list/get/delete/rename` | `~/.hermes/sessions.db` SQLite | 中（4 个命令） | +| `hermes_session_usage` | `usage` 表 | 低（2 个） | +| `hermes_context_length` | 模型元数据 | 低 | +| `hermes_skill_toggle/create/delete` | `~/.hermes/skills/*/` FS | 中（3 个） | +| `hermes_skill_files` | 遍历 skill 目录 | 低 | +| `hermes_memory_soul` | `~/.hermes/memories/SOUL.md` | 低 | +| `hermes_logs_tail` | SSE 流 `~/.hermes/logs/*.log` | **高**（流式） | +| `hermes_logs_download` | 文件下载 | 低 | +| `hermes_files_list/read/delete/upload` | `~/.hermes/` 任意文件 | 中（4 个） | +| `hermes_profiles_list/switch` | `~/.hermes/profiles.json` | 低 | +| `hermes_job_history` | Gateway `/api/jobs/:id/runs` | 低 | +| **合计** | | **~18 个命令** | + +### 样式（hermes.css 扩展） + +| 组件 | 估计 | +|---|---| +| Logs 页（access log/logger 徽章） | ~60 行 | +| Chat 页（session browser/usage bar） | ~100 行 | +| Skills 页（files tree/toggle） | ~80 行 | +| Memory 页（三段布局） | ~40 行 | +| Files 页（新） | ~120 行 | +| Sessions 页（新） | ~100 行 | +| Usage / Profiles / Models | ~150 行 | +| **合计** | **~650 行 CSS** | + +--- + +## 🗓️ 分阶段交付（建议 6 个独立 PR） + +### Phase 1 — **Logs + Memory 重写**（低风险起步） +- 后端新增：`hermes_logs_tail`（SSE）、`hermes_logs_download`、`hermes_memory_read/write` 扩展支持 soul +- 前端重写：logs.js（access log 解析/logger 列/tail toggle/下载/清空显示） +- 前端重写：memory.js（三段式：memory/user/soul，加 mtime、字数） +- **工作量**：~600 行前端 + ~250 行 Rust + ~100 行 CSS +- **风险**：低（功能相对独立） +- **PR 大小**：中 + +### Phase 2 — **Cron (Jobs) 完整字段** +- 后端：`hermes_job_history`（走 Gateway REST） +- 前端：cron.js 重写，含 next_run_at / last_run_at / last_status / 执行历史抽屉 / delivery 字段 / skills 绑定 +- **工作量**：~500 行前端 + ~80 行 Rust + ~80 行 CSS +- **风险**：中（需要验证 Gateway REST 支持所有字段） + +### Phase 3 — **Skills CRUD** +- 后端：`hermes_skill_toggle/create/delete`、`hermes_skill_files` +- 前端：skills.js 重写，加 toggle / 新建 modal / 编辑 / 删除 / 文件树 +- **工作量**：~400 行前端 + ~300 行 Rust + ~80 行 CSS +- **风险**：中（FS 操作需权限/错误处理严谨） + +### Phase 4 — **Chat 架构重构**（重头戏） +- 后端：`hermes_sessions_*`（读 Hermes 的 SQLite）、`hermes_session_usage`、`hermes_context_length` +- 前端：chat.js 完全重写 + - 从 localStorage 迁移到后端 session API + - 增加停止按钮、消息复制、代码块语法高亮（引入 highlight.js 或自研） + - Token 用量实时显示 + - context length bar + - 搜索历史会话 +- **工作量**：~700 行前端 + ~400 行 Rust + ~150 行 CSS +- **风险**：**高**（架构迁移、localStorage 数据要兼容迁移） + +### Phase 5 — **新页面：Sessions + Usage** +- Sessions 独立页面（浏览所有历史、搜索、重命名、删除） +- Usage 页面（token 统计、成本） +- 侧栏导航项新增 +- **工作量**：~650 行前端 + ~100 行 Rust + ~150 行 CSS + +### Phase 6 — **Files + Profiles**（可选，根据需求） +- Files 浏览器（上传下载） +- Profiles 切换（多 config） +- **工作量**：~650 行前端 + ~250 行 Rust + ~170 行 CSS + +--- + +## ⚠️ 关键技术决策 + +### 1. 后端协议：SQLite 直读 or Gateway REST？ +Hermes Gateway **自身不暴露 session REST API**。必须**直接读 SQLite `~/.hermes/sessions.db`**（Hermes 进程也用这个文件，要注意并发）。 + +**方案**：Rust 端用 `rusqlite` crate + `WAL mode` 读。写操作（rename/delete）必须等 Gateway 停机或通过 Hermes CLI。 + +### 2. SSE 在 Tauri 中的实现 +Tauri WebView 支持 EventSource，但 Windows 上某些版本的 WebView2 可能有 buffer 问题。**已知方案**：Rust 端用 `tauri::Event` 推事件，前端 listen 就好。logs tail、chat run 已在用这个模式。 + +### 3. SQLite 迁移 localStorage chat sessions +chat.js 现有 localStorage 数据要迁移。**方案**：首次进 chat 页检测 localStorage 有旧 session，询问用户是否导入到 Hermes DB，or 保留只读访问。 + +### 4. Session DB 的 schema 兼容性 +Hermes 的 SQLite schema 可能版本间变化。参考 `.tmp/hermes-web-ui/packages/server/src/db/hermes/sessions-db.ts` 的 query 写法，保持一致。遇到 schema 差异用 `PRAGMA user_version` 检测。 + +### 5. Files 页面的权限边界 +只允许访问 `~/.hermes/` 目录，**拒绝绝对路径**，`../` 遍历要 reject。 + +### 6. Profiles 的切换语义 +切换 profile = 切换 `~/.hermes/config.yaml` + `.env` + 重启 Gateway。每个 profile 是一个完整配置目录。UI 要明示切换后需要重启 Gateway。 + +--- + +## 📋 验收标准（每阶段） + +- [ ] 新功能单元测试（Rust 端 `cargo test`） +- [ ] 前端 lint 通过 `npm run build` +- [ ] 手动测试：Tauri 桌面端 + Web 模式两端都跑一遍 +- [ ] 与官方 hermes-web-ui 视觉对比（截图），功能缺失 ≤ 10% +- [ ] 不影响 OpenClaw 引擎（scope 隔离验证） +- [ ] 性能：1000 条会话列表加载 < 500ms + +--- + +## ⏱️ 估算总时长 + +| 阶段 | 预估时间 | +|---|---| +| Phase 1 | **1 天** | +| Phase 2 | **1 天** | +| Phase 3 | **1.5 天** | +| Phase 4 | **2.5 天** | +| Phase 5 | **1.5 天** | +| Phase 6 | **1.5 天** | +| **合计** | **~9 天** | + +AI 辅助开发可能压缩到 5-6 个工作日。 + +--- + +## 🚀 建议执行顺序 + +1. **先合并当前 `feat/hermes-v0.14.1-providers` PR**（dashboard + sidebar 新样式 + env-editor + skeleton scope） +2. **再开 Phase 1 分支** `feat/hermes-logs-memory-refactor`，按此规划交付 +3. Phase 2-6 每个都独立分支 + PR，按优先级排 + +这样用户可以： +- 每次只 review 一个 PR +- 任一阶段失败不会阻塞前面的工作 +- 可以随时暂停，保留已完成的阶段成果 + +--- + +## 📎 参考实现 + +- 官方 Vue UI：`.tmp/hermes-web-ui/packages/client/src/views/hermes/*.vue` +- 官方 Server：`.tmp/hermes-web-ui/packages/server/src/services/hermes/*.ts` +- 官方 DB 层：`.tmp/hermes-web-ui/packages/server/src/db/hermes/*.ts` +- ClawPanel 现有：`src/engines/hermes/pages/*.js`、`src-tauri/src/commands/hermes.rs` +- 设计系统：`design-system/clawpanel/MASTER.md`、`src/engines/hermes/style/hermes.css` diff --git a/public/images/xintian/logo-icon-128.png b/public/images/xintian/logo-icon-128.png new file mode 100644 index 0000000..5a53a67 Binary files /dev/null and b/public/images/xintian/logo-icon-128.png differ diff --git a/public/images/xintian/logo-icon-256.png b/public/images/xintian/logo-icon-256.png new file mode 100644 index 0000000..920706d Binary files /dev/null and b/public/images/xintian/logo-icon-256.png differ diff --git a/public/images/xintian/logo-icon-64.png b/public/images/xintian/logo-icon-64.png new file mode 100644 index 0000000..579c096 Binary files /dev/null and b/public/images/xintian/logo-icon-64.png differ diff --git a/scripts/dev-api.js b/scripts/dev-api.js index a85faed..45e6642 100644 --- a/scripts/dev-api.js +++ b/scripts/dev-api.js @@ -25,6 +25,16 @@ function hermesHome() { return process.env.HERMES_HOME || HERMES_HOME } +/** Resolve memory kind (memory|user|soul) → markdown file name. */ +function memoryFileName(kind) { + switch (kind) { + case 'memory': return 'MEMORY.md' + case 'user': return 'USER.md' + case 'soul': return 'SOUL.md' + default: return null + } +} + function uvBinDir() { if (isWindows) { const appdata = process.env.APPDATA @@ -6996,7 +7006,7 @@ const handlers = { const envPath = path.join(hermesHome(), '.env') if (!fs.existsSync(envPath)) return [] const raw = fs.readFileSync(envPath, 'utf8') - const managed = new Set(this._hermesManagedEnvKeys()) + const managed = new Set(handlers._hermesManagedEnvKeys()) const seen = new Set() const out = [] for (const line of raw.split('\n')) { @@ -7018,7 +7028,7 @@ const handlers = { if (!/^[A-Z0-9_]+$/i.test(key)) { throw new Error(`Invalid env var key '${key}': only [A-Z0-9_] are allowed`) } - const managed = new Set(this._hermesManagedEnvKeys()) + const managed = new Set(handlers._hermesManagedEnvKeys()) if (managed.has(key)) { throw new Error(`'${key}' is managed by ClawPanel; please configure it via the provider setup page`) } @@ -7049,7 +7059,7 @@ const handlers = { hermes_env_delete({ key } = {}) { key = (key || '').trim() if (!key) throw new Error('Key cannot be empty') - const managed = new Set(this._hermesManagedEnvKeys()) + const managed = new Set(handlers._hermesManagedEnvKeys()) if (managed.has(key)) { throw new Error(`'${key}' is managed by ClawPanel; please configure it via the provider setup page`) } @@ -7071,6 +7081,121 @@ const handlers = { return null }, + hermes_env_reveal({ key } = {}) { + key = (key || '').trim() + if (!key) throw new Error('Key cannot be empty') + const envPath = path.join(hermesHome(), '.env') + if (!fs.existsSync(envPath)) throw new Error('.env not found') + for (const line of fs.readFileSync(envPath, 'utf8').split('\n')) { + const t = line.trim() + if (!t || t.startsWith('#')) continue + const eq = t.indexOf('=') + if (eq > 0 && t.slice(0, eq).trim() === key) return { key, value: t.slice(eq + 1) } + } + throw new Error(`${key} not found in .env`) + }, + + hermes_config_raw_read() { + const configPath = path.join(hermesHome(), 'config.yaml') + return { yaml: fs.existsSync(configPath) ? fs.readFileSync(configPath, 'utf8') : '' } + }, + + hermes_config_raw_write({ yamlText } = {}) { + const configPath = path.join(hermesHome(), 'config.yaml') + fs.mkdirSync(path.dirname(configPath), { recursive: true }) + if (fs.existsSync(configPath)) fs.copyFileSync(configPath, `${configPath}.bak-${Math.floor(Date.now() / 1000)}`) + fs.writeFileSync(configPath, yamlText || '') + return { ok: true } + }, + + hermes_dashboard_themes() { + const configPath = path.join(hermesHome(), 'config.yaml') + const raw = fs.existsSync(configPath) ? fs.readFileSync(configPath, 'utf8') : '' + const active = (raw.match(/^\s*theme:\s*["']?([^"'\n#]+)["']?/m)?.[1] || 'default').trim() + const themes = [ + { name: 'default', label: 'Default', description: 'Hermes default dashboard theme' }, + { name: 'midnight', label: 'Midnight', description: 'Dark blue dashboard theme' }, + { name: 'ember', label: 'Ember', description: 'Warm dashboard theme' }, + { name: 'mono', label: 'Mono', description: 'Monochrome dashboard theme' }, + { name: 'cyberpunk', label: 'Cyberpunk', description: 'Neon dashboard theme' }, + { name: 'rose', label: 'Rose', description: 'Soft rose dashboard theme' }, + ] + const dir = path.join(hermesHome(), 'dashboard-themes') + if (fs.existsSync(dir)) { + for (const file of fs.readdirSync(dir)) { + if (!/\.ya?ml$/i.test(file)) continue + const name = path.basename(file).replace(/\.ya?ml$/i, '') + if (!themes.some(t => t.name === name)) themes.push({ name, label: name, description: 'User dashboard theme' }) + } + } + return { themes, active } + }, + + hermes_dashboard_theme_set({ name } = {}) { + name = (name || '').trim() + if (!name) throw new Error('Theme name cannot be empty') + const configPath = path.join(hermesHome(), 'config.yaml') + fs.mkdirSync(path.dirname(configPath), { recursive: true }) + const raw = fs.existsSync(configPath) ? fs.readFileSync(configPath, 'utf8') : '' + let content + if (/^dashboard:\s*$/m.test(raw)) { + content = /^\s+theme:/m.test(raw) + ? raw.replace(/^(\s+)theme:.*$/m, `$1theme: ${name}`) + : raw.replace(/^dashboard:\s*$/m, `dashboard:\n theme: ${name}`) + } else { + content = `${raw.replace(/\s*$/, '')}\n\ndashboard:\n theme: ${name}\n` + } + fs.writeFileSync(configPath, content) + return { ok: true, theme: name } + }, + + hermes_dashboard_plugins() { + const root = path.join(hermesHome(), 'plugins') + if (!fs.existsSync(root)) return [] + const out = [] + const seen = new Set() + for (const name of fs.readdirSync(root)) { + const dir = path.join(root, name) + const manifest = path.join(dir, 'dashboard', 'manifest.json') + if (!fs.existsSync(manifest)) continue + try { + const data = JSON.parse(fs.readFileSync(manifest, 'utf8')) + const id = data.name || name + if (!id || seen.has(id)) continue + seen.add(id) + out.push({ + name: id, + label: data.label || id, + description: data.description || '', + icon: data.icon || 'Puzzle', + version: data.version || '0.0.0', + tab: data.tab || { path: `/${id}`, position: 'end' }, + slots: data.slots || [], + entry: data.entry || 'dist/index.js', + css: data.css || null, + has_api: !!data.api, + source: 'user', + }) + } catch {} + } + return out + }, + + hermes_dashboard_plugins_rescan() { + return { ok: true, count: handlers.hermes_dashboard_plugins().length } + }, + + hermes_toolsets_list() { + const r = runHermesSilent('hermes', ['tools', 'list', '--platform', 'cli']) + return { raw: r.ok ? r.stdout : '' } + }, + + hermes_cron_jobs_list() { + const jobsPath = path.join(hermesHome(), 'cron', 'jobs.json') + if (!fs.existsSync(jobsPath)) return [] + return JSON.parse(fs.readFileSync(jobsPath, 'utf8')) + }, + async hermes_fetch_models({ baseUrl, apiKey, apiType, provider: _provider } = {}) { const api = apiType || 'openai' let base = baseUrl.replace(/\/+$/, '') @@ -7196,8 +7321,10 @@ const handlers = { // Hermes Sessions / Logs / Skills / Memory // ========================================================================= - hermes_sessions_list({ source, limit } = {}) { - const args = ['sessions', 'export', '-'] + hermes_sessions_list({ source, limit, profile } = {}) { + const args = [] + if (profile) args.push('--profile', profile) + args.push('sessions', 'export', '-') if (source) args.push('--source', source) const r = runHermesSilent('hermes', args) if (!r.ok) return [] @@ -7207,6 +7334,14 @@ const handlers = { if (!t) continue try { const obj = JSON.parse(t) + // `started_at` may arrive as POSIX seconds from the Hermes CLI. Fall + // back to parsing `created_at` as ISO8601 so the Usage view can group + // sessions by day even on older Hermes builds. + let startedAt = typeof obj.started_at === 'number' ? obj.started_at : 0 + if (!startedAt && obj.created_at) { + const ms = Date.parse(obj.created_at) + if (!Number.isNaN(ms)) startedAt = Math.floor(ms / 1000) + } sessions.push({ id: obj.session_id || obj.id || '', title: obj.title || obj.name || '', @@ -7215,6 +7350,14 @@ const handlers = { created_at: obj.created_at || obj.createdAt || '', updated_at: obj.updated_at || obj.updatedAt || '', message_count: obj.message_count || (obj.messages ? obj.messages.length : 0), + // Usage analytics fields (match Rust backend shape). + started_at: startedAt, + input_tokens: Number(obj.input_tokens || 0), + output_tokens: Number(obj.output_tokens || 0), + cache_read_tokens: Number(obj.cache_read_tokens || 0), + cache_write_tokens: Number(obj.cache_write_tokens || 0), + estimated_cost_usd: typeof obj.estimated_cost_usd === 'number' ? obj.estimated_cost_usd : null, + actual_cost_usd: typeof obj.actual_cost_usd === 'number' ? obj.actual_cost_usd : null, }) } catch {} } @@ -7223,9 +7366,127 @@ const handlers = { return sessions }, - hermes_session_detail({ sessionId } = {}) { + hermes_sessions_summary_list({ source, limit, profile } = {}) { + const lim = Math.max(1, Math.min(Number(limit || 80), 500)) + const args = [] + if (profile) args.push('--profile', profile) + args.push('sessions', 'list', '--limit', String(lim)) + if (source) args.push('--source', source) + const r = runHermesSilent('hermes', args) + if (!r.ok) return [] + const sessions = [] + let hasTitles = false + for (const line of r.stdout.split('\n')) { + const trimmed = line.trim() + if (!trimmed || trimmed === 'No sessions found.' || trimmed.startsWith('─')) continue + if (trimmed.includes('Title') && trimmed.includes('Preview') && trimmed.includes('ID')) { hasTitles = true; continue } + if (trimmed.includes('Preview') && trimmed.includes('Last Active') && trimmed.includes('ID')) { hasTitles = false; continue } + const cols = trimmed.split(/\s{2,}/).filter(Boolean) + if (cols.length < 3) continue + const id = cols[cols.length - 1] + if (!id) continue + if (hasTitles) { + sessions.push({ + id, + title: cols[0] === '—' ? '' : cols[0], + source: source || '', + model: '', + created_at: '', + updated_at: '', + last_active_label: cols[2] || '', + preview: cols[1] || '', + message_count: 0, + input_tokens: 0, + output_tokens: 0, + }) + } else { + sessions.push({ + id, + title: '', + source: cols[2] || source || '', + model: '', + created_at: '', + updated_at: '', + last_active_label: cols[1] || '', + preview: cols[0] || '', + message_count: 0, + input_tokens: 0, + output_tokens: 0, + }) + } + } + return sessions + }, + + async hermes_usage_analytics({ days = 30, profile } = {}) { + days = Math.max(1, Math.min(Number(days || 30), 365)) + const cutoff = Math.floor(Date.now() / 1000) - days * 86400 + const sessions = await handlers.hermes_sessions_list({ profile }) + const daily = new Map() + const byModel = new Map() + const totals = { + total_input: 0, + total_output: 0, + total_cache_read: 0, + total_cache_write: 0, + total_estimated_cost: 0, + total_actual_cost: 0, + total_sessions: 0, + total_api_calls: 0, + } + for (const s of Array.isArray(sessions) ? sessions : []) { + const started = Number(s.started_at || 0) + if (started > 0 && started < cutoff) continue + const input = Number(s.input_tokens || 0) + const output = Number(s.output_tokens || 0) + const cacheRead = Number(s.cache_read_tokens || 0) + const cacheWrite = Number(s.cache_write_tokens || 0) + const estimated = Number(s.estimated_cost_usd || 0) + const actual = Number(s.actual_cost_usd || 0) + totals.total_input += input + totals.total_output += output + totals.total_cache_read += cacheRead + totals.total_cache_write += cacheWrite + totals.total_estimated_cost += estimated + totals.total_actual_cost += actual + totals.total_sessions += 1 + const day = started > 0 ? new Date(started * 1000).toISOString().slice(0, 10) : 'unknown' + if (!daily.has(day)) daily.set(day, { day, input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, estimated_cost: 0, actual_cost: 0, sessions: 0 }) + const d = daily.get(day) + d.input_tokens += input + d.output_tokens += output + d.cache_read_tokens += cacheRead + d.estimated_cost += estimated + d.actual_cost += actual + d.sessions += 1 + const model = s.model || '' + if (model) { + if (!byModel.has(model)) byModel.set(model, { model, input_tokens: 0, output_tokens: 0, estimated_cost: 0, sessions: 0 }) + const m = byModel.get(model) + m.input_tokens += input + m.output_tokens += output + m.estimated_cost += estimated + m.sessions += 1 + } + } + return { + daily: [...daily.values()], + by_model: [...byModel.values()].sort((a, b) => (b.input_tokens + b.output_tokens) - (a.input_tokens + a.output_tokens)), + totals, + period_days: days, + skills: { + summary: { total_skill_loads: 0, total_skill_edits: 0, total_skill_actions: 0, distinct_skills_used: 0 }, + top_skills: [], + }, + } + }, + + hermes_session_detail({ sessionId, profile } = {}) { if (!sessionId) throw new Error('sessionId is required') - const r = runHermesSilent('hermes', ['sessions', 'export', '-']) + const args = [] + if (profile) args.push('--profile', profile) + args.push('sessions', 'export', '-', '--session-id', sessionId) + const r = runHermesSilent('hermes', args) if (!r.ok) throw new Error('Failed to read sessions') for (const line of r.stdout.split('\n')) { const t = line.trim() @@ -7251,20 +7512,67 @@ const handlers = { throw new Error('Session not found') }, - hermes_session_delete({ sessionId } = {}) { + hermes_session_delete({ sessionId, profile } = {}) { if (!sessionId) throw new Error('sessionId is required') - const r = runHermesSilent('hermes', ['sessions', 'delete', sessionId, '--yes']) + const args = [] + if (profile) args.push('--profile', profile) + args.push('sessions', 'delete', sessionId, '--yes') + const r = runHermesSilent('hermes', args) if (!r.ok) throw new Error(`Failed to delete session: ${r.stderr || 'unknown error'}`) return 'ok' }, - hermes_session_rename({ sessionId, title } = {}) { + hermes_session_rename({ sessionId, title, profile } = {}) { if (!sessionId || !title) throw new Error('sessionId and title are required') - const r = runHermesSilent('hermes', ['sessions', 'rename', sessionId, title]) + const args = [] + if (profile) args.push('--profile', profile) + args.push('sessions', 'rename', sessionId, title) + const r = runHermesSilent('hermes', args) if (!r.ok) throw new Error(`Failed to rename session: ${r.stderr || 'unknown error'}`) return 'ok' }, + hermes_profiles_list() { + const r = runHermesSilent('hermes', ['profile', 'list']) + if (!r.ok) return { active: 'default', profiles: [] } + let active = 'default' + const profiles = [] + for (const line of r.stdout.split('\n')) { + const trimmed = line.trim() + if (!trimmed || trimmed.includes('Profile') || trimmed.startsWith('─') || trimmed.startsWith('-')) continue + const isActive = trimmed.startsWith('◆') + const row = trimmed.replace(/^◆/, '').trim() + const parts = row.split(/\s+/) + if (parts.length < 3) continue + const name = parts[0] + if (name !== 'default' && !/^[a-z0-9][a-z0-9_-]{0,63}$/.test(name)) continue + const gatewayIdx = parts.findIndex(p => p === 'running' || p === 'stopped') + if (gatewayIdx <= 1) continue + const model = parts.slice(1, gatewayIdx).join(' ') + const alias = parts[gatewayIdx + 1] || '' + if (isActive) active = name + profiles.push({ + name, + active: isActive, + model: model === '—' ? '' : model, + gatewayRunning: parts[gatewayIdx] === 'running', + alias: alias === '—' ? '' : alias, + }) + } + if (!profiles.some(p => p.active)) { + const d = profiles.find(p => p.name === 'default') + if (d) d.active = true + } + return { active, profiles } + }, + + hermes_profile_use({ name } = {}) { + if (!name) throw new Error('name is required') + const r = runHermesSilent('hermes', ['profile', 'use', name]) + if (!r.ok) throw new Error(`Failed to switch profile: ${r.stderr || 'unknown error'}`) + return 'ok' + }, + hermes_logs_list() { const r = runHermesSilent('hermes', ['logs', 'list']) if (!r.ok) { @@ -7318,47 +7626,99 @@ const handlers = { hermes_skills_list() { const skillsDir = path.join(hermesHome(), 'skills') if (!fs.existsSync(skillsDir)) return [] + const disabled = readHermesDisabledSkills() + const isEnabled = (name) => !disabled.includes(name) + const categories = [] try { const entries = fs.readdirSync(skillsDir, { withFileTypes: true }) for (const entry of entries) { + if (entry.name.startsWith('.')) continue if (entry.isDirectory()) { const catDir = path.join(skillsDir, entry.name) + // Category description from DESCRIPTION.md if present + let catDesc = '' + try { + const dmPath = path.join(catDir, 'DESCRIPTION.md') + if (fs.existsSync(dmPath)) { + const raw = fs.readFileSync(dmPath, 'utf8') + const heading = raw.match(/^#\s+(.+)/m) + catDesc = (heading ? heading[1] : raw.trim().split('\n')[0] || '').trim().slice(0, 200) + } + } catch {} + const skills = [] - for (const file of fs.readdirSync(catDir)) { - if (!file.endsWith('.md')) continue - const filePath = path.join(catDir, file) + for (const sub of fs.readdirSync(catDir, { withFileTypes: true })) { + if (sub.name === 'DESCRIPTION.md') continue + + // v0.14.1 structured skill: SKILL.md inside a directory + if (sub.isDirectory()) { + const skillMd = path.join(catDir, sub.name, 'SKILL.md') + if (!fs.existsSync(skillMd)) continue + const content = fs.readFileSync(skillMd, 'utf8') + const nameMatch = content.match(/^#\s+(.+)/m) + const descMatch = content.match(/^[^#\n].{10,}/m) + skills.push({ + file: sub.name, + name: nameMatch ? nameMatch[1].trim() : sub.name, + slug: sub.name, + description: descMatch ? descMatch[0].trim().slice(0, 200) : '', + path: skillMd, + skill_dir: path.join(catDir, sub.name), + isDir: true, + enabled: isEnabled(sub.name), + }) + continue + } + + if (!sub.name.endsWith('.md')) continue + const filePath = path.join(catDir, sub.name) const content = fs.readFileSync(filePath, 'utf8') const nameMatch = content.match(/^#\s+(.+)/m) - const descMatch = content.match(/^(?:##\s+)?(?:Description|描述)[:\s]*(.+)/mi) || content.match(/^[^#\n].{10,}/m) + const descMatch = content.match(/^[^#\n].{10,}/m) + const slug = sub.name.replace(/\.md$/, '') skills.push({ - file: file, - name: nameMatch ? nameMatch[1].trim() : file.replace('.md', ''), - description: descMatch ? descMatch[1].trim().slice(0, 200) : '', + file: sub.name, + name: nameMatch ? nameMatch[1].trim() : slug, + slug, + description: descMatch ? descMatch[0].trim().slice(0, 200) : '', path: filePath, + isDir: false, + enabled: isEnabled(slug), }) } + if (skills.length > 0) { - categories.push({ category: entry.name, skills }) + skills.sort((a, b) => a.name.localeCompare(b.name)) + categories.push({ category: entry.name, description: catDesc, skills }) } - } else if (entry.name.endsWith('.md')) { - // Top-level skill + } else if (entry.name.endsWith('.md') && entry.name !== 'DESCRIPTION.md') { const filePath = path.join(skillsDir, entry.name) const content = fs.readFileSync(filePath, 'utf8') const nameMatch = content.match(/^#\s+(.+)/m) + const slug = entry.name.replace(/\.md$/, '') categories.push({ category: '_root', - skills: [{ file: entry.name, name: nameMatch ? nameMatch[1].trim() : entry.name.replace('.md', ''), description: '', path: filePath }] + description: '', + skills: [{ + file: entry.name, + name: nameMatch ? nameMatch[1].trim() : slug, + slug, + description: '', + path: filePath, + isDir: false, + enabled: isEnabled(slug), + }], }) } } } catch {} + categories.sort((a, b) => a.category.localeCompare(b.category)) return categories }, hermes_skill_detail({ filePath } = {}) { if (!filePath) throw new Error('filePath is required') - // Security: ensure path is within hermes skills dir const skillsDir = path.join(hermesHome(), 'skills') const resolved = path.resolve(filePath) if (!resolved.startsWith(skillsDir)) throw new Error('Access denied') @@ -7366,9 +7726,57 @@ const handlers = { return fs.readFileSync(resolved, 'utf8') }, + hermes_skill_toggle({ name, enabled } = {}) { + if (!name) throw new Error('Skill name is required') + const configPath = path.join(hermesHome(), 'config.yaml') + if (!fs.existsSync(configPath)) throw new Error('config.yaml not found') + const raw = fs.readFileSync(configPath, 'utf8') + // Backup + const backup = path.join(hermesHome(), `config.yaml.bak-${Math.floor(Date.now() / 1000)}`) + try { fs.writeFileSync(backup, raw) } catch {} + const patched = patchHermesYamlToggleSkill(raw, name, !!enabled) + fs.writeFileSync(configPath, patched) + return { ok: true, skill: name, enabled: !!enabled, backup } + }, + + hermes_skill_files({ category, skill } = {}) { + if (!category || !skill) throw new Error('category and skill are required') + const skillDir = path.join(hermesHome(), 'skills', category, skill) + if (!fs.existsSync(skillDir) || !fs.statSync(skillDir).isDirectory()) return [] + const out = [] + const walk = (root, relBase) => { + for (const entry of fs.readdirSync(root, { withFileTypes: true })) { + if (relBase === '' && entry.name === 'SKILL.md') continue + const rel = relBase ? `${relBase}/${entry.name}` : entry.name + const full = path.join(root, entry.name) + const isDir = entry.isDirectory() + out.push({ path: rel, name: entry.name, isDir }) + if (isDir) walk(full, rel) + } + } + walk(skillDir, '') + out.sort((a, b) => a.path.localeCompare(b.path)) + return out + }, + + hermes_skill_write({ filePath, content } = {}) { + if (!filePath) throw new Error('filePath is required') + if (content == null) throw new Error('content is required') + const skillsDir = path.join(hermesHome(), 'skills') + const targetAbs = path.isAbsolute(filePath) ? filePath : path.join(skillsDir, filePath) + const parent = path.dirname(targetAbs) + fs.mkdirSync(parent, { recursive: true }) + const parentReal = fs.realpathSync(parent) + const skillsReal = fs.realpathSync(skillsDir) + if (!parentReal.startsWith(skillsReal)) throw new Error('Access denied') + fs.writeFileSync(targetAbs, content, 'utf8') + return 'ok' + }, + hermes_memory_read({ type = 'memory' } = {}) { const home = hermesHome() - const fileName = type === 'user' ? 'USER.md' : 'MEMORY.md' + const fileName = memoryFileName(type) + if (!fileName) throw new Error(`Invalid memory kind '${type}' (expected memory|user|soul)`) const filePath = path.join(home, 'memories', fileName) if (!fs.existsSync(filePath)) return '' return fs.readFileSync(filePath, 'utf8') @@ -7377,14 +7785,54 @@ const handlers = { hermes_memory_write({ type = 'memory', content } = {}) { if (content == null) throw new Error('content is required') const home = hermesHome() + const fileName = memoryFileName(type) + if (!fileName) throw new Error(`Invalid memory kind '${type}' (expected memory|user|soul)`) const memDir = path.join(home, 'memories') fs.mkdirSync(memDir, { recursive: true }) - const fileName = type === 'user' ? 'USER.md' : 'MEMORY.md' const filePath = path.join(memDir, fileName) fs.writeFileSync(filePath, content, 'utf8') return 'ok' }, + hermes_memory_read_all() { + const home = hermesHome() + const memDir = path.join(home, 'memories') + const readSection = (kind) => { + const name = memoryFileName(kind) + if (!name) return ['', null] + const p = path.join(memDir, name) + if (!fs.existsSync(p)) return ['', null] + const content = fs.readFileSync(p, 'utf8') + const mtime = Math.floor(fs.statSync(p).mtimeMs / 1000) + return [content, mtime] + } + const [memory, memory_mtime] = readSection('memory') + const [user, user_mtime] = readSection('user') + const [soul, soul_mtime] = readSection('soul') + return { memory, user, soul, memory_mtime, user_mtime, soul_mtime } + }, + + hermes_logs_download({ name, saveToDisk = false } = {}) { + if (!name) throw new Error('log file name is required') + // Reject traversal (mirror the Rust-side check) + if (name.includes('..') || name.includes('/') || name.includes('\\')) { + throw new Error('Invalid log file name') + } + const logsDir = path.join(hermesHome(), 'logs') + const filePath = path.join(logsDir, name) + const resolved = fs.realpathSync(filePath) + const canonDir = fs.realpathSync(logsDir) + if (!resolved.startsWith(canonDir)) throw new Error('Access denied') + const content = fs.readFileSync(resolved, 'utf8') + if (!saveToDisk) return content + const outDir = path.join(os.homedir(), 'Downloads', 'ClawPanel') + fs.mkdirSync(outDir, { recursive: true }) + const safeName = name.replace(/[\\/:*?"<>|]/g, '_') + const outPath = path.join(outDir, safeName) + fs.writeFileSync(outPath, content) + return { path: outPath } + }, + async update_hermes() { const uvPath = path.join(uvBinDir(), isWindows ? 'uv.exe' : 'uv') const uv = fs.existsSync(uvPath) ? uvPath : 'uv' diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json index e90a679..2b8a729 100644 --- a/src-tauri/capabilities/default.json +++ b/src-tauri/capabilities/default.json @@ -4,6 +4,7 @@ "windows": ["main"], "permissions": [ "core:default", + "core:window:allow-set-theme", "shell:allow-open", "autostart:allow-enable", "autostart:allow-disable", diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json index 0ced069..3deb26d 100644 --- a/src-tauri/gen/schemas/capabilities.json +++ b/src-tauri/gen/schemas/capabilities.json @@ -1 +1 @@ -{"default":{"identifier":"default","description":"ClawPanel 默认权限","local":true,"windows":["main"],"permissions":["core:default","shell:allow-open","autostart:allow-enable","autostart:allow-disable","autostart:allow-is-enabled"]}} \ No newline at end of file +{"default":{"identifier":"default","description":"ClawPanel 默认权限","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-set-theme","shell:allow-open","autostart:allow-enable","autostart:allow-disable","autostart:allow-is-enabled"]}} \ No newline at end of file diff --git a/src-tauri/src/commands/hermes.rs b/src-tauri/src/commands/hermes.rs index ee3eec7..ad56cb5 100644 --- a/src-tauri/src/commands/hermes.rs +++ b/src-tauri/src/commands/hermes.rs @@ -2745,15 +2745,20 @@ pub async fn hermes_agent_run( pub async fn hermes_sessions_list( source: Option, limit: Option, + profile: Option, ) -> Result { - let mut args = vec!["sessions", "export", "-"]; - let source_owned; - if let Some(s) = &source { - source_owned = s.clone(); - args.push("--source"); - args.push(&source_owned); + let mut args: Vec = Vec::new(); + if let Some(p) = profile.as_ref().map(|s| s.trim()).filter(|s| !s.is_empty()) { + args.push("--profile".into()); + args.push(p.to_string()); } - let output = match run_silent("hermes", &args) { + args.extend(["sessions", "export", "-"].iter().map(|s| s.to_string())); + if let Some(s) = source.as_ref().map(|s| s.trim()).filter(|s| !s.is_empty()) { + args.push("--source".into()); + args.push(s.to_string()); + } + let refs: Vec<&str> = args.iter().map(|s| s.as_str()).collect(); + let output = match run_silent("hermes", &refs) { Ok(s) => s, Err(_) => return Ok(serde_json::json!([])), }; @@ -2764,6 +2769,25 @@ pub async fn hermes_sessions_list( continue; } if let Ok(obj) = serde_json::from_str::(t) { + // Extra numeric fields for Usage analytics. Carry through as-is so + // the frontend can aggregate without another round-trip. Missing + // fields fall back to 0 / null rather than breaking the shape. + // + // `started_at` is a POSIX seconds timestamp produced by the + // official Hermes CLI export. We also surface it under that name + // (matching the web UI contract) so the Usage store can group + // sessions by day without needing a separate parse. + let started_at = obj + .get("started_at") + .and_then(|v| v.as_u64()) + .unwrap_or_else(|| { + // Fallback: parse `created_at` as ISO8601 → epoch seconds. + obj.get("created_at") + .and_then(|v| v.as_str()) + .and_then(|s| chrono::DateTime::parse_from_rfc3339(s).ok()) + .map(|dt| dt.timestamp() as u64) + .unwrap_or(0) + }); sessions.push(serde_json::json!({ "id": obj.get("session_id").or(obj.get("id")).and_then(|v| v.as_str()).unwrap_or(""), "title": obj.get("title").or(obj.get("name")).and_then(|v| v.as_str()).unwrap_or(""), @@ -2772,6 +2796,14 @@ pub async fn hermes_sessions_list( "created_at": obj.get("created_at").or(obj.get("createdAt")).and_then(|v| v.as_str()).unwrap_or(""), "updated_at": obj.get("updated_at").or(obj.get("updatedAt")).and_then(|v| v.as_str()).unwrap_or(""), "message_count": obj.get("message_count").and_then(|v| v.as_u64()).unwrap_or(0), + // --- Usage analytics fields --- + "started_at": started_at, + "input_tokens": obj.get("input_tokens").and_then(|v| v.as_u64()).unwrap_or(0), + "output_tokens": obj.get("output_tokens").and_then(|v| v.as_u64()).unwrap_or(0), + "cache_read_tokens": obj.get("cache_read_tokens").and_then(|v| v.as_u64()).unwrap_or(0), + "cache_write_tokens": obj.get("cache_write_tokens").and_then(|v| v.as_u64()).unwrap_or(0), + "estimated_cost_usd": obj.get("estimated_cost_usd").and_then(|v| v.as_f64()), + "actual_cost_usd": obj.get("actual_cost_usd").and_then(|v| v.as_f64()), })); } } @@ -2789,9 +2821,254 @@ pub async fn hermes_sessions_list( } #[tauri::command] -pub async fn hermes_session_detail(session_id: String) -> Result { - let output = run_silent("hermes", &["sessions", "export", "-"]) - .map_err(|e| format!("Failed to read sessions: {e}"))?; +pub async fn hermes_sessions_summary_list( + source: Option, + limit: Option, + profile: Option, +) -> Result { + let lim = limit.unwrap_or(80).clamp(1, 500); + let mut args: Vec = Vec::new(); + if let Some(p) = profile.as_ref().map(|s| s.trim()).filter(|s| !s.is_empty()) { + args.push("--profile".into()); + args.push(p.to_string()); + } + args.extend( + ["sessions", "list", "--limit"] + .iter() + .map(|s| s.to_string()), + ); + args.push(lim.to_string()); + if let Some(s) = source.as_ref().map(|s| s.trim()).filter(|s| !s.is_empty()) { + args.push("--source".into()); + args.push(s.to_string()); + } + let refs: Vec<&str> = args.iter().map(|s| s.as_str()).collect(); + let output = match run_silent("hermes", &refs) { + Ok(s) => s, + Err(_) => return Ok(serde_json::json!([])), + }; + let sep = regex::Regex::new(r"\s{2,}").map_err(|e| e.to_string())?; + let mut has_titles = false; + let mut sessions: Vec = Vec::new(); + for line in output.lines() { + let trimmed = line.trim(); + if trimmed.is_empty() || trimmed == "No sessions found." || trimmed.starts_with('─') { + continue; + } + if trimmed.contains("Title") && trimmed.contains("Preview") && trimmed.contains("ID") { + has_titles = true; + continue; + } + if trimmed.contains("Preview") && trimmed.contains("Last Active") && trimmed.contains("ID") + { + has_titles = false; + continue; + } + let cols: Vec<&str> = sep + .split(trimmed) + .filter(|s| !s.trim().is_empty()) + .collect(); + if cols.len() < 3 { + continue; + } + let id = cols.last().copied().unwrap_or("").trim(); + if id.is_empty() { + continue; + } + let (title, preview, last_active, parsed_source) = if has_titles { + let title = cols.first().copied().unwrap_or("").trim(); + let preview = cols.get(1).copied().unwrap_or("").trim(); + let last_active = cols.get(2).copied().unwrap_or("").trim(); + ( + if title == "—" { "" } else { title }, + preview, + last_active, + source.as_deref().unwrap_or(""), + ) + } else { + let preview = cols.first().copied().unwrap_or("").trim(); + let last_active = cols.get(1).copied().unwrap_or("").trim(); + let parsed_source = cols + .get(2) + .copied() + .unwrap_or(source.as_deref().unwrap_or("")) + .trim(); + ("", preview, last_active, parsed_source) + }; + sessions.push(serde_json::json!({ + "id": id, + "title": title, + "source": parsed_source, + "model": "", + "created_at": "", + "updated_at": "", + "last_active_label": last_active, + "preview": preview, + "message_count": 0, + "input_tokens": 0, + "output_tokens": 0, + })); + } + Ok(Value::Array(sessions)) +} + +#[tauri::command] +pub async fn hermes_usage_analytics( + days: Option, + profile: Option, +) -> Result { + let days = days.unwrap_or(30).clamp(1, 365); + let cutoff = chrono::Utc::now().timestamp() - (days as i64 * 86_400); + let sessions = hermes_sessions_list(None, None, profile).await?; + let mut total_input: u64 = 0; + let mut total_output: u64 = 0; + let mut total_cache_read: u64 = 0; + let mut total_cache_write: u64 = 0; + let mut total_estimated_cost = 0.0_f64; + let mut total_actual_cost = 0.0_f64; + let mut total_sessions: u64 = 0; + let mut daily: std::collections::BTreeMap> = + std::collections::BTreeMap::new(); + let mut by_model: std::collections::BTreeMap> = + std::collections::BTreeMap::new(); + if let Some(arr) = sessions.as_array() { + for s in arr { + let started = s.get("started_at").and_then(|v| v.as_i64()).unwrap_or(0); + if started > 0 && started < cutoff { + continue; + } + let input = s.get("input_tokens").and_then(|v| v.as_u64()).unwrap_or(0); + let output = s.get("output_tokens").and_then(|v| v.as_u64()).unwrap_or(0); + let cache_read = s + .get("cache_read_tokens") + .and_then(|v| v.as_u64()) + .unwrap_or(0); + let cache_write = s + .get("cache_write_tokens") + .and_then(|v| v.as_u64()) + .unwrap_or(0); + let estimated = s + .get("estimated_cost_usd") + .and_then(|v| v.as_f64()) + .unwrap_or(0.0); + let actual = s + .get("actual_cost_usd") + .and_then(|v| v.as_f64()) + .unwrap_or(0.0); + total_input += input; + total_output += output; + total_cache_read += cache_read; + total_cache_write += cache_write; + total_estimated_cost += estimated; + total_actual_cost += actual; + total_sessions += 1; + let day = if started > 0 { + chrono::DateTime::from_timestamp(started, 0) + .map(|dt| dt.format("%Y-%m-%d").to_string()) + .unwrap_or_else(|| "unknown".into()) + } else { + "unknown".into() + }; + let d = daily.entry(day.clone()).or_insert_with(|| { + let mut m = serde_json::Map::new(); + m.insert("day".into(), Value::String(day)); + m.insert("input_tokens".into(), Value::from(0_u64)); + m.insert("output_tokens".into(), Value::from(0_u64)); + m.insert("cache_read_tokens".into(), Value::from(0_u64)); + m.insert("estimated_cost".into(), Value::from(0.0)); + m.insert("actual_cost".into(), Value::from(0.0)); + m.insert("sessions".into(), Value::from(0_u64)); + m + }); + *d.get_mut("input_tokens").unwrap() = + Value::from(d["input_tokens"].as_u64().unwrap_or(0) + input); + *d.get_mut("output_tokens").unwrap() = + Value::from(d["output_tokens"].as_u64().unwrap_or(0) + output); + *d.get_mut("cache_read_tokens").unwrap() = + Value::from(d["cache_read_tokens"].as_u64().unwrap_or(0) + cache_read); + *d.get_mut("estimated_cost").unwrap() = + Value::from(d["estimated_cost"].as_f64().unwrap_or(0.0) + estimated); + *d.get_mut("actual_cost").unwrap() = + Value::from(d["actual_cost"].as_f64().unwrap_or(0.0) + actual); + *d.get_mut("sessions").unwrap() = Value::from(d["sessions"].as_u64().unwrap_or(0) + 1); + let model = s + .get("model") + .and_then(|v| v.as_str()) + .unwrap_or("") + .to_string(); + if !model.is_empty() { + let model_key = model.clone(); + let m = by_model.entry(model_key.clone()).or_insert_with(|| { + let mut row = serde_json::Map::new(); + row.insert("model".into(), Value::String(model_key)); + row.insert("input_tokens".into(), Value::from(0_u64)); + row.insert("output_tokens".into(), Value::from(0_u64)); + row.insert("estimated_cost".into(), Value::from(0.0)); + row.insert("sessions".into(), Value::from(0_u64)); + row + }); + *m.get_mut("input_tokens").unwrap() = + Value::from(m["input_tokens"].as_u64().unwrap_or(0) + input); + *m.get_mut("output_tokens").unwrap() = + Value::from(m["output_tokens"].as_u64().unwrap_or(0) + output); + *m.get_mut("estimated_cost").unwrap() = + Value::from(m["estimated_cost"].as_f64().unwrap_or(0.0) + estimated); + *m.get_mut("sessions").unwrap() = + Value::from(m["sessions"].as_u64().unwrap_or(0) + 1); + } + } + } + let mut models: Vec = by_model.into_values().map(Value::Object).collect(); + models.sort_by(|a, b| { + let at = a["input_tokens"].as_u64().unwrap_or(0) + a["output_tokens"].as_u64().unwrap_or(0); + let bt = b["input_tokens"].as_u64().unwrap_or(0) + b["output_tokens"].as_u64().unwrap_or(0); + bt.cmp(&at) + }); + Ok(serde_json::json!({ + "daily": daily.into_values().map(Value::Object).collect::>(), + "by_model": models, + "totals": { + "total_input": total_input, + "total_output": total_output, + "total_cache_read": total_cache_read, + "total_cache_write": total_cache_write, + "total_estimated_cost": total_estimated_cost, + "total_actual_cost": total_actual_cost, + "total_sessions": total_sessions, + "total_api_calls": 0, + }, + "period_days": days, + "skills": { + "summary": { + "total_skill_loads": 0, + "total_skill_edits": 0, + "total_skill_actions": 0, + "distinct_skills_used": 0, + }, + "top_skills": [], + }, + })) +} + +#[tauri::command] +pub async fn hermes_session_detail( + session_id: String, + profile: Option, +) -> Result { + let mut args: Vec = Vec::new(); + if let Some(p) = profile.as_ref().map(|s| s.trim()).filter(|s| !s.is_empty()) { + args.push("--profile".into()); + args.push(p.to_string()); + } + args.extend( + ["sessions", "export", "-", "--session-id"] + .iter() + .map(|s| s.to_string()), + ); + args.push(session_id.clone()); + let refs: Vec<&str> = args.iter().map(|s| s.as_str()).collect(); + let output = + run_silent("hermes", &refs).map_err(|e| format!("Failed to read sessions: {e}"))?; for line in output.lines() { let t = line.trim(); if t.is_empty() { @@ -2837,14 +3114,113 @@ pub async fn hermes_session_detail(session_id: String) -> Result } #[tauri::command] -pub async fn hermes_session_delete(session_id: String) -> Result { - run_silent("hermes", &["sessions", "delete", &session_id, "--yes"])?; +pub async fn hermes_session_delete( + session_id: String, + profile: Option, +) -> Result { + let mut args: Vec = Vec::new(); + if let Some(p) = profile.as_ref().map(|s| s.trim()).filter(|s| !s.is_empty()) { + args.push("--profile".into()); + args.push(p.to_string()); + } + args.extend(["sessions", "delete"].iter().map(|s| s.to_string())); + args.push(session_id); + args.push("--yes".into()); + let refs: Vec<&str> = args.iter().map(|s| s.as_str()).collect(); + run_silent("hermes", &refs)?; Ok("ok".into()) } #[tauri::command] -pub async fn hermes_session_rename(session_id: String, title: String) -> Result { - run_silent("hermes", &["sessions", "rename", &session_id, &title])?; +pub async fn hermes_session_rename( + session_id: String, + title: String, + profile: Option, +) -> Result { + let mut args: Vec = Vec::new(); + if let Some(p) = profile.as_ref().map(|s| s.trim()).filter(|s| !s.is_empty()) { + args.push("--profile".into()); + args.push(p.to_string()); + } + args.extend(["sessions", "rename"].iter().map(|s| s.to_string())); + args.push(session_id); + args.push(title); + let refs: Vec<&str> = args.iter().map(|s| s.as_str()).collect(); + run_silent("hermes", &refs)?; + Ok("ok".into()) +} + +#[tauri::command] +pub async fn hermes_profiles_list() -> Result { + let output = match run_silent("hermes", &["profile", "list"]) { + Ok(s) => s, + Err(_) => return Ok(serde_json::json!({ "active": "default", "profiles": [] })), + }; + let mut active = "default".to_string(); + let mut profiles: Vec = Vec::new(); + for line in output.lines() { + let trimmed = line.trim(); + if trimmed.is_empty() + || trimmed.contains("Profile") + || trimmed.starts_with('─') + || trimmed.starts_with('-') + { + continue; + } + let is_active = trimmed.starts_with('◆'); + let row = trimmed.trim_start_matches('◆').trim(); + let parts: Vec<&str> = row.split_whitespace().collect(); + if parts.len() < 3 { + continue; + } + let name = parts[0]; + if name != "default" + && !name + .chars() + .all(|c| c.is_ascii_lowercase() || c.is_ascii_digit() || c == '_' || c == '-') + { + continue; + } + let gateway_idx = parts + .iter() + .position(|p| *p == "running" || *p == "stopped") + .unwrap_or(2); + if gateway_idx <= 1 || gateway_idx >= parts.len() { + continue; + } + let model = parts[1..gateway_idx].join(" "); + let gateway = parts[gateway_idx]; + let alias = parts.get(gateway_idx + 1).copied().unwrap_or("—"); + if is_active { + active = name.to_string(); + } + profiles.push(serde_json::json!({ + "name": name, + "active": is_active, + "model": if model == "—" { "" } else { &model }, + "gatewayRunning": gateway == "running", + "alias": if alias == "—" { "" } else { alias }, + })); + } + if !profiles + .iter() + .any(|p| p.get("active").and_then(|v| v.as_bool()).unwrap_or(false)) + { + if let Some(p) = profiles + .iter_mut() + .find(|p| p.get("name").and_then(|v| v.as_str()) == Some("default")) + { + if let Some(obj) = p.as_object_mut() { + obj.insert("active".to_string(), Value::Bool(true)); + } + } + } + Ok(serde_json::json!({ "active": active, "profiles": profiles })) +} + +#[tauri::command] +pub async fn hermes_profile_use(name: String) -> Result { + run_silent("hermes", &["profile", "use", &name])?; Ok("ok".into()) } @@ -3014,84 +3390,219 @@ fn parse_log_line(line: &str) -> ParsedLogLine { } } +/// Extract the first `# Heading` or the first long prose line from Markdown, +/// used as a skill's canonical name/description. Mirrors hermes-web-ui's +/// `extractDescription()` behaviour — first non-empty/non-heading line, +/// truncated to 200 chars. +fn md_first_heading(content: &str) -> Option { + content + .lines() + .find(|l| l.starts_with("# ")) + .map(|l| l[2..].trim().to_string()) +} + +fn md_first_description(content: &str) -> String { + content + .lines() + .find(|l| !l.starts_with('#') && !l.trim().is_empty() && l.trim().len() > 10) + .map(|l| { + let s = l.trim(); + if s.len() > 200 { + format!("{}...", &s[..200]) + } else { + s.to_string() + } + }) + .unwrap_or_default() +} + +/// Read `config.yaml` and return the list of `skills.disabled` entries. +/// Gracefully handles missing file / missing section → empty list. +/// +/// The disable mechanism matches upstream `hermes-web-ui`: +/// +/// ```yaml +/// skills: +/// disabled: +/// - web_search +/// - file_tools +/// ``` +fn read_disabled_skills() -> Vec { + let config_path = hermes_home().join("config.yaml"); + let raw = match std::fs::read_to_string(&config_path) { + Ok(s) => s, + Err(_) => return Vec::new(), + }; + let mut disabled: Vec = Vec::new(); + let mut in_skills = false; + let mut in_disabled = false; + for line in raw.lines() { + // Strip trailing comments. + let line = match line.find('#') { + Some(i) => &line[..i], + None => line, + }; + let trimmed_full = line.trim_end(); + if trimmed_full.is_empty() { + continue; + } + let indent = trimmed_full.len() - trimmed_full.trim_start().len(); + let body = trimmed_full.trim_start(); + + if indent == 0 { + in_skills = body.starts_with("skills:"); + in_disabled = false; + } else if in_skills && indent == 2 && body.starts_with("disabled:") { + in_disabled = true; + } else if in_skills && in_disabled && indent >= 4 && body.starts_with("- ") { + // Strip the `- ` prefix and any surrounding quotes. + let name = body + .trim_start_matches("- ") + .trim() + .trim_matches('"') + .trim_matches('\''); + if !name.is_empty() { + disabled.push(name.to_string()); + } + } else if indent <= 2 { + // Left the disabled list. + in_disabled = false; + } + } + disabled +} + +/// Shape returned to the frontend — kept compatible with the previous +/// version (file/name/description/path) while adding `enabled` and the +/// optional `isDir`/`category` fields that `hermes-web-ui` also uses. #[tauri::command] pub async fn hermes_skills_list() -> Result { let skills_dir = hermes_home().join("skills"); if !skills_dir.exists() { return Ok(serde_json::json!([])); } + let disabled_names = read_disabled_skills(); + let is_enabled = |name: &str| -> bool { !disabled_names.iter().any(|d| d == name) }; + let mut categories: Vec = Vec::new(); let entries = std::fs::read_dir(&skills_dir).map_err(|e| format!("Failed to read skills dir: {e}"))?; + for entry in entries.flatten() { let ft = match entry.file_type() { Ok(t) => t, Err(_) => continue, }; - let name = entry.file_name().to_string_lossy().to_string(); + let cat_name = entry.file_name().to_string_lossy().to_string(); + if cat_name.starts_with('.') { + continue; + } + if ft.is_dir() { - let cat_dir = skills_dir.join(&name); + let cat_dir = skills_dir.join(&cat_name); + + // Category description from optional DESCRIPTION.md + let cat_desc = std::fs::read_to_string(cat_dir.join("DESCRIPTION.md")) + .ok() + .map(|c| { + md_first_heading(&c) + .unwrap_or_else(|| c.trim().lines().next().unwrap_or("").to_string()) + }) + .unwrap_or_default(); + let mut skills: Vec = Vec::new(); if let Ok(files) = std::fs::read_dir(&cat_dir) { for f in files.flatten() { let fname = f.file_name().to_string_lossy().to_string(); - if !fname.ends_with(".md") { + let fpath = cat_dir.join(&fname); + let ftype = match f.file_type() { + Ok(t) => t, + Err(_) => continue, + }; + + // v0.14.1 structured skill: //SKILL.md + if ftype.is_dir() { + let skill_md = fpath.join("SKILL.md"); + if !skill_md.exists() { + continue; + } + let content = std::fs::read_to_string(&skill_md).unwrap_or_default(); + let display = md_first_heading(&content).unwrap_or_else(|| fname.clone()); + let desc = md_first_description(&content); + skills.push(serde_json::json!({ + "file": fname.clone(), + "name": display, + "slug": fname.clone(), + "description": desc, + "path": skill_md.to_string_lossy(), + "skill_dir": fpath.to_string_lossy(), + "isDir": true, + "enabled": is_enabled(&fname), + })); + continue; + } + + // Legacy flat skill: /.md + if !fname.ends_with(".md") || fname == "DESCRIPTION.md" { continue; } - let fpath = cat_dir.join(&fname); let content = std::fs::read_to_string(&fpath).unwrap_or_default(); - let skill_name = content - .lines() - .find(|l| l.starts_with("# ")) - .map(|l| l[2..].trim().to_string()) - .unwrap_or_else(|| fname.trim_end_matches(".md").to_string()); - let description = content - .lines() - .find(|l| { - !l.starts_with('#') && !l.trim().is_empty() && l.trim().len() > 10 - }) - .map(|l| { - let s = l.trim(); - if s.len() > 200 { - format!("{}...", &s[..200]) - } else { - s.to_string() - } - }) - .unwrap_or_default(); + let slug = fname.trim_end_matches(".md").to_string(); + let display = md_first_heading(&content).unwrap_or_else(|| slug.clone()); + let desc = md_first_description(&content); skills.push(serde_json::json!({ "file": fname, - "name": skill_name, - "description": description, + "name": display, + "slug": slug.clone(), + "description": desc, "path": fpath.to_string_lossy(), + "isDir": false, + "enabled": is_enabled(&slug), })); } } if !skills.is_empty() { + skills.sort_by(|a, b| { + a["name"] + .as_str() + .unwrap_or("") + .cmp(b["name"].as_str().unwrap_or("")) + }); categories.push(serde_json::json!({ - "category": name, + "category": cat_name, + "description": cat_desc, "skills": skills, })); } - } else if name.ends_with(".md") { - let fpath = skills_dir.join(&name); + } else if cat_name.ends_with(".md") && cat_name != "DESCRIPTION.md" { + // Uncategorized top-level skill file. + let fpath = skills_dir.join(&cat_name); let content = std::fs::read_to_string(&fpath).unwrap_or_default(); - let skill_name = content - .lines() - .find(|l| l.starts_with("# ")) - .map(|l| l[2..].trim().to_string()) - .unwrap_or_else(|| name.trim_end_matches(".md").to_string()); + let slug = cat_name.trim_end_matches(".md").to_string(); + let display = md_first_heading(&content).unwrap_or_else(|| slug.clone()); categories.push(serde_json::json!({ "category": "_root", + "description": "", "skills": [{ - "file": name, - "name": skill_name, - "description": "", + "file": cat_name, + "name": display, + "slug": slug.clone(), + "description": md_first_description(&content), "path": fpath.to_string_lossy(), + "isDir": false, + "enabled": is_enabled(&slug), }], })); } } + + categories.sort_by(|a, b| { + a["category"] + .as_str() + .unwrap_or("") + .cmp(b["category"].as_str().unwrap_or("")) + }); + Ok(Value::Array(categories)) } @@ -3111,14 +3622,262 @@ pub async fn hermes_skill_detail(file_path: String) -> Result { std::fs::read_to_string(&canonical).map_err(|e| format!("Failed to read skill: {e}")) } +// ============================================================================ +// Skills — enable/disable toggle (Phase 3) +// ============================================================================ + +/// Toggle a skill's enabled state by mutating `config.yaml`'s +/// `skills.disabled` list. Matches the behaviour of hermes-web-ui's +/// `PUT /api/hermes/skills/toggle`. +/// +/// * `enabled = true` → remove `name` from disabled list +/// * `enabled = false` → add `name` to disabled list +/// +/// A `config.yaml.bak-` backup is written before any mutation so +/// users can always recover a broken config. +#[tauri::command] +pub async fn hermes_skill_toggle(name: String, enabled: bool) -> Result { + if name.is_empty() { + return Err("Skill name is required".into()); + } + let config_path = hermes_home().join("config.yaml"); + let raw = std::fs::read_to_string(&config_path) + .map_err(|e| format!("Failed to read config.yaml: {e}"))?; + + // Write a timestamped backup before any mutation. + let ts = std::time::SystemTime::now() + .duration_since(std::time::UNIX_EPOCH) + .map(|d| d.as_secs()) + .unwrap_or(0); + let backup_path = hermes_home().join(format!("config.yaml.bak-{ts}")); + let _ = std::fs::write(&backup_path, &raw); + + let patched = patch_yaml_toggle_skill(&raw, &name, enabled); + std::fs::write(&config_path, &patched) + .map_err(|e| format!("Failed to write config.yaml: {e}"))?; + + Ok(serde_json::json!({ + "ok": true, + "skill": name, + "enabled": enabled, + "backup": backup_path.to_string_lossy(), + })) +} + +/// YAML patcher: add/remove `name` from `skills.disabled[]`. +/// +/// Careful to preserve line ordering + indentation + other sections so that +/// user-edited comments and custom keys survive round-trips. +fn patch_yaml_toggle_skill(raw: &str, name: &str, enabled: bool) -> String { + let mut lines: Vec = raw.lines().map(str::to_string).collect(); + + // Find `skills:` top-level key. + let skills_idx = lines.iter().position(|l| { + let trimmed = l.trim_end(); + let indent = trimmed.len() - trimmed.trim_start().len(); + indent == 0 && trimmed.trim_start().starts_with("skills:") + }); + + // If no `skills:` block exists yet, synthesize one. + if skills_idx.is_none() { + if enabled { + // Already enabled (not in any disabled list). Nothing to do. + return raw.to_string(); + } + // Append a new skills.disabled block. + if !raw.is_empty() && !raw.ends_with('\n') { + lines.push(String::new()); + } + lines.push("skills:".to_string()); + lines.push(" disabled:".to_string()); + lines.push(format!(" - {name}")); + lines.push(String::new()); + return lines.join("\n"); + } + + let skills_idx = skills_idx.unwrap(); + + // Find `disabled:` under skills. + let mut disabled_idx: Option = None; + let mut i = skills_idx + 1; + while i < lines.len() { + let trimmed = lines[i].trim_end(); + let indent = trimmed.len() - trimmed.trim_start().len(); + if !trimmed.is_empty() && indent == 0 { + break; // left the skills block + } + if indent == 2 && trimmed.trim_start().starts_with("disabled:") { + disabled_idx = Some(i); + break; + } + i += 1; + } + + // Create a `disabled:` list if absent. + if disabled_idx.is_none() { + if enabled { + // Already not disabled — nothing to do. + return raw.to_string(); + } + let insert_at = skills_idx + 1; + lines.insert(insert_at, " disabled:".to_string()); + lines.insert(insert_at + 1, format!(" - {name}")); + return lines.join("\n"); + } + + let disabled_idx = disabled_idx.unwrap(); + + // Collect existing list item line indices + their values. + let mut item_rows: Vec<(usize, String)> = Vec::new(); + let mut j = disabled_idx + 1; + while j < lines.len() { + let trimmed = lines[j].trim_end(); + let indent = trimmed.len() - trimmed.trim_start().len(); + if !trimmed.is_empty() && indent < 4 { + break; + } + let body = trimmed.trim_start(); + if body.starts_with("- ") { + let v = body + .trim_start_matches("- ") + .trim() + .trim_matches('"') + .trim_matches('\'') + .to_string(); + item_rows.push((j, v)); + } + j += 1; + } + + let has_item = item_rows.iter().any(|(_, v)| v == name); + + if enabled { + // Remove all rows that match. + if !has_item { + return raw.to_string(); + } + let to_remove: Vec = item_rows + .iter() + .filter(|(_, v)| v == name) + .map(|(i, _)| *i) + .collect(); + for idx in to_remove.iter().rev() { + lines.remove(*idx); + } + } else { + if has_item { + return raw.to_string(); + } + // Insert right after the `disabled:` key line or at the end of + // existing items — whichever produces stable ordering. + let insert_at = item_rows + .last() + .map(|(i, _)| *i + 1) + .unwrap_or(disabled_idx + 1); + lines.insert(insert_at, format!(" - {name}")); + } + + lines.join("\n") +} + +/// Recursively list all files inside a skill directory. Returns an array +/// of `{ path, name, isDir }` where `path` is relative to `~/.hermes/`. +/// Skips the top-level `SKILL.md` because the UI already renders it +/// separately in the detail pane. +#[tauri::command] +pub async fn hermes_skill_files(category: String, skill: String) -> Result { + let skills_root = hermes_home().join("skills"); + let skill_dir = skills_root.join(&category).join(&skill); + if !skill_dir.exists() || !skill_dir.is_dir() { + return Ok(serde_json::json!([])); + } + + let mut out: Vec = Vec::new(); + fn walk(root: &PathBuf, rel_base: &str, out: &mut Vec) { + let entries = match std::fs::read_dir(root) { + Ok(e) => e, + Err(_) => return, + }; + for entry in entries.flatten() { + let name = entry.file_name().to_string_lossy().to_string(); + let rel = if rel_base.is_empty() { + name.clone() + } else { + format!("{rel_base}/{name}") + }; + let full = root.join(&name); + let is_dir = full.is_dir(); + // Skip the flagship SKILL.md at the root level. + if rel_base.is_empty() && name == "SKILL.md" { + continue; + } + out.push(serde_json::json!({ + "path": rel, + "name": name, + "isDir": is_dir, + })); + if is_dir { + walk(&full, &rel, out); + } + } + } + walk(&skill_dir, "", &mut out); + out.sort_by(|a, b| { + a["path"] + .as_str() + .unwrap_or("") + .cmp(b["path"].as_str().unwrap_or("")) + }); + Ok(Value::Array(out)) +} + +/// Write (create/update) a skill file. Path must be inside +/// `~/.hermes/skills/`. Intermediate directories are auto-created. +#[tauri::command] +pub async fn hermes_skill_write(file_path: String, content: String) -> Result { + let skills_dir = hermes_home().join("skills"); + let target = PathBuf::from(&file_path); + + // Ensure the target lives under the skills directory. We compare + // absolute-normalized paths to allow writing *new* files (which cannot + // be canonicalized yet) while still rejecting traversal. + let skills_canon = skills_dir + .canonicalize() + .map_err(|e| format!("Skills dir not accessible: {e}"))?; + let target_abs = if target.is_absolute() { + target.clone() + } else { + skills_dir.join(&target) + }; + let parent = target_abs + .parent() + .ok_or_else(|| "Invalid target path".to_string())?; + std::fs::create_dir_all(parent).map_err(|e| format!("Failed to create dir: {e}"))?; + let parent_canon = parent + .canonicalize() + .map_err(|e| format!("Path error: {e}"))?; + if !parent_canon.starts_with(&skills_canon) { + return Err("Access denied".into()); + } + std::fs::write(&target_abs, &content).map_err(|e| format!("Failed to write skill: {e}"))?; + Ok("ok".into()) +} + +/// Resolve `memory|user|soul` to its filename inside `~/.hermes/memories/`. +fn memory_file_name(kind: &str) -> Option<&'static str> { + match kind { + "memory" => Some("MEMORY.md"), + "user" => Some("USER.md"), + "soul" => Some("SOUL.md"), + _ => None, + } +} + #[tauri::command] pub async fn hermes_memory_read(r#type: Option) -> Result { let kind = r#type.as_deref().unwrap_or("memory"); - let file_name = if kind == "user" { - "USER.md" - } else { - "MEMORY.md" - }; + let file_name = memory_file_name(kind) + .ok_or_else(|| format!("Invalid memory kind '{kind}' (expected memory|user|soul)"))?; let file_path = hermes_home().join("memories").join(file_name); if !file_path.exists() { return Ok(String::new()); @@ -3132,18 +3891,102 @@ pub async fn hermes_memory_write( content: String, ) -> Result { let kind = r#type.as_deref().unwrap_or("memory"); + let file_name = memory_file_name(kind) + .ok_or_else(|| format!("Invalid memory kind '{kind}' (expected memory|user|soul)"))?; let mem_dir = hermes_home().join("memories"); std::fs::create_dir_all(&mem_dir).map_err(|e| format!("Failed to create dir: {e}"))?; - let file_name = if kind == "user" { - "USER.md" - } else { - "MEMORY.md" - }; let file_path = mem_dir.join(file_name); std::fs::write(&file_path, &content).map_err(|e| format!("Failed to write memory: {e}"))?; Ok("ok".into()) } +/// Read all memory sections (memory/user/soul) in one call, returning content +/// + last-modified UNIX timestamp (seconds) for each. A missing file yields an +/// empty string and `None` mtime — the caller shows "not yet written" state. +/// +/// Shape matches `hermes-web-ui`'s `GET /api/hermes/memory` response so the +/// frontend can mirror the official UI's three-column layout. +#[tauri::command] +pub async fn hermes_memory_read_all() -> Result { + let mem_dir = hermes_home().join("memories"); + let section = |kind: &str| -> (String, Option) { + let name = match memory_file_name(kind) { + Some(n) => n, + None => return (String::new(), None), + }; + let path = mem_dir.join(name); + if !path.exists() { + return (String::new(), None); + } + let content = std::fs::read_to_string(&path).unwrap_or_default(); + let mtime = std::fs::metadata(&path) + .ok() + .and_then(|m| m.modified().ok()) + .and_then(|t| t.duration_since(std::time::UNIX_EPOCH).ok()) + .map(|d| d.as_secs()); + (content, mtime) + }; + let (memory, memory_mtime) = section("memory"); + let (user, user_mtime) = section("user"); + let (soul, soul_mtime) = section("soul"); + Ok(serde_json::json!({ + "memory": memory, + "user": user, + "soul": soul, + "memory_mtime": memory_mtime, + "user_mtime": user_mtime, + "soul_mtime": soul_mtime, + })) +} + +fn downloads_dir_fallback() -> PathBuf { + dirs::download_dir() + .or_else(dirs::home_dir) + .unwrap_or_else(|| PathBuf::from(".")) +} + +fn safe_download_filename(name: &str) -> String { + name.chars() + .map(|c| match c { + '/' | '\\' | ':' | '*' | '?' | '"' | '<' | '>' | '|' => '_', + _ => c, + }) + .collect() +} + +/// Read an entire log file and save it to the user's Downloads/ClawPanel +/// directory. We refuse path traversal and only allow files whose canonical +/// path lives inside `~/.hermes/logs/`. +#[tauri::command] +pub async fn hermes_logs_download(name: String) -> Result { + // Reject traversal before any disk access. + if name.is_empty() || name.contains("..") || name.contains('/') || name.contains('\\') { + return Err("Invalid log file name".into()); + } + let logs_dir = hermes_home().join("logs"); + let file_path = logs_dir.join(&name); + // Canonicalize both sides to ensure symlinks/relative segments can't + // escape the logs directory. + let canon_dir = logs_dir + .canonicalize() + .map_err(|e| format!("Logs dir not found: {e}"))?; + let canon_file = file_path + .canonicalize() + .map_err(|e| format!("Log file not found: {e}"))?; + if !canon_file.starts_with(&canon_dir) { + return Err("Access denied".into()); + } + let content = + std::fs::read_to_string(&canon_file).map_err(|e| format!("Failed to read log: {e}"))?; + let out_dir = downloads_dir_fallback().join("ClawPanel"); + std::fs::create_dir_all(&out_dir).map_err(|e| format!("Failed to create download dir: {e}"))?; + let out_path = out_dir.join(safe_download_filename(&name)); + std::fs::write(&out_path, content).map_err(|e| format!("Failed to save log: {e}"))?; + Ok(serde_json::json!({ + "path": out_path.to_string_lossy().to_string(), + })) +} + // ============================================================================ // api_server guardian (Step 5 / G7) // @@ -3511,6 +4354,255 @@ pub fn hermes_env_delete(key: String) -> Result<(), String> { Ok(()) } +#[tauri::command] +pub fn hermes_config_raw_read() -> Result { + let path = hermes_home().join("config.yaml"); + let yaml = std::fs::read_to_string(&path).unwrap_or_default(); + Ok(serde_json::json!({ "yaml": yaml })) +} + +#[tauri::command] +pub fn hermes_config_raw_write(yaml_text: String) -> Result { + let path = hermes_home().join("config.yaml"); + if let Some(parent) = path.parent() { + std::fs::create_dir_all(parent).map_err(|e| format!("Failed to create config dir: {e}"))?; + } + if path.exists() { + let ts = std::time::SystemTime::now() + .duration_since(std::time::UNIX_EPOCH) + .map(|d| d.as_secs()) + .unwrap_or(0); + let backup = path.with_extension(format!("yaml.bak-{ts}")); + let _ = std::fs::copy(&path, backup); + } + std::fs::write(&path, yaml_text).map_err(|e| format!("Failed to write config.yaml: {e}"))?; + Ok(serde_json::json!({ "ok": true })) +} + +#[tauri::command] +pub fn hermes_env_reveal(key: String) -> Result { + let key = key.trim().to_string(); + if key.is_empty() { + return Err("Key cannot be empty".into()); + } + let env_path = hermes_home().join(".env"); + let raw = + std::fs::read_to_string(&env_path).map_err(|e| format!("Failed to read .env: {e}"))?; + for (k, v, _) in parse_env_file_lines(&raw) { + if k == key { + return Ok(serde_json::json!({ "key": key, "value": v })); + } + } + Err(format!("{key} not found in .env")) +} + +fn hermes_dashboard_theme_name(raw: &str) -> String { + let mut in_dashboard = false; + for line in raw.lines() { + let t = line.trim(); + if t.is_empty() || t.starts_with('#') { + continue; + } + let indent = line.len() - line.trim_start().len(); + if indent == 0 { + in_dashboard = t == "dashboard:" || t.starts_with("dashboard:"); + if t.starts_with("dashboard:") && t != "dashboard:" { + return t + .trim_start_matches("dashboard:") + .trim() + .trim_matches('"') + .trim_matches('\'') + .to_string(); + } + continue; + } + if in_dashboard && t.starts_with("theme:") { + return t + .trim_start_matches("theme:") + .trim() + .trim_matches('"') + .trim_matches('\'') + .to_string(); + } + } + "default".into() +} + +fn patch_dashboard_theme(raw: &str, name: &str) -> String { + let mut out: Vec = Vec::new(); + let mut in_dashboard = false; + let mut dashboard_seen = false; + let mut theme_written = false; + for line in raw.lines() { + let t = line.trim(); + let indent = line.len() - line.trim_start().len(); + if indent == 0 && !t.is_empty() && !t.starts_with('#') { + if in_dashboard && !theme_written { + out.push(format!(" theme: {name}")); + theme_written = true; + } + in_dashboard = t == "dashboard:" || t.starts_with("dashboard:"); + if in_dashboard { + dashboard_seen = true; + } + } + if in_dashboard && indent > 0 && t.starts_with("theme:") { + out.push(format!("{}theme: {name}", " ".repeat(indent))); + theme_written = true; + continue; + } + out.push(line.to_string()); + } + if in_dashboard && !theme_written { + out.push(format!(" theme: {name}")); + } + if !dashboard_seen { + if out.last().map(|s| !s.is_empty()).unwrap_or(false) { + out.push(String::new()); + } + out.push("dashboard:".into()); + out.push(format!(" theme: {name}")); + } + let mut content = out.join("\n"); + if !content.ends_with('\n') { + content.push('\n'); + } + content +} + +#[tauri::command] +pub fn hermes_dashboard_themes() -> Result { + let config_raw = std::fs::read_to_string(hermes_home().join("config.yaml")).unwrap_or_default(); + let active = hermes_dashboard_theme_name(&config_raw); + let mut themes = vec![ + serde_json::json!({ "name": "default", "label": "Default", "description": "Hermes default dashboard theme" }), + serde_json::json!({ "name": "midnight", "label": "Midnight", "description": "Dark blue dashboard theme" }), + serde_json::json!({ "name": "ember", "label": "Ember", "description": "Warm dashboard theme" }), + serde_json::json!({ "name": "mono", "label": "Mono", "description": "Monochrome dashboard theme" }), + serde_json::json!({ "name": "cyberpunk", "label": "Cyberpunk", "description": "Neon dashboard theme" }), + serde_json::json!({ "name": "rose", "label": "Rose", "description": "Soft rose dashboard theme" }), + ]; + let dir = hermes_home().join("dashboard-themes"); + if let Ok(entries) = std::fs::read_dir(dir) { + for entry in entries.flatten() { + let path = entry.path(); + let ext_ok = path + .extension() + .and_then(|s| s.to_str()) + .map(|s| s.eq_ignore_ascii_case("yaml") || s.eq_ignore_ascii_case("yml")) + .unwrap_or(false); + if !ext_ok { + continue; + } + if let Some(name) = path.file_stem().and_then(|s| s.to_str()) { + themes.push(serde_json::json!({ + "name": name, + "label": name, + "description": "User dashboard theme", + })); + } + } + } + Ok(serde_json::json!({ "themes": themes, "active": active })) +} + +#[tauri::command] +pub fn hermes_dashboard_theme_set(name: String) -> Result { + let name = name.trim().to_string(); + if name.is_empty() { + return Err("Theme name cannot be empty".into()); + } + let path = hermes_home().join("config.yaml"); + let raw = std::fs::read_to_string(&path).unwrap_or_default(); + if let Some(parent) = path.parent() { + std::fs::create_dir_all(parent).map_err(|e| format!("Failed to create config dir: {e}"))?; + } + std::fs::write(&path, patch_dashboard_theme(&raw, &name)) + .map_err(|e| format!("Failed to write config.yaml: {e}"))?; + Ok(serde_json::json!({ "ok": true, "theme": name })) +} + +fn scan_dashboard_plugins() -> Vec { + let mut plugins = Vec::new(); + let mut seen = std::collections::HashSet::::new(); + let roots = [hermes_home().join("plugins")]; + for root in roots { + if let Ok(entries) = std::fs::read_dir(root) { + for entry in entries.flatten() { + let dir = entry.path(); + if !dir.is_dir() { + continue; + } + let manifest = dir.join("dashboard").join("manifest.json"); + if !manifest.exists() { + continue; + } + let raw = match std::fs::read_to_string(&manifest) { + Ok(s) => s, + Err(_) => continue, + }; + let data: Value = match serde_json::from_str(&raw) { + Ok(v) => v, + Err(_) => continue, + }; + let name = data + .get("name") + .and_then(|v| v.as_str()) + .or_else(|| dir.file_name().and_then(|s| s.to_str())) + .unwrap_or(""); + if name.is_empty() || !seen.insert(name.to_string()) { + continue; + } + let tab = data.get("tab").cloned().unwrap_or_else( + || serde_json::json!({ "path": format!("/{name}"), "position": "end" }), + ); + plugins.push(serde_json::json!({ + "name": name, + "label": data.get("label").and_then(|v| v.as_str()).unwrap_or(name), + "description": data.get("description").and_then(|v| v.as_str()).unwrap_or(""), + "icon": data.get("icon").and_then(|v| v.as_str()).unwrap_or("Puzzle"), + "version": data.get("version").and_then(|v| v.as_str()).unwrap_or("0.0.0"), + "tab": tab, + "slots": data.get("slots").cloned().unwrap_or_else(|| serde_json::json!([])), + "entry": data.get("entry").and_then(|v| v.as_str()).unwrap_or("dist/index.js"), + "css": data.get("css").cloned().unwrap_or(Value::Null), + "has_api": data.get("api").is_some(), + "source": "user", + })); + } + } + } + plugins +} + +#[tauri::command] +pub fn hermes_dashboard_plugins() -> Result { + Ok(Value::Array(scan_dashboard_plugins())) +} + +#[tauri::command] +pub fn hermes_dashboard_plugins_rescan() -> Result { + let plugins = scan_dashboard_plugins(); + Ok(serde_json::json!({ "ok": true, "count": plugins.len() })) +} + +#[tauri::command] +pub fn hermes_toolsets_list() -> Result { + let output = run_silent("hermes", &["tools", "list", "--platform", "cli"]).unwrap_or_default(); + Ok(serde_json::json!({ "raw": output })) +} + +#[tauri::command] +pub fn hermes_cron_jobs_list() -> Result { + let path = hermes_home().join("cron").join("jobs.json"); + if !path.exists() { + return Ok(Value::Array(Vec::new())); + } + let raw = + std::fs::read_to_string(&path).map_err(|e| format!("Failed to read cron jobs: {e}"))?; + serde_json::from_str::(&raw).map_err(|e| format!("Failed to parse cron jobs: {e}")) +} + // ============================================================================ // Unit tests for the pure YAML helpers (no filesystem I/O). // ============================================================================ diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index bf8b30f..c490285 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -234,19 +234,37 @@ pub fn run() { hermes::hermes_env_read_unmanaged, hermes::hermes_env_set, hermes::hermes_env_delete, + hermes::hermes_env_reveal, + hermes::hermes_config_raw_read, + hermes::hermes_config_raw_write, hermes::hermes_set_gateway_url, hermes::update_hermes, hermes::uninstall_hermes, hermes::hermes_sessions_list, + hermes::hermes_sessions_summary_list, + hermes::hermes_usage_analytics, hermes::hermes_session_detail, hermes::hermes_session_delete, hermes::hermes_session_rename, + hermes::hermes_profiles_list, + hermes::hermes_profile_use, hermes::hermes_logs_list, hermes::hermes_logs_read, hermes::hermes_skills_list, hermes::hermes_skill_detail, + hermes::hermes_skill_toggle, + hermes::hermes_skill_files, + hermes::hermes_skill_write, hermes::hermes_memory_read, hermes::hermes_memory_write, + hermes::hermes_memory_read_all, + hermes::hermes_logs_download, + hermes::hermes_dashboard_themes, + hermes::hermes_dashboard_theme_set, + hermes::hermes_dashboard_plugins, + hermes::hermes_dashboard_plugins_rescan, + hermes::hermes_toolsets_list, + hermes::hermes_cron_jobs_list, ]) .on_window_event(|window, event| { // 关闭窗口时最小化到托盘，不退出应用 diff --git a/src/components/sidebar.js b/src/components/sidebar.js index cf35852..ae2f903 100644 --- a/src/components/sidebar.js +++ b/src/components/sidebar.js @@ -88,7 +88,9 @@ const ICONS = { agents: '', gateway: '', memory: '', + inbox: '', extensions: '', + package: '', about: '', assistant: '', security: '', diff --git a/src/engines/hermes/index.js b/src/engines/hermes/index.js index da1ab59..bdd3748 100644 --- a/src/engines/hermes/index.js +++ b/src/engines/hermes/index.js @@ -76,7 +76,9 @@ export default { items: [ { route: '/h/dashboard', label: t('sidebar.dashboard'), icon: 'dashboard' }, { route: '/h/chat', label: t('sidebar.chat'), icon: 'chat' }, + { route: '/h/sessions', label: t('sidebar.sessions'), icon: 'inbox' }, { route: '/h/logs', label: t('sidebar.logs'), icon: 'logs' }, + { route: '/h/usage', label: t('sidebar.usage'), icon: 'bar-chart' }, ] }, { section: t('sidebar.sectionManage'), @@ -84,6 +86,7 @@ export default { { route: '/h/skills', label: t('sidebar.skills'), icon: 'skills' }, { route: '/h/memory', label: t('sidebar.memory'), icon: 'memory' }, { route: '/h/cron', label: t('sidebar.cron'), icon: 'clock' }, + { route: '/h/extensions', label: t('sidebar.extensions'), icon: 'package' }, ] }, { section: '', @@ -101,10 +104,13 @@ export default { { path: '/h/setup', loader: () => import('./pages/setup.js') }, { path: '/h/dashboard', loader: () => import('./pages/dashboard.js') }, { path: '/h/chat', loader: () => import('./pages/chat.js') }, + { path: '/h/sessions', loader: () => import('./pages/sessions.js') }, { path: '/h/logs', loader: () => import('./pages/logs.js') }, + { path: '/h/usage', loader: () => import('./pages/usage.js') }, { path: '/h/skills', loader: () => import('./pages/skills.js') }, { path: '/h/memory', loader: () => import('./pages/memory.js') }, { path: '/h/cron', loader: () => import('./pages/cron.js') }, + { path: '/h/extensions', loader: () => import('./pages/extensions.js') }, { path: '/h/services', loader: () => import('./pages/services.js') }, { path: '/h/config', loader: () => import('./pages/config.js') }, { path: '/h/channels', loader: () => import('./pages/channels.js') }, diff --git a/src/engines/hermes/lib/chat-store.js b/src/engines/hermes/lib/chat-store.js new file mode 100644 index 0000000..c0c120a --- /dev/null +++ b/src/engines/hermes/lib/chat-store.js @@ -0,0 +1,1013 @@ +/** + * Hermes Chat Store — reactive state for sessions, messages and streaming. + * + * Mirrors the shape of `hermes-web-ui`'s Pinia `chat` store in a dependency- + * free, vanilla JS pub/sub style. A single instance is exported (`chatStore`); + * the page subscribes via `chatStore.subscribe(listener)` and receives a + * notification on every mutation. + * + * Responsibilities: + * - Load sessions from the backend (via `api.hermesSessionsList`) and merge + * with local-only sessions that haven't been flushed yet. + * - Load + map a session's messages (role/content/tool details). + * - Handle streaming via Tauri's `hermes-run-*` events, accumulating delta + * text into an assistant message and tracking live tool calls. + * - Persist session summaries + per-session messages to `localStorage` so + * reopening the page renders instantly while server data revalidates. + * - Manage pinned sessions + collapsed groups (UI prefs). + * + * Non-responsibilities (left for the page): + * - Rendering (the store never touches the DOM). + * - File attachment uploads (kept out of scope for Phase 4). + * - Full tmux-like run resume (Tauri events are in-process and reliable). + */ +import { api } from '../../../lib/tauri-api.js' + +// ---------- constants ---------- + +const STORAGE_PROFILE = 'hermes_chat_profile_v1' +const STORAGE_SESSIONS_PREFIX = 'hermes_chat_sessions_v2_' +const STORAGE_ACTIVE_PREFIX = 'hermes_chat_active_v2_' +const STORAGE_PINNED_PREFIX = 'hermes_chat_pinned_' +const STORAGE_COLLAPSED_PREFIX = 'hermes_chat_collapsed_groups_' +const STORAGE_MSGS_PREFIX = 'hermes_chat_msgs_v2_' +const LIVE_BADGE_WINDOW_MS = 5 * 60 * 1000 // 5 min + +const SOURCE_LABELS = { + telegram: 'Telegram', + api_server: 'API Server', + cli: 'CLI', + discord: 'Discord', + slack: 'Slack', + matrix: 'Matrix', + whatsapp: 'WhatsApp', + signal: 'Signal', + email: 'Email', + sms: 'SMS', + dingtalk: 'DingTalk', + feishu: 'Feishu', + wecom: 'WeCom', + weixin: 'WeChat', + bluebubbles: 'iMessage', + mattermost: 'Mattermost', + cron: 'Cron', +} + +export function getSourceLabel(source) { + if (!source) return '' + return SOURCE_LABELS[source] || source +} + +// ---------- helpers ---------- + +function uid() { + return Date.now().toString(36) + Math.random().toString(36).slice(2, 8) +} + +function safeGet(key) { + try { return localStorage.getItem(key) } catch { return null } +} +function safeSet(key, value) { + try { localStorage.setItem(key, value) } catch {} +} +function safeRemove(key) { + try { localStorage.removeItem(key) } catch {} +} + +function loadJson(key) { + try { + const raw = safeGet(key) + return raw ? JSON.parse(raw) : null + } catch { return null } +} +function saveJson(key, value) { + try { safeSet(key, JSON.stringify(value)) } catch {} +} + +function profileKey(profile) { + return encodeURIComponent(profile || 'default') +} + +function parseEpochMs(value) { + if (typeof value === 'number') { + // Seconds vs milliseconds heuristic. + return value < 1e12 ? Math.round(value * 1000) : Math.round(value) + } + if (typeof value === 'string' && value.trim()) { + const t = Date.parse(value) + return Number.isFinite(t) ? t : 0 + } + return 0 +} + +// ---------- message mapping ---------- + +/** + * Convert Hermes CLI-exported messages (mixed roles + tool_calls) into the + * flat display list we render. Matches `hermes-web-ui`'s `mapHermesMessages`. + */ +function mapHermesMessages(msgs) { + if (!Array.isArray(msgs)) return [] + + const toolNameMap = new Map() + const toolArgsMap = new Map() + for (const m of msgs) { + if (m.role === 'assistant' && Array.isArray(m.tool_calls)) { + for (const tc of m.tool_calls) { + if (tc.id) { + if (tc.function?.name) toolNameMap.set(tc.id, tc.function.name) + if (tc.function?.arguments) toolArgsMap.set(tc.id, tc.function.arguments) + } + } + } + } + + const out = [] + for (const m of msgs) { + const ts = parseEpochMs(m.timestamp || m.created_at) + + // Assistant message whose only payload is tool_calls — emit placeholder + // tool messages, the actual tool responses will fill them in. + if (m.role === 'assistant' && Array.isArray(m.tool_calls) && m.tool_calls.length && !(m.content || '').trim()) { + for (const tc of m.tool_calls) { + out.push({ + id: String(m.id) + '_' + tc.id, + role: 'tool', + content: '', + timestamp: ts, + toolName: tc.function?.name || 'tool', + toolArgs: tc.function?.arguments || undefined, + toolStatus: 'done', + }) + } + continue + } + + if (m.role === 'tool') { + const tcId = m.tool_call_id || '' + const toolName = m.tool_name || toolNameMap.get(tcId) || 'tool' + const toolArgs = toolArgsMap.get(tcId) || undefined + let preview = '' + if (m.content) { + try { + const parsed = JSON.parse(m.content) + preview = parsed.url || parsed.title || parsed.preview || parsed.summary || '' + } catch { + preview = String(m.content).slice(0, 80) + } + } + const phIdx = out.findIndex(x => x.role === 'tool' && x.toolName === toolName && !x.toolResult && x.id.includes('_' + tcId)) + if (phIdx !== -1) out.splice(phIdx, 1) + out.push({ + id: String(m.id), + role: 'tool', + content: '', + timestamp: ts, + toolName, + toolArgs, + toolPreview: typeof preview === 'string' ? (preview.slice(0, 100) || undefined) : undefined, + toolResult: m.content || undefined, + toolStatus: 'done', + }) + continue + } + + // Plain user/assistant/system message. + out.push({ + id: String(m.id || uid()), + role: m.role || 'assistant', + content: typeof m.content === 'string' ? m.content : JSON.stringify(m.content || ''), + timestamp: ts, + }) + } + return out +} + +/** Convert a backend session summary into the store's canonical shape. */ +function mapSessionSummary(s) { + return { + id: s.id || s.session_id || '', + title: s.title || '', + source: s.source || '', + model: s.model || '', + messageCount: s.message_count || 0, + createdAt: parseEpochMs(s.created_at || s.started_at), + updatedAt: parseEpochMs(s.updated_at || s.last_active || s.ended_at || s.created_at || s.started_at), + endedAt: s.ended_at != null ? parseEpochMs(s.ended_at) : null, + lastActiveAt: s.last_active != null ? parseEpochMs(s.last_active) : undefined, + // Usage analytics — surfaced from `hermes sessions export` JSONL + // (Rust command at hermes.rs::hermes_sessions_list). Match the Hermes + // CLI naming so other consumers (Usage page) can reuse the same fields. + inputTokens: Number(s.input_tokens || 0), + outputTokens: Number(s.output_tokens || 0), + cacheReadTokens: Number(s.cache_read_tokens || 0), + cacheWriteTokens: Number(s.cache_write_tokens || 0), + estimatedCostUsd: typeof s.estimated_cost_usd === 'number' ? s.estimated_cost_usd : null, + messages: [], + } +} + +// ---------- Tauri event bridge ---------- + +let _listenFn = null +async function tauriListen(event, cb) { + if (!_listenFn) { + const mod = await import('@tauri-apps/api/event') + _listenFn = mod.listen + } + return _listenFn(event, cb) +} + +// ---------- store implementation ---------- + +function createStore() { + // --- state --- + const state = { + sessions: [], + activeSessionId: null, + loading: false, + loadingMessages: false, + streaming: false, + runningSessionId: null, + pendingAssistantId: null, // id of the currently streaming assistant message + error: null, + profiles: [], + activeProfile: safeGet(STORAGE_PROFILE) || 'default', + loadingProfiles: false, + + // Live tool calls for the current run (shown in the streaming indicator). + liveTools: [], // [{ id, name, status, preview, args, result }] + + // UI prefs (persisted). + pinned: new Set(loadJson(STORAGE_PINNED_PREFIX + profileKey(safeGet(STORAGE_PROFILE) || 'default')) || []), + collapsed: new Set(loadJson(STORAGE_COLLAPSED_PREFIX + profileKey(safeGet(STORAGE_PROFILE) || 'default')) || []), + } + + // --- subscription --- + // + // Uses rAF-batched notify so a burst of mutations (e.g. streaming delta + + // tool events) produces a single redraw per frame instead of one per event. + // This avoids the visual stutter + scroll jitter seen in Phase 4. + const listeners = new Set() + let scheduled = false + function subscribe(fn) { + listeners.add(fn) + return () => listeners.delete(fn) + } + function flushNotify() { + scheduled = false + for (const fn of listeners) { + try { fn(state) } catch (e) { console.error('chatStore listener error:', e) } + } + } + function notify() { + if (scheduled) return + scheduled = true + if (typeof requestAnimationFrame === 'function') { + requestAnimationFrame(flushNotify) + } else { + setTimeout(flushNotify, 0) + } + } + /** Force an immediate, unbatched notification (used by deterministic tests). */ + function notifySync() { + scheduled = false + flushNotify() + } + + // --- persistence --- + const sessionsKey = () => STORAGE_SESSIONS_PREFIX + profileKey(state.activeProfile) + const activeKey = () => STORAGE_ACTIVE_PREFIX + profileKey(state.activeProfile) + const pinnedKey = () => STORAGE_PINNED_PREFIX + profileKey(state.activeProfile) + const collapsedKey = () => STORAGE_COLLAPSED_PREFIX + profileKey(state.activeProfile) + const messagesKey = (sid) => STORAGE_MSGS_PREFIX + profileKey(state.activeProfile) + '_' + sid + + function persistSessions() { + saveJson(sessionsKey(), state.sessions.map(s => ({ ...s, messages: [] }))) + } + function persistActiveMessages() { + persistSessionMessages(state.activeSessionId) + } + function persistSessionMessages(sessionId) { + const sid = sessionId + if (!sid) return + const s = state.sessions.find(x => x.id === sid) + if (s) saveJson(messagesKey(sid), s.messages) + } + function loadSessionsCache() { + const cached = loadJson(sessionsKey()) + if (Array.isArray(cached) && cached.length) { + state.sessions = cached + const savedActive = safeGet(activeKey()) + const target = savedActive && cached.find(s => s.id === savedActive) + if (target) { + const msgs = loadJson(messagesKey(target.id)) + if (Array.isArray(msgs)) target.messages = msgs + state.activeSessionId = target.id + } + } + } + + function loadProfilePrefs() { + state.pinned = new Set(loadJson(pinnedKey()) || []) + state.collapsed = new Set(loadJson(collapsedKey()) || []) + } + + function savePinned() { saveJson(pinnedKey(), [...state.pinned]) } + function saveCollapsed() { saveJson(collapsedKey(), [...state.collapsed]) } + + // --- derived queries --- + function activeSession() { + return state.sessions.find(s => s.id === state.activeSessionId) || null + } + + function isSessionLive(sessionId) { + if (state.streaming && sessionId === state.runningSessionId) return true + const s = state.sessions.find(x => x.id === sessionId) + if (!s?.lastActiveAt || s.endedAt != null) return false + return Date.now() - s.lastActiveAt <= LIVE_BADGE_WINDOW_MS + } + + /** Group sessions by source. Pinned ones go in a separate bucket. */ + function groupedSessions() { + const pinnedList = state.sessions + .filter(s => state.pinned.has(s.id)) + .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0)) + + const bySource = new Map() + for (const s of state.sessions) { + if (state.pinned.has(s.id)) continue + const key = s.source || '' + if (!bySource.has(key)) bySource.set(key, []) + bySource.get(key).push(s) + } + + const sortKey = (src) => { + if (src === 'api_server') return -1 + if (src === '') return 0 + if (src === 'cron') return 999 + return 1 + } + + const keys = [...bySource.keys()].sort((a, b) => { + const ka = sortKey(a) + const kb = sortKey(b) + if (ka !== kb) return ka - kb + return a.localeCompare(b) + }) + + const groups = keys.map(src => ({ + source: src, + label: src ? getSourceLabel(src) : 'Local', + sessions: bySource.get(src).slice().sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0)), + })) + + return { pinned: pinnedList, groups } + } + + // --- actions --- + async function loadSessions() { + state.loading = true + notify() + try { + const list = await api.hermesSessionsList() + const fresh = (Array.isArray(list) ? list : []).map(mapSessionSummary) + const freshIds = new Set(fresh.map(s => s.id)) + + // Preserve cached messages for sessions still present on the server. + const prevMsgs = new Map(state.sessions.map(s => [s.id, s.messages])) + for (const s of fresh) { + const prev = prevMsgs.get(s.id) + if (prev?.length) s.messages = prev + } + + // Keep local-only sessions (not yet flushed to the backend). + const localOnly = state.sessions.filter(s => s.source === '__local__' && !freshIds.has(s.id)) + state.sessions = [...localOnly, ...fresh] + persistSessions() + + if (!state.activeSessionId || !state.sessions.some(s => s.id === state.activeSessionId)) { + if (state.sessions.length) { + await switchSession(state.sessions[0].id) + } else { + createLocalSession() + } + } else { + // Refresh active session messages. + await refreshActiveMessages() + } + } catch (e) { + state.error = e?.message || String(e) + } finally { + state.loading = false + notify() + } + } + + async function loadProfiles() { + state.loadingProfiles = true + notify() + try { + const data = await api.hermesProfilesList() + const profiles = Array.isArray(data?.profiles) ? data.profiles : [] + state.profiles = profiles + const active = data?.active || profiles.find(p => p.active)?.name || state.activeProfile || 'default' + if (active !== state.activeProfile) { + state.activeProfile = active + safeSet(STORAGE_PROFILE, active) + state.sessions = [] + state.activeSessionId = null + loadProfilePrefs() + loadSessionsCache() + } + } finally { + state.loadingProfiles = false + notify() + } + } + + async function switchProfile(name) { + if (!name || name === state.activeProfile || state.streaming) return + await api.hermesProfileUse(name) + state.activeProfile = name + safeSet(STORAGE_PROFILE, name) + state.sessions = [] + state.activeSessionId = null + state.liveTools = [] + loadProfilePrefs() + loadSessionsCache() + notify() + await loadProfiles() + await loadSessions() + } + + async function refreshActiveMessages() { + const sid = state.activeSessionId + if (!sid) return + const target = state.sessions.find(s => s.id === sid) + if (!target) return + // Skip remote fetch for local-only sessions — the backend doesn't know them. + if (target.source === '__local__') return + + try { + const detail = await api.hermesSessionDetail(sid) + if (!detail) return + const mapped = mapHermesMessages(detail.messages || []) + + // Heuristic: only overwrite if server view has >= user turns + content + const local = target.messages || [] + const localUsers = local.filter(m => m.role === 'user').length + const serverUsers = mapped.filter(m => m.role === 'user').length + const localAsstLen = [...local].reverse().find(m => m.role === 'assistant')?.content?.length || 0 + const serverAsstLen = [...mapped].reverse().find(m => m.role === 'assistant')?.content?.length || 0 + const serverIsAhead = serverUsers > localUsers || (serverUsers === localUsers && serverAsstLen >= localAsstLen) + if (serverIsAhead) { + target.messages = mapped + if (detail.title) target.title = detail.title + persistActiveMessages() + } + } catch { + // Session may not exist on server yet (local-only) — that's fine. + } + } + + function createLocalSession() { + const s = { + id: uid(), + title: '', + source: '__local__', + model: '', + messageCount: 0, + createdAt: Date.now(), + updatedAt: Date.now(), + endedAt: null, + lastActiveAt: undefined, + messages: [], + } + state.sessions.unshift(s) + state.activeSessionId = s.id + safeSet(activeKey(), s.id) + persistSessions() + notify() + return s + } + + async function switchSession(sessionId) { + state.activeSessionId = sessionId + safeSet(activeKey(), sessionId) + const target = state.sessions.find(s => s.id === sessionId) + if (!target) { notify(); return } + + // Instant render: hydrate from cache if messages are empty. + if (!target.messages?.length) { + const cached = loadJson(messagesKey(sessionId)) + if (Array.isArray(cached) && cached.length) target.messages = cached + } + + const needsBlocking = !target.messages?.length && target.source !== '__local__' + if (needsBlocking) state.loadingMessages = true + notify() + + await refreshActiveMessages() + state.loadingMessages = false + notify() + } + + function newChat() { + if (state.streaming) return + createLocalSession() + } + + async function deleteSession(sessionId) { + if (state.streaming && sessionId === state.runningSessionId) { + throw new Error('RUNNING_SESSION') + } + const target = state.sessions.find(s => s.id === sessionId) + if (target && target.source !== '__local__') { + await api.hermesSessionDelete(sessionId) + } + state.sessions = state.sessions.filter(s => s.id !== sessionId) + state.pinned.delete(sessionId) + savePinned() + safeRemove(messagesKey(sessionId)) + persistSessions() + + if (state.activeSessionId === sessionId) { + if (state.sessions.length) { + await switchSession(state.sessions[0].id) + return + } + createLocalSession() + return + } + notify() + } + + /** + * Delete multiple sessions sequentially. The Hermes CLI doesn't expose a + * batch endpoint, so we call `hermesSessionDelete` one-by-one for backend- + * backed sessions and remove local-only ones in memory. The currently + * streaming session (if any) is reported in `skipped` instead of failing. + * + * Returns `{ deleted, skipped, failed }`. + */ + async function bulkDeleteSessions(sessionIds) { + const ids = Array.from(new Set((sessionIds || []).filter(Boolean))) + const deleted = [] + const skipped = [] + const failed = [] + for (const sid of ids) { + if (state.streaming && sid === state.runningSessionId) { + skipped.push(sid) + continue + } + const target = state.sessions.find(s => s.id === sid) + if (!target) { + skipped.push(sid) + continue + } + try { + if (target.source !== '__local__') { + await api.hermesSessionDelete(sid) + } + deleted.push(sid) + } catch (e) { + failed.push({ id: sid, error: e?.message || String(e) }) + } + } + if (deleted.length) { + const deletedSet = new Set(deleted) + state.sessions = state.sessions.filter(s => !deletedSet.has(s.id)) + for (const sid of deleted) { + state.pinned.delete(sid) + safeRemove(messagesKey(sid)) + } + savePinned() + persistSessions() + if (state.activeSessionId && deletedSet.has(state.activeSessionId)) { + if (state.sessions.length) { + await switchSession(state.sessions[0].id) + } else { + createLocalSession() + } + } else { + notify() + } + } else { + notify() + } + return { deleted, skipped, failed } + } + + async function renameSession(sessionId, title) { + const trimmed = (title || '').trim() + if (!trimmed) return false + const target = state.sessions.find(s => s.id === sessionId) + if (!target) return false + // Remote-only if the session is persisted. + if (target.source !== '__local__') { + try { await api.hermesSessionRename(sessionId, trimmed) } + catch { return false } + } + target.title = trimmed + target.updatedAt = Date.now() + persistSessions() + notify() + return true + } + + function togglePinned(sessionId) { + if (state.pinned.has(sessionId)) state.pinned.delete(sessionId) + else state.pinned.add(sessionId) + savePinned() + notify() + } + + function toggleCollapsed(source) { + if (state.collapsed.has(source)) state.collapsed.delete(source) + else state.collapsed.add(source) + saveCollapsed() + notify() + } + + // ---------- streaming ---------- + + const unlisteners = [] + async function attachStreamListeners(runSessionId) { + detachStreamListeners() + const runSession = () => state.sessions.find(x => x.id === runSessionId) || null + const u1 = await tauriListen('hermes-run-delta', (e) => { + const delta = e?.payload?.delta || '' + if (!delta) return + const s = runSession() + if (!s) return + let msg = s.messages.find(m => m.id === state.pendingAssistantId) + if (!msg) { + msg = { id: uid(), role: 'assistant', content: '', timestamp: Date.now(), isStreaming: true } + s.messages.push(msg) + state.pendingAssistantId = msg.id + } + msg.content += delta + notify() + }) + const u2 = await tauriListen('hermes-run-tool', (e) => { + const evt = e?.payload || {} + const evtType = evt.event || '' + const toolName = evt.tool || evt.tool_name || evt.name || 'tool' + const preview = evt.preview || evt.detail || evt.message || '' + const extract = (obj, keys) => { + for (const k of keys) { + if (obj[k] != null && obj[k] !== '') return obj[k] + } + return null + } + if (evtType === 'tool.started') { + const input = extract(evt, ['input', 'args', 'arguments', 'parameters', 'params', 'data']) + state.liveTools.push({ + id: uid(), + name: toolName, + status: 'running', + preview, + args: input, + result: null, + error: null, + }) + } else if (evtType === 'tool.completed') { + const t = state.liveTools.find(x => x.name === toolName && x.status === 'running') + if (t) { + t.status = evt.error ? 'error' : 'done' + t.preview = evt.error ? (typeof evt.error === 'string' ? evt.error : 'failed') : preview + t.result = extract(evt, ['output', 'result', 'content', 'data', 'response']) + if (evt.error) t.error = typeof evt.error === 'string' ? evt.error : JSON.stringify(evt.error) + if (!t.args) t.args = extract(evt, ['input', 'args', 'arguments', 'parameters', 'params']) + } + } else if (evtType === 'tool.error') { + const t = state.liveTools.find(x => x.name === toolName && x.status === 'running') + if (t) { + t.status = 'error' + t.preview = preview || 'failed' + t.error = evt.error || preview || 'unknown' + } + } else if (evtType === 'tool.progress') { + const t = state.liveTools.find(x => x.name === toolName && x.status === 'running') + if (t && preview) t.preview = preview + } + notify() + }) + const u3 = await tauriListen('hermes-run-done', () => { + const s = runSession() + if (!s) { cleanupAfterRun(); return } + + // Commit finished tool calls as messages in the transcript. + if (state.liveTools.length) { + for (const t of state.liveTools) { + s.messages.push({ + id: uid(), + role: 'tool', + content: '', + timestamp: Date.now(), + toolName: t.name, + toolPreview: t.preview || undefined, + toolArgs: stringifyMaybe(t.args), + toolResult: stringifyMaybe(t.result), + toolStatus: t.error ? 'error' : 'done', + }) + } + } + + // Finalize the streaming assistant message. + const msg = s.messages.find(m => m.id === state.pendingAssistantId) + if (msg) { + delete msg.isStreaming + if (!msg.content.trim()) msg.content = '(empty)' + } + + // Update session metadata. + s.updatedAt = Date.now() + s.lastActiveAt = Date.now() + updateSessionTitleFromFirstUser(s) + + persistSessionMessages(s.id) + persistSessions() + cleanupAfterRun() + }) + const u4 = await tauriListen('hermes-run-error', (e) => { + const err = e?.payload?.error || 'unknown error' + const s = runSession() + if (s) { + s.messages.push({ + id: uid(), + role: 'system', + content: `⚠️ Agent run failed: ${err}`, + timestamp: Date.now(), + }) + persistSessionMessages(s.id) + } + cleanupAfterRun() + }) + unlisteners.push(u1, u2, u3, u4) + } + + function detachStreamListeners() { + for (const u of unlisteners) { + try { u() } catch {} + } + unlisteners.length = 0 + } + + function cleanupAfterRun() { + state.streaming = false + state.runningSessionId = null + state.pendingAssistantId = null + state.liveTools = [] + detachStreamListeners() + notify() + // After streaming finishes the server has updated the session's + // input_tokens / output_tokens / estimated_cost_usd aggregates. Refresh + // the list so the input bar's usage pills reflect the new turn — this + // is fire-and-forget; failures fall through silently. + loadSessions().catch(() => {}) + } + + /** + * User-triggered cancel of the streaming run. + * + * The backend `hermes_agent_run` command doesn't expose a server-side + * cancel (SSE loop runs to completion), so we: + * 1. Detach local event listeners — any remaining deltas are ignored. + * 2. Convert the in-flight assistant message to its current content + + * an explicit " (stopped)" suffix. + * 3. Flip `streaming` off so the UI switches the Stop button back to + * Send. + * + * The server still finishes its run in the background (typically within + * a few seconds) — on next `refreshActiveMessages` the authoritative + * server transcript overwrites our local tail, which is fine. + */ + function stopStreaming() { + if (!state.streaming) return + const s = state.sessions.find(x => x.id === state.runningSessionId) || activeSession() + if (s) { + const msg = s.messages.find(m => m.id === state.pendingAssistantId) + if (msg) { + delete msg.isStreaming + if (!msg.content.trim()) { + msg.content = '_(stopped)_' + } else if (!msg.content.endsWith('(stopped)')) { + msg.content = msg.content.trimEnd() + ' _(stopped)_' + } + } + // Commit any finished tool calls we already know about so they aren't + // lost when we detach listeners. + for (const t of state.liveTools) { + if (t.status === 'done' || t.status === 'error') { + s.messages.push({ + id: uid(), + role: 'tool', + content: '', + timestamp: Date.now(), + toolName: t.name, + toolPreview: t.preview || undefined, + toolArgs: stringifyMaybe(t.args), + toolResult: stringifyMaybe(t.result), + toolStatus: t.error ? 'error' : 'done', + }) + } + } + s.updatedAt = Date.now() + persistSessionMessages(s.id) + persistSessions() + } + cleanupAfterRun() + } + + function updateSessionTitleFromFirstUser(s) { + if (s.title) return + const firstUser = s.messages.find(m => m.role === 'user') + if (firstUser?.content) { + const raw = firstUser.content.replace(/\n+/g, ' ').trim() + s.title = raw.slice(0, 40) + (raw.length > 40 ? '…' : '') + } + } + + function stringifyMaybe(val) { + if (val == null) return undefined + if (typeof val === 'string') return val + try { return JSON.stringify(val) } catch { return String(val) } + } + + async function sendMessage(content, opts = {}) { + const text = (content || '').trim() + if (!text || state.streaming) return + let s = activeSession() + if (!s) { + s = createLocalSession() + } + + // Append user message. + s.messages.push({ + id: uid(), + role: 'user', + content: text, + timestamp: Date.now(), + }) + updateSessionTitleFromFirstUser(s) + s.updatedAt = Date.now() + s.lastActiveAt = Date.now() + persistActiveMessages() + persistSessions() + + state.streaming = true + state.runningSessionId = s.id + state.liveTools = [] + state.pendingAssistantId = null + notify() + + try { + const history = s.messages + .filter(m => (m.role === 'user' || m.role === 'assistant') && (m.content || '').trim()) + .slice(0, -1) + .map(m => ({ role: m.role, content: m.content })) + + await attachStreamListeners(s.id) + await api.hermesAgentRun(text, s.id, history.length ? history : null, opts.instructions || null) + } catch (e) { + s.messages.push({ + id: uid(), + role: 'system', + content: `⚠️ ${e?.message || e}`, + timestamp: Date.now(), + }) + persistSessionMessages(s.id) + cleanupAfterRun() + } + } + + /** Utility: push an inline assistant message (used by /slash local replies). */ + function pushLocalAssistant(content) { + const s = activeSession() + if (!s) return + s.messages.push({ id: uid(), role: 'assistant', content, timestamp: Date.now() }) + updateSessionTitleFromFirstUser(s) + s.updatedAt = Date.now() + persistActiveMessages() + persistSessions() + notify() + } + + function pushLocalUser(content) { + const s = activeSession() + if (!s) return + s.messages.push({ id: uid(), role: 'user', content, timestamp: Date.now() }) + updateSessionTitleFromFirstUser(s) + s.updatedAt = Date.now() + persistActiveMessages() + persistSessions() + notify() + } + + function clearActive() { + const s = activeSession() + if (!s) return + s.messages = [] + s.title = '' + persistActiveMessages() + persistSessions() + notify() + } + + /** + * Fuzzy search across loaded sessions. Returns up to `limit` hits sorted + * by match strength. We only search in-memory data (title + cached first + * user message) — no network round-trip — so this is instant even with + * hundreds of sessions. + */ + function searchSessions(query, limit = 20) { + const q = (query || '').trim() + if (!q) return [] + const hits = [] + for (const s of state.sessions) { + const m = fuzzyMatchSession(s, q) + if (m) hits.push({ session: s, score: m.score, snippet: m.snippet }) + } + hits.sort((a, b) => b.score - a.score || (b.session.updatedAt || 0) - (a.session.updatedAt || 0)) + return hits.slice(0, limit) + } + + // ---------- bootstrap ---------- + + loadSessionsCache() + + return { + // readonly state access + get state() { return state }, + activeSession, + isSessionLive, + groupedSessions, + subscribe, + + // actions + loadSessions, + refreshActiveMessages, + switchSession, + newChat, + deleteSession, + bulkDeleteSessions, + renameSession, + togglePinned, + toggleCollapsed, + sendMessage, + stopStreaming, + pushLocalAssistant, + pushLocalUser, + clearActive, + searchSessions, + loadProfiles, + switchProfile, + + // lifecycle + detachStreamListeners, + notifySync, + } +} + +/** + * Fuzzy score a single session against `query`. Used by `store.searchSessions`. + * Returns `null` when nothing matches, or `{ score, snippet }` otherwise. + * + * Scoring weights: + * - title substring hit → +20 (strongest) + * - first-user content → +10 (with highlight window snippet) + * - id prefix → +5 + * - model name → +3 + */ +function fuzzyMatchSession(session, query) { + const q = query.toLowerCase() + const title = (session.title || '').toLowerCase() + const model = (session.model || '').toLowerCase() + const id = session.id.toLowerCase() + const firstUser = (session.messages || []).find(m => m.role === 'user')?.content || '' + const preview = firstUser.slice(0, 240).toLowerCase() + + let score = 0 + let snippet = '' + if (title.includes(q)) { score += 20; snippet = session.title } + if (preview.includes(q)) { + const idx = preview.indexOf(q) + const start = Math.max(0, idx - 20) + const end = Math.min(preview.length, idx + q.length + 40) + const raw = firstUser.slice(start, end) + if (!snippet) snippet = (start > 0 ? '…' : '') + raw + (end < firstUser.length ? '…' : '') + score += 10 + } + if (model.includes(q)) score += 3 + if (id.startsWith(q)) score += 5 + return score > 0 ? { score, snippet: snippet || session.title || '(untitled)' } : null +} + +// Single-instance singleton (same shape as Pinia). +let _store = null +export function getChatStore() { + if (!_store) _store = createStore() + return _store +} diff --git a/src/engines/hermes/pages/channels.js b/src/engines/hermes/pages/channels.js index 2fc1df4..9921594 100644 --- a/src/engines/hermes/pages/channels.js +++ b/src/engines/hermes/pages/channels.js @@ -6,6 +6,7 @@ import { t } from '../../../lib/i18n.js' export function render() { const el = document.createElement('div') el.className = 'page' + el.dataset.engine = 'hermes' el.innerHTML = `

${t('engine.hermesChannelsTitle')}

diff --git a/src/engines/hermes/pages/chat.js b/src/engines/hermes/pages/chat.js index f1131aa..de654ae 100644 --- a/src/engines/hermes/pages/chat.js +++ b/src/engines/hermes/pages/chat.js @@ -1,627 +1,1436 @@ /** - * Hermes Agent 对话页面 - * 通过 /v1/runs + SSE 事件流驱动，支持工具调用可视化和流式文本 - * 支持多会话管理、/xxx 快捷指令 + * Hermes Chat — editorial luxury re-write (Phase 4). + * + * Layout matches the official `hermes-web-ui`'s ChatPanel: + * ┌────────────────┬──────────────────────────────────────────────┐ + * │ SessionList │ Header: title · source · new-chat button │ + * │ (groups + ├──────────────────────────────────────────────┤ + * │ pinned + │ MessageList (user / assistant / tool) │ + * │ live badge) │ │ + * │ ├──────────────────────────────────────────────┤ + * │ │ ChatInput (textarea + slash menu + send) │ + * └────────────────┴──────────────────────────────────────────────┘ + * + * State lives in `chat-store.js`; this module only does DOM + events. */ import { t } from '../../../lib/i18n.js' import { api } from '../../../lib/tauri-api.js' -import { PROVIDER_PRESETS } from '../../../lib/model-presets.js' +import { toast } from '../../../components/toast.js' +import { showConfirm } from '../../../components/modal.js' +import { getChatStore, getSourceLabel } from '../lib/chat-store.js' -const STORAGE_KEY = 'hermes_chat_sessions' -const FILE_ACCESS_KEY = 'hermes_chat_file_access' -const SLASH_COMMANDS = [ - { cmd: '/help', desc: '显示可用命令' }, - { cmd: '/status', desc: '查看 Agent 状态' }, - { cmd: '/memory', desc: '管理记忆' }, - { cmd: '/skills', desc: '查看技能列表' }, - { cmd: '/clear', desc: '清空当前会话' }, - { cmd: '/new', desc: '新建会话' }, -] +// ----------------------------------------------------------- helpers -const TOOL_ICONS = { - web_search: '🔍', browse: '🌐', web_browse: '🌐', google: '🔍', - code: '💻', execute_code: '💻', run_code: '💻', python: '🐍', - terminal: '⌨️', shell: '⌨️', bash: '⌨️', command: '⌨️', - file: '📁', read_file: '📁', write_file: '📝', - memory: '🧠', recall: '🧠', - default: '🔧', -} -function toolIcon(name) { - const n = (name || '').toLowerCase() - for (const [k, v] of Object.entries(TOOL_ICONS)) { - if (n.includes(k)) return v - } - return TOOL_ICONS.default +function escHtml(s) { + return String(s ?? '').replace(/&/g, '&').replace(//g, '>') } +function escAttr(s) { + return String(s ?? '').replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>') +} + +function sanitizeMarkdownUrl(url) { + const raw = String(url || '').trim() + if (!raw) return '#' + if (raw.startsWith('#')) return raw + if (raw.startsWith('/') && !raw.startsWith('//')) return raw + try { + const u = new URL(raw, window.location.origin) + if (['http:', 'https:', 'mailto:'].includes(u.protocol)) return raw + } catch {} + return '#' +} + +/** Minimal Markdown → HTML (supports fenced code, bold/italic, headings, lists, links). */ function mdToHtml(text) { - return text + if (!text) return '' + const blocks = [] + let out = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => { + const idx = blocks.push({ lang, code }) - 1 + return `\u0000CB_${idx}\u0000` + }) + out = out .replace(/&/g, '&').replace(//g, '>') - .replace(/```(\w*)\n([\s\S]*?)```/g, '
$2
') .replace(/`([^`]+)`/g, '$1') .replace(/\*\*(.+?)\*\*/g, '$1') - .replace(/\*(.+?)\*/g, '$1') - .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1') + .replace(/(?$1') + .replace(/^#### (.+)$/gm, '
$1
') + .replace(/^### (.+)$/gm, '

$1

') + .replace(/^## (.+)$/gm, '

$1

') + .replace(/^# (.+)$/gm, '

$1

') + .replace(/^(?:\s*[-*]\s+(.+))(?:\n\s*[-*]\s+(.+))*/gm, (m) => + '
    ' + m.trim().split(/\n\s*[-*]\s+/).map(li => `
  • ${li.replace(/^[-*]\s+/, '')}
    • `).join('') + '
') + .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) => + `${label}`) + .replace(/\n{2,}/g, '

') .replace(/\n/g, '
') + out = out.replace(/\u0000CB_(\d+)\u0000/g, (_, i) => { + const { lang, code } = blocks[Number(i)] + return `

${escHtml(code)}
` + }) + return `

${out}

` } -function escHtml(s) { - return s.replace(/&/g, '&').replace(//g, '>') -} -function genId() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 8) } -// Lazy Tauri event listen (avoid top-level await for vite build) -let _listenFn = null -async function tauriListen(event, cb) { - if (!_listenFn) { - const mod = await import('@tauri-apps/api/event') - _listenFn = mod.listen +/** Pretty-print JSON-ish tool payload; fallback to raw string. */ +function prettyJson(val) { + if (val == null || val === '') return '' + if (typeof val === 'string') { + const s = val.trim() + if (s.startsWith('{') || s.startsWith('[')) { + try { return JSON.stringify(JSON.parse(s), null, 2) } catch {} + } + return val } - return _listenFn(event, cb) + try { return JSON.stringify(val, null, 2) } catch { return String(val) } } -// --- Session persistence --- -function loadSessions() { - try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') } catch { return [] } +function formatTime(ts) { + if (!ts) return '' + const d = new Date(ts) + if (!Number.isFinite(d.getTime())) return '' + const now = new Date() + if (d.toDateString() === now.toDateString()) { + return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + } + const mo = d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + return mo } -function saveSessions(sessions) { - localStorage.setItem(STORAGE_KEY, JSON.stringify(sessions)) + +function sessionDisplayTitle(s) { + return s.title || t('engine.chatNewSession') } -function sessionTitle(s) { - if (s.title) return s.title - const first = s.messages.find(m => m.role === 'user') - return first ? first.content.slice(0, 30) : t('engine.chatNewSession') + +/** Compact token formatter — `1234567 → "1.2M"`, `12345 → "12.3k"`, `42 → "42"`. */ +function formatTokens(n) { + if (!Number.isFinite(n) || n <= 0) return '0' + if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M' + if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'k' + return String(Math.round(n)) } +/** USD cost formatter — `0.0042 → "$0.0042"`, `0.51 → "$0.51"`, `12.3 → "$12.30"`. */ +function formatCost(usd) { + if (typeof usd !== 'number' || !Number.isFinite(usd) || usd <= 0) return '' + if (usd < 0.01) return '$' + usd.toFixed(4) + if (usd < 1) return '$' + usd.toFixed(3) + return '$' + usd.toFixed(2) +} + +async function copyText(text) { + try { + if (navigator.clipboard?.writeText) { + await navigator.clipboard.writeText(text) + return true + } + } catch {} + try { + const ta = document.createElement('textarea') + ta.value = text + ta.setAttribute('readonly', '') + ta.style.position = 'fixed' + ta.style.left = '-9999px' + document.body.appendChild(ta) + ta.select() + const ok = document.execCommand('copy') + ta.remove() + return ok + } catch { + return false + } +} + +// ----------------------------------------------------------- icons + +const ICONS = { + plus: '', + chevron: '', + menu: '', + more: '', + close: '', + send: '', + stop: '', + pin: '', + spinner: '', + copy: '', + trash: '', + layers: '', + check: '', + checkboxOff: '', + checkboxOn: '', + tool: '', + refresh: '', + sidebar: '', +} + +const SLASH_COMMANDS = [ + { cmd: '/help', desc: 'chatSlashHelpDesc' }, + { cmd: '/status', desc: 'chatSlashStatusDesc' }, + { cmd: '/memory', desc: 'chatSlashMemoryDesc' }, + { cmd: '/skills', desc: 'chatSlashSkillsDesc' }, + { cmd: '/clear', desc: 'chatSlashClearDesc' }, + { cmd: '/new', desc: 'chatSlashNewDesc' }, +] + +// ----------------------------------------------------------- rename modal + +/** + * Lightweight rename modal (used by sidebar context menu). Returns the new + * title on confirm, or `null` on cancel. Mirrors `showConfirm`'s pattern + * so we don't need Vue-style reactivity. + */ +function showRenameModal(current) { + return new Promise((resolve) => { + const overlay = document.createElement('div') + overlay.className = 'modal-overlay' + overlay.innerHTML = ` +
+
${escHtml(t('engine.chatRenameSession'))}
+
+ +
+
+ + +
+
+ ` + document.body.appendChild(overlay) + const input = overlay.querySelector('.hm-chat-rename-input') + input?.focus() + input?.select() + + const close = (v) => { overlay.remove(); resolve(v) } + const confirm = () => { + const v = input?.value.trim() || '' + if (!v) { input?.focus(); return } + close(v) + } + + overlay.addEventListener('click', (e) => { + if (e.target === overlay) close(null) + }) + overlay.querySelector('[data-act="cancel"]').onclick = () => close(null) + overlay.querySelector('[data-act="ok"]').onclick = confirm + input?.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { e.preventDefault(); confirm() } + else if (e.key === 'Escape') close(null) + }) + }) +} + +// ----------------------------------------------------------- context menu + +function showContextMenu(x, y, items) { + const existing = document.querySelector('.hm-chat-ctxmenu') + if (existing) existing.remove() + const menu = document.createElement('div') + menu.className = 'hm-chat-ctxmenu' + menu.innerHTML = items.map((it, i) => ` + + `).join('') + + document.body.appendChild(menu) + // Position + clamp to viewport. + const rect = menu.getBoundingClientRect() + const vw = window.innerWidth, vh = window.innerHeight + menu.style.left = Math.min(x, vw - rect.width - 8) + 'px' + menu.style.top = Math.min(y, vh - rect.height - 8) + 'px' + + const close = () => { + menu.remove() + document.removeEventListener('click', onDocClick, true) + document.removeEventListener('keydown', onKey) + } + const onDocClick = (e) => { + if (!menu.contains(e.target)) close() + } + const onKey = (e) => { if (e.key === 'Escape') close() } + setTimeout(() => { + document.addEventListener('click', onDocClick, true) + document.addEventListener('keydown', onKey) + }, 0) + menu.addEventListener('click', (e) => { + const btn = e.target.closest('.hm-chat-ctxmenu-item') + if (!btn) return + const idx = Number(btn.dataset.idx) + close() + items[idx]?.action?.() + }) +} + +// ----------------------------------------------------------- main render + export function render() { const el = document.createElement('div') - el.className = 'page hermes-chat-page' + el.className = 'hermes-chat-page' + el.dataset.engine = 'hermes' - let sessions = loadSessions() - let activeId = sessions[0]?.id || null - let streaming = false - let gwOnline = false + const store = getChatStore() + + // Local UI-only state (not in store). + let sidebarOpen = !window.matchMedia('(max-width: 768px)').matches + const expandedToolIds = new Set() // tool message ids (persist across redraws) let showSlash = false let slashFilter = '' - let currentModel = '' // 当前模型名 - let modelList = [] // 已获取的模型列表 - let showModelDropdown = false - let fileAccessEnabled = localStorage.getItem(FILE_ACCESS_KEY) === 'true' + let gwOnline = false + let currentModel = '' + const mobileQuery = window.matchMedia('(max-width: 720px)') - // 流式状态 - let pendingText = '' // 累积的 delta 文本 - let activeTools = [] // 当前活跃的工具调用 [{ name, status, detail, input, output, error }] - let unlisteners = [] // Tauri 事件监听取消函数 + // Input state must live outside the textarea DOM node because every draw() + // rebuilds innerHTML. Without this, typing `/` would wipe the composed text + // when the slash menu triggers a redraw. + let inputValue = '' + let inputFocused = false + let inputCaret = 0 // caret position restored after re-render + let lastActiveSessionId = store.state.activeSessionId + let forceScrollBottom = true - function active() { return sessions.find(s => s.id === activeId) } + // Multi-select for batch session deletion. When non-null, the sidebar + // switches into "selection mode": a checkbox appears on every row and + // selecting items doesn't switch sessions. + let selectionMode = false + const selected = new Set() - function newSession() { - const s = { id: genId(), title: '', messages: [], createdAt: Date.now() } - sessions.unshift(s) - activeId = s.id - saveSessions(sessions) - } + // Profile switcher dropdown (for Hermes multi-profile / multi-agent). + let profileMenuOpen = false - if (!sessions.length) newSession() + // Session search modal state. `null` means closed. + // { query: string, selectedIdx: number } + let searchState = null - async function init() { - try { - const info = await api.checkHermes() - gwOnline = !!info?.gatewayRunning - } catch (_) {} - // Load current model config - try { - const cfg = await api.hermesReadConfig() - if (cfg?.model) currentModel = cfg.model - if (cfg?.base_url && cfg?.api_key) { - // Pre-fetch model list for quick switch - try { - const base = cfg.base_url.replace(/\/+$/, '').replace(/\/(chat\/completions|completions|responses|messages|models)\/?$/, '') - const resp = await fetch(base + '/models', { headers: { 'Authorization': `Bearer ${cfg.api_key}` }, signal: AbortSignal.timeout(8000) }) - if (resp.ok) { - const data = await resp.json() - modelList = (data.data || []).map(m => m.id).filter(Boolean).sort() - } - } catch (_) {} - } - } catch (_) {} + // --- initial session load + model meta --- + store.loadSessions().then(() => draw()) + store.loadProfiles().then(() => draw()).catch(() => {}) + api.checkHermes().then(info => { + gwOnline = !!info?.gatewayRunning + currentModel = info?.model || '' draw() - } + }).catch(() => {}) - // --- 工具调用卡片渲染 --- - function formatToolData(data) { - if (!data) return '' - if (typeof data === 'string') { - // 尝试解析 JSON 以美化显示 - try { const obj = JSON.parse(data); return JSON.stringify(obj, null, 2) } catch { return data } - } - return JSON.stringify(data, null, 2) - } + // ----------------------------------------------------------- subscription - function renderToolCard(t, collapsed = true) { - const icon = toolIcon(t.name) - const statusCls = t.status === 'complete' ? 'done' : t.status === 'error' ? 'err' : 'active' - const statusText = t.status === 'complete' ? '✓ 完成' : t.status === 'error' ? '✗ 失败' : '⟳ 运行中' - const detail = t.detail && t.detail !== '失败' && t.detail !== '完成' ? ` — ${escHtml(t.detail)}` : '' - const inputStr = formatToolData(t.input) - const outputStr = formatToolData(t.output) - const errorStr = t.error ? (typeof t.error === 'string' ? t.error : JSON.stringify(t.error)) : '' - // fallback: 用 raw 快照显示原始事件数据 - const rawStr = (!inputStr && !outputStr && !errorStr) ? formatToolData(t._raw || t._rawCompleted) : '' - const hasDetails = inputStr || outputStr || errorStr || rawStr - const cardId = 'tc-' + genId() - let detailsHtml = '' - if (hasDetails) { - detailsHtml = `
- ${inputStr ? `
输入
${escHtml(inputStr)}
` : ''} - ${errorStr ? `
错误
${escHtml(errorStr)}
` : ''} - ${outputStr ? `
输出
${escHtml(outputStr)}
` : ''} - ${rawStr ? `
详情
${escHtml(rawStr)}
` : ''} -
` - } - return `
-
${icon} ${escHtml(t.name)}${statusText}${detail}${hasDetails ? `▶` : ''}
- ${detailsHtml} -
` - } + // Store subscription → `draw()` on mutation. rAF-batched inside the store + // so a burst of events (streaming deltas) collapses into a single redraw. + const unsubscribe = store.subscribe(() => draw()) - // --- 增量更新流式区域（避免全量 draw 导致闪烁）--- - function updateStreamArea() { - const msgsEl = el.querySelector('#hm-chat-msgs') - if (!msgsEl) return - let streamEl = msgsEl.querySelector('.hm-stream-area') - if (!streaming) { - if (streamEl) streamEl.remove() - return - } - if (!streamEl) { - streamEl = document.createElement('div') - streamEl.className = 'hm-stream-area' - msgsEl.appendChild(streamEl) - } - const toolsHtml = activeTools.map(t => renderToolCard(t, false)).join('') - const textHtml = pendingText - ? `
${mdToHtml(pendingText)}
` - : (activeTools.length === 0 ? `
${t('engine.chatThinking')}
` : '') - streamEl.innerHTML = toolsHtml + textHtml - msgsEl.scrollTop = msgsEl.scrollHeight - } + // Teardown + mount-observer are set up near the end of render() (after + // `onGlobalKey` is defined). We avoid attaching a MutationObserver here + // to prevent a double-teardown path. - // --- Draw --- - function draw() { - const cur = active() - const msgs = cur?.messages || [] - el.innerHTML = ` -
-
-
- ${t('engine.hermesChatTitle')} - + // ----------------------------------------------------------- rendering + + function renderSessionItem(s) { + const isActive = s.id === store.state.activeSessionId + const isLive = store.isSessionLive(s.id) + const isPinned = store.state.pinned.has(s.id) + const isSelected = selected.has(s.id) + // IMPORTANT: outer wrapper is a `
`, NOT a ` + ` : ''} +
+
+ ${isLive ? `` : ''} + ${isPinned ? `` : ''} + ${escHtml(sessionDisplayTitle(s))} + ${isLive ? `${escHtml(t('engine.chatLive'))}` : ''}
-
- ${sessions.map(s => ` -
- ${escHtml(sessionTitle(s))} - -
- `).join('')} +
+ ${s.model ? `${escHtml(s.model)}` : ''} + ${escHtml(formatTime(s.updatedAt || s.createdAt))}
-
-
- ${t('engine.configModel')}: -
- - ${showModelDropdown && modelList.length ? `
${modelList.map(m => `
${escHtml(m)}
`).join('')}
` : ''} -
- + - ${t('engine.dashModelConfig')} →
-
- ${msgs.length === 0 ? `
${t('engine.chatEmptyHint')}
` : ''} - ${msgs.map(m => renderMessage(m)).join('')} + `} +
+ ` + } + + function visibleSessionIds() { + return store.state.sessions.map(s => s.id) + } + + function renderProfileSwitcher() { + const profiles = store.state.profiles || [] + const active = store.state.activeProfile || 'default' + if (!profiles.length) { + // Fallback: even when CLI doesn't expose profiles, surface the active + // one so the user knows what they're talking to. + return ` + + ` + } + return ` + + ${profileMenuOpen ? ` + + ` : ''} + ` + } + + function renderSidebar() { + const { pinned, groups } = store.groupedSessions() + const sessionsEmpty = store.state.sessions.length === 0 + const allIds = visibleSessionIds() + const allSelected = selectionMode && allIds.length > 0 && allIds.every(id => selected.has(id)) + return ` + + ` + } + + function renderToolMessage(m) { + const expanded = expandedToolIds.has(m.id) + const hasDetails = !!(m.toolArgs || m.toolResult) + return ` +
+
+ ${hasDetails + ? `${ICONS.chevron}` + : `${ICONS.tool}`} + ${escHtml(m.toolName || 'tool')} + ${!expanded && m.toolPreview ? `${escHtml(m.toolPreview)}` : ''} + ${m.toolStatus === 'running' ? `` : ''} + ${m.toolStatus === 'error' ? `${escHtml(t('engine.chatErrorBadge'))}` : ''} +
+ ${expanded && hasDetails ? ` +
+ ${m.toolArgs ? ` +
+
${escHtml(t('engine.chatArguments'))}
+ 
${escHtml(prettyJson(m.toolArgs))}
+
+ ` : ''} + ${m.toolResult ? ` +
+
${escHtml(t('engine.chatResult'))}
+ 
${escHtml(prettyJson(m.toolResult))}
+
+ ` : ''} +
+ ` : ''} +
+ ` + } + + function renderMessage(m) { + if (m.role === 'tool') return renderToolMessage(m) + if (m.role === 'system') { + return ` +
+
+
${mdToHtml(m.content)}
+
+
+ ` + } + const isUser = m.role === 'user' + const canCopy = !!(m.content || '').trim() + return ` +
+
+ ${!isUser ? `` : ''} +
+
+
${mdToHtml(m.content)}${m.isStreaming && !m.content ? '' : ''}
+
+
+ ${escHtml(formatTime(m.timestamp))} + ${canCopy ? ` + + ` : ''}
` - bind() - if (streaming) updateStreamArea() - scrollToBottom() } - function renderMessage(m) { - const isUser = m.role === 'user' - // 工具摘要行（存储在 messages 中的已完成工具记录） - if (m.role === 'tool-summary') { - return `
${m.tools.map(t => renderToolCard(t, true)).join('')}
` + function renderLiveTools() { + if (!store.state.streaming) return '' + const tools = store.state.liveTools + return ` +
+
+ + ${escHtml(t('engine.chatThinking'))} +
+ ${tools.length ? ` +
+ ${tools.slice().reverse().map(tc => ` +
+ ${ICONS.tool} + ${escHtml(tc.name)} + ${tc.preview ? `${escHtml(tc.preview)}` : ''} + ${tc.status === 'running' ? `` : ''} + ${tc.status === 'error' ? `${escHtml(t('engine.chatErrorBadge'))}` : ''} +
+ `).join('')} +
+ ` : ''} +
+ ` + } + + function renderMessages() { + const s = store.activeSession() + if (!s) { + return `
${escHtml(t('engine.chatNewSession'))}
` } - return `
-
${isUser ? escHtml(m.content) : mdToHtml(m.content)}
-
` + if (store.state.loadingMessages) { + return ` +
+
${escHtml(t('engine.chatLoadingMessages'))}
+
${escHtml(t('engine.chatLoadingMessagesSub'))}
+
+ ` + } + if (!s.messages.length && !store.state.streaming) { + return ` +
+
${escHtml(t('engine.chatEmptyTitle'))}
+
${escHtml(t('engine.chatEmptySub'))}
+
+ ` + } + return s.messages.map(renderMessage).join('') + renderLiveTools() } function renderSlashMenu() { - const cmds = SLASH_COMMANDS.filter(c => !slashFilter || c.cmd.includes(slashFilter)) - if (!cmds.length) return '' - return `
${cmds.map(c => - `
${c.cmd}${c.desc}
` - ).join('')}
` + if (!showSlash) return '' + const filtered = SLASH_COMMANDS.filter(c => !slashFilter || c.cmd.includes(slashFilter)) + if (!filtered.length) return '' + return ` +
+ ${filtered.map(c => ` + + `).join('')} +
+ ` } - function scrollToBottom() { - const msgsEl = el.querySelector('#hm-chat-msgs') - if (msgsEl) msgsEl.scrollTop = msgsEl.scrollHeight + function renderInput() { + const active = store.activeSession() + const streaming = store.state.streaming + const placeholder = streaming + ? t('engine.chatStreamingPlaceholder') + : t('engine.chatInputPlaceholder') + // NOTE: textarea is NOT disabled during streaming — the user should still + // be able to compose the next message while the agent is thinking. The + // Send button is hidden/swapped instead. + // The keyboard shortcut hint now lives inside the placeholder so we + // don't render a duplicate row beneath the textarea (the prior layout + // looked like "套娃" — same hint shown twice). Slash menu still pops + // up above when the user types `/`. + // + // Token usage strip — only when there's an active session with real + // usage. Mirrors hermes-web-ui's input-top-bar (sans context-length + // bar, which requires a server-side endpoint we don't have). + const totalIn = active?.inputTokens || 0 + const totalOut = active?.outputTokens || 0 + const totalCache = (active?.cacheReadTokens || 0) + (active?.cacheWriteTokens || 0) + const cost = active?.estimatedCostUsd + const showUsage = !!active && (totalIn + totalOut + totalCache) > 0 + return ` +
+ ${renderSlashMenu()} + ${showUsage ? ` +
+ + ${escHtml(t('engine.chatUsageIn'))} + ${formatTokens(totalIn)} + + + ${escHtml(t('engine.chatUsageOut'))} + ${formatTokens(totalOut)} + + ${totalCache > 0 ? ` + + ${escHtml(t('engine.chatUsageCache'))} + ${formatTokens(totalCache)} + ` : ''} + ${cost ? ` + + ${escHtml(formatCost(cost))} + ` : ''} +
` : ''} +
+ +
+ ${streaming + ? `` + : ``} +
+
+
+ ` } - // 事件委托：工具卡片展开/折叠（对静态和动态流式卡片都生效） - el.addEventListener('click', (e) => { - const header = e.target.closest('.hm-tool-card-header') - if (!header) return - const card = header.closest('.hm-tool-card') - const details = card?.querySelector('.hm-tool-details') - const toggle = header.querySelector('.hm-tool-toggle') - if (details) { - const open = details.style.display !== 'none' - details.style.display = open ? 'none' : 'block' - if (toggle) toggle.textContent = open ? '▶' : '▼' + function renderHeader() { + const active = store.activeSession() + const title = active ? sessionDisplayTitle(active) : t('engine.chatNewSession') + const source = active?.source && active.source !== '__local__' ? getSourceLabel(active.source) : '' + return ` +
+
+ +
+ ${escHtml(title)} + ${source ? `${escHtml(source)}` : ''} +
+
+
+
+ + GATEWAY + ${escHtml(gwOnline ? t('engine.chatGatewayOnlineShort') : t('engine.chatGatewayOfflineShort'))} + ${currentModel ? `${escHtml(currentModel)}` : ''} +
+ + + +
+
+ ` + } + + // ----------------------------------------------------------- draw + + function draw() { + const scrollTop = el.querySelector('.hm-chat-messages')?.scrollTop + const wasNearBottom = isMessagesNearBottom() + const activeSessionId = store.state.activeSessionId + const activeChanged = activeSessionId !== lastActiveSessionId + if (activeChanged) { + lastActiveSessionId = activeSessionId + forceScrollBottom = true } - }) + + el.innerHTML = ` +
+
+ ${renderSidebar()} +
+ ${renderHeader()} +
+ ${renderMessages()} +
+ + ${renderInput()} +
+
+ ` + bind() + + // Restore / auto-scroll. + const msgsEl = el.querySelector('.hm-chat-messages') + if (msgsEl) { + if (forceScrollBottom || wasNearBottom) { + msgsEl.scrollTop = msgsEl.scrollHeight + forceScrollBottom = false + } else if (scrollTop != null) { + msgsEl.scrollTop = scrollTop + } + updateJumpButton() + } + + // Restore textarea focus + caret position after every redraw so typing + // remains smooth even when store mutations trigger a full DOM rebuild. + const input = el.querySelector('#hm-chat-input') + if (input) { + if (inputFocused) { + input.focus() + try { + const pos = Math.min(inputCaret, inputValue.length) + input.setSelectionRange(pos, pos) + } catch { /* selection unsupported for the current state */ } + } + autoResize(input) + } + + // Draw search modal on top if open. + drawSearchModal() + } + + function isMessagesNearBottom(threshold = 120) { + const m = el.querySelector('.hm-chat-messages') + if (!m) return true + return m.scrollHeight - m.scrollTop - m.clientHeight < threshold + } + + function updateJumpButton() { + const btn = el.querySelector('#hm-chat-jump-bottom') + if (!btn) return + btn.classList.toggle('is-visible', !isMessagesNearBottom(180)) + } + + // ----------------------------------------------------------- event binding + + function toggleSelected(sid) { + if (!sid) return + if (selected.has(sid)) selected.delete(sid) + else selected.add(sid) + draw() + } function bind() { - // Model quick-switch - el.querySelector('#hm-chat-model')?.addEventListener('click', () => { - if (modelList.length) { showModelDropdown = !showModelDropdown; draw() } + // --- Sidebar header --- + el.querySelector('.hm-chat-new-btn')?.addEventListener('click', () => { + store.newChat() }) - el.querySelectorAll('.hm-chat-model-opt').forEach(opt => { - opt.addEventListener('click', async () => { - const m = opt.dataset.model - if (m && m !== currentModel) { - try { - await api.hermesUpdateModel(m) - currentModel = m - } catch (_) {} - } - showModelDropdown = false; draw() + el.querySelector('#hm-chat-toggle-sidebar')?.addEventListener('click', () => { + sidebarOpen = !sidebarOpen + draw() + }) + el.querySelector('#hm-chat-sidebar-backdrop')?.addEventListener('click', () => { + sidebarOpen = false + draw() + }) + const msgsEl = el.querySelector('#hm-chat-messages') + msgsEl?.addEventListener('scroll', updateJumpButton) + el.querySelector('#hm-chat-jump-bottom')?.addEventListener('click', () => { + if (!msgsEl) return + msgsEl.scrollTop = msgsEl.scrollHeight + updateJumpButton() + }) + + // --- Group collapse --- + el.querySelectorAll('.hm-chat-group-head[data-group]').forEach(btn => { + btn.addEventListener('click', (e) => { + // Don't collapse when clicking static-header style. + if (btn.classList.contains('hm-chat-group-head--static')) return + const src = btn.dataset.group + store.toggleCollapsed(src) }) }) - document.addEventListener('click', (e) => { - if (showModelDropdown && !e.target.closest('#hm-chat-model') && !e.target.closest('#hm-chat-model-dd')) { - showModelDropdown = false; draw() - } + + // --- Session select --- + el.querySelectorAll('.hm-chat-session-item').forEach(item => { + item.addEventListener('click', (e) => { + if (e.target.closest('.hm-chat-session-action')) return + const sid = item.dataset.sid + if (!sid) return + if (selectionMode) { + toggleSelected(sid) + return + } + if (sid !== store.state.activeSessionId) { + forceScrollBottom = true + store.switchSession(sid) + if (mobileQuery.matches) sidebarOpen = false + } + }) + item.addEventListener('keydown', (e) => { + if (e.key !== 'Enter' && e.key !== ' ') return + if (e.target.closest('.hm-chat-session-action')) return + e.preventDefault() + const sid = item.dataset.sid + if (!sid) return + if (selectionMode) { + toggleSelected(sid) + return + } + if (sid !== store.state.activeSessionId) { + forceScrollBottom = true + store.switchSession(sid) + if (mobileQuery.matches) sidebarOpen = false + } + }) + item.addEventListener('contextmenu', (e) => { + e.preventDefault() + const sid = item.dataset.sid + openSessionContextMenu(e.clientX, e.clientY, sid) + }) }) - // File access toggle - el.querySelector('#hm-file-access-btn')?.addEventListener('click', () => { - fileAccessEnabled = !fileAccessEnabled - localStorage.setItem(FILE_ACCESS_KEY, fileAccessEnabled ? 'true' : 'false') + + // --- Selection mode controls --- + el.querySelector('#hm-chat-select-toggle')?.addEventListener('click', () => { + selectionMode = !selectionMode + if (!selectionMode) selected.clear() + profileMenuOpen = false + draw() + }) + el.querySelectorAll('[data-sid-check]').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation() + toggleSelected(btn.dataset.sidCheck) + }) + }) + el.querySelector('#hm-chat-bulk-select-all')?.addEventListener('click', () => { + const ids = visibleSessionIds() + const allSelected = ids.length > 0 && ids.every(id => selected.has(id)) + if (allSelected) selected.clear() + else for (const id of ids) selected.add(id) + draw() + }) + el.querySelector('#hm-chat-bulk-delete')?.addEventListener('click', async () => { + if (selected.size === 0) return + const ok = await showConfirm(t('engine.chatConfirmBulkDelete').replace('{n}', String(selected.size))) + if (!ok) return + const ids = Array.from(selected) + const result = await store.bulkDeleteSessions(ids) + selected.clear() + const skipped = result.skipped.length + const failed = result.failed.length + const deleted = result.deleted.length + if (deleted > 0 && failed === 0 && skipped === 0) { + toast(t('engine.chatBulkDeleted').replace('{n}', String(deleted)), 'success') + } else if (deleted > 0) { + toast(t('engine.chatBulkPartial') + .replace('{n}', String(deleted)) + .replace('{f}', String(failed + skipped)), 'success') + } else { + toast(t('engine.chatBulkFailed'), 'error') + } + if (failed === 0) selectionMode = false draw() }) - // Session sidebar - el.querySelector('.hm-new-btn')?.addEventListener('click', () => { newSession(); draw() }) - el.querySelectorAll('.hm-session-item').forEach(item => { - item.addEventListener('click', (e) => { - if (e.target.closest('.hm-session-del')) return - activeId = item.dataset.sid - draw() + // --- Profile switcher --- + el.querySelector('#hm-chat-profile-toggle')?.addEventListener('click', (e) => { + const btn = e.currentTarget + if (btn?.disabled) return + profileMenuOpen = !profileMenuOpen + draw() + }) + el.querySelectorAll('[data-profile]').forEach(btn => { + btn.addEventListener('click', async (e) => { + e.stopPropagation() + const name = btn.dataset.profile + profileMenuOpen = false + if (!name || name === store.state.activeProfile) { + draw() + return + } + if (store.state.streaming) { + toast(t('engine.chatProfileSwitchBlocked'), 'error') + draw() + return + } + try { + await store.switchProfile(name) + toast(t('engine.chatProfileSwitched').replace('{name}', name), 'success') + } catch (err) { + toast((err?.message || String(err)), 'error') + } }) }) - el.querySelectorAll('.hm-session-del').forEach(btn => { + + el.querySelectorAll('.hm-chat-session-menu').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation() - const sid = btn.dataset.del - sessions = sessions.filter(s => s.id !== sid) - if (activeId === sid) { - if (!sessions.length) newSession() - activeId = sessions[0].id + const sid = btn.dataset.sidMenu + const rect = btn.getBoundingClientRect() + openSessionContextMenu(rect.left, rect.bottom + 4, sid) + }) + }) + + // --- Session delete --- + el.querySelectorAll('.hm-chat-session-del').forEach(btn => { + btn.addEventListener('click', async (e) => { + e.stopPropagation() + const sid = btn.dataset.sidDel + const ok = await showConfirm(t('engine.chatConfirmDelete')) + if (!ok) return + try { + await store.deleteSession(sid) + toast(t('engine.chatSessionDeleted'), 'success') + } catch (err) { + const msg = err?.message === 'RUNNING_SESSION' ? t('engine.chatDeleteRunningBlocked') : (err?.message || err) + toast(t('engine.chatDeleteFailed') + ': ' + msg, 'error') } - saveSessions(sessions) + }) + }) + + el.querySelectorAll('[data-copy-mid]').forEach(btn => { + btn.addEventListener('click', async (e) => { + e.stopPropagation() + const mid = btn.dataset.copyMid + const s = store.activeSession() + const msg = s?.messages.find(m => m.id === mid) + if (!msg?.content) return + const ok = await copyText(msg.content) + toast(ok ? t('common.copied') : t('engine.chatCopyFailed'), ok ? 'success' : 'error') + }) + }) + + el.querySelectorAll('.hm-chat-code-copy').forEach(btn => { + btn.addEventListener('click', async (e) => { + e.stopPropagation() + const code = btn.closest('pre')?.querySelector('code')?.textContent || '' + if (!code) return + const ok = await copyText(code) + toast(ok ? t('common.copied') : t('engine.chatCopyFailed'), ok ? 'success' : 'error') + }) + }) + + // --- Tool message expand --- + el.querySelectorAll('[data-tool-toggle]').forEach(btn => { + btn.addEventListener('click', () => { + const id = btn.dataset.toolToggle + if (expandedToolIds.has(id)) expandedToolIds.delete(id) + else expandedToolIds.add(id) draw() }) }) - // Slash menu clicks - el.querySelectorAll('.hm-slash-item').forEach(item => { + // --- Header actions --- + el.querySelector('#hm-chat-new-chat')?.addEventListener('click', () => { + forceScrollBottom = true + store.newChat() + }) + el.querySelector('#hm-chat-search-open')?.addEventListener('click', () => openSearch()) + el.querySelector('#hm-chat-copy-id')?.addEventListener('click', async () => { + const s = store.activeSession() + if (!s) return + try { + const ok = await copyText(s.id) + toast(ok ? t('common.copied') : t('engine.chatCopyFailed'), ok ? 'success' : 'error') + } catch { toast(t('engine.chatCopyFailed'), 'error') } + }) + + // --- Input --- + // + // We track the composed text in `inputValue` (outside the DOM) so it + // survives redraws triggered by streaming updates or slash-menu toggles. + // The textarea's `value` is authoritative only between events; on the + // next draw() the markup re-seeds it from `inputValue`. + const input = el.querySelector('#hm-chat-input') + if (input) { + // Event ordering: focus / blur → keydown → input. We update the state + // on BOTH input (value) and selectionchange proxies (keydown/keyup) to + // keep caret restore accurate. + input.addEventListener('focus', () => { inputFocused = true }) + input.addEventListener('blur', () => { inputFocused = false }) + input.addEventListener('keyup', () => { inputCaret = input.selectionStart || 0 }) + input.addEventListener('click', () => { inputCaret = input.selectionStart || 0 }) + + input.addEventListener('keydown', (e) => { + if (e.isComposing || e.keyCode === 229) return + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault() + handleSend() + return + } + if (e.key === 'Escape' && showSlash) { + showSlash = false + draw() + } + }) + + input.addEventListener('input', () => { + inputValue = input.value + inputCaret = input.selectionStart || inputValue.length + const wasShowing = showSlash + if (inputValue.startsWith('/') && !inputValue.includes(' ')) { + showSlash = true + slashFilter = inputValue + } else if (showSlash) { + showSlash = false + } + // Only call draw() when the slash menu visibility actually changes — + // otherwise a plain keystroke would trigger an expensive full rebuild. + if (wasShowing !== showSlash || (showSlash && slashFilter !== inputValue)) { + draw() + } else { + autoResize(input) + } + }) + } + + el.querySelector('#hm-chat-send')?.addEventListener('click', handleSend) + el.querySelector('#hm-chat-stop')?.addEventListener('click', () => { + store.stopStreaming() + toast(t('engine.chatStopped'), 'success') + }) + + el.querySelectorAll('.hm-chat-slash-item').forEach(item => { item.addEventListener('click', () => { - const input = el.querySelector('#hm-chat-input') - if (input) { input.value = item.dataset.cmd + ' '; input.focus() } + const cmd = item.dataset.cmd + inputValue = cmd + ' ' + inputCaret = inputValue.length + inputFocused = true showSlash = false draw() }) }) + } - // Send - el.querySelector('.hm-chat-send')?.addEventListener('click', sendMessage) - const input = el.querySelector('#hm-chat-input') - if (input) { - input.addEventListener('keydown', (e) => { - if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage() } - if (e.key === 'Escape') { showSlash = false; draw() } - }) - input.addEventListener('input', () => { - input.style.height = 'auto' - input.style.height = Math.min(input.scrollHeight, 120) + 'px' - const val = input.value - if (val.startsWith('/') && !val.includes(' ')) { - showSlash = true; slashFilter = val - const parent = input.closest('.hermes-chat-input-area')?.querySelector('[style*="position:relative"]') - if (parent) { - const existing = parent.querySelector('.hm-slash-menu') - if (existing) existing.remove() - const cmds = SLASH_COMMANDS.filter(c => c.cmd.includes(val)) - if (cmds.length) { - const div = document.createElement('div') - div.className = 'hm-slash-menu' - div.innerHTML = cmds.map(c => - `
${c.cmd}${c.desc}
` - ).join('') - div.querySelectorAll('.hm-slash-item').forEach(item => { - item.addEventListener('click', () => { - input.value = item.dataset.cmd + ' ' - input.focus() - showSlash = false - div.remove() - }) - }) - parent.prepend(div) - } + function autoResize(input) { + input.style.height = 'auto' + input.style.height = Math.min(input.scrollHeight, 160) + 'px' + } + + function openSessionContextMenu(x, y, sid) { + const s = store.state.sessions.find(sess => sess.id === sid) + if (!s) return + const isPinned = store.state.pinned.has(sid) + showContextMenu(x, y, [ + { + label: isPinned ? t('engine.chatUnpin') : t('engine.chatPin'), + icon: ICONS.pin, + action: () => store.togglePinned(sid), + }, + { + label: t('engine.chatRename'), + action: async () => { + const next = await showRenameModal(s.title) + if (next == null) return + const ok = await store.renameSession(sid, next) + if (ok) toast(t('engine.chatRenamed'), 'success') + else toast(t('engine.chatRenameFailed'), 'error') + }, + }, + { + label: t('engine.chatCopySessionId'), + icon: ICONS.copy, + action: async () => { + try { + const ok = await copyText(sid) + toast(ok ? t('common.copied') : t('engine.chatCopyFailed'), ok ? 'success' : 'error') + } catch { toast(t('engine.chatCopyFailed'), 'error') } + }, + }, + { + label: t('engine.chatDeleteSession'), + icon: ICONS.trash, + danger: true, + action: async () => { + const ok = await showConfirm(t('engine.chatConfirmDelete')) + if (!ok) return + try { + await store.deleteSession(sid) + toast(t('engine.chatSessionDeleted'), 'success') + } catch (err) { + const msg = err?.message === 'RUNNING_SESSION' ? t('engine.chatDeleteRunningBlocked') : (err?.message || err) + toast(t('engine.chatDeleteFailed') + ': ' + msg, 'error') } - } else if (showSlash) { - showSlash = false - el.querySelector('.hm-slash-menu')?.remove() - } - }) - input.focus() - } + }, + }, + ]) } - // --- 清理事件监听 --- - function cleanupListeners() { - for (const fn of unlisteners) fn() - unlisteners = [] + // ----------------------------------------------------------- slash handlers + + /** + * Reset the composed input state and redraw. Called after a send, slash + * command, or `/clear`, `/new` shortcut. + */ + function resetInput() { + inputValue = '' + inputCaret = 0 + showSlash = false + slashFilter = '' } - // --- 设置 Tauri 事件监听 --- - async function setupRunListeners() { - cleanupListeners() - const u1 = await tauriListen('hermes-run-delta', (e) => { - pendingText += e.payload?.delta || '' - updateStreamArea() - }) - const u2 = await tauriListen('hermes-run-tool', (e) => { - const evt = e.payload || {} - const evtType = evt.event || '' - const toolName = evt.tool || evt.tool_name || evt.name || 'tool' - const preview = evt.preview || evt.detail || evt.message || '' - // 提取 input/output 时兼容多种字段名 - const extractData = (obj, keys) => { - for (const k of keys) { - if (obj[k] != null && obj[k] !== '') return obj[k] - } - return null - } - // 构建去掉元字段后的 raw 快照，作为 fallback - const rawSnapshot = (exclude) => { - const copy = {} - for (const [k, v] of Object.entries(evt)) { - if (!exclude.includes(k) && v != null && v !== '') copy[k] = v - } - return Object.keys(copy).length ? copy : null - } - if (evtType === 'tool.started') { - const inputData = extractData(evt, ['input', 'args', 'arguments', 'parameters', 'params', 'data']) - activeTools.push({ name: toolName, status: 'active', detail: preview, input: inputData, output: null, error: null, _raw: rawSnapshot(['event', 'tool', 'tool_name', 'name']) }) - } else if (evtType === 'tool.completed') { - const t = activeTools.find(t => t.name === toolName && t.status === 'active') - if (t) { - t.status = evt.error ? 'error' : 'complete' - t.detail = evt.error ? '失败' : (evt.duration ? `${evt.duration}s` : '完成') - t.output = extractData(evt, ['output', 'result', 'content', 'data', 'response']) - if (evt.error) t.error = typeof evt.error === 'string' ? evt.error : JSON.stringify(evt.error) - // 合并 started 时可能没有的 input - if (!t.input) t.input = extractData(evt, ['input', 'args', 'arguments', 'parameters', 'params']) - t._rawCompleted = rawSnapshot(['event', 'tool', 'tool_name', 'name', 'error', 'duration']) - } - } else if (evtType === 'tool.error') { - const t = activeTools.find(t => t.name === toolName && t.status === 'active') - if (t) { - t.status = 'error' - t.detail = preview || '失败' - t.error = evt.error || preview || '未知错误' - } - } else if (evtType === 'tool.progress') { - const t = activeTools.find(t => t.name === toolName && t.status === 'active') - if (t && preview) t.detail = preview - } - updateStreamArea() - }) - const u3 = await tauriListen('hermes-run-done', (e) => { - const cur = active() - if (!cur) return - const output = e.payload?.output || pendingText || '(empty)' - // 存储工具摘要（含输入输出详情） - if (activeTools.length > 0) { - cur.messages.push({ role: 'tool-summary', tools: activeTools.map(t => ({ - name: t.name, status: t.status, detail: t.detail, - input: t.input, output: t.output, error: t.error, - _raw: t._raw, _rawCompleted: t._rawCompleted - })) }) - } - cur.messages.push({ role: 'assistant', content: output }) - streaming = false - pendingText = '' - activeTools = [] - saveSessions(sessions) - cleanupListeners() - draw() - }) - const u4 = await tauriListen('hermes-run-error', (e) => { - const cur = active() - if (!cur) return - const err = e.payload?.error || 'unknown error' - cur.messages.push({ role: 'assistant', content: `⚠️ Agent 运行失败: ${escHtml(err)}` }) - streaming = false - pendingText = '' - activeTools = [] - saveSessions(sessions) - cleanupListeners() - draw() - }) - unlisteners.push(u1, u2, u3, u4) - } + async function handleSend() { + const text = inputValue.trim() + if (!text || store.state.streaming) return - async function sendMessage() { - const input = el.querySelector('#hm-chat-input') - const text = input?.value?.trim() - if (!text || streaming) return - - const cur = active() - if (!cur) return - - // 本地命令处理（不走 Gateway） + // Local slash commands short-circuit before going to the agent. if (text === '/clear') { - cur.messages = []; cur.title = '' - saveSessions(sessions) - input.value = ''; draw(); return + store.clearActive() + resetInput(); draw(); return } if (text === '/new') { - newSession(); input.value = ''; draw(); return + store.newChat() + resetInput(); draw(); return } if (text === '/help') { - cur.messages.push({ role: 'user', content: text }) - cur.messages.push({ role: 'assistant', content: - '**可用命令：**\n' + - '`/help` — 显示此帮助\n' + - '`/status` — 查看 Gateway 状态\n' + - '`/memory` — 管理 Agent 记忆\n' + - '`/skills` — 查看可用技能\n' + - '`/clear` — 清空当前会话\n' + - '`/new` — 新建会话\n\n' + - '直接输入问题即可与 Hermes Agent 对话。' - }) - saveSessions(sessions) - input.value = ''; draw(); return + store.pushLocalUser(text) + store.pushLocalAssistant( + [ + `**${t('engine.chatSlashTitle')}**`, + '', + '`/help` — ' + t('engine.chatSlashHelpDesc'), + '`/status` — ' + t('engine.chatSlashStatusDesc'), + '`/memory` — ' + t('engine.chatSlashMemoryDesc'), + '`/skills` — ' + t('engine.chatSlashSkillsDesc'), + '`/clear` — ' + t('engine.chatSlashClearDesc'), + '`/new` — ' + t('engine.chatSlashNewDesc'), + ].join('\n') + ) + resetInput(); draw(); return } if (text === '/status') { - input.value = '' - cur.messages.push({ role: 'user', content: text }) + store.pushLocalUser(text) try { const info = await api.checkHermes() - const gw = info?.gatewayRunning ? '✅ 运行中' : '❌ 未运行' - const model = info?.model || '-' + const gw = info?.gatewayRunning ? '✅' : '❌' const port = info?.gatewayPort || 8642 - cur.messages.push({ role: 'assistant', content: - `**Gateway 状态：** ${gw}\n**端口：** ${port}\n**模型：** ${model}` - }) + const model = info?.model || '—' + store.pushLocalAssistant([ + `**${t('engine.chatSlashStatusTitle')}**`, + '', + `- ${t('engine.chatSlashGateway')}: ${gw}`, + `- ${t('engine.chatSlashPort')}: \`${port}\``, + `- ${t('engine.chatSlashModel')}: \`${model}\``, + ].join('\n')) } catch (e) { - cur.messages.push({ role: 'assistant', content: `⚠️ 获取状态失败: ${e}` }) + store.pushLocalAssistant('⚠️ ' + (e?.message || e)) } - saveSessions(sessions) - draw(); return + resetInput(); draw(); return + } + if (text === '/memory' || text === '/skills') { + store.pushLocalUser(text) + const target = text === '/memory' ? '/h/memory' : '/h/skills' + store.pushLocalAssistant( + t('engine.chatSlashRedirect').replace('{page}', `\`${target}\``) + ) + window.location.hash = '#' + target + resetInput(); draw(); return } - cur.messages.push({ role: 'user', content: text }) - if (!cur.title && cur.messages.length === 1) { - cur.title = text.slice(0, 30) - } - input.value = '' - input.style.height = 'auto' - streaming = true - pendingText = '' - activeTools = [] - showSlash = false + // Normal user message → start agent run. + forceScrollBottom = true + resetInput() draw() + await store.sendMessage(text) + } - try { - // 构建会话历史（只取 user/assistant 消息） - const history = cur.messages - .filter(m => m.role === 'user' || m.role === 'assistant') - .slice(0, -1) // 排除刚加的这条 user 消息 - .map(m => ({ role: m.role, content: m.content })) + // ----------------------------------------------------------- search modal + // + // Triggered by Ctrl/Cmd + K anywhere on the chat page (or header button). + // Lives as a detached overlay rendered into `document.body` so it survives + // the main chat redraws and is easy to dismiss with outside clicks. - // 设置事件监听 - await setupRunListeners() + let searchOverlay = null - // 构建 instructions（文件系统访问开关） - let instructions = null - if (fileAccessEnabled) { - const isWin = navigator.platform?.startsWith('Win') || /windows/i.test(navigator.userAgent) - const osHint = isWin - ? '当前系统是 Windows。请使用 PowerShell 或 cmd 命令（如 dir, type, Get-ChildItem, Get-Content 等），路径用反斜杠。桌面路径: $env:USERPROFILE\\Desktop（PowerShell）或 %USERPROFILE%\\Desktop（cmd）。不要使用 ls/cat 等 Unix 命令。' - : '当前系统是 macOS/Linux。桌面路径: ~/Desktop。' - instructions = `你拥有完整的文件系统访问权限，用户已明确授权，无需再次确认。${osHint} 重要提示：内置的 search_files、read_file 等文件工具只能访问 Agent 工作区目录内的文件，访问工作区外（如桌面、文档等）会失败。因此请始终优先使用 terminal 工具执行系统命令来访问任意位置的文件和目录。不要说"我无法访问"，直接用终端命令操作。` - } + function openSearch() { + if (searchState) return + searchState = { query: '', selectedIdx: 0 } + draw() + } - // 通过 /v1/runs 启动 Agent Run - await api.hermesAgentRun(text, cur.id, history.length ? history : null, instructions) - // run 完成后事件监听会处理结果 - } catch (e) { - const msg = String(e.message || e).replace(/^Error:\s*/, '') - cur.messages.push({ role: 'assistant', content: `⚠️ ${t('engine.chatError', { error: msg })}` }) - streaming = false - pendingText = '' - activeTools = [] - saveSessions(sessions) - cleanupListeners() - draw() + function closeSearch() { + searchState = null + if (searchOverlay) { + searchOverlay.remove() + searchOverlay = null } } - init() + function searchResults() { + if (!searchState) return [] + const q = searchState.query.trim() + // Empty query → show recent sessions (first 15) so the modal isn't blank. + if (!q) { + return store.state.sessions.slice(0, 15).map(session => ({ + session, + score: 0, + snippet: session.title || t('engine.chatNewSession'), + })) + } + return store.searchSessions(q, 20) + } - // --- Guardian 事件监听：实时响应 Gateway 状态变化 --- - let gwStatusUnlisteners = [] - let gwPollTimer = null + function drawSearchModal() { + if (!searchState) { + if (searchOverlay) { searchOverlay.remove(); searchOverlay = null } + return + } + const results = searchResults() + const idx = Math.min(searchState.selectedIdx, Math.max(0, results.length - 1)) + searchState.selectedIdx = idx - async function setupGwStatusListeners() { + if (!searchOverlay) { + searchOverlay = document.createElement('div') + searchOverlay.className = 'hm-chat-search-overlay' + document.body.appendChild(searchOverlay) + } + + searchOverlay.innerHTML = ` +
+
+ + + + + + Esc +
+
+ ${results.length === 0 ? ` +
${escHtml(t('engine.chatSearchEmpty'))}
+ ` : results.map((r, i) => { + const s = r.session + const src = s.source && s.source !== '__local__' ? getSourceLabel(s.source) : '' + return ` + + ` + }).join('')} +
+
+ ↑ ↓ ${escHtml(t('engine.chatSearchNavigate'))} + Enter ${escHtml(t('engine.chatSearchOpen'))} +
+
+ ` + + const inputEl = searchOverlay.querySelector('#hm-chat-search-input') + inputEl?.focus() try { - const unlisten = await tauriListen('hermes-gateway-status', (evt) => { - const wasOnline = gwOnline - gwOnline = !!evt.payload?.running - if (wasOnline !== gwOnline) draw() + const pos = searchState.query.length + inputEl?.setSelectionRange(pos, pos) + } catch {} + + inputEl?.addEventListener('input', () => { + searchState.query = inputEl.value + searchState.selectedIdx = 0 + drawSearchModal() + }) + + searchOverlay.addEventListener('mousedown', (e) => { + if (e.target === searchOverlay) closeSearch() + }, { once: true }) + + searchOverlay.querySelectorAll('.hm-chat-search-item').forEach(btn => { + btn.addEventListener('click', () => { + const sid = btn.dataset.sid + selectSearchResult(sid) }) - gwStatusUnlisteners.push(unlisten) - } catch (_) {} - - // 定期轮询作为补充（10s） - gwPollTimer = setInterval(async () => { - if (streaming) return - try { - const info = await api.checkHermes() - const wasOnline = gwOnline - gwOnline = !!info?.gatewayRunning - if (wasOnline !== gwOnline) draw() - } catch (_) {} - }, 10000) + btn.addEventListener('mouseenter', () => { + searchState.selectedIdx = Number(btn.dataset.idx) + // Cheap class swap instead of full redraw. + searchOverlay.querySelectorAll('.hm-chat-search-item').forEach(b => + b.classList.toggle('is-active', Number(b.dataset.idx) === searchState.selectedIdx)) + }) + }) } - setupGwStatusListeners() - // 页面卸载时清理 - const gwCleanup = () => { - gwStatusUnlisteners.forEach(fn => fn()) - gwStatusUnlisteners = [] - if (gwPollTimer) { clearInterval(gwPollTimer); gwPollTimer = null } - cleanupListeners() + function selectSearchResult(sid) { + if (!sid) return + forceScrollBottom = true + store.switchSession(sid) + if (mobileQuery.matches) sidebarOpen = false + closeSearch() } - const chatDetachObserver = new MutationObserver(() => { - if (!el.isConnected) { gwCleanup(); chatDetachObserver.disconnect() } + + // --- Global keyboard: Ctrl/Cmd+K opens search, keys navigate when open --- + function onGlobalKey(e) { + if (!el.isConnected) return + const isMac = /Mac|iPhone|iPad/i.test(navigator.platform) + const mod = isMac ? e.metaKey : e.ctrlKey + if (mod && (e.key === 'k' || e.key === 'K')) { + e.preventDefault() + if (searchState) closeSearch() + else openSearch() + return + } + if (!searchState) return + if (e.key === 'Escape') { + e.preventDefault() + closeSearch() + } else if (e.key === 'ArrowDown') { + e.preventDefault() + const results = searchResults() + if (!results.length) return + searchState.selectedIdx = (searchState.selectedIdx + 1) % results.length + drawSearchModal() + } else if (e.key === 'ArrowUp') { + e.preventDefault() + const results = searchResults() + if (!results.length) return + searchState.selectedIdx = (searchState.selectedIdx - 1 + results.length) % results.length + drawSearchModal() + } else if (e.key === 'Enter') { + const results = searchResults() + const hit = results[searchState.selectedIdx] + if (hit) { + e.preventDefault() + selectSearchResult(hit.session.id) + } + } + } + document.addEventListener('keydown', onGlobalKey) + + // Close profile menu on outside click (capture so menu's own click handlers + // still get to run before we close). + function onGlobalClick(e) { + if (!profileMenuOpen) return + if (!el.isConnected) return + const wrap = el.querySelector('.hm-chat-sidebar-profile') + if (wrap && wrap.contains(e.target)) return + profileMenuOpen = false + draw() + } + document.addEventListener('click', onGlobalClick) + + // Detach the global listener + close modal on unmount. A single + // MutationObserver watches our parent; when `el` is detached, we run the + // full teardown (stream listeners, subscription, search modal, keydown). + const teardown = () => { + document.removeEventListener('keydown', onGlobalKey) + document.removeEventListener('click', onGlobalClick) + closeSearch() + unsubscribe() + store.detachStreamListeners() + } + const mountObserver = new MutationObserver(() => { + if (!el.isConnected) { teardown(); mountObserver.disconnect() } }) requestAnimationFrame(() => { - if (el.parentNode) chatDetachObserver.observe(el.parentNode, { childList: true }) + if (el.parentNode) mountObserver.observe(el.parentNode, { childList: true }) }) + // Seed the initial draw (before store load resolves). + draw() return el } diff --git a/src/engines/hermes/pages/config.js b/src/engines/hermes/pages/config.js index 716d45e..fadefa0 100644 --- a/src/engines/hermes/pages/config.js +++ b/src/engines/hermes/pages/config.js @@ -2,15 +2,91 @@ * Hermes Agent 配置编辑 */ import { t } from '../../../lib/i18n.js' +import { api } from '../../../lib/tauri-api.js' +import { toast } from '../../../components/toast.js' export function render() { const el = document.createElement('div') el.className = 'page' - el.innerHTML = ` -

${t('engine.hermesConfigTitle')}

-
- ${t('engine.comingSoonPhase2')} -
- ` + el.dataset.engine = 'hermes' + let yaml = '' + let loading = true + let saving = false + let error = '' + + function esc(value) { + return String(value || '') + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + } + + function draw() { + el.innerHTML = ` +
+
+
HERMES AGENT · CONFIG
+

${t('engine.hermesConfigTitle')}

+
~/.hermes/config.yaml
+
+
+ + +
+
+ +
+
+
config.yaml
+
+ ${saving ? 'saving…' : loading ? 'loading…' : 'raw yaml editor'} +
+
+
+ ${error ? `
${esc(error)}
` : ''} + +
+
+ ` + el.querySelector('#hm-config-reload')?.addEventListener('click', load) + el.querySelector('#hm-config-save')?.addEventListener('click', save) + } + + async function load() { + loading = true + error = '' + draw() + try { + const data = await api.hermesConfigRawRead() + yaml = data?.yaml || '' + } catch (err) { + error = String(err?.message || err).replace(/^Error:\s*/, '') + } finally { + loading = false + draw() + } + } + + async function save() { + const textarea = el.querySelector('#hm-config-yaml') + yaml = textarea?.value || '' + saving = true + error = '' + draw() + try { + await api.hermesConfigRawWrite(yaml) + toast('配置已保存，建议重启 Hermes Gateway 生效', 'success') + } catch (err) { + error = String(err?.message || err).replace(/^Error:\s*/, '') + toast(error, 'error') + } finally { + saving = false + draw() + } + } + + draw() + load() return el } diff --git a/src/engines/hermes/pages/cron.js b/src/engines/hermes/pages/cron.js index b7bd419..4a92357 100644 --- a/src/engines/hermes/pages/cron.js +++ b/src/engines/hermes/pages/cron.js @@ -69,6 +69,7 @@ const ICONS = { export function render() { const el = document.createElement('div') el.className = 'page' + el.dataset.engine = 'hermes' let jobs = [] let gwOnline = false @@ -86,109 +87,265 @@ export function render() { const info = await api.checkHermes() gwOnline = !!info?.gatewayRunning } catch (_) {} - if (gwOnline) await loadJobs() + await loadJobs() loading = false draw() } async function loadJobs() { try { - const data = await gw('/api/jobs') - jobs = data.jobs || [] + if (gwOnline) { + const data = await gw('/api/jobs') + jobs = data.jobs || [] + } else { + const data = await api.hermesCronJobsList() + jobs = Array.isArray(data) ? data : [] + } errorMsg = '' } catch (e) { - errorMsg = String(e.message || e) - jobs = [] + try { + const data = await api.hermesCronJobsList() + jobs = Array.isArray(data) ? data : [] + errorMsg = '' + } catch (_) { + errorMsg = String(e.message || e) + jobs = [] + } } } // ── 主渲染 ── + // ── Helpers ── + + /** + * Derive a semantic job state label. + * Priority: running > paused > disabled > scheduled + * Mirrors the logic used by hermes-web-ui's JobCard.vue. + */ + function jobStateOf(j) { + if (j.state === 'running') return 'running' + if (j.state === 'paused' || j.paused) return 'paused' + if (j.enabled === false) return 'disabled' + return 'scheduled' + } + + /** Format any server-side timestamp (ISO / epoch-sec / epoch-ms) → local. */ + function fmtJobTime(ts) { + if (!ts && ts !== 0) return '—' + let d + if (typeof ts === 'number') { + d = new Date(ts > 1e12 ? ts : ts * 1000) + } else { + d = new Date(ts) + } + if (isNaN(d.getTime())) return String(ts) + const pad = (n) => String(n).padStart(2, '0') + return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}` + } + + /** Human-friendly "in X minutes" hint for next_run_at. */ + function relativeFuture(ts) { + if (!ts && ts !== 0) return '' + let d + if (typeof ts === 'number') d = new Date(ts > 1e12 ? ts : ts * 1000) + else d = new Date(ts) + const diff = Math.floor((d.getTime() - Date.now()) / 1000) + if (diff < 0) return t('engine.cronOverdue') + if (diff < 60) return t('engine.cronInSeconds').replace('{n}', diff) + if (diff < 3600) return t('engine.cronInMinutes').replace('{n}', Math.floor(diff / 60)) + if (diff < 86400) return t('engine.cronInHours').replace('{n}', Math.floor(diff / 3600)) + return t('engine.cronInDays').replace('{n}', Math.floor(diff / 86400)) + } + + // ── 主渲染 ── + function draw() { if (editingJob) { drawForm(); return } const total = jobs.length - const active = jobs.filter(j => !j.paused).length - const paused = total - active + const runningCount = jobs.filter(j => jobStateOf(j) === 'running').length + const paused = jobs.filter(j => jobStateOf(j) === 'paused').length + const failed = jobs.filter(j => j.last_status && j.last_status !== 'ok').length el.innerHTML = ` -
-

${t('engine.hermesCronTitle')}

-
- - + +
+
+
+ + ${t('engine.cronEyebrow')} +
+

${t('engine.hermesCronTitle')}

+
${total} ${t('engine.cronJobs')} · ${runningCount} ${t('engine.cronRunning').toLowerCase()}
+
+
+ +
- ${errorMsg ? `
${esc(errorMsg)}
` : ''} + + ${errorMsg ? ` +
+
+
${esc(errorMsg)}
+
+
+ ` : ''} + ${!gwOnline ? ` -
-
${ICONS.clock.replace('width="14"', 'width="32"').replace('height="14"', 'height="32"')}
- ${t('engine.chatGatewayOffline')} +
+
${ICONS.clock.replace('width="14"', 'width="32"').replace('height="14"', 'height="32"')}
+
${t('engine.chatGatewayOffline')}
` : ''} + ${gwOnline && !loading ? ` - -
-
-
${t('engine.cronTotal')}
-
${total}
-
-
-
${t('engine.cronRunning')}
-
${active}
-
-
-
${t('engine.cronPaused')}
-
${paused}
-
+ +
+
+
${t('engine.cronTotal')}
+
${total}
+
jobs defined
+
+
+
${t('engine.cronRunning')}
+
${runningCount}
+
actively executing
+
+
+
${t('engine.cronPaused')}
+
${paused}
+
manually paused
+
+
+
${t('engine.cronFailed')}
+
${failed}
+
last run failed
+
+ ${total === 0 ? ` -
-
${ICONS.clock.replace('width="14"', 'width="40"').replace('height="14"', 'height="40"')}
-
${t('engine.cronNoJobs')}
-
${t('engine.cronNoJobsHint')}
+
+
${ICONS.clock.replace('width="14"', 'width="40"').replace('height="14"', 'height="40"')}
+
${t('engine.cronNoJobs')}
+
${t('engine.cronNoJobsHint')}
` : renderJobList()} ` : ''} + ${loading ? ` -
- ${[1,2,3].map(() => '
').join('')} +
+ ${[1,2,3,4].map(() => `
+
+
+
+
`).join('')}
- ${[1,2].map(() => '
').join('')} + ${[1,2].map(() => `
+
+
+
`).join('')} ` : ''} ` bindList() } function renderJobList() { - return `
${jobs.map(j => { + return `
${jobs.map(j => { const expr = extractCronExpr(j.schedule) const desc = describeCron(j.schedule) - const id = esc(j.id || j.name) + const id = esc(j.id || j.job_id || j.name) + const state = jobStateOf(j) + const stateBadge = { + running: { cls: 'hm-badge--accent', label: t('engine.cronStateRunning') }, + paused: { cls: 'hm-badge--warn', label: t('engine.cronStatePaused') }, + disabled: { cls: 'hm-badge--error', label: t('engine.cronStateDisabled') }, + scheduled: { cls: 'hm-badge--success', label: t('engine.cronStateScheduled') }, + }[state] + const lastStatus = j.last_status + ? (j.last_status === 'ok' + ? `✓ ok` + : `✗ ${esc(j.last_status)}`) + : '' + const repeatTxt = j.repeat && typeof j.repeat === 'object' + ? `${j.repeat.completed ?? 0} / ${j.repeat.times ?? '∞'}` + : (typeof j.repeat === 'string' ? j.repeat : '') + const deliverLabel = j.deliver + ? (j.deliver === 'origin' && j.origin + ? `${esc(j.deliver)} (${esc(j.origin.platform || '')})` + : esc(j.deliver)) + : '—' + const promptPreview = j.prompt_preview || j.prompt || '' + return ` -
-
-
-
-
- ${esc(j.name)} - ${j.paused ? t('engine.cronPaused') : t('engine.cronActive')} +
+
+
+
+ ${esc(j.name)} + ${stateBadge.label}
-
- ${ICONS.clock} - ${esc(desc)} - ${esc(expr)} -
- ${j.prompt ? `
${esc(j.prompt)}
` : ''} + ${promptPreview ? `
${esc(promptPreview)}
` : ''}
-
- - - - +
+ + + +
-
-
` +
+
+ ${t('engine.cronScheduleLabel')} + + ${esc(desc)} + ${esc(expr)} + +
+
+ ${t('engine.cronNextRun')} + + ${esc(fmtJobTime(j.next_run_at))} + ${j.next_run_at ? `${esc(relativeFuture(j.next_run_at))}` : ''} + +
+
+ ${t('engine.cronLastRun')} + + ${esc(fmtJobTime(j.last_run_at))} + ${lastStatus} + +
+
+ ${t('engine.cronDeliverLabel')} + ${deliverLabel} +
+ ${repeatTxt ? ` +
+ ${t('engine.cronRepeatLabel')} + ${esc(repeatTxt)} +
+ ` : ''} + ${Array.isArray(j.skills) && j.skills.length ? ` +
+ ${t('engine.cronSkillsLabel')} + ${j.skills.map(s => `${esc(s)}`).join('')} +
+ ` : ''} +
+ ${j.last_error ? ` +
+ ${t('engine.cronLastError')} + ${esc(j.last_error)} +
+ ` : ''} +
` }).join('')}
` } @@ -247,47 +404,95 @@ export function render() { // ── 创建/编辑表单 ── + /** Light cron expression sanity check — 5 space-separated fields. */ + function validateCron(expr) { + if (!expr) return false + const parts = expr.trim().split(/\s+/) + return parts.length === 5 + } + function drawForm() { const isEdit = !!editingJob._editing - const id = editingJob.id || editingJob.name + const id = editingJob.id || editingJob.job_id || editingJob.name const initSchedule = editingJob.schedule || '0 9 * * *' + const initDeliver = editingJob.deliver || 'origin' + const initRepeat = editingJob.repeat_times != null + ? editingJob.repeat_times + : (typeof editingJob.repeat === 'number' + ? editingJob.repeat + : (typeof editingJob.repeat === 'object' ? editingJob.repeat?.times : '')) const shortcutsHtml = CRON_SHORTCUTS().map(s => { const selected = s.expr === initSchedule - return `` + return `` }).join('') el.innerHTML = ` -
- -

${isEdit ? t('engine.cronEdit') + ' — ' + esc(editingJob.name) : t('engine.cronCreate')}

-
- ${errorMsg ? `
${esc(errorMsg)}
` : ''} -
-
- -
- - + +
+
+
+
+

${isEdit ? t('engine.cronEdit') : t('engine.cronCreate')}

+
${isEdit ? esc(editingJob.name) : t('engine.cronNoJobsHint')}
+
+
-
- -
${shortcutsHtml}
- -
+ ${errorMsg ? ` +
+
+
${esc(errorMsg)}
+
+
+ ` : ''} + +
+
+ + + + + +
+ ${t('engine.cronSchedule')} +
${shortcutsHtml}
+ +
${ICONS.clock} ${describeCron(initSchedule)}
-
- - + + + + +
+ +
-
- - +
+ +
@@ -299,42 +504,61 @@ export function render() { el.querySelector('.hm-cron-back')?.addEventListener('click', () => { editingJob = null; errorMsg = ''; draw() }) el.querySelector('.hm-cron-cancel')?.addEventListener('click', () => { editingJob = null; errorMsg = ''; draw() }) - // 快捷预设 + // Cron shortcut pills el.querySelectorAll('.hm-cron-shortcut').forEach(btn => { btn.addEventListener('click', () => { - el.querySelectorAll('.hm-cron-shortcut').forEach(b => { b.classList.remove('btn-primary'); b.classList.add('btn-secondary') }) - btn.classList.remove('btn-secondary'); btn.classList.add('btn-primary') + el.querySelectorAll('.hm-cron-shortcut').forEach(b => b.classList.remove('is-active')) + btn.classList.add('is-active') const input = el.querySelector('#hm-cron-schedule') input.value = btn.dataset.expr updatePreview(btn.dataset.expr) }) }) - // 实时预览 + // Live preview & sync shortcut highlight const schedInput = el.querySelector('#hm-cron-schedule') schedInput?.addEventListener('input', () => { const val = schedInput.value.trim() updatePreview(val) el.querySelectorAll('.hm-cron-shortcut').forEach(b => { - b.classList.remove('btn-primary'); b.classList.add('btn-secondary') - if (b.dataset.expr === val) { b.classList.remove('btn-secondary'); b.classList.add('btn-primary') } + b.classList.toggle('is-active', b.dataset.expr === val) }) }) - // 保存 + // Save el.querySelector('.hm-cron-save')?.addEventListener('click', async () => { - const name = el.querySelector('#hm-cron-name')?.value?.trim() + const name = el.querySelector('#hm-cron-name')?.value?.trim() const schedule = el.querySelector('#hm-cron-schedule')?.value?.trim() - const prompt = el.querySelector('#hm-cron-prompt')?.value?.trim() - if (!name) { errorMsg = t('engine.cronNameRequired'); draw(); return } - if (!schedule) { errorMsg = t('engine.cronScheduleRequired'); draw(); return } - if (!prompt) { errorMsg = t('engine.cronPromptRequired'); draw(); return } + const prompt = el.querySelector('#hm-cron-prompt')?.value?.trim() + const deliver = el.querySelector('#hm-cron-deliver')?.value || 'origin' + const repeatRaw = el.querySelector('#hm-cron-repeat')?.value?.trim() + const repeat = repeatRaw ? parseInt(repeatRaw, 10) : undefined + + if (!name) { errorMsg = t('engine.cronNameRequired'); draw(); return } + if (!schedule) { errorMsg = t('engine.cronScheduleRequired'); draw(); return } + if (!validateCron(schedule)){ errorMsg = t('engine.cronInvalidCron'); draw(); return } + if (!prompt) { errorMsg = t('engine.cronPromptRequired'); draw(); return } + if (repeat !== undefined && (Number.isNaN(repeat) || repeat < 1)) { + errorMsg = t('engine.cronRepeatLimit'); draw(); return + } + busy = true; errorMsg = ''; draw() try { + const payload = { + name, + schedule: { kind: 'cron', expr: schedule }, + prompt, + deliver, + } + if (repeat !== undefined) payload.repeat = repeat + if (isEdit) { - await gw(`/api/jobs/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify({ schedule: { kind: 'cron', expr: schedule }, prompt }) }) + // PATCH does not accept `name`; keep it out to match hermes-web-ui contract. + const patch = { schedule: payload.schedule, prompt, deliver } + if (repeat !== undefined) patch.repeat = repeat + await gw(`/api/jobs/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify(patch) }) } else { - await gw('/api/jobs', { method: 'POST', body: JSON.stringify({ name, schedule: { kind: 'cron', expr: schedule }, prompt }) }) + await gw('/api/jobs', { method: 'POST', body: JSON.stringify(payload) }) } editingJob = null await loadJobs() diff --git a/src/engines/hermes/pages/dashboard.js b/src/engines/hermes/pages/dashboard.js index 2377734..6eb5ed7 100644 --- a/src/engines/hermes/pages/dashboard.js +++ b/src/engines/hermes/pages/dashboard.js @@ -30,9 +30,31 @@ async function tauriListen(event, cb) { return _listenFn(event, cb) } +const HERMES_DASHBOARD_URL = 'http://127.0.0.1:9119/' + +/** + * Open `url` in the user's system browser. Tauri desktop uses the shell + * plugin (which respects `xdg-open` / `start` / `open`); Web mode falls back + * to `window.open` with a `noopener` to avoid tab-jacking. + */ +async function openExternalUrl(url) { + if (!url) return + try { + if (window.__TAURI_INTERNALS__) { + const { open } = await import('@tauri-apps/plugin-shell') + await open(url) + return + } + } catch (_) { /* fall through to window.open */ } + window.open(url, '_blank', 'noopener,noreferrer') +} + export function render() { const el = document.createElement('div') el.className = 'page' + // Scope the new Hermes-dense design system to this subtree only, + // so OpenClaw and other engines stay completely unaffected. + el.dataset.engine = 'hermes' let info = null let health = null @@ -101,29 +123,37 @@ export function render() { } function draw() { - // 加载骨架屏 + // 加载骨架屏（data-dense style） if (loading) { el.innerHTML = ` -
-

${t('engine.hermesDashboardTitle')}

-
-
- ${[1,2,3,4].map(() => `
-
-
-
`).join('')} -
-
-
-
${[1,2,3,4].map(() => '
').join('')}
-
-
-
+
+
+
+ + ${t('engine.dashEyebrowLoading')} +
+
+
-
-
-
-
+
+
+ ${[1,2,3,4,5].map(() => ` +
+
+
+
+
+ `).join('')} +
+
+
+
+
+
+
+
+
+
` return } @@ -137,188 +167,255 @@ export function render() { // 服务商高亮匹配 const activePreset = inferProviderByBaseUrl(hermesProviders, formBaseUrl) - // 模型下拉 HTML + // 模型下拉 HTML（data-dense） const dropdownHtml = showDropdown && models.length - ? `
${models.map(m => - `
${esc(m)}
` + ? `
${models.map(m => + `
${esc(m)}
` ).join('')}
` : '' el.innerHTML = ` -
-

${t('engine.hermesDashboardTitle')}

- -
- - -
-
-
-
${t('engine.dashGatewayStatus')}
-
- ${gwRunning ? ICONS.running : ICONS.stopped} - ${gwRunning ? t('engine.dashRunning') : t('engine.dashStopped')} -
+ +
+
+
+ + ${gwRunning ? t('engine.dashEyebrowOnline') : t('engine.dashEyebrowOffline')}
+

${t('engine.hermesDashboardTitle')}

+
127.0.0.1:${port} · ${esc(displayModel || '—')} · v${version}
-
-
-
${t('engine.dashModel')}
-
${esc(displayModel)}
-
-
-
-
-
${t('engine.dashVersion')}
-
${version}
-
-
-
-
-
${t('engine.dashApiEndpoint')}
-
http://127.0.0.1:${port}
-
-
-
-
-
- ${t('engine.dashOpenPanel')} - -
-
${t('engine.dashOpenPanelDesc')}
-
+
+ ${!gwRunning ? `` : ''} + ${gwRunning ? `` : ''} + ${gwRunning ? `` : ''} +
- -
-
-
-

${t('engine.dashModelConfig')}

- + +
+
+
${t('engine.dashGatewayStatus')}
+
+ + ${gwRunning ? t('engine.dashRunning') : t('engine.dashStopped')}
-
-
- ${hermesProviders.filter(p => p.id !== 'custom').map(p => { - const api = p.transport === 'anthropic_messages' ? 'anthropic-messages' - : p.transport === 'google_gemini' ? 'google-generative-ai' - : 'openai-completions' - const active = activePreset?.id === p.id - return `` - }).join('')} -
-
- - -
-
- - -
-
${cfgMsg}
-
- - .env 高级编辑 → -
+
${t('engine.dashPort')} :${port}
+
+
+
${t('engine.dashModel')}
+
${esc(displayModel)}
+
${t('engine.dashProvider')} ${esc(hermesConfig?.provider || activePreset?.id || '—')}
+
+
+
${t('engine.dashVersion')}
+
v${version}
+
uv-tool
+
+
+
${t('engine.dashApiEndpoint')}
+
127.0.0.1
+
:${port}/v1
+
+
+
+ ${t('engine.dashOpenPanel')} +
+
${t('engine.dashOpenPanelDesc')}
+
${t('engine.dashOpenChat')}
- -
-
- ${!gwRunning ? `` : ''} - ${gwRunning ? `` : ''} - ${gwRunning ? `` : ''} -
-
+
+ ${t('engine.dashNativePanelDesc')} +
- -
-
-
-

${t('engine.dashConnectTarget')}

- + +
+
+
+ + ${t('engine.dashModelConfig')} + ${hermesProviders.filter(p => p.id !== 'custom').length}
-
- - ${envData?.wsl2?.available ? `` : ''} - ${envData?.docker?.available ? `` : ''} - +
+
+
+ ${!modelConfigCollapsed ? ` +
+
${t('engine.dashProviderPresets')}
+
+ ${hermesProviders.filter(p => p.id !== 'custom').map(p => { + const api = p.transport === 'anthropic_messages' ? 'anthropic-messages' + : p.transport === 'google_gemini' ? 'google-generative-ai' + : 'openai-completions' + const active = activePreset?.id === p.id + return `` + }).join('')} +
+
+ + +
+
+ + +
+
${cfgMsg}
+
+ + + ${t('engine.dashEnvAdvancedEdit')} +
+
+ ` : ''} +
+ + +
+ + +
+
+
+ + ${t('engine.dashConnectTarget')} +
+
+ +
+
+
+
+ + ${envData?.wsl2?.available ? `` : ''} + ${envData?.docker?.available ? `` : ''} + +
+ ${connectMode === 'wsl2' && envData?.wsl2 ? ` -
-
IP: ${esc(envData.wsl2.ip || '-')} · Distros: ${(envData.wsl2.distros || []).join(', ')}
- ${envData.wsl2.hermesInstalled ? `
✓ Hermes ${esc(envData.wsl2.hermesInfo || '')}
` : '
Hermes 未安装
'} - ${envData.wsl2.gatewayRunning ? `
✓ Gateway: ${esc(envData.wsl2.gatewayUrl || '')}
` : '
Gateway 未运行
'} +
+ $ wsl --status
+ IP ${esc(envData.wsl2.ip || '-')} · distros [${(envData.wsl2.distros || []).join(', ')}]
+ ${envData.wsl2.hermesInstalled ? `✓ hermes ${esc(envData.wsl2.hermesInfo || '')}` : `! ${t('engine.dashHermesMissing')}`}
+ ${envData.wsl2.gatewayRunning ? `✓ gateway: ${esc(envData.wsl2.gatewayUrl || '')}` : `${t('engine.dashGatewayNotRunning')}`}
` : ''} ${connectMode === 'docker' && envData?.docker ? ` -
-
Docker ${esc(envData.docker.version || '')}
+
+ $ docker ps --filter ancestor=hermes
+ engine ${esc(envData.docker.version || '')}
${envData.docker.hermesContainers?.length ? envData.docker.hermesContainers.map(c => - `
🔹 ${esc(c.name)} (${esc(c.image)}) — ${esc(c.ports)}
` - ).join('') : '
未发现 Hermes 容器
'} + `▶ ${esc(c.name)} (${esc(c.image)}) ${esc(c.ports)}` + ).join('
') : `${t('engine.dashNoHermesContainers')}`}
` : ''} ${connectMode === 'custom' ? ` -
- +
+
` : ''} -
- - ${connectMsg} + +
+ + ${connectMsg}
- -
${t('engine.dashQuickActions')}
-
- - + +
- -
-
-

${t('engine.dashCliTitle')}

-

${t('engine.dashCliDesc')}

-
- ${renderCliCommands()} + +
+
+
+ + ${t('engine.dashCliTitle')} + ${CLI_COMMANDS.length}
+
+ ${t('engine.dashCliDesc')} +
+
+
+ + + + + + + + + + ${CLI_COMMANDS.map((c, i) => ` + + + + + + `).join('')} + +
${t('engine.dashCliCommand')}${t('engine.dashCliDescription')}${t('engine.dashCliCopy')}
${esc(c.cmd)} +
${c.label}
+
${c.desc}
+ 		+ +
` @@ -339,7 +436,7 @@ export function render() { showGwMsg(t('engine.gatewayStarting'), false) try { const result = await api.hermesGatewayAction('start') - showGwMsg(result || 'Gateway 已启动', false) + showGwMsg(result || t('engine.dashGatewayStarted'), false) } catch (e) { showGwMsg(String(e).replace(/^Error:\s*/, ''), true) } @@ -365,6 +462,17 @@ export function render() { }) // Open panel card el.querySelector('.hm-dash-open-panel')?.addEventListener('click', () => { window.location.hash = '#/h/chat' }) + // Open Hermes native dashboard in system browser + el.querySelector('.hm-dash-open-native')?.addEventListener('click', async (e) => { + const href = e.currentTarget.dataset.href + if (!href) return + try { + await openExternalUrl(href) + } catch (err) { + const { toast } = await import('../../../components/toast.js') + toast(t('engine.dashNativePanelOpenFail') + ': ' + (err?.message || err), 'error') + } + }) // Provider presets — 点击填充 URL el.querySelectorAll('.hm-preset-btn').forEach(btn => { btn.addEventListener('click', () => { @@ -452,7 +560,7 @@ export function render() { async function doSaveModel() { syncFormFromDom() if (!formApiKey) { cfgMsg = `${t('engine.configFetchNeedKey')}`; draw(); return } - if (!formModel) { cfgMsg = `请输入模型名`; draw(); return } + if (!formModel) { cfgMsg = `${t('engine.configModelRequired')}`; draw(); return } const matched = inferProviderByBaseUrl(hermesProviders, formBaseUrl) const provider = matched?.id || 'custom' @@ -460,7 +568,7 @@ export function render() { modelBusy = true; cfgMsg = ''; draw() try { await api.configureHermes(provider, formApiKey, formModel, formBaseUrl || null) - cfgMsg = `✓ 配置已保存` + cfgMsg = `✓ ${t('engine.configSaved')}` // 刷新后端状态（不覆盖 form） try { hermesConfig = await api.hermesReadConfig() } catch (_) {} } catch (e) { @@ -475,7 +583,7 @@ export function render() { try { envData = await api.hermesDetectEnvironments() } catch (e) { - connectMsg = `探测失败: ${String(e).replace(/^Error:\s*/, '')}` + connectMsg = `${t('engine.envDetectFailed')}: ${String(e).replace(/^Error:\s*/, '')}` } envDetecting = false; draw() } @@ -487,7 +595,7 @@ export function render() { } else if (connectMode === 'wsl2') { targetUrl = envData?.wsl2?.gatewayUrl || null if (!targetUrl) { - connectMsg = 'WSL2 Gateway 未运行，请先在 WSL 中启动' + connectMsg = `${t('engine.connWslGatewayMissing')}` draw(); return } } else if (connectMode === 'docker') { @@ -495,14 +603,14 @@ export function render() { const urlInput = el.querySelector('#hm-custom-gw-url') targetUrl = urlInput?.value?.trim() || null if (!targetUrl && envData?.docker?.hermesContainers?.length) { - connectMsg = '请切换到"自定义"模式并输入容器的 Gateway URL' + connectMsg = `${t('engine.connDockerCustomHint')}` draw(); return } } else if (connectMode === 'custom') { const urlInput = el.querySelector('#hm-custom-gw-url') targetUrl = urlInput?.value?.trim() || null if (!targetUrl) { - connectMsg = '请输入 Gateway URL' + connectMsg = `${t('engine.connUrlRequired')}` draw(); return } } @@ -587,7 +695,7 @@ export function render() { // 监听 config.yaml 自愈事件（api_server guardian） const unlisten3 = await tauriListen('hermes-config-patched', async (evt) => { const { toast } = await import('../../../components/toast.js') - const msg = evt?.payload?.message || 'config.yaml 已自动修复' + const msg = evt?.payload?.message || t('engine.dashConfigPatched') toast(msg, 'info', { duration: 6000 }) }) unlisteners.push(unlisten3) diff --git a/src/engines/hermes/pages/env-editor.js b/src/engines/hermes/pages/env-editor.js index 6339d7d..e906ad4 100644 --- a/src/engines/hermes/pages/env-editor.js +++ b/src/engines/hermes/pages/env-editor.js @@ -18,6 +18,7 @@ const ICONS = { back: ``, trash: ``, edit: ``, + eye: ``, save: ``, cancel: ``, plus: ``, @@ -26,6 +27,7 @@ const ICONS = { export function render() { const el = document.createElement('div') el.className = 'page' + el.dataset.engine = 'hermes' let rows = [] // [{ key, value, editing: false, draftValue: '', isNew: false }] let loading = true @@ -35,22 +37,56 @@ export function render() { function skeleton() { return ` -
- - ${ICONS.back} 返回仪表盘 - -

.env 高级编辑

-
-
-
-
-
- 以下环境变量由 ClawPanel 在 Hermes 配置页面管理：OPENAI_API_KEY / ANTHROPIC_API_KEY / DEEPSEEK_API_KEY 等 provider 密钥和 base URL，以及 GATEWAY_ALLOW_ALL_USERS / API_SERVER_KEY。请通过 Hermes 仪表盘的「模型配置」修改这些项——本页仅用于添加自定义环境变量（如 TAVILY_API_KEY、HTTP_PROXY、Skills 所需的自定义变量等）。 -
-
- - + +
+
+
+ + ${ICONS.back} back to dashboard +
+

.env editor

+
custom environment variables · ~/.hermes/.env
+
+
+ + +
+
+
+ 以下变量由 ClawPanel 在仪表盘「模型配置」中托管： + OPENAI_API_KEY + ANTHROPIC_API_KEY + DEEPSEEK_API_KEY + 等 provider 密钥及 base URL，以及 + GATEWAY_ALLOW_ALL_USERS + API_SERVER_KEY。 + 请通过仪表盘修改这些项——本页仅管理你的自定义变量（如 + TAVILY_API_KEY、 + HTTP_PROXY、 + skills 自定义变量等）。 +
+
+
+ + +
+
+
+ + custom.env +
+
+ +
+
+
+
+ +
` @@ -61,52 +97,62 @@ export function render() { const emptyEl = el.querySelector('#env-empty') if (!listEl) return + // update count badge in panel header + const countEl = el.querySelector('#env-row-count') + if (countEl) { + countEl.textContent = loading ? '' : (rows.length ? `${rows.length} variable${rows.length > 1 ? 's' : ''}` : '') + } + if (loading) { - listEl.innerHTML = `
加载中…
` + listEl.innerHTML = ` +
+
+
+
+ ` if (emptyEl) emptyEl.style.display = 'none' return } if (!rows.length) { listEl.innerHTML = '' - if (emptyEl) { - emptyEl.textContent = '暂无自定义环境变量。点击下方「添加变量」新增一条。' - emptyEl.style.display = 'block' - } + if (emptyEl) emptyEl.style.display = 'block' renderFooter() return } if (emptyEl) emptyEl.style.display = 'none' + // Table-style header const header = ` -
-
变量名
-
值
-
操作
+
+
variable
+
value
+
action
` const body = rows.map((row, idx) => { if (row.editing) { return ` -
- - +
+ +
- - + +
` } return ` -
- ${esc(row.key)} - ${esc(maskValue(row.value))} +
+ ${esc(row.key)} + ${esc(row.revealed ? row.value : maskValue(row.value))}
- - + + +
` @@ -123,10 +169,12 @@ export function render() { // Append footer after list contents const hasAddRow = rows.some(r => r.isNew) const footer = document.createElement('div') - footer.style.cssText = 'margin-top:14px;display:flex;gap:10px' + footer.style.cssText = 'padding:18px 28px;border-top:1px solid var(--hm-border);display:flex;gap:10px;align-items:center' footer.innerHTML = hasAddRow - ? '' - : `` + ? 'editing new variable…' + : ` + + changes take effect on next gateway restart` // Remove existing footer const old = el.querySelector('.env-footer') if (old) old.remove() @@ -154,6 +202,21 @@ export function render() { row.draftValue = row.value renderList() }) + rowEl.querySelector('.env-reveal-btn')?.addEventListener('click', async () => { + if (row.revealed) { + row.revealed = false + renderList() + return + } + try { + const data = await api.hermesEnvReveal(row.key) + row.value = data?.value ?? row.value + row.revealed = true + renderList() + } catch (err) { + toast(String(err).replace(/^Error:\s*/, ''), 'error') + } + }) rowEl.querySelector('.env-cancel-btn')?.addEventListener('click', () => { if (row.isNew) { rows.splice(idx, 1) @@ -215,6 +278,7 @@ export function render() { value: v, editing: false, draftValue: '', + revealed: false, isNew: false, })) } catch (err) { diff --git a/src/engines/hermes/pages/extensions.js b/src/engines/hermes/pages/extensions.js new file mode 100644 index 0000000..16e452b --- /dev/null +++ b/src/engines/hermes/pages/extensions.js @@ -0,0 +1,177 @@ +import { api } from '../../../lib/tauri-api.js' +import { icon } from '../../../lib/icons.js' +import { toast } from '../../../components/toast.js' +import { t } from '../../../lib/i18n.js' + +function esc(value) { + return String(value || '') + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') +} + +function formatTokens(value) { + const n = Number(value || 0) + if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M' + if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K' + return String(Math.round(n)) +} + +function formatCost(value) { + const n = Number(value || 0) + if (!n) return '$0.00' + if (n < 0.01) return '<$0.01' + return '$' + n.toFixed(2) +} + +export function render() { + const el = document.createElement('div') + el.className = 'page hm-extensions-page' + el.dataset.engine = 'hermes' + + let loading = true + let themes = [] + let activeTheme = 'default' + let plugins = [] + let analytics = null + let error = '' + + const docs = [ + ['engine.extensionsDocGettingStarted', 'https://hermes-agent.nousresearch.com/docs/getting-started/installation/'], + ['engine.extensionsDocCron', 'https://hermes-agent.nousresearch.com/docs/guides/automate-with-cron/'], + ['engine.extensionsDocSkills', 'https://hermes-agent.nousresearch.com/docs/guides/skills/'], + ['engine.extensionsDocDashboard', 'http://127.0.0.1:9119/'], + ] + + function draw() { + const totals = analytics?.totals || {} + const tokens = Number(totals.total_input || 0) + Number(totals.total_output || 0) + el.innerHTML = ` +
+
+
${esc(t('engine.extensionsEyebrow'))}
+

${esc(t('engine.extensionsTitle'))}

+
${esc(t('engine.extensionsDesc'))}
+
+
+ + +
+
+ + ${error ? `
${esc(error)}
` : ''} + +
+
+
${esc(t('engine.extensionsDocs'))}
+
+ ${docs.map(([labelKey, href]) => `${esc(t(labelKey))} ↗`).join('')} +
+
+ +
+
${esc(t('engine.extensionsAnalytics'))}
+
+
+
${esc(t('engine.extensionsSessions'))}
${esc(totals.total_sessions || 0)}
+
${esc(t('engine.extensionsTokens'))}
${esc(formatTokens(tokens))}
+
${esc(t('engine.extensionsCost'))}
${esc(formatCost(totals.total_actual_cost || totals.total_estimated_cost))}
+
+
+
+
+ +
+
+
+
${esc(t('engine.extensionsThemes'))}
+
${esc(t('engine.extensionsActive'))}: ${esc(activeTheme)}
+
+
+ ${themes.length ? themes.map(theme => ` + + `).join('') : `
${esc(t('engine.extensionsNoThemes'))}
`} +
+
+ +
+
+
${esc(t('engine.extensionsPlugins'))}
+
${esc(t('engine.extensionsManifestCount').replace('{n}', plugins.length))}
+
+
+ ${plugins.length ? plugins.map(plugin => ` +
+
+ ${esc(plugin.label || plugin.name)} + v${esc(plugin.version || '0.0.0')} +
+
${esc(plugin.description || t('engine.extensionsNoDescription'))}
+
${esc(plugin.tab?.path || '')}${plugin.has_api ? ' · API' : ''}
+
+ `).join('') : `
${esc(t('engine.extensionsNoPlugins'))}
`} +
+
+
+ ` + + el.querySelector('#hm-ext-refresh')?.addEventListener('click', load) + el.querySelector('#hm-ext-rescan')?.addEventListener('click', rescan) + el.querySelectorAll('.hm-theme-choice').forEach(btn => { + btn.addEventListener('click', async () => { + const name = btn.dataset.theme + if (!name || name === activeTheme) return + try { + await api.hermesDashboardThemeSet(name) + activeTheme = name + toast(t('engine.extensionsThemeSaved'), 'success') + draw() + } catch (err) { + toast(String(err?.message || err).replace(/^Error:\s*/, ''), 'error') + } + }) + }) + } + + async function load() { + loading = true + error = '' + draw() + try { + const [themeData, pluginData, usageData] = await Promise.all([ + api.hermesDashboardThemes(), + api.hermesDashboardPlugins(), + api.hermesUsageAnalytics(30), + ]) + themes = Array.isArray(themeData?.themes) ? themeData.themes : [] + activeTheme = themeData?.active || 'default' + plugins = Array.isArray(pluginData) ? pluginData : [] + analytics = usageData || null + } catch (err) { + error = String(err?.message || err).replace(/^Error:\s*/, '') + } finally { + loading = false + draw() + } + } + + async function rescan() { + try { + await api.hermesDashboardPluginsRescan() + await load() + toast(t('engine.extensionsPluginsRescanned'), 'success') + } catch (err) { + toast(String(err?.message || err).replace(/^Error:\s*/, ''), 'error') + } + } + + draw() + load() + return el +} diff --git a/src/engines/hermes/pages/logs.js b/src/engines/hermes/pages/logs.js index 3e44149..2b358fe 100644 --- a/src/engines/hermes/pages/logs.js +++ b/src/engines/hermes/pages/logs.js @@ -1,19 +1,89 @@ /** - * Hermes Agent 日志查看器 - * 支持按文件/级别/关键字过滤，实时查看 Agent 运行日志 + * Hermes Agent — Log viewer + * + * Data contract mirrors `hermes-web-ui`'s `/api/hermes/logs` endpoints: + * { files: [{ name, size, modified }] } + * { entries: [{ timestamp, level, logger, message, raw }, ...] } + * + * Extras beyond the official UI: + * - Download entire log file to user's disk + * - Clear the currently rendered entries (local only) + * - Auto-refresh (polling tail) toggle — 2s tick + * - Access-log colouring: method / path / status are parsed and highlighted + * - Live regex search that also highlights matches inline */ import { t } from '../../../lib/i18n.js' import { api } from '../../../lib/tauri-api.js' +import { toast } from '../../../components/toast.js' -function escHtml(s) { return String(s).replace(/&/g, '&').replace(//g, '>') } +function escHtml(s) { + return String(s).replace(/&/g, '&').replace(//g, '>') +} const LOG_LEVELS = ['ALL', 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'] -const LEVEL_CLASS = { DEBUG: 'debug', INFO: 'info', WARNING: 'warn', WARN: 'warn', ERROR: 'error', CRITICAL: 'error', FATAL: 'error' } +const LEVEL_TONE = { + DEBUG: 'debug', + INFO: 'info', + WARNING: 'warn', WARN: 'warn', + ERROR: 'error', CRITICAL: 'error', FATAL: 'error', +} + +const ICONS = { + refresh: '', + download: '', + clear: '', + play: '', + pause: '', +} + +/** Extract HH:MM:SS from arbitrary timestamp string; fallback to the raw. */ +function formatTime(ts) { + if (!ts) return '' + const match = String(ts).match(/\d{2}:\d{2}:\d{2}/) + return match ? match[0] : String(ts) +} + +/** Parse an HTTP access log message. Returns null on miss. */ +function parseAccessLog(msg) { + const match = String(msg || '').match(/"(\w+)\s+(\S+)\s+HTTP\/[^"]+"\s+(\d+)/) + if (!match) return null + return { method: match[1], path: match[2], status: match[3] } +} + +function formatSize(bytes) { + if (typeof bytes === 'string') return bytes + if (!bytes) return '0 B' + if (bytes < 1024) return bytes + ' B' + if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB' + return (bytes / (1024 * 1024)).toFixed(1) + ' MB' +} + +/** Highlight substrings matching `query` in an HTML-escaped text. */ +function highlight(text, query) { + if (!query) return text + const re = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'ig') + return text.replace(re, '$1') +} + +/** Trigger a browser file download of `content` as `filename`. */ +function triggerDownload(content, filename) { + const blob = new Blob([content], { type: 'text/plain;charset=utf-8' }) + const url = URL.createObjectURL(blob) + const a = document.createElement('a') + a.href = url + a.download = filename + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + setTimeout(() => URL.revokeObjectURL(url), 1000) +} export function render() { const el = document.createElement('div') el.className = 'hermes-logs-page' + el.dataset.engine = 'hermes' + // --- State --- let logFiles = [] let activeFile = '' let entries = [] @@ -22,23 +92,30 @@ export function render() { let searchQuery = '' let lineLimit = 200 let autoScroll = true + let tailing = false // auto-refresh tick active + let downloading = false + let tailTimer = null + // --- Data --- async function loadFiles() { try { logFiles = await api.hermesLogsList() if (logFiles.length && !activeFile) activeFile = logFiles[0].name } catch (e) { - console.error('Failed to load log files:', e) + console.error('[logs] Failed to load file list:', e) logFiles = [] } } - async function loadEntries() { - if (!activeFile) { entries = []; draw(); return } - loading = true - draw() + async function loadEntries({ silent = false } = {}) { + if (!activeFile) { entries = []; if (!silent) draw(); return } + if (!silent) { loading = true; draw() } try { - entries = await api.hermesLogsRead(activeFile, lineLimit, levelFilter !== 'ALL' ? levelFilter : null) + entries = await api.hermesLogsRead( + activeFile, + lineLimit, + levelFilter !== 'ALL' ? levelFilter : null, + ) } catch (e) { entries = [{ raw: `⚠️ ${t('engine.logsLoadFailed')}: ${e.message || e}` }] } @@ -49,53 +126,180 @@ export function render() { function filteredEntries() { if (!searchQuery) return entries const q = searchQuery.toLowerCase() - return entries.filter(e => (e.raw || e.message || '').toLowerCase().includes(q)) + return entries.filter(e => { + const hay = [e.raw, e.message, e.logger].filter(Boolean).join(' ').toLowerCase() + return hay.includes(q) + }) } - function formatSize(bytes) { - if (typeof bytes === 'string') return bytes - if (bytes < 1024) return bytes + ' B' - if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB' - return (bytes / (1024 * 1024)).toFixed(1) + ' MB' + // --- Tailing (simple poll, 2s) --- + function startTail() { + if (tailTimer) return + tailing = true + tailTimer = setInterval(() => loadEntries({ silent: true }), 2000) + draw() + } + function stopTail() { + if (tailTimer) { clearInterval(tailTimer); tailTimer = null } + tailing = false + draw() + } + function toggleTail() { tailing ? stopTail() : startTail() } + + // --- Actions --- + async function doDownload() { + if (!activeFile || downloading) return + downloading = true + draw() + try { + const result = await api.hermesLogsDownload(activeFile) + if (typeof result === 'string') { + triggerDownload(result, activeFile) + toast(t('engine.logsDownloadBrowserOk'), 'success', { duration: 5000 }) + } else { + const path = result?.path || '' + toast(t('engine.logsDownloadOk').replace('{path}', path), 'success', { duration: 7000 }) + } + } catch (e) { + toast(t('engine.logsDownloadFailed') + ': ' + (e?.message || e), 'error') + } + downloading = false + draw() + } + + function doClearView() { + // Local-only clear: drop rendered entries. The file on disk is untouched. + entries = [] + draw() + } + + // --- Rendering --- + function renderLevelBadge(lvl, tone) { + return `${escHtml(lvl || '-')}` + } + + function renderEntry(e) { + const lvl = (e.level || '').toUpperCase() + const tone = LEVEL_TONE[lvl] || '' + const logger = e.logger || '' + const time = formatTime(e.timestamp) + const rawMsg = e.message || '' + const access = parseAccessLog(rawMsg) + + // Raw (unparsed) fallback — preserve full line + if (!e.timestamp && !lvl) { + const raw = escHtml(e.raw || '') + return `
+ ${highlight(raw, searchQuery)} +
` + } + + let msgHtml + if (access) { + const statusClass = `hm-log-status--${access.status?.[0] || 'x'}xx` + msgHtml = ` + + ${escHtml(access.method)} + ${escHtml(access.path)} + ${escHtml(access.status)} + + ` + } else { + msgHtml = `${highlight(escHtml(rawMsg), searchQuery)}` + } + + return `
+ ${escHtml(time)} + ${renderLevelBadge(lvl, tone)} + ${logger ? `${highlight(escHtml(logger), searchQuery)}` : ''} + ${msgHtml} +
` } function draw() { const filtered = filteredEntries() + const totalVisible = filtered.length + const totalLoaded = entries.length + el.innerHTML = ` -
- ${t('engine.hermesLogsTitle')} -
- - - - +
+
+
+ + ${tailing ? t('engine.logsTailing') : t('engine.logsEyebrow')} +
+

${t('engine.hermesLogsTitle')}

+
~/.hermes/logs/${activeFile ? ' · ' + escHtml(activeFile) : ''}
+
+
+ + +
+
-
-
${t('engine.logsFiles')}
- ${logFiles.length === 0 ? `
${t('engine.logsNoFiles')}
` : ''} - ${logFiles.map(f => ` -
- ${escHtml(f.name)} - ${formatSize(f.size)} -
- `).join('')} -
-
+ + +
-
${filtered.length} ${t('engine.logsEntries')}
+ + + +
+ +
+
+ ${totalVisible} / ${totalLoaded} ${t('engine.logsEntries')} + ${searchQuery ? `· ${t('engine.logsFilteredBy')} "${escHtml(searchQuery)}"` : ''} +
+
- ${loading ? `
${t('engine.logsLoading')}
` : ''} - ${!loading && filtered.length === 0 ? `
${t('engine.logsEmpty')}
` : ''} - ${!loading ? filtered.map(e => renderEntry(e)).join('') : ''} + ${loading ? ` +
+
+
+
+
+ ` : ''} + ${!loading && totalVisible === 0 ? `
${t('engine.logsEmpty')}
` : ''} + ${!loading ? filtered.map(renderEntry).join('') : ''}
-
+
` bind() @@ -105,25 +309,16 @@ export function render() { } } - function renderEntry(e) { - const lvl = (e.level || '').toUpperCase() - const cls = LEVEL_CLASS[lvl] || '' - if (e.timestamp) { - const time = e.timestamp.replace(/^.*?(\d{2}:\d{2}:\d{2}).*$/, '$1') || e.timestamp - return `
- ${escHtml(time)} - ${escHtml(lvl || '-')} - ${escHtml(e.message || '')} -
` - } - return `
${escHtml(e.raw || '')}
` - } - + // --- Event binding --- function bind() { - el.querySelector('#hm-logs-refresh')?.addEventListener('click', () => loadEntries()) + el.querySelector('.hm-logs-refresh')?.addEventListener('click', () => loadEntries()) + el.querySelector('.hm-logs-tail')?.addEventListener('click', toggleTail) + el.querySelector('.hm-logs-download')?.addEventListener('click', doDownload) + el.querySelector('.hm-logs-clear')?.addEventListener('click', doClearView) el.querySelectorAll('.hm-logs-file-item').forEach(item => { item.addEventListener('click', () => { + if (item.dataset.file === activeFile) return activeFile = item.dataset.file loadEntries() }) @@ -145,7 +340,18 @@ export function render() { }) } - // Init + // --- Lifecycle: stop tail when the page is detached --- + const detachObserver = new MutationObserver(() => { + if (!el.isConnected) { + stopTail() + detachObserver.disconnect() + } + }) + requestAnimationFrame(() => { + if (el.parentNode) detachObserver.observe(el.parentNode, { childList: true }) + }) + + // --- Init --- async function init() { await loadFiles() await loadEntries() diff --git a/src/engines/hermes/pages/memory.js b/src/engines/hermes/pages/memory.js index de159e4..5091d8f 100644 --- a/src/engines/hermes/pages/memory.js +++ b/src/engines/hermes/pages/memory.js @@ -1,13 +1,28 @@ /** - * Hermes Agent 记忆编辑器 - * 读写 ~/.hermes/memories/MEMORY.md 和 USER.md - * 支持 Markdown 预览和编辑模式切换 + * Hermes Agent — Memory editor (three-section: MEMORY / USER / SOUL) + * + * Mirrors the data contract used by the official `hermes-web-ui`: + * GET /api/hermes/memory → { memory, user, soul, mtimes } + * POST /api/hermes/memory → { section, content } + * + * ClawPanel calls the equivalent Rust/Web-stub commands (`hermes_memory_read_all` + * + `hermes_memory_write`) so the page works on Tauri and Web modes. + * + * All three files live in `~/.hermes/memories/` and are plain Markdown. */ import { t } from '../../../lib/i18n.js' import { api } from '../../../lib/tauri-api.js' +import { toast } from '../../../components/toast.js' +import { showContentModal } from '../../../components/modal.js' -function escHtml(s) { return String(s).replace(/&/g, '&').replace(//g, '>') } +function escHtml(s) { + return String(s).replace(/&/g, '&').replace(//g, '>') +} +/** + * Markdown → HTML. Intentionally minimal (no external dep). Good enough for + * short agent persona notes. Code blocks preserved. Tables NOT supported. + */ function mdToHtml(text) { return text .replace(/&/g, '&').replace(//g, '>') @@ -23,122 +38,269 @@ function mdToHtml(text) { .replace(/\n/g, '
') } +const ICONS = { + memory: '', + user: '', + soul: '', + edit: '', + save: '', + refresh: '', +} + +/** Format epoch-seconds → relative/short local time (serif-friendly). */ +function fmtMtime(epoch) { + if (!epoch) return '' + const now = Date.now() / 1000 + const diff = now - epoch + if (diff < 60) return t('engine.memoryJustNow') + if (diff < 3600) return t('engine.memoryMinAgo').replace('{n}', Math.floor(diff / 60)) + if (diff < 86400) return t('engine.memoryHrAgo').replace('{n}', Math.floor(diff / 3600)) + const d = new Date(epoch * 1000) + const pad = (n) => String(n).padStart(2, '0') + return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}` +} + +/** Rough word + char count. CJK counted per character. */ +function contentStats(text) { + const t = text || '' + const chars = t.length + // Split on whitespace OR CJK character boundary + const words = (t.match(/[\u4e00-\u9fff]|[A-Za-z0-9_]+/g) || []).length + return { chars, words } +} + export function render() { const el = document.createElement('div') el.className = 'hermes-memory-page' + el.dataset.engine = 'hermes' - let memoryContent = '' - let userContent = '' - let editingSection = null // null | 'memory' | 'user' - let editBuffer = '' + // --- State --- + const SECTIONS = [ + { key: 'memory', titleKey: 'engine.memoryNotes', icon: ICONS.memory, descKey: 'engine.memoryNotesDesc' }, + { key: 'user', titleKey: 'engine.memoryProfile', icon: ICONS.user, descKey: 'engine.memoryProfileDesc' }, + { key: 'soul', titleKey: 'engine.memorySoul', icon: ICONS.soul, descKey: 'engine.memorySoulDesc' }, + ] + const data = { memory: '', user: '', soul: '' } + const mtimes = { memory: null, user: null, soul: null } + let editing = null // { key, buffer } let loading = true let saving = false + let loadError = null async function loadAll() { loading = true + loadError = null draw() try { - const [mem, usr] = await Promise.all([ - api.hermesMemoryRead('memory'), - api.hermesMemoryRead('user'), - ]) - memoryContent = mem || '' - userContent = usr || '' + const res = await api.hermesMemoryReadAll() + data.memory = res?.memory || '' + data.user = res?.user || '' + data.soul = res?.soul || '' + mtimes.memory = res?.memory_mtime ?? null + mtimes.user = res?.user_mtime ?? null + mtimes.soul = res?.soul_mtime ?? null } catch (e) { - console.error('Failed to load memory:', e) + loadError = String(e?.message || e).replace(/^Error:\s*/, '') } loading = false draw() } - function startEdit(section) { - editingSection = section - editBuffer = section === 'memory' ? memoryContent : userContent - draw() - el.querySelector('#hm-memory-textarea')?.focus() + function startEdit(key) { + const section = SECTIONS.find(s => s.key === key) + editing = { key, buffer: data[key] || '' } + const { chars, words } = contentStats(editing.buffer) + const overlay = showContentModal({ + title: `${t(section?.titleKey || 'engine.hermesMemoryTitle')} · ${t('engine.memoryEdit')}`, + width: 920, + content: ` +
+
${t(section?.descKey || 'engine.memoryNotesDesc')}
+ +
+ + ${words} ${t('engine.memoryWords')} + · + ${chars} ${t('engine.memoryChars')} + + + ${t('engine.memorySaveHint')} +
+
+ `, + buttons: [{ id: 'hm-mem-modal-save', className: 'btn btn-primary btn-sm', label: t('engine.memorySave') }], + }) + overlay.classList.add('hm-mem-modal-overlay') + overlay.dataset.engine = 'hermes' + const ta = overlay.querySelector('#hm-mem-modal-textarea') + const cancelBtn = overlay.querySelector('[data-action="cancel"]') + const saveBtn = overlay.querySelector('#hm-mem-modal-save') + const closeWithConfirm = () => { + if (!editing) { + overlay.remove() + return + } + const dirty = editing.buffer !== (data[editing.key] || '') + if (dirty && !confirm(t('engine.memoryUnsaved'))) return + editing = null + overlay.remove() + } + cancelBtn.textContent = t('engine.memoryCancel') + cancelBtn.onclick = closeWithConfirm + saveBtn.onclick = save + overlay.addEventListener('click', (e) => { + if (e.target !== overlay) return + e.stopImmediatePropagation() + closeWithConfirm() + }, true) + overlay.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + e.preventDefault() + e.stopImmediatePropagation() + closeWithConfirm() + } + }, true) + ta.focus() + ta.setSelectionRange(ta.value.length, ta.value.length) + ta.addEventListener('input', (e) => { + if (!editing) return + editing.buffer = e.target.value + const statsEl = overlay.querySelector('#hm-mem-modal-stats') + const stats = contentStats(editing.buffer) + if (statsEl) { + statsEl.innerHTML = ` + ${stats.words} ${t('engine.memoryWords')} + · + ${stats.chars} ${t('engine.memoryChars')} + ` + } + }) + ta.addEventListener('keydown', (e) => { + if ((e.ctrlKey || e.metaKey) && e.key === 's') { + e.preventDefault() + save() + } + }) } function cancelEdit() { - const original = editingSection === 'memory' ? memoryContent : userContent - if (editBuffer !== original && !confirm(t('engine.memoryUnsaved'))) return - editingSection = null - editBuffer = '' + if (!editing) return + const dirty = editing.buffer !== (data[editing.key] || '') + if (dirty && !confirm(t('engine.memoryUnsaved'))) return + editing = null + document.querySelector('.hm-mem-modal-overlay')?.remove() draw() } async function save() { - if (!editingSection) return + if (!editing || saving) return saving = true - draw() + const saveBtn = document.querySelector('#hm-mem-modal-save') + if (saveBtn) { + saveBtn.disabled = true + saveBtn.textContent = t('engine.memorySaving') + } + const { key, buffer } = editing try { - await api.hermesMemoryWrite(editingSection, editBuffer) - if (editingSection === 'memory') memoryContent = editBuffer - else userContent = editBuffer - editingSection = null - editBuffer = '' + await api.hermesMemoryWrite(key, buffer) + data[key] = buffer + mtimes[key] = Math.floor(Date.now() / 1000) + editing = null + document.querySelector('.hm-mem-modal-overlay')?.remove() + toast(t('engine.memorySaved'), 'success') } catch (e) { - alert(`${t('engine.memorySaveFailed')}: ${e.message || e}`) + if (saveBtn) { + saveBtn.disabled = false + saveBtn.textContent = t('engine.memorySave') + } + toast(t('engine.memorySaveFailed') + ': ' + (e?.message || e), 'error') } saving = false draw() } - function renderSection(type, title, iconSvg, content) { - const isEditing = editingSection === type - return `
-
-
- ${iconSvg} - ${title} -
- ${!isEditing ? `` : ''} -
- ${isEditing ? ` -
- -
- - + function renderSection(section) { + const content = data[section.key] || '' + const { chars, words } = contentStats(content) + const mtime = mtimes[section.key] + const statsMarkup = ` + ${words} ${t('engine.memoryWords')} + · + ${chars} ${t('engine.memoryChars')} + ${mtime ? `·${escHtml(fmtMtime(mtime))}` : ''} + ` + + return ` +
+
+
+ ${section.icon} + ${t(section.titleKey)} +
+
+ ${statsMarkup} +
- ` : ` -
- ${content.trim() ? mdToHtml(content) : `
${t('engine.memoryEmpty')}
`} +
+
${t(section.descKey)}
+ ${content.trim() + ? `
${mdToHtml(content)}
` + : `
+ ${t('engine.memoryEmpty')} + ${t(section.descKey)} +
`}
- `} -
` +
+ ` } function draw() { - const notesIcon = '' - const userIcon = '' - el.innerHTML = ` -
- ${t('engine.hermesMemoryTitle')} - -
-
- ${loading ? `
${t('engine.memoryLoading')}
` : ` -
- ${renderSection('memory', t('engine.memoryNotes'), notesIcon, memoryContent)} - ${renderSection('user', t('engine.memoryProfile'), userIcon, userContent)} +
+
+
+ + ${t('engine.memoryEyebrow')}
- `} +

${t('engine.hermesMemoryTitle')}

+
~/.hermes/memories/ · 3 files
+
+
+ +
+ + ${loadError ? ` +
+
+
+ ${escHtml(loadError)} +
+
+
+ ` : ''} + + ${loading ? ` +
+
+
+
+
+
+
+
+ ` : SECTIONS.map(renderSection).join('')} ` bind() } function bind() { - el.querySelector('#hm-memory-refresh')?.addEventListener('click', () => loadAll()) - el.querySelectorAll('.hm-memory-edit-btn').forEach(btn => { - btn.addEventListener('click', () => startEdit(btn.dataset.section)) - }) - el.querySelector('#hm-memory-cancel')?.addEventListener('click', () => cancelEdit()) - el.querySelector('#hm-memory-save')?.addEventListener('click', () => save()) - el.querySelector('#hm-memory-textarea')?.addEventListener('input', (e) => { - editBuffer = e.target.value + el.querySelector('.hm-mem-refresh')?.addEventListener('click', () => loadAll()) + el.querySelectorAll('.hm-mem-edit').forEach(btn => { + btn.addEventListener('click', () => startEdit(btn.dataset.key)) }) } diff --git a/src/engines/hermes/pages/services.js b/src/engines/hermes/pages/services.js index 7f8f383..0398b5b 100644 --- a/src/engines/hermes/pages/services.js +++ b/src/engines/hermes/pages/services.js @@ -1,16 +1,563 @@ /** * Hermes Agent 服务管理 */ +import { api, invalidate } from '../../../lib/tauri-api.js' import { t } from '../../../lib/i18n.js' +const ICONS = { + refresh: '', + start: '', + stop: '', + restart: '', + package: '', + config: '', + health: '', + link: '', + upload: '', + trash: '', +} + +function esc(value) { + return String(value ?? '') + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') +} + +function stripError(error) { + return String(error?.message || error || '').replace(/^Error:\s*/, '') +} + +function maskSecret(value) { + const raw = String(value || '').trim() + if (!raw) return t('engine.servicesNotSet') + if (raw.length <= 8) return '••••••••' + return `${raw.slice(0, 4)}••••${raw.slice(-4)}` +} + +function isLocalGatewayUrl(url, port) { + if (!url) return true + try { + const parsed = new URL(url) + if (!['127.0.0.1', 'localhost'].includes(parsed.hostname)) return false + if (!parsed.port) return true + return Number(parsed.port) === Number(port || 8642) + } catch (_) { + return false + } +} + +function summarizeHealth(value, limit = 8) { + const rows = [] + function visit(prefix, current, depth) { + if (rows.length >= limit || depth > 1 || current == null) return + if (typeof current === 'string' || typeof current === 'number' || typeof current === 'boolean') { + rows.push({ + key: prefix || 'status', + value: typeof current === 'boolean' ? (current ? 'true' : 'false') : String(current), + }) + return + } + if (Array.isArray(current)) { + if (current.every(item => ['string', 'number', 'boolean'].includes(typeof item))) { + rows.push({ key: prefix || 'items', value: current.join(', ') }) + } + return + } + if (typeof current === 'object') { + for (const [key, item] of Object.entries(current)) { + visit(prefix ? `${prefix}.${key}` : key, item, depth + 1) + if (rows.length >= limit) break + } + } + } + visit('', value, 0) + return rows +} + +function renderKpi(label, value, foot, tone = '') { + return ` +
+
${esc(label)}
+
${esc(value)}
+
${esc(foot)}
+
+ ` +} + +function renderInfoRow(label, value, mono = false) { + return ` +
+
${esc(label)}
+
${esc(value)}
+
+ ` +} + export function render() { const el = document.createElement('div') - el.className = 'page' - el.innerHTML = ` -

${t('engine.hermesServicesTitle')}

-
- ${t('engine.comingSoonPhase2')} -
- ` + el.className = 'page hm-services-page' + el.dataset.engine = 'hermes' + + let info = null + let config = null + let health = null + let envData = null + let loading = true + let refreshBusy = false + let actionBusy = false + let targetBusy = false + let envBusy = false + let maintenanceBusy = false + let pageMsg = '' + let pageMsgTone = 'muted' + let connectMsg = '' + let connectMsgTone = 'muted' + let targetMode = 'local' + let customUrl = '' + + function syncCustomInput() { + const input = el.querySelector('#hm-services-custom-url') + if (input) customUrl = input.value + } + + function syncTargetFromInfo() { + const port = info?.gatewayPort || 8642 + const currentUrl = info?.gatewayUrl || `http://127.0.0.1:${port}` + if (isLocalGatewayUrl(currentUrl, port)) { + targetMode = 'local' + customUrl = '' + return + } + if (envData?.wsl2?.gatewayUrl && currentUrl === envData.wsl2.gatewayUrl) { + targetMode = 'wsl2' + customUrl = currentUrl + return + } + targetMode = 'custom' + customUrl = currentUrl + } + + function setPageMessage(message, tone = 'muted') { + pageMsg = message + pageMsgTone = tone + } + + function setConnectMessage(message, tone = 'muted') { + connectMsg = message + connectMsgTone = tone + } + + function draw() { + if (loading) { + el.innerHTML = ` +
+
+
${esc(t('engine.servicesEyebrow'))}
+
+
+
+
+
+ ${[1, 2, 3, 4].map(() => ` +
+
+
+
+
+ `).join('')} +
+ ` + return + } + + const gwRunning = !!info?.gatewayRunning + const port = info?.gatewayPort || 8642 + const version = info?.version || '—' + const gatewayUrl = info?.gatewayUrl || `http://127.0.0.1:${port}` + const model = config?.model || info?.model || health?.model || t('engine.dashNoModel') + const provider = config?.provider || t('engine.servicesUnknown') + const installType = info?.managed || (info?.installed ? 'uv-tool' : t('engine.servicesUnknown')) + const installState = info?.installed ? t('engine.servicesInstalled') : t('engine.servicesMissing') + const llmBaseUrl = config?.base_url || t('engine.servicesNotSet') + const configModel = config?.model_raw || config?.model || info?.model || t('engine.dashNoModel') + const targetLabel = targetMode === 'local' + ? t('engine.installModeLocal') + : targetMode === 'custom' + ? t('engine.installModeCustom') + : targetMode === 'wsl2' + ? 'WSL2' + : 'Docker' + const healthRows = summarizeHealth(health) + const configExists = !!(config?.config_exists || info?.configExists) + const envExists = !!info?.envExists + const customInputVisible = targetMode === 'custom' || targetMode === 'docker' + const targetNote = targetMode === 'local' + ? `${t('engine.installModeLocal')} · http://127.0.0.1:${port}` + : targetMode === 'wsl2' + ? (envData?.wsl2?.gatewayUrl || t('engine.servicesWslHint')) + : targetMode === 'docker' + ? t('engine.servicesDockerHint') + : t('engine.installCustomDesc') + + el.innerHTML = ` +
+
+
+ + ${esc(t('engine.servicesEyebrow'))} +
+

${esc(t('engine.hermesServicesTitle'))}

+
${esc(gatewayUrl)} · ${esc(model)} · v${esc(version)}
+
+
+ ${info?.installed && !gwRunning ? `` : ''} + ${info?.installed && gwRunning ? `` : ''} + ${info?.installed && gwRunning ? `` : ''} + +
+
+ +
${esc(t('engine.servicesDesc'))}
+ +
+ ${renderKpi(t('engine.servicesInstallState'), installState, `${t('engine.servicesInstallType')} · ${installType}`, info?.installed ? 'success' : 'error')} + ${renderKpi(t('engine.dashGatewayStatus'), gwRunning ? t('engine.dashRunning') : t('engine.dashStopped'), `:${port}`, gwRunning ? 'success' : 'error')} + ${renderKpi(t('engine.dashModel'), model, provider, 'accent')} + ${renderKpi(t('engine.dashConnectTarget'), targetLabel, gatewayUrl, 'info')} +
+ + ${pageMsg ? `
${esc(pageMsg)}
` : ''} + +
+
+
+
+ ${ICONS.package} + ${esc(t('engine.servicesInstallState'))} +
+
+
+
+ ${renderInfoRow(t('engine.dashVersion'), `v${version}`)} + ${renderInfoRow(t('engine.servicesInstallType'), installType)} + ${renderInfoRow(t('engine.servicesPath'), info?.path || t('engine.servicesNotSet'), true)} + ${renderInfoRow(t('engine.servicesHome'), info?.hermesHome || t('engine.servicesNotSet'), true)} +
+
${esc(t('engine.servicesConfigFiles'))}
+
+ config.yaml + .env +
+
+
+ +
+
+
+ ${ICONS.config} + ${esc(t('engine.hermesConfigTitle'))} +
+
+
+
+ ${renderInfoRow(t('engine.configProvider'), provider)} + ${renderInfoRow(t('engine.configModel'), configModel)} + ${renderInfoRow(t('engine.configBaseUrl'), llmBaseUrl, true)} + ${renderInfoRow(t('engine.configApiKey'), maskSecret(config?.api_key), true)} +
+
+ ${esc(t('engine.servicesOpenConfig'))} + ${esc(t('engine.servicesOpenEnv'))} +
+
+
+
+ +
+
+
+ ${ICONS.link} + ${esc(t('engine.dashConnectTarget'))} +
+
+ +
+
+
+
+ + ${envData?.wsl2?.available ? `` : ''} + ${envData?.docker?.available ? `` : ''} + +
+ + ${customInputVisible ? ` + + ` : ''} + +
${esc(targetNote)}
+ + ${envData ? ` +
+ ${envData?.wsl2?.available ? ` +
+
WSL2
+
${esc((envData.wsl2.distros || []).join(', ') || t('engine.servicesDefaultDistro'))}
+
${esc(envData.wsl2.ip || '—')}
+
${esc(envData.wsl2.gatewayRunning ? (envData.wsl2.gatewayUrl || '') : t('engine.servicesWslHint'))}
+
+ ` : ''} + ${envData?.docker?.available ? ` +
+
Docker
+
${esc(envData.docker.version || '—')}
+
${esc(t('engine.servicesContainerCount', { n: String(envData.docker.hermesContainers?.length || 0) }))}
+
${esc(t('engine.servicesDockerHint'))}
+
+ ` : ''} +
+ ` : ''} + +
+ + ${connectMsg ? `${esc(connectMsg)}` : ''} +
+
+
+ +
+
+
+ ${ICONS.health} + ${esc(t('engine.servicesHealthTitle'))} +
+
+ ${esc(gwRunning ? t('engine.dashRunning') : t('engine.dashStopped'))} +
+
+
+ ${healthRows.length ? ` +
+ ${healthRows.map(row => ` +
+
${esc(row.key)}
+
${esc(row.value)}
+
+ `).join('')} +
+
+ ${esc(t('engine.servicesRawJson'))} + 
${esc(JSON.stringify(health, null, 2))}
+
+ ` : ` +
${esc(t('engine.servicesNoHealth'))}
+ `} +
+
+ +
+
+
+ ${ICONS.upload} + ${esc(t('engine.servicesMaintenance'))} +
+
+
+
+ + + +
+
+ ${esc(t('engine.servicesOpenLogs'))} + ${esc(t('engine.servicesOpenConfig'))} + ${esc(t('engine.servicesOpenSetup'))} +
+
+
+ ` + + bind() + } + + async function refresh(withSpinner = true) { + if (withSpinner) { + refreshBusy = true + if (!loading) draw() + } + invalidate('check_hermes') + try { + info = await api.checkHermes() + if (info?.gatewayRunning) { + try { + health = await api.hermesHealthCheck() + } catch (error) { + health = null + setPageMessage(stripError(error), 'warn') + } + } else { + health = null + } + try { + config = await api.hermesReadConfig() + } catch (_) { + config = null + } + syncTargetFromInfo() + } catch (error) { + setPageMessage(stripError(error), 'error') + } finally { + loading = false + refreshBusy = false + draw() + } + } + + async function runGatewayAction(action) { + if (actionBusy) return + actionBusy = true + setPageMessage( + action === 'start' + ? t('engine.gatewayStarting') + : action === 'restart' + ? t('engine.dashRestarting') + : t('engine.dashStopping'), + 'muted' + ) + draw() + try { + if (action === 'restart') { + try { await api.hermesGatewayAction('stop') } catch (_) {} + await new Promise(resolve => setTimeout(resolve, 1200)) + const result = await api.hermesGatewayAction('start') + setPageMessage(result || t('engine.dashRestartGw'), 'success') + } else { + const result = await api.hermesGatewayAction(action) + setPageMessage(result || action, 'success') + } + } catch (error) { + setPageMessage(stripError(error), 'error') + } + actionBusy = false + await refresh(false) + } + + async function detectEnvironments() { + if (envBusy) return + envBusy = true + draw() + try { + envData = await api.hermesDetectEnvironments() + if (info) syncTargetFromInfo() + setConnectMessage('', 'muted') + } catch (error) { + setConnectMessage(stripError(error), 'error') + } + envBusy = false + draw() + } + + async function applyTarget() { + if (targetBusy) return + syncCustomInput() + + let targetUrl = null + if (targetMode === 'wsl2') { + targetUrl = envData?.wsl2?.gatewayUrl || null + if (!targetUrl) { + setConnectMessage(t('engine.servicesDetectFirst'), 'warn') + draw() + return + } + } else if (targetMode === 'docker') { + targetUrl = customUrl.trim() || null + if (!targetUrl) { + setConnectMessage(t('engine.servicesDockerHint'), 'warn') + draw() + return + } + } else if (targetMode === 'custom') { + targetUrl = customUrl.trim() || null + if (!targetUrl) { + setConnectMessage(t('engine.installCustomEmpty'), 'warn') + draw() + return + } + } + + targetBusy = true + draw() + try { + const result = await api.hermesSetGatewayUrl(targetUrl) + setConnectMessage(result, 'success') + setPageMessage(result, 'success') + } catch (error) { + setConnectMessage(stripError(error), 'error') + } + targetBusy = false + await refresh(false) + } + + async function runMaintenance(kind) { + if (maintenanceBusy) return + + const confirmText = kind === 'upgrade' + ? t('engine.servicesConfirmUpgrade') + : kind === 'uninstall-clean' + ? t('engine.servicesConfirmUninstallClean') + : t('engine.servicesConfirmUninstall') + if (!confirm(confirmText)) return + + maintenanceBusy = true + setPageMessage(kind === 'upgrade' ? t('engine.servicesUpgrade') : t('engine.servicesUninstall'), 'muted') + draw() + try { + const result = kind === 'upgrade' + ? await api.updateHermes() + : await api.uninstallHermes(kind === 'uninstall-clean') + setPageMessage(result, 'success') + invalidate('check_hermes') + await refresh(false) + if (kind !== 'upgrade' && !info?.installed) { + window.location.hash = '#/h/setup' + } + } catch (error) { + setPageMessage(stripError(error), 'error') + } + maintenanceBusy = false + draw() + } + + function bind() { + el.querySelector('.hm-services-refresh')?.addEventListener('click', () => refresh()) + el.querySelector('.hm-services-start')?.addEventListener('click', () => runGatewayAction('start')) + el.querySelector('.hm-services-stop')?.addEventListener('click', () => runGatewayAction('stop')) + el.querySelector('.hm-services-restart')?.addEventListener('click', () => runGatewayAction('restart')) + el.querySelector('.hm-services-detect-env')?.addEventListener('click', detectEnvironments) + el.querySelector('.hm-services-apply-target')?.addEventListener('click', applyTarget) + el.querySelectorAll('.hm-services-mode').forEach(button => { + button.addEventListener('click', () => { + syncCustomInput() + targetMode = button.dataset.mode + if (targetMode === 'wsl2' && envData?.wsl2?.gatewayUrl) customUrl = envData.wsl2.gatewayUrl + if (targetMode === 'local') customUrl = '' + draw() + }) + }) + el.querySelector('#hm-services-custom-url')?.addEventListener('input', (event) => { + customUrl = event.target.value + }) + el.querySelector('.hm-services-upgrade')?.addEventListener('click', () => runMaintenance('upgrade')) + el.querySelector('.hm-services-uninstall')?.addEventListener('click', () => runMaintenance('uninstall')) + el.querySelector('.hm-services-uninstall-clean')?.addEventListener('click', () => runMaintenance('uninstall-clean')) + } + + draw() + refresh() return el } diff --git a/src/engines/hermes/pages/sessions.js b/src/engines/hermes/pages/sessions.js new file mode 100644 index 0000000..b34fb42 --- /dev/null +++ b/src/engines/hermes/pages/sessions.js @@ -0,0 +1,474 @@ +import { t } from '../../../lib/i18n.js' +import { api } from '../../../lib/tauri-api.js' +import { toast } from '../../../components/toast.js' +import { showConfirm } from '../../../components/modal.js' +import { icon } from '../../../lib/icons.js' +import { getChatStore, getSourceLabel } from '../lib/chat-store.js' + +function escHtml(value) { + return String(value ?? '') + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') +} + +function escAttr(value) { + return escHtml(value).replace(/'/g, ''') +} + +function parseEpochMs(value) { + if (!value) return 0 + if (typeof value === 'number' && Number.isFinite(value)) { + return value < 1e12 ? Math.round(value * 1000) : Math.round(value) + } + const ts = Date.parse(String(value)) + return Number.isFinite(ts) ? ts : 0 +} + +function formatTime(value) { + if (!value) return '—' + const d = new Date(value) + if (Number.isNaN(d.getTime())) return '—' + const diff = Date.now() - d.getTime() + if (diff < 60_000) return t('engine.sessionsJustNow') + if (diff < 3_600_000) return t('engine.sessionsMinutesAgo').replace('{n}', String(Math.max(1, Math.floor(diff / 60_000)))) + if (diff < 86_400_000) return t('engine.sessionsHoursAgo').replace('{n}', String(Math.max(1, Math.floor(diff / 3_600_000)))) + return d.toLocaleString() +} + +function sessionKey(session) { + return `${session.profile || 'default'}::${session.id}` +} + +function sessionTitle(session) { + return session?.title || session?.messages?.find(m => m.role === 'user')?.content?.slice(0, 64) || t('engine.sessionsUntitled') +} + +function messagePreview(session) { + const first = session?.messages?.find(m => m.role === 'user') || session?.messages?.[0] + return first?.content ? String(first.content).replace(/\s+/g, ' ').slice(0, 180) : (session?.preview || t('engine.sessionsNoPreview')) +} + +function tokenCount(session) { + return Number(session?.inputTokens || 0) + Number(session?.outputTokens || 0) +} + +function formatTokens(value) { + const n = Number(value || 0) + if (!n) return '0' + if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M' + if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K' + return String(Math.round(n)) +} + +function normalizeMessage(m) { + const raw = m?.content ?? m?.toolResult ?? m?.toolArgs ?? '' + return { + role: m?.role || 'message', + content: typeof raw === 'string' ? raw : JSON.stringify(raw), + timestamp: m?.timestamp || m?.created_at || '', + } +} + +function mapSessionSummary(s, profile) { + return { + id: s?.id || s?.session_id || '', + profile: profile || 'default', + title: s?.title || '', + source: s?.source || '', + model: s?.model || '', + preview: s?.preview || '', + lastActiveLabel: s?.last_active_label || '', + messageCount: Number(s?.message_count || s?.messageCount || 0), + createdAt: parseEpochMs(s?.created_at || s?.started_at || s?.createdAt), + updatedAt: parseEpochMs(s?.updated_at || s?.last_active || s?.ended_at || s?.created_at || s?.started_at || s?.updatedAt), + inputTokens: Number(s?.input_tokens || s?.inputTokens || 0), + outputTokens: Number(s?.output_tokens || s?.outputTokens || 0), + messages: Array.isArray(s?.messages) ? s.messages.map(normalizeMessage) : [], + messagesLoaded: Array.isArray(s?.messages), + } +} + +function getFilteredSessions(rows, query, source) { + const q = (query || '').trim().toLowerCase() + let sessions = rows.slice() + if (source !== '__all__') sessions = sessions.filter(s => (s.source || '') === source) + if (q) { + sessions = sessions.filter(s => { + const hay = [s.id, s.profile, s.title, s.model, s.source, ...(s.messages || []).slice(0, 3).map(m => m.content)].join('\n').toLowerCase() + return hay.includes(q) + }) + } + return sessions.sort((a, b) => (b.updatedAt || b.createdAt || 0) - (a.updatedAt || a.createdAt || 0)) +} + +function uniqueSources(sessions) { + return Array.from(new Set(sessions.map(s => s.source || ''))).sort((a, b) => getSourceLabel(a).localeCompare(getSourceLabel(b))) +} + +export function render() { + const el = document.createElement('div') + el.className = 'page hm-sessions-page' + el.dataset.engine = 'hermes' + + const store = getChatStore() + let query = '' + let source = '__all__' + let profileScope = store.state.activeProfile || 'default' + let rows = [] + let selectedKey = null + let selected = new Set() + let loading = false + let busy = false + let detailLoadingKey = null + + const unsubscribe = store.subscribe(() => draw()) + + function availableProfiles() { + const profiles = store.state.profiles || [] + if (profiles.length) return profiles.map(p => p.name).filter(Boolean) + return [store.state.activeProfile || 'default'] + } + + function targetProfiles() { + return profileScope === '__all__' ? availableProfiles() : [profileScope] + } + + function currentSessions() { + return getFilteredSessions(rows, query, source) + } + + function findByKey(key) { + return rows.find(s => sessionKey(s) === key) || null + } + + function currentSession() { + return findByKey(selectedKey) || currentSessions()[0] || null + } + + async function loadRows() { + loading = true + draw() + try { + const profiles = targetProfiles() + const settled = await Promise.allSettled(profiles.map(async (profile) => { + const list = await api.hermesSessionsSummaryList(null, 80, profile) + return (Array.isArray(list) ? list : []).map(s => mapSessionSummary(s, profile)).filter(s => s.id) + })) + rows = settled.flatMap(r => r.status === 'fulfilled' ? r.value : []) + const failed = settled.filter(r => r.status === 'rejected').length + if (failed) toast(t('engine.sessionsProfileLoadPartial').replace('{n}', String(failed)), 'warning') + const visible = currentSessions() + selected = new Set([...selected].filter(key => rows.some(s => sessionKey(s) === key))) + selectedKey = selectedKey && rows.some(s => sessionKey(s) === selectedKey) ? selectedKey : (visible[0] ? sessionKey(visible[0]) : null) + } catch (err) { + toast(String(err?.message || err), 'error') + } finally { + loading = false + draw() + } + } + + async function loadDetail(key, redraw = true) { + const session = findByKey(key) + if (!session || session.messagesLoaded || detailLoadingKey === key) return + detailLoadingKey = key + if (redraw) draw() + try { + const detail = await api.hermesSessionDetail(session.id, session.profile) + session.messages = Array.isArray(detail?.messages) ? detail.messages.map(normalizeMessage) : [] + session.messagesLoaded = true + session.title = session.title || detail?.title || '' + session.model = session.model || detail?.model || '' + session.source = session.source || detail?.source || '' + session.messageCount = session.messageCount || session.messages.length + } catch (err) { + toast(t('engine.sessionsDetailLoadFailed') + ': ' + (err?.message || err), 'error') + } finally { + detailLoadingKey = null + if (redraw) draw() + } + } + + function renderProfileBar() { + const profiles = availableProfiles() + return ` + + ` + } + + function renderSessionRow(s) { + const key = sessionKey(s) + const checked = selected.has(key) + const active = currentSession() && sessionKey(currentSession()) === key + const pinned = s.profile === store.state.activeProfile && store.state.pinned.has(s.id) + const tokens = tokenCount(s) + return ` + + ` + } + + function renderDetail(session) { + if (!session) { + return ` +
+ ${icon('message-square', 34)} +

${escHtml(t('engine.sessionsNoSelection'))}

+

${escHtml(t('engine.sessionsNoSelectionDesc'))}

+
+ ` + } + const key = sessionKey(session) + const messages = (session.messages || []).slice(-30) + const canPin = session.profile === store.state.activeProfile + return ` +
+
+
+
${escHtml(session.profile || 'default')} · ${escHtml(getSourceLabel(session.source || ''))}
+

${escHtml(sessionTitle(session))}

+
${escHtml(session.id)}
+
+
+ + ${canPin ? `` : ''} + +
+
+
+
${escHtml(t('engine.sessionsMessages'))}${Number(session.messageCount || session.messages?.length || 0)}
+
${escHtml(t('engine.sessionsTokens'))}${formatTokens(tokenCount(session))}
+
${escHtml(t('engine.sessionsModel'))}${escHtml(session.model || '—')}
+
${escHtml(t('engine.sessionsUpdated'))}${escHtml(session.lastActiveLabel || formatTime(session.updatedAt || session.createdAt))}
+
+
+ ${detailLoadingKey === key ? `
${escHtml(t('engine.chatLoadingMessages'))}
` : ''} + ${detailLoadingKey !== key && messages.length ? messages.map(m => ` +
+
${escHtml(m.role || 'message')}
+
${escHtml(m.content || '')}
+
+ `).join('') : ''} + ${detailLoadingKey !== key && !messages.length ? `
${escHtml(t('engine.sessionsMessagesNotLoaded'))}
` : ''} +
+
+ ` + } + + function draw() { + const sessions = currentSessions() + const detail = currentSession() + const sources = uniqueSources(rows) + const allVisibleSelected = sessions.length > 0 && sessions.every(s => selected.has(sessionKey(s))) + el.innerHTML = ` +
+
+
HERMES · SESSIONS
+

${escHtml(t('engine.sessionsPageTitle'))}

+

${escHtml(t('engine.sessionsPageDesc'))}

+
+
+ ${renderProfileBar()} + + +
+
+ +
+
${escHtml(t('engine.sessionsTotal'))}${rows.length}
+
${escHtml(t('engine.sessionsShown'))}${sessions.length}
+
${escHtml(t('engine.sessionsProfiles'))}${targetProfiles().length}
+
${escHtml(t('engine.sessionsSelected'))}${selected.size}
+
+ +
+ + ${renderDetail(detail)} +
+ ` + bind() + } + + async function openCurrentInChat() { + const session = currentSession() + if (!session) return + try { + busy = true + draw() + if (session.profile !== store.state.activeProfile) { + await store.switchProfile(session.profile) + } + if (!store.state.sessions.some(s => s.id === session.id)) { + await store.loadSessions() + } + await store.switchSession(session.id) + window.location.hash = '#/h/chat' + } catch (err) { + toast(String(err?.message || err), 'error') + } finally { + busy = false + draw() + } + } + + async function deleteOne(session) { + if (!session) return + const ok = await showConfirm(t('engine.chatConfirmDelete')) + if (!ok) return + try { + if (session.profile === store.state.activeProfile && store.state.streaming && session.id === store.state.runningSessionId) { + throw new Error('RUNNING_SESSION') + } + await api.hermesSessionDelete(session.id, session.profile) + rows = rows.filter(s => sessionKey(s) !== sessionKey(session)) + selected.delete(sessionKey(session)) + selectedKey = null + if (session.profile === store.state.activeProfile) await store.loadSessions() + toast(t('engine.chatSessionDeleted'), 'success') + } catch (err) { + toast(t('engine.chatDeleteFailed') + ': ' + (err?.message || err), 'error') + } + draw() + } + + function bind() { + el.querySelector('#hm-sessions-refresh')?.addEventListener('click', async () => { + busy = true + draw() + try { await loadRows() } + finally { busy = false; draw() } + }) + el.querySelector('#hm-sessions-open-chat')?.addEventListener('click', () => { window.location.hash = '#/h/chat' }) + el.querySelector('#hm-session-open-chat')?.addEventListener('click', openCurrentInChat) + el.querySelector('#hm-sessions-query')?.addEventListener('input', (e) => { + query = e.target.value + selectedKey = currentSessions()[0] ? sessionKey(currentSessions()[0]) : null + draw() + }) + el.querySelector('#hm-sessions-source')?.addEventListener('change', (e) => { + source = e.target.value + selectedKey = currentSessions()[0] ? sessionKey(currentSessions()[0]) : null + draw() + }) + el.querySelector('#hm-sessions-profile')?.addEventListener('change', async (e) => { + profileScope = e.target.value + selected.clear() + selectedKey = null + await loadRows() + }) + el.querySelectorAll('[data-session-key]').forEach(row => { + row.addEventListener('click', async (e) => { + const key = row.dataset.sessionKey + if (!key) return + if (e.target.closest('[data-check-id]')) { + if (selected.has(key)) selected.delete(key) + else selected.add(key) + draw() + return + } + selectedKey = key + draw() + await loadDetail(key) + }) + }) + el.querySelector('#hm-sessions-select-all')?.addEventListener('click', () => { + const sessions = currentSessions() + const allVisibleSelected = sessions.length > 0 && sessions.every(s => selected.has(sessionKey(s))) + if (allVisibleSelected) sessions.forEach(s => selected.delete(sessionKey(s))) + else sessions.forEach(s => selected.add(sessionKey(s))) + draw() + }) + el.querySelector('#hm-sessions-bulk-delete')?.addEventListener('click', async () => { + if (!selected.size) return + const targets = [...selected].map(findByKey).filter(Boolean) + const ok = await showConfirm(t('engine.chatConfirmBulkDelete').replace('{n}', String(targets.length))) + if (!ok) return + const deleted = [] + const failed = [] + for (const session of targets) { + try { + if (session.profile === store.state.activeProfile && store.state.streaming && session.id === store.state.runningSessionId) { + throw new Error('RUNNING_SESSION') + } + await api.hermesSessionDelete(session.id, session.profile) + deleted.push(sessionKey(session)) + } catch (err) { + failed.push({ session, err }) + } + } + rows = rows.filter(s => !deleted.includes(sessionKey(s))) + selected.clear() + if (deleted.length && targets.some(s => s.profile === store.state.activeProfile)) await store.loadSessions() + if (deleted.length && !failed.length) { + toast(t('engine.chatBulkDeleted').replace('{n}', String(deleted.length)), 'success') + } else if (deleted.length) { + toast(t('engine.chatBulkPartial').replace('{n}', String(deleted.length)).replace('{f}', String(failed.length)), 'warning') + } else { + toast(t('engine.chatBulkFailed'), 'error') + } + draw() + }) + el.querySelector('#hm-session-pin')?.addEventListener('click', () => { + const session = currentSession() + if (!session || session.profile !== store.state.activeProfile) return + store.togglePinned(session.id) + draw() + }) + el.querySelector('#hm-session-delete')?.addEventListener('click', async () => { + await deleteOne(currentSession()) + }) + } + + async function init() { + await store.loadProfiles().catch(() => {}) + profileScope = store.state.activeProfile || 'default' + await loadRows() + } + + requestAnimationFrame(() => { draw(); init() }) + const observer = new MutationObserver(() => { + if (!el.isConnected) { + unsubscribe() + observer.disconnect() + } + }) + requestAnimationFrame(() => { if (el.parentNode) observer.observe(el.parentNode, { childList: true }) }) + return el +} diff --git a/src/engines/hermes/pages/setup.js b/src/engines/hermes/pages/setup.js index 8a86563..0a451ec 100644 --- a/src/engines/hermes/pages/setup.js +++ b/src/engines/hermes/pages/setup.js @@ -33,6 +33,7 @@ let hermesGroups = { apiKeyIntl: [], apiKeyCn: [], aggregators: [], oauth: [], e export function render() { const el = document.createElement('div') el.className = 'page' + el.dataset.engine = 'hermes' // 状态 let phase = 'detect' // detect | install | configure | gateway | complete diff --git a/src/engines/hermes/pages/skills.js b/src/engines/hermes/pages/skills.js index 9028442..ffaccc3 100644 --- a/src/engines/hermes/pages/skills.js +++ b/src/engines/hermes/pages/skills.js @@ -1,37 +1,115 @@ /** - * Hermes Agent Skills 浏览器 - * 从 ~/.hermes/skills/ 读取技能文件，按分类展示，支持搜索和详情查看 + * Hermes Agent — Skills browser (editorial luxury re-write) + * + * Mirrors the official `hermes-web-ui` Skills view: + * GET /api/hermes/skills → { categories: [...] } + * PUT /api/hermes/skills/toggle → enable/disable + * GET /api/hermes/skills/:cat/:skill/files → attached files + * GET /api/hermes/skills/ → file content + * + * Layout: + * ┌ hero ───────────────────────────────────────────────────┐ + * │ eyebrow + big-serif title + search + skill count │ + * ├─ sidebar (categories + skills) ┬─ detail (markdown + files) + * │ collapsible, toggle switches │ breadcrumb when viewing + * │ │ an attached file + * └────────────────────────────────┴──────────────────────────┘ + * + * Extras beyond the official UI: + * - Collapsible categories (persist in memory only) + * - File browser with breadcrumb + back button (Vue parity) + * - Inline toggle switches use stable loading state per skill */ import { t } from '../../../lib/i18n.js' import { api } from '../../../lib/tauri-api.js' +import { toast } from '../../../components/toast.js' -function escHtml(s) { return String(s).replace(/&/g, '&').replace(//g, '>') } +function escHtml(s) { + return String(s ?? '').replace(/&/g, '&').replace(//g, '>') +} +/** + * Minimal, dependency-free Markdown renderer. Matches the feature-set used + * across Hermes pages (memory/skills) so the look is consistent. Supports: + * - fenced code blocks (```lang\ncode```) + * - inline `code`, **bold**, *italic* + * - `# / ## / ### / ####` headings + * - unordered list (`- item`) → `
  • ` + * - `[text](url)` → `` + * Anything else is escaped and rendered as plain text with `
    ` for newlines. + */ function mdToHtml(text) { - return text + if (!text) return '' + // First pass: extract code blocks so inner contents aren't mangled by other + // replacers. We keep a placeholder token and restore at the end. + const blocks = [] + let out = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => { + const idx = blocks.push({ lang, code }) - 1 + return `\u0000CODEBLOCK_${idx}\u0000` + }) + out = out .replace(/&/g, '&').replace(//g, '>') - .replace(/```(\w*)\n([\s\S]*?)```/g, '
    $2
    ') .replace(/`([^`]+)`/g, '$1') .replace(/\*\*(.+?)\*\*/g, '$1') .replace(/\*(.+?)\*/g, '$1') + .replace(/^#### (.+)$/gm, '
    $1
    ') .replace(/^### (.+)$/gm, '

    $1

    ') .replace(/^## (.+)$/gm, '

    $1

    ') .replace(/^# (.+)$/gm, '

    $1

    ') + .replace(/^(?:\s*[-*]\s+(.+))(?:\n\s*[-*]\s+(.+))*/gm, (m) => + '
      ' + m.trim().split(/\n\s*[-*]\s+/).map(li => `
    • ${li.replace(/^[-*]\s+/, '')}
      • `).join('') + '
    ') .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '    $1') + .replace(/\n{2,}/g, '

    ') .replace(/\n/g, '
    ') + // Restore code blocks. + out = out.replace(/\u0000CODEBLOCK_(\d+)\u0000/g, (_, i) => { + const { lang, code } = blocks[Number(i)] + return `

    ${escHtml(code)}
    ` + }) + return `

    ${out}

    ` +} + +const ICONS = { + search: '', + chevron: '', + back: '', + file: '', + folder: '', + refresh: '', + empty: '', +} + +/** Cross-platform basename (handles `/` and `\\`). */ +function basename(p) { + if (!p) return '' + const s = String(p).replace(/\\/g, '/') + const idx = s.lastIndexOf('/') + return idx >= 0 ? s.slice(idx + 1) : s } export function render() { const el = document.createElement('div') el.className = 'hermes-skills-page' + el.dataset.engine = 'hermes' - let categories = [] + // --- State --- + let categories = [] // [{ category, description, skills: [...] }] let loading = true let searchQuery = '' - let activeSkill = null // { category, file, name, path } + let collapsed = new Set() // collapsed category names + let toggling = new Set() // slugs currently being toggled + + let activeSkill = null // the selected `{ category, file, name, slug, description, path, isDir, enabled }` let skillContent = '' let loadingDetail = false + let files = [] // attached files (excluding SKILL.md) + let viewingFile = null // relative path when browsing an attached file + let fileContent = '' + let loadingFile = false + + // ============================================================ loaders + async function loadSkills() { loading = true draw() @@ -40,6 +118,7 @@ export function render() { } catch (e) { console.error('Failed to load skills:', e) categories = [] + toast(t('engine.skillsLoadFailed') + ': ' + (e?.message || e), 'error') } loading = false draw() @@ -48,96 +127,330 @@ export function render() { async function loadDetail(skill) { activeSkill = skill loadingDetail = true + viewingFile = null + fileContent = '' + files = [] + skillContent = '' draw() - try { - skillContent = await api.hermesSkillDetail(skill.path) - } catch (e) { - skillContent = `⚠️ ${e.message || e}` - } + + // Kick off attached-file listing in parallel when the skill lives in a + // directory (`isDir = true`). Legacy flat skills have no attached files. + const contentPromise = api.hermesSkillDetail(skill.path) + .then(c => { skillContent = c }) + .catch(e => { skillContent = `⚠️ ${t('engine.skillsLoadFailed')}: ${e?.message || e}` }) + const filesPromise = skill.isDir && skill.category && skill.category !== '_root' + ? api.hermesSkillFiles(skill.category, skill.slug || skill.file) + .then(list => { files = (list || []).filter(f => !f.isDir) }) + .catch(() => { files = [] }) + : Promise.resolve() + + await Promise.all([contentPromise, filesPromise]) loadingDetail = false draw() } + async function openFile(relPath) { + if (!activeSkill?.isDir || !activeSkill.category) return + viewingFile = relPath + loadingFile = true + fileContent = '' + draw() + try { + const dir = activeSkill.skill_dir || + (activeSkill.path ? activeSkill.path.replace(/[\\/]SKILL\.md$/i, '') : '') + const sep = /\\/.test(dir) && !/\//.test(dir) ? '\\' : '/' + const full = dir ? `${dir}${sep}${relPath.replace(/\//g, sep)}` : relPath + fileContent = await api.hermesSkillDetail(full) + } catch (e) { + fileContent = `⚠️ ${t('engine.skillsFileLoadFailed')}: ${e?.message || e}` + } + loadingFile = false + draw() + } + + function backToSkill() { + viewingFile = null + fileContent = '' + draw() + } + + async function handleToggle(skill, nextEnabled) { + if (toggling.has(skill.slug)) return + toggling.add(skill.slug) + draw() + try { + await api.hermesSkillToggle(skill.slug, nextEnabled) + skill.enabled = nextEnabled + toast( + nextEnabled ? t('engine.skillsEnabled') : t('engine.skillsDisabled'), + 'success', + ) + } catch (e) { + toast(t('engine.skillsToggleFailed') + ': ' + (e?.message || e), 'error') + } finally { + toggling.delete(skill.slug) + draw() + } + } + + // ============================================================ derived + function filteredCategories() { if (!searchQuery) return categories const q = searchQuery.toLowerCase() return categories.map(cat => ({ ...cat, skills: cat.skills.filter(s => - s.name.toLowerCase().includes(q) || (s.description || '').toLowerCase().includes(q) - ) - })).filter(cat => cat.skills.length > 0) + (s.name || '').toLowerCase().includes(q) || + (s.slug || '').toLowerCase().includes(q) || + (s.description || '').toLowerCase().includes(q), + ), + })).filter(cat => cat.skills.length > 0 || (cat.category || '').toLowerCase().includes(q)) } function totalSkillCount() { return categories.reduce((sum, cat) => sum + cat.skills.length, 0) } - function draw() { + function enabledSkillCount() { + return categories.reduce( + (sum, cat) => sum + cat.skills.filter(s => s.enabled !== false).length, + 0, + ) + } + + // ============================================================ render + + function renderSkillItem(cat, s) { + const isActive = activeSkill?.path === s.path + const isToggling = toggling.has(s.slug) + const isEnabled = s.enabled !== false + return ` + + ` + } + + function renderCategory(cat) { + const name = cat.category === '_root' ? t('engine.skillsUncategorized') : cat.category + const isCollapsed = collapsed.has(cat.category) + return ` +
    + + ${!isCollapsed ? ` + ${cat.description ? `
    ${escHtml(cat.description)}
    ` : ''} +
    + ${cat.skills.map(s => renderSkillItem(cat, s)).join('')} +
    + ` : ''} +
    + ` + } + + function renderSidebar() { const filtered = filteredCategories() - el.innerHTML = ` -
    - ${t('engine.hermesSkillsTitle')} -
    - - ${totalSkillCount()} ${t('engine.skillsTotal')} + return ` + + ` + } + + function renderEmpty() { + return ` +
    + ${ICONS.empty} +
    ${t('engine.skillsSelectHint')}
    +
    ${t('engine.skillsSelectSub')}
    +
    + ` + } + + function renderDetail() { + if (!activeSkill) return renderEmpty() + if (loadingDetail) { + return ` +
    +
    +
    +
    +
    +
    + ` + } + + // --- File view (attached file of a skill) --- + if (viewingFile) { + return ` +
    + + / + ${escHtml(viewingFile)} +
    +
    + ${loadingFile + ? `
    ${t('engine.skillsLoading')}
    ` + : `
    ${mdToHtml(fileContent)}
    `} +
    + ` + } + + // --- Skill content view --- + return ` +
    +
    + ${activeSkill.category && activeSkill.category !== '_root' ? ` + ${escHtml(activeSkill.category)} + / + ` : ''} + ${escHtml(activeSkill.name)} + ${activeSkill.enabled === false + ? `${t('engine.skillsDisabledTag')}` + : `${t('engine.skillsEnabledTag')}`} +
    +
    + ${activeSkill.isDir ? ICONS.folder : ICONS.file} + ${escHtml(activeSkill.file)}
    -
    -
    -
    - ${loading ? `
    ${t('engine.skillsLoading')}
    ` : ''} - ${!loading && filtered.length === 0 ? `
    ${t('engine.skillsEmpty')}
    ` : ''} - ${!loading ? filtered.map(cat => ` -
    -
    - ${escHtml(cat.category === '_root' ? t('engine.skillsUncategorized') : cat.category)} - ${cat.skills.length} -
    - ${cat.skills.map(s => ` -
    -
    ${escHtml(s.name)}
    - ${s.description ? `
    ${escHtml(s.description)}
    ` : ''} -
    - `).join('')} -
    - `).join('') : ''} +
    +
    ${mdToHtml(skillContent)}
    +
    + ${files.length > 0 ? ` +
    +
    + ${t('engine.skillsAttachedFiles')} + ${files.length} +
    +
    + ${files.map(f => ` + + `).join('')}
    -
    - ${!activeSkill ? `
    - - ${t('engine.skillsSelectHint')} -
    ` : ''} - ${activeSkill && loadingDetail ? `
    ${t('engine.skillsLoading')}
    ` : ''} - ${activeSkill && !loadingDetail ? ` -
    -

    ${escHtml(activeSkill.name)}

    - ${escHtml(activeSkill.file)} -
    -
    ${mdToHtml(skillContent)}
    - ` : ''} + ` : ''} + ` + } + + function draw() { + const enabled = enabledSkillCount() + const total = totalSkillCount() + el.innerHTML = ` +
    +
    +
    + + ${t('engine.skillsEyebrow')} +
    +

    ${t('engine.hermesSkillsTitle')}

    +
    ~/.hermes/skills/ + ${!loading ? ` · ${enabled}/${total} ${t('engine.skillsActive')}` : ''} +
    +
    + +
    +
    + +
    + ${renderSidebar()} +
    ${renderDetail()}
    ` bind() } + // ============================================================ bindings + function bind() { el.querySelector('#hm-skills-search')?.addEventListener('input', (e) => { searchQuery = e.target.value draw() }) - el.querySelectorAll('.hm-skills-item').forEach(item => { - item.addEventListener('click', () => { + + el.querySelector('#hm-skills-refresh')?.addEventListener('click', () => loadSkills()) + + el.querySelectorAll('.hm-skill-cat-header').forEach(btn => { + btn.addEventListener('click', () => { + const cat = btn.dataset.cat + if (collapsed.has(cat)) collapsed.delete(cat) + else collapsed.add(cat) + draw() + }) + }) + + el.querySelectorAll('.hm-skill-item').forEach(item => { + item.addEventListener('click', (evt) => { + // Toggle switch clicks should NOT open the skill detail. + if (evt.target.closest('.hm-switch')) return const skillPath = item.dataset.path - // Find the skill object for (const cat of categories) { - const s = cat.skills.find(s => s.path === skillPath) - if (s) { loadDetail(s); return } + const s = cat.skills.find(x => x.path === skillPath) + if (s) { loadDetail({ ...s, category: cat.category }); return } } }) }) + + el.querySelectorAll('.hm-switch').forEach(sw => { + sw.addEventListener('click', (evt) => { + evt.stopPropagation() + if (sw.classList.contains('is-busy')) return + const slug = sw.dataset.slug + const catName = sw.dataset.category + const cat = categories.find(c => c.category === catName) + const skill = cat?.skills.find(s => s.slug === slug) + if (!skill) return + handleToggle(skill, skill.enabled === false) + }) + }) + + el.querySelector('#hm-skills-back')?.addEventListener('click', backToSkill) + + el.querySelectorAll('.hm-skills-file-chip').forEach(chip => { + chip.addEventListener('click', () => openFile(chip.dataset.file)) + }) } loadSkills() diff --git a/src/engines/hermes/pages/usage.js b/src/engines/hermes/pages/usage.js new file mode 100644 index 0000000..5b1a507 --- /dev/null +++ b/src/engines/hermes/pages/usage.js @@ -0,0 +1,401 @@ +import { api } from '../../../lib/tauri-api.js' +import { t } from '../../../lib/i18n.js' +import { icon } from '../../../lib/icons.js' + +const DAY_MS = 24 * 60 * 60 * 1000 + +function escHtml(value) { + return String(value || '') + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') +} + +function toNumber(value) { + const n = Number(value || 0) + return Number.isFinite(n) ? n : 0 +} + +function formatTokens(value) { + const n = toNumber(value) + if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M' + if (n >= 1000) return (n / 1000).toFixed(1) + 'K' + return String(Math.round(n)) +} + +function formatCost(value) { + const n = toNumber(value) + if (!n) return '$0.00' + if (n < 0.01) return '<$0.01' + return '$' + n.toFixed(2) +} + +function toTimestamp(session) { + const direct = toNumber(session?.started_at) + if (direct > 0) return direct + const raw = session?.created_at || session?.updated_at || '' + const ms = Date.parse(raw) + return Number.isNaN(ms) ? 0 : Math.floor(ms / 1000) +} + +function toDateKey(timestampSeconds) { + return new Date(timestampSeconds * 1000).toISOString().slice(0, 10) +} + +function aggregateSessions(sessions) { + const rows = Array.isArray(sessions) ? sessions.slice() : [] + const totalInputTokens = rows.reduce((sum, s) => sum + toNumber(s.input_tokens), 0) + const totalOutputTokens = rows.reduce((sum, s) => sum + toNumber(s.output_tokens), 0) + const totalTokens = totalInputTokens + totalOutputTokens + const totalCacheTokens = rows.reduce((sum, s) => sum + toNumber(s.cache_read_tokens), 0) + const estimatedCost = rows.reduce((sum, s) => { + const cost = s.actual_cost_usd ?? s.estimated_cost_usd ?? 0 + return sum + toNumber(cost) + }, 0) + + const modelMap = new Map() + let oldestTs = 0 + for (const s of rows) { + const model = s.model || t('usage.unknownModel') + if (!modelMap.has(model)) { + modelMap.set(model, { + model, + inputTokens: 0, + outputTokens: 0, + cacheTokens: 0, + totalTokens: 0, + sessions: 0, + }) + } + const entry = modelMap.get(model) + entry.inputTokens += toNumber(s.input_tokens) + entry.outputTokens += toNumber(s.output_tokens) + entry.cacheTokens += toNumber(s.cache_read_tokens) + entry.totalTokens += toNumber(s.input_tokens) + toNumber(s.output_tokens) + entry.sessions += 1 + + const ts = toTimestamp(s) + if (ts > 0 && (!oldestTs || ts < oldestTs)) oldestTs = ts + } + + const now = new Date() + const dailyMap = new Map() + for (let i = 29; i >= 0; i--) { + const d = new Date(now) + d.setDate(d.getDate() - i) + const key = d.toISOString().slice(0, 10) + dailyMap.set(key, { date: key, tokens: 0, cache: 0, sessions: 0, cost: 0 }) + } + + for (const s of rows) { + const ts = toTimestamp(s) + if (!ts) continue + const key = toDateKey(ts) + const entry = dailyMap.get(key) + if (!entry) continue + entry.tokens += toNumber(s.input_tokens) + toNumber(s.output_tokens) + entry.cache += toNumber(s.cache_read_tokens) + entry.sessions += 1 + entry.cost += toNumber(s.actual_cost_usd ?? s.estimated_cost_usd ?? 0) + } + + const dailyUsage = [...dailyMap.values()] + const modelUsage = [...modelMap.values()].sort((a, b) => b.totalTokens - a.totalTokens) + const days = oldestTs ? Math.max(1, Math.ceil((Date.now() - oldestTs * 1000) / DAY_MS)) : 1 + + return { + sessions: rows, + totalInputTokens, + totalOutputTokens, + totalTokens, + totalSessions: rows.length, + totalCacheTokens, + cacheHitRate: totalInputTokens > 0 ? (totalCacheTokens / totalInputTokens) * 100 : null, + estimatedCost, + modelUsage, + dailyUsage, + avgSessionsPerDay: rows.length / days, + } +} + +function analyticsToUsage(data) { + const totals = data?.totals || {} + const totalInputTokens = toNumber(totals.total_input) + const totalOutputTokens = toNumber(totals.total_output) + const totalTokens = totalInputTokens + totalOutputTokens + const totalCacheTokens = toNumber(totals.total_cache_read) + toNumber(totals.total_cache_write) + const totalSessions = toNumber(totals.total_sessions) + const estimatedCost = toNumber(totals.total_actual_cost || totals.total_estimated_cost) + const periodDays = Math.max(1, toNumber(data?.period_days) || 30) + const modelUsage = (Array.isArray(data?.by_model) ? data.by_model : []).map(model => { + const inputTokens = toNumber(model.input_tokens) + const outputTokens = toNumber(model.output_tokens) + return { + model: model.model || t('usage.unknownModel'), + inputTokens, + outputTokens, + cacheTokens: toNumber(model.cache_read_tokens), + totalTokens: inputTokens + outputTokens, + sessions: toNumber(model.sessions), + } + }).sort((a, b) => b.totalTokens - a.totalTokens) + const dailyUsage = (Array.isArray(data?.daily) ? data.daily : []).map(day => ({ + date: day.day || day.date || '', + tokens: toNumber(day.input_tokens) + toNumber(day.output_tokens), + cache: toNumber(day.cache_read_tokens), + sessions: toNumber(day.sessions), + cost: toNumber(day.actual_cost || day.estimated_cost), + })).filter(day => day.date) + return { + sessions: [], + totalInputTokens, + totalOutputTokens, + totalTokens, + totalSessions, + totalCacheTokens, + cacheHitRate: totalInputTokens > 0 ? (totalCacheTokens / totalInputTokens) * 100 : null, + estimatedCost, + modelUsage, + dailyUsage, + avgSessionsPerDay: totalSessions / periodDays, + } +} + +function renderTrendSvg(dailyUsage) { + if (!dailyUsage.length) return '' + const width = 780 + const height = 220 + const padLeft = 12 + const padRight = 12 + const padTop = 12 + const padBottom = 28 + const usableWidth = width - padLeft - padRight + const usableHeight = height - padTop - padBottom + const maxTokens = Math.max(...dailyUsage.map(d => d.tokens), 1) + const stepX = dailyUsage.length > 1 ? usableWidth / (dailyUsage.length - 1) : usableWidth + const baseline = height - padBottom + const barWidth = Math.max(8, Math.min(18, usableWidth / Math.max(dailyUsage.length, 1) - 5)) + + const points = dailyUsage.map((d, index) => { + const x = padLeft + stepX * index + const y = baseline - (d.tokens / maxTokens) * usableHeight + return { x, y, d } + }) + + const grid = [0.25, 0.5, 0.75, 1].map(scale => { + const y = baseline - usableHeight * scale + return `` + }).join('') + + const areaPath = points.length + ? `M ${points[0].x.toFixed(2)} ${baseline.toFixed(2)} L ${points.map(p => `${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(' L ')} L ${points[points.length - 1].x.toFixed(2)} ${baseline.toFixed(2)} Z` + : '' + const linePoints = points.map(p => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ') + const bars = points.map(point => { + const h = Math.max(2, baseline - point.y) + return ` + ${escHtml(point.d.date)} · ${formatTokens(point.d.tokens)} ${escHtml(t('usage.tokens'))} · ${point.d.sessions} ${escHtml(t('usage.sessions'))} + ` + }).join('') + const dots = points.map(point => ``).join('') + + return ` + + ` +} + +function renderStatCard(label, value, sub, tone = '') { + return ` +
    +
    ${escHtml(label)}
    +
    ${escHtml(value)}
    +
    ${escHtml(sub || '')}
    +
    + ` +} + +function renderContent(usage) { + const strongestModel = usage.modelUsage[0]?.totalTokens || 1 + const modelRows = usage.modelUsage.length + ? usage.modelUsage.slice(0, 10).map(model => ` +
    +
    ${escHtml(model.model)}
    +
    +
    +
    +
    ${escHtml(formatTokens(model.totalTokens))}
    +
    + `).join('') + : `
    ${escHtml(t('usage.noData'))}
    ` + + const trendRows = [...usage.dailyUsage].reverse().slice(0, 30).map(day => ` + + ${escHtml(day.date)} + ${escHtml(formatTokens(day.tokens))} + ${escHtml(formatTokens(day.cache))} + ${escHtml(String(day.sessions))} + ${escHtml(formatCost(day.cost))} + + `).join('') + + const rangeStart = usage.dailyUsage[0]?.date.slice(5) || '—' + const rangeEnd = usage.dailyUsage[usage.dailyUsage.length - 1]?.date.slice(5) || '—' + + return ` +
    + ${renderStatCard( + t('usage.totalTokens'), + formatTokens(usage.totalTokens), + `${formatTokens(usage.totalInputTokens)} ${t('usage.inputTokens')} / ${formatTokens(usage.totalOutputTokens)} ${t('usage.outputTokens')}`, + 'is-accent' + )} + ${renderStatCard( + t('usage.totalSessions'), + String(usage.totalSessions), + t('usage.avgPerDay').replace('{n}', usage.avgSessionsPerDay.toFixed(1)) + )} + ${renderStatCard( + t('usage.estimatedCost'), + formatCost(usage.estimatedCost), + usage.modelUsage[0]?.model || t('usage.unknownModel') + )} + ${renderStatCard( + t('usage.cacheHitRate'), + usage.cacheHitRate == null ? '--' : usage.cacheHitRate.toFixed(1) + '%', + `${formatTokens(usage.totalCacheTokens)} ${t('usage.tokens')}`, + 'is-muted' + )} +
    + +
    +
    +

    ${escHtml(t('usage.modelBreakdown'))}

    +
    +
    ${modelRows}
    +
    + +
    +
    +

    ${escHtml(t('usage.dailyTrend'))}

    +
    +
    ${renderTrendSvg(usage.dailyUsage)}
    +
    + ${escHtml(rangeStart)} + ${escHtml(rangeEnd)} +
    +
    + + + + + + + + + + + ${trendRows} +
    ${escHtml(t('usage.date'))}${escHtml(t('usage.tokens'))}${escHtml(t('usage.cache'))}${escHtml(t('usage.sessions'))}${escHtml(t('usage.cost'))}
    +
    +
    + ` +} + +export function render() { + const el = document.createElement('div') + el.className = 'page hm-usage-page' + el.dataset.engine = 'hermes' + + let loading = true + let sessions = [] + let analytics = null + let error = '' + let alive = true + + function draw() { + const usage = analytics ? analyticsToUsage(analytics) : aggregateSessions(sessions) + el.innerHTML = ` +
    +
    +
    HERMES AGENT · ANALYTICS
    +

    ${escHtml(t('usage.title'))}

    +

    ${escHtml(t('usage.desc'))}

    +
    + +
    + +
    + ${loading && !usage.totalSessions ? ` +
    ${escHtml(t('common.loading'))}
    + ` : error ? ` +
    +
    ${escHtml(t('usage.loadFailed'))}
    +
    ${escHtml(error)}
    + +
    + ` : !usage.totalSessions ? ` +
    ${escHtml(t('usage.noData'))}
    + ` : renderContent(usage)} +
    + ` + + el.querySelector('#hm-usage-refresh')?.addEventListener('click', load) + el.querySelector('#hm-usage-retry')?.addEventListener('click', load) + } + + async function load() { + loading = true + error = '' + draw() + try { + analytics = await api.hermesUsageAnalytics(30) + if (!alive) return + sessions = [] + } catch (err) { + if (!alive) return + try { + const rows = await api.hermesSessionsList(null, null) + if (!alive) return + sessions = Array.isArray(rows) ? rows : [] + analytics = null + } catch (_) { + error = err?.message || String(err) + } + } finally { + if (!alive) return + loading = false + draw() + } + } + + const mo = new MutationObserver(() => { + if (!el.isConnected) { + alive = false + mo.disconnect() + } + }) + + requestAnimationFrame(() => { + if (el.parentNode) mo.observe(el.parentNode, { childList: true }) + }) + + draw() + load() + return el +} diff --git a/src/engines/hermes/style/hermes.css b/src/engines/hermes/style/hermes.css new file mode 100644 index 0000000..56d5ffa --- /dev/null +++ b/src/engines/hermes/style/hermes.css @@ -0,0 +1,5686 @@ +/** + * Hermes Agent — Editorial Luxury UI + * ---------------------------------------------------------- + * Style archetype: Minimal Single Column + Liquid Glass hints + * Mood: editorial, premium, sophisticated (Hermes = messenger of the gods) + * Palette: warm black + muted gold (#CA8A04) + warm off-white + * Typography: Serif display (Playfair → Georgia fallback) + * + Inter body + JetBrains Mono code + * + * Scoped under `[data-engine="hermes"]`. OpenClaw is never touched. + * + * Design principles: + * 1. Restraint over density. Lots of whitespace. + * 2. Hairline borders, never heavy fills. + * 3. ONE accent color (gold). Use sparingly. + * 4. Serif italic for editorial eyebrow labels. + * 5. Subtle radial glow for depth, NEVER hard shadows. + * 6. Hover = color shift + 1px border, never scale/translate. + */ + +/* ========================================================================== + * 0 · Design tokens — light theme (warm off-white, gold) + * ========================================================================== + */ +[data-engine="hermes"] { + /* Surfaces — warm, paper-like */ + --hm-surface-0: #FAFAF9; /* page background (warm off-white) */ + --hm-surface-1: #ffffff; /* raised panel */ + --hm-surface-2: #F5F5F4; /* subtle inset / hover */ + --hm-surface-3: #E7E5E4; /* input background */ + + /* Hairline borders */ + --hm-border: rgba(28, 25, 23, 0.08); + --hm-border-subtle: rgba(28, 25, 23, 0.04); + --hm-border-strong: rgba(28, 25, 23, 0.20); + + /* Text — warm not cool */ + --hm-text-primary: #1C1917; /* stone-900 */ + --hm-text-secondary: #44403C; /* stone-700 */ + --hm-text-tertiary: #78716C; /* stone-500 */ + --hm-text-muted: #A8A29E; /* stone-400 */ + --hm-text-inverse: #FAFAF9; + + /* Gold accent — the only feature color */ + --hm-accent: #CA8A04; /* amber-600 */ + --hm-accent-hover: #A16207; /* amber-700 */ + --hm-accent-soft: rgba(202, 138, 4, 0.08); + --hm-accent-ring: rgba(202, 138, 4, 0.22); + + /* State colors — desaturated, editorial */ + --hm-success: #65A30D; /* lime-600 */ + --hm-success-soft: rgba(101, 163, 13, 0.10); + --hm-error: #B91C1C; /* red-700 */ + --hm-error-soft: rgba(185, 28, 28, 0.08); + --hm-warn: #B45309; /* amber-700 */ + --hm-warn-soft: rgba(180, 83, 9, 0.08); + --hm-info: #0369A1; /* sky-700 */ + --hm-info-soft: rgba(3, 105, 161, 0.08); + + /* Fonts — editorial stack, no network imports */ + --hm-font-serif: 'Playfair Display', 'Cormorant Garamond', 'Iowan Old Style', + 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', + 'Noto Serif SC', 'Source Han Serif SC', serif; + --hm-font-sans: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, + 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif; + --hm-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', + 'Fira Code', Consolas, 'Liberation Mono', monospace; + + /* Radii — soft but not round */ + --hm-radius-sm: 4px; + --hm-radius-md: 8px; + --hm-radius-lg: 12px; + --hm-radius-xl: 20px; + + /* Shadows — no heavy drops; a warm ring instead */ + --hm-shadow-sm: 0 1px 0 rgba(28, 25, 23, 0.03); + --hm-shadow-md: 0 1px 2px rgba(28, 25, 23, 0.04), + 0 8px 24px rgba(28, 25, 23, 0.04); + --hm-shadow-lg: 0 2px 4px rgba(28, 25, 23, 0.04), + 0 24px 48px rgba(28, 25, 23, 0.06); + --hm-glow-gold: 0 0 0 1px var(--hm-accent-ring), + 0 12px 32px rgba(202, 138, 4, 0.15); + + /* Motion — slower, more deliberate */ + --hm-ease: cubic-bezier(0.22, 1, 0.36, 1); + --hm-ease-serif: cubic-bezier(0.4, 0, 0.2, 1); + --hm-dur-fast: 180ms; + --hm-dur-normal: 280ms; + --hm-dur-slow: 500ms; +} + +/* Dark theme overrides — warm black, not cool slate */ +[data-theme="dark"] [data-engine="hermes"], +[data-engine="hermes"][data-theme="dark"] { + --hm-surface-0: #0C0A09; /* stone-950 warm black */ + --hm-surface-1: #1C1917; /* stone-900 */ + --hm-surface-2: #292524; /* stone-800 */ + --hm-surface-3: #44403C; /* stone-700 */ + + --hm-border: rgba(250, 250, 249, 0.08); + --hm-border-subtle: rgba(250, 250, 249, 0.04); + --hm-border-strong: rgba(250, 250, 249, 0.20); + + --hm-text-primary: #FAFAF9; + --hm-text-secondary: #D6D3D1; /* stone-300 */ + --hm-text-tertiary: #A8A29E; /* stone-400 */ + --hm-text-muted: #78716C; /* stone-500 */ + --hm-text-inverse: #1C1917; + + --hm-accent: #EAB308; /* amber-500 slightly brighter for dark */ + --hm-accent-hover: #FACC15; /* amber-400 */ + --hm-accent-soft: rgba(234, 179, 8, 0.12); + --hm-accent-ring: rgba(234, 179, 8, 0.28); + + --hm-success: #84CC16; /* lime-500 */ + --hm-success-soft: rgba(132, 204, 22, 0.14); + --hm-error: #EF4444; /* red-500 */ + --hm-error-soft: rgba(239, 68, 68, 0.12); + --hm-warn: #F59E0B; /* amber-500 */ + --hm-warn-soft: rgba(245, 158, 11, 0.12); + --hm-info: #0EA5E9; /* sky-500 */ + --hm-info-soft: rgba(14, 165, 233, 0.12); + + --hm-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3); + --hm-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), + 0 8px 24px rgba(0, 0, 0, 0.4); + --hm-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), + 0 24px 60px rgba(0, 0, 0, 0.6); + --hm-glow-gold: 0 0 0 1px var(--hm-accent-ring), + 0 12px 40px rgba(234, 179, 8, 0.22); +} + +/* ========================================================================== + * 1 · Page shell — editorial breathing room + * ========================================================================== + */ +[data-engine="hermes"].page { + padding: 40px 48px 64px; + max-width: 1280px; + margin: 0 auto; + font-family: var(--hm-font-sans); + color: var(--hm-text-primary); + background: var(--hm-surface-0); + position: relative; + font-feature-settings: 'ss01', 'cv11'; + font-size: 14px; + line-height: 1.55; + letter-spacing: -0.005em; +} + +/* ========================================================================== + * 2 · Hero — editorial big serif title + * ========================================================================== + */ +[data-engine="hermes"] .hm-hero { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 32px; + padding: 32px 0 28px; + margin-bottom: 32px; + border-bottom: 1px solid var(--hm-border); + position: relative; +} + +/* Very subtle gold shimmer behind the title */ +[data-engine="hermes"] .hm-hero::before { + content: ''; + position: absolute; + top: -40px; + left: -80px; + width: 400px; + height: 280px; + background: radial-gradient( + ellipse at top left, + var(--hm-accent-soft) 0%, + transparent 60% + ); + pointer-events: none; + z-index: 0; + opacity: 0; + transition: opacity var(--hm-dur-slow) var(--hm-ease); +} +[data-engine="hermes"] .hm-hero[data-state="running"]::before { opacity: 1; } + +[data-engine="hermes"] .hm-hero-title, +[data-engine="hermes"] .hm-hero-actions { + position: relative; + z-index: 1; +} + +[data-engine="hermes"] .hm-hero-title { + flex: 1; + min-width: 0; +} + +[data-engine="hermes"] .hm-hero-eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 13px; + font-weight: 400; + color: var(--hm-accent); + margin-bottom: 14px; + letter-spacing: 0.02em; + text-transform: none; +} + +[data-engine="hermes"] .hm-hero-eyebrow::after { + content: ''; + width: 24px; + height: 1px; + background: var(--hm-accent); + opacity: 0.4; + margin-left: 4px; +} + +[data-engine="hermes"] .hm-hero-h1 { + font-family: var(--hm-font-serif); + font-size: 44px; + font-weight: 500; + line-height: 1.05; + letter-spacing: -0.02em; + color: var(--hm-text-primary); + margin: 0 0 10px 0; + font-feature-settings: 'liga', 'dlig', 'kern'; +} + +[data-engine="hermes"] .hm-hero-sub { + font-family: var(--hm-font-mono); + font-size: 12px; + color: var(--hm-text-tertiary); + letter-spacing: 0.02em; +} + +[data-engine="hermes"] .hm-hero-actions { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +/* Live dot — pulsing gold when running, warm red when stopped */ +[data-engine="hermes"] .hm-dot { + width: 7px; + height: 7px; + border-radius: 50%; + display: inline-block; + position: relative; + flex-shrink: 0; +} +[data-engine="hermes"] .hm-dot.hm-dot--run { + background: var(--hm-accent); + box-shadow: 0 0 0 3px var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-dot.hm-dot--run::after { + content: ''; + position: absolute; + inset: -3px; + border-radius: 50%; + background: var(--hm-accent); + opacity: 0.3; + animation: hm-pulse 2.4s var(--hm-ease-serif) infinite; +} +[data-engine="hermes"] .hm-dot.hm-dot--stop { + background: var(--hm-error); + box-shadow: 0 0 0 3px var(--hm-error-soft); +} +[data-engine="hermes"] .hm-dot.hm-dot--idle { + background: var(--hm-text-muted); + box-shadow: 0 0 0 3px rgba(168, 162, 158, 0.15); +} + +@keyframes hm-pulse { + 0% { transform: scale(1); opacity: 0.5; } + 70% { transform: scale(3); opacity: 0; } + 100% { transform: scale(3); opacity: 0; } +} + +@media (prefers-reduced-motion: reduce) { + [data-engine="hermes"] .hm-dot::after { animation: none; } +} + +/* ========================================================================== + * 3 · KPI grid — editorial data cards + * ========================================================================== + */ +[data-engine="hermes"] .hm-kpi-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + /* Removed the gap+background "bleed" trick — it caused empty grid + cells (when card count ≠ columns × rows) to render as visible + placeholder rectangles. Instead, draw hairline dividers with + per-card inset box-shadows; empty cells stay blank. */ + gap: 0; + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); + margin-bottom: 40px; + overflow: hidden; +} + +[data-engine="hermes"] .hm-kpi { + position: relative; + padding: 22px 24px 20px; + background: var(--hm-surface-1); + /* Hairline dividers using inset shadow so they only draw on cells + that actually contain a card, never on empty grid slots. */ + box-shadow: + inset -1px 0 0 var(--hm-border), + inset 0 -1px 0 var(--hm-border); + transition: background var(--hm-dur-normal) var(--hm-ease); + overflow: hidden; +} + +[data-engine="hermes"] .hm-kpi:hover { + background: var(--hm-surface-2); +} + +[data-engine="hermes"] .hm-kpi.hm-kpi--link { + cursor: pointer; + border: none; + font: inherit; + text-align: left; + color: inherit; + width: 100%; +} +[data-engine="hermes"] .hm-kpi.hm-kpi--link::after { + content: '→'; + position: absolute; + top: 24px; + right: 24px; + color: var(--hm-text-muted); + font-size: 14px; + transition: transform var(--hm-dur-normal) var(--hm-ease), + color var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .hm-kpi.hm-kpi--link:hover::after { + transform: translateX(4px); + color: var(--hm-accent); +} + +/* Tone = tiny thin underline under the label, not a bar */ +[data-engine="hermes"] .hm-kpi-label { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 12px; + font-weight: 400; + color: var(--hm-text-tertiary); + margin-bottom: 14px; + text-transform: none; + letter-spacing: 0.01em; +} + +[data-engine="hermes"] .hm-kpi[data-tone="success"] .hm-kpi-label { color: var(--hm-success); } +[data-engine="hermes"] .hm-kpi[data-tone="error"] .hm-kpi-label { color: var(--hm-error); } +[data-engine="hermes"] .hm-kpi[data-tone="warn"] .hm-kpi-label { color: var(--hm-warn); } +[data-engine="hermes"] .hm-kpi[data-tone="info"] .hm-kpi-label { color: var(--hm-info); } +[data-engine="hermes"] .hm-kpi[data-tone="accent"] .hm-kpi-label { color: var(--hm-accent); } + +[data-engine="hermes"] .hm-kpi-label .hm-kpi-icon, +[data-engine="hermes"] .hm-kpi-label svg { + width: 12px; + height: 12px; + opacity: 0.65; +} + +[data-engine="hermes"] .hm-kpi-value { + font-family: var(--hm-font-serif); + font-size: 26px; + font-weight: 500; + line-height: 1.1; + color: var(--hm-text-primary); + letter-spacing: -0.015em; + display: flex; + align-items: baseline; + gap: 8px; + flex-wrap: wrap; + word-break: break-word; +} + +[data-engine="hermes"] .hm-kpi-value .hm-kpi-unit { + font-family: var(--hm-font-mono); + font-size: 11px; + font-weight: 400; + color: var(--hm-text-muted); + letter-spacing: 0.02em; +} + +[data-engine="hermes"] .hm-kpi-foot { + margin-top: 10px; + font-family: var(--hm-font-mono); + font-size: 11px; + color: var(--hm-text-muted); + display: flex; + align-items: center; + gap: 8px; + letter-spacing: 0.02em; + text-transform: lowercase; +} + +[data-engine="hermes"] .hm-kpi-foot .hm-kpi-delta { + color: var(--hm-success); + font-weight: 500; +} +[data-engine="hermes"] .hm-kpi-foot .hm-kpi-delta--down { + color: var(--hm-error); +} + +[data-engine="hermes"] .hm-native-dashboard-hint { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + margin: -8px 2px 20px; + color: var(--hm-text-muted); + font-family: var(--hm-font-mono); + font-size: 11px; +} +[data-engine="hermes"] .hm-native-dashboard-link { + border: 0; + background: transparent; + color: var(--hm-text-secondary); + font: inherit; + cursor: pointer; + padding: 0; + text-decoration: underline; + text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); + text-underline-offset: 3px; +} +[data-engine="hermes"] .hm-native-dashboard-link:hover { + color: var(--hm-accent); +} + +/* ========================================================================== + * 4 · Panel — clean section container + * ========================================================================== + */ +[data-engine="hermes"] .hm-panel { + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); + margin-bottom: 24px; + overflow: hidden; + /* Soft paper-lift elevation on cream page — gives cards presence + without breaking the whisper-thin editorial aesthetic. */ + box-shadow: + 0 1px 2px rgba(28, 25, 23, 0.03), + 0 2px 6px rgba(28, 25, 23, 0.035); + transition: border-color var(--hm-dur-normal) var(--hm-ease), + box-shadow var(--hm-dur-normal) var(--hm-ease); +} +[data-theme="dark"] [data-engine="hermes"] .hm-panel { + /* In dark mode the warm-black surfaces already read as elevated; drop + the drop-shadow so we don't muddy the depth. */ + box-shadow: none; +} + +[data-engine="hermes"] .hm-panel-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 20px 28px 18px; + border-bottom: 1px solid var(--hm-border-subtle); +} + +[data-engine="hermes"] .hm-panel-header.hm-panel-header--toggle { + cursor: pointer; + transition: background var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .hm-panel-header.hm-panel-header--toggle:hover { + background: var(--hm-surface-2); +} + +[data-engine="hermes"] .hm-panel-title { + font-family: var(--hm-font-serif); + font-size: 17px; + font-weight: 500; + letter-spacing: -0.01em; + color: var(--hm-text-primary); + display: flex; + align-items: center; + gap: 10px; + text-transform: none; +} + +/* editorial italic style instead of uppercase ops */ +[data-engine="hermes"] .hm-panel-title::before { + content: ''; + font-family: var(--hm-font-serif); + font-style: italic; + color: var(--hm-accent); +} + +[data-engine="hermes"] .hm-panel-title .hm-panel-title-icon { + width: 15px; + height: 15px; + color: var(--hm-accent); +} + +[data-engine="hermes"] .hm-panel-title .hm-panel-title-count { + padding: 2px 9px; + background: var(--hm-accent-soft); + border-radius: 999px; + font-family: var(--hm-font-mono); + font-size: 10.5px; + font-weight: 500; + color: var(--hm-accent); + letter-spacing: 0.02em; + font-style: normal; + margin-left: 4px; +} + +[data-engine="hermes"] .hm-panel-actions { + display: flex; + align-items: center; + gap: 10px; +} + +[data-engine="hermes"] .hm-panel-body { + padding: 24px 28px 26px; +} +[data-engine="hermes"] .hm-panel-body--tight { + padding: 16px 24px 18px; +} +[data-engine="hermes"] .hm-panel-body--none { + padding: 0; +} + +[data-engine="hermes"] .hm-panel-chevron { + width: 14px; + height: 14px; + color: var(--hm-text-tertiary); + transition: transform var(--hm-dur-normal) var(--hm-ease); +} +[data-engine="hermes"] .hm-panel-header.is-open .hm-panel-chevron { + transform: rotate(180deg); +} + +/* ========================================================================== + * 5 · Buttons — editorial restraint + * ========================================================================== + */ +[data-engine="hermes"] .hm-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 7px; + padding: 9px 18px; + height: 38px; + border-radius: var(--hm-radius-sm); + border: 1px solid var(--hm-border-strong); + background: transparent; + color: var(--hm-text-primary); + font-family: var(--hm-font-sans); + font-size: 13px; + font-weight: 500; + letter-spacing: 0.005em; + cursor: pointer; + transition: all var(--hm-dur-fast) var(--hm-ease); + white-space: nowrap; + user-select: none; +} +[data-engine="hermes"] .hm-btn:hover:not(:disabled) { + border-color: var(--hm-text-primary); + background: var(--hm-surface-2); +} +[data-engine="hermes"] .hm-btn:active:not(:disabled) { opacity: 0.85; } +[data-engine="hermes"] .hm-btn:disabled { opacity: 0.4; cursor: not-allowed; } +[data-engine="hermes"] .hm-btn:focus-visible { + outline: none; + box-shadow: 0 0 0 3px var(--hm-accent-ring); + border-color: var(--hm-accent); +} + +[data-engine="hermes"] .hm-btn--sm { + height: 30px; + padding: 4px 12px; + font-size: 12px; +} + +/* Primary = gold fill (the hero CTA) */ +[data-engine="hermes"] .hm-btn--primary { + background: var(--hm-text-primary); + color: var(--hm-text-inverse); + border-color: var(--hm-text-primary); + font-weight: 500; +} +[data-engine="hermes"] .hm-btn--primary:hover:not(:disabled) { + background: var(--hm-surface-2); + color: var(--hm-text-primary); + border-color: var(--hm-text-primary); +} +[data-theme="dark"] [data-engine="hermes"] .hm-btn--primary { + background: var(--hm-text-primary); + color: var(--hm-text-inverse); +} +[data-theme="dark"] [data-engine="hermes"] .hm-btn--primary:hover:not(:disabled) { + background: var(--hm-surface-3); + color: var(--hm-text-primary); +} + +/* CTA = the main action, gold */ +[data-engine="hermes"] .hm-btn--cta { + background: var(--hm-accent); + color: #1C1917; + border-color: var(--hm-accent); + font-family: var(--hm-font-serif); + font-weight: 500; + font-size: 13px; + letter-spacing: 0.005em; + padding: 9px 22px; +} +[data-engine="hermes"] .hm-btn--cta:hover:not(:disabled) { + background: var(--hm-accent-hover); + border-color: var(--hm-accent-hover); + box-shadow: var(--hm-glow-gold); +} +[data-theme="dark"] [data-engine="hermes"] .hm-btn--cta { + color: #0C0A09; +} + +[data-engine="hermes"] .hm-btn--danger { + color: var(--hm-error); + border-color: transparent; + background: var(--hm-error-soft); +} +[data-engine="hermes"] .hm-btn--danger:hover:not(:disabled) { + background: var(--hm-error); + color: var(--hm-text-inverse); + border-color: var(--hm-error); +} + +[data-engine="hermes"] .hm-btn--ghost { + background: transparent; + border-color: transparent; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-btn--ghost:hover:not(:disabled) { + color: var(--hm-text-primary); + background: var(--hm-surface-2); + border-color: var(--hm-border); +} + +[data-engine="hermes"] .hm-btn--icon { + width: 34px; + height: 34px; + padding: 0; + background: transparent; + border: 1px solid transparent; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-btn--icon:hover:not(:disabled) { + color: var(--hm-accent); + border-color: transparent; + background: var(--hm-accent-soft); +} + +/* ========================================================================== + * 6 · Pills — minimal tag selectors + * ========================================================================== + */ +[data-engine="hermes"] .hm-pills { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +[data-engine="hermes"] .hm-pill { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 5px 14px; + background: transparent; + border: 1px solid var(--hm-border); + border-radius: 999px; + font-family: var(--hm-font-sans); + font-size: 12px; + font-weight: 500; + color: var(--hm-text-secondary); + cursor: pointer; + transition: all var(--hm-dur-fast) var(--hm-ease); + user-select: none; + white-space: nowrap; + letter-spacing: 0.01em; +} +[data-engine="hermes"] .hm-pill:hover { + border-color: var(--hm-text-secondary); + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-pill.is-active { + background: var(--hm-text-primary); + border-color: var(--hm-text-primary); + color: var(--hm-text-inverse); + font-weight: 500; +} +[data-engine="hermes"] .hm-pill.is-active::before { + content: ''; + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--hm-accent); + box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.25); +} + +/* ========================================================================== + * 7 · Form controls — understated, print-inspired + * ========================================================================== + */ +[data-engine="hermes"] .hm-field { + display: flex; + flex-direction: column; + gap: 8px; +} + +[data-engine="hermes"] .hm-field-label { + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 12px; + font-weight: 400; + color: var(--hm-text-tertiary); + letter-spacing: 0.01em; + text-transform: none; + display: inline-flex; + align-items: center; + gap: 6px; +} + +[data-engine="hermes"] .hm-input { + font-family: var(--hm-font-mono); + font-size: 13px; + line-height: 1.5; + padding: 10px 14px; + height: 40px; + border: 1px solid var(--hm-border); + background: var(--hm-surface-0); + color: var(--hm-text-primary); + border-radius: var(--hm-radius-sm); + transition: border-color var(--hm-dur-fast) var(--hm-ease), + box-shadow var(--hm-dur-fast) var(--hm-ease), + background var(--hm-dur-fast) var(--hm-ease); + width: 100%; + outline: none; +} +[data-engine="hermes"] .hm-input:focus { + border-color: var(--hm-accent); + box-shadow: 0 0 0 3px var(--hm-accent-ring); + background: var(--hm-surface-1); +} +[data-engine="hermes"] .hm-input::placeholder { + color: var(--hm-text-muted); + opacity: 0.7; +} + +[data-engine="hermes"] .hm-field-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 16px; +} + +/* ========================================================================== + * 8 · Code & terminal blocks + * ========================================================================== + */ +[data-engine="hermes"] .hm-code { + display: inline-block; + padding: 2px 8px; + background: var(--hm-surface-2); + border: 1px solid var(--hm-border-subtle); + border-radius: 3px; + font-family: var(--hm-font-mono); + font-size: 11.5px; + color: var(--hm-text-primary); + letter-spacing: 0; +} + +[data-engine="hermes"] .hm-term { + font-family: var(--hm-font-mono); + font-size: 12px; + line-height: 1.65; + padding: 18px 20px; + background: #1C1917; + color: #E7E5E4; + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + overflow-x: auto; +} +[data-engine="hermes"] .hm-term .hm-muted { + color: #A8A29E; +} + +/* ========================================================================== + * 9 · Table + * ========================================================================== + */ +[data-engine="hermes"] .hm-table { + width: 100%; + border-collapse: collapse; + font-size: 13px; +} +[data-engine="hermes"] .hm-table thead th { + text-align: left; + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 12px; + font-weight: 400; + letter-spacing: 0.01em; + text-transform: none; + color: var(--hm-text-tertiary); + padding: 14px 24px; + border-bottom: 1px solid var(--hm-border); + background: var(--hm-surface-0); +} +[data-engine="hermes"] .hm-table tbody td { + padding: 15px 24px; + border-bottom: 1px solid var(--hm-border-subtle); + color: var(--hm-text-secondary); + vertical-align: top; +} +[data-engine="hermes"] .hm-table tbody tr { + transition: background var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .hm-table tbody tr:hover { + background: var(--hm-surface-2); +} +[data-engine="hermes"] .hm-table tbody tr:last-child td { + border-bottom: none; +} + +/* ========================================================================== + * 10 · Utilities + * ========================================================================== + */ +[data-engine="hermes"] .hm-hr { + height: 1px; + background: var(--hm-border); + margin: 24px 0; + border: none; +} + +[data-engine="hermes"] .hm-badge { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 2px 9px; + border-radius: 999px; + font-family: var(--hm-font-mono); + font-size: 10.5px; + font-weight: 500; + letter-spacing: 0.02em; + text-transform: lowercase; + background: var(--hm-surface-2); + color: var(--hm-text-secondary); + border: 1px solid var(--hm-border); +} +[data-engine="hermes"] .hm-badge--success { + color: var(--hm-success); + background: var(--hm-success-soft); + border-color: transparent; +} +[data-engine="hermes"] .hm-badge--error { + color: var(--hm-error); + background: var(--hm-error-soft); + border-color: transparent; +} +[data-engine="hermes"] .hm-badge--warn { + color: var(--hm-warn); + background: var(--hm-warn-soft); + border-color: transparent; +} +[data-engine="hermes"] .hm-badge--accent { + color: var(--hm-accent); + background: var(--hm-accent-soft); + border-color: transparent; +} + +[data-engine="hermes"] .hm-muted { + color: var(--hm-text-muted); + font-size: 11.5px; + font-family: var(--hm-font-mono); + letter-spacing: 0.01em; +} + +[data-engine="hermes"] .hm-stack { + display: flex; + gap: 10px; + align-items: center; + flex-wrap: wrap; +} +[data-engine="hermes"] .hm-stack--v { + flex-direction: column; + align-items: stretch; +} +[data-engine="hermes"] .hm-spacer { flex: 1; } + +/* Skeleton loader */ +[data-engine="hermes"] .hm-skel { + background: linear-gradient( + 90deg, + var(--hm-surface-2) 0%, + var(--hm-surface-3) 50%, + var(--hm-surface-2) 100% + ); + background-size: 200% 100%; + border-radius: 3px; + animation: hm-skel 1.8s ease-in-out infinite; +} +@keyframes hm-skel { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +/* ========================================================================== + * 11 · Dropdown + * ========================================================================== + */ +[data-engine="hermes"] .hm-dropdown { + position: absolute; + top: calc(100% + 6px); + left: 0; + right: 0; + max-height: 260px; + overflow-y: auto; + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + box-shadow: var(--hm-shadow-lg); + z-index: 50; + font-family: var(--hm-font-mono); + padding: 4px; +} + +[data-engine="hermes"] .hm-dropdown-item { + padding: 8px 12px; + font-size: 12px; + color: var(--hm-text-secondary); + cursor: pointer; + border-radius: 3px; + transition: background var(--hm-dur-fast) var(--hm-ease), + color var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .hm-dropdown-item:hover { + background: var(--hm-accent-soft); + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-dropdown-item.is-selected { + background: var(--hm-accent-soft); + color: var(--hm-accent); + font-weight: 500; +} + +/* Custom scrollbar */ +[data-engine="hermes"] ::-webkit-scrollbar { width: 10px; height: 10px; } +[data-engine="hermes"] ::-webkit-scrollbar-track { background: transparent; } +[data-engine="hermes"] ::-webkit-scrollbar-thumb { + background: var(--hm-border-strong); + border-radius: 999px; + border: 3px solid var(--hm-surface-0); +} +[data-engine="hermes"] ::-webkit-scrollbar-thumb:hover { + background: var(--hm-text-tertiary); +} + +/* ========================================================================== + * 12 · Page shell — editorial gutter for pages that still use .page + * (dashboard / cron / setup / env-editor / services / config / channels). + * Custom hermes-*-page shells (memory/logs/skills/chat/usage) set their + * own padding and opt out. + * ========================================================================== + */ +/* Same-element form (no space) because `.page` shares the host div with + `data-engine`. The descendant form silently misses every Hermes page + that uses the shared shell. */ +[data-engine="hermes"].page { + /* Generous 40/48 gutter matches the custom editorial shells so switching + between dashboard / cron / services / memory doesn't feel like hopping + between two different products. */ + padding: 40px 48px 56px; + max-width: 1280px; +} +@media (max-width: 960px) { + [data-engine="hermes"].page { + padding: 28px 24px 40px; + } +} +@media (max-width: 480px) { + [data-engine="hermes"].page { + padding: 20px 16px 32px; + } +} + +[data-engine="hermes"] .page-header h1 { + font-family: var(--hm-font-serif); + font-size: 32px; + font-weight: 500; + letter-spacing: -0.02em; + color: var(--hm-text-primary); + margin: 0; +} +[data-engine="hermes"] .page-header { + padding-bottom: 20px; + margin-bottom: 24px; + border-bottom: 1px solid var(--hm-border); +} + +/* Re-style .card on non-refreshed Hermes pages for consistency */ +[data-engine="hermes"] .card { + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); + box-shadow: none; +} +[data-engine="hermes"] .card-body { padding: 22px 26px; } + +/* ========================================================================== + * 13 · Global sidebar + content when Hermes engine is active + * ========================================================================== + * Applied via `body[data-active-engine="hermes"]` — OpenClaw unaffected. + * We define the same tokens here so global components (sidebar etc.) can + * consume them through standard var() resolution without knowing Hermes. + */ +body[data-active-engine="hermes"] { + /* Warm off-white page */ + background: #FAFAF9; +} + +body[data-active-engine="hermes"] #content { + background: #FAFAF9; +} + +/* ---- Sidebar shell ---- */ +body[data-active-engine="hermes"] #sidebar { + background: #FFFFFF; + border-right: 1px solid rgba(28, 25, 23, 0.08); + font-family: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, + 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif; +} + +/* Header (logo + title + collapse) */ +body[data-active-engine="hermes"] .sidebar-header { + border-bottom: 1px solid rgba(28, 25, 23, 0.06); + padding: 20px 18px; + height: auto; +} +body[data-active-engine="hermes"] .sidebar-title { + font-family: 'Playfair Display', 'Cormorant Garamond', 'Iowan Old Style', + 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; + font-size: 19px; + font-weight: 500; + letter-spacing: -0.01em; + color: #1C1917; +} +body[data-active-engine="hermes"] .sidebar-collapse-btn, +body[data-active-engine="hermes"] .sidebar-close-btn { + color: #A8A29E; + background: transparent; + border: none; + font-size: 14px; + cursor: pointer; + transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1); +} +body[data-active-engine="hermes"] .sidebar-collapse-btn:hover, +body[data-active-engine="hermes"] .sidebar-close-btn:hover { + color: #CA8A04; +} + +/* Engine switcher — gold accent */ +body[data-active-engine="hermes"] .engine-switcher { + border-bottom: 1px solid rgba(28, 25, 23, 0.06); + padding: 14px 14px 16px; +} +body[data-active-engine="hermes"] .engine-switcher-label { + font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; + font-style: italic; + font-size: 11px; + font-weight: 400; + letter-spacing: 0.01em; + text-transform: none; + color: #78716C; + padding: 0 4px 8px; +} +body[data-active-engine="hermes"] .engine-current { + padding: 10px 12px; + border: 1px solid rgba(202, 138, 4, 0.25); + border-radius: 6px; + background: rgba(202, 138, 4, 0.05); + color: #1C1917; + font-size: 13px; + font-weight: 500; + transition: border-color 180ms, background 180ms; +} +body[data-active-engine="hermes"] .engine-current:hover { + border-color: #CA8A04; + background: rgba(202, 138, 4, 0.10); +} +body[data-active-engine="hermes"] .engine-icon { color: #CA8A04; } +body[data-active-engine="hermes"] .engine-dropdown { + background: #FFFFFF; + border: 1px solid rgba(28, 25, 23, 0.08); + box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 24px rgba(28, 25, 23, 0.08); + border-radius: 8px; + padding: 4px; +} +body[data-active-engine="hermes"] .engine-option { + padding: 8px 10px; + border-radius: 4px; + color: #44403C; +} +body[data-active-engine="hermes"] .engine-option:hover { + background: rgba(202, 138, 4, 0.08); + color: #1C1917; +} +body[data-active-engine="hermes"] .engine-option.active, +body[data-active-engine="hermes"] .engine-active-check { + color: #CA8A04; + font-weight: 500; +} + +/* Section titles — italic serif */ +body[data-active-engine="hermes"] .nav-section-title { + font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; + font-style: italic; + font-size: 11px; + font-weight: 400; + letter-spacing: 0.01em; + text-transform: none; + color: #A8A29E; + padding: 14px 14px 6px; +} + +/* Nav items — minimal with gold active indicator */ +body[data-active-engine="hermes"] .sidebar-nav { + padding: 4px 10px; +} +body[data-active-engine="hermes"] .nav-item { + padding: 9px 14px; + border-radius: 6px; + color: #44403C; + font-size: 13px; + font-weight: 500; + letter-spacing: 0.005em; + transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), + color 180ms cubic-bezier(0.22, 1, 0.36, 1); + position: relative; +} +body[data-active-engine="hermes"] .nav-item:hover { + background: rgba(28, 25, 23, 0.04); + color: #1C1917; +} +body[data-active-engine="hermes"] .nav-item.active { + background: rgba(202, 138, 4, 0.08); + color: #CA8A04; + font-weight: 500; +} +/* Thin gold accent line on active item (left edge) */ +body[data-active-engine="hermes"] .nav-item.active::before { + content: ''; + position: absolute; + left: 5px; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 16px; + background: #CA8A04; + border-radius: 2px; +} +body[data-active-engine="hermes"] .nav-item svg { + opacity: 0.6; + width: 16px; + height: 16px; +} +body[data-active-engine="hermes"] .nav-item.active svg { + opacity: 1; + color: #CA8A04; +} + +/* Footer (theme/lang/meta) */ +body[data-active-engine="hermes"] .sidebar-footer { + border-top: 1px solid rgba(28, 25, 23, 0.06); + padding: 8px 10px; +} +body[data-active-engine="hermes"] #btn-theme-toggle, +body[data-active-engine="hermes"] .lang-trigger { + padding: 8px 14px; + border-radius: 6px; + color: #78716C; + font-size: 12.5px; + transition: background 180ms, color 180ms; +} +body[data-active-engine="hermes"] #btn-theme-toggle:hover, +body[data-active-engine="hermes"] .lang-trigger:hover { + background: rgba(28, 25, 23, 0.04); + color: #1C1917; +} +body[data-active-engine="hermes"] .lang-dropdown { + background: #FFFFFF; + border: 1px solid rgba(28, 25, 23, 0.08); + box-shadow: 0 -4px 16px rgba(28, 25, 23, 0.08); + border-radius: 8px; +} +body[data-active-engine="hermes"] .lang-option { + padding: 8px 12px; + border-radius: 4px; + color: #44403C; + font-size: 12.5px; +} +body[data-active-engine="hermes"] .lang-option:hover { + background: rgba(202, 138, 4, 0.06); +} +body[data-active-engine="hermes"] .lang-option.active, +body[data-active-engine="hermes"] .lang-option-check { + color: #CA8A04; + font-weight: 500; +} +body[data-active-engine="hermes"] .lang-option-code { + font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; + font-size: 10.5px; + color: #A8A29E; +} + +/* Footer meta strip (version + link) */ +body[data-active-engine="hermes"] .sidebar-meta { + font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; + font-size: 10.5px; + padding: 8px 14px 4px; + color: #A8A29E; +} +body[data-active-engine="hermes"] .sidebar-link { + color: #A8A29E; + transition: color 180ms; +} +body[data-active-engine="hermes"] .sidebar-link:hover { + color: #CA8A04; +} +body[data-active-engine="hermes"] .sidebar-version { color: #A8A29E; } + +/* ---- Dark mode variants ---- */ +[data-theme="dark"] body[data-active-engine="hermes"], +body[data-active-engine="hermes"][data-theme="dark"] { + background: #0C0A09; +} +[data-theme="dark"] body[data-active-engine="hermes"] #content { + background: #0C0A09; +} +[data-theme="dark"] body[data-active-engine="hermes"] #sidebar { + background: #131210; + border-right-color: rgba(250, 250, 249, 0.06); +} +[data-theme="dark"] body[data-active-engine="hermes"] .sidebar-header { + border-bottom-color: rgba(250, 250, 249, 0.06); +} +[data-theme="dark"] body[data-active-engine="hermes"] .sidebar-title { + color: #FAFAF9; +} +[data-theme="dark"] body[data-active-engine="hermes"] .engine-switcher { + border-bottom-color: rgba(250, 250, 249, 0.06); +} +[data-theme="dark"] body[data-active-engine="hermes"] .engine-switcher-label, +[data-theme="dark"] body[data-active-engine="hermes"] .nav-section-title { + color: #78716C; +} +[data-theme="dark"] body[data-active-engine="hermes"] .engine-current { + border-color: rgba(234, 179, 8, 0.35); + background: rgba(234, 179, 8, 0.08); + color: #FAFAF9; +} +[data-theme="dark"] body[data-active-engine="hermes"] .engine-current:hover { + border-color: #EAB308; + background: rgba(234, 179, 8, 0.14); +} +[data-theme="dark"] body[data-active-engine="hermes"] .engine-icon, +[data-theme="dark"] body[data-active-engine="hermes"] .engine-option.active, +[data-theme="dark"] body[data-active-engine="hermes"] .engine-active-check { + color: #EAB308; +} +[data-theme="dark"] body[data-active-engine="hermes"] .engine-dropdown { + background: #1C1917; + border-color: rgba(250, 250, 249, 0.08); + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); +} +[data-theme="dark"] body[data-active-engine="hermes"] .engine-option { + color: #D6D3D1; +} +[data-theme="dark"] body[data-active-engine="hermes"] .engine-option:hover { + background: rgba(234, 179, 8, 0.10); + color: #FAFAF9; +} +[data-theme="dark"] body[data-active-engine="hermes"] .nav-item { + color: #D6D3D1; +} +[data-theme="dark"] body[data-active-engine="hermes"] .nav-item:hover { + background: rgba(250, 250, 249, 0.05); + color: #FAFAF9; +} +[data-theme="dark"] body[data-active-engine="hermes"] .nav-item.active { + background: rgba(234, 179, 8, 0.12); + color: #EAB308; +} +[data-theme="dark"] body[data-active-engine="hermes"] .nav-item.active::before { + background: #EAB308; +} +[data-theme="dark"] body[data-active-engine="hermes"] .nav-item.active svg { + color: #EAB308; +} +[data-theme="dark"] body[data-active-engine="hermes"] .sidebar-footer { + border-top-color: rgba(250, 250, 249, 0.06); +} +[data-theme="dark"] body[data-active-engine="hermes"] #btn-theme-toggle, +[data-theme="dark"] body[data-active-engine="hermes"] .lang-trigger { + color: #A8A29E; +} +[data-theme="dark"] body[data-active-engine="hermes"] #btn-theme-toggle:hover, +[data-theme="dark"] body[data-active-engine="hermes"] .lang-trigger:hover { + background: rgba(250, 250, 249, 0.05); + color: #FAFAF9; +} +[data-theme="dark"] body[data-active-engine="hermes"] .lang-dropdown { + background: #1C1917; + border-color: rgba(250, 250, 249, 0.08); +} +[data-theme="dark"] body[data-active-engine="hermes"] .lang-option { + color: #D6D3D1; +} +[data-theme="dark"] body[data-active-engine="hermes"] .lang-option:hover { + background: rgba(234, 179, 8, 0.08); +} +[data-theme="dark"] body[data-active-engine="hermes"] .lang-option.active, +[data-theme="dark"] body[data-active-engine="hermes"] .lang-option-check { + color: #EAB308; +} +[data-theme="dark"] body[data-active-engine="hermes"] .sidebar-meta, +[data-theme="dark"] body[data-active-engine="hermes"] .sidebar-link, +[data-theme="dark"] body[data-active-engine="hermes"] .sidebar-version { + color: #78716C; +} +[data-theme="dark"] body[data-active-engine="hermes"] .sidebar-link:hover { + color: #EAB308; +} + +/* ========================================================================== + * 14 · Legacy .hermes-* class overrides (setup/logs/skills/memory pages) + * ========================================================================== + * Existing pages (setup.js, chat.js, logs.js, etc.) use `.hermes-*` class + * names defined in src/style/pages.css. Since the JS bind()s them by class + * name we can't just delete them — instead we re-skin them while still + * scoped to [data-engine="hermes"]. + */ + +/* ---- Phase indicator (setup wizard steps) ---- */ +[data-engine="hermes"] .hermes-phases { + display: flex; + align-items: center; + margin: 4px 0 36px; + padding: 20px 24px; + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); +} +[data-engine="hermes"] .hermes-phase { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + flex-shrink: 0; +} +[data-engine="hermes"] .hermes-phase-dot { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--hm-surface-0); + border: 1px solid var(--hm-border-strong); + font-family: var(--hm-font-serif); + font-size: 14px; + font-weight: 500; + color: var(--hm-text-tertiary); + transition: all var(--hm-dur-normal) var(--hm-ease); +} +[data-engine="hermes"] .hermes-phase.active .hermes-phase-dot { + background: var(--hm-accent); + color: #1C1917; + border-color: var(--hm-accent); + box-shadow: var(--hm-glow-gold); +} +[data-engine="hermes"] .hermes-phase.done .hermes-phase-dot { + background: transparent; + border-color: var(--hm-accent); + color: var(--hm-accent); +} +[data-engine="hermes"] .hermes-phase.done .hermes-phase-dot svg { + stroke: var(--hm-accent); +} +[data-engine="hermes"] .hermes-phase-label { + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 12px; + color: var(--hm-text-tertiary); + white-space: nowrap; +} +[data-engine="hermes"] .hermes-phase.active .hermes-phase-label { + color: var(--hm-accent); + font-weight: 500; + font-style: normal; +} +[data-engine="hermes"] .hermes-phase.done .hermes-phase-label { + color: var(--hm-text-secondary); + font-style: normal; +} +[data-engine="hermes"] .hermes-phase-line { + flex: 1; + height: 1px; + background: var(--hm-border-strong); + margin: 0 6px; + opacity: 0.5; +} +[data-engine="hermes"] .hermes-phase.done + .hermes-phase-line, +[data-engine="hermes"] .hermes-phase-line:has(+ .hermes-phase.active), +[data-engine="hermes"] .hermes-phase.done ~ .hermes-phase-line { + background: var(--hm-accent); + opacity: 1; +} + +/* ---- Detection rows ---- */ +[data-engine="hermes"] .hermes-detect-list { + display: flex; + flex-direction: column; + gap: 4px; +} +[data-engine="hermes"] .hermes-detect-row { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + border: 1px solid var(--hm-border-subtle); + border-radius: var(--hm-radius-sm); + background: var(--hm-surface-0); + font-family: var(--hm-font-mono); + font-size: 12.5px; + color: var(--hm-text-secondary); + transition: background var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .hermes-detect-row.ok { + color: var(--hm-text-primary); + border-color: var(--hm-success-soft); + background: var(--hm-success-soft); +} +[data-engine="hermes"] .hermes-detect-row.warn { + color: var(--hm-warn); + border-color: var(--hm-warn-soft); + background: var(--hm-warn-soft); +} +[data-engine="hermes"] .hermes-detect-row svg { + flex-shrink: 0; +} + +/* ---- Form fields ---- */ +[data-engine="hermes"] .hermes-form { + display: flex; + flex-direction: column; + gap: 18px; +} +[data-engine="hermes"] .hermes-field { + display: flex; + flex-direction: column; + gap: 8px; +} +[data-engine="hermes"] .hermes-field > span { + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 13px; + font-weight: 400; + color: var(--hm-text-tertiary); + letter-spacing: 0; +} +[data-engine="hermes"] .hermes-field .input, +[data-engine="hermes"] input.input, +[data-engine="hermes"] textarea.input, +[data-engine="hermes"] select.input { + font-family: var(--hm-font-mono); + font-size: 13px; + padding: 10px 14px; + height: 40px; + border: 1px solid var(--hm-border); + background: var(--hm-surface-0); + color: var(--hm-text-primary); + border-radius: var(--hm-radius-sm); + transition: border-color var(--hm-dur-fast) var(--hm-ease), + box-shadow var(--hm-dur-fast) var(--hm-ease); + outline: none; + width: 100%; + box-sizing: border-box; +} +[data-engine="hermes"] .hermes-field .input:focus, +[data-engine="hermes"] input.input:focus, +[data-engine="hermes"] textarea.input:focus, +[data-engine="hermes"] select.input:focus { + border-color: var(--hm-accent); + box-shadow: 0 0 0 3px var(--hm-accent-ring); + background: var(--hm-surface-1); +} +[data-engine="hermes"] .hermes-field .input::placeholder, +[data-engine="hermes"] input.input::placeholder { + color: var(--hm-text-muted); +} + +/* ---- Progress bar ---- */ +[data-engine="hermes"] .hermes-progress { + height: 4px; + background: var(--hm-surface-3); + border-radius: 2px; + overflow: hidden; +} +[data-engine="hermes"] .hermes-progress-bar { + height: 100%; + background: linear-gradient(90deg, var(--hm-accent), #EAB308); + border-radius: 2px; + transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); +} +[data-engine="hermes"] .hermes-progress-bar.error { + background: linear-gradient(90deg, var(--hm-error), #DC2626); +} +[data-engine="hermes"] .hermes-install-status { + padding: 14px 16px; + background: var(--hm-surface-0); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + margin-bottom: 14px; +} +[data-engine="hermes"] .hermes-progress-text { + font-family: var(--hm-font-mono) !important; + letter-spacing: 0.02em; +} + +/* ---- Log panel ---- */ +[data-engine="hermes"] .hermes-log-panel { + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + overflow: hidden; + background: #1C1917; +} +[data-engine="hermes"] .hermes-log-content { + max-height: 260px; + min-height: 80px; + overflow-y: auto; + padding: 14px 16px; + font-family: var(--hm-font-mono); + font-size: 11.5px; + line-height: 1.65; + color: #D6D3D1; + background: #1C1917; +} +[data-engine="hermes"] .hermes-log-content div { + white-space: pre-wrap; + word-break: break-all; +} +[data-engine="hermes"] .hermes-log-content:empty::before { + content: '// waiting for stream…'; + color: #78716C; + font-style: italic; +} + +/* ---- Install-info checklist ---- */ +[data-engine="hermes"] .hermes-install-info { + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px 4px; +} + +/* ---- Mode switch buttons ---- */ +[data-engine="hermes"] .hermes-mode-btn.btn { + display: inline-flex; + align-items: center; + gap: 7px; + padding: 8px 16px; + height: 36px; + border-radius: var(--hm-radius-sm); + border: 1px solid var(--hm-border-strong); + background: transparent; + color: var(--hm-text-primary); + font-family: var(--hm-font-sans); + font-size: 12.5px; + font-weight: 500; + cursor: pointer; + transition: all var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .hermes-mode-btn.btn-primary { + background: var(--hm-text-primary); + color: var(--hm-text-inverse); + border-color: var(--hm-text-primary); +} +[data-theme="dark"] [data-engine="hermes"] .hermes-mode-btn.btn-primary { + background: var(--hm-accent); + color: #0C0A09; + border-color: var(--hm-accent); +} +[data-engine="hermes"] .hermes-mode-btn.btn-secondary:hover { + border-color: var(--hm-text-primary); + background: var(--hm-surface-2); +} + +/* ---- Preset provider buttons (in configure phase) ---- */ +[data-engine="hermes"] .hermes-preset-btn { + display: inline-flex; + align-items: center; + padding: 5px 14px; + background: transparent; + border: 1px solid var(--hm-border); + border-radius: 999px; + font-family: var(--hm-font-sans); + font-size: 12px; + font-weight: 500; + color: var(--hm-text-secondary); + cursor: pointer; + transition: all var(--hm-dur-fast) var(--hm-ease); + white-space: nowrap; +} +[data-engine="hermes"] .hermes-preset-btn:hover { + border-color: var(--hm-text-secondary); + color: var(--hm-text-primary); +} + +/* ---- Config form / fetch models button ---- */ +[data-engine="hermes"] .hermes-fetch-models, +[data-engine="hermes"] .hermes-config-save, +[data-engine="hermes"] .hermes-config-skip, +[data-engine="hermes"] .hermes-gw-start, +[data-engine="hermes"] .hermes-gw-next, +[data-engine="hermes"] .hermes-go-dashboard, +[data-engine="hermes"] .hermes-install-btn, +[data-engine="hermes"] .hermes-custom-connect { + font-family: var(--hm-font-sans) !important; +} + +/* ---- Model dropdown ---- */ +[data-engine="hermes"] .hermes-model-dropdown { + position: absolute; + top: calc(100% + 4px); + left: 0; + right: 0; + max-height: 240px; + overflow-y: auto; + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + box-shadow: var(--hm-shadow-lg); + z-index: 50; + padding: 4px; +} +[data-engine="hermes"] .hermes-model-option { + padding: 8px 12px; + font-family: var(--hm-font-mono); + font-size: 12px; + color: var(--hm-text-secondary); + cursor: pointer; + border-radius: 3px; + transition: all var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .hermes-model-option:hover { + background: var(--hm-accent-soft); + color: var(--hm-text-primary); +} + +/* ---- Global .btn overrides (since setup uses generic .btn classes) ---- */ +[data-engine="hermes"] .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 7px; + padding: 9px 18px; + height: 38px; + border-radius: var(--hm-radius-sm); + border: 1px solid var(--hm-border-strong); + background: transparent; + color: var(--hm-text-primary); + font-family: var(--hm-font-sans); + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all var(--hm-dur-fast) var(--hm-ease); + white-space: nowrap; +} +[data-engine="hermes"] .btn:hover:not(:disabled) { + border-color: var(--hm-text-primary); + background: var(--hm-surface-2); +} +[data-engine="hermes"] .btn:disabled { + opacity: 0.45; + cursor: not-allowed; +} +[data-engine="hermes"] .btn-primary { + background: var(--hm-accent); + color: #1C1917; + border-color: var(--hm-accent); + font-family: var(--hm-font-serif); + font-weight: 500; +} +[data-engine="hermes"] .btn-primary:hover:not(:disabled) { + background: var(--hm-accent-hover); + border-color: var(--hm-accent-hover); + color: #1C1917; + box-shadow: var(--hm-glow-gold); +} +[data-theme="dark"] [data-engine="hermes"] .btn-primary { + color: #0C0A09; +} +[data-theme="dark"] [data-engine="hermes"] .btn-primary:hover:not(:disabled) { + color: #0C0A09; +} +/* .btn-secondary intentionally inherits default .btn appearance */ + +[data-engine="hermes"] .btn-sm { + height: 30px; + padding: 4px 12px; + font-size: 12px; +} +[data-engine="hermes"] .btn-text { + background: transparent; + border: none; + color: var(--hm-text-tertiary); + font-size: 13px; + padding: 6px 10px; + transition: color var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .btn-text:hover { + color: var(--hm-accent); + background: transparent; +} +[data-engine="hermes"] .btn-icon { + width: 34px; + height: 34px; + padding: 0; + background: transparent; + border: 1px solid transparent; + color: var(--hm-text-tertiary); + border-radius: var(--hm-radius-sm); + cursor: pointer; + transition: all var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .btn-icon:hover { + color: var(--hm-accent); + background: var(--hm-accent-soft); +} + +/* ---- Generic .input override (used by setup phase forms) ---- */ +[data-engine="hermes"] .input { + font-family: var(--hm-font-mono); + font-size: 13px; + padding: 10px 14px; + height: 40px; + border: 1px solid var(--hm-border); + background: var(--hm-surface-0); + color: var(--hm-text-primary); + border-radius: var(--hm-radius-sm); + transition: border-color var(--hm-dur-fast) var(--hm-ease), + box-shadow var(--hm-dur-fast) var(--hm-ease); + outline: none; + width: 100%; + box-sizing: border-box; +} +[data-engine="hermes"] .input:focus { + border-color: var(--hm-accent); + box-shadow: 0 0 0 3px var(--hm-accent-ring); + background: var(--hm-surface-1); +} + +/* ---- Chat page (chat.js uses .hermes-chat-*) ---- */ +[data-engine="hermes"] .hermes-chat-header { + background: var(--hm-surface-1); + border-bottom: 1px solid var(--hm-border); + padding: 18px 28px; +} +[data-engine="hermes"] .hermes-chat-messages { + background: var(--hm-surface-0); + padding: 28px 36px; +} +[data-engine="hermes"] .hermes-chat-bubble { + max-width: 75%; + padding: 12px 18px; + border-radius: 14px; + font-family: var(--hm-font-sans); + font-size: 13.5px; + line-height: 1.6; +} +[data-engine="hermes"] .hermes-chat-bubble.user { + background: var(--hm-text-primary); + color: var(--hm-text-inverse); + border-bottom-right-radius: 4px; + box-shadow: none; +} +[data-theme="dark"] [data-engine="hermes"] .hermes-chat-bubble.user { + background: var(--hm-accent); + color: #0C0A09; +} +[data-engine="hermes"] .hermes-chat-bubble.assistant { + background: var(--hm-surface-1); + color: var(--hm-text-primary); + border: 1px solid var(--hm-border); + border-bottom-left-radius: 4px; + box-shadow: none; +} +[data-engine="hermes"] .hermes-chat-input-area { + background: var(--hm-surface-1); + border-top: 1px solid var(--hm-border); + padding: 14px 28px 22px; +} +[data-engine="hermes"] .hermes-chat-empty::before { + background: var(--hm-accent-soft); +} + +/* ---- Logs page ---- */ +[data-engine="hermes"] .hm-logs-header { + background: var(--hm-surface-1); + padding: 14px 24px; + border-bottom: 1px solid var(--hm-border); +} +[data-engine="hermes"] .hm-log-entry { + font-family: var(--hm-font-mono); +} + +/* ---- Skills page containers ---- */ +[data-engine="hermes"] .hm-skills-header { + background: var(--hm-surface-1); + padding: 14px 24px; + border-bottom: 1px solid var(--hm-border); +} + +/* ========================================================================== + * 15 · Memory page (three-section editorial layout) + * ========================================================================== + */ +/* NB: page shell uses same-element selector (no space) because logs.js etc. + put both `data-engine` and `.hermes-X-page` on the SAME div, not on a + parent/child pair. The descendant-combinator form silently failed and + left every page shell padding-less, hugging the viewport edges. */ +[data-engine="hermes"].hermes-memory-page { + padding: 40px 48px 64px; + max-width: 1280px; + margin: 0 auto; + font-family: var(--hm-font-sans); + color: var(--hm-text-primary); + background: var(--hm-surface-0); +} + +[data-engine="hermes"] .hm-mem-stats { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: var(--hm-font-mono); + font-size: 11px; + color: var(--hm-text-tertiary); + letter-spacing: 0.01em; + white-space: nowrap; +} +[data-engine="hermes"] .hm-mem-sep { opacity: 0.5; } + +[data-engine="hermes"] .hm-mem-desc { + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 13px; + color: var(--hm-text-tertiary); + line-height: 1.65; + margin-bottom: 14px; +} + +/* Memory edit button — promote the ghost CTA to a visible outline chip + so users recognise it as an action, not inline meta-text. */ +[data-engine="hermes"] .hm-mem-edit { + border-color: var(--hm-border-strong, rgba(28, 25, 23, 0.18)); + color: var(--hm-text-secondary); + background: var(--hm-surface-1); +} +[data-engine="hermes"] .hm-mem-edit:hover:not(:disabled) { + color: var(--hm-accent); + border-color: var(--hm-accent); + background: var(--hm-accent-soft); +} +[data-theme="dark"] [data-engine="hermes"] .hm-mem-edit { + background: transparent; + border-color: rgba(250, 250, 249, 0.14); +} + +/* Memory textarea — use tag+class selector to outrank `.hm-input`'s + `height: 40px` (same class-count as .hm-mem-editor, so the bare-class form + was a coin-flip). Make it markedly tall so users get a real writing + surface, and let it fill any extra card height through min-height: 50vh. */ +[data-engine="hermes"] textarea.hm-mem-editor { + display: block; + width: 100%; + height: auto; + min-height: clamp(320px, 50vh, 560px); + max-height: 70vh; + resize: vertical; + box-sizing: border-box; + line-height: 1.65; + padding: 16px 18px; + font-size: 13.5px; + font-family: var(--hm-font-mono); + background: var(--hm-surface-0); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + color: var(--hm-text-primary); + transition: border-color var(--hm-dur-fast) var(--hm-ease), + box-shadow var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] textarea.hm-mem-editor:focus { + outline: none; + border-color: var(--hm-accent); + box-shadow: 0 0 0 3px var(--hm-accent-ring); + background: var(--hm-surface-1); +} +[data-engine="hermes"] textarea.hm-mem-editor::placeholder { + color: var(--hm-text-muted); + opacity: 0.6; + font-style: italic; +} + +[data-engine="hermes"].hm-mem-modal-overlay .modal { + width: min(920px, calc(100vw - 32px)); +} + +[data-engine="hermes"] .hm-mem-modal-wrap { + display: flex; + flex-direction: column; + gap: 12px; +} + +[data-engine="hermes"] textarea.hm-mem-modal-editor { + min-height: min(62vh, 620px); + max-height: 70vh; +} + +[data-engine="hermes"] .hm-mem-modal-foot { + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; +} + +[data-engine="hermes"] .hm-mem-empty { + padding: 18px 0 4px; + display: flex; + flex-direction: column; + gap: 4px; +} +[data-engine="hermes"] .hm-mem-empty-title { + font-family: var(--hm-font-serif); + font-style: italic; + color: var(--hm-text-tertiary); + font-size: 14px; +} + +[data-engine="hermes"] .hm-mem-rendered { + font-family: var(--hm-font-sans); + font-size: 14px; + line-height: 1.75; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-mem-rendered h2, +[data-engine="hermes"] .hm-mem-rendered h3, +[data-engine="hermes"] .hm-mem-rendered h4 { + font-family: var(--hm-font-serif); + font-weight: 500; + letter-spacing: -0.01em; +} +[data-engine="hermes"] .hm-mem-rendered h2 { font-size: 22px; margin: 18px 0 8px; } +[data-engine="hermes"] .hm-mem-rendered h3 { font-size: 18px; margin: 14px 0 6px; } +[data-engine="hermes"] .hm-mem-rendered h4 { + font-size: 15px; + font-style: italic; + margin: 12px 0 4px; + color: var(--hm-accent); +} +[data-engine="hermes"] .hm-mem-rendered pre { + background: var(--hm-surface-2); + border: 1px solid var(--hm-border-subtle); + border-radius: var(--hm-radius-sm); + padding: 12px 14px; + margin: 8px 0; + overflow-x: auto; + font-family: var(--hm-font-mono); + font-size: 12px; + line-height: 1.6; +} +[data-engine="hermes"] .hm-mem-rendered code { + font-family: var(--hm-font-mono); + font-size: 12.5px; + background: var(--hm-surface-2); + padding: 1px 6px; + border-radius: 3px; +} +[data-engine="hermes"] .hm-mem-rendered pre code { + background: transparent; + padding: 0; +} +[data-engine="hermes"] .hm-mem-rendered a { + color: var(--hm-accent); + text-decoration: underline; + text-underline-offset: 2px; +} + +/* ========================================================================== + * 16 · Logs page (editorial layout with sidebar + live entries) + * ========================================================================== + */ +[data-engine="hermes"].hermes-logs-page { + padding: 40px 48px 48px; + max-width: none; + height: 100vh; + display: flex; + flex-direction: column; + background: var(--hm-surface-0); + font-family: var(--hm-font-sans); + color: var(--hm-text-primary); + box-sizing: border-box; +} +[data-engine="hermes"].hermes-logs-page .hm-hero { + margin-bottom: 24px; + flex-shrink: 0; +} + +[data-engine="hermes"] .hm-logs-layout { + display: grid; + grid-template-columns: 260px 1fr; + gap: 18px; + flex: 1; + min-height: 0; +} + +[data-engine="hermes"] .hm-logs-sidebar { + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); + overflow: hidden; + display: flex; + flex-direction: column; + box-shadow: + 0 1px 2px rgba(28, 25, 23, 0.03), + 0 2px 6px rgba(28, 25, 23, 0.035); +} +[data-theme="dark"] [data-engine="hermes"] .hm-logs-sidebar { box-shadow: none; } +[data-engine="hermes"] .hm-logs-sidebar-title { + padding: 14px 18px 12px; + border-bottom: 1px solid var(--hm-border-subtle); + background: var(--hm-surface-0); +} + +[data-engine="hermes"] .hm-logs-file-list { + overflow-y: auto; + padding: 6px; + flex: 1; +} + +[data-engine="hermes"] .hm-logs-file-item { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 9px 12px; + background: transparent; + border: 1px solid transparent; + border-radius: var(--hm-radius-sm); + color: var(--hm-text-secondary); + cursor: pointer; + font-family: var(--hm-font-mono); + font-size: 12px; + text-align: left; + transition: all var(--hm-dur-fast) var(--hm-ease); +} +[data-engine="hermes"] .hm-logs-file-item:hover { + background: var(--hm-surface-2); + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-logs-file-item.is-active { + background: var(--hm-accent-soft); + color: var(--hm-accent); + font-weight: 500; +} +[data-engine="hermes"] .hm-logs-file-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + min-width: 0; +} +[data-engine="hermes"] .hm-logs-file-size { + flex-shrink: 0; + font-size: 10.5px; + color: var(--hm-text-muted); + margin-left: 8px; +} + +[data-engine="hermes"] .hm-logs-main { + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); + overflow: hidden; + display: flex; + flex-direction: column; + min-width: 0; + box-shadow: + 0 1px 2px rgba(28, 25, 23, 0.03), + 0 2px 6px rgba(28, 25, 23, 0.035); +} + +[data-engine="hermes"] .hm-logs-toolbar { + display: flex; + gap: 12px; + align-items: flex-end; + padding: 14px 18px 12px; + border-bottom: 1px solid var(--hm-border-subtle); + background: var(--hm-surface-0); + flex-wrap: wrap; + flex-shrink: 0; +} +[data-engine="hermes"] .hm-logs-toolbar-item { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 110px; +} +[data-engine="hermes"] .hm-logs-toolbar-item--grow { + flex: 1; + min-width: 200px; +} +[data-engine="hermes"] .hm-logs-toolbar-actions { + flex-direction: row; + align-items: flex-end; + justify-content: flex-end; + min-width: 0; +} + +[data-engine="hermes"] .hm-logs-count { + padding: 8px 18px; + border-bottom: 1px solid var(--hm-border-subtle); + font-size: 11px; + flex-shrink: 0; +} + +[data-engine="hermes"] .hm-logs-content { + flex: 1; + overflow-y: auto; + font-family: var(--hm-font-mono); + font-size: 12px; + line-height: 1.6; + padding: 6px 0; + background: var(--hm-surface-0); + min-height: 0; +} +[data-engine="hermes"] .hm-logs-loading, +[data-engine="hermes"] .hm-logs-empty-content { + padding: 40px 24px; + text-align: center; +} + +/* --- Log entry row --- */ +[data-engine="hermes"] .hm-log-entry { + display: flex; + align-items: baseline; + gap: 10px; + padding: 4px 20px; + border-left: 2px solid transparent; + transition: background var(--hm-dur-fast) var(--hm-ease); + min-width: 0; +} +[data-engine="hermes"] .hm-log-entry:hover { + background: var(--hm-surface-2); +} +[data-engine="hermes"] .hm-log-entry[data-tone="error"] { border-left-color: var(--hm-error); } +[data-engine="hermes"] .hm-log-entry[data-tone="warn"] { border-left-color: var(--hm-warn); } +[data-engine="hermes"] .hm-log-entry[data-tone="info"] { border-left-color: var(--hm-info); } +[data-engine="hermes"] .hm-log-entry[data-tone="debug"] { border-left-color: var(--hm-text-muted); } +[data-engine="hermes"] .hm-log-entry--raw { + padding-left: 22px; + color: var(--hm-text-tertiary); +} + +[data-engine="hermes"] .hm-log-time { + flex-shrink: 0; + color: var(--hm-text-muted); + font-variant-numeric: tabular-nums; + min-width: 64px; +} + +[data-engine="hermes"] .hm-log-level { + flex-shrink: 0; + display: inline-block; + min-width: 48px; + padding: 1px 6px; + border-radius: 3px; + font-weight: 600; + font-size: 10px; + letter-spacing: 0.04em; + text-transform: uppercase; + text-align: center; + background: var(--hm-surface-3); + color: var(--hm-text-secondary); +} +[data-engine="hermes"] .hm-log-level[data-tone="error"] { + background: var(--hm-error-soft); color: var(--hm-error); +} +[data-engine="hermes"] .hm-log-level[data-tone="warn"] { + background: var(--hm-warn-soft); color: var(--hm-warn); +} +[data-engine="hermes"] .hm-log-level[data-tone="info"] { + background: var(--hm-info-soft); color: var(--hm-info); +} +[data-engine="hermes"] .hm-log-level[data-tone="debug"] { + background: transparent; color: var(--hm-text-muted); +} + +[data-engine="hermes"] .hm-log-logger { + flex-shrink: 0; + color: var(--hm-text-tertiary); + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +[data-engine="hermes"] .hm-log-msg { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; + color: var(--hm-text-secondary); + flex: 1; +} +[data-engine="hermes"] .hm-log-entry[data-tone="error"] .hm-log-msg { color: var(--hm-error); } +[data-engine="hermes"] .hm-log-entry[data-tone="warn"] .hm-log-msg { color: var(--hm-warn); } + +/* --- Access log decoration --- */ +[data-engine="hermes"] .hm-log-access { + display: inline-flex; + align-items: baseline; + gap: 8px; + min-width: 0; + overflow: hidden; + flex: 1; +} +[data-engine="hermes"] .hm-log-method { + flex-shrink: 0; + font-weight: 600; + color: var(--hm-text-primary); + padding: 0 6px; + background: var(--hm-surface-2); + border-radius: 3px; + font-size: 11px; +} +[data-engine="hermes"] .hm-log-path { + color: var(--hm-accent); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + min-width: 0; +} +[data-engine="hermes"] .hm-log-status { + flex-shrink: 0; + font-weight: 600; + font-size: 11px; + padding: 0 6px; + border-radius: 3px; +} +[data-engine="hermes"] .hm-log-status--2xx { + color: var(--hm-success); background: var(--hm-success-soft); +} +[data-engine="hermes"] .hm-log-status--3xx { + color: var(--hm-warn); background: var(--hm-warn-soft); +} +[data-engine="hermes"] .hm-log-status--4xx, +[data-engine="hermes"] .hm-log-status--5xx { + color: var(--hm-error); background: var(--hm-error-soft); +} + +/* --- Search highlight mark --- */ +[data-engine="hermes"] mark.hm-log-hl { + background: var(--hm-accent-soft); + color: var(--hm-accent); + padding: 0 2px; + border-radius: 2px; +} + +/* Active tail button state */ +[data-engine="hermes"] .hm-logs-tail.is-active { + color: var(--hm-accent); + background: var(--hm-accent-soft); + border-color: transparent; +} + +/* ========================================================================== + * 17 · Cron / Jobs page + * ========================================================================== + */ +[data-engine="hermes"] .hm-cron-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +[data-engine="hermes"] .hm-cron-item { + margin-bottom: 0; + transition: border-color var(--hm-dur-fast) var(--hm-ease), + box-shadow var(--hm-dur-normal) var(--hm-ease); +} +[data-engine="hermes"] .hm-cron-item:hover { + border-color: var(--hm-border-strong); + box-shadow: var(--hm-shadow-md); +} +[data-engine="hermes"] .hm-cron-item[data-state="paused"] { opacity: 0.75; } +[data-engine="hermes"] .hm-cron-item[data-state="disabled"] { opacity: 0.55; } + +/* --- Card head (title + actions) --- */ +[data-engine="hermes"] .hm-cron-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 14px; + padding: 18px 22px 14px; + border-bottom: 1px solid var(--hm-border-subtle); +} +[data-engine="hermes"] .hm-cron-head-left { + flex: 1; + min-width: 0; +} +[data-engine="hermes"] .hm-cron-title-row { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 6px; + flex-wrap: wrap; +} +[data-engine="hermes"] .hm-cron-name { + font-family: var(--hm-font-serif); + font-size: 16px; + font-weight: 500; + color: var(--hm-text-primary); + letter-spacing: -0.01em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 360px; +} +[data-engine="hermes"] .hm-cron-prompt { + font-family: var(--hm-font-sans); + font-size: 12.5px; + color: var(--hm-text-tertiary); + line-height: 1.55; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +[data-engine="hermes"] .hm-cron-actions { + display: flex; + gap: 4px; + flex-shrink: 0; +} + +/* --- Meta grid --- */ +[data-engine="hermes"] .hm-cron-meta { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 14px 24px; + padding: 14px 22px 18px; +} +[data-engine="hermes"] .hm-cron-meta-item { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; +} +[data-engine="hermes"] .hm-cron-meta-label { + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 11px; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-cron-meta-value { + font-family: var(--hm-font-mono); + font-size: 12px; + color: var(--hm-text-primary); + display: inline-flex; + align-items: baseline; + gap: 6px; + flex-wrap: wrap; + min-width: 0; +} +[data-engine="hermes"] .hm-cron-rel { + color: var(--hm-text-muted); + font-size: 11px; +} +[data-engine="hermes"] .hm-cron-last-ok { + color: var(--hm-success); + font-weight: 500; +} +[data-engine="hermes"] .hm-cron-last-err { + color: var(--hm-error); + font-weight: 500; + cursor: help; +} + +[data-engine="hermes"] .hm-cron-schedule-desc { + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-cron-schedule-expr { + font-size: 11px; +} + +/* Skills tags row inside cron card */ +[data-engine="hermes"] .hm-cron-meta-item--skills { grid-column: 1 / -1; } +[data-engine="hermes"] .hm-cron-skill-tag { + display: inline-block; + padding: 2px 8px; + margin-right: 4px; + border: 1px solid var(--hm-border); + border-radius: 999px; + font-family: var(--hm-font-mono); + font-size: 10.5px; + color: var(--hm-text-secondary); + background: var(--hm-surface-2); +} + +/* --- Error row (last_error) --- */ +[data-engine="hermes"] .hm-cron-err { + border-top: 1px solid var(--hm-border-subtle); + padding: 12px 22px; + background: var(--hm-error-soft); + display: flex; + flex-direction: column; + gap: 4px; +} +[data-engine="hermes"] .hm-cron-err-label { + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 11px; + color: var(--hm-error); +} +[data-engine="hermes"] .hm-cron-err-msg { + font-family: var(--hm-font-mono); + font-size: 11.5px; + color: var(--hm-error); + background: transparent; + border: none; + padding: 0; + word-break: break-word; + white-space: pre-wrap; +} + +/* ========================================================================== + * 18 · Skills page (sidebar + detail + file browser) + * ========================================================================== + * + * Matches the memory/logs/cron editorial family: warm off-white surfaces, + * hairline borders, serif display + sans body + mono code. + */ + +/* ---- Pill variants reused elsewhere (status tags) ---- */ +[data-engine="hermes"] .hm-pill--ok { + color: var(--hm-success); + border-color: color-mix(in srgb, var(--hm-success) 35%, transparent); + background: color-mix(in srgb, var(--hm-success) 8%, transparent); +} +[data-engine="hermes"] .hm-pill--muted { + color: var(--hm-text-tertiary); + border-color: var(--hm-border); + background: var(--hm-surface-2); +} + +/* ---- Page shell ---- */ +[data-engine="hermes"].hermes-skills-page { + /* Bottom padding restored so the two-column card doesn't kiss the viewport + edge — matches the logs page gutter (40/48/48). */ + padding: 40px 48px 48px; + max-width: none; + height: 100vh; + display: flex; + flex-direction: column; + background: var(--hm-surface-0); + font-family: var(--hm-font-sans); + color: var(--hm-text-primary); + box-sizing: border-box; +} + +[data-engine="hermes"] .hm-skills-count-inline { + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono); + font-size: 11.5px; + letter-spacing: 0.01em; +} + +/* ---- Two-column layout ---- */ +[data-engine="hermes"] .hm-skills-layout { + flex: 1; + min-height: 0; + display: grid; + grid-template-columns: 320px 1fr; + gap: 0; + /* Full frame so the two-column skills workspace reads as one card on + the cream page, not as floating search + empty state. */ + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); + margin-top: 24px; + margin-bottom: 24px; + background: var(--hm-surface-1); + overflow: hidden; + box-shadow: + 0 1px 2px rgba(28, 25, 23, 0.03), + 0 2px 6px rgba(28, 25, 23, 0.035); +} +[data-theme="dark"] [data-engine="hermes"] .hm-skills-layout { box-shadow: none; } + +/* ---- Sidebar ---- */ +[data-engine="hermes"] .hm-skills-sidebar { + border-right: 1px solid var(--hm-border); + display: flex; + flex-direction: column; + min-height: 0; + overflow: hidden; + background: var(--hm-surface-1); +} + +[data-engine="hermes"] .hm-skills-sidebar-search { + position: relative; + padding: 14px 16px; + border-bottom: 1px solid var(--hm-border-subtle); + background: var(--hm-surface-1); + flex-shrink: 0; +} +[data-engine="hermes"] .hm-skills-search-icon { + position: absolute; + left: 26px; + top: 50%; + transform: translateY(-50%); + color: var(--hm-text-tertiary); + pointer-events: none; + display: inline-flex; +} +[data-engine="hermes"] .hm-skills-search-input { + width: 100%; + padding: 7px 10px 7px 30px; + background: var(--hm-surface-0); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + color: var(--hm-text-primary); + font-size: 13px; + font-family: var(--hm-font-sans); + transition: all 0.15s ease; + box-sizing: border-box; +} +[data-engine="hermes"] .hm-skills-search-input:focus { + outline: none; + border-color: var(--hm-accent); + box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.12); +} +[data-engine="hermes"] .hm-skills-search-input::placeholder { + color: var(--hm-text-tertiary); +} + +[data-engine="hermes"] .hm-skills-sidebar-scroll { + flex: 1; + overflow-y: auto; + padding: 6px 0 14px; +} +[data-engine="hermes"] .hm-skills-loading { + padding: 18px 18px; +} +[data-engine="hermes"] .hm-skills-empty { + padding: 42px 20px; + text-align: center; + color: var(--hm-text-tertiary); + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 13.5px; +} + +/* ---- Categories ---- */ +[data-engine="hermes"] .hm-skill-category { + margin: 4px 0 8px; +} + +[data-engine="hermes"] .hm-skill-cat-header { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + padding: 8px 16px; + border: none; + background: transparent; + color: var(--hm-text-secondary); + font-family: var(--hm-font-sans); + font-size: 11.5px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + cursor: pointer; + transition: color 0.15s ease; +} +[data-engine="hermes"] .hm-skill-cat-header:hover { + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-skill-cat-arrow { + color: var(--hm-text-tertiary); + transition: transform 0.18s ease; + display: inline-flex; + width: 14px; + justify-content: center; +} +[data-engine="hermes"] .hm-skill-cat-header.is-collapsed .hm-skill-cat-arrow { + transform: rotate(-90deg); +} +[data-engine="hermes"] .hm-skill-cat-name { + flex: 1; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +[data-engine="hermes"] .hm-skill-cat-count { + font-family: var(--hm-font-mono); + font-size: 10px; + font-weight: 500; + padding: 1px 7px; + border-radius: 999px; + background: var(--hm-surface-2); + color: var(--hm-text-tertiary); + border: 1px solid var(--hm-border-subtle); + letter-spacing: 0; + text-transform: none; +} + +[data-engine="hermes"] .hm-skill-cat-desc { + padding: 0 16px 6px 38px; + color: var(--hm-text-tertiary); + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 11.5px; + line-height: 1.55; +} + +[data-engine="hermes"] .hm-skill-cat-items { + padding: 2px 0 4px; +} + +/* ---- Skill item button ---- */ +[data-engine="hermes"] .hm-skill-item { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 7px 16px 7px 32px; + border: none; + background: transparent; + color: var(--hm-text-primary); + text-align: left; + cursor: pointer; + transition: background 0.12s ease, color 0.12s ease; + border-left: 2px solid transparent; + box-sizing: border-box; +} +[data-engine="hermes"] .hm-skill-item:hover { + background: var(--hm-surface-2); +} +[data-engine="hermes"] .hm-skill-item.is-active { + background: var(--hm-accent-soft); + border-left-color: var(--hm-accent); +} +[data-engine="hermes"] .hm-skill-item.is-disabled .hm-skill-name, +[data-engine="hermes"] .hm-skill-item.is-disabled .hm-skill-desc { + color: var(--hm-text-tertiary); + text-decoration: line-through; + text-decoration-color: color-mix(in srgb, var(--hm-text-tertiary) 40%, transparent); + text-decoration-thickness: 1px; +} + +[data-engine="hermes"] .hm-skill-info { + flex: 1; + min-width: 0; +} +[data-engine="hermes"] .hm-skill-name { + font-size: 13px; + line-height: 1.35; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-skill-desc { + font-size: 11px; + color: var(--hm-text-tertiary); + line-height: 1.4; + margin-top: 2px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; +} + +/* ---- Toggle switch ---- */ +[data-engine="hermes"] .hm-switch { + position: relative; + flex-shrink: 0; + width: 30px; + height: 16px; + cursor: pointer; + display: inline-block; +} +[data-engine="hermes"] .hm-switch-track { + position: absolute; + inset: 0; + background: var(--hm-border); + border-radius: 999px; + transition: background 0.18s ease; +} +[data-engine="hermes"] .hm-switch-thumb { + position: absolute; + top: 2px; + left: 2px; + width: 12px; + height: 12px; + background: var(--hm-surface-0); + border-radius: 50%; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + transition: transform 0.18s ease, background 0.18s ease; +} +[data-engine="hermes"] .hm-switch.is-on .hm-switch-track { + background: var(--hm-accent); +} +[data-engine="hermes"] .hm-switch.is-on .hm-switch-thumb { + transform: translateX(14px); + background: #FFFFFF; +} +[data-engine="hermes"] .hm-switch.is-busy { + opacity: 0.55; + cursor: progress; +} +[data-engine="hermes"] .hm-switch.is-busy .hm-switch-thumb { + animation: hm-switch-pulse 0.9s ease-in-out infinite; +} +@keyframes hm-switch-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } +} + +/* ---- Main detail pane ---- */ +[data-engine="hermes"] .hm-skills-main { + overflow-y: auto; + padding: 28px 36px 40px; + min-width: 0; + background: var(--hm-surface-0); +} + +[data-engine="hermes"] .hm-skills-detail-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + min-height: 320px; + gap: 10px; + color: var(--hm-text-tertiary); + text-align: center; +} +[data-engine="hermes"] .hm-skills-detail-empty-title { + font-family: var(--hm-font-serif); + font-size: 18px; + color: var(--hm-text-secondary); + letter-spacing: -0.005em; + margin-top: 14px; +} +[data-engine="hermes"] .hm-skills-detail-empty-sub { + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 13px; + color: var(--hm-text-tertiary); +} + +/* ---- Detail head ---- */ +[data-engine="hermes"] .hm-skills-detail-head { + padding-bottom: 16px; + margin-bottom: 18px; + border-bottom: 1px solid var(--hm-border); +} +[data-engine="hermes"] .hm-skills-detail-title { + display: flex; + align-items: baseline; + gap: 8px; + flex-wrap: wrap; + font-family: var(--hm-font-serif); + font-size: 22px; + letter-spacing: -0.01em; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-skills-title-cat { + color: var(--hm-text-tertiary); + font-size: 16px; +} +[data-engine="hermes"] .hm-skills-title-sep { + color: var(--hm-text-tertiary); + font-size: 16px; +} +[data-engine="hermes"] .hm-skills-title-name { + font-weight: 500; +} +[data-engine="hermes"] .hm-skills-status { + align-self: center; + margin-left: 4px; + font-family: var(--hm-font-mono); + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.08em; +} +[data-engine="hermes"] .hm-skills-detail-sub { + display: inline-flex; + align-items: center; + gap: 6px; + margin-top: 8px; + font-family: var(--hm-font-mono); + font-size: 11.5px; + color: var(--hm-text-tertiary); + letter-spacing: 0.01em; +} + +/* ---- Detail body / markdown ---- */ +[data-engine="hermes"] .hm-skills-detail-body { + padding-bottom: 20px; +} +[data-engine="hermes"] .hm-skills-markdown { + font-family: var(--hm-font-sans); + font-size: 14px; + line-height: 1.75; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-skills-markdown p { margin: 0 0 10px; } +[data-engine="hermes"] .hm-skills-markdown h2, +[data-engine="hermes"] .hm-skills-markdown h3, +[data-engine="hermes"] .hm-skills-markdown h4, +[data-engine="hermes"] .hm-skills-markdown h5 { + font-family: var(--hm-font-serif); + font-weight: 500; + letter-spacing: -0.01em; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-skills-markdown h2 { font-size: 20px; margin: 20px 0 8px; } +[data-engine="hermes"] .hm-skills-markdown h3 { font-size: 17px; margin: 16px 0 6px; } +[data-engine="hermes"] .hm-skills-markdown h4 { + font-size: 14.5px; + font-style: italic; + color: var(--hm-accent); + margin: 14px 0 4px; +} +[data-engine="hermes"] .hm-skills-markdown h5 { + font-size: 13px; + color: var(--hm-text-secondary); + margin: 12px 0 4px; +} +[data-engine="hermes"] .hm-skills-markdown ul { + margin: 4px 0 10px; + padding-left: 22px; +} +[data-engine="hermes"] .hm-skills-markdown li { + margin: 2px 0; + line-height: 1.7; +} +[data-engine="hermes"] .hm-skills-markdown pre { + background: var(--hm-surface-2); + border: 1px solid var(--hm-border-subtle); + border-radius: var(--hm-radius-sm); + padding: 12px 14px; + margin: 10px 0; + overflow-x: auto; + font-family: var(--hm-font-mono); + font-size: 12px; + line-height: 1.65; +} +[data-engine="hermes"] .hm-skills-markdown code { + font-family: var(--hm-font-mono); + font-size: 12.5px; + background: var(--hm-surface-2); + padding: 1px 6px; + border-radius: 3px; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-skills-markdown pre code { + background: transparent; + padding: 0; +} +[data-engine="hermes"] .hm-skills-markdown a { + color: var(--hm-accent); + text-decoration: underline; + text-underline-offset: 2px; +} +[data-engine="hermes"] .hm-skills-markdown strong { font-weight: 600; } +[data-engine="hermes"] .hm-skills-markdown em { font-style: italic; } + +/* ---- Attached files section ---- */ +[data-engine="hermes"] .hm-skills-files { + margin-top: 20px; + padding-top: 16px; + border-top: 1px solid var(--hm-border); +} +[data-engine="hermes"] .hm-skills-files-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 10px; +} +[data-engine="hermes"] .hm-skills-files-label { + font-family: var(--hm-font-sans); + font-size: 11px; + font-weight: 600; + color: var(--hm-text-secondary); + text-transform: uppercase; + letter-spacing: 0.08em; +} +[data-engine="hermes"] .hm-skills-files-count { + font-family: var(--hm-font-mono); + font-size: 10.5px; + color: var(--hm-text-tertiary); + padding: 0 7px; + border-radius: 999px; + background: var(--hm-surface-2); + border: 1px solid var(--hm-border-subtle); +} +[data-engine="hermes"] .hm-skills-files-list { + display: flex; + flex-wrap: wrap; + gap: 6px; +} +[data-engine="hermes"] .hm-skills-file-chip { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 5px 10px; + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + background: var(--hm-surface-1); + color: var(--hm-text-secondary); + font-family: var(--hm-font-mono); + font-size: 11.5px; + cursor: pointer; + transition: all 0.15s ease; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +[data-engine="hermes"] .hm-skills-file-chip span { + overflow: hidden; + text-overflow: ellipsis; +} +[data-engine="hermes"] .hm-skills-file-chip:hover { + border-color: var(--hm-accent); + color: var(--hm-accent); + background: var(--hm-surface-0); +} + +/* ---- Breadcrumb for file view ---- */ +[data-engine="hermes"] .hm-skills-detail-breadcrumb { + display: flex; + align-items: center; + gap: 10px; + padding-bottom: 14px; + margin-bottom: 14px; + border-bottom: 1px solid var(--hm-border); + flex-wrap: wrap; +} +[data-engine="hermes"] .hm-skills-back-btn { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 4px 10px; + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + background: var(--hm-surface-1); + color: var(--hm-text-secondary); + font-family: var(--hm-font-sans); + font-size: 12px; + cursor: pointer; + transition: all 0.15s ease; +} +[data-engine="hermes"] .hm-skills-back-btn:hover { + color: var(--hm-accent); + border-color: var(--hm-accent); +} +[data-engine="hermes"] .hm-skills-breadcrumb-sep { + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-skills-breadcrumb-path { + font-family: var(--hm-font-mono); + font-size: 11.5px; + color: var(--hm-text-tertiary); + word-break: break-all; +} + +/* Responsive: collapse sidebar on narrow viewports */ +@media (max-width: 960px) { + [data-engine="hermes"] .hm-skills-layout { + grid-template-columns: 260px 1fr; + } + [data-engine="hermes"].hermes-skills-page { + padding: 28px 24px 40px; + } + [data-engine="hermes"] .hm-skills-main { + padding: 22px 24px 36px; + } +} +@media (max-width: 720px) { + [data-engine="hermes"] .hm-skills-layout { + grid-template-columns: 1fr; + grid-template-rows: auto 1fr; + } + [data-engine="hermes"] .hm-skills-sidebar { + border-right: none; + border-bottom: 1px solid var(--hm-border); + max-height: 40vh; + } +} + +/* ========================================================================== + * 19 · Chat page (editorial luxury re-write) + * ========================================================================== + * + * Mirrors the official Hermes web UI's ChatPanel but styled with the warm + * off-white / serif-display / gold-accent system shared across dashboard, + * memory, skills, logs and cron. + */ + +/* ---- Page shell ---- */ +[data-engine="hermes"].hermes-chat-page { + height: 100vh; + width: 100%; + max-width: none; + display: flex; + flex-direction: column; + background: var(--hm-surface-0); + color: var(--hm-text-primary); + font-family: var(--hm-font-sans); + box-sizing: border-box; + overflow: hidden; +} + +/* Switched from grid (`280px 1fr`) to flex so collapsing the sidebar + releases its width back to the chat area. The grid version pinned the + first track at 280px regardless of the inner element's width:0 — the + sidebar shrank inside its track but the empty 280px slot stayed. */ +[data-engine="hermes"] .hm-chat-shell { + flex: 1; + width: 100%; + max-width: none; + min-height: 0; + display: flex; + position: relative; +} + +[data-engine="hermes"] .hm-chat-sidebar-backdrop { + display: none; +} + +/* ---- Sidebar ---- */ +[data-engine="hermes"] .hm-chat-sidebar { + width: 280px; + min-width: 0; + flex: 0 0 280px; + border-right: 1px solid var(--hm-border); + display: flex; + flex-direction: column; + min-height: 0; + background: var(--hm-surface-1); + overflow: hidden; + transition: width 0.22s ease, opacity 0.22s ease; +} +[data-engine="hermes"] .hm-chat-sidebar.is-collapsed { + width: 0; + flex-basis: 0; + border-right-color: transparent; + pointer-events: none; + opacity: 0; +} +[data-engine="hermes"] .hm-chat-shell.is-sidebar-collapsed .hm-chat-sidebar { + display: none; +} + +/* Main column — absorbs leftover horizontal space when sidebar collapses. */ +[data-engine="hermes"] .hm-chat-main { + flex: 1 1 0; + width: 0; + min-width: 0; + position: relative; + display: flex; + flex-direction: column; + min-height: 0; +} +[data-engine="hermes"] .hm-chat-shell.is-sidebar-collapsed .hm-chat-main { + width: 100%; + flex-basis: 100%; +} + +[data-engine="hermes"] .hm-chat-sidebar-profile { + position: relative; + padding: 12px 14px 4px; +} +[data-engine="hermes"] .hm-chat-profile-toggle { + width: 100%; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border: 1px solid var(--hm-border); + border-radius: 999px; + background: var(--hm-surface-0); + color: var(--hm-text-primary); + font-family: var(--hm-font-mono); + font-size: 11.5px; + letter-spacing: 0.02em; + cursor: pointer; + transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; +} +[data-engine="hermes"] .hm-chat-profile-toggle:hover:not(:disabled) { + color: var(--hm-accent); + border-color: var(--hm-accent); + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-chat-profile-toggle:disabled { + cursor: default; + opacity: 0.7; +} +[data-engine="hermes"] .hm-chat-profile-toggle.is-open { + border-color: var(--hm-accent); + color: var(--hm-accent); +} +[data-engine="hermes"] .hm-chat-profile-name { + flex: 1; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +[data-engine="hermes"] .hm-chat-profile-caret { + display: inline-flex; + transform: rotate(90deg); + opacity: 0.7; +} +[data-engine="hermes"] .hm-chat-profile-toggle.is-open .hm-chat-profile-caret { + transform: rotate(-90deg); +} +[data-engine="hermes"] .hm-chat-profile-menu { + position: absolute; + left: 14px; + right: 14px; + top: 100%; + margin-top: 4px; + z-index: 30; + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-sm); + box-shadow: var(--hm-shadow-md); + overflow: hidden; + display: flex; + flex-direction: column; + max-height: 320px; +} +[data-engine="hermes"] .hm-chat-profile-menu-head, +[data-engine="hermes"] .hm-chat-profile-menu-foot { + padding: 8px 14px; + font-family: var(--hm-font-mono); + font-size: 10px; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--hm-text-tertiary); + background: var(--hm-surface-0); + border-bottom: 1px solid var(--hm-border-subtle); +} +[data-engine="hermes"] .hm-chat-profile-menu-foot { + border-bottom: none; + border-top: 1px solid var(--hm-border-subtle); + text-transform: none; + letter-spacing: 0.01em; + font-size: 10.5px; +} +[data-engine="hermes"] .hm-chat-profile-item { + display: flex; + align-items: center; + gap: 8px; + padding: 9px 14px; + width: 100%; + text-align: left; + background: transparent; + border: none; + border-bottom: 1px solid var(--hm-border-subtle); + color: var(--hm-text-primary); + font-family: var(--hm-font-mono); + font-size: 11.5px; + cursor: pointer; + transition: background 0.12s ease, color 0.12s ease; +} +[data-engine="hermes"] .hm-chat-profile-item:last-of-type { + border-bottom: none; +} +[data-engine="hermes"] .hm-chat-profile-item:hover:not(:disabled) { + background: var(--hm-accent-soft); + color: var(--hm-accent); +} +[data-engine="hermes"] .hm-chat-profile-item.is-active { + color: var(--hm-accent); + background: color-mix(in srgb, var(--hm-accent) 6%, transparent); +} +[data-engine="hermes"] .hm-chat-profile-item:disabled { + cursor: default; + opacity: 0.6; +} +[data-engine="hermes"] .hm-chat-profile-item-name { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +[data-engine="hermes"] .hm-chat-profile-item-badge { + font-size: 9.5px; + padding: 1px 6px; + border-radius: 999px; + background: color-mix(in srgb, var(--hm-success) 16%, transparent); + color: var(--hm-success); +} +[data-engine="hermes"] .hm-chat-profile-item-active { + display: inline-flex; +} + +[data-engine="hermes"] .hm-chat-sidebar-head-actions { + display: inline-flex; + align-items: center; + gap: 6px; +} +[data-engine="hermes"] .hm-chat-select-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: 1px solid var(--hm-border); + border-radius: 50%; + background: var(--hm-surface-0); + color: var(--hm-text-secondary); + cursor: pointer; + transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; +} +[data-engine="hermes"] .hm-chat-select-toggle:hover { + color: var(--hm-accent); + border-color: var(--hm-accent); + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-chat-select-toggle.is-active { + color: var(--hm-accent); + border-color: var(--hm-accent); + background: var(--hm-accent-soft); +} + +[data-engine="hermes"] .hm-chat-bulkbar { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 14px 10px; + border-bottom: 1px solid var(--hm-border-subtle); + font-family: var(--hm-font-mono); + font-size: 11px; + color: var(--hm-text-secondary); +} +[data-engine="hermes"] .hm-chat-bulkbar-select-all { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 8px; + border: 1px solid var(--hm-border-subtle); + border-radius: 999px; + background: transparent; + color: var(--hm-text-secondary); + cursor: pointer; + font-family: inherit; + font-size: inherit; +} +[data-engine="hermes"] .hm-chat-bulkbar-select-all:hover { + color: var(--hm-accent); + border-color: var(--hm-accent); + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-chat-bulkbar-count { + flex: 1; + text-align: right; + letter-spacing: 0.02em; +} +[data-engine="hermes"] .hm-chat-bulkbar-delete { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 10px; + border: 1px solid color-mix(in srgb, var(--hm-error) 30%, transparent); + border-radius: 999px; + background: var(--hm-error-soft); + color: var(--hm-error); + cursor: pointer; + font-family: inherit; + font-size: inherit; +} +[data-engine="hermes"] .hm-chat-bulkbar-delete:disabled { + opacity: 0.5; + cursor: default; +} +[data-engine="hermes"] .hm-chat-bulkbar-delete:not(:disabled):hover { + background: color-mix(in srgb, var(--hm-error) 18%, transparent); +} + +[data-engine="hermes"] .hm-chat-session-check { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + margin-right: 6px; + border: none; + background: transparent; + color: var(--hm-text-tertiary); + cursor: pointer; + border-radius: 50%; + transition: color 0.15s ease, background 0.15s ease; +} +[data-engine="hermes"] .hm-chat-session-check:hover, +[data-engine="hermes"] .hm-chat-session-check.is-on { + color: var(--hm-accent); + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-chat-session-item.is-selected { + border-color: color-mix(in srgb, var(--hm-accent) 35%, transparent); + background: color-mix(in srgb, var(--hm-accent) 8%, transparent); +} +[data-engine="hermes"] .hm-chat-sidebar.is-select-mode .hm-chat-session-actions { + display: none; +} + +[data-engine="hermes"].hm-sessions-page { + display: flex; + flex-direction: column; + gap: 18px; +} +[data-engine="hermes"] .hm-sessions-hero { + display: flex; + justify-content: space-between; + gap: 18px; + padding: 22px; + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-lg); + background: + radial-gradient(circle at top left, color-mix(in srgb, var(--hm-accent) 15%, transparent), transparent 34%), + var(--hm-surface-1); + box-shadow: var(--hm-shadow-sm); +} +[data-engine="hermes"] .hm-sessions-eyebrow { + font-family: var(--hm-font-mono); + font-size: 10.5px; + letter-spacing: 0.16em; + color: var(--hm-accent); + margin-bottom: 8px; +} +[data-engine="hermes"] .hm-sessions-hero h1 { + margin: 0 0 8px; + font-size: clamp(24px, 3vw, 34px); + letter-spacing: -0.04em; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-sessions-hero p { + margin: 0; + max-width: 620px; + color: var(--hm-text-secondary); +} +[data-engine="hermes"] .hm-sessions-hero-actions { + display: flex; + align-items: flex-start; + gap: 8px; + flex-wrap: wrap; + justify-content: flex-end; +} +[data-engine="hermes"] .hm-sessions-btn, +[data-engine="hermes"] .hm-sessions-bulkbar button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 7px; + border: 1px solid var(--hm-border); + border-radius: 999px; + background: var(--hm-surface-0); + color: var(--hm-text-primary); + padding: 8px 13px; + font-size: 12px; + font-family: var(--hm-font-mono); + cursor: pointer; + transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease; +} +[data-engine="hermes"] .hm-sessions-btn:hover:not(:disabled), +[data-engine="hermes"] .hm-sessions-bulkbar button:hover:not(:disabled) { + color: var(--hm-accent); + border-color: var(--hm-accent); + background: var(--hm-accent-soft); + transform: translateY(-1px); +} +[data-engine="hermes"] .hm-sessions-btn:disabled, +[data-engine="hermes"] .hm-sessions-bulkbar button:disabled { + opacity: 0.5; + cursor: default; +} +[data-engine="hermes"] .hm-sessions-btn.is-danger, +[data-engine="hermes"] .hm-sessions-bulkbar button.is-danger { + color: var(--hm-error); + border-color: color-mix(in srgb, var(--hm-error) 32%, transparent); + background: var(--hm-error-soft); +} +[data-engine="hermes"] .hm-sessions-btn.is-ghost { + background: transparent; +} +[data-engine="hermes"] .hm-sessions-profile-select, +[data-engine="hermes"] .hm-sessions-toolbar select { + border: 1px solid var(--hm-border); + border-radius: 999px; + background: var(--hm-surface-0); + color: var(--hm-text-primary); + padding: 8px 12px; + font-family: var(--hm-font-mono); + font-size: 12px; + outline: none; +} +[data-engine="hermes"] .hm-sessions-profile-static { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border: 1px solid var(--hm-border); + border-radius: 999px; + color: var(--hm-text-secondary); + font-family: var(--hm-font-mono); + font-size: 12px; +} +[data-engine="hermes"] .hm-sessions-stats { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} +[data-engine="hermes"] .hm-sessions-stats > div, +[data-engine="hermes"] .hm-session-stat-grid > div { + padding: 14px; + border: 1px solid var(--hm-border-subtle); + border-radius: var(--hm-radius-sm); + background: var(--hm-surface-1); +} +[data-engine="hermes"] .hm-sessions-stats span, +[data-engine="hermes"] .hm-session-stat-grid span { + display: block; + margin-bottom: 7px; + color: var(--hm-text-tertiary); + font-size: 10.5px; + font-family: var(--hm-font-mono); + text-transform: uppercase; + letter-spacing: 0.08em; +} +[data-engine="hermes"] .hm-sessions-stats strong, +[data-engine="hermes"] .hm-session-stat-grid strong { + color: var(--hm-text-primary); + font-size: 20px; + word-break: break-word; +} +[data-engine="hermes"] .hm-sessions-shell { + display: grid; + grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); + gap: 16px; + min-height: 560px; +} +[data-engine="hermes"] .hm-sessions-list-panel, +[data-engine="hermes"] .hm-session-detail { + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-lg); + background: var(--hm-surface-1); + overflow: hidden; + min-height: 0; +} +[data-engine="hermes"] .hm-sessions-list-panel { + display: flex; + flex-direction: column; +} +[data-engine="hermes"] .hm-sessions-toolbar { + display: flex; + gap: 8px; + padding: 14px; + border-bottom: 1px solid var(--hm-border-subtle); +} +[data-engine="hermes"] .hm-sessions-search { + flex: 1; + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + border: 1px solid var(--hm-border); + border-radius: 999px; + background: var(--hm-surface-0); + padding: 0 11px; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-sessions-search input { + width: 100%; + min-width: 0; + border: none; + outline: none; + background: transparent; + color: var(--hm-text-primary); + padding: 9px 0; + font-size: 12px; +} +[data-engine="hermes"] .hm-sessions-bulkbar { + display: flex; + justify-content: space-between; + gap: 8px; + padding: 10px 14px; + border-bottom: 1px solid var(--hm-border-subtle); + background: color-mix(in srgb, var(--hm-surface-0) 70%, transparent); +} +[data-engine="hermes"] .hm-sessions-bulkbar button { + padding: 6px 10px; + font-size: 11px; +} +[data-engine="hermes"] .hm-sessions-list { + overflow: auto; + padding: 10px; +} +[data-engine="hermes"] .hm-session-row { + width: 100%; + display: grid; + grid-template-columns: 26px minmax(0, 1fr) auto; + gap: 10px; + align-items: center; + padding: 11px; + margin-bottom: 8px; + border: 1px solid transparent; + border-radius: var(--hm-radius-sm); + background: transparent; + color: var(--hm-text-primary); + text-align: left; + cursor: pointer; + transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; +} +[data-engine="hermes"] .hm-session-row:hover, +[data-engine="hermes"] .hm-session-row.is-active { + border-color: color-mix(in srgb, var(--hm-accent) 28%, transparent); + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-session-row.is-selected { + border-color: color-mix(in srgb, var(--hm-accent) 42%, transparent); + background: color-mix(in srgb, var(--hm-accent) 10%, transparent); +} +[data-engine="hermes"] .hm-session-row-check { + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--hm-accent); +} +[data-engine="hermes"] .hm-session-row-main { + min-width: 0; + display: flex; + flex-direction: column; + gap: 5px; +} +[data-engine="hermes"] .hm-session-row-title { + display: flex; + align-items: center; + gap: 6px; + font-weight: 650; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +[data-engine="hermes"] .hm-session-row-preview { + color: var(--hm-text-secondary); + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +[data-engine="hermes"] .hm-session-row-meta { + display: flex; + flex-wrap: wrap; + gap: 6px; +} +[data-engine="hermes"] .hm-session-row-meta span { + padding: 2px 6px; + border-radius: 999px; + background: var(--hm-surface-0); + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono); + font-size: 10px; +} +[data-engine="hermes"] .hm-session-row-time { + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono); + font-size: 10.5px; + white-space: nowrap; +} +[data-engine="hermes"] .hm-sessions-loading, +[data-engine="hermes"] .hm-sessions-empty, +[data-engine="hermes"] .hm-session-empty-messages { + padding: 28px 14px; + color: var(--hm-text-tertiary); + text-align: center; + font-family: var(--hm-font-mono); + font-size: 12px; +} +[data-engine="hermes"] .hm-session-detail { + display: flex; + flex-direction: column; +} +[data-engine="hermes"] .hm-session-detail.is-empty { + align-items: center; + justify-content: center; + gap: 12px; + text-align: center; + color: var(--hm-text-tertiary); + padding: 34px; +} +[data-engine="hermes"] .hm-session-detail.is-empty h3 { + margin: 0; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-session-detail.is-empty p { + margin: 0; + max-width: 380px; +} +[data-engine="hermes"] .hm-session-detail-head { + display: flex; + justify-content: space-between; + gap: 18px; + padding: 20px; + border-bottom: 1px solid var(--hm-border-subtle); +} +[data-engine="hermes"] .hm-session-detail-kicker { + margin-bottom: 8px; + color: var(--hm-accent); + font-family: var(--hm-font-mono); + font-size: 10.5px; + letter-spacing: 0.12em; + text-transform: uppercase; +} +[data-engine="hermes"] .hm-session-detail h2 { + margin: 0 0 8px; + color: var(--hm-text-primary); + font-size: 24px; + letter-spacing: -0.03em; +} +[data-engine="hermes"] .hm-session-detail-id { + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono); + font-size: 11px; + word-break: break-all; +} +[data-engine="hermes"] .hm-session-detail-actions { + display: flex; + gap: 8px; + flex-wrap: wrap; + align-content: flex-start; + justify-content: flex-end; +} +[data-engine="hermes"] .hm-session-stat-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 10px; + padding: 14px 20px; +} +[data-engine="hermes"] .hm-session-stat-grid strong { + font-size: 15px; +} +[data-engine="hermes"] .hm-session-message-list { + flex: 1; + overflow: auto; + padding: 18px 20px 22px; +} +[data-engine="hermes"] .hm-session-msg { + margin-bottom: 12px; + padding: 13px; + border: 1px solid var(--hm-border-subtle); + border-radius: var(--hm-radius-sm); + background: var(--hm-surface-0); +} +[data-engine="hermes"] .hm-session-msg-role { + margin-bottom: 7px; + color: var(--hm-accent); + font-family: var(--hm-font-mono); + font-size: 10px; + letter-spacing: 0.1em; + text-transform: uppercase; +} +[data-engine="hermes"] .hm-session-msg-body { + white-space: pre-wrap; + color: var(--hm-text-primary); + line-height: 1.58; + font-size: 13px; +} +@media (max-width: 980px) { + [data-engine="hermes"] .hm-sessions-hero, + [data-engine="hermes"] .hm-session-detail-head { + flex-direction: column; + } + [data-engine="hermes"] .hm-sessions-shell { + grid-template-columns: 1fr; + } + [data-engine="hermes"] .hm-sessions-stats, + [data-engine="hermes"] .hm-session-stat-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (max-width: 640px) { + [data-engine="hermes"] .hm-sessions-stats, + [data-engine="hermes"] .hm-session-stat-grid { + grid-template-columns: 1fr; + } + [data-engine="hermes"] .hm-sessions-toolbar, + [data-engine="hermes"] .hm-sessions-hero-actions { + flex-direction: column; + align-items: stretch; + } + [data-engine="hermes"] .hm-session-row { + grid-template-columns: 24px minmax(0, 1fr); + } + [data-engine="hermes"] .hm-session-row-time { + grid-column: 2; + } +} + +[data-engine="hermes"] .hm-chat-sidebar-head { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 18px 10px; + flex-shrink: 0; +} +[data-engine="hermes"] .hm-chat-sidebar-title { + font-family: var(--hm-font-sans); + font-size: 10.5px; + font-weight: 600; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-chat-new-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + border: 1px solid var(--hm-border); + border-radius: 50%; + background: var(--hm-surface-0); + color: var(--hm-text-secondary); + cursor: pointer; + transition: all 0.15s ease; +} +[data-engine="hermes"] .hm-chat-new-btn:hover { + color: var(--hm-accent); + border-color: var(--hm-accent); + background: var(--hm-accent-soft); +} + +[data-engine="hermes"] .hm-chat-sidebar-tip { + padding: 0 18px 12px; + border-bottom: 1px solid var(--hm-border-subtle); + font-family: var(--hm-font-mono); + font-size: 10px; + line-height: 1.5; + color: var(--hm-text-tertiary); +} + +[data-engine="hermes"] .hm-chat-sidebar-body { + flex: 1; + overflow-y: auto; + padding: 8px 8px 18px; +} + +[data-engine="hermes"] .hm-chat-sidebar-loading, +[data-engine="hermes"] .hm-chat-sidebar-empty { + padding: 30px 12px; + text-align: center; + font-family: var(--hm-font-serif); + font-style: italic; + color: var(--hm-text-tertiary); + font-size: 13px; +} + +[data-engine="hermes"] .hm-chat-group { + margin: 2px 0 4px; +} +[data-engine="hermes"] .hm-chat-group-head { + display: flex; + align-items: center; + gap: 6px; + width: 100%; + padding: 9px 12px 6px; + border: none; + background: transparent; + color: var(--hm-text-tertiary); + cursor: pointer; + font-family: var(--hm-font-sans); + font-size: 10.5px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + transition: color 0.15s ease; +} +[data-engine="hermes"] .hm-chat-group-head:hover { + color: var(--hm-text-secondary); +} +[data-engine="hermes"] .hm-chat-group-head--static { + cursor: default; + color: var(--hm-accent); +} +[data-engine="hermes"] .hm-chat-group-head--static:hover { + color: var(--hm-accent); +} +[data-engine="hermes"] .hm-chat-group-arrow { + display: inline-flex; + transition: transform 0.15s ease; + transform: rotate(90deg); + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-chat-group-head.is-collapsed .hm-chat-group-arrow { + transform: rotate(0deg); +} +[data-engine="hermes"] .hm-chat-group-label { + flex: 1; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +[data-engine="hermes"] .hm-chat-group-count { + font-family: var(--hm-font-mono); + font-size: 10px; + font-weight: 500; + color: var(--hm-text-tertiary); + background: var(--hm-surface-2); + padding: 1px 6px; + border-radius: 999px; + border: 1px solid var(--hm-border-subtle); + letter-spacing: 0; + text-transform: none; +} + +/* ---- Session item ---- */ +[data-engine="hermes"] .hm-chat-session-item { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + padding: 8px 10px 8px 14px; + border: none; + background: transparent; + color: var(--hm-text-primary); + cursor: pointer; + text-align: left; + border-left: 2px solid transparent; + border-radius: 0 var(--hm-radius-sm) var(--hm-radius-sm) 0; + transition: background 0.12s ease; + position: relative; +} +[data-engine="hermes"] .hm-chat-session-item:hover { + background: var(--hm-surface-2); +} +[data-engine="hermes"] .hm-chat-session-item:hover .hm-chat-session-del { + opacity: 1; +} +[data-engine="hermes"] .hm-chat-session-item.is-active { + background: var(--hm-accent-soft); + border-left-color: var(--hm-accent); +} +[data-engine="hermes"] .hm-chat-session-item.is-active .hm-chat-session-title { + color: var(--hm-accent); + font-weight: 500; +} +[data-engine="hermes"] .hm-chat-session-item.is-live .hm-chat-session-title { + color: var(--hm-accent); +} + +[data-engine="hermes"] .hm-chat-session-main { + flex: 1; + min-width: 0; +} +[data-engine="hermes"] .hm-chat-session-title-row { + display: flex; + align-items: center; + gap: 6px; + min-width: 0; +} +[data-engine="hermes"] .hm-chat-session-title { + flex: 1; + font-size: 13px; + line-height: 1.35; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-chat-session-spinner { + flex-shrink: 0; + color: var(--hm-accent); + animation: hm-chat-spin 1.1s linear infinite; +} +[data-engine="hermes"] .hm-chat-session-pin { + flex-shrink: 0; + color: var(--hm-accent); + opacity: 0.85; +} +[data-engine="hermes"] .hm-chat-session-live { + display: inline-flex; + align-items: center; + gap: 4px; + flex-shrink: 0; + padding: 1px 7px; + border-radius: 999px; + font-family: var(--hm-font-sans); + font-size: 9.5px; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--hm-accent); + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-chat-live-dot { + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--hm-accent); + animation: hm-chat-live-pulse 2s ease-in-out infinite; +} +@keyframes hm-chat-live-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(0.7); } +} +@keyframes hm-chat-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +[data-engine="hermes"] .hm-chat-session-meta { + display: flex; + align-items: center; + gap: 6px; + margin-top: 2px; +} +[data-engine="hermes"] .hm-chat-session-model { + font-family: var(--hm-font-mono); + font-size: 10px; + color: var(--hm-accent); + background: var(--hm-accent-soft); + padding: 0 5px; + line-height: 15px; + border-radius: 3px; + max-width: 110px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +[data-engine="hermes"] .hm-chat-session-time { + font-family: var(--hm-font-mono); + font-size: 10.5px; + color: var(--hm-text-tertiary); + letter-spacing: 0.01em; +} + +/* Always show the delete button at low opacity so users know it's there; + bump to full opacity on row hover. Pure-on-hover discoverability bug + was making people think "sessions can't be deleted". */ +[data-engine="hermes"] .hm-chat-session-del { + flex-shrink: 0; + opacity: 0.45; + padding: 4px; + border: none; + background: transparent; + color: var(--hm-text-tertiary); + cursor: pointer; + border-radius: 4px; + transition: all 0.15s ease; + display: inline-flex; + align-items: center; + justify-content: center; +} +[data-engine="hermes"] .hm-chat-session-del:hover { + color: var(--hm-error); + background: var(--hm-error-soft); +} +[data-engine="hermes"] .hm-chat-session-actions { + flex-shrink: 0; + display: inline-flex; + align-items: center; + gap: 4px; +} +[data-engine="hermes"] .hm-chat-session-action { + min-width: 26px; + height: 26px; + padding: 0 7px; + border: 1px solid var(--hm-border-subtle); + border-radius: 999px; + background: color-mix(in srgb, var(--hm-surface-0) 76%, transparent); + color: var(--hm-text-tertiary); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 4px; + cursor: pointer; + transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; +} +[data-engine="hermes"] .hm-chat-session-action:hover { + color: var(--hm-text-primary); + background: var(--hm-surface-0); + border-color: var(--hm-border); +} +[data-engine="hermes"] .hm-chat-session-del { + opacity: 1; +} +[data-engine="hermes"] .hm-chat-session-del span { + font-size: 11px; + line-height: 1; +} +[data-engine="hermes"] .hm-chat-session-del:hover { + color: var(--hm-error); + background: var(--hm-error-soft); + border-color: color-mix(in srgb, var(--hm-error) 30%, transparent); +} +[data-engine="hermes"] .hm-chat-session-menu { + padding: 0; +} + +/* ---- Main area ---- */ +[data-engine="hermes"] .hm-chat-main { + display: flex; + flex-direction: column; + min-width: 0; + overflow: hidden; + background: var(--hm-surface-0); +} + +[data-engine="hermes"] .hm-chat-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px 28px; + border-bottom: 1px solid var(--hm-border); + flex-shrink: 0; + background: var(--hm-surface-0); + gap: 16px; +} +[data-engine="hermes"] .hm-chat-header-left { + display: flex; + align-items: center; + gap: 12px; + flex: 1; + min-width: 0; + overflow: hidden; +} +[data-engine="hermes"] .hm-chat-toggle-sidebar { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 5px 7px; + border: 1px solid transparent; + background: transparent; + color: var(--hm-text-tertiary); + cursor: pointer; + border-radius: 999px; + transition: all 0.15s ease; + font-family: var(--hm-font-sans); + font-size: 12px; +} +[data-engine="hermes"] .hm-chat-toggle-sidebar span { + display: none; +} +[data-engine="hermes"] .hm-chat-toggle-sidebar:hover { + color: var(--hm-text-primary); + background: var(--hm-surface-2); +} +[data-engine="hermes"] .hm-chat-toggle-sidebar.is-collapsed { + border-color: var(--hm-border-subtle); + background: var(--hm-surface-1); + color: var(--hm-text-secondary); +} +[data-engine="hermes"] .hm-chat-toggle-sidebar.is-collapsed span { + display: inline; +} +[data-engine="hermes"] .hm-chat-header-title-wrap { + display: flex; + align-items: baseline; + gap: 10px; + min-width: 0; + overflow: hidden; +} +[data-engine="hermes"] .hm-chat-header-title { + font-family: var(--hm-font-serif); + font-size: 18px; + font-weight: 500; + letter-spacing: -0.01em; + color: var(--hm-text-primary); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +[data-engine="hermes"] .hm-chat-source-badge { + flex-shrink: 0; + font-family: var(--hm-font-mono); + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--hm-text-tertiary); + background: var(--hm-surface-2); + border: 1px solid var(--hm-border-subtle); + padding: 1px 7px; + border-radius: 999px; + line-height: 16px; +} + +[data-engine="hermes"] .hm-chat-header-right { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +[data-engine="hermes"] .hm-chat-gw-status { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 5px 10px; + border: 1px solid var(--hm-border); + border-radius: 999px; + background: var(--hm-surface-1); + font-family: var(--hm-font-mono); + font-size: 10.5px; + color: var(--hm-text-tertiary); + text-transform: uppercase; + letter-spacing: 0.05em; +} +[data-engine="hermes"] .hm-chat-gw-status.is-online { + color: var(--hm-success); + border-color: color-mix(in srgb, var(--hm-success) 30%, transparent); + background: color-mix(in srgb, var(--hm-success) 6%, transparent); +} +[data-engine="hermes"] .hm-chat-gw-status.is-offline { + color: var(--hm-warn, #CA8A04); + border-color: color-mix(in srgb, var(--hm-warn, #CA8A04) 30%, transparent); + background: color-mix(in srgb, var(--hm-warn, #CA8A04) 6%, transparent); +} +/* "GATEWAY" label — muted prefix, always grey regardless of state tint */ +[data-engine="hermes"] .hm-chat-gw-label { + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono); + font-size: 10.5px; + letter-spacing: 0.08em; + font-weight: 500; +} +[data-engine="hermes"] .hm-chat-gw-status .hm-chat-gw-text { + font-weight: 600; + letter-spacing: 0.04em; +} +[data-engine="hermes"] .hm-chat-gw-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-chat-gw-status.is-online .hm-chat-gw-dot { + background: var(--hm-success); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--hm-success) 20%, transparent); +} +[data-engine="hermes"] .hm-chat-gw-model { + color: var(--hm-text-secondary); + text-transform: none; + letter-spacing: 0; + font-size: 10.5px; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + padding-left: 4px; + border-left: 1px solid var(--hm-border); + margin-left: 2px; +} + +/* ---- Messages area ---- */ +[data-engine="hermes"] .hm-chat-messages { + flex: 1; + overflow-y: auto; + padding: 28px 48px; + display: flex; + flex-direction: column; + gap: 20px; + background: var(--hm-surface-0); +} +[data-engine="hermes"] .hm-chat-jump-bottom { + position: absolute; + right: 32px; + bottom: 112px; + z-index: 8; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 8px 12px; + border: 1px solid var(--hm-border); + border-radius: 999px; + background: color-mix(in srgb, var(--hm-surface-0) 88%, transparent); + color: var(--hm-text-secondary); + box-shadow: var(--hm-shadow-sm); + font-family: var(--hm-font-mono); + font-size: 11px; + cursor: pointer; + opacity: 0; + pointer-events: none; + transform: translateY(8px); + transition: opacity 0.18s ease, transform 0.18s ease, color 0.15s ease, background 0.15s ease; +} +[data-engine="hermes"] .hm-chat-jump-bottom.is-visible { + opacity: 1; + pointer-events: auto; + transform: translateY(0); +} +[data-engine="hermes"] .hm-chat-jump-bottom:hover { + color: var(--hm-accent); + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-chat-messages-empty { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + color: var(--hm-text-tertiary); + text-align: center; + min-height: 320px; +} +[data-engine="hermes"] .hm-chat-empty-title { + font-family: var(--hm-font-serif); + font-size: 18px; + color: var(--hm-text-secondary); + letter-spacing: -0.005em; +} +[data-engine="hermes"] .hm-chat-empty-sub { + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 13px; + color: var(--hm-text-tertiary); +} + +/* ---- Message bubbles ---- */ +[data-engine="hermes"] .hm-chat-msg { display: flex; flex-direction: column; } +[data-engine="hermes"] .hm-chat-msg--user { align-items: flex-end; } +[data-engine="hermes"] .hm-chat-msg--assistant { align-items: flex-start; } +[data-engine="hermes"] .hm-chat-msg--system { align-items: center; } + +[data-engine="hermes"] .hm-chat-msg-body { + display: flex; + gap: 10px; + max-width: min(78%, 760px); + align-items: flex-start; +} +[data-engine="hermes"] .hm-chat-shell.is-sidebar-collapsed .hm-chat-msg-body { + max-width: min(82%, 820px); +} +[data-engine="hermes"] .hm-chat-msg--user .hm-chat-msg-body { flex-direction: row-reverse; } + +[data-engine="hermes"] .hm-chat-msg-avatar { + flex-shrink: 0; + width: 32px; + height: 32px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + font-family: var(--hm-font-serif); + font-weight: 500; + font-size: 14px; + color: var(--hm-accent); + background: var(--hm-accent-soft); + border: 1px solid color-mix(in srgb, var(--hm-accent) 25%, transparent); + margin-top: 2px; +} + +[data-engine="hermes"] .hm-chat-msg-content-wrap { + display: flex; + flex-direction: column; + min-width: 0; +} + +[data-engine="hermes"] .hm-chat-msg-bubble { + padding: 12px 16px; + font-size: 14px; + line-height: 1.7; + border-radius: var(--hm-radius-md); + word-break: break-word; + max-width: 100%; + overflow-wrap: anywhere; +} +[data-engine="hermes"] .hm-chat-msg--user .hm-chat-msg-bubble { + background: var(--hm-accent-soft); + color: var(--hm-text-primary); + border: 1px solid color-mix(in srgb, var(--hm-accent) 16%, transparent); + font-family: var(--hm-font-serif); + font-size: 14.5px; + line-height: 1.7; +} +[data-engine="hermes"] .hm-chat-msg--assistant .hm-chat-msg-bubble { + background: var(--hm-surface-1); + color: var(--hm-text-primary); + border: 1px solid var(--hm-border-subtle); +} +[data-engine="hermes"] .hm-chat-msg--system .hm-chat-msg-bubble { + background: var(--hm-error-soft); + color: var(--hm-error); + border: 1px solid color-mix(in srgb, var(--hm-error) 25%, transparent); + font-family: var(--hm-font-mono); + font-size: 12.5px; + max-width: 90%; +} + +[data-engine="hermes"] .hm-chat-msg-footer { + display: flex; + align-items: center; + gap: 8px; + margin-top: 4px; + padding: 0 4px; +} +[data-engine="hermes"] .hm-chat-msg--user .hm-chat-msg-footer { + justify-content: flex-end; +} +[data-engine="hermes"] .hm-chat-msg-time { + font-family: var(--hm-font-mono); + font-size: 10.5px; + color: var(--hm-text-tertiary); + letter-spacing: 0.01em; +} +[data-engine="hermes"] .hm-chat-msg-copy { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 6px; + border: 1px solid var(--hm-border-subtle); + border-radius: 999px; + background: transparent; + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono); + font-size: 10px; + line-height: 1.2; + cursor: pointer; + opacity: 0; + transform: translateY(1px); + transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease; +} +[data-engine="hermes"] .hm-chat-msg:hover .hm-chat-msg-copy, +[data-engine="hermes"] .hm-chat-msg-copy:focus-visible { + opacity: 1; + transform: translateY(0); +} +[data-engine="hermes"] .hm-chat-msg-copy:hover { + color: var(--hm-accent); + background: var(--hm-accent-soft); + border-color: color-mix(in srgb, var(--hm-accent) 24%, transparent); +} + +/* Markdown inside message content */ +[data-engine="hermes"] .hm-chat-msg-content p { margin: 0 0 8px; } +[data-engine="hermes"] .hm-chat-msg-content p:last-child { margin-bottom: 0; } +[data-engine="hermes"] .hm-chat-msg-content h2, +[data-engine="hermes"] .hm-chat-msg-content h3, +[data-engine="hermes"] .hm-chat-msg-content h4, +[data-engine="hermes"] .hm-chat-msg-content h5 { + font-family: var(--hm-font-serif); + font-weight: 500; + letter-spacing: -0.01em; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-chat-msg-content h2 { font-size: 18px; margin: 14px 0 6px; } +[data-engine="hermes"] .hm-chat-msg-content h3 { font-size: 16px; margin: 12px 0 5px; } +[data-engine="hermes"] .hm-chat-msg-content h4 { + font-size: 14px; + font-style: italic; + color: var(--hm-accent); + margin: 10px 0 4px; +} +[data-engine="hermes"] .hm-chat-msg-content h5 { + font-size: 13px; + color: var(--hm-text-secondary); + margin: 10px 0 4px; +} +[data-engine="hermes"] .hm-chat-msg-content ul { + margin: 4px 0 8px; + padding-left: 22px; +} +[data-engine="hermes"] .hm-chat-msg-content li { margin: 2px 0; line-height: 1.65; } +[data-engine="hermes"] .hm-chat-msg-content code { + font-family: var(--hm-font-mono); + font-size: 12.5px; + background: var(--hm-surface-2); + padding: 1px 6px; + border-radius: 3px; + color: var(--hm-accent); +} +[data-engine="hermes"] .hm-chat-msg-content pre { + background: var(--hm-surface-2); + border: 1px solid var(--hm-border-subtle); + border-radius: var(--hm-radius-sm); + padding: 10px 12px; + margin: 8px 0; + overflow-x: auto; + font-family: var(--hm-font-mono); + font-size: 12px; + line-height: 1.6; +} +[data-engine="hermes"] .hm-chat-msg-content pre.hm-chat-code-block { + position: relative; + padding-top: 34px; +} +[data-engine="hermes"] .hm-chat-code-copy { + position: absolute; + top: 6px; + right: 8px; + display: inline-flex; + align-items: center; + height: 22px; + padding: 0 8px; + border: 1px solid var(--hm-border-subtle); + border-radius: 999px; + background: color-mix(in srgb, var(--hm-surface-0) 82%, transparent); + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono); + font-size: 10px; + cursor: pointer; + opacity: 0; + transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease; +} +[data-engine="hermes"] .hm-chat-code-block:hover .hm-chat-code-copy, +[data-engine="hermes"] .hm-chat-code-copy:focus-visible { + opacity: 1; +} +[data-engine="hermes"] .hm-chat-code-copy:hover { + color: var(--hm-accent); + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-chat-msg-content pre code { + background: transparent; + padding: 0; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-chat-msg-content a { + color: var(--hm-accent); + text-decoration: underline; + text-underline-offset: 2px; +} +[data-engine="hermes"] .hm-chat-msg-content strong { font-weight: 600; } +[data-engine="hermes"] .hm-chat-msg-content em { font-style: italic; } + +/* Streaming dots pulse (shown while first delta hasn't arrived) */ +[data-engine="hermes"] .hm-chat-streaming-dots { + display: inline-flex; + gap: 4px; + padding: 4px 0; +} +[data-engine="hermes"] .hm-chat-streaming-dots span { + width: 6px; + height: 6px; + background: var(--hm-text-tertiary); + border-radius: 50%; + animation: hm-chat-dots 1.4s infinite ease-in-out; +} +[data-engine="hermes"] .hm-chat-streaming-dots span:nth-child(2) { animation-delay: 0.2s; } +[data-engine="hermes"] .hm-chat-streaming-dots span:nth-child(3) { animation-delay: 0.4s; } +@keyframes hm-chat-dots { + 0%, 80%, 100% { opacity: 0.25; transform: scale(0.7); } + 40% { opacity: 1; transform: scale(1); } +} + +/* ---- Tool messages ---- */ +[data-engine="hermes"] .hm-chat-msg--tool { + align-items: flex-start; + padding-left: 42px; /* align with assistant content, not avatar */ +} +[data-engine="hermes"] .hm-chat-tool-line { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 3px 8px; + border-radius: var(--hm-radius-sm); + font-family: var(--hm-font-sans); + font-size: 11px; + color: var(--hm-text-tertiary); + max-width: 100%; +} +[data-engine="hermes"] .hm-chat-tool-line.is-expandable { + cursor: pointer; + background: var(--hm-surface-1); + border: 1px solid var(--hm-border-subtle); + transition: all 0.15s ease; +} +[data-engine="hermes"] .hm-chat-tool-line.is-expandable:hover { + border-color: var(--hm-accent); + color: var(--hm-text-secondary); +} +[data-engine="hermes"] .hm-chat-tool-chevron { + display: inline-flex; + transition: transform 0.15s ease; +} +[data-engine="hermes"] .hm-chat-tool-chevron.is-open { + transform: rotate(90deg); +} +[data-engine="hermes"] .hm-chat-tool-icon { + display: inline-flex; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-chat-tool-name { + font-family: var(--hm-font-mono); + font-size: 11px; + color: var(--hm-text-primary); + font-weight: 500; +} +[data-engine="hermes"] .hm-chat-tool-preview { + color: var(--hm-text-tertiary); + max-width: 360px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +[data-engine="hermes"] .hm-chat-tool-err { + font-size: 9.5px; + color: var(--hm-error); + background: var(--hm-error-soft); + padding: 1px 6px; + border-radius: 3px; + text-transform: uppercase; + letter-spacing: 0.06em; +} +[data-engine="hermes"] .hm-chat-tool-spinner { + width: 10px; + height: 10px; + border: 1.5px solid var(--hm-text-tertiary); + border-top-color: transparent; + border-radius: 50%; + animation: hm-chat-spin 0.7s linear infinite; + flex-shrink: 0; +} + +[data-engine="hermes"] .hm-chat-tool-details { + margin-top: 4px; + margin-left: 10px; + border-left: 2px solid var(--hm-border); + padding-left: 12px; +} +[data-engine="hermes"] .hm-chat-tool-section { + margin-bottom: 6px; +} +[data-engine="hermes"] .hm-chat-tool-label { + font-family: var(--hm-font-sans); + font-size: 10px; + font-weight: 600; + color: var(--hm-text-tertiary); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 3px; +} +[data-engine="hermes"] .hm-chat-tool-code { + background: var(--hm-surface-2); + border: 1px solid var(--hm-border-subtle); + border-radius: var(--hm-radius-sm); + padding: 8px 10px; + font-family: var(--hm-font-mono); + font-size: 11.5px; + line-height: 1.55; + color: var(--hm-text-primary); + white-space: pre-wrap; + word-break: break-word; + max-height: 280px; + overflow-y: auto; + margin: 0; +} + +/* ---- Streaming indicator (thinking + live tool calls) ---- */ +[data-engine="hermes"] .hm-chat-streaming { + display: flex; + flex-direction: column; + gap: 6px; + padding-left: 42px; +} +[data-engine="hermes"] .hm-chat-streaming-mark { + display: inline-flex; + align-items: center; + gap: 8px; + font-family: var(--hm-font-serif); + font-style: italic; + font-size: 13px; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-chat-streaming-pulse { + width: 8px; + height: 8px; + background: var(--hm-accent); + border-radius: 50%; + animation: hm-chat-live-pulse 1.6s ease-in-out infinite; +} +[data-engine="hermes"] .hm-chat-live-tools { + display: flex; + flex-direction: column; + gap: 3px; +} +[data-engine="hermes"] .hm-chat-live-tool { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 3px 8px; + border-radius: var(--hm-radius-sm); + background: var(--hm-surface-1); + border: 1px solid var(--hm-border-subtle); + font-size: 11px; + color: var(--hm-text-secondary); + max-width: fit-content; +} +[data-engine="hermes"] .hm-chat-live-tool-icon { + display: inline-flex; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-chat-live-tool-name { + font-family: var(--hm-font-mono); + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-chat-live-tool-preview { + color: var(--hm-text-tertiary); + max-width: 240px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* ---- Input area ---- */ +[data-engine="hermes"] .hm-chat-input-area { + flex-shrink: 0; + padding: 16px 48px 18px; + border-top: 1px solid var(--hm-border); + background: var(--hm-surface-0); + position: relative; +} + +[data-engine="hermes"] .hm-chat-input-wrap { + display: flex; + align-items: flex-end; + gap: 10px; + width: 100%; + max-width: 760px; + margin: 0 auto; + background: var(--hm-surface-1); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); + padding: 10px 12px; + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +[data-engine="hermes"] .hm-chat-input-wrap:focus-within { + border-color: var(--hm-accent); + box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.12); +} + +[data-engine="hermes"] .hm-chat-input { + flex: 1; + resize: none; + border: none; + outline: none; + background: transparent; + color: var(--hm-text-primary); + font-family: var(--hm-font-serif); + font-size: 14.5px; + line-height: 1.6; + max-height: 160px; + min-height: 22px; + overflow-y: auto; + padding: 2px 2px; +} +[data-engine="hermes"] .hm-chat-input::placeholder { + color: var(--hm-text-tertiary); + font-style: italic; +} +[data-engine="hermes"] .hm-chat-input:disabled { + opacity: 0.55; + cursor: not-allowed; +} + +[data-engine="hermes"] .hm-chat-input-actions { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; +} +[data-engine="hermes"] .hm-chat-send-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + background: var(--hm-accent); + color: #FFFFFF; + cursor: pointer; + transition: all 0.15s ease; +} +[data-engine="hermes"] .hm-chat-send-btn:hover:not(:disabled) { + background: var(--hm-accent-hover, var(--hm-accent)); + transform: translateX(1px); +} +[data-engine="hermes"] .hm-chat-send-btn:disabled { + background: var(--hm-surface-2); + color: var(--hm-text-tertiary); + cursor: not-allowed; +} + +/* ---- Token usage strip (above textarea) ---- + Sits between the slash menu and the input wrap. Pills are minimal, + monospace, and use accent tint for cost so it draws the eye without + being shouty. The whole bar can be hidden by `display:none` on the + element itself; we just don't render it when usage is zero. */ +[data-engine="hermes"] .hm-chat-usage-bar { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 8px; + max-width: 760px; + margin-left: auto; + margin-right: auto; + padding: 0 2px; + flex-wrap: wrap; +} +[data-engine="hermes"] .hm-chat-shell.is-sidebar-collapsed .hm-chat-input-wrap, +[data-engine="hermes"] .hm-chat-shell.is-sidebar-collapsed .hm-chat-usage-bar { + max-width: 820px; +} +[data-engine="hermes"] .hm-chat-usage-pill { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 3px 9px; + border-radius: 999px; + background: var(--hm-surface-1); + border: 1px solid var(--hm-border-subtle); + font-family: var(--hm-font-mono); + font-size: 10.5px; + color: var(--hm-text-secondary); + letter-spacing: 0.01em; + line-height: 1.4; +} +[data-engine="hermes"] .hm-chat-usage-pill[data-kind="cost"] { + background: var(--hm-accent-soft); + border-color: transparent; + color: var(--hm-accent); + font-weight: 600; +} +[data-engine="hermes"] .hm-chat-usage-pill[data-kind="cache"] { + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-chat-usage-label { + text-transform: uppercase; + font-size: 9px; + letter-spacing: 0.06em; + color: var(--hm-text-tertiary); + font-weight: 500; +} +[data-engine="hermes"] .hm-chat-usage-value { + color: var(--hm-text-primary); + font-weight: 600; +} +[data-engine="hermes"] .hm-chat-usage-pill[data-kind="cost"] .hm-chat-usage-value { + color: var(--hm-accent); +} + +/* ---- Slash menu ---- */ +[data-engine="hermes"] .hm-chat-slash-menu { + position: absolute; + left: 48px; + right: 48px; + bottom: calc(100% + 4px); + background: var(--hm-surface-0); + border: 1px solid var(--hm-border); + border-radius: var(--hm-radius-md); + box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); + padding: 4px; + max-height: 260px; + overflow-y: auto; + z-index: 5; + bottom: auto; + top: auto; + transform: translateY(-100%); + /* The slash menu is anchored INSIDE the input area (bottom: 100%). */ +} +[data-engine="hermes"] .hm-chat-input-area .hm-chat-slash-menu { + position: absolute; + left: 48px; + right: 48px; + bottom: calc(100% - 4px); + top: auto; + transform: translateY(-6px); +} +[data-engine="hermes"] .hm-chat-slash-item { + display: flex; + align-items: baseline; + gap: 10px; + width: 100%; + padding: 8px 12px; + border: none; + background: transparent; + color: var(--hm-text-primary); + text-align: left; + cursor: pointer; + border-radius: var(--hm-radius-sm); + transition: background 0.12s ease; +} +[data-engine="hermes"] .hm-chat-slash-item:hover { + background: var(--hm-accent-soft); +} +[data-engine="hermes"] .hm-chat-slash-cmd { + font-family: var(--hm-font-mono); + font-size: 12px; + font-weight: 500; + color: var(--hm-accent); + min-width: 72px; +} +[data-engine="hermes"] .hm-chat-slash-desc { + font-family: var(--hm-font-sans); + font-size: 12px; + color: var(--hm-text-tertiary); + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* ---- Context menu ---- */ +.hm-chat-ctxmenu { + position: fixed; + z-index: 10000; + background: var(--hm-surface-0, #FFFCF5); + border: 1px solid var(--hm-border, #E5E0D0); + border-radius: 8px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + padding: 4px; + min-width: 180px; + font-family: var(--hm-font-sans, sans-serif); +} +.hm-chat-ctxmenu-item { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + padding: 7px 10px; + border: none; + background: transparent; + color: var(--hm-text-primary, #1C1917); + font-size: 12.5px; + text-align: left; + cursor: pointer; + border-radius: 6px; + transition: background 0.12s ease; +} +.hm-chat-ctxmenu-item:hover { + background: var(--hm-accent-soft, rgba(202, 138, 4, 0.06)); +} +.hm-chat-ctxmenu-item.is-danger { + color: var(--hm-error, #B91C1C); +} +.hm-chat-ctxmenu-item.is-danger:hover { + background: var(--hm-error-soft, rgba(185, 28, 28, 0.06)); +} + +/* ---- Rename modal input (reuses .modal-overlay/.modal from modal.js) ---- */ +[data-engine="hermes"] .hm-chat-rename-input, +.hm-chat-rename-input { + width: 100%; + padding: 8px 12px; + border: 1px solid var(--hm-border, #E5E0D0); + border-radius: 6px; + background: var(--hm-surface-0, #FFFCF5); + color: var(--hm-text-primary, #1C1917); + font-family: var(--hm-font-serif, serif); + font-size: 14px; + box-sizing: border-box; + outline: none; + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +.hm-chat-rename-input:focus { + border-color: var(--hm-accent, #CA8A04); + box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.15); +} + +/* ---- Stop button (replaces Send during streaming) ---- */ +[data-engine="hermes"] .hm-chat-stop-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: 1px solid color-mix(in srgb, var(--hm-error) 40%, transparent); + border-radius: 50%; + background: color-mix(in srgb, var(--hm-error) 10%, transparent); + color: var(--hm-error); + cursor: pointer; + transition: all 0.15s ease; +} +[data-engine="hermes"] .hm-chat-stop-btn:hover { + background: color-mix(in srgb, var(--hm-error) 18%, transparent); + border-color: var(--hm-error); +} +[data-engine="hermes"] .hm-chat-input-wrap.is-streaming { + border-color: color-mix(in srgb, var(--hm-accent) 30%, transparent); + background: color-mix(in srgb, var(--hm-accent) 3%, var(--hm-surface-1)); +} + +/* ---- Session Search modal (Ctrl+K) ---- */ +.hm-chat-search-overlay { + position: fixed; + inset: 0; + z-index: 10500; + background: rgba(28, 25, 23, 0.35); + backdrop-filter: blur(3px); + display: flex; + align-items: flex-start; + justify-content: center; + padding: 12vh 16px 16px; + animation: hm-chat-search-fade 0.15s ease; +} +@keyframes hm-chat-search-fade { + from { opacity: 0; } + to { opacity: 1; } +} + +[data-engine="hermes"] .hm-chat-search-panel, +.hm-chat-search-panel[data-engine="hermes"] { + width: 100%; + max-width: 560px; + max-height: 70vh; + background: var(--hm-surface-0, #FFFCF5); + border: 1px solid var(--hm-border, #E5E0D0); + border-radius: 10px; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); + overflow: hidden; + display: flex; + flex-direction: column; + animation: hm-chat-search-slide 0.2s ease; + font-family: var(--hm-font-sans, sans-serif); + color: var(--hm-text-primary, #1C1917); +} +@keyframes hm-chat-search-slide { + from { transform: translateY(-8px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +.hm-chat-search-panel .hm-chat-search-head { + display: flex; + align-items: center; + gap: 10px; + padding: 14px 18px; + border-bottom: 1px solid var(--hm-border-subtle, #EDE8D9); + background: var(--hm-surface-1, #FAF7EE); +} +.hm-chat-search-panel .hm-chat-search-icon { + color: var(--hm-text-tertiary); + flex-shrink: 0; +} +.hm-chat-search-panel .hm-chat-search-input { + flex: 1; + border: none; + outline: none; + background: transparent; + color: var(--hm-text-primary, #1C1917); + font-family: var(--hm-font-serif, serif); + font-size: 16px; + line-height: 1.4; + padding: 2px 0; +} +.hm-chat-search-panel .hm-chat-search-input::placeholder { + color: var(--hm-text-tertiary); + font-style: italic; +} +.hm-chat-search-panel .hm-chat-search-kbd { + font-family: var(--hm-font-mono, monospace); + font-size: 10px; + color: var(--hm-text-tertiary); + padding: 2px 6px; + border: 1px solid var(--hm-border); + border-radius: 4px; + background: var(--hm-surface-0); + letter-spacing: 0.03em; +} + +.hm-chat-search-panel .hm-chat-search-results { + overflow-y: auto; + flex: 1; + padding: 6px 0 8px; +} +.hm-chat-search-panel .hm-chat-search-empty { + padding: 36px 20px; + text-align: center; + color: var(--hm-text-tertiary); + font-family: var(--hm-font-serif, serif); + font-style: italic; + font-size: 13.5px; +} + +.hm-chat-search-panel .hm-chat-search-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + width: 100%; + padding: 9px 18px; + border: none; + background: transparent; + color: var(--hm-text-primary, #1C1917); + text-align: left; + cursor: pointer; + transition: background 0.1s ease; + border-left: 2px solid transparent; +} +.hm-chat-search-panel .hm-chat-search-item:hover, +.hm-chat-search-panel .hm-chat-search-item.is-active { + background: var(--hm-accent-soft, rgba(202, 138, 4, 0.08)); + border-left-color: var(--hm-accent, #CA8A04); +} +.hm-chat-search-panel .hm-chat-search-item-main { + flex: 1; + min-width: 0; +} +.hm-chat-search-panel .hm-chat-search-item-title { + display: flex; + align-items: baseline; + gap: 8px; + font-size: 13.5px; + color: var(--hm-text-primary); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.hm-chat-search-panel .hm-chat-search-item-src { + font-family: var(--hm-font-mono, monospace); + font-size: 9.5px; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--hm-text-tertiary); + background: var(--hm-surface-2, #F1ECDC); + border: 1px solid var(--hm-border-subtle); + padding: 1px 5px; + border-radius: 999px; + flex-shrink: 0; +} +.hm-chat-search-panel .hm-chat-search-item-snippet { + margin-top: 3px; + font-family: var(--hm-font-serif, serif); + font-style: italic; + font-size: 12px; + color: var(--hm-text-tertiary); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.hm-chat-search-panel .hm-chat-search-item-meta { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; +} +.hm-chat-search-panel .hm-chat-search-item-model { + font-family: var(--hm-font-mono, monospace); + font-size: 10px; + color: var(--hm-accent, #CA8A04); + background: var(--hm-accent-soft); + padding: 0 5px; + border-radius: 3px; + line-height: 15px; + max-width: 110px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.hm-chat-search-panel .hm-chat-search-item-time { + font-family: var(--hm-font-mono, monospace); + font-size: 10.5px; + color: var(--hm-text-tertiary); +} + +.hm-chat-search-panel .hm-chat-search-foot { + display: flex; + justify-content: space-between; + padding: 8px 18px; + border-top: 1px solid var(--hm-border-subtle); + background: var(--hm-surface-1); + font-family: var(--hm-font-mono, monospace); + font-size: 10.5px; + color: var(--hm-text-tertiary); +} +.hm-chat-search-panel .hm-chat-search-foot kbd { + font-family: var(--hm-font-mono, monospace); + font-size: 10px; + padding: 1px 5px; + border: 1px solid var(--hm-border); + border-radius: 3px; + background: var(--hm-surface-0); + color: var(--hm-text-secondary); + margin: 0 1px; +} + +[data-engine="hermes"].hm-usage-page { + max-width: 1120px; + margin: 0 auto; + padding: 28px 30px 40px; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-usage-hero { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 18px; + margin-bottom: 18px; +} +[data-engine="hermes"] .hm-usage-hero-copy { + min-width: 0; +} +[data-engine="hermes"] .hm-usage-eyebrow { + font-family: var(--hm-font-mono, monospace); + font-size: 10.5px; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--hm-text-tertiary); + margin-bottom: 10px; +} +[data-engine="hermes"] .hm-usage-title { + margin: 0; + font-family: var(--hm-font-serif, serif); + font-size: clamp(32px, 4vw, 44px); + line-height: 1.02; + font-weight: 500; + letter-spacing: -0.025em; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-usage-desc { + margin: 10px 0 0; + max-width: 720px; + color: var(--hm-text-secondary); + font-size: 14px; + line-height: 1.7; +} +[data-engine="hermes"] .hm-usage-refresh { + flex-shrink: 0; +} +[data-engine="hermes"] .hm-usage-body { + display: flex; + flex-direction: column; + gap: 16px; +} +[data-engine="hermes"] .hm-usage-loading, +[data-engine="hermes"] .hm-usage-empty, +[data-engine="hermes"] .hm-usage-error-card { + border: 1px solid var(--hm-border); + border-radius: 18px; + background: var(--hm-surface-0); + box-shadow: 0 16px 36px rgba(28, 25, 23, 0.05); +} +[data-engine="hermes"] .hm-usage-loading, +[data-engine="hermes"] .hm-usage-empty { + padding: 56px 24px; + text-align: center; + color: var(--hm-text-tertiary); + font-family: var(--hm-font-serif, serif); + font-style: italic; + font-size: 15px; +} +[data-engine="hermes"] .hm-usage-error-card { + padding: 24px; +} +[data-engine="hermes"] .hm-usage-error-title { + font-family: var(--hm-font-serif, serif); + font-size: 24px; + color: var(--hm-text-primary); + margin-bottom: 8px; +} +[data-engine="hermes"] .hm-usage-error-text { + color: var(--hm-error); + font-size: 13px; + margin-bottom: 14px; +} +[data-engine="hermes"] .hm-usage-stat-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 14px; +} +[data-engine="hermes"] .hm-usage-stat-card { + min-height: 132px; + padding: 18px 18px 16px; + border-radius: 18px; + border: 1px solid var(--hm-border); + background: var(--hm-surface-0); + box-shadow: 0 16px 36px rgba(28, 25, 23, 0.05); + display: flex; + flex-direction: column; + justify-content: space-between; +} +[data-engine="hermes"] .hm-usage-stat-card.is-accent { + background: linear-gradient(180deg, color-mix(in srgb, var(--hm-accent) 9%, var(--hm-surface-0)) 0%, var(--hm-surface-0) 100%); +} +[data-engine="hermes"] .hm-usage-stat-card.is-muted { + background: linear-gradient(180deg, color-mix(in srgb, var(--hm-text-primary) 3%, var(--hm-surface-0)) 0%, var(--hm-surface-0) 100%); +} +[data-engine="hermes"] .hm-usage-stat-label { + font-family: var(--hm-font-mono, monospace); + font-size: 10.5px; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-usage-stat-value { + margin-top: 10px; + font-family: var(--hm-font-serif, serif); + font-size: clamp(28px, 3vw, 36px); + line-height: 1.04; + color: var(--hm-text-primary); + letter-spacing: -0.03em; +} +[data-engine="hermes"] .hm-usage-stat-sub { + margin-top: 10px; + color: var(--hm-text-secondary); + font-size: 12px; + line-height: 1.55; +} +[data-engine="hermes"] .hm-usage-card { + border: 1px solid var(--hm-border); + border-radius: 20px; + background: var(--hm-surface-0); + box-shadow: 0 16px 36px rgba(28, 25, 23, 0.05); + padding: 18px 20px 20px; +} +[data-engine="hermes"] .hm-usage-card-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 14px; +} +[data-engine="hermes"] .hm-usage-card-title { + margin: 0; + font-family: var(--hm-font-serif, serif); + font-size: 22px; + font-weight: 500; + line-height: 1.15; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-usage-model-list { + display: flex; + flex-direction: column; + gap: 10px; +} +[data-engine="hermes"] .hm-usage-model-row { + display: grid; + grid-template-columns: minmax(0, 180px) 1fr 72px; + align-items: center; + gap: 12px; +} +[data-engine="hermes"] .hm-usage-model-name, +[data-engine="hermes"] .hm-usage-model-meta { + font-family: var(--hm-font-mono, monospace); + font-size: 12px; +} +[data-engine="hermes"] .hm-usage-model-name { + color: var(--hm-text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +[data-engine="hermes"] .hm-usage-model-meta { + color: var(--hm-text-tertiary); + text-align: right; +} +[data-engine="hermes"] .hm-usage-model-track { + position: relative; + height: 14px; + border-radius: 999px; + background: color-mix(in srgb, var(--hm-text-primary) 6%, var(--hm-surface-2)); + overflow: hidden; +} +[data-engine="hermes"] .hm-usage-model-bar { + height: 100%; + min-width: 2px; + border-radius: inherit; + background: linear-gradient(90deg, var(--hm-accent) 0%, color-mix(in srgb, var(--hm-accent) 72%, #f6c453) 100%); +} +[data-engine="hermes"] .hm-usage-empty-inline { + padding: 12px 0 4px; + color: var(--hm-text-tertiary); + font-size: 13px; +} +[data-engine="hermes"] .hm-usage-card--trend { + padding-bottom: 16px; +} +[data-engine="hermes"] .hm-usage-trend-wrap { + position: relative; + height: 232px; + margin-bottom: 8px; +} +[data-engine="hermes"] .hm-usage-trend-svg { + width: 100%; + height: 100%; + display: block; +} +[data-engine="hermes"] .hm-usage-trend-grid { + stroke: color-mix(in srgb, var(--hm-border) 88%, transparent); + stroke-width: 1; + stroke-dasharray: 4 6; +} +[data-engine="hermes"] .hm-usage-trend-area { + fill: url(#hm-usage-trend-fill); +} +[data-engine="hermes"] .hm-usage-trend-bar { + fill: color-mix(in srgb, var(--hm-accent) 30%, transparent); +} +[data-engine="hermes"] .hm-usage-trend-line { + fill: none; + stroke: var(--hm-accent); + stroke-width: 2.4; + stroke-linecap: round; + stroke-linejoin: round; +} +[data-engine="hermes"] .hm-usage-trend-dot { + fill: var(--hm-accent); + stroke: var(--hm-surface-0); + stroke-width: 1.5; +} +[data-engine="hermes"] .hm-usage-trend-range { + display: flex; + justify-content: space-between; + gap: 12px; + margin-bottom: 14px; + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono, monospace); + font-size: 10.5px; +} +[data-engine="hermes"] .hm-usage-table-wrap { + overflow-x: auto; +} +[data-engine="hermes"] .hm-usage-table { + width: 100%; + border-collapse: collapse; +} +[data-engine="hermes"] .hm-usage-table th { + text-align: left; + padding: 9px 8px; + border-bottom: 1px solid var(--hm-border); + color: var(--hm-text-tertiary); + font-family: var(--hm-font-mono, monospace); + font-size: 10.5px; + font-weight: 500; + letter-spacing: 0.12em; + text-transform: uppercase; +} +[data-engine="hermes"] .hm-usage-table td { + padding: 9px 8px; + border-bottom: 1px solid color-mix(in srgb, var(--hm-border) 82%, transparent); + color: var(--hm-text-secondary); + font-family: var(--hm-font-mono, monospace); + font-size: 12px; +} +[data-engine="hermes"] .hm-usage-table tbody tr:last-child td { + border-bottom: none; +} + +[data-engine="hermes"].hm-services-page { + max-width: 1120px; + margin: 0 auto; + padding: 28px 30px 40px; + color: var(--hm-text-primary); +} +[data-engine="hermes"] .hm-services-desc { + margin: 0 0 18px; + max-width: 760px; + color: var(--hm-text-secondary); + font-size: 14px; + line-height: 1.7; +} +[data-engine="hermes"] .hm-services-msg { + margin: 14px 0 18px; + padding: 12px 14px; + border: 1px solid var(--hm-border); + border-radius: 14px; + background: var(--hm-surface-1); + font-family: var(--hm-font-mono, monospace); + font-size: 12px; + line-height: 1.6; +} +[data-engine="hermes"] .hm-services-msg[data-tone="success"] { + color: var(--hm-success); + border-color: color-mix(in srgb, var(--hm-success) 24%, var(--hm-border)); + background: color-mix(in srgb, var(--hm-success) 7%, var(--hm-surface-1)); +} +[data-engine="hermes"] .hm-services-msg[data-tone="error"] { + color: var(--hm-error); + border-color: color-mix(in srgb, var(--hm-error) 24%, var(--hm-border)); + background: color-mix(in srgb, var(--hm-error) 8%, var(--hm-surface-1)); +} +[data-engine="hermes"] .hm-services-msg[data-tone="warn"] { + color: var(--hm-warn); + border-color: color-mix(in srgb, var(--hm-warn) 28%, var(--hm-border)); + background: color-mix(in srgb, var(--hm-warn) 10%, var(--hm-surface-1)); +} +[data-engine="hermes"] .hm-services-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + margin-top: 16px; +} +[data-engine="hermes"] .hm-services-rows { + display: flex; + flex-direction: column; + gap: 12px; +} +[data-engine="hermes"] .hm-services-row { + display: grid; + grid-template-columns: 120px minmax(0, 1fr); + gap: 16px; + align-items: start; +} +[data-engine="hermes"] .hm-services-row-label { + color: var(--hm-text-tertiary); + font-family: var(--hm-font-serif, serif); + font-style: italic; + font-size: 12px; + line-height: 1.5; +} +[data-engine="hermes"] .hm-services-row-value { + color: var(--hm-text-primary); + font-size: 13px; + line-height: 1.7; + word-break: break-word; +} +[data-engine="hermes"] .hm-services-row-value.is-mono { + font-family: var(--hm-font-mono, monospace); + font-size: 12px; + color: var(--hm-text-secondary); +} +[data-engine="hermes"] .hm-services-note { + color: var(--hm-text-secondary); + font-size: 13px; + line-height: 1.65; +} +[data-engine="hermes"] .hm-services-env-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 12px; + margin-top: 14px; +} +[data-engine="hermes"] .hm-services-env-card { + border: 1px solid var(--hm-border); + border-radius: 16px; + background: var(--hm-surface-1); + padding: 14px 16px; +} +[data-engine="hermes"] .hm-services-env-title { + font-family: var(--hm-font-serif, serif); + font-size: 18px; + line-height: 1.2; + color: var(--hm-text-primary); + margin-bottom: 8px; +} +[data-engine="hermes"] .hm-services-env-meta { + color: var(--hm-text-secondary); + font-family: var(--hm-font-mono, monospace); + font-size: 11.5px; + line-height: 1.7; + word-break: break-word; +} +[data-engine="hermes"] .hm-services-inline-msg { + font-family: var(--hm-font-mono, monospace); + font-size: 11.5px; + line-height: 1.6; +} +[data-engine="hermes"] .hm-services-inline-msg[data-tone="success"] { + color: var(--hm-success); +} +[data-engine="hermes"] .hm-services-inline-msg[data-tone="error"] { + color: var(--hm-error); +} +[data-engine="hermes"] .hm-services-inline-msg[data-tone="warn"] { + color: var(--hm-warn); +} +[data-engine="hermes"] .hm-services-health-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); + gap: 12px; +} +[data-engine="hermes"] .hm-services-health-card { + border: 1px solid var(--hm-border); + border-radius: 16px; + background: var(--hm-surface-1); + padding: 14px 16px; + min-height: 88px; +} +[data-engine="hermes"] .hm-services-health-key { + font-family: var(--hm-font-mono, monospace); + font-size: 10.5px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--hm-text-tertiary); +} +[data-engine="hermes"] .hm-services-health-value { + margin-top: 10px; + font-family: var(--hm-font-serif, serif); + font-size: 22px; + line-height: 1.2; + color: var(--hm-text-primary); + word-break: break-word; +} +[data-engine="hermes"] .hm-services-json-wrap { + margin-top: 16px; +} +[data-engine="hermes"] .hm-services-json-wrap summary { + cursor: pointer; + color: var(--hm-text-secondary); + font-size: 12px; + font-family: var(--hm-font-mono, monospace); +} +[data-engine="hermes"] .hm-services-json { + margin-top: 10px; + max-height: 260px; +} +[data-engine="hermes"] .hm-services-empty { + padding: 18px 0 4px; + color: var(--hm-text-tertiary); + font-family: var(--hm-font-serif, serif); + font-style: italic; + font-size: 15px; +} +[data-engine="hermes"] .hm-services-action-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; +} +[data-engine="hermes"] .hm-services-mode { + appearance: none; +} + +@media (max-width: 960px) { + [data-engine="hermes"].hm-usage-page { + padding: 24px 22px 34px; + } + [data-engine="hermes"] .hm-usage-stat-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + [data-engine="hermes"].hm-services-page { + padding: 24px 22px 34px; + } + [data-engine="hermes"] .hm-services-grid { + grid-template-columns: 1fr; + } + [data-engine="hermes"] .hm-services-action-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 720px) { + [data-engine="hermes"] .hm-usage-hero { + flex-direction: column; + align-items: flex-start; + } + [data-engine="hermes"] .hm-usage-refresh { + width: 100%; + } + [data-engine="hermes"] .hm-usage-stat-grid { + grid-template-columns: 1fr; + } + [data-engine="hermes"] .hm-usage-model-row { + grid-template-columns: 1fr; + gap: 8px; + } + [data-engine="hermes"] .hm-usage-model-meta { + text-align: left; + } + [data-engine="hermes"] .hm-usage-table th, + [data-engine="hermes"] .hm-usage-table td { + padding-left: 4px; + padding-right: 4px; + } + [data-engine="hermes"] .hm-services-row { + grid-template-columns: 1fr; + gap: 4px; + } + [data-engine="hermes"] .hm-services-env-grid, + [data-engine="hermes"] .hm-services-health-grid { + grid-template-columns: 1fr; + } +} + +/* ---- Responsive breakpoints ---- */ +@media (max-width: 960px) { + [data-engine="hermes"] .hm-chat-sidebar { + width: 240px; + flex-basis: 240px; + } + [data-engine="hermes"] .hm-chat-messages { + padding: 24px 28px; + } + [data-engine="hermes"] .hm-chat-input-area { + padding: 14px 28px 16px; + } + [data-engine="hermes"] .hm-chat-header { + padding: 14px 20px; + } +} +@media (max-width: 720px) { + [data-engine="hermes"] .hm-chat-sidebar-backdrop { + display: block; + position: absolute; + inset: 0; + z-index: 19; + opacity: 1; + pointer-events: auto; + background: rgba(28, 25, 23, 0.28); + backdrop-filter: blur(2px); + transition: opacity 0.18s ease; + } + [data-engine="hermes"] .hm-chat-shell.is-sidebar-collapsed .hm-chat-sidebar-backdrop { + opacity: 0; + pointer-events: none; + } + [data-engine="hermes"] .hm-chat-shell.is-sidebar-collapsed .hm-chat-sidebar { + display: flex; + } + [data-engine="hermes"] .hm-chat-sidebar { + /* Below 720px the sidebar floats over the main column instead of + sharing the row, so the chat surface gets the full viewport. */ + position: absolute; + inset: 0 auto 0 0; + width: 280px; + flex-basis: 280px; + z-index: 20; + box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08); + } + [data-engine="hermes"] .hm-chat-sidebar.is-collapsed { + transform: translateX(-100%); + } + [data-engine="hermes"] .hm-chat-messages { + padding: 20px 18px; + } + [data-engine="hermes"] .hm-chat-jump-bottom { + right: 18px; + bottom: 106px; + } + [data-engine="hermes"] .hm-chat-input-area { + padding: 12px 18px 14px; + } + [data-engine="hermes"] .hm-chat-msg-body { + max-width: 92%; + } + [data-engine="hermes"] .hm-chat-input-area .hm-chat-slash-menu { + left: 18px; + right: 18px; + } +} + +@media (max-width: 860px) { + [data-engine="hermes"].hm-extensions-page .hm-grid--2 { + grid-template-columns: 1fr !important; + } + + [data-engine="hermes"].hm-extensions-page .hm-kpi-grid { + grid-template-columns: 1fr !important; + } +} + diff --git a/src/engines/xintian/index.js b/src/engines/xintian/index.js new file mode 100644 index 0000000..c390a0f --- /dev/null +++ b/src/engines/xintian/index.js @@ -0,0 +1,78 @@ +/** + * 心甜Claw 引擎（产品宣传入口） + * ------------------------------------------------------------------ + * 这不是一个本地引擎，而是「心甜Claw」产品的一个产品落地页入口： + * - 桌面客户端 + SaaS 后端，Windows 安装即用 + * - ClawPanel 里只承载宣传 + 跳转下载 + * + * 因此它的 detect/boot/cleanup 都是 no-op，永远 ready， + * 也不与任何 Gateway / 本地进程打交道。 + */ +import { t } from '../../lib/i18n.js' + +// 心甜 LOGO · 采用 xintian-claw 桌面端同款六边形品牌图标 +// 直接用 引用 public/ 下的 PNG，避免 SVG 的 gradient id 冲突问题 +const XINTIAN_ICON = `Xintian` + +let _listeners = [] + +export default { + id: 'xintian', + name: '心甜Claw', + description: 'Xintian Claw · Worry-free AI Companion for Windows', + icon: XINTIAN_ICON, + + async detect() { + // 不依赖任何本地进程，永远「ready」 + return { installed: true, ready: true } + }, + + async boot() { + // 无副作用启动 + }, + + cleanup() { + // 无副作用清理 + }, + + getNavItems() { + return [{ + section: '', + items: [ + { route: '/x/landing', label: t('engine.xintianNavHome'), icon: 'assistant' }, + ], + }, { + section: '', + items: [ + { route: '/about', label: t('sidebar.about'), icon: 'about' }, + ], + }] + }, + + getRoutes() { + return [ + { path: '/x/landing', loader: () => import('./pages/landing.js') }, + // 只暴露 /about；/settings 对心甜Claw 用户无意义，故不注册。 + // 切回 OpenClaw / Hermes 后会重新获得面板设置入口。 + { path: '/about', loader: () => import('../../pages/about.js') }, + ] + }, + + getSetupRoute() { return '/x/landing' }, + getDefaultRoute() { return '/x/landing' }, + + isReady() { return true }, + isGatewayRunning() { return false }, + isGatewayForeign() { return false }, + + onStateChange(fn) { + _listeners.push(fn) + return () => { _listeners = _listeners.filter(cb => cb !== fn) } + }, + onReadyChange(fn) { + _listeners.push(fn) + return () => { _listeners = _listeners.filter(cb => cb !== fn) } + }, + + isFeatureAvailable() { return true }, +} diff --git a/src/engines/xintian/pages/landing.js b/src/engines/xintian/pages/landing.js new file mode 100644 index 0000000..4f6a5ea --- /dev/null +++ b/src/engines/xintian/pages/landing.js @@ -0,0 +1,292 @@ +/** + * 心甜Claw · 产品落地页 + * ------------------------------------------------------------------ + * 面向 Windows 桌面客户端的产品宣传 + 下载引导页。 + * 所有可见文本走 i18n（engine.xt*），对外链接统一经过 openExternal() + * 在 Tauri 桌面端走 @tauri-apps/plugin-shell，Web 端回退到 window.open。 + */ +import { t } from '../../../lib/i18n.js' + +const WEBSITE_URL = 'https://xtclaw.xtnet.cc/' +const DOWNLOAD_URL = 'https://xtclaw.xtnet.cc/download' +const HELP_URL = 'https://xtclaw.xtnet.cc/articles' +// 新版六边形品牌图标（和 xintian-claw 桌面端同源） +const LOGO_SRC = '/images/xintian/logo-icon-128.png' +const LOGO_SRC_2X = '/images/xintian/logo-icon-256.png' +const LOGO_SRC_SM = '/images/xintian/logo-icon-64.png' + +// -------- 图标库（统一 stroke 风格，对齐编辑风品牌） -------- +const ICON = { + heart: ``, + sparkles: ``, + brain: ``, + agent: ``, + book: ``, + clock: ``, + skills: ``, + channels: ``, + shield: ``, + windows: ``, + download: ``, + external: ``, + check: ``, + arrowRight: ``, +} + +function esc(s) { return String(s ?? '').replace(//g, '>') } + +async function openExternal(url) { + if (!url) return + try { + if (window.__TAURI_INTERNALS__) { + const { open } = await import('@tauri-apps/plugin-shell') + await open(url) + return + } + } catch (_) { /* fallback */ } + try { window.open(url, '_blank', 'noopener,noreferrer') } catch (_) {} +} + +/** 核心能力（8 张卡片） */ +function getFeatures() { + return [ + { icon: ICON.sparkles, title: t('engine.xtFeatChatTitle'), desc: t('engine.xtFeatChatDesc') }, + { icon: ICON.agent, title: t('engine.xtFeatAgentTitle'), desc: t('engine.xtFeatAgentDesc') }, + { icon: ICON.brain, title: t('engine.xtFeatMemoryTitle'), desc: t('engine.xtFeatMemoryDesc') }, + { icon: ICON.book, title: t('engine.xtFeatRagTitle'), desc: t('engine.xtFeatRagDesc') }, + { icon: ICON.clock, title: t('engine.xtFeatCronTitle'), desc: t('engine.xtFeatCronDesc') }, + { icon: ICON.skills, title: t('engine.xtFeatSkillsTitle'), desc: t('engine.xtFeatSkillsDesc') }, + { icon: ICON.channels, title: t('engine.xtFeatChannelTitle'), desc: t('engine.xtFeatChannelDesc') }, + { icon: ICON.shield, title: t('engine.xtFeatOfflineTitle'), desc: t('engine.xtFeatOfflineDesc') }, + ] +} + +/** 定位对比（3 张卡） */ +function getCompareCards() { + return [ + { + id: 'openclaw', + eyebrow: t('engine.xtComparePosA'), + title: 'OpenClaw', + desc: t('engine.xtCompareADesc'), + tag: t('engine.xtCompareAForWho'), + }, + { + id: 'hermes', + eyebrow: t('engine.xtComparePosB'), + title: 'Hermes Agent', + desc: t('engine.xtCompareBDesc'), + tag: t('engine.xtCompareBForWho'), + }, + { + id: 'xintian', + eyebrow: t('engine.xtComparePosC'), + title: t('engine.xtCompareCTitle'), + desc: t('engine.xtCompareCDesc'), + tag: t('engine.xtCompareCForWho'), + highlight: true, + }, + ] +} + +/** 亮点清单（CTA 区下方） */ +function getChecklist() { + return [ + t('engine.xtBulletInstall'), + t('engine.xtBulletLogin'), + t('engine.xtBulletSync'), + t('engine.xtBulletSafe'), + ] +} + +// -------- 渲染 -------- + +export async function render() { + const root = document.createElement('div') + root.className = 'page' + // Scope xintian editorial styling to this subtree only. + root.dataset.engine = 'xintian' + + const features = getFeatures() + .map((f, i) => ` +
    +
    ${f.icon}
    +
    +

    ${esc(f.title)}

    +

    ${esc(f.desc)}

    +
    +
    + `).join('') + + const compareCards = getCompareCards() + .map(c => ` +
    +
    ${esc(c.eyebrow)}
    +
    ${esc(c.title)}
    +

    ${esc(c.desc)}

    +
    + + ${esc(c.tag)} +
    + ${c.highlight ? `
    ${esc(t('engine.xtCompareRecommend'))}
    ` : ''} +
    + `).join('') + + const bullets = getChecklist() + .map(b => `
  • ${ICON.check}${esc(b)}
    • `).join('') + + root.innerHTML = ` +
    + + + + +
    +
    + + ${esc(t('engine.xtHeroEyebrow'))} +
    +

    + ${esc(t('engine.xtHeroTitleLead'))} + ${esc(t('engine.xtHeroTitleA'))}${esc(t('engine.xtHeroTitleB'))}${esc(t('engine.xtHeroTitleC'))} +

    +

    ${esc(t('engine.xtHeroSub'))}

    +
    + + +
    +
    + ${esc(t('engine.xtHeroPlatformWin'))} + · + ${esc(t('engine.xtHeroPlatformRest'))} + · + ${esc(t('engine.xtHeroFreeTrial'))} +
    +
    + + +
    +
    + ${esc(t('engine.xtFeaturesEyebrow'))} +

    ${esc(t('engine.xtFeaturesTitle'))}

    +

    ${esc(t('engine.xtFeaturesSub'))}

    +
    +
    ${features}
    +
    + + +
    +
    + ${esc(t('engine.xtCompareEyebrow'))} +

    ${esc(t('engine.xtCompareTitle'))}

    +

    ${esc(t('engine.xtCompareSub'))}

    +
    +
    ${compareCards}
    +
    + + +
    +
    +
    + ${esc(t('engine.xtCtaEyebrow'))} +

    ${esc(t('engine.xtCtaTitle'))}

    +

    ${esc(t('engine.xtCtaSub'))}

    +
      ${bullets}
    +
    + + +
    +
    + ${esc(t('engine.xtCtaLinkLabel'))} + xtclaw.xtnet.cc + ${ICON.external} +
    +
    + + + +
    +
    + + + +
    + ` + + // 事件委托：所有 [data-xt-action] 元素 + root.addEventListener('click', (e) => { + const trigger = e.target.closest('[data-xt-action]') + if (!trigger) return + const action = trigger.dataset.xtAction + if (action === 'download') { + openExternal(DOWNLOAD_URL) + } else if (action === 'help') { + openExternal(HELP_URL) + } else if (action === 'website') { + openExternal(WEBSITE_URL) + } + }) + + return root +} + +export default { render } diff --git a/src/engines/xintian/style/xintian.css b/src/engines/xintian/style/xintian.css new file mode 100644 index 0000000..13da2a0 --- /dev/null +++ b/src/engines/xintian/style/xintian.css @@ -0,0 +1,1212 @@ +/** + * 心甜Claw (Xintian Claw) — Editorial Warm UI + * ------------------------------------------------------------------ + * Style archetype: Minimal editorial + warm pastel aurora + * Mood: friendly, premium, companion-like ("心甜" = sweet heart) + * Palette: peach cream + rose gold accent + warm off-white + * Scoped: everything lives under `[data-engine="xintian"]`, + * OpenClaw / Hermes are never touched. + */ + +/* ========================================================================== + * 0 · Design tokens — light (warm cream paper) + * ========================================================================== */ +[data-engine="xintian"] { + --xt-surface-0: #FFF9F4; /* page: warm cream */ + --xt-surface-1: #FFFFFF; /* raised card */ + --xt-surface-2: #FCF3E9; /* subtle inset */ + --xt-surface-3: #F5E6D3; /* deeper inset */ + + --xt-ink-primary: #1B1410; /* espresso */ + --xt-ink-secondary: #4A3B2E; /* warm brown */ + --xt-ink-tertiary: #7A6A5B; /* khaki gray */ + --xt-ink-muted: #A99A8B; /* sand */ + --xt-ink-inverse: #FFF9F4; + + --xt-border: rgba(27, 20, 16, 0.08); + --xt-border-soft: rgba(27, 20, 16, 0.04); + --xt-border-strong: rgba(27, 20, 16, 0.18); + + /* Accent = rose gold + peach */ + --xt-accent: #C2410C; /* orange-700 (rose-cedar) */ + --xt-accent-warm: #EA580C; /* orange-600 */ + --xt-accent-soft: rgba(234, 88, 12, 0.10); + --xt-accent-ring: rgba(234, 88, 12, 0.22); + + /* Decorative tints */ + --xt-peach: #FFD6B8; + --xt-rose: #FFC8D6; + --xt-butter: #FFE8B8; + --xt-sky: #BDE0FF; + + /* Gradient for CTAs */ + --xt-grad-warm: linear-gradient(135deg, #F97316 0%, #DB2777 100%); + --xt-grad-warm-hover: linear-gradient(135deg, #EA580C 0%, #BE185D 100%); + + --xt-font-serif: 'Playfair Display', 'Cormorant Garamond', 'Iowan Old Style', + 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', + 'Noto Serif SC', 'Source Han Serif SC', serif; + --xt-font-sans: 'Inter', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, + 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif; + --xt-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', + 'Fira Code', Consolas, 'Liberation Mono', monospace; + + --xt-radius-sm: 6px; + --xt-radius-md: 14px; + --xt-radius-lg: 22px; + --xt-radius-xl: 32px; + + --xt-dur-fast: 160ms; + --xt-dur-normal: 260ms; + --xt-dur-slow: 520ms; + --xt-ease: cubic-bezier(0.22, 0.61, 0.36, 1); +} + +/* Dark theme — warm black, not cool slate */ +[data-theme="dark"] [data-engine="xintian"], +[data-engine="xintian"][data-theme="dark"] { + --xt-surface-0: #18110B; /* warm espresso bg */ + --xt-surface-1: #241812; + --xt-surface-2: #2E1F16; + --xt-surface-3: #3C291D; + + --xt-ink-primary: #FFF4E6; + --xt-ink-secondary: #E8D5BE; + --xt-ink-tertiary: #B39C83; + --xt-ink-muted: #8A7560; + --xt-ink-inverse: #1B1410; + + --xt-border: rgba(255, 244, 230, 0.10); + --xt-border-soft: rgba(255, 244, 230, 0.06); + --xt-border-strong: rgba(255, 244, 230, 0.22); + + --xt-accent: #FB923C; /* orange-400 */ + --xt-accent-warm: #FDBA74; /* orange-300 */ + --xt-accent-soft: rgba(251, 146, 60, 0.12); + --xt-accent-ring: rgba(251, 146, 60, 0.28); +} + +/* ========================================================================== + * 1 · Page shell + * ========================================================================== */ +[data-engine="xintian"].page { + background: var(--xt-surface-0); + color: var(--xt-ink-primary); + font-family: var(--xt-font-sans); + min-height: 100%; + padding: 0; + overflow-x: hidden; +} + +[data-engine="xintian"] .xt-stage { + position: relative; + max-width: 1240px; + margin: 0 auto; + padding: 56px 48px 96px; +} + +@media (max-width: 860px) { + [data-engine="xintian"] .xt-stage { padding: 32px 20px 64px; } +} + +/* ========================================================================== + * 2 · Background aurora + grid + * ========================================================================== */ +[data-engine="xintian"] .xt-bg { + position: absolute; + inset: 0; + pointer-events: none; + overflow: hidden; + z-index: 0; +} + +[data-engine="xintian"] .xt-bg-blob { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.55; + animation: xt-float 14s var(--xt-ease) infinite alternate; +} +[data-engine="xintian"] .xt-bg-blob--1 { + top: -80px; left: -60px; + width: 420px; height: 420px; + background: radial-gradient(circle at 50% 50%, #FFD6B8 0%, transparent 70%); +} +[data-engine="xintian"] .xt-bg-blob--2 { + top: 120px; right: -100px; + width: 520px; height: 520px; + background: radial-gradient(circle at 50% 50%, #FFC8D6 0%, transparent 70%); + animation-delay: -5s; +} +[data-engine="xintian"] .xt-bg-blob--3 { + top: 520px; left: 30%; + width: 380px; height: 380px; + background: radial-gradient(circle at 50% 50%, #FFE8B8 0%, transparent 70%); + animation-delay: -9s; + opacity: 0.45; +} +[data-theme="dark"] [data-engine="xintian"] .xt-bg-blob--1 { background: radial-gradient(circle at 50% 50%, rgba(251,146,60,0.22) 0%, transparent 70%); } +[data-theme="dark"] [data-engine="xintian"] .xt-bg-blob--2 { background: radial-gradient(circle at 50% 50%, rgba(236,72,153,0.18) 0%, transparent 70%); } +[data-theme="dark"] [data-engine="xintian"] .xt-bg-blob--3 { background: radial-gradient(circle at 50% 50%, rgba(253,186,116,0.15) 0%, transparent 70%); } + +[data-engine="xintian"] .xt-bg-grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(var(--xt-border-soft) 1px, transparent 1px), + linear-gradient(90deg, var(--xt-border-soft) 1px, transparent 1px); + background-size: 64px 64px; + mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 70%); + -webkit-mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 70%); + opacity: 0.45; +} + +@keyframes xt-float { + 0% { transform: translate(0, 0) scale(1); } + 100% { transform: translate(40px, -30px) scale(1.08); } +} +@media (prefers-reduced-motion: reduce) { + [data-engine="xintian"] .xt-bg-blob { animation: none; } +} + +/* All content sits above the background */ +[data-engine="xintian"] .xt-stage > section, +[data-engine="xintian"] .xt-stage > header, +[data-engine="xintian"] .xt-stage > footer { position: relative; z-index: 1; } + +/* ========================================================================== + * 3 · Hero + * ========================================================================== */ +[data-engine="xintian"] .xt-hero { + text-align: center; + padding: 48px 0 24px; + max-width: 860px; + margin: 0 auto; +} + +[data-engine="xintian"] .xt-hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 14px 6px 10px; + background: var(--xt-surface-1); + border: 1px solid var(--xt-border); + border-radius: 999px; + font-size: 12px; + font-weight: 500; + color: var(--xt-ink-secondary); + letter-spacing: 0.02em; + box-shadow: 0 4px 20px -8px rgba(27, 20, 16, 0.10); + margin-bottom: 28px; +} +[data-engine="xintian"] .xt-hero-badge-dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--xt-accent); + box-shadow: 0 0 0 3px var(--xt-accent-soft); + animation: xt-pulse 2.4s var(--xt-ease) infinite; +} +@keyframes xt-pulse { + 0%, 100% { box-shadow: 0 0 0 3px var(--xt-accent-soft); } + 50% { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0.02); } +} + +[data-engine="xintian"] .xt-hero-title { + font-family: var(--xt-font-serif); + font-size: clamp(40px, 6vw, 68px); + line-height: 1.05; + letter-spacing: -0.02em; + font-weight: 500; + color: var(--xt-ink-primary); + margin: 0 0 20px; +} +[data-engine="xintian"] .xt-hero-title-lead { + display: block; + font-size: 0.32em; + font-family: var(--xt-font-sans); + font-weight: 500; + color: var(--xt-accent); + letter-spacing: 0.24em; + text-transform: uppercase; + margin-bottom: 14px; +} +[data-engine="xintian"] .xt-hero-title-main { display: block; } +[data-engine="xintian"] .xt-hero-title em { + font-style: italic; + background: var(--xt-grad-warm); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + padding: 0 0.08em; +} + +[data-engine="xintian"] .xt-hero-sub { + font-size: 18px; + line-height: 1.65; + color: var(--xt-ink-secondary); + margin: 0 auto 36px; + max-width: 620px; +} + +[data-engine="xintian"] .xt-hero-actions { + display: inline-flex; + gap: 12px; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 20px; +} + +[data-engine="xintian"] .xt-hero-meta { + display: inline-flex; + align-items: center; + gap: 8px; + color: var(--xt-ink-tertiary); + font-family: var(--xt-font-mono); + font-size: 12px; + letter-spacing: 0.02em; + flex-wrap: wrap; + justify-content: center; +} +[data-engine="xintian"] .xt-hero-meta-sep { opacity: 0.5; } + +/* ========================================================================== + * 4 · Buttons + * ========================================================================== */ +[data-engine="xintian"] .xt-btn { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 12px 22px; + border-radius: 999px; + border: 1px solid transparent; + background: transparent; + font-family: var(--xt-font-sans); + font-size: 14px; + font-weight: 600; + letter-spacing: 0.01em; + cursor: pointer; + transition: transform var(--xt-dur-fast) var(--xt-ease), + box-shadow var(--xt-dur-normal) var(--xt-ease), + background var(--xt-dur-normal) var(--xt-ease), + border-color var(--xt-dur-normal) var(--xt-ease), + color var(--xt-dur-normal) var(--xt-ease); + white-space: nowrap; + user-select: none; +} +[data-engine="xintian"] .xt-btn svg { + width: 16px; + height: 16px; + flex-shrink: 0; +} +[data-engine="xintian"] .xt-btn:active { transform: translateY(1px); } +[data-engine="xintian"] .xt-btn:focus-visible { + outline: none; + box-shadow: 0 0 0 3px var(--xt-accent-ring); +} + +[data-engine="xintian"] .xt-btn--primary { + background: var(--xt-grad-warm); + color: #FFF9F4; + border-color: transparent; + box-shadow: 0 10px 30px -12px rgba(234, 88, 12, 0.55), + 0 2px 6px rgba(234, 88, 12, 0.20), + inset 0 1px 0 rgba(255, 255, 255, 0.25); +} +[data-engine="xintian"] .xt-btn--primary:hover { + background: var(--xt-grad-warm-hover); + box-shadow: 0 14px 36px -10px rgba(234, 88, 12, 0.65), + 0 3px 10px rgba(234, 88, 12, 0.28), + inset 0 1px 0 rgba(255, 255, 255, 0.25); + transform: translateY(-1px); +} + +[data-engine="xintian"] .xt-btn--ghost { + background: var(--xt-surface-1); + color: var(--xt-ink-primary); + border-color: var(--xt-border); + box-shadow: 0 2px 8px -4px rgba(27, 20, 16, 0.06); +} +[data-engine="xintian"] .xt-btn--ghost:hover { + background: var(--xt-surface-2); + border-color: var(--xt-border-strong); + transform: translateY(-1px); +} + +[data-engine="xintian"] .xt-btn--ghost-dark { + background: rgba(255, 255, 255, 0.08); + color: var(--xt-ink-inverse); + border-color: rgba(255, 255, 255, 0.22); + backdrop-filter: blur(6px); +} +[data-engine="xintian"] .xt-btn--ghost-dark:hover { + background: rgba(255, 255, 255, 0.14); + border-color: rgba(255, 255, 255, 0.35); +} + +[data-engine="xintian"] .xt-btn--lg { + padding: 15px 28px; + font-size: 15px; +} +[data-engine="xintian"] .xt-btn--lg svg { + width: 18px; + height: 18px; +} + +/* ========================================================================== + * 5 · Section heads + * ========================================================================== */ +[data-engine="xintian"] .xt-section { + margin-top: 96px; +} +[data-engine="xintian"] .xt-section-head { + text-align: center; + max-width: 720px; + margin: 0 auto 48px; +} +[data-engine="xintian"] .xt-eyebrow { + display: inline-block; + font-family: var(--xt-font-mono); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.28em; + text-transform: uppercase; + color: var(--xt-accent); + margin-bottom: 16px; +} +[data-engine="xintian"] .xt-eyebrow--on-dark { color: var(--xt-accent-warm); } +[data-engine="xintian"] .xt-section-title { + font-family: var(--xt-font-serif); + font-size: clamp(28px, 4vw, 40px); + line-height: 1.15; + letter-spacing: -0.01em; + font-weight: 500; + color: var(--xt-ink-primary); + margin: 0 0 14px; +} +[data-engine="xintian"] .xt-section-sub { + font-size: 15px; + line-height: 1.7; + color: var(--xt-ink-tertiary); + margin: 0; +} + +/* ========================================================================== + * 6 · Feature grid + * ========================================================================== */ +[data-engine="xintian"] .xt-feat-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 18px; +} + +[data-engine="xintian"] .xt-feat { + position: relative; + display: flex; + gap: 16px; + padding: 22px 22px 22px 20px; + background: var(--xt-surface-1); + border: 1px solid var(--xt-border); + border-radius: var(--xt-radius-md); + transition: transform var(--xt-dur-normal) var(--xt-ease), + box-shadow var(--xt-dur-normal) var(--xt-ease), + border-color var(--xt-dur-normal) var(--xt-ease); + animation: xt-fade-up var(--xt-dur-slow) var(--xt-ease) both; + animation-delay: calc(var(--xt-i, 0) * 40ms); +} +[data-engine="xintian"] .xt-feat:hover { + transform: translateY(-2px); + border-color: var(--xt-border-strong); + box-shadow: 0 12px 32px -16px rgba(27, 20, 16, 0.18); +} + +[data-engine="xintian"] .xt-feat-ico { + width: 40px; + height: 40px; + border-radius: 12px; + display: grid; + place-items: center; + background: var(--xt-accent-soft); + color: var(--xt-accent); + flex-shrink: 0; +} +[data-engine="xintian"] .xt-feat-ico svg { + width: 20px; + height: 20px; +} + +[data-engine="xintian"] .xt-feat-body { min-width: 0; } +[data-engine="xintian"] .xt-feat-title { + font-size: 15px; + font-weight: 600; + color: var(--xt-ink-primary); + margin: 0 0 6px; + letter-spacing: 0.01em; +} +[data-engine="xintian"] .xt-feat-desc { + font-size: 13px; + line-height: 1.65; + color: var(--xt-ink-tertiary); + margin: 0; +} + +@keyframes xt-fade-up { + 0% { opacity: 0; transform: translateY(12px); } + 100% { opacity: 1; transform: translateY(0); } +} +@media (prefers-reduced-motion: reduce) { + [data-engine="xintian"] .xt-feat { animation: none; } +} + +/* ========================================================================== + * 7 · Compare + * ========================================================================== */ +[data-engine="xintian"] .xt-cmp-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; +} + +@media (max-width: 860px) { + [data-engine="xintian"] .xt-cmp-grid { grid-template-columns: 1fr; } +} + +[data-engine="xintian"] .xt-cmp-card { + position: relative; + padding: 28px 24px; + background: var(--xt-surface-1); + border: 1px solid var(--xt-border); + border-radius: var(--xt-radius-md); + transition: transform var(--xt-dur-normal) var(--xt-ease), + box-shadow var(--xt-dur-normal) var(--xt-ease), + border-color var(--xt-dur-normal) var(--xt-ease); +} +[data-engine="xintian"] .xt-cmp-card:hover { + transform: translateY(-2px); + border-color: var(--xt-border-strong); + box-shadow: 0 12px 32px -16px rgba(27, 20, 16, 0.18); +} + +[data-engine="xintian"] .xt-cmp-card--highlight { + background: linear-gradient(160deg, #FFF5EC 0%, #FFE8E0 100%); + border: 1px solid rgba(234, 88, 12, 0.35); + box-shadow: 0 14px 40px -18px rgba(234, 88, 12, 0.35); +} +[data-theme="dark"] [data-engine="xintian"] .xt-cmp-card--highlight { + background: linear-gradient(160deg, rgba(251,146,60,0.12) 0%, rgba(236,72,153,0.10) 100%); + border-color: rgba(251,146,60,0.45); + box-shadow: 0 14px 40px -18px rgba(251,146,60,0.40); +} +[data-engine="xintian"] .xt-cmp-card--highlight .xt-cmp-title { + background: var(--xt-grad-warm); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +[data-engine="xintian"] .xt-cmp-eyebrow { + font-family: var(--xt-font-mono); + font-size: 11px; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--xt-ink-tertiary); + margin-bottom: 10px; +} +[data-engine="xintian"] .xt-cmp-title { + font-family: var(--xt-font-serif); + font-size: 26px; + font-weight: 500; + color: var(--xt-ink-primary); + margin-bottom: 12px; + letter-spacing: -0.01em; +} +[data-engine="xintian"] .xt-cmp-desc { + font-size: 13.5px; + line-height: 1.7; + color: var(--xt-ink-secondary); + margin: 0 0 18px; + min-height: 70px; +} +[data-engine="xintian"] .xt-cmp-tag { + display: inline-flex; + align-items: center; + gap: 8px; + font-family: var(--xt-font-mono); + font-size: 11px; + letter-spacing: 0.06em; + color: var(--xt-ink-tertiary); + padding: 6px 12px 6px 10px; + background: var(--xt-surface-2); + border-radius: 999px; +} +[data-engine="xintian"] .xt-cmp-tag-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--xt-accent); +} +[data-engine="xintian"] .xt-cmp-card--highlight .xt-cmp-tag { + background: rgba(255, 255, 255, 0.6); + color: var(--xt-ink-secondary); +} +[data-theme="dark"] [data-engine="xintian"] .xt-cmp-card--highlight .xt-cmp-tag { + background: rgba(0, 0, 0, 0.25); +} + +[data-engine="xintian"] .xt-cmp-ribbon { + position: absolute; + top: -10px; + right: 20px; + padding: 4px 12px; + background: var(--xt-grad-warm); + color: #FFF9F4; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.18em; + text-transform: uppercase; + border-radius: 999px; + box-shadow: 0 6px 18px -6px rgba(234, 88, 12, 0.55); +} + +/* ========================================================================== + * 8 · CTA block (big dark canvas with preview) + * ========================================================================== */ +[data-engine="xintian"] .xt-cta { + margin-top: 104px; + position: relative; + border-radius: var(--xt-radius-xl); + overflow: hidden; + color: var(--xt-ink-inverse); + background: radial-gradient(circle at 20% 0%, rgba(251, 146, 60, 0.22) 0%, transparent 60%), + radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.20) 0%, transparent 60%), + linear-gradient(135deg, #1B1410 0%, #2E1F16 50%, #241812 100%); + box-shadow: 0 30px 60px -30px rgba(27, 20, 16, 0.45); +} + +[data-engine="xintian"] .xt-cta-inner { + display: grid; + grid-template-columns: 1.15fr 0.85fr; + gap: 48px; + align-items: center; + padding: 56px 56px; +} + +@media (max-width: 980px) { + [data-engine="xintian"] .xt-cta-inner { + grid-template-columns: 1fr; + padding: 40px 28px; + gap: 32px; + } +} + +[data-engine="xintian"] .xt-cta-left { min-width: 0; } + +[data-engine="xintian"] .xt-cta-title { + font-family: var(--xt-font-serif); + font-size: clamp(30px, 4.4vw, 44px); + line-height: 1.15; + letter-spacing: -0.01em; + font-weight: 500; + color: #FFF9F4; + margin: 0 0 14px; +} +[data-engine="xintian"] .xt-cta-sub { + font-size: 15.5px; + line-height: 1.7; + color: rgba(255, 249, 244, 0.78); + margin: 0 0 24px; +} + +[data-engine="xintian"] .xt-cta-bullets { + list-style: none; + padding: 0; + margin: 0 0 32px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px 20px; +} +@media (max-width: 620px) { + [data-engine="xintian"] .xt-cta-bullets { grid-template-columns: 1fr; } +} + +[data-engine="xintian"] .xt-bullet { + display: flex; + align-items: center; + gap: 10px; + font-size: 13.5px; + color: rgba(255, 249, 244, 0.88); +} +[data-engine="xintian"] .xt-bullet svg { + width: 14px; + height: 14px; + color: var(--xt-accent-warm); + flex-shrink: 0; +} + +[data-engine="xintian"] .xt-cta-actions { + display: flex; + gap: 12px; + flex-wrap: wrap; + margin-bottom: 22px; +} + +[data-engine="xintian"] .xt-cta-link { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 0; + color: rgba(255, 249, 244, 0.72); + font-family: var(--xt-font-mono); + font-size: 12.5px; + cursor: pointer; + transition: color var(--xt-dur-normal) var(--xt-ease); +} +[data-engine="xintian"] .xt-cta-link:hover { color: var(--xt-accent-warm); } +[data-engine="xintian"] .xt-cta-link-label { letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } +[data-engine="xintian"] .xt-cta-link-url { font-weight: 600; color: var(--xt-accent-warm); } +[data-engine="xintian"] .xt-cta-link svg { + width: 12px; + height: 12px; + opacity: 0.6; +} + +/* ========================================================================== + * 9 · Product preview (decorative chat mock) + * ========================================================================== */ +[data-engine="xintian"] .xt-cta-right { display: flex; justify-content: center; } + +[data-engine="xintian"] .xt-preview { + width: 100%; + max-width: 420px; + background: rgba(255, 249, 244, 0.06); + border: 1px solid rgba(255, 249, 244, 0.12); + border-radius: var(--xt-radius-lg); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + overflow: hidden; + box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), + inset 0 1px 0 rgba(255, 255, 255, 0.08); + transform: rotate(0.5deg); +} + +[data-engine="xintian"] .xt-preview-chrome { + display: flex; + align-items: center; + gap: 7px; + padding: 12px 16px; + border-bottom: 1px solid rgba(255, 249, 244, 0.08); +} +[data-engine="xintian"] .xt-preview-dot { + width: 9px; + height: 9px; + border-radius: 50%; + background: rgba(255, 249, 244, 0.20); +} +[data-engine="xintian"] .xt-preview-dot:nth-child(1) { background: #FB7185; } +[data-engine="xintian"] .xt-preview-dot:nth-child(2) { background: #FDBA74; } +[data-engine="xintian"] .xt-preview-dot:nth-child(3) { background: #86EFAC; } +[data-engine="xintian"] .xt-preview-title { + margin-left: 8px; + font-family: var(--xt-font-mono); + font-size: 11.5px; + color: rgba(255, 249, 244, 0.55); + letter-spacing: 0.06em; +} + +[data-engine="xintian"] .xt-preview-body { + padding: 18px 16px 22px; + display: flex; + flex-direction: column; + gap: 12px; +} + +[data-engine="xintian"] .xt-preview-msg { + display: flex; + gap: 10px; + align-items: flex-end; +} +[data-engine="xintian"] .xt-preview-msg--user { justify-content: flex-end; } + +[data-engine="xintian"] .xt-preview-avatar { + width: 28px; + height: 28px; + border-radius: 8px; + display: grid; + place-items: center; + overflow: hidden; + /* 纯白底让透明的六边形 logo 在深色 CTA 面板里清晰可辨 */ + background: #FFF9F4; + color: var(--xt-accent-warm); + flex-shrink: 0; + box-shadow: 0 4px 12px -4px rgba(234, 88, 12, 0.40), + inset 0 0 0 1px rgba(234, 88, 12, 0.18); +} +[data-engine="xintian"] .xt-preview-avatar svg { + width: 14px; + height: 14px; +} +[data-engine="xintian"] .xt-preview-avatar img { + width: 100%; + height: 100%; + display: block; + object-fit: contain; + padding: 2px; + box-sizing: border-box; +} + +[data-engine="xintian"] .xt-preview-bubble { + max-width: 280px; + padding: 10px 14px; + background: rgba(255, 249, 244, 0.10); + border: 1px solid rgba(255, 249, 244, 0.08); + border-radius: 14px; + border-bottom-left-radius: 4px; + font-size: 13px; + line-height: 1.55; + color: rgba(255, 249, 244, 0.92); +} +[data-engine="xintian"] .xt-preview-bubble--user { + background: var(--xt-grad-warm); + color: #FFF9F4; + border-color: transparent; + border-bottom-left-radius: 14px; + border-bottom-right-radius: 4px; +} +[data-engine="xintian"] .xt-preview-bubble-line { margin-bottom: 2px; } +[data-engine="xintian"] .xt-preview-bubble-line--muted { + color: rgba(255, 249, 244, 0.55); + font-size: 12px; + margin-top: 6px; +} + +[data-engine="xintian"] .xt-preview-typing { + display: inline-flex; + gap: 4px; + margin-top: 8px; +} +[data-engine="xintian"] .xt-preview-typing span { + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--xt-accent-warm); + animation: xt-typing 1.2s var(--xt-ease) infinite; +} +[data-engine="xintian"] .xt-preview-typing span:nth-child(2) { animation-delay: 0.15s; } +[data-engine="xintian"] .xt-preview-typing span:nth-child(3) { animation-delay: 0.30s; } +@keyframes xt-typing { + 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } + 30% { opacity: 1; transform: translateY(-3px); } +} +@media (prefers-reduced-motion: reduce) { + [data-engine="xintian"] .xt-preview-typing span { animation: none; } +} + +[data-engine="xintian"] .xt-preview-foot { + display: flex; + align-items: center; + gap: 6px; + padding: 10px 16px; + border-top: 1px solid rgba(255, 249, 244, 0.08); + font-family: var(--xt-font-mono); + font-size: 11px; + color: rgba(255, 249, 244, 0.50); + letter-spacing: 0.04em; +} +[data-engine="xintian"] .xt-preview-foot svg { + width: 12px; + height: 12px; + color: var(--xt-accent-warm); +} + +/* ========================================================================== + * 10 · Footer + * ========================================================================== */ +[data-engine="xintian"] .xt-foot { + margin-top: 64px; + padding-top: 28px; + border-top: 1px solid var(--xt-border); + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; +} + +[data-engine="xintian"] .xt-foot-brand { + display: inline-flex; + align-items: center; + gap: 8px; + font-family: var(--xt-font-serif); + font-size: 15px; + color: var(--xt-ink-secondary); + letter-spacing: 0.02em; +} +[data-engine="xintian"] .xt-foot-heart { + display: inline-grid; + place-items: center; + color: var(--xt-accent); +} +[data-engine="xintian"] .xt-foot-heart svg { + width: 16px; + height: 16px; +} +[data-engine="xintian"] .xt-foot-logo { + width: 18px; + height: 18px; + display: block; + object-fit: contain; +} + +[data-engine="xintian"] .xt-foot-links { + display: inline-flex; + align-items: center; + gap: 10px; + font-family: var(--xt-font-mono); + font-size: 12px; + color: var(--xt-ink-tertiary); +} +[data-engine="xintian"] .xt-foot-link { + cursor: pointer; + text-decoration: none; + color: inherit; + transition: color var(--xt-dur-normal) var(--xt-ease); +} +[data-engine="xintian"] .xt-foot-link:hover { color: var(--xt-accent); } +[data-engine="xintian"] .xt-foot-sep { opacity: 0.4; } + +/* ========================================================================== + * 11 · Responsive fine-tuning + * ========================================================================== */ +@media (max-width: 620px) { + [data-engine="xintian"] .xt-hero { padding-top: 24px; } + [data-engine="xintian"] .xt-hero-actions { flex-direction: column; width: 100%; } + [data-engine="xintian"] .xt-hero-actions .xt-btn { width: 100%; justify-content: center; } + [data-engine="xintian"] .xt-cta-actions { flex-direction: column; } + [data-engine="xintian"] .xt-cta-actions .xt-btn { width: 100%; justify-content: center; } + [data-engine="xintian"] .xt-section { margin-top: 72px; } + [data-engine="xintian"] .xt-cta { margin-top: 72px; } + [data-engine="xintian"] .xt-foot { justify-content: center; text-align: center; flex-direction: column; } +} + +/* ========================================================================== + * 12 · Sidebar adaptation — when xintian engine is active + * ------------------------------------------------------------------ + * engine-manager sets body[data-active-engine="xintian"] on activate. + * We restyle sidebar chrome (logo, header, engine switcher, nav, footer) + * to the warm editorial palette so the left rail visually aligns with + * the landing page's mood. + * ========================================================================== */ + +/* Swap the hard-coded ClawPanel claw icon for the xintian hexagon logo. + The is hard-coded in sidebar.js, so we + hide it and paint the new logo on the surrounding .sidebar-logo box. */ +body[data-active-engine="xintian"] .sidebar-logo { + background-image: url('/images/xintian/logo-icon-64.png'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + background-color: transparent; +} +body[data-active-engine="xintian"] .sidebar-logo img { visibility: hidden; } + +/* Sidebar base + header — warm cream paper feel */ +body[data-active-engine="xintian"] #sidebar { + background: #FFFBF6; + border-right: 1px solid rgba(27, 20, 16, 0.06); +} +body[data-active-engine="xintian"] .sidebar-header { + border-bottom: 1px solid rgba(27, 20, 16, 0.06); + padding: 14px 16px; +} +body[data-active-engine="xintian"] .sidebar-title { + font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; + font-weight: 500; + font-size: 17px; + letter-spacing: 0.005em; + color: #1B1410; +} +body[data-active-engine="xintian"] .sidebar-collapse-btn, +body[data-active-engine="xintian"] .sidebar-close-btn { + color: #7A6A5B; + transition: color 180ms ease, background 180ms ease; +} +body[data-active-engine="xintian"] .sidebar-collapse-btn:hover, +body[data-active-engine="xintian"] .sidebar-close-btn:hover { + color: #EA580C; + background: rgba(234, 88, 12, 0.08); +} + +/* Engine switcher — warm orange accent */ +body[data-active-engine="xintian"] .engine-switcher { + border-bottom: 1px solid rgba(27, 20, 16, 0.06); + padding: 14px 14px 16px; +} +body[data-active-engine="xintian"] .engine-switcher-label { + font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; + font-style: italic; + font-size: 11px; + font-weight: 400; + letter-spacing: 0.01em; + text-transform: none; + color: #7A6A5B; + padding: 0 4px 8px; +} +body[data-active-engine="xintian"] .engine-current { + padding: 10px 12px; + border: 1px solid rgba(234, 88, 12, 0.25); + border-radius: 8px; + background: rgba(234, 88, 12, 0.06); + color: #1B1410; + font-size: 13px; + font-weight: 500; + transition: border-color 180ms, background 180ms; +} +body[data-active-engine="xintian"] .engine-current:hover { + border-color: #EA580C; + background: rgba(234, 88, 12, 0.12); +} +body[data-active-engine="xintian"] .engine-icon { + color: #EA580C; + width: 18px; + height: 18px; + display: inline-grid; + place-items: center; +} +body[data-active-engine="xintian"] .engine-icon img { + width: 18px; + height: 18px; + object-fit: contain; + display: block; +} +body[data-active-engine="xintian"] .engine-dropdown { + background: #FFFFFF; + border: 1px solid rgba(27, 20, 16, 0.08); + box-shadow: 0 1px 2px rgba(27, 20, 16, 0.04), + 0 8px 24px rgba(27, 20, 16, 0.10); + border-radius: 10px; + padding: 4px; +} +body[data-active-engine="xintian"] .engine-option { + padding: 8px 10px; + border-radius: 6px; + color: #44403C; +} +body[data-active-engine="xintian"] .engine-option:hover { + background: rgba(234, 88, 12, 0.08); + color: #1B1410; +} +body[data-active-engine="xintian"] .engine-option.active, +body[data-active-engine="xintian"] .engine-active-check { + color: #EA580C; + font-weight: 500; +} +body[data-active-engine="xintian"] .engine-opt-icon img { + width: 16px; + height: 16px; + object-fit: contain; + display: block; +} + +/* Nav sections — italic serif titles */ +body[data-active-engine="xintian"] .nav-section-title { + font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; + font-style: italic; + font-size: 11px; + font-weight: 400; + letter-spacing: 0.01em; + text-transform: none; + color: #A99A8B; + padding: 14px 14px 6px; +} + +/* Nav items — minimal with warm-orange active indicator */ +body[data-active-engine="xintian"] .sidebar-nav { padding: 4px 10px; } +body[data-active-engine="xintian"] .nav-item { + padding: 9px 14px; + border-radius: 6px; + color: #44403C; + font-size: 13px; + font-weight: 500; + letter-spacing: 0.005em; + transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), + color 180ms cubic-bezier(0.22, 1, 0.36, 1); + position: relative; +} +body[data-active-engine="xintian"] .nav-item:hover { + background: rgba(27, 20, 16, 0.04); + color: #1B1410; +} +body[data-active-engine="xintian"] .nav-item.active { + background: rgba(234, 88, 12, 0.08); + color: #EA580C; + font-weight: 500; +} +body[data-active-engine="xintian"] .nav-item.active::before { + content: ''; + position: absolute; + left: 5px; + top: 50%; + transform: translateY(-50%); + width: 2px; + height: 16px; + background: #EA580C; + border-radius: 2px; +} +body[data-active-engine="xintian"] .nav-item svg { + opacity: 0.6; + width: 16px; + height: 16px; +} +body[data-active-engine="xintian"] .nav-item.active svg { + opacity: 1; + color: #EA580C; +} + +/* Footer (theme, lang, meta) */ +body[data-active-engine="xintian"] .sidebar-footer { + border-top: 1px solid rgba(27, 20, 16, 0.06); + padding: 8px 10px; +} +body[data-active-engine="xintian"] #btn-theme-toggle, +body[data-active-engine="xintian"] .lang-trigger { + padding: 8px 14px; + border-radius: 6px; + color: #7A6A5B; + font-size: 12.5px; + transition: background 180ms, color 180ms; +} +body[data-active-engine="xintian"] #btn-theme-toggle:hover, +body[data-active-engine="xintian"] .lang-trigger:hover { + background: rgba(27, 20, 16, 0.04); + color: #1B1410; +} +body[data-active-engine="xintian"] .lang-dropdown { + background: #FFFFFF; + border: 1px solid rgba(27, 20, 16, 0.08); + box-shadow: 0 -4px 16px rgba(27, 20, 16, 0.10); + border-radius: 8px; +} +body[data-active-engine="xintian"] .lang-option { + padding: 8px 12px; + border-radius: 4px; + color: #44403C; + font-size: 12.5px; +} +body[data-active-engine="xintian"] .lang-option:hover { + background: rgba(234, 88, 12, 0.06); +} +body[data-active-engine="xintian"] .lang-option.active, +body[data-active-engine="xintian"] .lang-option-check { + color: #EA580C; + font-weight: 500; +} +body[data-active-engine="xintian"] .lang-option-code { + font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; + font-size: 10.5px; + color: #A99A8B; +} + +/* Footer meta strip */ +body[data-active-engine="xintian"] .sidebar-meta { + font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; + font-size: 10.5px; + padding: 8px 14px 4px; + color: #A99A8B; +} +body[data-active-engine="xintian"] .sidebar-link { + color: #A99A8B; + transition: color 180ms; +} +body[data-active-engine="xintian"] .sidebar-link:hover { color: #EA580C; } +body[data-active-engine="xintian"] .sidebar-version { color: #A99A8B; } + +/* ---- Dark mode variants (warm espresso, not cool slate) ---- */ +[data-theme="dark"] body[data-active-engine="xintian"] #sidebar { + background: #1C130D; + border-right-color: rgba(255, 244, 230, 0.06); +} +[data-theme="dark"] body[data-active-engine="xintian"] .sidebar-header { + border-bottom-color: rgba(255, 244, 230, 0.06); +} +[data-theme="dark"] body[data-active-engine="xintian"] .sidebar-title { + color: #FFF4E6; +} +[data-theme="dark"] body[data-active-engine="xintian"] .engine-switcher { + border-bottom-color: rgba(255, 244, 230, 0.06); +} +[data-theme="dark"] body[data-active-engine="xintian"] .engine-switcher-label, +[data-theme="dark"] body[data-active-engine="xintian"] .nav-section-title { + color: #8A7560; +} +[data-theme="dark"] body[data-active-engine="xintian"] .engine-current { + border-color: rgba(251, 146, 60, 0.35); + background: rgba(251, 146, 60, 0.10); + color: #FFF4E6; +} +[data-theme="dark"] body[data-active-engine="xintian"] .engine-current:hover { + border-color: #FB923C; + background: rgba(251, 146, 60, 0.18); +} +[data-theme="dark"] body[data-active-engine="xintian"] .engine-icon, +[data-theme="dark"] body[data-active-engine="xintian"] .engine-option.active, +[data-theme="dark"] body[data-active-engine="xintian"] .engine-active-check { + color: #FB923C; +} +[data-theme="dark"] body[data-active-engine="xintian"] .engine-dropdown { + background: #2E1F16; + border-color: rgba(255, 244, 230, 0.08); + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); +} +[data-theme="dark"] body[data-active-engine="xintian"] .engine-option { + color: #E8D5BE; +} +[data-theme="dark"] body[data-active-engine="xintian"] .engine-option:hover { + background: rgba(251, 146, 60, 0.12); + color: #FFF4E6; +} +[data-theme="dark"] body[data-active-engine="xintian"] .nav-item { + color: #E8D5BE; +} +[data-theme="dark"] body[data-active-engine="xintian"] .nav-item:hover { + background: rgba(255, 244, 230, 0.05); + color: #FFF4E6; +} +[data-theme="dark"] body[data-active-engine="xintian"] .nav-item.active { + background: rgba(251, 146, 60, 0.14); + color: #FB923C; +} +[data-theme="dark"] body[data-active-engine="xintian"] .nav-item.active::before { background: #FB923C; } +[data-theme="dark"] body[data-active-engine="xintian"] .nav-item.active svg { color: #FB923C; } +[data-theme="dark"] body[data-active-engine="xintian"] .sidebar-footer { + border-top-color: rgba(255, 244, 230, 0.06); +} +[data-theme="dark"] body[data-active-engine="xintian"] #btn-theme-toggle, +[data-theme="dark"] body[data-active-engine="xintian"] .lang-trigger { + color: #B39C83; +} +[data-theme="dark"] body[data-active-engine="xintian"] #btn-theme-toggle:hover, +[data-theme="dark"] body[data-active-engine="xintian"] .lang-trigger:hover { + background: rgba(255, 244, 230, 0.05); + color: #FFF4E6; +} +[data-theme="dark"] body[data-active-engine="xintian"] .lang-dropdown { + background: #2E1F16; + border-color: rgba(255, 244, 230, 0.08); +} +[data-theme="dark"] body[data-active-engine="xintian"] .lang-option { color: #E8D5BE; } +[data-theme="dark"] body[data-active-engine="xintian"] .lang-option:hover { + background: rgba(251, 146, 60, 0.10); +} +[data-theme="dark"] body[data-active-engine="xintian"] .lang-option.active, +[data-theme="dark"] body[data-active-engine="xintian"] .lang-option-check { + color: #FB923C; +} +[data-theme="dark"] body[data-active-engine="xintian"] .sidebar-meta, +[data-theme="dark"] body[data-active-engine="xintian"] .sidebar-link, +[data-theme="dark"] body[data-active-engine="xintian"] .sidebar-version { + color: #8A7560; +} +[data-theme="dark"] body[data-active-engine="xintian"] .sidebar-link:hover { color: #FB923C; } +[data-theme="dark"] body[data-active-engine="xintian"] .sidebar-logo { + background-image: url('/images/xintian/logo-icon-128.png'); +} diff --git a/src/lib/engine-manager.js b/src/lib/engine-manager.js index da89477..d740a43 100644 --- a/src/lib/engine-manager.js +++ b/src/lib/engine-manager.js @@ -82,6 +82,10 @@ export async function activateEngine(id, persist = true) { _activeEngine = engine + // 给 设置 data-active-engine 属性，供全局组件（sidebar 等）做 + // 引擎级样式切换（e.g. Hermes 激活时 sidebar 套 editorial luxury 主题） + try { document.body.dataset.activeEngine = engine.id } catch {} + // 注册引擎路由 + 设置默认路由 const routes = engine.getRoutes() for (const r of routes) { diff --git a/src/lib/icons.js b/src/lib/icons.js index 89d054c..815f373 100644 --- a/src/lib/icons.js +++ b/src/lib/icons.js @@ -9,6 +9,7 @@ const PATHS = { 'x-circle': '', 'alert-triangle': '', 'info': '', + 'circle': '', // 简单指示符 'check': '', diff --git a/src/lib/tauri-api.js b/src/lib/tauri-api.js index 0cf1637..5787fa2 100644 --- a/src/lib/tauri-api.js +++ b/src/lib/tauri-api.js @@ -404,20 +404,38 @@ export const api = { hermesEnvReadUnmanaged: () => invoke('hermes_env_read_unmanaged'), hermesEnvSet: (key, value) => invoke('hermes_env_set', { key, value }), hermesEnvDelete: (key) => invoke('hermes_env_delete', { key }), + hermesEnvReveal: (key) => invoke('hermes_env_reveal', { key }), + hermesConfigRawRead: () => invoke('hermes_config_raw_read'), + hermesConfigRawWrite: (yamlText) => invoke('hermes_config_raw_write', { yamlText }), hermesDetectEnvironments: () => invoke('hermes_detect_environments'), hermesSetGatewayUrl: (url) => invoke('hermes_set_gateway_url', { url: url || null }), updateHermes: () => invoke('update_hermes'), uninstallHermes: (cleanConfig = false) => invoke('uninstall_hermes', { cleanConfig }), // Hermes Sessions / Logs / Skills / Memory - hermesSessionsList: (source, limit) => invoke('hermes_sessions_list', { source: source || null, limit: limit || null }), - hermesSessionDetail: (sessionId) => invoke('hermes_session_detail', { sessionId }), - hermesSessionDelete: (sessionId) => invoke('hermes_session_delete', { sessionId }), - hermesSessionRename: (sessionId, title) => invoke('hermes_session_rename', { sessionId, title }), + hermesSessionsList: (source, limit, profile) => invoke('hermes_sessions_list', { source: source || null, limit: limit || null, profile: profile || null }), + hermesSessionsSummaryList: (source, limit, profile) => invoke('hermes_sessions_summary_list', { source: source || null, limit: limit || null, profile: profile || null }), + hermesUsageAnalytics: (days, profile) => invoke('hermes_usage_analytics', { days: days || 30, profile: profile || null }), + hermesSessionDetail: (sessionId, profile) => invoke('hermes_session_detail', { sessionId, profile: profile || null }), + hermesSessionDelete: (sessionId, profile) => invoke('hermes_session_delete', { sessionId, profile: profile || null }), + hermesSessionRename: (sessionId, title, profile) => invoke('hermes_session_rename', { sessionId, title, profile: profile || null }), + hermesProfilesList: () => invoke('hermes_profiles_list'), + hermesProfileUse: (name) => invoke('hermes_profile_use', { name }), hermesLogsList: () => invoke('hermes_logs_list'), hermesLogsRead: (name, lines, level) => invoke('hermes_logs_read', { name, lines: lines || 200, level: level || null }), + hermesLogsDownload: (name, saveToDisk = isTauriRuntime()) => invoke('hermes_logs_download', { name, saveToDisk }), + hermesDashboardThemes: () => invoke('hermes_dashboard_themes'), + hermesDashboardThemeSet: (name) => invoke('hermes_dashboard_theme_set', { name }), + hermesDashboardPlugins: () => invoke('hermes_dashboard_plugins'), + hermesDashboardPluginsRescan: () => invoke('hermes_dashboard_plugins_rescan'), + hermesToolsetsList: () => invoke('hermes_toolsets_list'), + hermesCronJobsList: () => invoke('hermes_cron_jobs_list'), hermesSkillsList: () => invoke('hermes_skills_list'), hermesSkillDetail: (filePath) => invoke('hermes_skill_detail', { filePath }), + hermesSkillToggle: (name, enabled) => invoke('hermes_skill_toggle', { name, enabled }), + hermesSkillFiles: (category, skill) => invoke('hermes_skill_files', { category, skill }), + hermesSkillWrite: (filePath, content) => invoke('hermes_skill_write', { filePath, content }), hermesMemoryRead: (type) => invoke('hermes_memory_read', { type: type || 'memory' }), hermesMemoryWrite: (type, content) => invoke('hermes_memory_write', { type: type || 'memory', content }), + hermesMemoryReadAll: () => invoke('hermes_memory_read_all'), } diff --git a/src/lib/theme.js b/src/lib/theme.js index 30bb71f..7b2ef13 100644 --- a/src/lib/theme.js +++ b/src/lib/theme.js @@ -1,8 +1,45 @@ /** * 主题管理（日间/夜间模式） + * + * 桌面端：除了切换 ``，还会同步 Tauri 原生窗口标题栏的 + * 主题（Windows 下通过 DwmSetWindowAttribute 切 immersive dark mode）， + * 避免夜间模式下出现"应用黑、窗口栏白"的割裂观感。Web 端该步骤会安静跳过。 */ +import { isTauriRuntime } from './tauri-api.js' + const THEME_KEY = 'clawpanel-theme' +// 延迟加载 Tauri window 模块，Web 构建不会真正拉取 +let _tauriWindowModule = null +async function getTauriCurrentWindow() { + if (!isTauriRuntime()) return null + if (_tauriWindowModule === false) return null + if (!_tauriWindowModule) { + try { + _tauriWindowModule = await import('@tauri-apps/api/window') + } catch (_) { + _tauriWindowModule = false + return null + } + } + try { + return _tauriWindowModule.getCurrentWindow() + } catch (_) { + return null + } +} + +async function syncTauriTitleBar(theme) { + const win = await getTauriCurrentWindow() + if (!win || typeof win.setTheme !== 'function') return + try { + // Tauri v2: 接受 'light' | 'dark' | null（null = 跟随系统） + await win.setTheme(theme === 'dark' ? 'dark' : 'light') + } catch (_) { + // 某些 WebView2 版本或未授权时会抛错，静默忽略 + } +} + export function initTheme() { const saved = localStorage.getItem(THEME_KEY) const theme = saved || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') @@ -39,4 +76,6 @@ export function getTheme() { function applyTheme(theme) { document.documentElement.dataset.theme = theme localStorage.setItem(THEME_KEY, theme) + // Fire-and-forget，不等待 Tauri IPC 返回，避免阻塞 DOM 更新和过渡动画 + syncTauriTitleBar(theme) } diff --git a/src/locales/modules/engine.js b/src/locales/modules/engine.js index a30d3ce..5b2b768 100644 --- a/src/locales/modules/engine.js +++ b/src/locales/modules/engine.js @@ -4,7 +4,7 @@ export default { switchedTo: _('已切换到 {name} 模式', 'Switched to {name} mode', '已切換到 {name} 模式', '{name} モードに切り替えました', '{name} 모드로 전환됨'), switchFailed: _('引擎切换失败，请稍后重试', 'Engine switch failed, please try again later', '引擎切換失敗，請稍後重試', 'エンジンの切り替えに失敗しました。後でもう一度お試しください', '엔진 전환에 실패했습니다. 잠시 후 다시 시도해 주세요'), switcherSectionLabel: _('引擎', 'Engine', '引擎', 'エンジン', '엔진', 'Động cơ', 'Motor', 'Motor', 'Движок', 'Moteur', 'Engine'), - switcherTooltip: _('点击切换引擎（OpenClaw / Hermes Agent）', 'Click to switch engine (OpenClaw / Hermes Agent)', '點擊切換引擎（OpenClaw / Hermes Agent）', 'クリックしてエンジンを切り替え (OpenClaw / Hermes Agent)', '엔진 전환하려면 클릭 (OpenClaw / Hermes Agent)', 'Nhấp để chuyển đổi engine (OpenClaw / Hermes Agent)', 'Haga clic para cambiar de motor (OpenClaw / Hermes Agent)', 'Clique para alternar o motor (OpenClaw / Hermes Agent)', 'Нажмите, чтобы переключить движок (OpenClaw / Hermes Agent)', 'Cliquez pour changer de moteur (OpenClaw / Hermes Agent)', 'Klicken, um die Engine zu wechseln (OpenClaw / Hermes Agent)'), + switcherTooltip: _('点击切换引擎', 'Click to switch engine', '點擊切換引擎', 'クリックしてエンジンを切り替え', '엔진 전환하려면 클릭', 'Nhấp để chuyển đổi engine', 'Haga clic para cambiar de motor', 'Clique para alternar o motor', 'Нажмите, чтобы переключить движок', 'Cliquez pour changer de moteur', 'Klicken, um die Engine zu wechseln'), hermesSetupDesc: _('安装并配置 Hermes Agent', 'Install and configure Hermes Agent', '安裝並配置 Hermes Agent'), hermesPhaseClickHint: _('点击可返回此步骤', 'Click to go back to this step', '點擊可返回此步驟', 'このステップに戻るにはクリック', '이 단계로 돌아가려면 클릭'), hermesSetupIntro: _( @@ -111,18 +111,55 @@ export default { dashOpenChat: _('打开对话', 'Open Chat', '開啟對話'), dashOpenPanel: _('打开面板', 'Open Panel', '開啟面板'), dashOpenPanelDesc: _('Hermes 对话面板', 'Hermes Chat Panel', 'Hermes 對話面板'), + // Native Hermes dashboard launcher + dashNativePanel: _('原生 Dashboard', 'Native Dashboard', '原生 Dashboard', 'ネイティブ Dashboard', '네이티브 Dashboard'), + dashNativePanelDesc: _('也可使用原生 hermes dashboard（默认 9119，需自行启动）', 'You can also use the native hermes dashboard (default 9119; start it manually).', '也可使用原生 hermes dashboard（預設 9119，需自行啟動）'), + dashNativePanelOpen: _('打开 9119 →', 'Open 9119 →', '開啟 9119 →', '9119 を開く →', '9119 열기 →'), + dashNativePanelOffline: _('Gateway 未运行', 'Gateway offline', 'Gateway 未執行', 'Gateway 未実行', 'Gateway 미실행'), + dashNativePanelTooOld: _('需 v0.10.0+', 'Requires v0.10.0+', '需 v0.10.0+', 'v0.10.0+ が必要', 'v0.10.0+ 필요'), + dashNativePanelOpenFail: _('打开浏览器失败', 'Failed to open browser', '開啟瀏覽器失敗', 'ブラウザを開くのに失敗しました', '브라우저 열기 실패'), dashOpenCron: _('定时任务', 'Cron Jobs', '定時任務'), dashOpenSetup: _('重新配置', 'Reconfigure', '重新配置'), dashNoModel: _('未配置', 'Not configured', '未配置'), dashApiEndpoint: _('API 地址', 'API Endpoint', 'API 地址'), dashModelConfig: _('模型配置', 'Model Config', '模型配置'), + dashEyebrowLoading: _('HERMES AGENT · GATEWAY', 'HERMES AGENT · GATEWAY', 'HERMES AGENT · GATEWAY'), + dashEyebrowOnline: _('HERMES AGENT · GATEWAY 在线', 'HERMES AGENT · GATEWAY ONLINE', 'HERMES AGENT · GATEWAY 在線'), + dashEyebrowOffline: _('HERMES AGENT · GATEWAY 离线', 'HERMES AGENT · GATEWAY OFFLINE', 'HERMES AGENT · GATEWAY 離線'), + dashRefresh: _('刷新', 'Refresh', '重新整理'), + dashProvider: _('服务商', 'Provider', '服務商'), + dashProviderPresets: _('服务商预设', 'Provider Presets', '服務商預設'), + dashApiBaseUrl: _('API Base URL', 'API Base URL', 'API Base URL'), + dashApiKey: _('API Key', 'API Key', 'API Key'), + dashEnvAdvancedEdit: _('.env 高级编辑 →', '.env Advanced Edit →', '.env 進階編輯 →'), dashConnectTarget: _('连接目标', 'Connection Target', '連接目標'), dashDetectEnv: _('探测环境', 'Detect Environments', '探測環境'), dashDetecting: _('探测中...', 'Detecting...', '探測中...'), dashConnLocal: _('本地', 'Local', '本地'), + dashConnWsl2: _('WSL2', 'WSL2', 'WSL2'), + dashConnDocker: _('Docker', 'Docker', 'Docker'), dashConnCustom: _('自定义', 'Custom', '自訂'), dashConnApply: _('应用', 'Apply', '套用'), dashQuickSwitch: _('快速切换', 'Quick Switch', '快速切換'), + dashHermesMissing: _('Hermes 未安装', 'Hermes not installed', 'Hermes 未安裝'), + dashGatewayNotRunning: _('Gateway 未运行', 'Gateway not running', 'Gateway 未執行'), + dashNoHermesContainers: _('未发现 Hermes 容器', 'No Hermes containers found', '未發現 Hermes 容器'), + dashInteractiveSession: _('交互式会话 →', 'interactive session →', '互動式會話 →'), + dashInstallerWizard: _('安装向导 →', 'installer wizard →', '安裝精靈 →'), + dashLogsFoot: _('追踪 / 搜索 →', 'tail / search →', '追蹤 / 搜尋 →'), + dashAdvancedEdit: _('高级编辑', 'advanced edit', '進階編輯'), + dashCustomVars: _('自定义变量 →', 'custom vars →', '自訂變數 →'), + dashCliCommand: _('命令', 'Command', '命令'), + dashCliDescription: _('说明', 'Description', '說明'), + dashCliCopy: _('复制', 'Copy', '複製'), + dashGatewayStarted: _('Gateway 已启动', 'Gateway started', 'Gateway 已啟動'), + dashConfigPatched: _('config.yaml 已自动修复', 'config.yaml was auto-repaired', 'config.yaml 已自動修復'), + configModelRequired: _('请输入模型名', 'Enter a model name', '請輸入模型名稱'), + configSaved: _('配置已保存', 'Config saved', '配置已儲存'), + envDetectFailed: _('探测失败', 'Detection failed', '探測失敗'), + connWslGatewayMissing: _('WSL2 Gateway 未运行，请先在 WSL 中启动', 'WSL2 Gateway is not running. Start it in WSL first.', 'WSL2 Gateway 未執行，請先在 WSL 中啟動'), + connDockerCustomHint: _('请切换到“自定义”模式并输入容器的 Gateway URL', 'Switch to Custom mode and enter the container Gateway URL.', '請切換到「自訂」模式並輸入容器的 Gateway URL'), + connUrlRequired: _('请输入 Gateway URL', 'Enter Gateway URL', '請輸入 Gateway URL'), // 终端命令 dashCliTitle: _('终端命令', 'Terminal Commands', '終端命令'), dashCliDesc: _('在终端中使用以下命令管理 Hermes Agent，点击复制', 'Use these commands in your terminal to manage Hermes Agent. Click to copy.', '在終端中使用以下命令管理 Hermes Agent，點擊複製'), @@ -147,11 +184,148 @@ export default { chatPlaceholder: _('输入消息...', 'Type a message...', '輸入訊息...'), chatSend: _('发送', 'Send', '發送'), chatNewSession: _('新对话', 'New Chat', '新對話'), + chatNewChat: _('新建', 'New chat', '新建'), chatThinking: _('正在思考...', 'Thinking...', '正在思考...'), chatError: _('发送失败: {error}', 'Send failed: {error}', '發送失敗: {error}'), + chatErrorBadge: _('失败', 'Error', '失敗'), chatGatewayOffline: _('Gateway 未运行，请先启动', 'Gateway is offline, please start it first', 'Gateway 未運行，請先啟動'), + chatGatewayOnline: _('Gateway 运行中', 'Gateway online', 'Gateway 運行中'), + // Short labels for the header pill — full sentence lives in the tooltip + chatGatewayOfflineShort: _('离线', 'Offline', '離線'), + chatGatewayOnlineShort: _('在线', 'Online', '線上'), chatWelcome: _('你好！我是 Hermes Agent，有什么可以帮你的？', 'Hello! I\'m Hermes Agent, how can I help?', '你好！我是 Hermes Agent，有什麼可以幫你的？'), chatEmptyHint: _('开始一段对话吧', 'Start a conversation', '開始一段對話吧'), + chatEmptyTitle: _('和 Hermes Agent 对话', 'Talk to Hermes Agent', '和 Hermes Agent 對話'), + chatEmptySub: _('输入消息开始，或用 /help 查看命令。', 'Type a message to begin, or /help for commands.', '輸入訊息開始，或用 /help 查看命令。'), + chatLoadingMessages: _('正在载入会话', 'Loading session', '正在載入會話', 'セッションを読み込み中', '세션 불러오는 중'), + chatLoadingMessagesSub: _('正在同步 Hermes 历史消息...', 'Syncing Hermes message history…', '正在同步 Hermes 歷史訊息...', 'Hermes の履歴メッセージを同期中...', 'Hermes 메시지 기록 동기화 중...'), + // 会话侧栏 + chatSessions: _('会话', 'Sessions', '會話'), + chatPinned: _('置顶', 'Pinned', '釘選'), + chatLoading: _('加载中...', 'Loading...', '載入中...'), + chatNoSessions: _('暂无会话', 'No sessions yet', '暫無會話'), + chatLive: _('活跃', 'Live', '活躍'), + chatToggleSidebar: _('切换侧栏', 'Toggle sidebar', '切換側欄'), + chatShowSessions: _('显示会话', 'Show sessions', '顯示會話', 'セッションを表示', '세션 표시'), + chatHideSessions: _('隐藏会话', 'Hide sessions', '隱藏會話', 'セッションを隠す', '세션 숨기기'), + chatSessionManageHint: _('右键会话，或点 ··· / 删除 管理', 'Right-click a session, or use ··· / Delete', '右鍵會話，或點 ··· / 刪除 管理', '右クリック、または ··· / 削除で管理', '우클릭 또는 ··· / 삭제로 관리'), + chatSessionActions: _('会话操作', 'Session actions', '會話操作', 'セッション操作', '세션 작업'), + chatMoreActions: _('更多操作', 'More actions', '更多操作', 'その他の操作', '더 많은 작업'), + chatDeleteShort: _('删除', 'Delete', '刪除', '削除', '삭제'), + // 输入区 + // 占位符直接吸收键位提示，避免输入框下方再来一条同义 hint 形成"套娃" + chatInputPlaceholder: _( + '输入消息... (Enter 发送，Shift+Enter 换行，/ 调出命令)', + 'Type a message... (Enter to send, Shift+Enter for new line, / for commands)', + '輸入訊息... (Enter 發送，Shift+Enter 換行，/ 調出命令)', + 'メッセージを入力... (Enter で送信、Shift+Enter で改行、/ でコマンド)', + '메시지 입력... (Enter 전송, Shift+Enter 줄 바꿈, / 명령)', + ), + chatStreamingPlaceholder: _('Agent 回答中...', 'Agent is responding...', 'Agent 回答中...'), + // Token 用量条 — 来自 `hermes sessions export` 的累计字段 + chatUsageIn: _('输入', 'In', '輸入', '入力', '입력'), + chatUsageOut: _('输出', 'Out', '輸出', '出力', '출력'), + chatUsageCache: _('缓存', 'Cache', '快取', 'キャッシュ', '캐시'), + chatUsageTooltip: _( + '本会话累计 token 用量与估算成本', + 'Cumulative token usage and estimated cost for this session', + '本會話累計 token 用量與估算成本', + 'このセッションの累積トークン使用量と推定コスト', + '이 세션의 누적 토큰 사용량 및 추정 비용', + ), + // 工具调用 + chatArguments: _('入参', 'Arguments', '入參'), + chatResult: _('输出', 'Result', '輸出'), + // 上下文菜单 + chatPin: _('置顶会话', 'Pin session', '釘選會話'), + chatUnpin: _('取消置顶', 'Unpin session', '取消釘選'), + chatRename: _('重命名', 'Rename', '重新命名'), + chatRenameSession: _('重命名会话', 'Rename session', '重新命名會話'), + chatEnterNewTitle: _('输入新标题...', 'Enter new title…', '輸入新標題...'), + chatRenamed: _('已重命名', 'Renamed', '已重新命名'), + chatRenameFailed: _('重命名失败', 'Rename failed', '重新命名失敗'), + chatCopySessionId: _('复制会话 ID', 'Copy session ID', '複製會話 ID'), + chatCopyMessage: _('复制消息', 'Copy message', '複製訊息', 'メッセージをコピー', '메시지 복사'), + chatCopyMessageShort: _('复制', 'Copy', '複製', 'コピー', '복사'), + chatCopyCode: _('复制代码', 'Copy code', '複製程式碼', 'コードをコピー', '코드 복사'), + chatCopyFailed: _('复制失败', 'Copy failed', '複製失敗'), + chatDeleteSession: _('删除会话', 'Delete session', '刪除會話'), + chatConfirmDelete: _('确认删除此会话？此操作无法撤销。', 'Delete this session? This action cannot be undone.', '確認刪除此會話？此操作無法復原。'), + chatSessionDeleted: _('会话已删除', 'Session deleted', '會話已刪除'), + chatDeleteFailed: _('删除失败', 'Delete failed', '刪除失敗'), + chatDeleteRunningBlocked: _('此会话正在回复中，请先停止当前回复', 'This session is still responding. Stop the run first.', '此會話正在回覆中，請先停止目前回覆', 'このセッションは応答中です。先に停止してください', '이 세션은 응답 중입니다. 먼저 중지하세요'), + chatJumpBottom: _('回到底部', 'Jump to bottom', '回到底部', '一番下へ', '맨 아래로'), + // Profile / Agent 切换 + chatProfileTooltip: _('切换 Hermes Profile (多 Agent)', 'Switch Hermes profile (multi-agent)', '切換 Hermes Profile (多 Agent)', 'Hermes プロファイルを切り替え', 'Hermes 프로필 전환'), + chatProfileSingle: _('当前 Profile (未检测到多 Profile)', 'Current profile (no extra profiles detected)', '目前 Profile (未偵測到多 Profile)', '現在のプロファイル', '현재 프로필'), + chatProfileMenuHead: _('Hermes Profile', 'Hermes Profile', 'Hermes Profile'), + chatProfileMenuFoot: _('每个 Profile 对应独立的 Agent / 配置 / 会话', 'Each profile is an isolated agent · config · session set', '每個 Profile 對應獨立的 Agent / 設定 / 會話', '各プロファイルは独立した Agent・設定・セッション群', '각 프로필은 독립된 Agent·설정·세션 집합'), + chatProfileRunning: _('运行中', 'Running', '運行中', '実行中', '실행 중'), + chatProfileSwitched: _('已切换到 {name}', 'Switched to {name}', '已切換到 {name}', '{name} に切り替え済み', '{name} 으로 전환됨'), + chatProfileSwitchBlocked: _('正在回复中，无法切换 Profile', 'A reply is in progress — cannot switch profile', '正在回覆中，無法切換 Profile', '応答中のためプロファイルを切り替えられません', '응답 중이라 프로필을 전환할 수 없습니다'), + // 批量选择 + chatBulkSelect: _('多选会话', 'Select multiple sessions', '多選會話', 'セッションを複数選択', '여러 세션 선택'), + chatExitSelect: _('退出多选', 'Exit selection', '退出多選', '選択モード終了', '선택 모드 종료'), + chatSelect: _('选择', 'Select', '選擇'), + chatDeselect: _('取消选择', 'Deselect', '取消選擇'), + chatSelectAll: _('全选', 'Select all', '全選'), + chatSelectNone: _('清空选择', 'Clear selection', '清空選擇'), + chatSelectedCount: _('已选 {n} 项', '{n} selected', '已選 {n} 項', '{n} 件選択', '{n}개 선택됨'), + chatBulkDelete: _('批量删除', 'Delete selected', '批量刪除', '一括削除', '일괄 삭제'), + chatConfirmBulkDelete: _('确认删除 {n} 个会话？此操作无法撤销。', 'Delete {n} sessions? This action cannot be undone.', '確認刪除 {n} 個會話？此操作無法復原。', '{n} 件のセッションを削除しますか？元に戻せません。', '{n}개 세션을 삭제할까요? 되돌릴 수 없습니다.'), + chatBulkDeleted: _('已删除 {n} 个会话', '{n} sessions deleted', '已刪除 {n} 個會話', '{n} 件のセッションを削除', '{n}개 세션 삭제됨'), + chatBulkPartial: _('已删除 {n} 个，{f} 个失败/跳过', '{n} deleted, {f} failed/skipped', '已刪除 {n} 個，{f} 個失敗/跳過', '{n} 件削除、{f} 件失敗/スキップ', '{n}개 삭제, {f}개 실패/건너뜀'), + chatBulkFailed: _('批量删除失败', 'Bulk delete failed', '批量刪除失敗', '一括削除に失敗', '일괄 삭제 실패'), + // 会话浏览页 + sessionsPageTitle: _('会话浏览器', 'Session Browser', '會話瀏覽器', 'セッションブラウザ', '세션 브라우저'), + sessionsPageDesc: _('跨 Profile 搜索、审阅和批量管理 Hermes 会话。', 'Search, review and batch-manage Hermes sessions across profiles.', '跨 Profile 搜尋、檢閱和批量管理 Hermes 會話。'), + sessionsSearchPlaceholder: _('搜索标题、模型、来源或消息内容...', 'Search title, model, source or message content...', '搜尋標題、模型、來源或訊息內容...'), + sessionsAllSources: _('全部来源', 'All sources', '全部來源'), + sessionsAllProfiles: _('全部 Profiles', 'All profiles', '全部 Profiles'), + sessionsProfileLoadPartial: _('{n} 个 Profile 加载失败', '{n} profiles failed to load', '{n} 個 Profile 載入失敗'), + sessionsDetailLoadFailed: _('会话详情加载失败', 'Failed to load session details', '會話詳情載入失敗'), + sessionsTotal: _('全部会话', 'Total sessions', '全部會話'), + sessionsShown: _('当前显示', 'Shown', '目前顯示'), + sessionsProfiles: _('Profiles', 'Profiles', 'Profiles'), + sessionsSelected: _('已选择', 'Selected', '已選擇'), + sessionsJustNow: _('刚刚', 'just now', '剛剛'), + sessionsMinutesAgo: _('{n} 分钟前', '{n}m ago', '{n} 分鐘前'), + sessionsHoursAgo: _('{n} 小时前', '{n}h ago', '{n} 小時前'), + sessionsUntitled: _('未命名会话', 'Untitled session', '未命名會話'), + sessionsNoPreview: _('暂无预览', 'No preview', '暫無預覽'), + sessionsEmpty: _('没有匹配的会话', 'No matching sessions', '沒有符合的會話'), + sessionsNoSelection: _('选择一个会话', 'Select a session', '選擇一個會話'), + sessionsNoSelectionDesc: _('从左侧列表选择会话，查看元数据和最近消息。', 'Pick a session from the left to inspect metadata and recent messages.', '從左側列表選擇會話，查看中繼資料和最近訊息。'), + sessionsOpenChat: _('打开聊天', 'Open chat', '開啟聊天'), + sessionsPin: _('置顶', 'Pin', '置頂'), + sessionsUnpin: _('取消置顶', 'Unpin', '取消置頂'), + sessionsMessages: _('消息数', 'Messages', '訊息數'), + sessionsTokens: _('Tokens', 'Tokens', 'Tokens'), + sessionsModel: _('模型', 'Model', '模型'), + sessionsUpdated: _('更新时间', 'Updated', '更新時間'), + sessionsMessagesNotLoaded: _('消息尚未载入，点击左侧会话后会自动同步详情。', 'Messages are not loaded yet; selecting a session syncs details automatically.', '訊息尚未載入，點擊左側會話後會自動同步詳情。'), + // Slash 命令 + chatSlashTitle: _('可用命令', 'Available commands', '可用命令'), + chatSlashHelpDesc: _('显示可用命令', 'Show available commands', '顯示可用命令'), + chatSlashStatusDesc: _('查看 Gateway 与模型状态', 'Inspect gateway & model status', '查看 Gateway 與模型狀態'), + chatSlashMemoryDesc: _('打开 Agent 记忆编辑', 'Open Agent memory editor', '開啟 Agent 記憶編輯'), + chatSlashSkillsDesc: _('打开技能库', 'Open skills library', '開啟技能庫'), + chatSlashClearDesc: _('清空当前会话', 'Clear current session', '清空目前會話'), + chatSlashNewDesc: _('新建会话', 'Start a new session', '新建會話'), + chatSlashStatusTitle: _('当前状态', 'Current status', '目前狀態'), + chatSlashGateway: _('Gateway', 'Gateway', 'Gateway'), + chatSlashPort: _('端口', 'Port', '埠'), + chatSlashModel: _('模型', 'Model', '模型'), + chatSlashRedirect: _('正在跳转到 {page}...', 'Redirecting to {page}...', '正在跳轉到 {page}...'), + // 停止流式 + chatStop: _('停止', 'Stop', '停止'), + chatStopped: _('已停止当前回复', 'Run stopped', '已停止目前回覆'), + // 会话搜索 (Ctrl+K) + chatSearchShortcut: _('搜索会话 (Ctrl+K)', 'Search sessions (Ctrl+K)', '搜尋會話 (Ctrl+K)'), + chatSearchPlaceholder: _('搜索会话标题或内容...', 'Search by title or message content…', '搜尋會話標題或內容...'), + chatSearchEmpty: _('没有匹配的会话', 'No matching sessions', '沒有符合的會話'), + chatSearchNavigate: _('导航', 'Navigate', '導覽'), + chatSearchOpen: _('打开', 'Open', '開啟'), fileAccess: _('文件访问', 'File Access', '檔案存取'), fileAccessOn: _('已开启文件系统访问（Agent 可读取本机文件）', 'File system access enabled (Agent can read local files)', '已開啟檔案系統存取（Agent 可讀取本機檔案）'), fileAccessOff: _('文件系统访问已关闭', 'File system access disabled', '檔案系統存取已關閉'), @@ -189,6 +363,37 @@ export default { cronNameRequired: _('请输入任务名称', 'Job name is required', '請輸入任務名稱'), cronPromptRequired: _('请输入 AI 指令', 'AI prompt is required', '請輸入 AI 指令'), cronScheduleRequired: _('请选择执行周期', 'Schedule is required', '請選擇執行週期'), + // --- Phase 2 additions: richer job metadata --- + cronEyebrow: _('AGENT 定时任务', 'AGENT SCHEDULED JOBS', 'AGENT 定時任務'), + cronJobs: _('个任务', 'jobs', '個任務'), + cronFailed: _('失败', 'Failed', '失敗'), + cronPauseBtn: _('暂停', 'Pause', '暫停'), + cronResume: _('恢复', 'Resume', '恢復'), + cronStateRunning: _('运行中', 'running', '運行中'), + cronStatePaused: _('已暂停', 'paused', '已暫停'), + cronStateDisabled: _('已禁用', 'disabled', '已禁用'), + cronStateScheduled: _('待调度', 'scheduled', '待調度'), + cronScheduleLabel: _('执行周期', 'schedule', '執行週期'), + cronNextRun: _('下次执行', 'next run', '下次執行'), + cronLastRun: _('上次执行', 'last run', '上次執行'), + cronDeliverLabel: _('结果回传', 'deliver to', '結果回傳'), + cronRepeatLabel: _('重复', 'repeat', '重複'), + cronSkillsLabel: _('Skills', 'Skills', 'Skills'), + cronLastError: _('上次错误', 'last error', '上次錯誤'), + cronOverdue: _('已逾期', 'overdue', '已逾期'), + cronInSeconds: _('{n} 秒后', 'in {n}s', '{n} 秒後'), + cronInMinutes: _('{n} 分钟后', 'in {n}m', '{n} 分鐘後'), + cronInHours: _('{n} 小时后', 'in {n}h', '{n} 小時後'), + cronInDays: _('{n} 天后', 'in {n}d', '{n} 天後'), + cronDeliverOrigin: _('回传原聊天', 'origin chat', '回傳原聊天'), + cronDeliverLocal: _('仅本地记录', 'local only', '僅本機記錄'), + cronRepeatLimit: _('重复次数', 'repeat limit', '重複次數'), + cronRepeatLimitHint: _('留空表示无限循环', 'Leave empty for unlimited', '留空表示無限迴圈'), + cronInvalidCron: _('无效的 cron 表达式', 'Invalid cron expression', '無效的 cron 表達式'), + cronTriggered: _('任务已触发', 'Job triggered', '任務已觸發'), + cronPausedOk: _('任务已暂停', 'Job paused', '任務已暫停'), + cronResumedOk: _('任务已恢复', 'Job resumed', '任務已恢復'), + cronDeletedOk: _('任务已删除', 'Job deleted', '任務已刪除'), // 日志页面 hermesLogsTitle: _('Agent 日志', 'Agent Logs', 'Agent 日誌'), logsRefresh: _('刷新', 'Refresh', '重新整理'), @@ -200,14 +405,44 @@ export default { logsLoading: _('加载中...', 'Loading...', '載入中...'), logsEmpty: _('暂无日志', 'No logs', '暫無日誌'), logsLoadFailed: _('加载失败', 'Load failed', '載入失敗'), + logsEyebrow: _('AGENT 日志流', 'AGENT LOG STREAM', 'AGENT 日誌流'), + logsTailing: _('实时追踪中', 'TAILING · LIVE', '即時追蹤中'), + logsTailStart: _('追踪', 'Tail', '追蹤'), + logsTailStop: _('暂停', 'Pause', '暫停'), + logsToggleTail: _('开启/停止实时追踪（每 2 秒刷新）', 'Toggle live tail (2s poll)', '開啟/停止即時追蹤（每 2 秒重新整理）'), + logsDownload: _('下载', 'Download', '下載'), + logsDownloadOk: _('日志已保存到 {path}', 'Log saved to {path}', '日誌已儲存到 {path}'), + logsDownloadBrowserOk: _('已交给浏览器下载，请查看默认下载目录。', 'Download started in your browser; check the default downloads folder.', '已交給瀏覽器下載，請查看預設下載目錄。'), + logsDownloadFailed: _('下载失败', 'Download failed', '下載失敗'), + logsClear: _('清空当前显示', 'Clear view', '清空目前顯示'), + logsLevel: _('级别', 'Level', '級別'), + logsLinesLabel: _('行数', 'Limit', '行數'), + logsSearchLabel: _('搜索', 'Search', '搜尋'), + logsFilteredBy: _('过滤自', 'filtered by', '過濾自'), // Skills 页面 hermesSkillsTitle: _('Agent Skills', 'Agent Skills', 'Agent Skills'), + skillsEyebrow: _('AGENT 技能库', 'AGENT SKILL LIBRARY', 'AGENT 技能庫'), skillsTotal: _('个技能', 'skills', '個技能'), + skillsActive: _('启用中', 'active', '啟用中'), skillsSearch: _('搜索技能...', 'Search skills...', '搜尋技能...'), skillsLoading: _('加载中...', 'Loading...', '載入中...'), skillsEmpty: _('暂无技能', 'No skills found', '暫無技能'), + skillsNoMatch: _('没有匹配的技能', 'No skills match your search', '沒有符合的技能'), skillsUncategorized: _('未分类', 'Uncategorized', '未分類'), skillsSelectHint: _('选择一个技能查看详情', 'Select a skill to view details', '選擇一個技能查看詳情'), + skillsSelectSub: _('从左侧列表点击，或使用搜索快速定位。', 'Click any item on the left, or use search to jump.', '從左側列表點擊，或使用搜尋快速定位。'), + skillsRefresh: _('刷新', 'Refresh', '重新整理'), + skillsEnable: _('启用此技能', 'Enable this skill', '啟用此技能'), + skillsDisable: _('停用此技能', 'Disable this skill', '停用此技能'), + skillsEnabled: _('技能已启用', 'Skill enabled', '技能已啟用'), + skillsDisabled: _('技能已停用', 'Skill disabled', '技能已停用'), + skillsEnabledTag: _('启用', 'Active', '啟用'), + skillsDisabledTag: _('停用', 'Disabled', '停用'), + skillsToggleFailed: _('切换失败', 'Toggle failed', '切換失敗'), + skillsLoadFailed: _('加载失败', 'Load failed', '載入失敗'), + skillsFileLoadFailed: _('文件加载失败', 'File load failed', '檔案載入失敗'), + skillsAttachedFiles: _('附带资源', 'Attached Files', '附帶資源'), + skillsBackTo: _('返回', 'Back to', '返回'), // Memory 页面 hermesMemoryTitle: _('Agent 记忆', 'Agent Memory', 'Agent 記憶'), memoryNotes: _('笔记', 'Notes', '筆記'), @@ -221,9 +456,174 @@ export default { memoryEmpty: _('暂无内容', 'No content', '暫無內容'), memoryPlaceholder: _('使用 Markdown 格式编写...', 'Write in Markdown format...', '使用 Markdown 格式編寫...'), memoryUnsaved: _('有未保存的更改，确定离开？', 'Unsaved changes. Leave anyway?', '有未儲存的變更，確定離開？'), + memorySaved: _('已保存', 'Saved', '已儲存'), + memorySaveHint: _('Ctrl/⌘ + S 保存 · Esc 取消', 'Ctrl/⌘ + S to save · Esc to cancel', 'Ctrl/⌘ + S 儲存 · Esc 取消'), + memoryEyebrow: _('AGENT 长期记忆', 'AGENT PERSISTENT MEMORY', 'AGENT 長期記憶'), + memorySoul: _('灵魂档案', 'Soul', '靈魂檔案'), + memoryNotesDesc: _('Agent 的笔记与事实备忘——会话间持续累积的知识。', 'Agent\'s notes and factual memories — knowledge accumulated across sessions.', 'Agent 的筆記與事實備忘——會話間持續累積的知識。'), + memoryProfileDesc: _('用户偏好、身份、背景信息——每次对话都会参考。', 'User preferences, identity, context — referenced in every conversation.', '用戶偏好、身份、背景資訊——每次對話都會參考。'), + memorySoulDesc: _('Agent 的人格、价值观、说话风格——长期塑造。', 'Agent persona, values, voice — shaped over time.', 'Agent 的人格、價值觀、說話風格——長期塑造。'), + memoryWords: _('词', 'words', '詞'), + memoryChars: _('字符', 'chars', '字元'), + memoryJustNow: _('刚刚', 'just now', '剛剛'), + memoryMinAgo: _('{n} 分钟前', '{n}m ago', '{n} 分鐘前'), + memoryHrAgo: _('{n} 小时前', '{n}h ago', '{n} 小時前'), // 其它页面 hermesServicesTitle: _('Hermes 服务', 'Hermes Services', 'Hermes 服務'), + servicesDesc: _('集中查看 Gateway 运行状态、连接目标、健康检查与维护操作。', 'Inspect gateway status, connection target, health checks, and maintenance actions in one place.', '集中查看 Gateway 運行狀態、連接目標、健康檢查與維護操作。'), + servicesInstallState: _('安装状态', 'Install State', '安裝狀態'), + servicesInstallType: _('安装方式', 'Install Method', '安裝方式'), + servicesInstalled: _('已安装', 'Installed', '已安裝'), + servicesMissing: _('未安装', 'Not Installed', '未安裝'), + servicesUnknown: _('未知', 'Unknown', '未知'), + servicesPath: _('CLI 路径', 'CLI Path', 'CLI 路徑'), + servicesHome: _('主目录', 'Home Directory', '主目錄'), + servicesConfigFiles: _('关键配置文件', 'Key Config Files', '關鍵配置檔'), + servicesNotSet: _('未设置', 'Not set', '未設置'), + servicesCustomUrl: _('自定义 Gateway URL', 'Custom Gateway URL', '自定義 Gateway URL'), + servicesWslHint: _('请先在 WSL2 中启动 Gateway，然后再切换。', 'Start the gateway in WSL2 before switching.', '請先在 WSL2 中啟動 Gateway，再切換。'), + servicesDockerHint: _('Docker 场景请填写容器对外可访问的 Gateway URL。', 'For Docker, enter the externally reachable gateway URL.', 'Docker 場景請填寫容器對外可訪問的 Gateway URL。'), + servicesDetectFirst: _('请先探测环境并确保目标 Gateway 已启动。', 'Detect environments first and make sure the target gateway is running.', '請先探測環境並確認目標 Gateway 已啟動。'), + servicesHealthTitle: _('健康检查', 'Health Check', '健康檢查'), + servicesRawJson: _('查看原始 JSON', 'View Raw JSON', '查看原始 JSON'), + servicesNoHealth: _('Gateway 未运行或暂时无法返回健康数据。', 'The gateway is offline or health data is temporarily unavailable.', 'Gateway 未運行或暫時無法返回健康資料。'), + servicesMaintenance: _('维护操作', 'Maintenance', '維護操作'), + servicesUpgrade: _('升级 Hermes', 'Upgrade Hermes', '升級 Hermes'), + servicesUninstall: _('卸载 Hermes', 'Uninstall Hermes', '解除安裝 Hermes'), + servicesUninstallClean: _('卸载并清理配置', 'Uninstall and Clean Config', '解除安裝並清理配置'), + servicesOpenLogs: _('打开日志', 'Open Logs', '打開日誌'), + servicesOpenConfig: _('打开配置', 'Open Config', '打開配置'), + servicesOpenEnv: _('打开环境变量', 'Open Environment', '打開環境變數'), + servicesOpenSetup: _('返回安装向导', 'Open Setup', '返回安裝精靈'), + servicesEyebrow: _('HERMES AGENT · 服务中心', 'HERMES AGENT · SERVICES', 'HERMES AGENT · 服務中心'), + servicesReadyTag: _('就绪', 'READY', '就緒'), + servicesDefaultDistro: _('默认发行版', 'default distro', '預設發行版'), + servicesContainerCount: _('{n} 个容器', '{n} containers', '{n} 個容器'), + servicesConfirmUpgrade: _('确认升级 Hermes Agent？升级期间可能短暂中断 Gateway。', 'Upgrade Hermes Agent? The gateway may be briefly interrupted during the upgrade.', '確認升級 Hermes Agent？升級期間 Gateway 可能短暫中斷。'), + servicesConfirmUninstall: _('确认卸载 Hermes Agent？保留现有配置文件。', 'Uninstall Hermes Agent? Existing config files will be kept.', '確認解除安裝 Hermes Agent？會保留現有配置檔。'), + servicesConfirmUninstallClean: _('确认卸载 Hermes Agent 并删除配置文件？此操作不可撤销。', 'Uninstall Hermes Agent and remove config files? This cannot be undone.', '確認解除安裝 Hermes Agent 並刪除配置檔？此操作無法撤銷。'), hermesConfigTitle: _('Hermes 配置', 'Hermes Config', 'Hermes 配置'), hermesChannelsTitle: _('Hermes 渠道', 'Hermes Channels', 'Hermes 頻道'), + extensionsEyebrow: _('HERMES AGENT · 扩展', 'HERMES AGENT · EXTENSIONS', 'HERMES AGENT · 擴展'), + extensionsTitle: _('文档 / 插件 / 主题', 'Docs / Plugins / Themes', '文件 / 插件 / 主題'), + extensionsDesc: _('集中管理 Dashboard 扩展清单、视觉主题和使用洞察。', 'Manage dashboard extension manifests, visual themes and usage intelligence.', '集中管理 Dashboard 擴展清單、視覺主題和使用洞察。'), + extensionsRefresh: _('刷新', 'Refresh', '刷新'), + extensionsRescan: _('重扫插件', 'Rescan Plugins', '重掃插件'), + extensionsDocs: _('文档', 'Documentation', '文件'), + extensionsAnalytics: _('分析快照', 'Analytics snapshot', '分析快照'), + extensionsSessions: _('会话', 'Sessions', '會話'), + extensionsTokens: _('Tokens', 'Tokens', 'Tokens'), + extensionsCost: _('费用', 'Cost', '費用'), + extensionsThemes: _('Dashboard 主题', 'Dashboard themes', 'Dashboard 主題'), + extensionsActive: _('当前', 'active', '目前'), + extensionsNoThemes: _('未发现主题。', 'No themes discovered.', '未發現主題。'), + extensionsPlugins: _('Dashboard 插件', 'Dashboard plugins', 'Dashboard 插件'), + extensionsManifestCount: _('{n} 个清单', '{n} manifest(s)', '{n} 個清單'), + extensionsNoDescription: _('暂无描述', 'No description', '暫無描述'), + extensionsNoPlugins: _('未在 ~/.hermes/plugins 中发现 Dashboard 插件清单。', 'No dashboard plugin manifests found in ~/.hermes/plugins.', '未在 ~/.hermes/plugins 中發現 Dashboard 插件清單。'), + extensionsThemeSaved: _('Dashboard 主题已保存', 'Dashboard theme saved', 'Dashboard 主題已儲存'), + extensionsPluginsRescanned: _('插件清单已重扫', 'Plugin manifests rescanned', '插件清單已重掃'), + extensionsDocGettingStarted: _('快速开始', 'Getting Started', '快速開始'), + extensionsDocCron: _('Cron 自动化', 'Cron Automation', 'Cron 自動化'), + extensionsDocSkills: _('Skills', 'Skills', 'Skills'), + extensionsDocDashboard: _('Dashboard', 'Dashboard', 'Dashboard'), comingSoonPhase2: _('即将在 Phase 2 中推出', 'Coming in Phase 2', '即將在 Phase 2 中推出'), + + // ============================================================ + // 心甜Claw（Xintian Claw）· 产品宣传页 + // ============================================================ + xintianNavHome: _('产品首页', 'Home', '產品首頁', 'ホーム', '홈', 'Trang chủ', 'Inicio', 'Início', 'Главная', 'Accueil', 'Startseite'), + + // Hero + xtHeroEyebrow: _('心甜Claw · 跨平台 AI 省心助手', 'Xintian Claw · Worry-free AI Companion', '心甜Claw · 跨平台 AI 省心助手', '心甜Claw · 手間いらずの AI コンパニオン', '心甜Claw · 근심 없는 AI 동반자'), + xtHeroTitleLead: _('WINDOWS 安装即用', 'READY FOR WINDOWS', 'WINDOWS 安裝即用', 'WINDOWS 用すぐに使える', 'WINDOWS에서 바로 사용'), + xtHeroTitleA: _('不只是对话，是会', 'Not just chat —', '不只是對話，是會'), + xtHeroTitleB: _('记得你', 'an AI that remembers you', '記得你'), + xtHeroTitleC: _('的 AI 管家', '.', '的 AI 管家'), + xtHeroSub: _( + '桌面客户端 + SaaS 后端 + 长期记忆 + 多渠道，一次安装，让 AI 真正长期为你干活。', + 'Desktop client, SaaS backend, persistent memory, and multi-channel delivery — install once and let AI keep working for you.', + '桌面客戶端 + SaaS 後端 + 長期記憶 + 多頻道，一次安裝，讓 AI 真正長期為你幹活。', + ), + xtCtaDownloadWin: _('下载 Windows 版', 'Download for Windows', '下載 Windows 版', 'Windows 版をダウンロード', 'Windows 버전 다운로드'), + xtCtaVisitSite: _('访问官网', 'Visit website', '訪問官網', '公式サイトへ', '공식 웹사이트'), + xtHeroPlatformWin: _('Windows 10 / 11 · x64', 'Windows 10 / 11 · x64', 'Windows 10 / 11 · x64'), + xtHeroPlatformRest: _('macOS / Linux 即将上线', 'macOS / Linux coming soon', 'macOS / Linux 即將上線', 'macOS / Linux 近日公開', 'macOS / Linux 곧 출시'), + xtHeroFreeTrial: _('预置 2 个免费 Agent', '2 free agents included', '預置 2 個免費 Agent', '2 つの無料エージェント付き', '무료 에이전트 2개 포함'), + + // Features 区域 + xtFeaturesEyebrow: _('核心能力', 'CORE CAPABILITIES', '核心能力'), + xtFeaturesTitle: _('八种能力，一个助手', 'Eight capabilities, one companion', '八種能力，一個助手'), + xtFeaturesSub: _( + '从聊天、记忆到定时自动化、多渠道通知——把 AI 做到生产可用。', + 'From chat and memory to scheduled automation and multi-channel delivery — AI ready for real work.', + '從聊天、記憶到定時自動化、多頻道通知——把 AI 做到生產可用。', + ), + + // 8 个特性卡片 + xtFeatChatTitle: _('流式对话 × 思维链', 'Streaming chat × CoT', '串流對話 × 思維鏈'), + xtFeatChatDesc: _('工具调用与思考过程全程可见，Markdown / 代码 / 表格原生渲染。', 'Full visibility into tool calls and reasoning, with native Markdown / code / table rendering.', '工具調用與思考過程全程可見，Markdown / 程式碼 / 表格原生渲染。'), + xtFeatAgentTitle: _('多智能体 Agent 体系', 'Multi-agent roster', '多智能體 Agent 體系'), + xtFeatAgentDesc: _('预置心甜 + 晴辰两个助手，独立人设与记忆，可随时自定义。', 'Bundled Xintian & Qingchen assistants, each with its own persona and memory — fully customizable.', '預置心甜 + 晴辰兩個助手，獨立人設與記憶，可隨時自定義。'), + xtFeatMemoryTitle: _('心甜智脑 · 长期记忆', 'Sweet Brain · Long-term memory', '心甜智腦 · 長期記憶'), + xtFeatMemoryDesc: _('事实 + 对话双层记忆，跨渠道共享，桌面说过的话微信也能想起来。', 'Dual-layer memory (facts + conversations) shared across channels — it remembers what you said, everywhere.', '事實 + 對話雙層記憶，跨頻道共享，桌面說過的話微信也能想起來。'), + xtFeatRagTitle: _('知识库 × RAG', 'Knowledge base × RAG', '知識庫 × RAG'), + xtFeatRagDesc: _('拖拽上传 PDF / Word / Markdown，回答自动附带引用与跳转链接。', 'Drag-and-drop PDF / Word / Markdown — answers come with citations and jump links.', '拖放上傳 PDF / Word / Markdown，回答自動附帶引用與跳轉連結。'), + xtFeatCronTitle: _('定时任务 × 后台任务', 'Scheduled & background tasks', '定時任務 × 背景任務'), + xtFeatCronDesc: _('到点自动跑，长调研一轮一轮来，进度条可暂停可恢复。', 'Cron-triggered runs and multi-round background research with pause/resume progress.', '到點自動跑，長調研一輪一輪來，進度條可暫停可恢復。'), + xtFeatSkillsTitle: _('技能中心 · SkillForge', 'Skill Hub · SkillForge', '技能中心 · SkillForge'), + xtFeatSkillsDesc: _('把常用流程打包成技能 @ 调用，内置抓取 / 日报 / 总结。', 'Package prompts into reusable skills — invoke with @, with built-in scraping, reporting, summarization.', '把常用流程打包成技能 @ 調用，內建抓取 / 日報 / 總結。'), + xtFeatChannelTitle: _('多消息渠道', 'Multi-channel delivery', '多訊息頻道'), + xtFeatChannelDesc: _('飞书 / 微信 / Telegram 等消息渠道互通，一套记忆跟你到每个对话窗。', 'Feishu / WeChat / Telegram all connected — one memory follows you to every conversation.', '飛書 / 微信 / Telegram 等訊息頻道互通，一套記憶跟你到每個對話窗。'), + xtFeatOfflineTitle: _('离线 × 本地优先', 'Offline × local-first', '離線 × 本地優先'), + xtFeatOfflineDesc: _('核心数据存本地 ~/.xintian-claw，断网队列补发，多后端容灾。', 'Core data stored locally at ~/.xintian-claw, offline queue + multi-backend failover.', '核心資料存本地 ~/.xintian-claw，斷網佇列補發，多後端容災。'), + + // Compare 区域 + xtCompareEyebrow: _('产品定位', 'POSITIONING', '產品定位'), + xtCompareTitle: _('同一份心甜 · 不同的打开方式', 'One Xintian, three ways to open it', '同一份心甜 · 不同的打開方式'), + xtCompareSub: _( + '根据你的身份选择最合适的入口：开发者用框架、工程师用 Python、普通用户用桌面版。', + 'Pick the entrance that fits you: framework for developers, Python for engineers, desktop client for everyone else.', + '根據你的身份選擇最合適的入口：開發者用框架、工程師用 Python、普通使用者用桌面版。', + ), + xtComparePosA: _('开发者 / 架构师', 'DEVELOPER / ARCHITECT', '開發者 / 架構師'), + xtCompareADesc: _('完整 Agent 框架源码，支持自托管、插件扩展，适合深度定制。', 'Full Agent framework source with self-hosting and plugin extensions — for deep customization.', '完整 Agent 框架原始碼，支援自託管、外掛擴充，適合深度自訂。'), + xtCompareAForWho: _('面向团队与工程师', 'For teams and engineers', '面向團隊與工程師'), + xtComparePosB: _('Python 开发者', 'PYTHON DEVELOPER', 'Python 開發者'), + xtCompareBDesc: _('轻量级 Agent 框架，工具调用能力强，一键 uv 安装，快速集成。', 'Lightweight Agent framework with strong tool-calling, one-click uv install, fast integration.', '輕量級 Agent 框架，工具呼叫能力強，一鍵 uv 安裝，快速整合。'), + xtCompareBForWho: _('面向 Python 工程师', 'For Python engineers', '面向 Python 工程師'), + xtComparePosC: _('所有普通用户', 'EVERYONE', '所有普通使用者'), + xtCompareCTitle: _('心甜Claw', 'Xintian Claw', '心甜Claw'), + xtCompareCDesc: _('Windows 双击安装即可用，内置 Agent 与记忆，不写一行代码也能上手。', 'Double-click install on Windows — agents and memory out of the box, zero code required.', 'Windows 雙擊安裝即可用，內建 Agent 與記憶，不寫一行程式碼也能上手。'), + xtCompareCForWho: _('面向日常使用者', 'For everyday users', '面向日常使用者'), + xtCompareRecommend: _('推荐', 'RECOMMENDED', '推薦'), + + // CTA 区域 + xtCtaEyebrow: _('立即开始', 'GET STARTED', '立即開始'), + xtCtaTitle: _('今天装上 · 明天就离不开', 'Install today, depend on it tomorrow', '今天裝上 · 明天就離不開'), + xtCtaSub: _( + '下载 Windows 安装包、双击运行，登录账号即可开始使用。无需配置 Python、无需命令行。', + 'Download the Windows installer, double-click, sign in — ready to chat. No Python, no terminal.', + '下載 Windows 安裝包、雙擊執行，登入帳號即可開始使用。無需配置 Python、無需命令列。', + ), + xtBulletInstall: _('一次安装 · 自动更新', 'One-click install · auto update', '一次安裝 · 自動更新'), + xtBulletLogin: _('微信 / 邮箱登录', 'WeChat / Email sign-in', '微信 / 信箱登入'), + xtBulletSync: _('多设备记忆同步', 'Multi-device memory sync', '多裝置記憶同步'), + xtBulletSafe: _('核心数据本地加密', 'Core data encrypted locally', '核心資料本地加密'), + xtCtaPrimary: _('立即下载 Windows 版', 'Download for Windows', '立即下載 Windows 版'), + xtCtaSecondary: _('了解更多', 'Learn more', '了解更多'), + xtCtaLinkLabel: _('官网', 'WEBSITE', '官網'), + + // Preview 气泡 + xtPreviewGreet: _('你好呀，今天想让我帮你处理什么？', 'Hi! How can I help you today?', '你好呀，今天想讓我幫你處理什麼？'), + xtPreviewUserAsk: _('帮我盯着这条产品线的日报', 'Track the daily report of this product line', '幫我盯著這條產品線的日報'), + xtPreviewAnswer1: _('好的，已为你创建「日报追踪」定时任务。', 'Got it — created a scheduled "Daily Report" task for you.', '好的，已為你建立「日報追蹤」定時任務。'), + xtPreviewAnswer2: _('每天 18:00 推送到飞书群，记忆也会同步。', 'Posts to the Feishu group at 18:00 daily, memory stays in sync.', '每天 18:00 推送到飛書群，記憶也會同步。'), + xtPreviewFoot: _('由 心甜智脑 长期记忆支持', 'Powered by Sweet Brain long-term memory', '由 心甜智腦 長期記憶支援'), + + // Footer + xtFootBrand: _('心甜Claw · 跨平台 AI 省心助手', 'Xintian Claw · Worry-free AI Companion', '心甜Claw · 跨平台 AI 省心助手'), + xtFootHome: _('官网', 'Website', '官網'), + xtFootDownload: _('下载', 'Download', '下載'), + xtFootSupport: _('帮助中心', 'Help Center', '幫助中心'), } diff --git a/src/locales/modules/memory.js b/src/locales/modules/memory.js index dc5f53a..c7b67a9 100644 --- a/src/locales/modules/memory.js +++ b/src/locales/modules/memory.js @@ -35,7 +35,7 @@ export default { readFileFailed: _('读取文件失败', 'Failed to read file', '讀取檔案失敗'), fileSaved: _('文件已保存', 'File saved', '檔案已儲存'), saveFailed: _('保存失败', 'Save failed', '儲存失敗'), - downloaded: _('已下载 {name}', 'Downloaded {name}', '已下載 {name}'), + downloaded: _('已交给浏览器下载 {name}，请查看默认下载目录', 'Download started for {name}; check your default downloads folder', '已交給瀏覽器下載 {name}，請查看預設下載目錄'), downloadFailed: _('下载失败', 'Download failed', '下載失敗'), exported: _('已导出: {label} → {path}', 'Exported: {label} → {path}'), exportFailed: _('打包下载失败', 'Export failed', '打包下載失敗'), diff --git a/src/locales/modules/sidebar.js b/src/locales/modules/sidebar.js index e967adc..462550b 100644 --- a/src/locales/modules/sidebar.js +++ b/src/locales/modules/sidebar.js @@ -13,6 +13,7 @@ export default { dashboard: _('仪表盘', 'Dashboard', '儀表盤', 'ダッシュボード', '대시보드', 'Bảng điều khiển', 'Panel', 'Painel', 'Панель', 'Tableau de bord'), assistant: _('晴辰助手', 'Assistant', '', 'アシスタント', '어시스턴트', 'Trợ lý', 'Asistente', 'Assistente', 'Ассистент', '', 'Assistent'), chat: _('实时聊天', 'Live Chat', '實時聊天', 'ライブチャット', '실시간 채팅', 'Trò chuyện', 'Chat', 'Chat', 'Чат', 'Chat', 'Live-Chat'), + sessions: _('会话浏览', 'Sessions', '會話瀏覽', 'セッション', '세션'), services: _('服务管理', 'Services', '服務管理', 'サービス管理', '서비스 관리', 'Dịch vụ', 'Servicios', 'Serviços', 'Сервисы', '', 'Dienste'), logs: _('日志查看', 'Logs', '日誌查看', 'ログ', '로그', 'Nhật ký', 'Registros', '', 'Журналы', 'Journaux', 'Protokolle'), models: _('模型配置', 'Models', '模型設定', 'モデル設定', '모델 설정', 'Mô hình', 'Modelos', 'Modelos', 'Модели', 'Modèles', 'Modelle'), @@ -27,6 +28,7 @@ export default { usage: _('使用情况', 'Usage', '使用情況', '使用状況', '사용 현황', 'Sử dụng', 'Uso', 'Uso', 'Использование', 'Utilisation', 'Nutzung'), skills: _('Skills', 'Skills'), pluginHub: _('插件中心', 'Plugin Hub', '插件中心', 'プラグインハブ', '플러그인 허브', 'Trung tâm plugin', 'Centro de plugins', 'Centro de plugins', 'Центр плагинов', 'Centre de plugins', 'Plugin-Hub'), + extensions: _('扩展与主题', 'Extensions', '擴展與主題', '拡張とテーマ', '확장 및 테마'), settings: _('面板设置', 'Settings', '面板設定', 'パネル設定', '패널 설정', 'Cài đặt', 'Configuración', 'Configurações', 'Настройки', 'Paramètres', 'Einstellungen'), diagnose: _('连接诊断', 'Connection Diagnosis', '連線診斷', '接続診断', '연결 진단', 'Chẩn đoán kết nối', 'Diagnóstico de conexión', 'Diagnóstico de conexão', 'Диагностика подключения', 'Diagnostic de connexion', 'Verbindungsdiagnose'), chatDebug: _('系统诊断', 'Diagnostics', '系統诊斷', 'システム診断', '시스템 진단', 'Chẩn đoán', 'Diagnóstico', 'Diagnóstico', 'Диагностика', 'Diagnostic', 'Diagnose'), diff --git a/src/locales/modules/usage.js b/src/locales/modules/usage.js index 088d1ee..d7931cb 100644 --- a/src/locales/modules/usage.js +++ b/src/locales/modules/usage.js @@ -21,21 +21,30 @@ export default { errors: _('错误', 'Errors', '錯誤'), errorRate: _('错误率', 'Error rate', '錯誤率'), totalTokens: _('Token 总量', 'Total Tokens', 'Token 總量', '合計トークン', '총 토큰', 'Tổng token', 'Tokens totales', 'Total de tokens', 'Всего токенов', 'Tokens totaux', 'Gesamte Tokens'), + totalSessions: _('会话总数', 'Total Sessions', '會話總數'), input: _('输入', 'input', '輸入'), output: _('输出', 'output', '輸出'), cost: _('费用', 'Cost', '費用', 'コスト', '비용'), sessions: _('会话', 'Sessions', '對話'), + estimatedCost: _('预估费用', 'Estimated Cost', '預估費用'), + cacheHitRate: _('缓存命中率', 'Cache Hit Rate', '快取命中率'), + tokens: _('Tokens', 'Tokens', 'Tokens'), + cache: _('缓存', 'Cache', '快取'), topModels: _('热门模型', 'Top Models', '熱門模型'), topProviders: _('热门服务商', 'Top Providers', '熱門服務商'), topTools: _('热门工具', 'Top Tools', '熱門工具'), topAgents: _('热门 Agent', 'Top Agents', '熱門 Agent'), topChannels: _('热门渠道', 'Top Channels', '熱門頻道'), + modelBreakdown: _('模型分布', 'Model Breakdown', '模型分佈'), tokenBreakdown: _('Token 分类', 'Token Breakdown', 'Token 分類', 'トークン内訳'), outputTokens: _('输出', 'Output', '輸出', '出力トークン', '출력 토큰'), inputTokens: _('输入', 'Input', '輸入', '入力トークン', '입력 토큰'), cacheRead: _('缓存读取', 'Cache Read', '快取讀取'), cacheWrite: _('缓存写入', 'Cache Write', '快取写入'), + dailyTrend: _('每日趋势', 'Daily Trend', '每日趨勢'), dailyUsage: _('每日用量', 'Daily Usage'), + date: _('日期', 'Date', '日期'), + avgPerDay: _('日均 {n}', 'Avg {n}/day', '日均 {n}'), sessionDetail: _('会话明细', 'Session Details', '對話明細'), recentN: _('最近 {count} 个', 'Recent {count}', '最近 {count} 個'), times: _('{count} 次', '{count} times'), diff --git a/src/main.js b/src/main.js index 7d4a825..75170c1 100644 --- a/src/main.js +++ b/src/main.js @@ -21,6 +21,7 @@ import { initFeatureGates } from './lib/feature-gates.js' import { registerEngine, initEngineManager, getActiveEngine, getActiveEngineId, onEngineChange } from './lib/engine-manager.js' import openclawEngine from './engines/openclaw/index.js' import hermesEngine from './engines/hermes/index.js' +import xintianEngine from './engines/xintian/index.js' // 样式 import './style/variables.css' @@ -33,6 +34,9 @@ import './style/agents.css' import './style/debug.css' import './style/assistant.css' import './style/ai-drawer.css' +// 引擎专属样式（scope 到 [data-engine=""] 子树，不影响其他引擎） +import './engines/hermes/style/hermes.css' +import './engines/xintian/style/xintian.css' // 初始化主题 + 国际化 initTheme() @@ -316,6 +320,7 @@ async function boot() { // 注册引擎 registerEngine(openclawEngine) registerEngine(hermesEngine) + registerEngine(xintianEngine) // 初始化引擎管理器：读取 clawpanel.json 的 engineMode，注册对应路由 await initEngineManager() diff --git a/src/pages/about.js b/src/pages/about.js index 650b16c..e0873bc 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -53,12 +53,24 @@ export async function render() {
    ` - if (getActiveEngineId() === 'hermes') { + const activeEngineId = getActiveEngineId() + + if (activeEngineId === 'xintian') { + // 心甜Claw 是产品宣传入口，不展示 OpenClaw/Hermes 的版本、安装路径与社群信息 + loadXintianData(page) + } else if (activeEngineId === 'hermes') { loadHermesData(page) } else { loadData(page) } - renderCommunity(page) + + // 社群二维码是 OpenClaw 专属渠道，对 xintian 用户不相关 + if (activeEngineId === 'xintian') { + page.querySelector('#community-section')?.closest('.config-section')?.remove() + } else { + renderCommunity(page) + } + renderProjects(page) renderContribute(page) renderLinks(page) @@ -66,6 +78,40 @@ export async function render() { return page } +/** + * 心甜Claw 模式下的 about 页面：只展示 ClawPanel 自身版本 + 产品卡片， + * 不涉及 OpenClaw 的版本切换与安装路径。 + */ +async function loadXintianData(page) { + const cards = page.querySelector('#version-cards') + const panelVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.1.0' + const panelUpdateHtml = `${t('about.checkingUpdate')}` + checkNewVersion(cards, panelVersion) + + cards.innerHTML = ` +
    +
    ClawPanel
    +
    ${panelVersion}
    +
    ${panelUpdateHtml}
    +
    +
    +
    心甜Claw
    +
    Windows
    +
    + ${t('engine.xtCtaDownloadWin')} + ${t('engine.xtCtaVisitSite')} +
    +
    +
    +
    ${t('about.sectionLinks')}
    +
    xtclaw.xtnet.cc
    +
    + ${t('engine.xtFootSupport')} +
    +
    + ` +} + async function loadHermesData(page) { const cards = page.querySelector('#version-cards') try {