chore: 提交剩余文档与扩展面板资源更新

README.md

@@ -81,7 +81,10 @@ Install once in Chrome: load unpacked extension from `extensions/tab-group-cdp/`
 - Download archive routing: downloads from managed tabs are routed to `agent-browser-stealth/<session>/...`.
 - Domain allowlist fallback: when allowlist is configured for a session, extension can force-block out-of-policy tabs to `about:blank`.
 - Risk hints (debug only): suspicious host/TLD hints are returned via handshake and printed only when `AGENT_BROWSER_DEBUG=1`.
-- Side panel console: view session/tab/group mapping, focus a session, keep only one session, clean empty groups, edit session allowlist, and toggle auto-clean.
+- Side panel browser controls: open/back/forward/reload, click/fill/press by CSS selector, run shortcut commands, and switch/close tabs.
+- Side panel developer signals: capture page console errors/warnings, fetch/xhr network events, command history, and live DOM snapshots.
+- Workflow automation: record actions into workflows, run workflows, map workflows to slash shortcuts, and schedule runs (daily/weekly/monthly/yearly).
+- Side panel operations console: view session/tab/group mapping, focus a session, keep only one session, clean empty groups, edit session allowlist, and toggle auto-clean.
 
 ## Stealth Architecture
 

cli/src/output.rs

@@ -2249,6 +2249,7 @@ Notes:
   - doctor does not accept positional arguments
   - If browser is not already connected, doctor will still report CDP probe results
   - Plugin handshake requires CDP mode, a normal http(s) page, and the extension installed
+  - Extension side panel includes browser controls, developer signal panels, workflow shortcuts, and scheduled automation
 
 Global Options:
   --json               Output as JSON
@@ -2524,6 +2525,7 @@ Options:
   --download-path <path>     Default download directory (or AGENT_BROWSER_DOWNLOAD_PATH)
   --tab-group <name>         Base title for agent tab groups (CDP plugin mode; silent no-op if plugin unavailable)
   --tab-group-plugin-id <id> Expected Chrome extension ID for tab-group handshake (or AGENT_BROWSER_TAB_GROUP_PLUGIN_ID)
+                             Extension side panel supports browser controls + console/network/DOM + workflow scheduling
   --risk-mode <mode>         Verify/captcha handling: off, warn, block (or AGENT_BROWSER_RISK_MODE)
   --wait-until <mode>        Navigation wait strategy for open/navigate: load, domcontentloaded, networkidle
   --session-name <name>      Auto-save/restore session state (defaults to --session)

docs/blog/agent-browser-stealth-new-features-release.zh-CN.md

@@ -0,0 +1,78 @@
+# agent-browser-stealth 新功能发布
+
+这次我们对 `agent-browser-stealth` 做了一次完整升级：  
+从“标签分组辅助”升级为“可控制、可观测、可编排”的 AI 浏览器控制台。
+
+## 这次升级解决了什么问题
+
+过去插件主要解决会话隔离和分组管理。  
+在真实自动化场景中，仍有三个核心缺口：
+
+1. 缺少侧边栏直接控页能力
+2. 缺少执行过程可观测性（console/network/DOM）
+3. 缺少可复用流程（workflow/shortcut/schedule）
+
+本次发布一次性补齐这三块。
+
+## 新增能力一：侧边栏浏览控制
+
+现在你可以在 side panel 直接完成页面控制：
+
+- `open / back / forward / reload`
+- 按 CSS 选择器执行 `click / fill / press`
+- 标签页切换与关闭
+- 直接运行快捷指令（slash shortcut）
+
+这让“流程启动”和“人工微调”可以在同一界面完成。
+
+## 新增能力二：开发者观测能力（Developer Signals）
+
+我们新增了调试信号面板，避免黑盒执行：
+
+- 页面 `console` 事件（含 error/warn）
+- `fetch/xhr` 网络事件
+- 命令历史
+- DOM 状态快照（文本预览、交互元素、mutation 摘要）
+
+当流程失败时，可以快速判断是页面结构变化、网络问题还是动作配置问题。
+
+## 新增能力三：Workflow 自动化体系
+
+插件现在支持完整自动化闭环：
+
+- 录制：`Start -> Stop -> Save`
+- 回放：运行 workflow
+- 复用：绑定 slash shortcut
+- 调度：`daily / weekly / monthly / yearly`
+
+调度任务会记录 `lastRunAt / nextRunAt`，并把执行结果写入活动流，便于排查和审计。
+
+## 已完成实测：workflow + abs 接管流程
+
+我们验证了一个非常实用的流程：
+
+1. 先用 workflow 进入目标页面
+2. 在关键节点停顿（checkpoint）
+3. 让 AI 使用 `abs` 完成上传/填写等细操作
+4. 停在发布前，等待人工确认
+
+这个模式已经在小红书发布场景中跑通：  
+进入发布页、上传图片、填写标题正文，且默认不自动点击“发布”。
+
+## 兼容性与稳定性改进
+
+这次还修复了几个关键稳定性问题：
+
+- 修复 side panel `activeTab` 空值崩溃
+- 增加面板状态归一化兜底，兼容热更新与旧返回结构
+- 修复侧边栏渲染的转义问题，避免内容显示异常
+
+## 总结
+
+`agent-browser-stealth` 现在不只是“分组插件”，而是一个真正可用于生产流的浏览器执行层：
+
+- 可控：侧边栏直接控页 + 分段执行
+- 可观测：console/network/DOM 全链路可见
+- 可复用：workflow + shortcut + schedule
+
+如果你在做 AI 浏览器自动化，这次升级能直接提升流程稳定性与迭代效率。

docs/src/app/commands/page.mdx

@@ -152,6 +152,9 @@ CDP mode uses a browser extension handshake to group tabs.
   - non-default: `Agent Browser Stealth • <session>`
 - Extension side panel (`agent-browser-stealth`) also provides:
   - Session window isolation and deterministic group colors.
+  - Browser controls (`open`, `back`, `forward`, `reload`, `click/fill/press` by CSS selector).
+  - Developer signals (console warnings/errors, fetch/xhr network events, DOM snapshot capture).
+  - Workflow automation (record actions, run workflows, assign slash shortcuts, and create schedules).
   - `Keep Only This`, `Focus`, `Clean Empty Groups` quick actions.
   - Toggle switches for strict isolation / activation guard / auto-clean.
   - Session allowlist editing (domain fallback to `about:blank` when violated).

docs/src/app/configuration/page.mdx

@@ -321,7 +321,7 @@ For tab grouping in CDP mode, grouping is best-effort through the extension hand
 extension available => grouped by session; extension missing/unavailable => silent no-op.
 
 With the `agent-browser-stealth` extension installed, the side panel also exposes
-session window isolation controls, activation guard toggles, empty-group cleanup, and per-session allowlist policy editing.
+session window isolation controls, activation guard toggles, empty-group cleanup, per-session allowlist policy editing, browser action controls, developer signal panels (console/network/DOM), and workflow automation (recording, shortcuts, and scheduled runs).
 
 ## Common Configurations
 

extensions/tab-group-cdp/icons/icon.svg

@@ -0,0 +1,7 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="128" height="128" rx="32" fill="#1A73E8"/>
+  <rect x="30" y="34" width="68" height="10" rx="2" fill="white"/>
+  <rect x="30" y="54" width="48" height="10" rx="2" fill="white" fill-opacity="0.8"/>
+  <rect x="30" y="74" width="28" height="10" rx="2" fill="white" fill-opacity="0.6"/>
+  <circle cx="94" cy="90" r="10" fill="#34A853" stroke="#1A73E8" stroke-width="4"/>
+</svg>

extensions/tab-group-cdp/sidepanel.css

@@ -1,64 +1,66 @@
 :root {
-  --bg: #0d1117;
-  --panel: #161b22;
-  --item-bg: rgba(255, 255, 255, 0.03);
-  --item-hover: rgba(255, 255, 255, 0.06);
-  --border: #30363d;
-  --border-focus: #484f58;
-  --text-main: #e6edf3;
-  --text-muted: #848d97;
-  --accent: #2f81f7;
-  --accent-soft: rgba(47, 129, 247, 0.1);
-  --success: #3fb950;
-  --warning: #d29922;
-  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --bg: #f3f5f7;
+  --surface: #ffffff;
+  --surface-alt: #f6f8fb;
+  --primary: #1769e0;
+  --primary-hover: #0f58c0;
+  --border: #d8dde4;
+  --text-main: #18212f;
+  --text-secondary: #4a5568;
+  --text-muted: #667287;
+  --success: #117a3d;
+  --warning: #b86d00;
+  --danger: #bd1e24;
+  --radius: 10px;
+  --mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 * {
   box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
 }
 
 body {
   margin: 0;
-  padding: 20px;
-  background-color: var(--bg);
+  padding: 14px;
+  background: var(--bg);
   color: var(--text-main);
-  font-family: var(--font-family);
+  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
-/* Scrollbar */
-::-webkit-scrollbar { width: 8px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
-::-webkit-scrollbar-thumb:hover { background: var(--border-focus); }
-
 header {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  margin-bottom: 24px;
+  gap: 10px;
+  margin-bottom: 14px;
 }
 
 h1 {
-  font-size: 16px;
-  font-weight: 600;
   margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  font-size: 19px;
+  font-weight: 650;
 }
 
-h1::before {
-  content: "";
-  display: block;
-  width: 12px;
-  height: 12px;
-  background: var(--accent);
-  border-radius: 3px;
-  box-shadow: 0 0 10px var(--accent);
+h3 {
+  margin: 0 0 12px 0;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+h4 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px;
+  margin-bottom: 12px;
 }
 
 .actions {
@@ -71,169 +73,186 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 6px 12px;
-  background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 6px;
-  color: var(--text-main);
-  font-size: 12px;
-  font-weight: 500;
+  padding: 6px 10px;
+  background: var(--surface);
+  color: var(--primary);
   cursor: pointer;
-  transition: all 0.15s ease;
+  font-size: 12px;
+  font-weight: 600;
 }
 
 button:hover {
-  background: var(--item-hover);
-  border-color: var(--border-focus);
+  border-color: var(--primary);
+  background: #eef4ff;
 }
 
-#refresh-btn {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #ffffff;
+button.primary {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
 }
 
-#refresh-btn:hover {
-  background: #4493f8;
-  border-color: #4493f8;
+button.primary:hover {
+  background: var(--primary-hover);
 }
 
-.card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 16px;
-  margin-bottom: 20px;
-  overflow: hidden;
+button.danger {
+  color: var(--danger);
 }
 
-h3 {
+.status-line {
+  min-height: 18px;
+  color: var(--text-secondary);
   font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  margin: 0 0 12px 0;
-  font-weight: 600;
+}
+
+.status-line.ok {
+  color: var(--success);
+}
+
+.status-line.warn {
+  color: var(--warning);
+}
+
+.status-line.error {
+  color: var(--danger);
+}
+
+.row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.row.wrap {
+  flex-wrap: wrap;
+}
+
+.row + .row {
+  margin-top: 8px;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 7px 9px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--surface-alt);
+  color: var(--text-main);
+  font-size: 12px;
+}
+
+input.mono,
+textarea.mono,
+code,
+pre {
+  font-family: var(--mono);
+}
+
+pre {
+  margin: 0;
+  background: #0f172a;
+  color: #dce6fb;
+  border-radius: 8px;
+  padding: 10px;
+  max-height: 220px;
+  overflow: auto;
+  font-size: 11px;
+}
+
+.tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+.tag {
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  padding: 2px 8px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  background: var(--surface-alt);
 }
 
 .stack {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-}
-
-.session-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.session-title h4 {
-  font-size: 14px;
-  font-weight: 600;
-  margin: 0;
-  color: var(--accent);
-}
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin: 8px 0;
-}
-
-.tag {
-  background: var(--accent-soft);
-  color: var(--accent);
-  border: 1px solid transparent;
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
+  gap: 10px;
 }
 
 .list {
   display: flex;
   flex-direction: column;
-  gap: 1px; /* Divider effect */
-  background: var(--border);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  overflow: hidden;
-  margin-top: 12px;
+  gap: 6px;
 }
 
 .item {
-  background: var(--panel);
-  padding: 10px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  transition: background 0.1s ease;
-}
-
-.item:hover {
-  background: var(--item-hover);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px;
+  background: var(--surface-alt);
 }
 
 .item-title {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-weight: 600;
   color: var(--text-main);
 }
 
 .item-url {
-  color: var(--text-muted);
   font-size: 11px;
+  color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.row-actions {
-  display: flex;
-  gap: 4px;
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--border);
-}
-
-.row-actions button {
-  padding: 4px 8px;
+.caption {
   font-size: 11px;
-  background: transparent;
-}
-
-.empty {
   color: var(--text-muted);
-  text-align: center;
-  padding: 40px 0;
-  font-size: 12px;
 }
 
-code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  background: rgba(110, 118, 129, 0.4);
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-size: 11px;
+hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 12px 0;
 }
 
-#summary code {
-  color: var(--warning);
+.section-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
 }
 
-/* Summary Grid */
-#summary .tags {
+.grid-2 {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-template-columns: 1fr 1fr;
   gap: 8px;
 }
 
-#summary .tag {
-  text-align: center;
-  padding: 6px;
+.event-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  padding: 1px 7px;
+  font-size: 10px;
+  color: var(--text-secondary);
+  background: #f0f4fa;
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
+.empty {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 14px 0;
 }

extensions/tab-group-cdp/sidepanel.html

@@ -13,9 +13,13 @@
         <button id="refresh-btn" type="button">Refresh</button>
         <button id="cleanup-btn" type="button">Clean Empty Groups</button>
       </div>
+      <div id="status-line" class="status-line"></div>
     </header>
 
+    <section id="control" class="card"></section>
     <section id="summary" class="card"></section>
+    <section id="automation" class="card"></section>
+    <section id="developer" class="card"></section>
     <section id="sessions" class="stack"></section>
     <section id="downloads" class="card"></section>
 

skills/agent-browser/SKILL.md

@@ -286,7 +286,10 @@ Notes:
   - non-default session: `Agent Browser Stealth • <session>`
 - Additional extension-side capabilities:
   - Session window isolation + deterministic group colors.
-  - Side panel controls: Focus / Keep Only This / Clean Empty Groups + isolation/auto-clean toggles.
+  - Side panel browser controls: `open` / `back` / `forward` / `reload` + selector-based `click` / `fill` / `press`.
+  - Side panel developer signals: page console events, fetch/xhr network events, command history, and on-demand DOM snapshots.
+  - Side panel automation: action recording, workflow run, slash shortcut binding, and scheduled execution (daily/weekly/monthly/yearly).
+  - Side panel operations: Focus / Keep Only This / Clean Empty Groups + isolation/auto-clean toggles.
   - Session allowlist policy editing and fallback blocking (`about:blank`).
   - Download auto-routing to `agent-browser-stealth/<session>/...`.