vcorp-chrome 1.4.1 → 1.6.0

package/extension/manifest.json

@@ -1,38 +1,38 @@
-{
-  "manifest_version": 3,
-  "name": "vcorp-chrome",
-  "version": "1.4.1",
-  "description": "让 AI agent 操控你已登录的 Chrome。基于花叔的 huashu-chrome（MIT）修改。",
-  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAq6xRqEwG4yTuHRG1Zah3j//T3B72XnazyZ+9fOCa5P4bBLPmNBN7YAGL5WnjtPVJefXT9r2Ol0qvNztayDG3dMjK6AZoWccgKa5rhxcvWgFUjanXtmBBQ0qgYwNhuEJSkdinLLtyUg6YmK7Mn72NWpfa/NfqNHdK5AHslvvtJ50iQAYmabl2Nd3vOJ9DxtLBt8a2DfoGPWizgEB3+gkqm2PB8LywwwoiGKd7acr1wZEWmWK9/s0YWdzIstjlvk5AO5XFn6EtEzW8tAAOwBka9239pcyj0kEogWctHLJn7p9VFru38r+I1USyGn6u9XQ68n9edWddxBYokETCqEMT9QIDAQAB",
-  "minimum_chrome_version": "116",
-  "background": {
-    "service_worker": "background.js",
-    "type": "module"
-  },
-  "action": {
-    "default_title": "vcorp-chrome"
-  },
-  "permissions": [
-    "tabs",
-    "tabGroups",
-    "scripting",
-    "storage",
-    "alarms",
-    "offscreen",
-    "downloads",
-    "sidePanel",
-    "notifications",
-    "debugger"
-  ],
-  "host_permissions": [
-    "<all_urls>"
-  ],
-  "icons": {
-    "16": "icons/icon16.png",
-    "48": "icons/icon48.png",
-    "128": "icons/icon128.png"
-  },
-  "side_panel": {
-    "default_path": "panel.html"
-  }
-}
+{
+  "manifest_version": 3,
+  "name": "vcorp-chrome",
+  "version": "1.6.0",
+  "description": "让 AI agent 操控你已登录的 Chrome。基于花叔的 huashu-chrome（MIT）修改。",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAq6xRqEwG4yTuHRG1Zah3j//T3B72XnazyZ+9fOCa5P4bBLPmNBN7YAGL5WnjtPVJefXT9r2Ol0qvNztayDG3dMjK6AZoWccgKa5rhxcvWgFUjanXtmBBQ0qgYwNhuEJSkdinLLtyUg6YmK7Mn72NWpfa/NfqNHdK5AHslvvtJ50iQAYmabl2Nd3vOJ9DxtLBt8a2DfoGPWizgEB3+gkqm2PB8LywwwoiGKd7acr1wZEWmWK9/s0YWdzIstjlvk5AO5XFn6EtEzW8tAAOwBka9239pcyj0kEogWctHLJn7p9VFru38r+I1USyGn6u9XQ68n9edWddxBYokETCqEMT9QIDAQAB",
+  "minimum_chrome_version": "116",
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "action": {
+    "default_title": "vcorp-chrome"
+  },
+  "permissions": [
+    "tabs",
+    "tabGroups",
+    "scripting",
+    "storage",
+    "alarms",
+    "offscreen",
+    "downloads",
+    "sidePanel",
+    "notifications",
+    "debugger"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "side_panel": {
+    "default_path": "panel.html"
+  }
+}

package/extension/mark.js

@@ -213,6 +213,9 @@
     .ask .ok:hover { background: #ea580c; }
     .ask .no { background: #fff; color: #666; border-color: #e2e2e2; }
     .ask .no:hover { background: #f6f6f6; }
+    .ask.confirm { width: 420px; }
+    .ask .all { background: #fff; color: #9a3412; border-color: #fed7aa; font-size: 12px; padding: 7px 10px; }
+    .ask .all:hover { background: #fff7ed; }
     /* 支付确认：同一个浮条换一身红。这类打断一年遇不上几次，
        必须一眼就和「帮我解个验证码」区分开——看错了是要花钱的。 */
     .ask.danger .head { background: linear-gradient(135deg,#fef2f2,#fee2e2); }
@@ -228,6 +231,8 @@
       .ask .note { background: #2a2a2c; border-color: #3a3a3c; color: #f2f2f2; }
       .ask .no { background: #2a2a2c; color: #ccc; border-color: #3a3a3c; }
       .ask .no:hover { background: #333; }
+      .ask .all { background: #2a2a2c; color: #fdba74; border-color: #7c2d12; }
+      .ask .all:hover { background: #3b2a1a; }
       .ask.danger .head { background: linear-gradient(135deg,#3f1d1d,#2a1414); }
       .ask .what { background: #2a2a2c; }
       .ask .amount { color: #f87171; }
@@ -546,11 +551,12 @@
   let askOutcome = null;  // 已结算的结果，等 background 来取
   let askTimer = null;
 
-  function closeAsk(result, note) {
+  function closeAsk(result, note, extra) {
     if (askEl) { askEl.remove(); askEl = null; }
     if (askTimer) { clearInterval(askTimer); askTimer = null; }
     askSettle = null;
     askOutcome = { outcome: result, note: note || '' };
+    if (extra?.always) askOutcome.always = true;
     maybeTeardown();
   }
 
@@ -578,6 +584,7 @@
     askEl.querySelector('.t').textContent = msg.title || `${chrome.runtime.getManifest().name} 需要你搭把手`;
     askEl.querySelector('.p').textContent = msg.prompt || '';
     if (msg.danger) askEl.classList.add('danger');
+    if (msg.offerAlways && !msg.danger) askEl.classList.add('confirm');
     if (msg.okText) askEl.querySelector('.ok').textContent = msg.okText;
     if (msg.noText) askEl.querySelector('.no').textContent = msg.noText;
     // 「点哪个按钮、在哪个站、多少钱」单独拎出来，不混在正文里。
@@ -609,6 +616,14 @@
 
     askEl.querySelector('.ok').addEventListener('click', () => closeAsk('continued', noteEl?.value));
     askEl.querySelector('.no').addEventListener('click', () => closeAsk('cancelled', noteEl?.value));
+    // 文案写死在扩展里，不接 agent 传来的字。支付确认不给这个按钮。
+    if (msg.offerAlways && !msg.danger) {
+      const always = document.createElement('button');
+      always.className = 'all';
+      always.textContent = '本任务内都同意';
+      askEl.querySelector('.ok').before(always);
+      always.addEventListener('click', () => closeAsk('continued', noteEl?.value, { always: true }));
+    }
 
     // 挂在 own 之外：会话区重画时不触碰 ask（输入框的焦点经不起挪动）
     wrap.querySelector('.dock').appendChild(askEl);

package/extension/panel.html

@@ -1,204 +1,210 @@
-<!doctype html>
-<html lang="zh-CN">
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>vcorp-chrome</title>
-<style>
-  :root {
-    color-scheme: light dark;
-    --bg: #fafaf9; --card: #ffffff; --ink: #1c1917; --mute: #78716c; --line: rgba(0,0,0,.07);
-    --soft: rgba(0,0,0,.04); --ok: #16a34a; --warn: #d97706; --bad: #dc2626; --accent: #2563eb;
-  }
-  @media (prefers-color-scheme: dark) {
-    :root { --bg: #161616; --card: #1f1f1f; --ink: #f2f2f2; --mute: #a1a1aa; --line: rgba(255,255,255,.08);
-            --soft: rgba(255,255,255,.05); --ok: #22c55e; --warn: #f59e0b; --bad: #f87171; --accent: #60a5fa; }
-  }
-  * { box-sizing: border-box; }
-  [hidden] { display: none !important; }
-  body { margin: 0; background: var(--bg); color: var(--ink);
-         font: 13px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
-  header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
-  header img { width: 30px; height: 30px; border-radius: 50%; }
-  header .t { font-weight: 600; font-size: 14px; }
-  header .v { color: var(--mute); font-size: 11px; margin-left: 4px; font-weight: 400; }
-  .pill { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute);
-          padding: 3px 9px; border-radius: 999px; background: var(--soft); }
-  .dot { width: 8px; height: 8px; border-radius: 50%; background: #a8a29e; flex: none; }
-  .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
-  main { padding: 0 12px 20px; display: flex; flex-direction: column; gap: 12px; }
-  section { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
-  h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: .8px; color: var(--mute); font-weight: 500; }
-  .empty { color: var(--mute); font-size: 12.5px; }
-  .owner { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-  .owner .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
-  .owner .who { font-weight: 600; }
-  .owner .code { color: var(--mute); font-size: 11px; font-variant-numeric: tabular-nums; }
-  .blk { margin-top: 10px; }
-  .lab { font-size: 10.5px; letter-spacing: .6px; color: var(--mute); margin-bottom: 2px; }
-  /* agent 说的话带引用边，扩展观察到的事实平铺——前者可能源自被注入的页面 */
-  .intent { border-left: 2px solid var(--c, #888); padding-left: 8px; }
-  .ago { color: var(--mute); font-size: 10.5px; margin-left: 6px; font-variant-numeric: tabular-nums; }
-  .now { display: flex; align-items: center; gap: 7px; font-weight: 500; }
-  .pulse { width: 7px; height: 7px; border-radius: 50%; animation: pulse 1.4s ease-in-out infinite; flex: none; }
-  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
-  .tl { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; }
-  .tl .row { display: flex; gap: 10px; font-size: 12px; color: var(--mute); }
-  .tl .row:first-child { color: var(--ink); }
-  .tl .row .ago { flex: none; width: 46px; text-align: right; margin: 0; }
-  .sess { display: flex; flex-direction: column; gap: 2px; }
-  .sess button { all: unset; display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px;
-                 border-radius: 8px; cursor: pointer; font-size: 12.5px; }
-  .sess button:hover { background: var(--soft); }
-  .sess button[disabled] { cursor: default; }
-  .sess button[disabled]:hover { background: none; }
-  .sess .who { font-weight: 600; flex: none; }
-  .sess .page { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .light { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; }
-  .light .dot { margin-top: 6px; }
-  .light .name { font-weight: 500; }
-  .light .sub { color: var(--mute); font-size: 12px; }
-  .cmd { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
-  code { font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--soft);
-         padding: 4px 7px; border-radius: 6px; word-break: break-all; flex: 1; }
-  button.btn { font: inherit; font-size: 12px; border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer;
-               background: var(--accent); color: #fff; flex: none; }
-  button.btn.ghost { background: var(--soft); color: var(--ink); }
-  button.btn:disabled { opacity: .45; cursor: default; }
-  .sw-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
-  .sw-row .txt { flex: 1; }
-  .sw-row .sub { color: var(--mute); font-size: 11.5px; }
-  .toggle { appearance: none; width: 34px; height: 20px; border-radius: 10px; background: #d6d3d1; position: relative;
-            cursor: pointer; flex: none; transition: background .15s; margin: 0; }
-  .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
-                   background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
-  .toggle:checked { background: var(--ok); }
-  .toggle:checked::after { transform: translateX(14px); }
-  footer { color: var(--mute); font-size: 11.5px; padding: 0 16px 18px; }
-  /* 云端发布 */
-  .field { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
-  .field input[type=text] { font: inherit; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line);
-                            background: var(--bg); color: var(--ink); }
-  .field input.code { font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px; text-transform: uppercase; }
-  .row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
-  .msg { font-size: 12px; margin-top: 6px; }
-  .msg.bad { color: var(--bad); }
-  .confirm { border: 1px solid var(--warn); border-radius: 9px; padding: 9px 10px; margin-top: 8px; }
-  .confirm b { word-break: break-all; }
-  .plats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 4px; }
-  .plats label { display: flex; gap: 6px; align-items: center; font-size: 12.5px; cursor: pointer; }
-  .task { border-top: 1px solid var(--line); padding: 8px 0 2px; margin-top: 6px; }
-  .task .t { font-weight: 500; word-break: break-all; }
-  .task .sub, .muted { color: var(--mute); font-size: 11.5px; }
-  .task.pending { border-left: 3px solid var(--warn); padding-left: 8px; }
-  .log { max-height: 220px; overflow-y: auto; font-size: 11.5px; color: var(--mute); margin-top: 6px; }
-  .log div { display: flex; gap: 8px; }
-  .log .ago { flex: none; width: 46px; text-align: right; margin: 0; }
-  .log .no { color: var(--bad); }
-  details summary { cursor: pointer; color: var(--mute); font-size: 12px; margin-top: 8px; }
-  a { color: var(--accent); }
-  a.guide { display: flex; text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
-  a.guide:hover { background: var(--soft); }
-  a.guide .go { color: var(--accent); font-size: 12px; flex: none; }
-</style>
-
-<header>
-  <img src="icons/icon128.png" alt="" />
-  <div class="t">vcorp-chrome<span class="v" id="ver"></span></div>
-  <div class="pill"><span class="dot" id="pilldot"></span><span id="pilltxt">检查中…</span></div>
-</header>
-
-<main>
-  <section>
-    <h2>这一页</h2>
-    <div id="page"><div class="empty">读取中…</div></div>
-  </section>
-
-  <section>
-    <h2>所有在线的 agent</h2>
-    <div class="sess" id="sess"></div>
-  </section>
-
-  <section>
-    <h2>连接</h2>
-    <div id="lights"></div>
-    <div class="cmd" id="reconnRow" hidden><button class="btn" id="reconn">重连</button>
-      <span class="sub" style="color:var(--mute);font-size:12px">插件没消失，断的只是到终端的连接</span></div>
-  </section>
-
-  <section id="cloud">
-    <h2>云端发布</h2>
-    <!-- 没配对 -->
-    <div id="cloudPair" hidden>
-      <div class="muted">让 maker.vcorp.ai 在这个浏览器里替你把视频发到抖音、小红书这些平台——用的是你已经登录好的账号，
-        平台的 cookie 不会离开这台电脑。到网页上「平台账号 → 连接浏览器」拿一个配对码填在这里。</div>
-      <div class="field">
-        <input type="text" class="code" id="pairCode" maxlength="9" placeholder="ABCD-EFGH" autocomplete="off" spellcheck="false" />
-      </div>
-      <details>
-        <summary>服务器地址</summary>
-        <div class="field"><input type="text" id="pairOrigin" spellcheck="false" /></div>
-        <div class="muted">只有自建了服务才需要改。</div>
-      </details>
-      <div class="row"><button class="btn" id="pairGo">下一步</button></div>
-    </div>
-    <!-- 配对第一步完成，等用户确认账号 -->
-    <div id="cloudClaim" hidden>
-      <div class="confirm">
-        <div>要把这个浏览器交给 <b id="claimOrigin"></b> 上的账号 <b id="claimAccount"></b> 吗？</div>
-        <div class="muted" style="margin-top:4px">确认后，这个账号可以在你勾选的平台上替你发布。配对码如果是别人发给你的，点取消。</div>
-        <div class="row"><button class="btn" id="claimYes">确认连接</button><button class="btn ghost" id="claimNo">取消</button></div>
-      </div>
-    </div>
-    <!-- 已配对 -->
-    <div id="cloudOn" hidden>
-      <div class="light"><span class="dot" id="cloudDot"></span>
-        <div><div class="name" id="cloudName"></div><div class="sub" id="cloudSub"></div></div></div>
-      <div class="lab" style="margin-top:6px">允许它使用的平台</div>
-      <div class="plats" id="cloudPlats"></div>
-      <div class="muted" style="margin-top:4px">只勾你确实要交给它发布的。没勾的平台，它连页面都打不开。</div>
-      <div id="cloudTasks"></div>
-      <label class="sw-row">
-        <span class="txt">自动允许新任务<div class="sub">不再逐个弹窗确认。只在你信任这个账号时打开：新任务，以及它一开始就要去的网站，会直接放行。任务开始之后再加的网站，还有本地文件夹，仍然要你逐个点头</div></span>
-        <input type="checkbox" class="toggle" id="cloudAuto" />
-      </label>
-      <label class="sw-row">
-        <span class="txt">暂停<div class="sub">立刻断开，云端的命令一条都不接，直到你再打开</div></span>
-        <input type="checkbox" class="toggle" id="cloudPause" />
-      </label>
-      <details>
-        <summary>操作记录</summary>
-        <div class="log" id="cloudLog"></div>
-      </details>
-      <div class="row"><button class="btn ghost" id="cloudReconn">重连</button><button class="btn ghost" id="cloudUnpair">断开并忘记这个服务器</button></div>
-    </div>
-    <div class="msg bad" id="cloudErr" hidden></div>
-  </section>
-
-  <section>
-    <h2>本地文件夹</h2>
-    <div class="muted">挂载之后，配对的网站可以申请读取里面的文档（Markdown、文本、PDF、Word、CSV、JSON、HTML）。只读，不会改你的文件。每次真正读取之前还会再问你一次。浏览器重启后如果这里显示需要恢复，点「恢复访问」。</div>
-    <div id="folderList"></div>
-    <div class="row"><button class="btn" id="folderAdd" type="button">添加文件夹</button></div>
-  </section>
-
-  <section>
-    <h2>设置</h2>
-    <a class="sw-row guide" id="guide" href="welcome.html">
-      <span class="txt">开始使用<div class="sub">配对码、接上本机 agent、第一句怎么说</div></span>
-      <span class="go">打开</span>
-    </a>
-    <label class="sw-row">
-      <span class="txt">高保真模式<div class="sub">需要时用浏览器级真实输入，应付严格的站点和富文本编辑器；用完自动断开</div></span>
-      <input type="checkbox" class="toggle" id="l2" />
-    </label>
-    <label class="sw-row">
-      <span class="txt">页面标记<div class="sub">被操作的页面带彩色描边、光标和小头像；录屏演示时可以关掉</div></span>
-      <input type="checkbox" class="toggle" id="mark" />
-    </label>
-  </section>
-</main>
-
-<footer>连不上时在终端跑 <code style="padding:1px 5px">npx vcorp-chrome doctor</code>，它会告诉你卡在哪一步。</footer>
-
-<script type="module" src="panel.js"></script>
-</html>
+<!doctype html>
+<html lang="zh-CN">
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>vcorp-chrome</title>
+<style>
+  :root {
+    color-scheme: light dark;
+    --bg: #fafaf9; --card: #ffffff; --ink: #1c1917; --mute: #78716c; --line: rgba(0,0,0,.07);
+    --soft: rgba(0,0,0,.04); --ok: #16a34a; --warn: #d97706; --bad: #dc2626; --accent: #2563eb;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root { --bg: #161616; --card: #1f1f1f; --ink: #f2f2f2; --mute: #a1a1aa; --line: rgba(255,255,255,.08);
+            --soft: rgba(255,255,255,.05); --ok: #22c55e; --warn: #f59e0b; --bad: #f87171; --accent: #60a5fa; }
+  }
+  * { box-sizing: border-box; }
+  [hidden] { display: none !important; }
+  body { margin: 0; background: var(--bg); color: var(--ink);
+         font: 13px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
+  header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
+  header img { width: 30px; height: 30px; border-radius: 50%; }
+  header .t { font-weight: 600; font-size: 14px; }
+  header .v { color: var(--mute); font-size: 11px; margin-left: 4px; font-weight: 400; }
+  .pill { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute);
+          padding: 3px 9px; border-radius: 999px; background: var(--soft); }
+  .dot { width: 8px; height: 8px; border-radius: 50%; background: #a8a29e; flex: none; }
+  .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
+  main { padding: 0 12px 20px; display: flex; flex-direction: column; gap: 12px; }
+  section { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
+  h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: .8px; color: var(--mute); font-weight: 500; }
+  .empty { color: var(--mute); font-size: 12.5px; }
+  .owner { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+  .owner .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
+  .owner .who { font-weight: 600; }
+  .owner .code { color: var(--mute); font-size: 11px; font-variant-numeric: tabular-nums; }
+  .blk { margin-top: 10px; }
+  .lab { font-size: 10.5px; letter-spacing: .6px; color: var(--mute); margin-bottom: 2px; }
+  /* agent 说的话带引用边，扩展观察到的事实平铺——前者可能源自被注入的页面 */
+  .intent { border-left: 2px solid var(--c, #888); padding-left: 8px; }
+  .ago { color: var(--mute); font-size: 10.5px; margin-left: 6px; font-variant-numeric: tabular-nums; }
+  .now { display: flex; align-items: center; gap: 7px; font-weight: 500; }
+  .pulse { width: 7px; height: 7px; border-radius: 50%; animation: pulse 1.4s ease-in-out infinite; flex: none; }
+  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
+  .tl { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; }
+  .tl .row { display: flex; gap: 10px; font-size: 12px; color: var(--mute); }
+  .tl .row:first-child { color: var(--ink); }
+  .tl .row .ago { flex: none; width: 46px; text-align: right; margin: 0; }
+  .sess { display: flex; flex-direction: column; gap: 2px; }
+  .sess button { all: unset; display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px;
+                 border-radius: 8px; cursor: pointer; font-size: 12.5px; }
+  .sess button:hover { background: var(--soft); }
+  .sess button[disabled] { cursor: default; }
+  .sess button[disabled]:hover { background: none; }
+  .sess .who { font-weight: 600; flex: none; }
+  .sess .page { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .light { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; }
+  .light .dot { margin-top: 6px; }
+  .light .name { font-weight: 500; }
+  .light .sub { color: var(--mute); font-size: 12px; }
+  .cmd { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
+  code { font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--soft);
+         padding: 4px 7px; border-radius: 6px; word-break: break-all; flex: 1; }
+  button.btn { font: inherit; font-size: 12px; border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer;
+               background: var(--accent); color: #fff; flex: none; }
+  button.btn.ghost { background: var(--soft); color: var(--ink); }
+  button.btn:disabled { opacity: .45; cursor: default; }
+  .sw-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
+  .sw-row .txt { flex: 1; }
+  .sw-row .sub { color: var(--mute); font-size: 11.5px; }
+  .toggle { appearance: none; width: 34px; height: 20px; border-radius: 10px; background: #d6d3d1; position: relative;
+            cursor: pointer; flex: none; transition: background .15s; margin: 0; }
+  .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
+                   background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
+  .toggle:checked { background: var(--ok); }
+  .toggle:checked::after { transform: translateX(14px); }
+  footer { color: var(--mute); font-size: 11.5px; padding: 0 16px 18px; }
+  /* 云端发布 */
+  .field { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
+  .field input[type=text] { font: inherit; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line);
+                            background: var(--bg); color: var(--ink); }
+  .field input.code { font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px; text-transform: uppercase; }
+  .row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
+  .msg { font-size: 12px; margin-top: 6px; }
+  .msg.bad { color: var(--bad); }
+  .confirm { border: 1px solid var(--warn); border-radius: 9px; padding: 9px 10px; margin-top: 8px; }
+  .confirm b { word-break: break-all; }
+  .sites { display: flex; flex-direction: column; margin-top: 4px; }
+  .sites .site { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 2px 0; }
+  .sites .host { flex: 1; word-break: break-all; }
+  .sites .btn { padding: 2px 8px; }
+  .task { border-top: 1px solid var(--line); padding: 8px 0 2px; margin-top: 6px; }
+  .task .t { font-weight: 500; word-break: break-all; }
+  .task .sub, .muted { color: var(--mute); font-size: 11.5px; }
+  .task.pending { border-left: 3px solid var(--warn); padding-left: 8px; }
+  .log { max-height: 220px; overflow-y: auto; font-size: 11.5px; color: var(--mute); margin-top: 6px; }
+  .log div { display: flex; gap: 8px; }
+  .log .ago { flex: none; width: 46px; text-align: right; margin: 0; }
+  .log .no { color: var(--bad); }
+  details summary { cursor: pointer; color: var(--mute); font-size: 12px; margin-top: 8px; }
+  a { color: var(--accent); }
+  a.guide { display: flex; text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
+  a.guide:hover { background: var(--soft); }
+  a.guide .go { color: var(--accent); font-size: 12px; flex: none; }
+</style>
+
+<header>
+  <img src="icons/icon128.png" alt="" />
+  <div class="t">vcorp-chrome<span class="v" id="ver"></span></div>
+  <div class="pill"><span class="dot" id="pilldot"></span><span id="pilltxt">检查中…</span></div>
+</header>
+
+<main>
+  <section>
+    <h2>这一页</h2>
+    <div id="page"><div class="empty">读取中…</div></div>
+  </section>
+
+  <section>
+    <h2>所有在线的 agent</h2>
+    <div class="sess" id="sess"></div>
+  </section>
+
+  <section>
+    <h2>连接</h2>
+    <div id="lights"></div>
+    <div class="cmd" id="reconnRow" hidden><button class="btn" id="reconn">重连</button>
+      <span class="sub" style="color:var(--mute);font-size:12px">插件没消失，断的只是到终端的连接</span></div>
+  </section>
+
+  <section id="cloud">
+    <h2>云端发布</h2>
+    <!-- 没配对 -->
+    <div id="cloudPair" hidden>
+      <div class="muted">让 maker.vcorp.ai 在这个浏览器里替你发布作品、查资料、办事——用的是你已经登录好的账号，
+        网站的 cookie 不会离开这台电脑。到网页上「浏览器扩展」里拿一个配对码填在这里。</div>
+      <div class="field">
+        <input type="text" class="code" id="pairCode" maxlength="9" placeholder="ABCD-EFGH" autocomplete="off" spellcheck="false" />
+      </div>
+      <details>
+        <summary>服务器地址</summary>
+        <div class="field"><input type="text" id="pairOrigin" spellcheck="false" /></div>
+        <div class="muted">只有自建了服务才需要改。</div>
+      </details>
+      <div class="row"><button class="btn" id="pairGo">下一步</button></div>
+    </div>
+    <!-- 配对第一步完成，等用户确认账号 -->
+    <div id="cloudClaim" hidden>
+      <div class="confirm">
+        <div>要把这个浏览器交给 <b id="claimOrigin"></b> 上的账号 <b id="claimAccount"></b> 吗？</div>
+        <div class="muted" style="margin-top:4px">确认后，这个账号可以申请在你允许的网站上替你操作，每个任务都要你点头。配对码如果是别人发给你的，点取消。</div>
+        <div class="row"><button class="btn" id="claimYes">确认连接</button><button class="btn ghost" id="claimNo">取消</button></div>
+      </div>
+    </div>
+    <!-- 已配对 -->
+    <div id="cloudOn" hidden>
+      <div class="light"><span class="dot" id="cloudDot"></span>
+        <div><div class="name" id="cloudName"></div><div class="sub" id="cloudSub"></div></div></div>
+      <div class="lab" style="margin-top:6px">允许它使用的网站</div>
+      <div class="sites" id="cloudSites"></div>
+      <div class="muted" style="margin-top:4px">任务申请网站、你点了允许，就记在这里（含子域）。不在这里、也没在任务里批准的网站，它连页面都打不开。</div>
+      <div id="cloudTasks"></div>
+      <label class="sw-row">
+        <span class="txt">自动允许新任务<div class="sub">不再逐个弹窗确认。只在你信任这个账号时打开：新任务，以及它一开始就要去的网站，会直接放行。任务开始之后再加的网站，还有本地文件夹，仍然要你逐个点头</div></span>
+        <input type="checkbox" class="toggle" id="cloudAuto" />
+      </label>
+      <label class="sw-row">
+        <span class="txt">对外动作不再逐条确认<div class="sub">发消息、投递、发帖之前不再问你。扫码、验证码仍然要你本人来。付款一律不做</div></span>
+        <input type="checkbox" class="toggle" id="cloudAutoConfirm" />
+      </label>
+      <label class="sw-row">
+        <span class="txt">暂停<div class="sub">立刻断开，云端的命令一条都不接，直到你再打开</div></span>
+        <input type="checkbox" class="toggle" id="cloudPause" />
+      </label>
+      <details>
+        <summary>操作记录</summary>
+        <div class="log" id="cloudLog"></div>
+      </details>
+      <div class="row"><button class="btn ghost" id="cloudReconn">重连</button><button class="btn ghost" id="cloudUnpair">断开并忘记这个服务器</button></div>
+    </div>
+    <div class="msg bad" id="cloudErr" hidden></div>
+  </section>
+
+  <section>
+    <h2>本地文件夹</h2>
+    <div class="muted">挂载之后，配对的网站可以申请读取里面的文档（Markdown、文本、PDF、Word、CSV、JSON、HTML）。只读，不会改你的文件。每次真正读取之前还会再问你一次。浏览器重启后如果这里显示需要恢复，点「恢复访问」。</div>
+    <div id="folderList"></div>
+    <div class="row"><button class="btn" id="folderAdd" type="button">添加文件夹</button></div>
+  </section>
+
+  <section>
+    <h2>设置</h2>
+    <a class="sw-row guide" id="guide" href="welcome.html">
+      <span class="txt">开始使用<div class="sub">配对码、接上本机 agent、第一句怎么说</div></span>
+      <span class="go">打开</span>
+    </a>
+    <label class="sw-row">
+      <span class="txt">高保真模式<div class="sub">需要时用浏览器级真实输入，应付严格的站点和富文本编辑器；用完自动断开</div></span>
+      <input type="checkbox" class="toggle" id="l2" />
+    </label>
+    <label class="sw-row">
+      <span class="txt">页面标记<div class="sub">被操作的页面带彩色描边、光标和小头像；录屏演示时可以关掉</div></span>
+      <input type="checkbox" class="toggle" id="mark" />
+    </label>
+  </section>
+</main>
+
+<footer>连不上时在终端跑 <code style="padding:1px 5px">npx vcorp-chrome doctor</code>，它会告诉你卡在哪一步。</footer>
+
+<script type="module" src="panel.js"></script>
+</html>