@flrande/browserctl 0.1.0

package/extensions/chrome-relay/popup.js

@@ -0,0 +1,972 @@
+const UI_CONFIG_KEY = "browserctlRelayUiConfig";
+const DEFAULT_BRIDGE_URL = "ws://127.0.0.1:9223/bridge";
+const STATUS_POLL_INTERVAL_MS = 2_000;
+const DIAGNOSTIC_TIMEOUT_MS = 2_500;
+const FEEDBACK_HIDE_MS = 3_000;
+
+const TRANSLATIONS = {
+  en: {
+    headerTitle: "BrowserCtl Relay",
+    headerSubtitle: "Local browser bridge console",
+    languageLabel: "Language",
+    bridgeUrlLabel: "Bridge URL",
+    bridgeUrlPlaceholder: "ws://127.0.0.1:9223/bridge",
+    tokenLabel: "Token (required)",
+    tokenPlaceholder: "BROWSERD_CHROME_RELAY_EXTENSION_TOKEN",
+    save: "Save",
+    reconnect: "Reconnect",
+    connectionSectionTitle: "Connection",
+    statusSectionTitle: "Live Status",
+    statusDetailsLabel: "Status details",
+    troubleshootingSectionTitle: "Troubleshooting",
+    diagnosticsDetailsLabel: "Diagnostics details",
+    runDiagnostics: "Run Diagnostics",
+    copyReport: "Copy Report",
+    statusLoading: "Loading relay status...",
+    diagnosticsEmpty: "No diagnostics yet.",
+    hint:
+      "Keep this extension enabled while using browserctl chrome-relay extension mode.",
+    yes: "yes",
+    no: "no",
+    unknown: "unknown",
+    tokenConfigured: "configured",
+    tokenNone: "none",
+    headerPillConnected: "Connected",
+    headerPillDisconnected: "Disconnected",
+    headerPillUnknown: "Unknown",
+    metricConnected: "Connected",
+    metricToken: "Token",
+    metricDebugTabs: "Debugger tabs",
+    metricLastConnected: "Last connected",
+    metricRelayReachable: "Relay reachable",
+    metricRelayConnected: "Relay connected",
+    metricRelayHost: "Relay host",
+    metricExtensionConnected: "Extension connected",
+    statusConnected: "Connected",
+    statusBridge: "Bridge",
+    statusToken: "Token",
+    statusDebuggerTabs: "Debugger tabs",
+    statusLastConnected: "Last connected",
+    statusLastError: "Last error",
+    diagnosticsGeneratedAt: "Generated at",
+    diagnosticsExtensionConnected: "Extension connected",
+    diagnosticsExtensionBridgeUrl: "Extension bridge URL",
+    diagnosticsRelayStatusUrl: "Relay status URL",
+    diagnosticsRelayReachable: "Relay reachable",
+    diagnosticsRelayConnected: "Relay connected",
+    diagnosticsRelayWebSocketUrl: "Relay websocket URL",
+    diagnosticsRelayExtensionId: "Relay extension ID",
+    diagnosticsRelayError: "Relay error",
+    guidanceDefault:
+      "Run diagnostics when status and CLI result look inconsistent.",
+    guidanceRelayUnreachable:
+      "Relay status endpoint is unreachable. Ensure browserd is running and listening on the configured host/port.",
+    guidanceBridgeMismatch:
+      "Bridge URL mismatch. Update Bridge URL to {bridgeUrl}, then click Save and Reconnect.",
+    guidanceExtensionRelayMismatch:
+      "Extension reports connected, but relay reports disconnected. Reload the extension in edge://extensions and reconnect.",
+    guidanceReconnectWait:
+      "Click Reconnect and keep this popup open for a few seconds until both sides show connected.",
+    guidanceTokenMismatch:
+      "Token is missing or mismatched. Set it to BROWSERD_CHROME_RELAY_EXTENSION_TOKEN, then Save.",
+    guidanceHealthy:
+      "Connection path looks healthy. You can run browserctl commands now.",
+    diagnosticsFailed: "Diagnostics failed: {message}",
+    diagnosticsFallback1: "Verify Bridge URL format (ws://.../bridge).",
+    diagnosticsFallback2: "Reload extension and retry diagnostics.",
+    copySuccess: "Report copied to clipboard.",
+    copyFailed: "Copy failed: {message}",
+    feedbackSaved: "Config saved.",
+    feedbackReconnected: "Reconnect request sent.",
+    feedbackDiagnosticsReady: "Diagnostics refreshed.",
+    initFailure1: "Failed to load initial extension status.",
+    initFailure2: "Check extension permissions and click Run Diagnostics.",
+    errorBridgeProtocol:
+      "Bridge URL must use ws:// or wss:// (received {protocol}).",
+    errorReadStatus: "Failed to read extension status.",
+    errorSaveConfig: "Failed to save config.",
+    errorReconnect: "Failed to reconnect.",
+    errorTokenRequired: "Token is required for extension bridge mode."
+  },
+  "zh-CN": {
+    headerTitle: "BrowserCtl Relay",
+    headerSubtitle: "本地浏览器桥接控制台",
+    languageLabel: "语言",
+    bridgeUrlLabel: "桥接地址",
+    bridgeUrlPlaceholder: "ws://127.0.0.1:9223/bridge",
+    tokenLabel: "令牌（必填）",
+    tokenPlaceholder: "BROWSERD_CHROME_RELAY_EXTENSION_TOKEN",
+    save: "保存",
+    reconnect: "重连",
+    connectionSectionTitle: "连接配置",
+    statusSectionTitle: "实时状态",
+    statusDetailsLabel: "状态详情",
+    troubleshootingSectionTitle: "排障",
+    diagnosticsDetailsLabel: "诊断详情",
+    runDiagnostics: "运行诊断",
+    copyReport: "复制报告",
+    statusLoading: "正在加载 relay 状态...",
+    diagnosticsEmpty: "暂无诊断结果。",
+    hint: "使用 browserctl 的 chrome-relay extension 模式时，请保持该扩展启用。",
+    yes: "是",
+    no: "否",
+    unknown: "未知",
+    tokenConfigured: "已配置",
+    tokenNone: "无",
+    headerPillConnected: "已连接",
+    headerPillDisconnected: "未连接",
+    headerPillUnknown: "未知",
+    metricConnected: "连接状态",
+    metricToken: "令牌",
+    metricDebugTabs: "调试器标签页",
+    metricLastConnected: "上次连接",
+    metricRelayReachable: "Relay 可达",
+    metricRelayConnected: "Relay 连接",
+    metricRelayHost: "Relay 主机",
+    metricExtensionConnected: "扩展连接",
+    statusConnected: "连接",
+    statusBridge: "桥接地址",
+    statusToken: "令牌",
+    statusDebuggerTabs: "调试器标签页数",
+    statusLastConnected: "上次连接",
+    statusLastError: "最近错误",
+    diagnosticsGeneratedAt: "生成时间",
+    diagnosticsExtensionConnected: "扩展连接",
+    diagnosticsExtensionBridgeUrl: "扩展桥接地址",
+    diagnosticsRelayStatusUrl: "Relay 状态地址",
+    diagnosticsRelayReachable: "Relay 可达",
+    diagnosticsRelayConnected: "Relay 连接",
+    diagnosticsRelayWebSocketUrl: "Relay WebSocket 地址",
+    diagnosticsRelayExtensionId: "Relay 扩展 ID",
+    diagnosticsRelayError: "Relay 错误",
+    guidanceDefault: "当弹窗状态与 CLI 结果不一致时，请运行诊断。",
+    guidanceRelayUnreachable:
+      "Relay 状态接口不可达。请确认 browserd 正在运行，并监听了配置的主机和端口。",
+    guidanceBridgeMismatch:
+      "Bridge URL 不一致。请将 Bridge URL 更新为 {bridgeUrl}，然后点击“保存”和“重连”。",
+    guidanceExtensionRelayMismatch:
+      "扩展显示已连接，但 relay 显示未连接。请在 edge://extensions 里重载扩展并重新连接。",
+    guidanceReconnectWait:
+      "点击“重连”，并保持弹窗打开数秒，直到扩展和 relay 都显示已连接。",
+    guidanceTokenMismatch:
+      "令牌缺失或不匹配。请将 Token 设置为 BROWSERD_CHROME_RELAY_EXTENSION_TOKEN 后再保存。",
+    guidanceHealthy: "连接链路看起来正常，现在可以执行 browserctl 命令。",
+    diagnosticsFailed: "诊断失败：{message}",
+    diagnosticsFallback1: "请确认 Bridge URL 格式正确（ws://.../bridge）。",
+    diagnosticsFallback2: "请重载扩展后再次运行诊断。",
+    copySuccess: "诊断报告已复制到剪贴板。",
+    copyFailed: "复制失败：{message}",
+    feedbackSaved: "配置已保存。",
+    feedbackReconnected: "已发送重连请求。",
+    feedbackDiagnosticsReady: "诊断已刷新。",
+    initFailure1: "初始化扩展状态失败。",
+    initFailure2: "请检查扩展权限，然后点击“运行诊断”。",
+    errorBridgeProtocol: "Bridge URL 协议必须是 ws:// 或 wss://（当前为 {protocol}）。",
+    errorReadStatus: "读取扩展状态失败。",
+    errorSaveConfig: "保存配置失败。",
+    errorReconnect: "重连失败。",
+    errorTokenRequired: "扩展桥接模式必须填写 Token。"
+  }
+};
+
+const bridgeUrlInput = document.getElementById("bridgeUrl");
+const tokenInput = document.getElementById("token");
+const languageSelect = document.getElementById("languageSelect");
+const saveButton = document.getElementById("saveButton");
+const reconnectButton = document.getElementById("reconnectButton");
+const diagnoseButton = document.getElementById("diagnoseButton");
+const copyReportButton = document.getElementById("copyReportButton");
+const statusSummary = document.getElementById("statusSummary");
+const diagnosticsHighlights = document.getElementById("diagnosticsHighlights");
+const statusBox = document.getElementById("statusBox");
+const diagnosticsBox = document.getElementById("diagnosticsBox");
+const guidanceList = document.getElementById("guidanceList");
+const actionFeedback = document.getElementById("actionFeedback");
+const headerConnectionPill = document.getElementById("headerConnectionPill");
+
+let currentLanguage = "en";
+let latestStatus = undefined;
+let latestDiagnostics = undefined;
+let latestGuidance = [];
+let feedbackTimer = undefined;
+
+function normalizeString(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function isObject(value) {
+  return value !== null && typeof value === "object";
+}
+
+function resolveLanguage(value) {
+  const normalized = normalizeString(value).toLowerCase();
+  if (normalized === "zh-cn" || normalized.startsWith("zh")) {
+    return "zh-CN";
+  }
+
+  return "en";
+}
+
+function t(key) {
+  const localized = TRANSLATIONS[currentLanguage] ?? TRANSLATIONS.en;
+  return localized[key] ?? TRANSLATIONS.en[key] ?? key;
+}
+
+function formatMessage(template, variables = {}) {
+  return template.replace(/\{([a-zA-Z0-9_]+)\}/g, (_match, key) => {
+    const value = variables[key];
+    return value === undefined || value === null ? "" : String(value);
+  });
+}
+
+function setTextById(id, text) {
+  const element = document.getElementById(id);
+  if (element !== null) {
+    element.textContent = text;
+  }
+}
+
+function applyStaticTranslations() {
+  setTextById("headerTitle", t("headerTitle"));
+  setTextById("headerSubtitle", t("headerSubtitle"));
+  setTextById("languageLabel", t("languageLabel"));
+  setTextById("connectionSectionTitle", t("connectionSectionTitle"));
+  setTextById("bridgeUrlLabel", t("bridgeUrlLabel"));
+  setTextById("tokenLabel", t("tokenLabel"));
+  setTextById("saveButton", t("save"));
+  setTextById("reconnectButton", t("reconnect"));
+  setTextById("statusSectionTitle", t("statusSectionTitle"));
+  setTextById("statusDetailsLabel", t("statusDetailsLabel"));
+  setTextById("troubleshootingSectionTitle", t("troubleshootingSectionTitle"));
+  setTextById("diagnosticsDetailsLabel", t("diagnosticsDetailsLabel"));
+  setTextById("diagnoseButton", t("runDiagnostics"));
+  setTextById("copyReportButton", t("copyReport"));
+  setTextById("hintText", t("hint"));
+
+  if (bridgeUrlInput !== null) {
+    bridgeUrlInput.placeholder = t("bridgeUrlPlaceholder");
+  }
+  if (tokenInput !== null) {
+    tokenInput.placeholder = t("tokenPlaceholder");
+  }
+  if (languageSelect !== null) {
+    languageSelect.value = currentLanguage;
+  }
+}
+
+function toBridgeHost(bridgeUrl) {
+  try {
+    return new URL(bridgeUrl).host;
+  } catch {
+    return t("unknown");
+  }
+}
+
+function toShortTime(isoTime) {
+  const value = normalizeString(isoTime);
+  if (value.length === 0) {
+    return "--";
+  }
+
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+
+  return parsed.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  });
+}
+
+function createMetricCard(metric) {
+  const item = document.createElement("div");
+  item.className = "metric";
+
+  const label = document.createElement("div");
+  label.className = "metric-label";
+  label.textContent = metric.label;
+
+  const value = document.createElement("div");
+  value.className = `metric-value${metric.tone !== undefined ? ` ${metric.tone}` : ""}`;
+  value.textContent = metric.value;
+
+  item.appendChild(label);
+  item.appendChild(value);
+  return item;
+}
+
+function renderMetrics(container, metrics) {
+  if (container === null) {
+    return;
+  }
+
+  container.textContent = "";
+  for (const metric of metrics) {
+    container.appendChild(createMetricCard(metric));
+  }
+}
+
+function setHeaderConnection(connected) {
+  if (headerConnectionPill === null) {
+    return;
+  }
+
+  headerConnectionPill.classList.remove("ok", "error");
+  if (connected === true) {
+    headerConnectionPill.classList.add("ok");
+    headerConnectionPill.textContent = t("headerPillConnected");
+    return;
+  }
+
+  if (connected === false) {
+    headerConnectionPill.classList.add("error");
+    headerConnectionPill.textContent = t("headerPillDisconnected");
+    return;
+  }
+
+  headerConnectionPill.textContent = t("headerPillUnknown");
+}
+
+function normalizeStatus(state) {
+  const safeState = isObject(state) ? state : {};
+  return {
+    connected: safeState.connected === true,
+    bridgeUrl: normalizeString(safeState.bridgeUrl) || DEFAULT_BRIDGE_URL,
+    tokenConfigured: safeState.tokenConfigured === true,
+    lastConnectedAt: normalizeString(safeState.lastConnectedAt),
+    lastError: normalizeString(safeState.lastError),
+    debuggerAttachedTabs:
+      typeof safeState.debuggerAttachedTabs === "number" &&
+      Number.isFinite(safeState.debuggerAttachedTabs)
+        ? safeState.debuggerAttachedTabs
+        : 0
+  };
+}
+
+function renderStatusSummary(status) {
+  renderMetrics(statusSummary, [
+    {
+      label: t("metricConnected"),
+      value: status.connected ? t("yes") : t("no"),
+      tone: status.connected ? "ok" : "error"
+    },
+    {
+      label: t("metricToken"),
+      value: status.tokenConfigured ? t("tokenConfigured") : t("tokenNone")
+    },
+    {
+      label: t("metricDebugTabs"),
+      value: String(status.debuggerAttachedTabs)
+    },
+    {
+      label: t("metricLastConnected"),
+      value: toShortTime(status.lastConnectedAt)
+    }
+  ]);
+}
+
+function setStatus(state) {
+  const normalizedState = normalizeStatus(state);
+  latestStatus = normalizedState;
+  setHeaderConnection(normalizedState.connected);
+  renderStatusSummary(normalizedState);
+
+  if (statusBox === null) {
+    return;
+  }
+
+  statusBox.classList.remove("ok", "error");
+  statusBox.classList.add(normalizedState.connected ? "ok" : "error");
+
+  const lines = [];
+  lines.push(
+    `${t("statusConnected")}: ${normalizedState.connected ? t("yes") : t("no")}`
+  );
+  lines.push(`${t("statusBridge")}: ${normalizedState.bridgeUrl || t("unknown")}`);
+  lines.push(
+    `${t("statusToken")}: ${
+      normalizedState.tokenConfigured ? t("tokenConfigured") : t("tokenNone")
+    }`
+  );
+  lines.push(`${t("statusDebuggerTabs")}: ${normalizedState.debuggerAttachedTabs}`);
+  if (normalizedState.lastConnectedAt.length > 0) {
+    lines.push(`${t("statusLastConnected")}: ${normalizedState.lastConnectedAt}`);
+  }
+  if (normalizedState.lastError.length > 0) {
+    lines.push(`${t("statusLastError")}: ${normalizedState.lastError}`);
+  }
+
+  statusBox.textContent = lines.join("\n");
+}
+
+function renderDiagnosticsHighlights(diagnostics) {
+  if (diagnostics === undefined) {
+    renderMetrics(diagnosticsHighlights, [
+      {
+        label: t("metricRelayReachable"),
+        value: "--"
+      },
+      {
+        label: t("metricRelayConnected"),
+        value: "--"
+      },
+      {
+        label: t("metricExtensionConnected"),
+        value: "--"
+      },
+      {
+        label: t("metricRelayHost"),
+        value: "--"
+      }
+    ]);
+    return;
+  }
+
+  renderMetrics(diagnosticsHighlights, [
+    {
+      label: t("metricRelayReachable"),
+      value: diagnostics.relay.reachable ? t("yes") : t("no"),
+      tone: diagnostics.relay.reachable ? "ok" : "error"
+    },
+    {
+      label: t("metricRelayConnected"),
+      value: diagnostics.relay.connected ? t("yes") : t("no"),
+      tone: diagnostics.relay.connected ? "ok" : "error"
+    },
+    {
+      label: t("metricExtensionConnected"),
+      value: diagnostics.extension.connected ? t("yes") : t("no"),
+      tone: diagnostics.extension.connected ? "ok" : "error"
+    },
+    {
+      label: t("metricRelayHost"),
+      value: toBridgeHost(diagnostics.extension.bridgeUrl)
+    }
+  ]);
+}
+
+function setDiagnosticsState(diagnostics) {
+  renderDiagnosticsHighlights(diagnostics);
+  if (diagnosticsBox === null) {
+    return;
+  }
+
+  diagnosticsBox.classList.remove("ok", "error");
+  const healthy =
+    diagnostics.relay.reachable &&
+    diagnostics.relay.connected &&
+    diagnostics.extension.connected;
+  diagnosticsBox.classList.add(healthy ? "ok" : "error");
+
+  const lines = [];
+  lines.push(`${t("diagnosticsGeneratedAt")}: ${diagnostics.generatedAt}`);
+  lines.push(
+    `${t("diagnosticsExtensionConnected")}: ${
+      diagnostics.extension.connected ? t("yes") : t("no")
+    }`
+  );
+  lines.push(
+    `${t("diagnosticsExtensionBridgeUrl")}: ${diagnostics.extension.bridgeUrl}`
+  );
+  lines.push(`${t("diagnosticsRelayStatusUrl")}: ${diagnostics.relay.statusUrl}`);
+  lines.push(
+    `${t("diagnosticsRelayReachable")}: ${
+      diagnostics.relay.reachable ? t("yes") : t("no")
+    }`
+  );
+  if (diagnostics.relay.reachable) {
+    lines.push(
+      `${t("diagnosticsRelayConnected")}: ${
+        diagnostics.relay.connected ? t("yes") : t("no")
+      }`
+    );
+    if (diagnostics.relay.websocketUrl.length > 0) {
+      lines.push(
+        `${t("diagnosticsRelayWebSocketUrl")}: ${diagnostics.relay.websocketUrl}`
+      );
+    }
+    if (diagnostics.relay.extensionId.length > 0) {
+      lines.push(
+        `${t("diagnosticsRelayExtensionId")}: ${diagnostics.relay.extensionId}`
+      );
+    }
+  } else if (diagnostics.relay.error.length > 0) {
+    lines.push(`${t("diagnosticsRelayError")}: ${diagnostics.relay.error}`);
+  }
+
+  diagnosticsBox.textContent = lines.join("\n");
+}
+
+function renderGuidance(items) {
+  latestGuidance = [...items];
+  if (guidanceList === null) {
+    return;
+  }
+
+  guidanceList.textContent = "";
+  for (const item of items) {
+    const entry = document.createElement("li");
+    entry.textContent = item;
+    guidanceList.appendChild(entry);
+  }
+}
+
+function showFeedback(message, tone = "ok") {
+  if (actionFeedback === null) {
+    return;
+  }
+
+  if (feedbackTimer !== undefined) {
+    clearTimeout(feedbackTimer);
+    feedbackTimer = undefined;
+  }
+
+  actionFeedback.hidden = false;
+  actionFeedback.classList.remove("ok", "error");
+  actionFeedback.classList.add(tone === "error" ? "error" : "ok");
+  actionFeedback.textContent = message;
+
+  feedbackTimer = setTimeout(() => {
+    if (actionFeedback !== null) {
+      actionFeedback.hidden = true;
+    }
+    feedbackTimer = undefined;
+  }, FEEDBACK_HIDE_MS);
+}
+
+function rerenderLocalizedState() {
+  applyStaticTranslations();
+
+  if (latestStatus !== undefined) {
+    setStatus(latestStatus);
+  } else {
+    setHeaderConnection(undefined);
+    renderMetrics(statusSummary, [
+      { label: t("metricConnected"), value: "--" },
+      { label: t("metricToken"), value: "--" },
+      { label: t("metricDebugTabs"), value: "--" },
+      { label: t("metricLastConnected"), value: "--" }
+    ]);
+    if (statusBox !== null) {
+      statusBox.classList.remove("ok", "error");
+      statusBox.textContent = t("statusLoading");
+    }
+  }
+
+  if (latestDiagnostics !== undefined) {
+    setDiagnosticsState(latestDiagnostics);
+    renderGuidance(buildGuidance(latestDiagnostics));
+  } else {
+    renderDiagnosticsHighlights(undefined);
+    if (diagnosticsBox !== null) {
+      diagnosticsBox.classList.remove("ok", "error");
+      diagnosticsBox.textContent = t("diagnosticsEmpty");
+    }
+    renderGuidance([t("guidanceDefault")]);
+  }
+
+  setCopyAvailability(latestDiagnostics !== undefined);
+}
+
+function setBusy(busy) {
+  if (saveButton !== null) {
+    saveButton.disabled = busy;
+  }
+  if (reconnectButton !== null) {
+    reconnectButton.disabled = busy;
+  }
+  if (diagnoseButton !== null) {
+    diagnoseButton.disabled = busy;
+  }
+  if (copyReportButton !== null) {
+    copyReportButton.disabled = busy;
+  }
+  if (languageSelect !== null) {
+    languageSelect.disabled = busy;
+  }
+}
+
+function setCopyAvailability(available) {
+  if (copyReportButton !== null) {
+    copyReportButton.disabled = !available;
+  }
+}
+
+function sendMessage(type, payload = {}) {
+  return new Promise((resolve, reject) => {
+    chrome.runtime.sendMessage(
+      {
+        type,
+        ...payload
+      },
+      (response) => {
+        if (chrome.runtime.lastError) {
+          reject(new Error(chrome.runtime.lastError.message));
+          return;
+        }
+
+        resolve(response);
+      }
+    );
+  });
+}
+
+function buildRelayStatusUrl(bridgeUrl) {
+  const parsedBridgeUrl = new URL(bridgeUrl);
+  if (parsedBridgeUrl.protocol !== "ws:" && parsedBridgeUrl.protocol !== "wss:") {
+    throw new Error(
+      formatMessage(t("errorBridgeProtocol"), {
+        protocol: parsedBridgeUrl.protocol
+      })
+    );
+  }
+
+  parsedBridgeUrl.protocol =
+    parsedBridgeUrl.protocol === "wss:" ? "https:" : "http:";
+  parsedBridgeUrl.pathname = "/browserctl/relay/status";
+  parsedBridgeUrl.search = "";
+  return parsedBridgeUrl.toString();
+}
+
+async function fetchRelayStatus(statusUrl) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => {
+    controller.abort();
+  }, DIAGNOSTIC_TIMEOUT_MS);
+
+  try {
+    const response = await fetch(statusUrl, {
+      method: "GET",
+      cache: "no-store",
+      signal: controller.signal
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    const payload = await response.json();
+    return {
+      statusUrl,
+      reachable: payload?.connected === true || payload?.connected === false,
+      connected: payload?.connected === true,
+      websocketUrl: normalizeString(payload?.websocketUrl),
+      relayUrl: normalizeString(payload?.relayUrl),
+      extensionId: normalizeString(payload?.extensionId),
+      error: ""
+    };
+  } catch (error) {
+    return {
+      statusUrl,
+      reachable: false,
+      connected: false,
+      websocketUrl: "",
+      relayUrl: "",
+      extensionId: "",
+      error: error instanceof Error ? error.message : String(error)
+    };
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+function buildGuidance(diagnostics) {
+  const steps = [];
+  const extensionState = diagnostics.extension;
+  const relayState = diagnostics.relay;
+  const bridgeUrlMismatch =
+    relayState.websocketUrl.length > 0 &&
+    normalizeString(extensionState.bridgeUrl) !==
+      normalizeString(relayState.websocketUrl);
+
+  if (!relayState.reachable) {
+    steps.push(t("guidanceRelayUnreachable"));
+  }
+
+  if (bridgeUrlMismatch) {
+    steps.push(
+      formatMessage(t("guidanceBridgeMismatch"), {
+        bridgeUrl: relayState.websocketUrl
+      })
+    );
+  }
+
+  if (extensionState.connected && relayState.reachable && !relayState.connected) {
+    steps.push(t("guidanceExtensionRelayMismatch"));
+  }
+
+  if (!extensionState.connected && relayState.reachable && !relayState.connected) {
+    steps.push(t("guidanceReconnectWait"));
+  }
+
+  if (
+    extensionState.lastError.includes("1008") ||
+    extensionState.lastError.toLowerCase().includes("token")
+  ) {
+    steps.push(t("guidanceTokenMismatch"));
+  }
+
+  if (steps.length === 0) {
+    steps.push(t("guidanceHealthy"));
+  }
+
+  return steps;
+}
+
+async function readStoredLanguage() {
+  const stored = await chrome.storage.local.get(UI_CONFIG_KEY);
+  const uiConfig = stored?.[UI_CONFIG_KEY];
+  if (!isObject(uiConfig)) {
+    return undefined;
+  }
+
+  const language = normalizeString(uiConfig.language);
+  return language.length === 0 ? undefined : language;
+}
+
+async function persistLanguage(language) {
+  const normalized = resolveLanguage(language);
+  const stored = await chrome.storage.local.get(UI_CONFIG_KEY);
+  const currentConfig = isObject(stored?.[UI_CONFIG_KEY]) ? stored[UI_CONFIG_KEY] : {};
+  await chrome.storage.local.set({
+    [UI_CONFIG_KEY]: {
+      ...currentConfig,
+      language: normalized
+    }
+  });
+}
+
+async function initializeLanguage() {
+  const storedLanguage = await readStoredLanguage();
+  currentLanguage = resolveLanguage(storedLanguage ?? navigator.language);
+  rerenderLocalizedState();
+}
+
+async function loadConfigAndStatus() {
+  const configResponse = await sendMessage("relay.getConfig");
+  if (configResponse?.ok === true && isObject(configResponse.config)) {
+    if (bridgeUrlInput !== null) {
+      bridgeUrlInput.value = normalizeString(configResponse.config.bridgeUrl);
+    }
+    if (tokenInput !== null) {
+      tokenInput.value = "";
+    }
+  }
+
+  const statusResponse = await sendMessage("relay.getStatus");
+  if (statusResponse?.ok === true) {
+    setStatus(statusResponse.status ?? {});
+  }
+}
+
+async function refreshStatusSilently() {
+  try {
+    const statusResponse = await sendMessage("relay.getStatus");
+    if (statusResponse?.ok === true) {
+      setStatus(statusResponse.status ?? {});
+    }
+  } catch {
+    // Ignore polling failures and keep current state visible.
+  }
+}
+
+async function saveConfig() {
+  setBusy(true);
+  try {
+    const tokenValue = normalizeString(tokenInput?.value);
+    if (tokenValue.length === 0) {
+      throw new Error(t("errorTokenRequired"));
+    }
+
+    const response = await sendMessage("relay.saveConfig", {
+      config: {
+        bridgeUrl: bridgeUrlInput?.value ?? "",
+        token: tokenValue
+      }
+    });
+
+    if (response?.ok !== true) {
+      throw new Error(
+        typeof response?.error === "string"
+          ? response.error
+          : t("errorSaveConfig")
+      );
+    }
+
+    setStatus(response.status ?? {});
+    if (tokenInput !== null) {
+      tokenInput.value = "";
+    }
+    showFeedback(t("feedbackSaved"), "ok");
+  } catch (error) {
+    setStatus({
+      connected: false,
+      bridgeUrl: bridgeUrlInput?.value ?? "",
+      tokenConfigured: normalizeString(tokenInput?.value).length > 0,
+      lastError: error instanceof Error ? error.message : String(error)
+    });
+    showFeedback(error instanceof Error ? error.message : String(error), "error");
+  } finally {
+    setBusy(false);
+    setCopyAvailability(latestDiagnostics !== undefined);
+  }
+}
+
+async function reconnect() {
+  setBusy(true);
+  try {
+    const response = await sendMessage("relay.reconnect");
+    if (response?.ok !== true) {
+      throw new Error(
+        typeof response?.error === "string" ? response.error : t("errorReconnect")
+      );
+    }
+
+    setStatus(response.status ?? {});
+    showFeedback(t("feedbackReconnected"), "ok");
+  } catch (error) {
+    setStatus({
+      connected: false,
+      bridgeUrl: bridgeUrlInput?.value ?? "",
+      tokenConfigured: normalizeString(tokenInput?.value).length > 0,
+      lastError: error instanceof Error ? error.message : String(error)
+    });
+    showFeedback(error instanceof Error ? error.message : String(error), "error");
+  } finally {
+    setBusy(false);
+    setCopyAvailability(latestDiagnostics !== undefined);
+  }
+}
+
+async function runDiagnostics() {
+  setBusy(true);
+  try {
+    const statusResponse = await sendMessage("relay.getStatus");
+    if (statusResponse?.ok !== true) {
+      throw new Error(
+        typeof statusResponse?.error === "string"
+          ? statusResponse.error
+          : t("errorReadStatus")
+      );
+    }
+
+    const extensionStatus = normalizeStatus(statusResponse.status ?? {});
+    setStatus(extensionStatus);
+
+    const bridgeUrlFromInput = normalizeString(bridgeUrlInput?.value);
+    const bridgeUrl =
+      bridgeUrlFromInput.length > 0 ? bridgeUrlFromInput : extensionStatus.bridgeUrl;
+    const relayStatusUrl = buildRelayStatusUrl(bridgeUrl);
+    const relayStatus = await fetchRelayStatus(relayStatusUrl);
+
+    latestDiagnostics = {
+      generatedAt: new Date().toISOString(),
+      extension: extensionStatus,
+      relay: relayStatus
+    };
+
+    setDiagnosticsState(latestDiagnostics);
+    renderGuidance(buildGuidance(latestDiagnostics));
+    setCopyAvailability(true);
+    showFeedback(t("feedbackDiagnosticsReady"), "ok");
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    renderDiagnosticsHighlights(undefined);
+    if (diagnosticsBox !== null) {
+      diagnosticsBox.classList.remove("ok");
+      diagnosticsBox.classList.add("error");
+      diagnosticsBox.textContent = formatMessage(t("diagnosticsFailed"), { message });
+    }
+    renderGuidance([t("diagnosticsFallback1"), t("diagnosticsFallback2")]);
+    setCopyAvailability(false);
+    showFeedback(message, "error");
+  } finally {
+    setBusy(false);
+  }
+}
+
+async function copyDiagnosticsReport() {
+  if (latestDiagnostics === undefined) {
+    await runDiagnostics();
+    if (latestDiagnostics === undefined) {
+      return;
+    }
+  }
+
+  const payload = {
+    generatedAt: latestDiagnostics.generatedAt,
+    language: currentLanguage,
+    extension: latestDiagnostics.extension,
+    relay: latestDiagnostics.relay,
+    suggestions: latestGuidance
+  };
+
+  try {
+    await navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
+    showFeedback(t("copySuccess"), "ok");
+  } catch (error) {
+    showFeedback(
+      formatMessage(t("copyFailed"), {
+        message: error instanceof Error ? error.message : String(error)
+      }),
+      "error"
+    );
+  }
+}
+
+async function updateLanguage(nextLanguage) {
+  const normalized = resolveLanguage(nextLanguage);
+  if (normalized === currentLanguage) {
+    return;
+  }
+
+  currentLanguage = normalized;
+  await persistLanguage(normalized);
+  rerenderLocalizedState();
+}
+
+saveButton?.addEventListener("click", () => {
+  void saveConfig();
+});
+
+reconnectButton?.addEventListener("click", () => {
+  void reconnect();
+});
+
+diagnoseButton?.addEventListener("click", () => {
+  void runDiagnostics();
+});
+
+copyReportButton?.addEventListener("click", () => {
+  void copyDiagnosticsReport();
+});
+
+languageSelect?.addEventListener("change", () => {
+  void updateLanguage(languageSelect.value);
+});
+
+async function initialize() {
+  await initializeLanguage();
+  await loadConfigAndStatus();
+  await runDiagnostics();
+}
+
+void initialize().catch((error) => {
+  setStatus({
+    connected: false,
+    bridgeUrl: normalizeString(bridgeUrlInput?.value) || DEFAULT_BRIDGE_URL,
+    tokenConfigured: false,
+    lastError: error instanceof Error ? error.message : String(error)
+  });
+  renderDiagnosticsHighlights(undefined);
+  renderGuidance([t("initFailure1"), t("initFailure2")]);
+  showFeedback(error instanceof Error ? error.message : String(error), "error");
+});
+
+setCopyAvailability(false);
+setInterval(() => {
+  void refreshStatusSilently();
+}, STATUS_POLL_INTERVAL_MS);