@xnng/browser-relay 1.6.0

package/extension/i18n.js

@@ -0,0 +1,149 @@
+// Lightweight UI i18n with a manual override. Default follows the browser
+// language; the options page lets the user force English or 中文 (stored as
+// `uiLang`). Classic script (not a module): exposes window.I18N.
+;(function () {
+  const MESSAGES = {
+    en: {
+      popupSessions: 'Active sessions',
+      popupStopSession: 'Stop',
+      popupActiveTasks: 'browser tasks pending',
+      popupCancelTasks: 'Cancel current tasks',
+      popupCancellingTasks: 'Stopping pending actions…',
+      controlConsole: 'Control Console',
+      tagline: 'Bridge Chrome to<br>agents · local &amp; remote',
+      localRelay: 'Local Relay',
+      localDesc: 'Bridges your Chrome tabs to the local Browser Relay daemon on <code>127.0.0.1</code> for direct, on-device control. Remote Relay below runs on its own and does not need this.',
+      relayPort: 'Relay port',
+      idleDetach: 'Idle auto-detach <span class="note">(sec · 0 = never)</span>',
+      saveTest: 'Save & Test Connection',
+      remoteRelay: 'Remote Relay',
+      remoteDesc: 'Control <strong>this</strong> browser from anywhere through a public relay — no open ports, no exposed server. Mints a secret Device ID that works until you switch off. Prefer your own hub? <a class="lnk" href="https://deploy.workers.cloudflare.com/?url=https://github.com/reliefeai/browser-relay/tree/main/hub" target="_blank" rel="noopener">Deploy to Cloudflare →</a>',
+      remoteHub: 'Public relay',
+      deviceId: 'Device ID <span class="note">— secret · treat it like a password</span>',
+      copy: 'Copy',
+      copyCommand: 'Copy-paste command',
+      regenerate: 'Regenerate Device ID',
+      regenWarn: 'This invalidates the current Device ID immediately — anything using the old one must switch to the new ID.',
+      regenConfirm: 'Regenerate',
+      cancel: 'Cancel',
+      quickStart: 'Quick start',
+      step1: 'Install the CLI — <code>npm i -g @xnng/browser-relay</code>',
+      step2: 'Check it — <code>browser-relay status</code> (auto-starts on login)',
+      step3: 'Save the Local Relay settings above',
+      step4: 'Flip Remote Relay on, copy the command, run it from anywhere',
+      language: 'Language',
+      langAuto: 'Auto',
+      stateOn: 'On',
+      stateOff: 'Off',
+      statusConnectedLocal: 'Connected to relay server. Extension will auto-attach tabs.',
+      statusRelayStatus: 'Relay server responded with an error status. Check if the server is running.',
+      statusRelayUnreachable: 'Cannot connect to the local relay. Is the server running?',
+      statusConnectingHub: 'Connecting the extension to the relay…',
+      statusRemoteConnected: 'Remote Relay is on and connected to the relay.',
+      statusRemoteNoHub: "Device ID generated, but the relay isn't connected yet: ",
+      statusRemoteNoReach: "Device ID generated, but the extension didn't reach the relay: ",
+      statusRemoteOff: 'Remote Relay is off. Flip it on to generate a new Device ID.',
+      statusRemoteConnectedShort: 'Remote Relay is on and connected.',
+      statusRemoteDisconnected: 'Remote Relay is on but disconnected: ',
+      statusRemoteBgOffline: 'Remote Relay is on, but the extension background is not responding yet.',
+      copied: 'Copied',
+      popupConnected: 'Connected',
+      popupReattach: 'Re-attach tabs',
+      popupConnecting: 'Connecting…',
+      popupRetry: 'Retry',
+      popupNotConnected: 'Not connected',
+      popupReconnect: 'Reconnect',
+      popupOptions: 'Options',
+      popupDocs: 'Docs',
+      popupTabsAttached: 'attached',
+      popupNoRelay: 'No relay server on ',
+      popupTrying: 'Trying ',
+      popupLoading: 'Loading…',
+      popupInstallTitle: 'Relay server not running — install and check it:',
+      popupInstallHint: 'Already installed? Check with <code style="display:inline; padding:1px 5px; cursor:text; font-size:11px">browser-relay status</code>',
+    },
+    zh_CN: {
+      popupSessions: '正在控制浏览器的会话',
+      popupStopSession: '停止',
+      popupActiveTasks: '个浏览器任务待完成',
+      popupCancelTasks: '取消当前任务',
+      popupCancellingTasks: '正在停止后续操作…',
+      controlConsole: '控制台',
+      tagline: '把 Chrome 接到<br>agent · 本地与远程',
+      localRelay: '本地中继',
+      localDesc: '把你的 Chrome 标签桥接到本机 <code>127.0.0.1</code> 上的 Browser Relay 守护进程,用于本机直连控制。下面的 Remote Relay 独立运行,不需要它。',
+      relayPort: '中继端口',
+      idleDetach: '空闲自动断开 <span class="note">(秒 · 0 = 从不)</span>',
+      saveTest: '保存并测试连接',
+      remoteRelay: '远程中继',
+      remoteDesc: '从任何地方通过公网 Relay 服务控制<strong>这个</strong>浏览器 —— 不开放端口、不暴露本地服务。会生成一个保密的 Device ID,关闭前一直有效。想用自己的 Relay 服务?<a class="lnk" href="https://deploy.workers.cloudflare.com/?url=https://github.com/reliefeai/browser-relay/tree/main/hub" target="_blank" rel="noopener">部署到 Cloudflare →</a>',
+      remoteHub: '公网 Relay 服务',
+      deviceId: 'Device ID <span class="note">— 保密 · 请像密码一样保管</span>',
+      copy: '复制',
+      copyCommand: '可直接粘贴的命令',
+      regenerate: '重新生成 Device ID',
+      regenWarn: '这会立即作废当前 Device ID —— 仍在用旧 ID 的一切都必须换成新的。',
+      regenConfirm: '重新生成',
+      cancel: '取消',
+      quickStart: '快速开始',
+      step1: '安装 CLI —— <code>npm i -g @xnng/browser-relay</code>',
+      step2: '检查 —— <code>browser-relay status</code>(登录时自动启动)',
+      step3: '保存上面的本地中继设置',
+      step4: '打开 Remote Relay,复制命令,在任何地方运行',
+      language: '语言',
+      langAuto: '自动',
+      stateOn: '开',
+      stateOff: '关',
+      statusConnectedLocal: '已连接到中继服务器,插件会自动接管标签。',
+      statusRelayStatus: '中继服务器返回了错误状态,检查它是否在运行。',
+      statusRelayUnreachable: '连不上本地中继,服务器在运行吗?',
+      statusConnectingHub: '正在把插件连接到公网 Relay 服务…',
+      statusRemoteConnected: 'Remote Relay 已开启并连上公网 Relay 服务。',
+      statusRemoteNoHub: '已生成 Device ID,但公网 Relay 服务还没连上:',
+      statusRemoteNoReach: '已生成 Device ID,但插件没连上公网 Relay 服务:',
+      statusRemoteOff: 'Remote Relay 已关闭。打开它可生成新的 Device ID。',
+      statusRemoteConnectedShort: 'Remote Relay 已开启并连接。',
+      statusRemoteDisconnected: 'Remote Relay 已开启但未连接:',
+      statusRemoteBgOffline: 'Remote Relay 已开启,但插件后台还没响应。',
+      copied: '已复制',
+      popupConnected: '已连接',
+      popupReattach: '重新接管标签',
+      popupConnecting: '连接中…',
+      popupRetry: '重试',
+      popupNotConnected: '未连接',
+      popupReconnect: '重连',
+      popupOptions: '选项',
+      popupDocs: '文档',
+      popupTabsAttached: '个标签已接入',
+      popupNoRelay: '没有中继服务器:',
+      popupTrying: '正在连接 ',
+      popupLoading: '加载中…',
+      popupInstallTitle: '中继服务器未运行 —— 安装并检查:',
+      popupInstallHint: '已安装?用 <code style="display:inline; padding:1px 5px; cursor:text; font-size:11px">browser-relay status</code> 检查',
+    },
+  }
+
+  let lang = 'en'
+
+  function resolve(override) {
+    if (override === 'en' || override === 'zh_CN') return override
+    const ui = String((chrome.i18n && chrome.i18n.getUILanguage && chrome.i18n.getUILanguage()) || navigator.language || 'en').toLowerCase()
+    return ui.startsWith('zh') ? 'zh_CN' : 'en'
+  }
+
+  function t(key) {
+    const dict = MESSAGES[lang] || MESSAGES.en
+    return dict[key] != null ? dict[key] : (MESSAGES.en[key] != null ? MESSAGES.en[key] : key)
+  }
+
+  function apply(root) {
+    root = root || document
+    root.querySelectorAll('[data-i18n]').forEach((el) => { el.textContent = t(el.dataset.i18n) })
+    root.querySelectorAll('[data-i18n-html]').forEach((el) => { el.innerHTML = t(el.dataset.i18nHtml) })
+    root.querySelectorAll('[data-i18n-ph]').forEach((el) => { el.placeholder = t(el.dataset.i18nPh) })
+  }
+
+  function setLang(override) { lang = resolve(override) }
+
+  window.I18N = { t, apply, setLang, get lang() { return lang } }
+})()

package/extension/manifest.json

@@ -0,0 +1,47 @@
+{
+  "manifest_version": 3,
+  "name": "Browser Relay",
+  "version": "1.6.0",
+  "description": "Let AI agents share your everyday Chrome locally or across multiple machines.",
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "permissions": [
+    "debugger",
+    "tabs",
+    "tabGroups",
+    "favicon",
+    "activeTab",
+    "storage",
+    "alarms",
+    "downloads",
+    "webNavigation"
+  ],
+  "host_permissions": [
+    "http://127.0.0.1/*",
+    "http://localhost/*",
+    "https://relay.linso.ai/*"
+  ],
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "action": {
+    "default_title": "Browser Relay",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "32": "icons/icon32.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  },
+  "version_name": "1.6.0"
+}

package/extension/observations.js

@@ -0,0 +1,109 @@
+// Presentation is separate from targeting: complete AX names remain available
+// for locators even when a repeated container summary is omitted from output.
+const containers = new Set([
+  "RootWebArea",
+  "Iframe",
+  "IframePresentational",
+  "main",
+  "article",
+  "region",
+  "group",
+  "form",
+  "dialog",
+  "navigation",
+  "complementary",
+  "banner",
+  "contentinfo",
+  "list",
+  "listitem",
+  "table",
+  "row",
+  "cell",
+]);
+const whitespace = (value) =>
+  String(value ?? "")
+    .replace(/\s+/g, " ")
+    .trim();
+
+export function observationRecords(data, { mode = "snapshot", rootRef } = {}) {
+  const byRef = new Map(data.nodes.filter((n) => n.ref).map((n) => [n.ref, n]));
+  const children = new Map();
+  for (const node of data.nodes) {
+    const parent = byRef.has(node.parentRef) ? node.parentRef : null;
+    if (!children.has(parent)) children.set(parent, []);
+    children.get(parent).push(node);
+  }
+  const roots = rootRef
+    ? [byRef.get(rootRef)].filter(Boolean)
+    : mode === "read" && data.nodes.some((n) => n.role === "main" && n.frameId === data.frames[0]?.id)
+      ? data.nodes.filter((n) => n.role === "main" && n.frameId === data.frames[0]?.id)
+      : children.get(null) || [];
+  const records = new Map(),
+    visited = new Set();
+  function visit(node, depth = 0) {
+    if (visited.has(node)) return;
+    visited.add(node);
+    const descendants = children.get(node.ref) || [];
+    const redundant = data.redundantRefs.has(node.ref);
+    const structural = containers.has(node.role);
+    // Article/cell/group accessible names can contain their entire descendants.
+    // Emit the actual descendants once, keeping a semantic boundary and ref.
+    const repeatedSummary =
+      descendants.length &&
+      structural &&
+      node.name &&
+      (whitespace(node.name) === whitespace(descendants.map((child) => child.name || "").join(" ")) ||
+        descendants.some((child) => whitespace(child.name) === whitespace(node.name)));
+    const name = repeatedSummary ? "" : whitespace(node.name);
+    const hasLine =
+      !redundant &&
+      (name ||
+        structural ||
+        node.url ||
+        [
+          "textbox",
+          "searchbox",
+          "button",
+          "checkbox",
+          "radio",
+          "combobox",
+        ].includes(node.role));
+    if (hasLine) {
+      const attrs = Object.entries(node).filter(
+        ([k, v]) =>
+          !["ref", "role", "name", "frameId", "parentRef", "within"].includes(
+            k,
+          ) && v !== undefined,
+      );
+      const line =
+        `${"  ".repeat(Math.min(depth, 24))}[${node.ref || "-"}] ${node.role}${name ? " " + JSON.stringify(name) : ""}` +
+        attrs.map(([k, v]) => ` ${k}=${JSON.stringify(v)}`).join("") +
+        (node.frameId !== data.frames[0]?.id ? ` frame=${node.frameId}` : "");
+      records.set(node.ref || `text_${records.size}`, line);
+    }
+    for (const child of descendants)
+      visit(child, depth + (hasLine && structural ? 1 : 0));
+  }
+  for (const node of roots) visit(node);
+  return records;
+}
+
+export function textPage(text, offset, maxLength) {
+  let end = Math.min(text.length, offset + maxLength);
+  // Keep ordinary nodes intact; very long text nodes are explicitly continued.
+  if (end < text.length) {
+    const newline = text.lastIndexOf("\n", end);
+    if (newline > offset) end = newline + 1;
+  }
+  if (
+    end < text.length &&
+    /[\uD800-\uDBFF]/.test(text[end - 1]) &&
+    /[\uDC00-\uDFFF]/.test(text[end])
+  )
+    end--;
+  return {
+    snapshot: text.slice(offset, end),
+    end,
+    truncated: end < text.length,
+  };
+}

package/extension/options.html

@@ -0,0 +1,289 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Browser Relay · Console</title>
+  <style>
+    :root {
+      color-scheme: dark light;
+      --bg: #0a0e0c;
+      --panel: #111815;
+      --inset: #0b100e;
+      --readout: #0a0f0d;
+      --line: rgba(158, 224, 130, 0.11);
+      --line-strong: rgba(158, 224, 130, 0.22);
+      --ink: #e9f1ec;
+      --muted: #8b9a92;
+      --faint: #56635c;
+      --accent: #a3e635;
+      --accent-soft: rgba(163, 230, 53, 0.14);
+      --accent-text: #c4ef6a;
+      --on-accent: #0a0e0c;
+      --danger: #fb7185;
+      --radius: 11px;
+      --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Code", monospace;
+      --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+    }
+    @media (prefers-color-scheme: light) {
+      :root {
+        --bg: #eaeeea;
+        --panel: #ffffff;
+        --inset: #f3f6f2;
+        --readout: #0d1210;
+        --line: rgba(30, 55, 40, 0.11);
+        --line-strong: rgba(30, 55, 40, 0.20);
+        --ink: #132018;
+        --muted: #5c6b62;
+        --faint: #93a29a;
+        --accent: #7bbf1e;
+        --accent-soft: rgba(123, 191, 30, 0.14);
+        --accent-text: #4d7c0f;
+        --on-accent: #0a1204;
+      }
+    }
+
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--ink);
+      font-family: var(--sans);
+      font-size: 13px;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+    }
+    body::before {
+      content: "";
+      position: fixed; inset: 0; z-index: 0;
+      background-image:
+        linear-gradient(var(--line) 1px, transparent 1px),
+        linear-gradient(90deg, var(--line) 1px, transparent 1px);
+      background-size: 30px 30px;
+      -webkit-mask-image: radial-gradient(120% 80% at 50% -10%, #000 20%, transparent 72%);
+      mask-image: radial-gradient(120% 80% at 50% -10%, #000 20%, transparent 72%);
+      opacity: .7; pointer-events: none;
+    }
+
+    .page { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 30px 26px 40px; }
+
+    .masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
+    .brand { display: flex; align-items: center; gap: 11px; }
+    .sigil { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--accent-soft); }
+    .sigil span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
+    .brand h1 { margin: 0; font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
+    .brand .sub { margin: 1px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--faint); text-transform: uppercase; }
+    .masthead .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; text-align: right; line-height: 1.5; }
+    .masthead-right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
+    .lang-select { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); background: var(--inset); border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
+    .lang-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+
+    .panel {
+      position: relative; margin-top: 16px;
+      background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
+      padding: 18px 20px 20px;
+      opacity: 0; transform: translateY(8px);
+      animation: rise .5s cubic-bezier(.22,.61,.36,1) forwards;
+    }
+    .panel.p1 { animation-delay: .05s; }
+    .panel.p2 { animation-delay: .13s; }
+    @keyframes rise { to { opacity: 1; transform: none; } }
+    @media (prefers-reduced-motion: reduce) { .panel { animation: none; opacity: 1; transform: none; } }
+
+    .phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+    .eyebrow { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
+    .eyebrow b { color: var(--accent-text); font-weight: 600; }
+    .eyebrow .idx { color: var(--faint); }
+    .desc { margin: 9px 0 0; color: var(--muted); font-size: 12.5px; max-width: 68ch; }
+    .desc strong { color: var(--ink); font-weight: 640; }
+    a.lnk { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-soft); white-space: nowrap; transition: border-color .15s ease; }
+    a.lnk:hover { border-color: var(--accent); }
+
+    label.field { display: block; margin: 15px 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
+    label.field .note { color: var(--faint); letter-spacing: .04em; text-transform: none; }
+    input[type=number], input[type=url], input[type=text] {
+      width: 100%; padding: 10px 12px;
+      background: var(--inset); border: 1px solid var(--line-strong); border-radius: 8px;
+      color: var(--ink); font-family: var(--mono); font-size: 13px;
+      transition: border-color .15s ease, box-shadow .15s ease;
+    }
+    input::placeholder { color: var(--faint); }
+    input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+    .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+    code { font-family: var(--mono); font-size: .92em; padding: 1.5px 5px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-text); }
+
+    .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
+    button {
+      font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
+      border: 1px solid transparent; border-radius: 8px; padding: 9px 15px; cursor: pointer;
+      transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
+    }
+    button:active { transform: translateY(1px); }
+    .btn-primary { background: var(--accent); color: var(--on-accent); }
+    .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 0 18px var(--accent-soft); }
+    .btn-ghost { background: transparent; color: var(--muted); border-color: var(--line-strong); }
+    .btn-ghost:hover { color: var(--ink); border-color: var(--accent); }
+    .btn-warn { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
+    .btn-warn:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); }
+    button[hidden], .hidden { display: none !important; }
+
+    .status { display: none; margin-top: 14px; padding: 9px 12px 9px 32px; border-radius: 8px; font-size: 12px; line-height: 1.45; position: relative; border: 1px solid var(--line-strong); background: var(--inset); }
+    .status::before { content: ""; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; }
+    .status.ok { display: block; color: var(--accent-text); } .status.ok::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
+    .status.err { display: block; color: var(--danger); } .status.err::before { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
+    .status.info { display: block; color: var(--muted); } .status.info::before { background: var(--muted); }
+
+    .switchwrap { display: flex; align-items: center; gap: 12px; flex: none; }
+    .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
+    .lbl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
+    .lbl.is-on { color: var(--accent-text); } .lbl.is-on::before { background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: pulse 2s ease-in-out infinite; }
+    .lbl.is-off { color: var(--faint); }
+    .lbl.is-err { color: var(--danger); } .lbl.is-err::before { background: var(--danger); box-shadow: 0 0 9px var(--danger); }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
+
+    .switch { position: relative; display: inline-flex; cursor: pointer; }
+    .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
+    .switch .track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--inset); border: 1px solid var(--line-strong); transition: background .2s ease, border-color .2s ease; }
+    .switch .thumb { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--faint); transition: transform .2s cubic-bezier(.5,1.6,.5,1), background .2s ease, box-shadow .2s ease; }
+    .switch input:checked + .track { background: var(--accent-soft); border-color: var(--accent); }
+    .switch input:checked + .track .thumb { transform: translateX(20px); background: var(--accent); box-shadow: 0 0 12px var(--accent); }
+    .switch input:disabled + .track { opacity: .5; }
+    .switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--accent-soft); }
+
+    .readout-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 6px; align-items: start; }
+    .device-id {
+      min-height: 42px; padding: 11px 13px; border-radius: 8px;
+      background: var(--readout); border: 1px solid var(--line-strong);
+      color: #b7f24a; font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
+      word-break: break-all; user-select: all; cursor: pointer;
+      box-shadow: inset 0 0 24px rgba(163, 230, 53, 0.05);
+    }
+    .command {
+      padding: 11px 13px; border-radius: 8px;
+      background: var(--inset); border: 1px dashed var(--line-strong);
+      color: var(--muted); font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
+      word-break: break-all; cursor: pointer;
+      transition: border-color .15s ease;
+    }
+    .command:hover { border-color: var(--accent); }
+    .copybtn { align-self: start; width: 84px; text-align: center; padding-left: 0; padding-right: 0; }
+
+    .confirm { margin-top: 12px; padding: 12px 14px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); }
+    .confirm-msg { display: block; color: var(--danger); font-size: 12px; line-height: 1.5; }
+    .confirm-actions { display: flex; gap: 10px; margin-top: 11px; }
+
+    .foot { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--panel) 60%, transparent); }
+    .foot .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
+    .foot ol { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.85; }
+    .foot code { font-size: .9em; }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <div class="brand">
+        <div class="sigil"><span></span></div>
+        <div>
+          <h1>Browser Relay</h1>
+          <p class="sub" data-i18n="controlConsole">Control Console</p>
+        </div>
+      </div>
+      <div class="masthead-right">
+        <select id="uiLang" class="lang-select" title="Language / 语言">
+          <option value="auto" data-i18n="langAuto">Auto</option>
+          <option value="en">English</option>
+          <option value="zh_CN">中文</option>
+        </select>
+        <p class="tag" data-i18n-html="tagline">Bridge Chrome to<br>agents · local &amp; remote</p>
+      </div>
+    </header>
+
+    <!-- ================= LOCAL ================= -->
+    <section class="panel p1">
+      <div class="phead">
+        <div>
+          <div class="eyebrow"><span class="idx">01</span><b data-i18n="localRelay">Local Relay</b></div>
+          <p class="desc" data-i18n-html="localDesc">Bridges your Chrome tabs to the local Browser Relay daemon on <code>127.0.0.1</code> for direct, on-device control. Remote Relay below runs on its own and does not need this.</p>
+        </div>
+      </div>
+
+      <div class="row2">
+        <div>
+          <label class="field" for="relayPort" data-i18n="relayPort">Relay port</label>
+          <input type="number" id="relayPort" placeholder="18795" min="1" max="65535">
+        </div>
+        <div>
+          <label class="field" for="idleDetachSeconds" data-i18n-html="idleDetach">Idle auto-detach <span class="note">(sec · 0 = never)</span></label>
+          <input type="number" id="idleDetachSeconds" placeholder="600" min="0" max="86400">
+        </div>
+      </div>
+
+      <div class="actions">
+        <button id="save" class="btn-primary" data-i18n="saveTest">Save &amp; Test Connection</button>
+      </div>
+      <div id="status" class="status"></div>
+    </section>
+
+    <!-- ================= REMOTE ================= -->
+    <section class="panel p2">
+      <div class="phead">
+        <div>
+          <div class="eyebrow"><span class="idx">02</span><b data-i18n="remoteRelay">Remote Relay</b></div>
+          <p class="desc" data-i18n-html="remoteDesc">Control <strong>this</strong> browser from anywhere through the hub — no open ports, no exposed server. Mints a secret Device ID that works until you switch off. Prefer your own hub? <a class="lnk" href="https://deploy.workers.cloudflare.com/?url=https://github.com/reliefeai/browser-relay/tree/main/hub" target="_blank" rel="noopener">Deploy to Cloudflare →</a></p>
+        </div>
+        <div class="switchwrap">
+          <span class="lbl is-off" id="remoteState" data-i18n="stateOff">Off</span>
+          <label class="switch" title="Turn Remote Relay on or off">
+            <input type="checkbox" id="remoteToggle">
+            <span class="track"><span class="thumb"></span></span>
+          </label>
+        </div>
+      </div>
+
+      <label class="field" for="remoteHost" data-i18n="remoteHub">Remote hub</label>
+      <input type="url" id="remoteHost" placeholder="https://relay.linso.ai">
+
+      <div id="remoteDetails" class="hidden">
+        <label class="field" for="remoteDeviceId" data-i18n-html="deviceId">Device ID <span class="note">— secret · treat it like a password</span></label>
+        <div class="readout-row">
+          <div id="remoteDeviceId" class="device-id" title="Click to copy"></div>
+          <button id="copyRemoteDeviceId" class="btn-ghost copybtn" type="button" data-i18n="copy">Copy</button>
+        </div>
+
+        <label class="field" data-i18n="copyCommand">Copy-paste command</label>
+        <div class="readout-row">
+          <div id="remoteCommand" class="command" title="Click to copy"></div>
+          <button id="copyRemoteCommand" class="btn-ghost copybtn" type="button" data-i18n="copy">Copy</button>
+        </div>
+
+        <div class="actions" id="regenRow">
+          <button id="regenerateDevice" class="btn-warn" type="button" data-i18n="regenerate">Regenerate Device ID</button>
+        </div>
+        <div id="regenConfirm" class="confirm hidden">
+          <span class="confirm-msg" data-i18n="regenWarn">This invalidates the current Device ID immediately — anything using the old one must switch to the new ID.</span>
+          <div class="confirm-actions">
+            <button id="regenApply" class="btn-warn" type="button" data-i18n="regenConfirm">Regenerate</button>
+            <button id="regenCancel" class="btn-ghost" type="button" data-i18n="cancel">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+      <div id="remoteStatus" class="status"></div>
+    </section>
+
+    <!-- ================= FOOTER ================= -->
+    <div class="foot">
+      <span class="k" data-i18n="quickStart">Quick start</span>
+      <ol>
+        <li data-i18n-html="step1">Install the CLI — <code>npm i -g @xnng/browser-relay</code></li>
+        <li data-i18n-html="step2">Check it — <code>browser-relay status</code> (auto-starts on login)</li>
+        <li data-i18n="step3">Save the Local Relay settings above</li>
+        <li data-i18n="step4">Flip Remote Relay on, copy the command, run it from anywhere</li>
+      </ol>
+    </div>
+  </main>
+
+  <script src="i18n.js"></script>
+  <script src="options.js"></script>
+</body>
+</html>