docs: add Discord/Feishu channel support notes

Merged after adding Backups/Rollback docs + README screenshot gallery (v0.8.2).

DEVLOG.md

@@ -1,10 +1,47 @@
 # OpenClaw Manager — 开发日志
 
-> 最后更新：2026-02-27
+> 最后更新：2026-02-28
 > 当前版本：v0.7.1
 
 ---
 
+## Unreleased（2026-02-28）
+
+### Dashboard / Layout
+
+- Removed the dashboard `HTTP Ping` field (often misleading in Telegram gateway setups)
+- Expanded dashboard visibility with richer gateway routing metadata:
+  - bind host
+  - telegram account count
+  - group count
+  - binding count
+  - allowFrom count
+- Reordered dashboard cards and made `Agents` / `Gateway` cards wider for denser information display
+
+### Bug Fixes
+
+- Fixed `main` agent workspace file browsing/editing fallback:
+  - when agent-level workspace is empty, it now resolves from defaults or `workspace/<agentId>`
+  - writing files now ensures workspace directory exists before save
+
+### UX Clarification
+
+- Channels page hint text updated to position it as **advanced routing management**
+- Clarifies scope difference from Agents page (daily add/remove should stay in Agents)
+- Navigation label updated from `Channels` to `Routing` to reduce conceptual overlap with Agent lifecycle management
+- Added `Routing` page agent filter (`All Agents` + per-agent quick filter) for easier large-tree inspection
+- Added compact grouped rendering in `Routing`: bindings are grouped by agent with expand/collapse support for denser large-config browsing
+
+### Settings UX
+
+- Merged `Models` and `Auth` pages into a single `Models & Auth` tab
+
+### Stats
+
+- Added daily (`1 day`) range option and set it as default
+
+---
+
 ## v0.7.1 更新日志（2026-02-27）
 
 ### New Features

OpenClaw Manager.app/Contents/Info.plist

@@ -9,9 +9,9 @@
     <key>CFBundleIdentifier</key>
     <string>com.openclaw.manager</string>
     <key>CFBundleVersion</key>
-    <string>0.5.0</string>
+    <string>0.7.1</string>
     <key>CFBundleShortVersionString</key>
-    <string>0.5.0</string>
+    <string>0.7.1</string>
     <key>CFBundlePackageType</key>
     <string>APPL</string>
     <key>CFBundleIconFile</key>

README.md

@@ -2,7 +2,7 @@
 
 A zero-dependency, single-file web dashboard for [OpenClaw](https://github.com/anthropics/openclaw). Manage agents, monitor token usage, and run commands — all from your browser, no `npm install` required.
 
-[中文说明](#中文说明)
+[中文说明](#中文说明) · [中文使用说明（含截图）](docs/USAGE_GUIDE.zh-CN.md) · [English Guide (with screenshots)](docs/USAGE_GUIDE.en.md)
 
 ---
 
@@ -22,20 +22,77 @@ git pull --ff-only
 ```
 
 Open [http://localhost:3333](http://localhost:3333) in your browser. For remote access, use `bash start.sh --host 0.0.0.0`.
+## Docs
+
+- English guide: docs/USAGE_GUIDE.en.md
+- 中文使用说明: docs/USAGE_GUIDE.zh-CN.md
+- FAQ: docs/FAQ.md
+- Security notes: docs/SECURITY.md
+- Changelog: docs/CHANGELOG.md
+
 
 ## Features
 
-**Agent Management** — Add main agents and sub-agents through a guided setup flow. View all agents in a tree structure with model selection, workspace browsing, and inline configuration.
+<details>
+<summary><b>Screenshots</b> (redacted: no personal paths, no Telegram IDs)</summary>
 
-**Usage Statistics** — Real token usage data parsed directly from OpenClaw session files. Breakdown by model, agent, and day with a visual chart.
+<p>
+  <img src="docs/redacted-screenshots/dashboard.jpg" width="240" />
+  <img src="docs/redacted-screenshots/agents.jpg" width="240" />
+  <img src="docs/redacted-screenshots/channels.jpg" width="240" />
+  <img src="docs/redacted-screenshots/models.jpg" width="240" />
+  <img src="docs/redacted-screenshots/auth.jpg" width="240" />
+  <img src="docs/redacted-screenshots/stats.jpg" width="240" />
+  <img src="docs/redacted-screenshots/cron.jpg" width="240" />
+  <img src="docs/redacted-screenshots/actions.jpg" width="240" />
+  <img src="docs/redacted-screenshots/cli.jpg" width="240" />
+  <img src="docs/redacted-screenshots/cli-output.jpg" width="240" />
+  <img src="docs/redacted-screenshots/backup-rollback.jpg" width="240" />
+</p>
 
-**Model & Auth** — Configure models from your registered provider list. Follow built-in guides for provider authentication setup.
+</details>
 
-**Built-in CLI** — Run any `openclaw` command with real-time streaming output. Preset commands, favorites, and tab completion included.
+- **Agent Management** — Add main agents and sub-agents through a guided setup flow. View all agents in a tree structure with model selection, workspace browsing, and inline configuration.
+- **Usage Statistics** — Real token usage data parsed directly from OpenClaw session files. Breakdown by model, agent, and day with a visual chart.
+- **Model & Auth** — Configure models from your registered provider list. Follow built-in guides for provider authentication setup.
+- **Built-in CLI** — Available from any page (top-right **Terminal** + bottom dock). Run OpenClaw commands with **real-time streaming output**, **Tab completion**, built-in presets, and your own saved favorites.
+- **Ops Panel** — Restart gateway, view logs, run health checks, manage backups, **rollback/restore configs**, and handle cron tasks.
+- **Backups / Rollback** — Browse auto-snapshots of `openclaw.json*` and restore any previous version (current config is auto-backed up first).
+- **Bilingual UI** — English and Chinese interface with one-click language switching.
 
-**Ops Panel** — Restart gateway, view logs, run health checks, manage backups (local + NAS via SFTP/rsync), and handle cron tasks.
+## What's New (v0.8.x)
 
-**Bilingual UI** — English and Chinese interface with one-click language switching.
+- **Docs refresh (v0.8.x)**: updated English + Chinese guides and refreshed redacted screenshots.
+- **README screenshots gallery**: all screenshots are now grouped into one collapsible section to keep the homepage short.
+- **Built-in CLI terminal**: run OpenClaw commands from any page with streaming output, presets, favorites, and Tab completion.
+- **Ops actions**: restart gateway, view logs, health check, backups (local + NAS), and cron management.
+- **Telegram-first workflow**: safer sub-agent setup flow + allowlist helper + warnings for group privacy.
+## Channel Support
+
+OCM is a local UI for OpenClaw. The core features (agent trees, routing, models/auth, ops, backups) are channel-agnostic.
+
+Current focus:
+
+- **Telegram** — best supported and most documented today
+- **Discord** — supported (recommended for private channels/threads + strict allowlist)
+- **Feishu / Lark (飞书)** — supported (Beta; enterprise-oriented setup)
+- **WhatsApp** — **not supported for sub-agent workflows** (platform constraints make reliable multi-agent isolation + routing hard)
+
+## Telegram Workflow & Safety
+
+OCM is designed primarily for **Telegram-based OpenClaw workflows**:
+
+- Bind Telegram groups to one or more main agents, then create sub-agents under each tree
+- Keep each agent's context isolated via independent `workspace`, `SOUL.md`, and `MEMORY.md`
+- OCM mainly helps you **safely update `openclaw.json`** via UI instead of manual editing
+- Recommended for users who already have basic OpenClaw CLI experience (`onboard`, auth, gateway logs)
+
+Critical Telegram settings:
+
+- In BotFather, keep **Allow Groups = ON**
+- In BotFather, set **Group Privacy = OFF**
+- For each agent group, keep it private: **only you + that agent/sub-agents**
+- Do **not** invite other people to these groups (cost and security risk)
 
 ## Requirements
 
@@ -131,6 +188,22 @@ start.bat            # Windows
 - **运维面板** — 重启网关、查看日志、健康检查、本地/NAS 备份、Cron 任务管理
 - **双语界面** — 中英文一键切换
 
+### Telegram 场景与安全提示
+
+OCM 主要面向 **Telegram 场景**：
+
+- 通过群组绑定主 Agent，并在每条树下管理多个 Sub-Agent
+- 让每个 Agent 拥有独立 `workspace`、`SOUL.md`、`MEMORY.md`
+- 通过可视化方式更新 `openclaw.json`，减少手动改配置风险
+- 建议使用者已具备基础 OpenClaw CLI 操作经验（如 `onboard`、认证、查看网关日志）
+
+关键安全设置（务必确认）：
+
+- BotFather 里 **Allow Groups = ON**
+- BotFather 里 **Group Privacy = OFF**
+- 每个 Agent 群组只保留“你自己 + 对应 Agent/Sub-Agent”
+- 不要邀请其他人进组（会带来安全和 API 费用风险）
+
 ### 配置
 
 启动脚本自动检测 `~/.openclaw` 目录。如需指定其他路径：

docs/CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+This is a user-facing summary derived from `DEVLOG.md`.
+
+## v0.8.2
+- Docs: reorganize README screenshots into a collapsible gallery to reduce scroll.
+- Docs: add Backups / Rollback screenshot and README feature blurb.
+- Docs: refresh redacted screenshots (Channels + Actions + Stats) and feature descriptions.
+
+## v0.8.1
+- Docs: add Stats screenshot and expand feature list.
+
+## v0.8.0
+- Docs: bilingual usage guides refreshed (EN + zh-CN) with redacted screenshots.
+
+## v0.7.6
+- Docs: annotated screenshots with arrows for key UI controls.
+
+## v0.7.5
+- Docs: built-in CLI terminal instructions + screenshot (tab completion, favorites, streaming output).
+
+## v0.7.4
+- Docs: English + Chinese usage guides with redacted screenshots.
+
+## v0.7.1
+- Dashboard guidance block for Telegram-first workflow + safety checklist.
+- Model dropdown options sourced from `openclaw models list`.
+
+## v0.7.0
+- Dashboard redesign with circular CPU/RAM/DISK gauges and auto-refresh.
+- Sub-agent creation flow rewritten (BotFather → group → group id → form) including allowlist helper.
+
+## v0.6.6
+- Fix: sub-agents correctly grouped under main for older config formats.
+
+## v0.6.5
+- New Dashboard tab + cache-busting headers and version checks.

docs/CONTRIBUTING.md

@@ -0,0 +1,65 @@
+# Contributing (OCM)
+
+This repo is optimized for fast iteration and safe maintenance.
+
+## Workflow (PM + Codex)
+
+Default rule:
+
+- Codex implements changes on a **new branch** and opens a **PR**.
+- Xiao Qiang (PM) reviews + runs local smoke tests.
+- Tao approves.
+- Only after explicit approval, we merge.
+
+Fast-path (small changes):
+
+- For small doc/copy/layout fixes, Tao allows **auto-merge after PM verification** (tests/smoke pass).
+- PM must still send Tao a short completion note with the PR link and summary.
+
+
+## Versioning
+
+- Single source of truth:
+  - `package.json#version`
+  - `openclaw-manager.js` → `APP_VERSION`
+- When bumping a version, update **both** in the same commit.
+- Prefer **semver-ish**: `MAJOR.MINOR.PATCH` (e.g. `0.8.2`).
+
+## Language policy (Docs + UI)
+
+- **DEVLOG.md must be English-only.**
+- UI:
+  - English mode should not show Chinese strings (except user-provided content).
+  - Chinese mode can be fully Chinese.
+- When adding new UI strings, ensure both locales are updated.
+
+## README policy
+
+- Keep the README homepage **short**.
+- Screenshots should be grouped (e.g. in a collapsible gallery) to avoid long scroll.
+- The “Features” section should be **complete** and reflect actual UI capabilities.
+
+## Screenshots (redaction)
+
+- Store public screenshots under: `docs/redacted-screenshots/`
+- Redact sensitive info:
+  - local username/path fragments
+  - Telegram peer IDs
+  - any tokens/keys
+- Prefer **English UI** screenshots.
+- Prefer clean crops (avoid arrows/annotations unless truly necessary).
+
+## Text style
+
+- Be concrete and user-focused.
+- Prefer consistent naming:
+  - “Remote backup setup” (not “NAS backup setup”)
+  - “Backups / Rollback” for restore/snapshot functionality
+
+## PR checklist
+
+- [ ] Description includes: what/why/how
+- [ ] If UI changed: include screenshots
+- [ ] Version updated when needed
+- [ ] English UI audited (no stray Chinese)
+- [ ] `DEVLOG.md` updated (English-only)

docs/FAQ.md

@@ -0,0 +1,63 @@
+# OCM FAQ
+
+## Q: Telegram 群里经常显示 typing，但不回消息？
+
+Most common cause is **BotFather Group Privacy** being ON.
+
+Fix:
+- BotFather → Your bot → Bot Settings → **Group Privacy** → **Turn off**
+
+Also check:
+- `openclaw status` (gateway healthy?)
+- provider auth/rate limits (OCM → Auth page, and gateway logs)
+
+## Q: 如何获取 Telegram Group ID（Peer ID / -100...）？
+
+Typical workflow:
+
+```bash
+openclaw gateway logs --follow
+```
+
+Send a message in the target group; the gateway logs usually contain the peer id.
+
+## Q: 模型下拉列表为什么没有我想要的模型？
+
+OCM sources model options from the real CLI output:
+
+```bash
+openclaw models list
+```
+
+So if it doesn't show up in OCM, make sure it's registered/available in your OpenClaw environment.
+
+## Q: Dashboard 里 Gateway HTTP Ping 显示 Unreachable？
+
+Common reasons:
+- Gateway not running
+- Gateway binds to a different interface/port than OCM expects
+- Local firewall/proxy interference
+
+Try:
+- `openclaw status`
+- `openclaw gateway restart`
+
+## Q: OCM 会把我的 token/个人信息上传出去吗？
+
+OCM is designed as a **local** dashboard.
+
+That said, your local OpenClaw config contains sensitive information. Follow the safety guidance:
+- keep agent Telegram groups private
+- don't share raw screenshots without redaction
+
+See: `docs/SECURITY.md`.
+
+
+## Q: 为什么 OCM 暂时不支持 WhatsApp 的 sub-agent 工作流？
+
+WhatsApp 在 bot/group 自动化能力上有较多平台限制（接入方式、权限与路由粒度、稳定性等）。
+
+OCM 的 sub-agent 模式依赖清晰的“会话边界 + 路由 + 最小权限”来保证安全和可维护性。
+因此我们目前不把 WhatsApp 作为 sub-agent 的推荐渠道，暂不支持该模式。
+
+如果未来支持 WhatsApp，更可能是 **单聊通知/轻量交互** 方向，而不是多 sub-agent 的群聊拓扑。

docs/SECURITY.md

@@ -0,0 +1,51 @@
+# Security Notes
+
+OCM is a **local web UI** for managing OpenClaw. Security depends heavily on how you run OpenClaw and how you use Telegram.
+
+## Recommended defaults
+
+- **Run locally** and restrict host binding unless you intentionally expose it.
+- Treat OpenClaw config as secrets: tokens, provider keys, account ids.
+- Prefer separate workspaces for each agent/sub-agent.
+
+## Telegram safety
+
+Strongly recommended:
+
+- **One Telegram group = one agent boundary** (context + purpose + workspace)
+- Keep each agent group **private**: only you + the bot (and optionally your second account)
+- Do **not** invite other people (cost + security risk)
+
+Critical BotFather settings:
+- Allow Groups = ON
+- Group Privacy = OFF
+
+## Discord safety
+
+Recommended defaults (especially for open-source / shared servers):
+
+- Prefer **private channels / private threads** as agent boundaries.
+- Use a strict **allowlist** of channels/threads the bot is allowed to respond in.
+- Apply **least-privilege** Discord permissions when installing the bot (only what you need).
+- Avoid running memory-enabled agents in public channels.
+
+## Feishu / Lark (飞书) safety
+
+Feishu is enterprise-oriented and typically requires more permission setup:
+
+- Request the smallest permission scope possible for your app/bot.
+- Treat group visibility as a security boundary (who can see the bot’s outputs).
+- Prefer separate chats/spaces for different agents to reduce context bleed.
+
+## WhatsApp note
+
+WhatsApp is not a recommended target for sub-agent topology workflows. Constraints in bot/group automation make reliable multi-agent isolation + routing difficult.
+
+## Sharing screenshots
+
+If you share screenshots publicly:
+- blur personal paths (e.g. `/Users/<name>/...`)
+- blur Telegram group/peer IDs (e.g. `-100xxxxxxxxxx`)
+- blur any tokens/keys if visible
+
+This repo contains **redacted + annotated** screenshots under `docs/annotated-screenshots/`.

docs/USAGE_GUIDE.en.md

@@ -0,0 +1,299 @@
+# OCM Usage Guide (with screenshots)
+
+> Audience: People who already have OpenClaw running locally (you can run `openclaw status` and read `openclaw gateway logs`).
+>
+> Goal: Use **OpenClaw Manager (OCM)** to make agent/sub-agent setup and day-to-day ops **visual, safer, and easier to audit**.
+
+---
+
+## 0) The pain: why OCM exists
+
+Creating and maintaining OpenClaw agents is powerful, but the “default workflow” is often messy:
+
+1) **Editing `openclaw.json` is risky**
+- Deep/nested config, many fields.
+- One accidental overwrite can break multiple agents (tokens, bindings, accountIds).
+
+2) **Sub-agent topology is hard to see**
+- With multiple bots + multiple groups, it’s not obvious which agent is bound to which Telegram peer.
+
+3) **Model IDs are easy to misconfigure**
+- A wrong `provider/model-id` can silently degrade performance, cause timeouts, or produce “typing…” with no reply.
+
+4) **Usage and troubleshooting take time**
+- Without tooling, you’re digging through JSONL sessions and gateway logs to answer: “who used tokens?”, “what failed?”, “which provider?”
+
+OCM’s role: **a zero-dependency local UI** that helps you view and update OpenClaw configuration safely, keep changes auditable, and centralize common ops.
+
+---
+
+## 1) Recommended: Telegram group workflow (best supported)
+
+Think of it as:
+
+> **One Telegram group = one agent boundary** (context + purpose + workspace).
+
+### Notes for other channels
+
+OCM is expanding beyond Telegram:
+
+- **Discord**: recommended to use **private channels/threads** as boundaries + strict allowlist routing.
+- **Feishu / Lark (飞书)**: supported (Beta); enterprise-oriented setup with stronger permission/visibility considerations.
+- **WhatsApp**: not recommended for sub-agent topology workflows (not supported).
+
+### Benefits
+
+1) **Clear isolation**
+- Each agent speaks only inside its own group.
+- Less cross-contamination between tasks.
+
+2) **Controllable context**
+- The group chat is the agent’s input stream.
+- You can keep an agent “clean” by keeping the group focused.
+
+3) **Natural delegation**
+- A main agent can coordinate; sub-agents can specialize (tech / travel / finance / translation, etc.).
+
+4) **Auditable**
+- You can see exactly which message triggered which response.
+
+### Safety / cost: keep groups private
+
+Recommended rule:
+
+- **Each agent group should contain only you + the bot** (and optionally your second account).
+- Don’t invite other people:
+  - cost: anyone can trigger token usage
+  - safety: higher risk of prompt-injection / accidental tool actions
+
+---
+
+## 2) Start OCM (macOS)
+
+From the repo directory:
+
+```bash
+bash start.sh
+```
+
+Then open: <http://localhost:3333>
+
+Restrict to localhost only:
+
+```bash
+bash start.sh --host 127.0.0.1
+```
+
+---
+
+## 3) Dashboard: check health first
+
+The Dashboard is your “sanity check”:
+
+- CPU / RAM / Disk
+- gateway running status
+- agent counts
+
+Screenshot:
+
+![](redacted-screenshots/dashboard.jpg)
+
+---
+
+## 4) Create a main agent (with its own Telegram bot)
+
+> Your `main` agent usually exists already. This section is for creating an additional **root agent** that owns its own Telegram bot/account.
+
+### 4.1 BotFather prerequisites
+
+1) Create a bot
+- In Telegram, open **BotFather**
+- Run `/newbot` → follow prompts → copy the bot token
+
+2) Allow groups
+- BotFather → your bot → Bot Settings
+- **Allow Groups = ON**
+
+3) Disable group privacy (critical)
+- BotFather → your bot → Bot Settings → Group Privacy
+- **Group Privacy = OFF**
+
+If group privacy is ON, the bot can’t see normal group messages. The symptom often looks like:
+- slow replies
+- “typing…” appears frequently
+- sometimes no response at all
+
+### 4.2 Add the agent in OCM
+
+Go to **Agents**:
+
+![](redacted-screenshots/agents.jpg)
+
+Click `+ Add Agent` and fill:
+
+- agent id / name
+- workspace path (recommended: separate folder per agent)
+- model (dropdown is sourced from `openclaw models list`)
+- the BotFather token
+
+OCM writes the agent + Telegram account/binding into `openclaw.json`.
+
+---
+
+## 5) Create a sub-agent (recommended workflow)
+
+### 5.1 Why a new group per sub-agent
+
+- clean context isolation
+- easier debugging
+- easy to “turn off” by muting a group
+
+### 5.2 Step-by-step
+
+In **Agents** → `+ Add Sub-Agent`:
+
+**Step 1 — Create a Telegram group**
+- private group
+- add only: you + the bot
+
+**Step 2 — Get the Group ID (peer id)**
+
+Use gateway logs:
+
+```bash
+openclaw gateway logs --follow
+```
+
+Send a message in the new group. In logs you should see something like:
+
+- `-100xxxxxxxxxx` (Telegram group id)
+
+**Step 3 — Fill the sub-agent form**
+- choose the Parent Agent (which bot/account to share)
+- paste the Group ID
+- set workspace (recommended: its own folder)
+- choose model
+
+**Step 4 — Allowlist (optional but recommended)**
+
+If you use `channels.telegram.allowFrom`, OCM can take “Your Telegram User ID” and append it automatically to the allowlist.
+
+---
+
+## 6) Verify bindings (Channels)
+
+Go to **Channels**:
+
+![](redacted-screenshots/channels.jpg)
+
+Here you can quickly validate:
+- which agent is bound to which Telegram peer
+- whether `main` has the catch-all binding (if you use that pattern)
+
+---
+
+## 7) Model settings (Models)
+
+Go to **Models**:
+
+![](redacted-screenshots/models.jpg)
+
+Key idea:
+- OCM uses the real CLI model list (`openclaw models list`) for dropdowns.
+- This reduces “invalid model-id” mistakes.
+
+---
+
+## 8) Credentials (Auth)
+
+Go to **Auth**:
+
+![](redacted-screenshots/auth.jpg)
+
+Use this page to:
+- see which provider profiles exist
+- troubleshoot expired/missing tokens
+
+---
+
+## 9) Usage stats (Stats)
+
+Go to **Stats**:
+
+![](redacted-screenshots/stats.jpg)
+
+You can break down usage by:
+- model
+- agent
+- time window
+
+OCM parses usage from OpenClaw session JSONL files.
+
+---
+
+## 10) Actions menu (ops shortcuts)
+
+The **⚡ Actions** dropdown in the top-right provides common operational shortcuts:
+- Restart Gateway
+- Live Logs
+- Manual Backup / Backups & Rollback
+- NAS Backup Setup
+- Health Check
+- Open Config Dir / Switch OpenClaw Dir
+
+Screenshot:
+
+![](redacted-screenshots/actions.jpg)
+
+## 10) Cron jobs (Cron)
+
+Go to **Cron**:
+
+![](redacted-screenshots/cron.jpg)
+
+You can:
+- see scheduled tasks (backup / update / health)
+- run tasks manually
+- enable/disable entries
+
+---
+
+## 11) Built-in CLI Terminal
+
+OCM includes a built-in terminal panel to run OpenClaw CLI commands directly (for example: `openclaw status`, `openclaw gateway logs --follow`, `openclaw doctor`).
+
+How to open: click **⌨️ Terminal** in the top navigation, or use the bottom CLI panel.
+
+Highlights:
+- **Tab completion** while typing commands
+- **Common commands** dropdown to insert templates quickly
+- **Favorites**: save frequently used commands and run them with one click
+- **Streaming output** (stdout/stderr) for faster debugging
+
+Screenshot:
+
+![](redacted-screenshots/cli.jpg)
+
+![](redacted-screenshots/cli-output.jpg)
+
+## 11) Fast troubleshooting
+
+### “Typing…” but no reply in a Telegram group
+
+Check (in order):
+
+1) BotFather: **Group Privacy = OFF**
+2) `openclaw status` (gateway healthy?)
+3) provider auth / rate limit issues (Auth page + gateway logs)
+
+### Model dropdown doesn’t show a model you expect
+
+- dropdown comes from `openclaw models list`
+- ensure the model is registered/visible in your OpenClaw environment
+
+---
+
+## Notes about screenshots
+
+All screenshots in this guide are **redacted** (no personal paths, no Telegram IDs).
+They live under `docs/redacted-screenshots/`.

docs/USAGE_GUIDE.zh-CN.md

@@ -0,0 +1,291 @@
+# OCM 功能使用说明（含截图）
+
+> 面向：已经在本机安装并跑通 OpenClaw 的用户（至少会用 `openclaw status` / `openclaw gateway logs`）
+>
+> 目标：用 **OpenClaw Manager (OCM)** 把“创建 Agent / Sub-Agent、绑定 Telegram 群、管理模型/认证、看用量、看 cron”这套流程做成可视化、可回溯、低风险。
+
+---
+
+## 0) 先说痛点：为什么要用 OCM
+
+### 0.1 创建/维护 Agent 的典型痛点
+
+1. **改 `openclaw.json` 容易改错**
+   - 字段多、层级深、容易手滑覆盖 token / accountId / bindings。
+   - 一次写错可能导致多个 Agent 全挂。
+
+2. **Sub-Agent 的边界和“谁在用哪个 bot token”不直观**
+   - 多 Bot / 多 agent / 多群组绑定时，光靠肉眼看 JSON 很难确认拓扑结构是否正确。
+
+3. **模型选择很容易“写了一个不存在的 model-id”**
+   - provider/model-id 拼错、或 provider 侧不支持，最后表现就是 Agent 变慢/报错/一直 typing。
+
+4. **统计用量和排查问题耗时**
+   - 需要翻 session JSONL / gateway logs 才能知道谁在烧 token、哪里失败。
+
+OCM 的定位：**把配置变更“可视化 + 可检查 + 可回滚（配合备份）”，并把常用运维入口集中起来。**
+
+---
+
+## 1) 推荐：Telegram 群组工作流（目前支持最好）
+
+> 这里讨论的是 OpenClaw 的一种非常实用的工作方式：**“一个 Telegram 群 = 一个 Agent 的工作空间/人格/上下文边界”**。
+
+### 其他渠道说明
+
+OCM 正在扩展 Telegram 之外的渠道支持：
+
+- **Discord**：建议用**私密频道/私密 thread**作为边界，并启用严格 allowlist 路由。
+- **飞书 / Lark**：支持（Beta）；企业协作场景更强，但权限/可见性边界需要更谨慎。
+- **WhatsApp**：不适合做 sub-agent 群聊拓扑（暂不支持）。
+
+### 1.1 Telegram group 方案的优势
+
+1. **边界天然清晰**
+   - 每个 Agent 只在自己的群里说话，和其他 Agent 隔离。
+
+2. **上下文可控**
+   - 一个群的聊天记录就是该 Agent 的输入流；不会和别的任务混在一起。
+
+3. **并发与分工自然**
+   - 主 Agent 负责总控/派工，Sub-Agent 负责专项：技术宅/旅行/理财/翻译……
+
+4. **可审计**
+   - 群里发生了什么一眼可见；出问题也能定位是哪条消息触发。
+
+### 1.2 为什么“群必须私密”（安全与成本）
+
+- 强烈建议：**每个 Agent 群只留你自己 + 对应 bot（+ 必要时的另一个你自己的账号）**。
+- 不要拉别人进来：
+  - 成本：别人一句话就触发 token 消耗
+  - 安全：可能诱导泄露信息/触发危险操作
+
+---
+
+## 2) 启动与进入 OCM
+
+### 2.1 启动（macOS）
+
+在 OCM 目录：
+
+```bash
+bash start.sh
+```
+
+默认访问：<http://localhost:3333>
+
+> 需要限制只能本机访问：`bash start.sh --host 127.0.0.1`
+
+### 2.2 Dashboard（先看健康状态）
+
+建议第一步先看 Dashboard，确认：
+- 机器资源（CPU/RAM/DISK）
+- OpenClaw gateway 是否 Running
+- Agents 数量
+
+截图示例：
+
+![](redacted-screenshots/dashboard.jpg)
+
+---
+
+## 3) 创建主 Agent（Main Agent / 独立 Bot）
+
+> 你的 `main` 一般是默认存在的；这里重点讲“新增一个 **拥有独立 Telegram bot 的主 Agent**”。
+
+### 3.1 BotFather 侧准备（必须）
+
+1) 创建 bot
+- 在 Telegram 找 **BotFather**
+- 发送 `/newbot` → 按提示创建 → 拿到 bot token
+
+2) 允许加群
+- BotFather → 你的 bot → Bot Settings
+- **Allow Groups = ON**
+
+3) 关闭群隐私（非常关键）
+- BotFather → 你的 bot → Bot Settings → Group Privacy
+- **Group Privacy = OFF**
+
+> 如果 Group Privacy 没关，bot 在群里看不到普通消息，会表现成“经常 typing 但没输出 / 没反应”。
+
+### 3.2 在 OCM 添加主 Agent
+
+进入 **Agents** 页面：
+
+![](redacted-screenshots/agents.jpg)
+
+点击 `+ Add Agent`，按表单填写：
+- Agent id / name
+- workspace 路径（建议独立目录）
+- 选择模型（下拉来自 `openclaw models list`，更不容易选错）
+- 填入刚拿到的 bot token
+
+保存后，OCM 会把这颗主 Agent 写进 `openclaw.json`，并把 bot token 绑定到对应 `accountId`。
+
+---
+
+## 4) 创建 Sub-Agent（最常用）
+
+### 4.1 为什么 Sub-Agent 要用“新群”
+
+- 让每个 Sub-Agent 有自己独立的对话上下文、任务边界
+- 出问题直接在该群排查，不污染主 Agent 的对话
+
+### 4.2 Sub-Agent 创建流程（逐步）
+
+进入 **Agents** 页面 → 点击 `+ Add Sub-Agent`，按引导做：
+
+#### Step 1：建 Telegram 群
+- 新建群（私密）
+- 群里只加：你自己 + 对应的 bot
+
+#### Step 2：拿到群 ID（Peer ID / Group ID）
+OpenClaw 通常会在 gateway 日志里打印群的 peer id。
+
+常见拿法：
+```bash
+openclaw gateway logs --follow
+```
+然后在 Telegram 群里随便发一句话，观察日志。
+
+> 你会看到类似 `-100xxxxxxxxxx` 这样的 group id。
+
+#### Step 3：回到 OCM 填表
+- Parent Agent（选择共享哪个 bot/account）
+- 填 Group ID
+- workspace（建议单独目录）
+- 选择模型
+
+#### Step 4：写 allowlist（推荐）
+如果你启用了 Telegram 的 allowlist（例如 `channels.telegram.allowFrom`），
+OCM 的表单里可以填 “Your Telegram User ID”，让它自动把你的 user id 加进去，避免 DM/群消息被拒。
+
+---
+
+## 5) 绑定检查（Channels 页）
+
+进入 **Channels**：
+
+![](redacted-screenshots/channels.jpg)
+
+这里能一眼看到：
+- 哪个 agent 绑定了哪个 Telegram peer（群）
+- main 的“兜底绑定”（any）是否存在
+
+> 如果某个 Sub-Agent 绑定错群/丢 binding，最直观的就是在这里对不上。
+
+---
+
+## 6) 模型管理（Models 页）
+
+进入 **模型**：
+
+![](redacted-screenshots/models.jpg)
+
+关键点：
+- 主模型（primary）和 fallback 链
+- 下拉列表来自 `openclaw models list`（能减少“选了不存在模型”的问题）
+
+---
+
+## 7) 认证管理（Auth 页）
+
+进入 **认证**：
+
+![](redacted-screenshots/auth.jpg)
+
+这里主要用来：
+- 看当前有哪些 provider profile
+- 排查某个 provider 是否过期/缺 token
+
+---
+
+## 8) 用量统计（Stats 页）
+
+进入 **Stats**：
+
+![](redacted-screenshots/stats.jpg)
+
+你可以按：
+- 按模型聚合
+- 按 Agent 聚合
+- 按天趋势
+
+> OCM 是从 OpenClaw 的 session JSONL 里解析真实 usage（比“看日志猜”靠谱）。
+
+---
+
+## 9) CLI 终端（内置）
+
+OCM 内置一个 CLI 面板，用来直接运行 OpenClaw 命令（例如：`openclaw status`、`openclaw gateway logs --follow`、`openclaw doctor`）。
+
+入口：点击顶部导航栏的 **⌨️ 终端**，或使用页面底部的 CLI 区域。
+
+功能要点：
+- **Tab 补全**：输入命令时按 Tab 进行补全/提示（适合 `openclaw ...` 子命令）
+- **常用命令**：可从下拉选择，一键填充常用命令模板
+- **收藏（Favorites）**：把常用命令保存为收藏，后续一键执行
+- **实时输出**：执行后会流式显示 stdout/stderr，方便排错
+
+截图示例：
+
+![](redacted-screenshots/cli.jpg)
+
+![](redacted-screenshots/cli-output.jpg)
+
+## 9) Actions 菜单（运维快捷入口）
+
+右上角 **⚡ Actions** 下拉菜单提供常用运维操作：
+- Restart Gateway（重启网关）
+- Live Logs（实时日志）
+- Manual Backup / Backups & Rollback（备份/回滚）
+- NAS Backup Setup（NAS 备份配置）
+- Health Check（健康检查）
+- Open Config Dir / Switch OpenClaw Dir（打开/切换配置目录）
+
+截图示例：
+
+![](redacted-screenshots/actions.jpg)
+
+## 9) Cron（定时任务）
+
+进入 **Cron**：
+
+![](redacted-screenshots/cron.jpg)
+
+用途：
+- 查看有哪些健康检查/更新/备份任务
+- 手动运行
+- 观察启用/禁用状态
+
+---
+
+## 10) 常见故障排查（快速）
+
+### 10.1 Telegram 群里“一直 typing 但不回”
+
+优先检查：
+1) BotFather 的 **Group Privacy 是否 OFF**
+2) OpenClaw gateway 是否健康（`openclaw status`）
+3) provider 是否限流/超时（Auth 页 + gateway logs）
+
+### 10.2 模型下拉没有你想要的模型
+
+- 现在下拉是 `openclaw models list` 的真实输出。
+- 先确保你在 OpenClaw 里已经注册/可见该模型。
+
+---
+
+## 11) 推荐的“最佳实践”
+
+- 每个 Agent 都用独立 workspace（隔离文件/记忆）
+- 每个 Sub-Agent 都用独立 Telegram 群（隔离上下文）
+- 群里不要加第三方（成本 + 安全）
+- 任何“改配置的大动作”尽量先备份（OCM/脚本/手工都行）
+
+---
+
+## 附：截图说明
+
+本文截图来自 `docs/redacted-screenshots/`，已做脱敏（路径用户名、Telegram 绑定 ID 等均已模糊处理）。

openclaw-manager.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 // ================================================================
-// OpenClaw Manager v0.7.1
+// OpenClaw Manager v0.8.2
 // 跨平台本地管理工具  (Windows / macOS / Linux)
 //
 // 用法:
@@ -24,7 +24,7 @@ const SCRIPT_DIR = __dirname;
 const MANAGER_CONFIG = path.join(SCRIPT_DIR, 'manager-config.json');
 let PORT = 3333;
 let HOST = '0.0.0.0';
-const APP_VERSION = '0.7.1';
+const APP_VERSION = '0.8.2';
 // --port 参数
 const portIdx = process.argv.indexOf('--port');
 if (portIdx !== -1 && process.argv[portIdx + 1]) PORT = parseInt(process.argv[portIdx + 1]) || 3333;
@@ -137,6 +137,16 @@ function resolvePath(p) {
   return p.replace(/^~/, os.homedir());
 }
 
+function resolveAgentWorkspacePath(cfg, agentId, agent) {
+  const defaultsWs = cfg?.agents?.defaults?.workspace || '';
+  const raw = (agent && agent.workspace) || (agentId === 'main' ? defaultsWs : '');
+  const expanded = resolvePath(raw || '');
+  if (expanded) {
+    return path.isAbsolute(expanded) ? expanded : path.resolve(OPENCLAW_DIR, expanded);
+  }
+  return path.join(OPENCLAW_DIR, 'workspace', agentId);
+}
+
 async function dirExists(p) {
   try { const s = await fsp.stat(p); return s.isDirectory(); } catch { return false; }
 }
@@ -613,7 +623,7 @@ async function handleApi(req, res, urlObj, body) {
     const cfg = await readConfig();
     const agent = cfg.agents?.list?.find(a => a.id === agentId);
     if (!agent) { res.writeHead(404); res.end(JSON.stringify({ error: 'Agent 不存在' })); return; }
-    const wsPath = resolvePath(agent.workspace);
+    const wsPath = resolveAgentWorkspacePath(cfg, agentId, agent);
     const files = {};
     const fileStats = {};
     try {
@@ -649,7 +659,8 @@ async function handleApi(req, res, urlObj, body) {
     const cfg   = await readConfig();
     const agent = cfg.agents?.list?.find(a => a.id === agentId);
     if (!agent) { res.writeHead(404); res.end(JSON.stringify({ error: 'Agent 不存在' })); return; }
-    const wsPath = resolvePath(agent.workspace);
+    const wsPath = resolveAgentWorkspacePath(cfg, agentId, agent);
+    await fsp.mkdir(wsPath, { recursive: true });
     await fsp.writeFile(path.join(wsPath, fname), body.content || '', 'utf8');
     res.writeHead(200);
     res.end(JSON.stringify({ ok: true }));
@@ -1355,17 +1366,25 @@ async function handleApi(req, res, urlObj, body) {
         }
       } catch (_) { gatewayRunning = 'stopped'; }
 
-      // HTTP ping gateway (port from config or default 3000)
+      // Gateway port (from config or default 3000)
       let gatewayPort = null;
-      let gatewayPing = false;
       try {
         if (cfg && cfg.channels && cfg.channels.telegram) {
           gatewayPort = cfg.channels.telegram.port || null;
         }
         if (!gatewayPort) gatewayPort = 3000;
-        const pingResult = spawnSync('curl', ['-s', '-o', '/dev/null', '-w', '%{http_code}', '--max-time', '2', 'http://127.0.0.1:' + gatewayPort], { encoding: 'utf8', timeout: 4000 });
-        const code = parseInt((pingResult.stdout || '').trim());
-        gatewayPing = code > 0 && code < 500;
+      } catch (_) {}
+
+      // Telegram routing/bot counts
+      let bindingCount = 0, accountCount = 0, groupCount = 0, allowFromCount = 0, configAgentCount = 0;
+      try {
+        bindingCount = (cfg?.bindings || []).length;
+        const accounts = cfg?.channels?.telegram?.accounts || {};
+        accountCount = Object.keys(accounts).length;
+        groupCount = Object.keys(cfg?.channels?.telegram?.groups || {}).length;
+        if (!accountCount && cfg?.channels?.telegram?.botToken) accountCount = 1; // legacy single-token config
+        allowFromCount = (cfg?.channels?.telegram?.allowFrom || []).length;
+        configAgentCount = (cfg?.agents?.list || []).length;
       } catch (_) {}
 
       // Agent count (main vs sub) & last activity
@@ -1408,8 +1427,8 @@ async function handleApi(req, res, urlObj, body) {
       res.end(JSON.stringify({
         ok: true,
         system: { hostname, platform, nodeVer, cpuModel, cpuCores, uptime: sysUptime, totalMem, freeMem, diskTotal, diskUsed, diskFree, dirSize, cpuPercent, loadAvg },
-        gateway: { status: gatewayRunning, pid: gatewayPid, port: gatewayPort, ping: gatewayPing },
-        agents: { count: agentCount, mainCount: mainAgentCount, subCount: subAgentCount, lastActivity: lastActivity ? lastActivity.toISOString() : null },
+        gateway: { status: gatewayRunning, pid: gatewayPid, port: gatewayPort, host: HOST, accountCount, groupCount, bindingCount, allowFromCount },
+        agents: { count: agentCount, configCount: configAgentCount, mainCount: mainAgentCount, subCount: subAgentCount, lastActivity: lastActivity ? lastActivity.toISOString() : null },
         ocmVersion: APP_VERSION,
         serverTime: now,
       }));
@@ -1659,6 +1678,7 @@ select option { background:var(--surface); }
 .dash-gauge-label { font-size:12px; color:var(--muted); margin-top:8px; font-weight:500; }
 .dash-sections { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
 .dash-card { padding:20px; }
+.dash-card-wide { grid-column:span 2; }
 .dash-card h3 { font-size:14px; font-weight:600; margin-bottom:14px; color:var(--text); }
 .dash-notice { margin-top:18px; padding:16px 18px; }
 .dash-notice h3 { font-size:14px; margin-bottom:10px; }
@@ -1672,6 +1692,9 @@ select option { background:var(--surface); }
 .dash-indicator.running { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.5); }
 .dash-indicator.stopped { background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,.5); }
 .dash-indicator.unknown { background:#f59e0b; }
+@media (max-width: 980px) {
+  .dash-card-wide { grid-column:span 1; }
+}
 
 /* ── Modal ── */
 .backdrop { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:100; display:none; align-items:center; justify-content:center; }
@@ -1735,6 +1758,21 @@ code { font-size:12px; background:rgba(0,0,0,.3); padding:2px 6px; border-radius
 .ch-badge { font-size:11px; padding:2px 7px; border-radius:12px; }
 .ch-tg  { background:rgba(51,144,236,.15); color:#33a0ec; }
 .ch-any { background:var(--border); color:var(--muted); }
+.channels-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
+.channels-filter-label { font-size:12px; color:var(--muted); }
+.channels-filter { min-width:180px; max-width:260px; font-size:12px; padding:6px 10px; }
+.routing-group { background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
+.routing-group-hdr { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--border); }
+.routing-group-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
+.routing-group-name { font-size:13px; font-weight:600; color:var(--text); }
+.routing-group-count { font-size:11px; color:var(--muted); }
+.routing-toggle { font-size:11px; padding:4px 10px; }
+.routing-list { display:flex; flex-direction:column; }
+.routing-list.collapsed { display:none; }
+.routing-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border); }
+.routing-row:last-child { border-bottom:none; }
+.routing-row-main { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; min-width:0; }
+.routing-row-sub { font-size:11px; color:var(--muted); }
 
 /* NAS backup */
 .nas-step { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:14px; margin-bottom:12px; }
@@ -1816,9 +1854,8 @@ const MAIN_HTML_BODY = String.raw`
 <nav>
   <div class="tab active" data-tab="dashboard"><span data-i18n="tab.dashboard">🏠 Dashboard</span></div>
   <div class="tab" data-tab="agents"><span data-i18n="tab.agents">🤖 Agents</span></div>
-  <div class="tab" data-tab="channels"><span data-i18n="tab.channels">📡 Channels</span></div>
-  <div class="tab" data-tab="models"><span data-i18n="tab.models">🧠 模型</span></div>
-  <div class="tab" data-tab="auth"><span data-i18n="tab.auth">🔑 认证</span></div>
+  <div class="tab" data-tab="channels"><span data-i18n="tab.channels">🧭 Routing</span></div>
+  <div class="tab" data-tab="models"><span data-i18n="tab.models">🧠 模型与认证</span></div>
   <div class="tab" data-tab="stats"><span data-i18n="tab.stats">📊 Stats</span></div>
   <div class="tab" data-tab="cron"><span data-i18n="tab.cron">⏰ Cron</span></div>
   <button class="cli-nav-btn" id="cliToggleBtn" onclick="toggleCliPanel()"><span data-i18n="cli.open">⌨️ 终端</span></button>
@@ -1848,14 +1885,14 @@ const MAIN_HTML_BODY = String.raw`
         <h3>🖥️ System Info</h3>
         <div class="dash-items" id="dashSysItems"><div class="empty">Loading...</div></div>
       </div>
-      <div class="card dash-card" id="dashGateway">
-        <h3>🦀 Gateway</h3>
-        <div class="dash-items" id="dashGwItems"><div class="empty">Loading...</div></div>
-      </div>
-      <div class="card dash-card" id="dashAgents">
+      <div class="card dash-card dash-card-wide" id="dashAgents">
         <h3>🤖 Agents</h3>
         <div class="dash-items" id="dashAgentItems"><div class="empty">Loading...</div></div>
       </div>
+      <div class="card dash-card dash-card-wide" id="dashGateway">
+        <h3>🦀 Gateway</h3>
+        <div class="dash-items" id="dashGwItems"><div class="empty">Loading...</div></div>
+      </div>
       <div class="card dash-card" id="dashStorage">
         <h3>💾 Storage</h3>
         <div class="dash-items" id="dashStorageItems"><div class="empty">Loading...</div></div>
@@ -1879,6 +1916,10 @@ const MAIN_HTML_BODY = String.raw`
       <button class="btn-primary" onclick="showAddForm('sub')" data-i18n="agents.addSub">＋ Add Sub-Agent</button>
     </div>
     <div id="addFormArea"></div>
+    <p class="hint-text" style="margin:10px 0 14px" data-i18n="agents.hint">
+      <b>Add Agent</b>: create a top-level agent (a long-lived role). Use this for a new domain like ops/travel/finance, or when you want fully isolated workflows.
+      <br><b>Add Sub-Agent</b>: create a child agent under a parent. Sub-agents use the parent agent’s Telegram bot, but each sub-agent has its own workspace, SOUL.md (persona), and MEMORY.md (memory) — preventing context mixing, improving focus, and saving tokens.
+    </p>
     <div class="agents-tree-wrap">
       <div id="agentTree"><div class="empty" data-i18n="agents.empty">No Agents</div></div>
     </div>
@@ -1887,10 +1928,15 @@ const MAIN_HTML_BODY = String.raw`
   <!-- ══ Channels ══════════════════════════════════════════════ -->
   <div class="panel" id="panel-channels">
     <div class="sec-hdr">
-      <h2 data-i18n="channels.title">Channel 绑定</h2>
-      <button class="btn-primary" onclick="openAddChannel()" data-i18n="channels.add">＋ 添加绑定</button>
+      <h2 data-i18n="channels.title">Routing Bindings</h2>
+      <div class="channels-toolbar">
+        <span class="channels-filter-label" data-i18n="channels.filterLabel">Agent</span>
+        <select id="channelsAgentFilter" class="channels-filter" onchange="onChannelFilterChange(this.value)"></select>
+        <button class="btn-primary" onclick="openAddChannel()" data-i18n="channels.add">＋ Add Binding</button>
+      </div>
     </div>
-    <p class="hint-text" style="margin-bottom:14px" data-i18n="channels.hint">管理 Agent 与频道/群组的绑定关系。绑定顺序决定优先级，排在前面的规则先匹配。</p>
+    <p class="hint-text" style="margin-bottom:14px" data-i18n="channels.hint">Advanced routing rules for agent-channel/group bindings and priority order. Use Agents page for daily add/remove workflows.</p>
+    <p class="hint-text" style="margin-top:-8px;margin-bottom:14px" data-i18n="channels.removeHint">When to use <b>Remove binding</b>: if you bound the wrong agent/chat, the group was recreated/migrated (new peer id), you have duplicates/conflicts, you want to decommission a project sub-agent, or you need to temporarily disconnect routing for safety.</p>
     <div class="card-grid" id="channelList"><div class="empty">加载中...</div></div>
   </div>
 
@@ -1916,24 +1962,13 @@ const MAIN_HTML_BODY = String.raw`
       </div>
       <div id="fallbackList" class="tag-row" style="margin-top:10px"></div>
     </div>
-  </div>
-
-  <!-- ══ 认证 ════════════════════════════════════════════════ -->
-  <div class="panel" id="panel-auth">
-    <div class="sec-hdr">
-      <h2 data-i18n="auth.title">认证配置</h2>
-    </div>
+    <hr>
+    <div class="sec-hdr"><h2 style="font-size:14px" data-i18n="auth.title">认证配置</h2></div>
     <p class="hint-text" style="margin-bottom:14px" data-i18n="auth.guide">点击 Provider 查看认证步骤。认证需在终端完成，或使用下方 CLI 终端。</p>
-
-    <!-- Provider 选择网格 -->
     <div class="auth-prov-grid" id="authProvGrid" style="margin-bottom:16px"></div>
-
-    <!-- 选中 Provider 的指引区 -->
     <div class="card" id="authActionCard" style="display:none;margin-bottom:16px">
       <div id="authActionContent"></div>
     </div>
-
-    <!-- 已配置的认证列表 -->
     <div class="sec-hdr"><h2 style="font-size:14px" data-i18n="auth.configured">已配置认证</h2></div>
     <div class="card-grid" id="authList"><div class="empty">加载中...</div></div>
   </div>
@@ -1943,8 +1978,9 @@ const MAIN_HTML_BODY = String.raw`
     <div class="sec-hdr">
       <h2 data-i18n="stats.title">使用统计</h2>
       <select id="statsDaysFilter" onchange="loadStats()" style="padding:6px 10px;font-size:12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text)">
+        <option value="1" selected>1 day</option>
         <option value="7">7 days</option>
-        <option value="30" selected>30 days</option>
+        <option value="30">30 days</option>
         <option value="90">90 days</option>
       </select>
     </div>
@@ -2241,10 +2277,12 @@ const MAIN_HTML_SCRIPT = `// ── i18n ─────────────
 const I18N = {
   zh: {
     'tab.dashboard':'🏠 Dashboard',
-    'tab.agents':'🤖 Agents','tab.channels':'📡 Channels','tab.models':'🧠 模型','tab.auth':'🔑 认证',
+    'tab.agents':'🤖 Agents','tab.channels':'🧭 路由','tab.models':'🧠 模型与认证','tab.auth':'🔑 认证',
     'tab.stats':'📊 Stats','tab.cron':'⏰ Cron',
     'agents.title':'Agents','agents.new':'＋ 新建 Subagent',
-    'channels.title':'Channel 绑定','channels.add':'＋ 添加绑定','channels.hint':'管理 Agent 与频道/群组的绑定关系。绑定顺序决定优先级。',
+    'channels.title':'路由绑定','channels.add':'＋ 添加绑定','channels.hint':'用于高级路由管理：维护 Agent 与频道/群组绑定及优先级顺序。日常增减 Agent 请在 Agents 页面操作。',
+    'channels.filterLabel':'Agent','channels.filterAll':'全部 Agent','channels.emptyFiltered':'当前 Agent 下暂无绑定',
+    'channels.countSuffix':'条绑定','channels.collapse':'折叠','channels.expand':'展开',
     'models.title':'模型管理','models.primary':'默认主模型','models.fallback':'Fallback 链',
     'models.hint':'模型由 openclaw onboard 注册，此处管理主模型和 Fallback 链。',
     'models.onlyCliHint':'模型下拉仅显示 openclaw models list 返回的模型。',
@@ -2283,7 +2321,7 @@ const I18N = {
     'actions.setupEmpty':'请填写路径','actions.setupSwitching':'目录已切换，正在刷新...','actions.setupInvalid':'路径无效','actions.setupReqFail':'请求失败: ',
     'common.loading':'加载中...','common.close':'关闭',
     'btn.save':'保存','btn.delete':'删除','btn.cancel':'取消','btn.add':'添加','btn.remove':'移除',
-    'agents.addAgent':'＋ Add Agent','agents.addSub':'＋ Add Sub-Agent',
+    'agents.addAgent':'＋ Add Agent','agents.addSub':'＋ Add Sub-Agent','agents.hint':'Add Agent: create a top-level agent (a long-lived role) for a new domain. Add Sub-Agent: create a child under a parent; sub-agents use the parent Telegram bot but have their own workspace + SOUL.md + MEMORY.md, preventing context mixing, improving focus, and saving tokens.',
     'agents.addAgentTitle':'Add Agent (Main Bot)','agents.addSubTitle':'Add Sub-Agent',
     'agents.botToken':'Bot Token','agents.botName':'Bot Name','agents.botNamePh':'My Bot',
     'agents.addAgentSubmit':'Create Agent','agents.addSubSubmit':'Create Sub-Agent',
@@ -2360,10 +2398,12 @@ const I18N = {
   },
   en: {
     'tab.dashboard':'🏠 Dashboard',
-    'tab.agents':'🤖 Agents','tab.channels':'📡 Channels','tab.models':'🧠 Models','tab.auth':'🔑 Auth',
+    'tab.agents':'🤖 Agents','tab.channels':'🧭 Routing','tab.models':'🧠 Models & Auth','tab.auth':'🔑 Auth',
     'tab.stats':'📊 Stats','tab.cron':'⏰ Cron',
     'agents.title':'Agents','agents.new':'＋ New Subagent',
-    'channels.title':'Channel Bindings','channels.add':'＋ Add Binding','channels.hint':'Manage Agent to channel/group bindings. Order determines priority.',
+    'channels.title':'Routing Bindings','channels.add':'＋ Add Binding','channels.hint':'Advanced routing rules for agent-channel/group bindings and priority order. Use Agents page for daily add/remove workflows.','channels.removeHint':'When to use Remove binding: wrong agent/chat, group recreated (new id), duplicates/conflicts, decommission a sub-agent, or temporarily disconnect routing for safety.',
+    'channels.filterLabel':'Agent','channels.filterAll':'All Agents','channels.emptyFiltered':'No bindings for selected agent',
+    'channels.countSuffix':'bindings','channels.collapse':'Collapse','channels.expand':'Expand',
     'models.title':'Model Management','models.primary':'Default Primary Model','models.fallback':'Fallback Chain',
     'models.hint':'Models are registered via openclaw onboard. Manage primary model and fallback chain here.',
     'models.onlyCliHint':'Model dropdowns only show IDs returned by openclaw models list.',
@@ -2402,7 +2442,7 @@ const I18N = {
     'actions.setupEmpty':'Please enter a path','actions.setupSwitching':'Directory switched, refreshing...','actions.setupInvalid':'Invalid path','actions.setupReqFail':'Request failed: ',
     'common.loading':'Loading...','common.close':'Close',
     'btn.save':'Save','btn.delete':'Delete','btn.cancel':'Cancel','btn.add':'Add','btn.remove':'Remove',
-    'agents.addAgent':'＋ Add Agent','agents.addSub':'＋ Add Sub-Agent',
+    'agents.addAgent':'＋ Add Agent','agents.addSub':'＋ Add Sub-Agent','agents.hint':'Add Agent: create a top-level agent (a long-lived role) for a new domain. Add Sub-Agent: create a child under a parent; sub-agents use the parent Telegram bot but have their own workspace + SOUL.md + MEMORY.md, preventing context mixing, improving focus, and saving tokens.',
     'agents.addAgentTitle':'Add Agent (Main Bot)','agents.addSubTitle':'Add Sub-Agent',
     'agents.botToken':'Bot Token','agents.botName':'Bot Name','agents.botNamePh':'My Bot',
     'agents.addAgentSubmit':'Create Agent','agents.addSubSubmit':'Create Sub-Agent',
@@ -2484,7 +2524,9 @@ const LS = {
   set(k, v)      { try { localStorage.setItem(k, v); } catch(e) {} },
   del(k)         { try { localStorage.removeItem(k); } catch(e) {} },
 };
-let lang = LS.get('ocm_lang', 'zh');
+// Default UI language. Users can toggle and we persist in localStorage.
+// Prefer English by default for broader sharing/promotions.
+let lang = LS.get('ocm_lang', 'en');
 function t(k) { return I18N[lang][k] || I18N.zh[k] || k; }
 function applyLang() {
   document.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = t(el.dataset.i18n); });
@@ -2499,6 +2541,7 @@ function applyLang() {
   // Re-render model/auth cards so Remove button text updates
   try{ renderModels(); }catch(_){}
   try{ renderAuth(); }catch(_){}
+  try{ renderChannels(); }catch(_){}
   // Rebuild presets dropdown if CLI is open
   if(document.getElementById('cliPanel')&&document.getElementById('cliPanel').classList.contains('open')){
     buildCliPresets();
@@ -2540,6 +2583,8 @@ let S = { agents:[], channels:[], models:{}, authProfiles:{}, knownModels:[], mo
 let wizCur = 1;
 let logTimer = null;
 let selectedAuthProv = null;
+let channelFilterAgent = '__all__';
+let routingCollapsedByAgent = {};
 
 // ── 初始化（enterApp 触发） ─────────────────────────────────
 async function checkStatus(){
@@ -2552,7 +2597,10 @@ async function checkStatus(){
   }catch{ setDot('err'); document.getElementById('statusTxt').textContent='无法读取配置'; }
 }
 
-async function loadAll(){ await Promise.all([loadAgents(), loadModels(), loadChannels()]); }
+async function loadAll(){
+  await Promise.all([loadAgents(), loadModels(), loadChannels()]);
+  try{ renderChannels(); }catch(_){}
+}
 
 // ── Dashboard ─────────────────────────────────────────────────
 let dashLoaded=false;
@@ -2611,14 +2659,19 @@ async function loadDashboard(){
     const statusIcon='<span class="dash-indicator '+esc(g.status)+'"></span>';
     const statusLabel=g.status==='running'?'Running':g.status==='stopped'?'Stopped':'Unknown';
     let gwHtml=dashRow('Status',statusIcon+statusLabel);
+    gwHtml+=dashRow('Bind Host',esc(g.host||'—'));
     gwHtml+=dashRow('Port',String(g.port||'—'));
     if(g.pid)gwHtml+=dashRow('PID',g.pid);
-    gwHtml+=dashRow('HTTP Ping',g.ping?'<span style="color:#22c55e">✓ Reachable</span>':'<span style="color:#ef4444">✗ Unreachable</span>');
+    gwHtml+=dashRow('Telegram Accounts',String(g.accountCount||0));
+    gwHtml+=dashRow('Groups',String(g.groupCount||0));
+    gwHtml+=dashRow('Bindings',String(g.bindingCount||0));
+    gwHtml+=dashRow('allowFrom',String(g.allowFromCount||0));
     document.getElementById('dashGwItems').innerHTML=gwHtml;
     // Agents card
-    let agHtml=dashRow('Main Agents',String(a.mainCount||0));
+    let agHtml=dashRow('Configured Agents',String(a.configCount||0));
+    agHtml+=dashRow('Runtime Agent Dirs',String(a.count||0));
+    agHtml+=dashRow('Agent Trees',String(a.mainCount||0));
     agHtml+=dashRow('Sub-Agents',String(a.subCount||0));
-    agHtml+=dashRow('Total',String(a.count));
     if(a.lastActivity){
       const d=new Date(a.lastActivity);
       agHtml+=dashRow('Last Activity',d.toLocaleString('en-AU',{timeZone:'Australia/Brisbane',hour12:false}));
@@ -2958,22 +3011,88 @@ async function saveAgentModel(agentId){
 }
 
 // ── 渲染 Channels ────────────────────────────────────────────
+function getChannelAgentChoices(){
+  const byId={};
+  (S.agents||[]).forEach(a=>{
+    if(a&&a.id) byId[a.id]=a.name||a.id;
+  });
+  (S.channels||[]).forEach(ch=>{
+    if(ch&&ch.agentId&&!byId[ch.agentId]) byId[ch.agentId]=ch.agentName||ch.agentId;
+  });
+  return Object.keys(byId).sort((a,b)=>a.localeCompare(b)).map(id=>({id,name:byId[id]}));
+}
+
+function renderChannelFilter(){
+  const sel=document.getElementById('channelsAgentFilter');
+  if(!sel) return;
+  const choices=getChannelAgentChoices();
+  if(channelFilterAgent!=='__all__' && !choices.some(c=>c.id===channelFilterAgent)){
+    channelFilterAgent='__all__';
+  }
+  let html=\`<option value="__all__"\${channelFilterAgent==='__all__'?' selected':''}>\${esc(t('channels.filterAll'))}</option>\`;
+  html+=choices.map(c=>\`<option value="\${esc(c.id)}"\${channelFilterAgent===c.id?' selected':''}>\${esc(c.name)} (\${esc(c.id)})</option>\`).join('');
+  sel.innerHTML=html;
+}
+
+function onChannelFilterChange(v){
+  channelFilterAgent=v||'__all__';
+  renderChannels();
+}
+
+function toggleRoutingGroup(agentId){
+  routingCollapsedByAgent[agentId]=!routingCollapsedByAgent[agentId];
+  renderChannels();
+}
+
 function renderChannels(){
   const el=document.getElementById('channelList');
+  renderChannelFilter();
   if(!S.channels.length){el.innerHTML='<div class="empty">'+t('channels.empty')+'</div>';return;}
-  el.innerHTML=S.channels.map(ch=>{
-    const chClass=ch.channel==='telegram'?'ch-tg':'ch-any';
-    return \`<div class="card">
-      <div class="card-row">
-        <span class="card-title">\${esc(ch.agentName)}</span>
-        <span class="badge">agent: \${esc(ch.agentId)}</span>
-        \${ch.channel?\`<span class="ch-badge \${chClass}">\${esc(ch.channel)}</span>\`:'<span class="ch-badge ch-any">any</span>'}
-        \${ch.peerKind?\`<span class="badge">\${esc(ch.peerKind)}</span>\`:''}
+  const rows=channelFilterAgent==='__all__'
+    ? S.channels
+    : S.channels.filter(ch=>ch.agentId===channelFilterAgent);
+  if(!rows.length){el.innerHTML='<div class="empty">'+t('channels.emptyFiltered')+'</div>';return;}
+  const groups={};
+  rows.forEach(ch=>{
+    const key=ch.agentId||'unknown';
+    if(!groups[key]) groups[key]={ agentId:key, agentName:ch.agentName||key, rows:[] };
+    groups[key].rows.push(ch);
+  });
+  const sortedGroups=Object.values(groups).sort((a,b)=>(a.agentName||a.agentId).localeCompare(b.agentName||b.agentId));
+  el.innerHTML=sortedGroups.map(g=>{
+    const collapsed=!!routingCollapsedByAgent[g.agentId];
+    const listCls=collapsed?'routing-list collapsed':'routing-list';
+    const toggleText=collapsed?t('channels.expand'):t('channels.collapse');
+    const rowsHtml=g.rows
+      .sort((a,b)=>(a.idx||0)-(b.idx||0))
+      .map(ch=>{
+        const chClass=ch.channel==='telegram'?'ch-tg':'ch-any';
+        const peerMeta=ch.peerId
+          ? \`📱 Peer ID: <code>\${esc(ch.peerId)}</code>\`
+          : t('channels.matchAll');
+        return \`<div class="routing-row">
+          <div style="min-width:0;flex:1">
+            <div class="routing-row-main">
+              <span class="badge">#\${ch.idx}</span>
+              \${ch.channel?\`<span class="ch-badge \${chClass}">\${esc(ch.channel)}</span>\`:'<span class="ch-badge ch-any">any</span>'}
+              \${ch.peerKind?\`<span class="badge">\${esc(ch.peerKind)}</span>\`:''}
+              <span class="routing-row-sub">\${peerMeta}</span>
+            </div>
+          </div>
+          <button class="btn-danger" onclick="deleteChannel(\${ch.idx},'#\${ch.idx} \${esc(ch.agentId)}')">\${t('channels.delBinding')}</button>
+        </div>\`;
+      }).join('');
+    return \`<div class="routing-group">
+      <div class="routing-group-hdr">
+        <div class="routing-group-title">
+          <span class="routing-group-name">\${esc(g.agentName)}</span>
+          <span class="badge">agent: \${esc(g.agentId)}</span>
+          <span class="routing-group-count">\${g.rows.length} \${esc(t('channels.countSuffix'))}</span>
+        </div>
+        <button class="btn-secondary routing-toggle" onclick="toggleRoutingGroup(decodeURIComponent('\${encodeURIComponent(g.agentId)}'))">\${esc(toggleText)}</button>
       </div>
-      \${ch.peerId?\`<div class="card-meta">📱 Peer ID: <code>\${esc(ch.peerId)}</code></div>\`:('<div class="card-meta">'+t('channels.matchAll')+'</div>')}
-      <div class="card-meta" style="font-size:11px">\${t('channels.bindIdx')}\${ch.idx}</div>
-      <div class="card-actions">
-        <button class="btn-danger" onclick="deleteChannel(\${ch.idx},'#\${ch.idx} \${esc(ch.agentId)}')">\${t('channels.delBinding')}</button>
+      <div class="\${listCls}">
+        \${rowsHtml}
       </div>
     </div>\`;
   }).join('');
@@ -3605,7 +3724,7 @@ function cliCloseAC(){ const b=document.getElementById('cliACBox'); if(b) b.remo
 // ── Stats (Usage Statistics) ────────────────────────────────
 async function loadStats(){
   try{
-    const days=document.getElementById('statsDaysFilter')?.value||30;
+    const days=document.getElementById('statsDaysFilter')?.value||1;
     const r=await api('GET','/api/stats?days='+days);
     const s=r.summary||{};
     document.getElementById('statsTotalInput').textContent=fmtNum(s.totalInputTokens||0);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openclaw-manager",
-  "version": "0.5.0",
+  "version": "0.8.2",
   "description": "A local web UI for managing OpenClaw AI agents — no npm install required",
   "main": "openclaw-manager.js",
   "scripts": {