docs: remove arrow annotations; strengthen screenshot redactions

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,6 +22,14 @@ 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
 
@@ -48,12 +56,24 @@ Open [http://localhost:3333](http://localhost:3333) in your browser. For remote
 
 **Model & Auth** — Configure models from your registered provider list. Follow built-in guides for provider authentication setup.
 
-**Built-in CLI** — Run any `openclaw` command with real-time streaming output. Preset commands, favorites, and tab completion included.
+**Built-in CLI** — Run any OpenClaw CLI command with real-time streaming output. Includes tab completion and saved favorites.
+
+![](docs/redacted-screenshots/cli.jpg)
 
 **Ops Panel** — Restart gateway, view logs, run health checks, manage backups (local + NAS via SFTP/rsync), and handle cron tasks.
 
 **Bilingual UI** — English and Chinese interface with one-click language switching.
 
+## What's New (v0.7.x)
+
+- **Dashboard redesign**: circular CPU/RAM/DISK gauges + system/gateway/agent overview, with optional auto-refresh.
+- **Sub-agent creation flow**: step-by-step Telegram guide (BotFather → group → get group ID → fill form), with explicit safety warnings.
+- **Telegram allowlist helper**: optional “Your Telegram User ID” field can auto-append to `channels.telegram.allowFrom`.
+- **Model dropdown = real CLI output**: selectors are sourced from `openclaw models list` (with a warning if parsing fails).
+- **Cache-busting**: response headers + version checks help prevent stale frontend after updates.
+- **Setup page EN localization**: first-run directory selection page is fully bilingual.
+
+
 ## Telegram Workflow & Safety
 
 OCM is designed primarily for **Telegram-based OpenClaw workflows**:

docs/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+This is a user-facing summary derived from `DEVLOG.md`.
+
+## 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/FAQ.md

@@ -0,0 +1,53 @@
+# 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`.

docs/SECURITY.md

@@ -0,0 +1,30 @@
+# 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
+
+## 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,275 @@
+# 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) Why Telegram groups are the best way to build sub-agents
+
+Think of it as:
+
+> **One Telegram group = one agent boundary** (context + purpose + workspace).
+
+### 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) 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)
+
+## 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,267 @@
+# 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 group 来建 Sub-Agent 最合适
+
+> 这里讨论的是 OpenClaw 的一种非常实用的工作方式：**“一个 Telegram 群 = 一个 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)
+
+## 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 等均已模糊处理）。