13 Commits
25 changed files with 183 additions and 28 deletions
+21 -9
View File
@@ -22,24 +22,34 @@ 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`. 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 ## Features
**Screenshots** — Redacted UI walkthrough (no personal paths, no Telegram IDs): **Screenshots** — Redacted UI walkthrough (no personal paths, no Telegram IDs):
![](docs/annotated-screenshots/dashboard.jpg) ![](docs/redacted-screenshots/dashboard.jpg)
![](docs/annotated-screenshots/agents.jpg) ![](docs/redacted-screenshots/agents.jpg)
![](docs/annotated-screenshots/channels.jpg) ![](docs/redacted-screenshots/channels.jpg)
![](docs/annotated-screenshots/models.jpg) ![](docs/redacted-screenshots/models.jpg)
![](docs/annotated-screenshots/auth.jpg) ![](docs/redacted-screenshots/auth.jpg)
![](docs/annotated-screenshots/stats.jpg) ![](docs/redacted-screenshots/stats.jpg)
![](docs/annotated-screenshots/cron.jpg) ![](docs/redacted-screenshots/cron.jpg)
![](docs/redacted-screenshots/actions.jpg)
**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. **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.
@@ -48,9 +58,11 @@ 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. **Model & Auth** — Configure models from your registered provider list. Follow built-in guides for provider authentication setup.
**Built-in CLI**Run any OpenClaw CLI command with real-time streaming output. Includes tab completion and saved favorites. **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 (no more memorizing commands).
![](docs/annotated-screenshots/cli.jpg) ![](docs/redacted-screenshots/cli.jpg)
![](docs/redacted-screenshots/cli-output.jpg)
**Ops Panel** — Restart gateway, view logs, run health checks, manage backups (local + NAS via SFTP/rsync), and handle cron tasks. **Ops Panel** — Restart gateway, view logs, run health checks, manage backups (local + NAS via SFTP/rsync), and handle cron tasks.
+26
View File
@@ -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.
+53
View File
@@ -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 IDPeer 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`.
+30
View File
@@ -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/`.
+25 -9
View File
@@ -88,7 +88,7 @@ The Dashboard is your “sanity check”:
Screenshot: Screenshot:
![](annotated-screenshots/dashboard.jpg) ![](redacted-screenshots/dashboard.jpg)
--- ---
@@ -119,7 +119,7 @@ If group privacy is ON, the bot cant see normal group messages. The symptom o
Go to **Agents**: Go to **Agents**:
![](annotated-screenshots/agents.jpg) ![](redacted-screenshots/agents.jpg)
Click `+ Add Agent` and fill: Click `+ Add Agent` and fill:
@@ -176,7 +176,7 @@ If you use `channels.telegram.allowFrom`, OCM can take “Your Telegram User ID
Go to **Channels**: Go to **Channels**:
![](annotated-screenshots/channels.jpg) ![](redacted-screenshots/channels.jpg)
Here you can quickly validate: Here you can quickly validate:
- which agent is bound to which Telegram peer - which agent is bound to which Telegram peer
@@ -188,7 +188,7 @@ Here you can quickly validate:
Go to **Models**: Go to **Models**:
![](annotated-screenshots/models.jpg) ![](redacted-screenshots/models.jpg)
Key idea: Key idea:
- OCM uses the real CLI model list (`openclaw models list`) for dropdowns. - OCM uses the real CLI model list (`openclaw models list`) for dropdowns.
@@ -200,7 +200,7 @@ Key idea:
Go to **Auth**: Go to **Auth**:
![](annotated-screenshots/auth.jpg) ![](redacted-screenshots/auth.jpg)
Use this page to: Use this page to:
- see which provider profiles exist - see which provider profiles exist
@@ -212,7 +212,7 @@ Use this page to:
Go to **Stats**: Go to **Stats**:
![](annotated-screenshots/stats.jpg) ![](redacted-screenshots/stats.jpg)
You can break down usage by: You can break down usage by:
- model - model
@@ -223,11 +223,25 @@ 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) ## 10) Cron jobs (Cron)
Go to **Cron**: Go to **Cron**:
![](annotated-screenshots/cron.jpg) ![](redacted-screenshots/cron.jpg)
You can: You can:
- see scheduled tasks (backup / update / health) - see scheduled tasks (backup / update / health)
@@ -250,7 +264,9 @@ Highlights:
Screenshot: Screenshot:
![](annotated-screenshots/cli.jpg) ![](redacted-screenshots/cli.jpg)
![](redacted-screenshots/cli-output.jpg)
## 11) Fast troubleshooting ## 11) Fast troubleshooting
@@ -272,4 +288,4 @@ Check (in order):
## Notes about screenshots ## Notes about screenshots
All screenshots in this guide are **redacted** (no personal paths, no Telegram IDs). All screenshots in this guide are **redacted** (no personal paths, no Telegram IDs).
They live under `docs/annotated-screenshots/`. They live under `docs/redacted-screenshots/`.
+25 -9
View File
@@ -77,7 +77,7 @@ bash start.sh
截图示例: 截图示例:
![](annotated-screenshots/dashboard.jpg) ![](redacted-screenshots/dashboard.jpg)
--- ---
@@ -105,7 +105,7 @@ bash start.sh
进入 **Agents** 页面: 进入 **Agents** 页面:
![](annotated-screenshots/agents.jpg) ![](redacted-screenshots/agents.jpg)
点击 `+ Add Agent`,按表单填写: 点击 `+ Add Agent`,按表单填写:
- Agent id / name - Agent id / name
@@ -159,7 +159,7 @@ OCM 的表单里可以填 “Your Telegram User ID”,让它自动把你的 us
进入 **Channels** 进入 **Channels**
![](annotated-screenshots/channels.jpg) ![](redacted-screenshots/channels.jpg)
这里能一眼看到: 这里能一眼看到:
- 哪个 agent 绑定了哪个 Telegram peer(群) - 哪个 agent 绑定了哪个 Telegram peer(群)
@@ -173,7 +173,7 @@ OCM 的表单里可以填 “Your Telegram User ID”,让它自动把你的 us
进入 **模型** 进入 **模型**
![](annotated-screenshots/models.jpg) ![](redacted-screenshots/models.jpg)
关键点: 关键点:
- 主模型(primary)和 fallback 链 - 主模型(primary)和 fallback 链
@@ -185,7 +185,7 @@ OCM 的表单里可以填 “Your Telegram User ID”,让它自动把你的 us
进入 **认证** 进入 **认证**
![](annotated-screenshots/auth.jpg) ![](redacted-screenshots/auth.jpg)
这里主要用来: 这里主要用来:
- 看当前有哪些 provider profile - 看当前有哪些 provider profile
@@ -197,7 +197,7 @@ OCM 的表单里可以填 “Your Telegram User ID”,让它自动把你的 us
进入 **Stats** 进入 **Stats**
![](annotated-screenshots/stats.jpg) ![](redacted-screenshots/stats.jpg)
你可以按: 你可以按:
- 按模型聚合 - 按模型聚合
@@ -222,13 +222,29 @@ OCM 内置一个 CLI 面板,用来直接运行 OpenClaw 命令(例如:`ope
截图示例: 截图示例:
![](annotated-screenshots/cli.jpg) ![](redacted-screenshots/cli.jpg)
![](redacted-screenshots/cli-output.jpg)
## 9) Actions 菜单(运维快捷入口)
右上角 **⚡ Actions** 下拉菜单提供常用运维操作:
- Restart Gateway(重启网关)
- Live Logs(实时日志)
- Manual Backup / Backups & Rollback(备份/回滚)
- NAS Backup SetupNAS 备份配置)
- Health Check(健康检查)
- Open Config Dir / Switch OpenClaw Dir(打开/切换配置目录)
截图示例:
![](redacted-screenshots/actions.jpg)
## 9) Cron(定时任务) ## 9) Cron(定时任务)
进入 **Cron** 进入 **Cron**
![](annotated-screenshots/cron.jpg) ![](redacted-screenshots/cron.jpg)
用途: 用途:
- 查看有哪些健康检查/更新/备份任务 - 查看有哪些健康检查/更新/备份任务
@@ -264,4 +280,4 @@ OCM 内置一个 CLI 面板,用来直接运行 OpenClaw 命令(例如:`ope
## 附:截图说明 ## 附:截图说明
本文截图来自 `docs/annotated-screenshots/`,已做脱敏(路径用户名、Telegram 绑定 ID 等均已模糊处理)。 本文截图来自 `docs/redacted-screenshots/`,已做脱敏(路径用户名、Telegram 绑定 ID 等均已模糊处理)。
Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 240 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 182 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 164 KiB

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 240 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 KiB

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 207 KiB

After

Width:  |  Height:  |  Size: 29 KiB

+3 -1
View File
@@ -2484,7 +2484,9 @@ const LS = {
set(k, v) { try { localStorage.setItem(k, v); } catch(e) {} }, set(k, v) { try { localStorage.setItem(k, v); } catch(e) {} },
del(k) { try { localStorage.removeItem(k); } 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 t(k) { return I18N[lang][k] || I18N.zh[k] || k; }
function applyLang() { function applyLang() {
document.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = t(el.dataset.i18n); }); document.querySelectorAll('[data-i18n]').forEach(el => { el.textContent = t(el.dataset.i18n); });