@vforsh/argus 0.3.1 → 0.5.0

package/dist/extension/dist/popup/popup.js

@@ -1,3 +1,6 @@
+// src/popup/html.ts
+var escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+
 // src/popup/classify-target.ts
 var LOW_INTEREST_URL_RULES = [
   { host: "accounts.google.com", pathPrefix: "/RotateCookiesPage" },
@@ -165,12 +168,192 @@ function renderTargetVisibilityAction(tabId, target, visibility) {
 function isTargetSelected(selectedFrameId, targetFrameId) {
   return selectedFrameId !== void 0 && (selectedFrameId ?? null) === (targetFrameId ?? null);
 }
-function escapeHtml(text) {
-  const div = document.createElement("div");
-  div.textContent = text;
-  return div.innerHTML;
+
+// src/popup/popup-client.ts
+var sendPopupMessage = async (message) => {
+  return new Promise((resolve) => {
+    chrome.runtime.sendMessage(message, resolve);
+  });
+};
+var runPopupMessage = async (message) => {
+  const response = await sendPopupMessage(message);
+  if (!response.success) {
+    throw new Error(response.error);
+  }
+  return response;
+};
+
+// src/popup/health-panel.ts
+var healthSummary = document.getElementById("healthSummary");
+var healthNativeHost = document.getElementById("healthNativeHost");
+var healthWatcherReady = document.getElementById("healthWatcherReady");
+var healthWatcherId = document.getElementById("healthWatcherId");
+var healthAttachedCount = document.getElementById("healthAttachedCount");
+var healthSelectedTarget = document.getElementById("healthSelectedTarget");
+var healthLastMessage = document.getElementById("healthLastMessage");
+var healthPid = document.getElementById("healthPid");
+var updateHealth = (status, watcher, buttons, hasWatchers) => {
+  const target = watcher?.currentTarget ?? null;
+  const tabCount = status?.attachedTabs.length ?? 0;
+  const nativeHostConnected = watcher?.bridgeConnected ?? status?.bridgeConnected ?? false;
+  const watcherReady = watcher?.watcherReady ?? false;
+  const targetState = watcher?.targetState ?? "not-selected";
+  healthSummary.textContent = buildHealthSummaryText({
+    nativeHostConnected,
+    watcherReady,
+    targetState,
+    watcherId: watcher?.watcherId ?? null,
+    tabCount
+  });
+  setHealthValueState(healthNativeHost, nativeHostConnected ? "Connected" : "Disconnected", nativeHostConnected ? "connected" : "disconnected");
+  setHealthValueState(healthWatcherReady, watcherReady ? "Ready" : "Not ready", watcherReady ? "connected" : "disconnected");
+  healthWatcherId.textContent = watcher?.watcherId ?? "-";
+  healthAttachedCount.textContent = String(tabCount);
+  setHealthValueState(healthSelectedTarget, formatTargetState(target, targetState), getTargetStateClass(targetState));
+  healthLastMessage.textContent = formatRelativeTimestamp(watcher?.lastMessageAt ?? null);
+  healthPid.textContent = watcher?.nativeHostPid ? String(watcher.nativeHostPid) : "-";
+  buttons.copyAll.disabled = !hasWatchers;
+  buttons.detachAll.disabled = !hasWatchers;
+};
+var buildHealthSummaryText = (input) => {
+  const parts = [];
+  if (input.watcherId) parts.push(input.watcherId);
+  parts.push(input.nativeHostConnected ? "Host connected" : "Host disconnected");
+  parts.push(input.watcherReady ? "Watcher ready" : "Watcher not ready");
+  if (input.targetState === "rebinding") parts.push("Target rebinding");
+  if (input.tabCount > 0) parts.push(`${input.tabCount} tab${input.tabCount === 1 ? "" : "s"}`);
+  return parts.join(" \xB7 ");
+};
+var setHealthValueState = (element, text, stateClass) => {
+  element.textContent = text;
+  element.classList.toggle("connected", stateClass === "connected");
+  element.classList.toggle("disconnected", stateClass === "disconnected");
+  element.classList.toggle("warning", stateClass === "warning");
+};
+var formatTargetState = (target, state) => {
+  if (!target || state === "not-selected") {
+    return "-";
+  }
+  const label = target.type === "page" ? "Page" : "Iframe";
+  return state === "ready" ? `${label} ready` : `${label} rebinding`;
+};
+var getTargetStateClass = (state) => {
+  if (state === "ready") {
+    return "connected";
+  }
+  if (state === "rebinding") {
+    return "warning";
+  }
+  return null;
+};
+function formatRelativeTimestamp(timestamp) {
+  if (!timestamp) {
+    return "-";
+  }
+  const elapsedMs = Math.max(0, Date.now() - timestamp);
+  if (elapsedMs < 1e3) {
+    return "Just now";
+  }
+  const elapsedSeconds = Math.floor(elapsedMs / 1e3);
+  if (elapsedSeconds < 60) {
+    return `${elapsedSeconds}s ago`;
+  }
+  const elapsedMinutes = Math.floor(elapsedSeconds / 60);
+  if (elapsedMinutes < 60) {
+    return `${elapsedMinutes}m ago`;
+  }
+  const elapsedHours = Math.floor(elapsedMinutes / 60);
+  return `${elapsedHours}h ago`;
 }
 
+// src/popup/watcher-info.ts
+async function copyTextToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return;
+  } catch {
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "true");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+  document.body.appendChild(textarea);
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+  try {
+    const copied = document.execCommand("copy");
+    if (!copied) {
+      throw new Error("Browser denied clipboard write");
+    }
+  } finally {
+    textarea.remove();
+  }
+}
+function buildWatcherInfoText(watcher) {
+  if (!canCopyWatcherInfo(watcher)) {
+    return null;
+  }
+  const readyWatcher = watcher;
+  const target = readyWatcher.currentTarget;
+  const attached = target.attachedAt ? new Date(target.attachedAt).toISOString() : (/* @__PURE__ */ new Date()).toISOString();
+  const fields = [
+    ["ID", readyWatcher.watcherId],
+    ["Host", `${readyWatcher.watcherHost}:${readyWatcher.watcherPort}`],
+    ["PID", String(readyWatcher.nativeHostPid)],
+    ["Target", target.title || "(no title)"],
+    ["URL", target.url || "(no url)"],
+    ["Attached", attached]
+  ];
+  return `Argus Watcher Info
+${fields.map(([label, value]) => `${label}: ${value}`).join("\n")}`;
+}
+function buildAllWatchersInfoText(watchers) {
+  const watcherInfo = watchers.map((watcher) => buildWatcherInfoText(watcher)).filter((text) => Boolean(text));
+  if (watcherInfo.length === 0) {
+    return null;
+  }
+  return watcherInfo.join("\n\n");
+}
+function findWatcherByTabId(watchers, tabId) {
+  return watchers.find((watcher) => watcher.tabId === tabId) ?? null;
+}
+function canCopyWatcherInfo(watcher) {
+  return Boolean(watcher?.watcherId && watcher?.watcherHost && watcher?.watcherPort != null && watcher?.nativeHostPid && watcher?.currentTarget);
+}
+
+// src/popup/tab-feedback.ts
+var feedback = /* @__PURE__ */ new Map();
+var key = (tabId, action) => `${tabId}:${action}`;
+var setTabFeedback = (tabId, action, label, durationMs, icon) => {
+  feedback.set(key(tabId, action), { label, icon, expiresAt: durationMs === Infinity ? Infinity : Date.now() + durationMs });
+};
+var clearTabFeedback = (tabId, action) => {
+  feedback.delete(key(tabId, action));
+};
+var getTabFeedback = (tabId, action) => {
+  const entry = feedback.get(key(tabId, action));
+  if (!entry) {
+    return null;
+  }
+  if (entry.expiresAt <= Date.now()) {
+    feedback.delete(key(tabId, action));
+    return null;
+  }
+  return entry;
+};
+var hasPendingTabFeedback = () => {
+  for (const [entryKey, entry] of feedback.entries()) {
+    if (entry.expiresAt <= Date.now()) {
+      feedback.delete(entryKey);
+      continue;
+    }
+    return true;
+  }
+  return false;
+};
+
 // src/popup/popup.ts
 var COPY_ICON = `
 	<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -198,17 +381,16 @@ var availableSection = document.getElementById("availableSection");
 var availableContent = document.getElementById("availableContent");
 var attachedCount = document.getElementById("attachedCount");
 var errorBanner = document.getElementById("errorBanner");
-var healthSummary = document.getElementById("healthSummary");
-var healthNativeHost = document.getElementById("healthNativeHost");
-var healthWatcherReady = document.getElementById("healthWatcherReady");
-var healthWatcherId = document.getElementById("healthWatcherId");
-var healthAttachedCount = document.getElementById("healthAttachedCount");
-var healthSelectedTarget = document.getElementById("healthSelectedTarget");
-var healthLastMessage = document.getElementById("healthLastMessage");
-var healthPid = document.getElementById("healthPid");
 var copyAllButton = document.getElementById("copyAllButton");
 var detachAllButton = document.getElementById("detachAllButton");
 var prevStateHash = "";
+var latestTabs = [];
+var latestActiveTabId;
+async function renderFromLatestState() {
+  if (latestTabs.length > 0) {
+    renderTabs(latestTabs, latestActiveTabId);
+  }
+}
 var currentError = null;
 var latestCurrentWatcher = null;
 var latestWatchers = [];
@@ -223,18 +405,15 @@ detachAllButton.addEventListener("click", () => {
 document.querySelector(".health-summary-actions")?.addEventListener("click", (event) => {
   event.stopPropagation();
 });
-async function sendMessage(message) {
-  return new Promise((resolve) => {
-    chrome.runtime.sendMessage(message, resolve);
-  });
-}
+bindTabContainer(attachedContent);
+bindTabContainer(availableContent);
 function setEmptyState(icon, message) {
   availableSection.classList.remove("hidden");
   attachedSection.classList.add("hidden");
   availableContent.innerHTML = `
       <div class="empty-state">
-        <div class="icon">${escapeHtml2(icon)}</div>
-        <div>${escapeHtml2(message)}</div>
+        <div class="icon">${escapeHtml(icon)}</div>
+        <div>${escapeHtml(message)}</div>
       </div>
     `;
 }
@@ -248,61 +427,6 @@ function showError(message) {
   errorBanner.textContent = message ?? "";
   errorBanner.classList.toggle("hidden", !message);
 }
-function updateHealth(status, watcher) {
-  const target = watcher?.currentTarget ?? null;
-  const tabCount = status?.attachedTabs.length ?? 0;
-  const nativeHostConnected = watcher?.nativeHostConnected ?? status?.bridgeConnected ?? false;
-  const watcherReady = watcher?.watcherReady ?? false;
-  const targetState = watcher?.targetState ?? "not-selected";
-  healthSummary.textContent = buildHealthSummaryText({
-    nativeHostConnected,
-    watcherReady,
-    targetState,
-    watcherId: watcher?.watcherId ?? null,
-    tabCount
-  });
-  setHealthValueState(healthNativeHost, nativeHostConnected ? "Connected" : "Disconnected", nativeHostConnected ? "connected" : "disconnected");
-  setHealthValueState(healthWatcherReady, watcherReady ? "Ready" : "Not ready", watcherReady ? "connected" : "disconnected");
-  healthWatcherId.textContent = watcher?.watcherId ?? "-";
-  healthAttachedCount.textContent = String(tabCount);
-  setHealthValueState(healthSelectedTarget, formatTargetState(target, targetState), getTargetStateClass(targetState));
-  healthLastMessage.textContent = formatRelativeTimestamp(watcher?.lastMessageAt ?? null);
-  healthPid.textContent = watcher?.nativeHostPid ? String(watcher.nativeHostPid) : "-";
-  const hasWatchers = latestWatchers.length > 0;
-  copyAllButton.disabled = !hasWatchers;
-  detachAllButton.disabled = !hasWatchers;
-}
-function buildHealthSummaryText(input) {
-  const parts = [];
-  if (input.watcherId) parts.push(input.watcherId);
-  parts.push(input.nativeHostConnected ? "Host connected" : "Host disconnected");
-  parts.push(input.watcherReady ? "Watcher ready" : "Watcher not ready");
-  if (input.targetState === "rebinding") parts.push("Target rebinding");
-  if (input.tabCount > 0) parts.push(`${input.tabCount} tab${input.tabCount === 1 ? "" : "s"}`);
-  return parts.join(" \xB7 ");
-}
-function setHealthValueState(element, text, stateClass) {
-  element.textContent = text;
-  element.classList.toggle("connected", stateClass === "connected");
-  element.classList.toggle("disconnected", stateClass === "disconnected");
-  element.classList.toggle("warning", stateClass === "warning");
-}
-function formatTargetState(target, state) {
-  if (!target || state === "not-selected") {
-    return "-";
-  }
-  const label = target.type === "page" ? "Page" : "Iframe";
-  return state === "ready" ? `${label} ready` : `${label} rebinding`;
-}
-function getTargetStateClass(state) {
-  if (state === "ready") {
-    return "connected";
-  }
-  if (state === "rebinding") {
-    return "warning";
-  }
-  return null;
-}
 function renderTabs(tabs, currentTabId) {
   if (tabs.length === 0) {
     setEmptyState("\u{1F50D}", "No tabs available");
@@ -321,7 +445,7 @@ function renderTabs(tabs, currentTabId) {
   renderTabGroup(availableSection, availableContent, availableTabs, false);
 }
 function renderTabItem(tab, showTargets) {
-  const favicon = tab.faviconUrl ? `<img class="tab-favicon" src="${escapeHtml2(tab.faviconUrl)}" alt="">` : `<div class="tab-favicon" style="background: #e0e0e0"></div>`;
+  const favicon = tab.faviconUrl ? `<img class="tab-favicon" src="${escapeHtml(tab.faviconUrl)}" alt="">` : `<div class="tab-favicon" style="background: #e0e0e0"></div>`;
   const watcherSuffix = tab.attached && tab.watcher?.watcherId ? ` (${tab.watcher.watcherId})` : "";
   const actions = tab.attached ? renderAttachedTabActions(tab.tabId) : renderAttachButton(tab.tabId);
   const fullTitle = (tab.title || "Untitled") + watcherSuffix;
@@ -329,8 +453,8 @@ function renderTabItem(tab, showTargets) {
     <div class="tab-item ${tab.attached ? "attached" : ""}" data-tab-id="${tab.tabId}">
       ${favicon}
       <div class="tab-info">
-        <div class="tab-title" title="${escapeHtml2(fullTitle)}">${escapeHtml2(fullTitle)}</div>
-        <div class="tab-url" title="${escapeHtml2(tab.url)}">${escapeHtml2(tab.url)}</div>
+        <div class="tab-title" title="${escapeHtml(fullTitle)}">${escapeHtml(fullTitle)}</div>
+        <div class="tab-url" title="${escapeHtml(tab.url)}">${escapeHtml(tab.url)}</div>
       </div>
       ${actions}
     </div>
@@ -345,20 +469,27 @@ function renderTabGroup(section, content, tabs, showTargets) {
   }
   section.classList.remove("hidden");
   content.innerHTML = `<div class="tab-list">${tabs.map((tab) => renderTabItem(tab, showTargets)).join("")}</div>`;
-  bindTabInteractions(content);
 }
-function bindTabInteractions(root) {
-  root.querySelectorAll(".tab-action").forEach((button) => {
-    button.addEventListener("click", handleTabAction);
-  });
-  root.querySelectorAll('[data-action="select-target"]').forEach((button) => {
-    button.addEventListener("click", handleTargetSelection);
-  });
-  root.querySelectorAll('[data-action="hide-target"], [data-action="show-target"]').forEach((button) => {
-    button.addEventListener("click", handleTargetVisibility);
-  });
-  root.querySelectorAll(".tab-item").forEach((item) => {
-    item.addEventListener("click", handleTabItemClick);
+function bindTabContainer(container) {
+  container.addEventListener("click", (event) => {
+    const actionButton = event.target.closest(".tab-action, [data-action]");
+    if (actionButton?.classList.contains("tab-action")) {
+      void handleTabAction(actionButton);
+      return;
+    }
+    if (actionButton?.dataset.action === "select-target") {
+      void handleTargetSelection(actionButton);
+      return;
+    }
+    if (actionButton?.dataset.action === "hide-target" || actionButton?.dataset.action === "show-target") {
+      event.stopPropagation();
+      void handleTargetVisibility(actionButton);
+      return;
+    }
+    const tabItem = event.target.closest(".tab-item");
+    if (tabItem) {
+      void handleTabItemClick(tabItem);
+    }
   });
 }
 function renderAttachedTabActions(tabId) {
@@ -370,167 +501,151 @@ function renderAttachedTabActions(tabId) {
 	`;
 }
 function renderAttachButton(tabId) {
-  return `<button class="tab-action attach" data-tab-id="${tabId}" data-action="attach" type="button">Attach</button>`;
+  const pending = getTabFeedback(tabId, "attach");
+  const disabled = pending ? " disabled" : "";
+  return `<button class="tab-action attach" data-tab-id="${tabId}" data-action="attach" type="button"${disabled}>${escapeHtml(pending?.label ?? "Attach")}</button>`;
 }
 function renderIconActionButton(tabId, action, variant, label, icon) {
+  const pending = getTabFeedback(tabId, action);
   return `
 		<button
 			class="tab-action icon-only ${variant}"
 			data-tab-id="${tabId}"
 			data-action="${action}"
 			type="button"
-			title="${label}"
-			aria-label="${label}"
+			title="${escapeHtml(pending?.label ?? label)}"
+			aria-label="${escapeHtml(pending?.label ?? label)}"
+			${pending ? "disabled" : ""}
 		>
-			<span class="tab-action-icon" aria-hidden="true">${icon}</span>
+			<span class="tab-action-icon" aria-hidden="true">${pending?.icon ?? icon}</span>
 		</button>
 	`;
 }
-async function handleTabItemClick(event) {
-  const target = event.target;
-  if (target.closest(".tab-action")) {
-    return;
-  }
-  const tabItem = event.currentTarget;
+async function handleTabItemClick(tabItem) {
   const tabId = getTabId(tabItem);
   const action = getTabItemAction(tabItem);
-  tabItem.style.opacity = "0.6";
-  tabItem.style.pointerEvents = "none";
+  setTabFeedback(tabId, "attach", action === "attach" ? "Attaching..." : "Focusing...", Infinity);
+  await renderFromLatestState();
   try {
-    await runPopupAction(action, { tabId });
+    await runTabAction(action, tabId);
+    clearTabFeedback(tabId, "attach");
     if (action === "attach") {
       await refreshTabs(true);
+    } else {
+      await renderFromLatestState();
     }
   } catch (error) {
+    clearTabFeedback(tabId, "attach");
     showError(error instanceof Error ? error.message : `${capitalize(action)} failed`);
-    tabItem.style.opacity = "1";
-    tabItem.style.pointerEvents = "auto";
+    await renderFromLatestState();
   }
 }
 function getTabItemAction(tabItem) {
   return tabItem.classList.contains("attached") ? "focusTab" : "attach";
 }
-async function handleTabAction(event) {
-  const button = event.target.closest(".tab-action");
-  if (!button) {
-    return;
-  }
+async function handleTabAction(button) {
   const tabId = getTabId(button);
   const action = button.dataset.action;
   if (action === "copy-info") {
     try {
-      await copyWatcherInfo(tabId, button);
+      await copyWatcherInfo(tabId);
     } catch (error) {
       showError(error instanceof Error ? error.message : "Copy failed");
     }
     return;
   }
-  const restoreButton = setBusyButtonState(button, action);
+  setTabFeedback(tabId, action, action === "attach" ? "Attaching..." : "Detaching...", Infinity);
+  await renderFromLatestState();
   try {
-    await runPopupAction(action, { tabId });
+    await runTabAction(action, tabId);
+    clearTabFeedback(tabId, action);
     await refreshTabs(true);
   } catch (error) {
+    clearTabFeedback(tabId, action);
     showError(error instanceof Error ? error.message : `${capitalize(action)} failed`);
-    restoreButton();
+    await renderFromLatestState();
   }
 }
-async function handleTargetSelection(event) {
-  const button = event.currentTarget;
+async function handleTargetSelection(button) {
   const tabId = getTabId(button);
   const frameId = button.dataset.frameId || null;
   button.disabled = true;
   try {
-    await runPopupAction("selectTarget", { tabId, frameId });
+    await runTargetAction("selectTarget", tabId, frameId);
     await refreshTabs(true);
   } catch (error) {
     showError(error instanceof Error ? error.message : "Target selection failed");
     button.disabled = false;
   }
 }
-async function handleTargetVisibility(event) {
-  event.stopPropagation();
-  const button = event.currentTarget;
+async function handleTargetVisibility(button) {
   const tabId = getTabId(button);
   const frameId = button.dataset.frameId || null;
   const action = button.dataset.action === "show-target" ? "showTarget" : "hideTarget";
   button.disabled = true;
   try {
-    await runPopupAction(action, { tabId, frameId });
+    await runTargetAction(action, tabId, frameId);
     await refreshTabs(true);
   } catch (error) {
     showError(error instanceof Error ? error.message : action === "hideTarget" ? "Target hide failed" : "Target restore failed");
     button.disabled = false;
   }
 }
-async function runPopupAction(action, args) {
-  const response = await sendMessage({ action, ...args });
-  if (!response.success) {
-    throw new Error(response.error ?? `${capitalize(action)} failed`);
-  }
+async function runTabAction(action, tabId) {
+  await runPopupMessage({ action, tabId });
+  showError(null);
+}
+async function runTargetAction(action, tabId, frameId) {
+  await runPopupMessage({ action, tabId, frameId });
   showError(null);
 }
 async function refreshTabs(forceRender = false) {
   try {
     const [statusResponse, tabsResponse, activeTab] = await Promise.all([
-      sendMessage({ action: "getStatus" }),
-      sendMessage({ action: "getTargets" }),
+      sendPopupMessage({ action: "getStatus" }),
+      sendPopupMessage({ action: "getTargets" }),
       getCurrentTab()
     ]);
     if (!statusResponse.success) {
-      throw new Error(statusResponse.error ?? "Failed to load bridge status");
+      throw new Error(statusResponse.error);
     }
     const status = statusResponse.status;
-    latestWatchers = status?.watchers ?? [];
-    latestCurrentWatcher = selectCurrentWatcher(status ?? null, tabsResponse.tabs ?? [], activeTab?.id);
+    const tabs = tabsResponse.success ? tabsResponse.tabs : null;
+    const tabsError = tabsResponse.success ? null : tabsResponse.error;
+    latestWatchers = status.watchers;
+    latestCurrentWatcher = selectCurrentWatcher(status, tabs ?? [], activeTab?.id);
     const stateHash = JSON.stringify({
       status,
-      tabs: tabsResponse.tabs,
+      tabs,
       currentTabId: activeTab?.id,
-      error: currentError ?? tabsResponse.error ?? null
+      error: currentError ?? tabsError
     });
-    if (!forceRender && stateHash === prevStateHash) {
+    if (!forceRender && stateHash === prevStateHash && !hasPendingTabFeedback()) {
       return;
     }
     prevStateHash = stateHash;
-    updateStatus(status?.bridgeConnected ?? false, status?.attachedTabs.length ?? 0);
-    updateHealth(status, latestCurrentWatcher);
-    if (tabsResponse.success && tabsResponse.tabs) {
-      renderTabs(tabsResponse.tabs, activeTab?.id);
+    updateStatus(status.bridgeConnected, status.attachedTabs.length);
+    updateHealth(status, latestCurrentWatcher, { copyAll: copyAllButton, detachAll: detachAllButton }, latestWatchers.length > 0);
+    if (tabs) {
+      latestTabs = tabs;
+      latestActiveTabId = activeTab?.id;
+      renderTabs(tabs, activeTab?.id);
       showError(currentError);
       return;
     }
-    showError(tabsResponse.error ?? "Failed to load tabs");
-    setEmptyState("\u26A0\uFE0F", tabsResponse.error ?? "Failed to load tabs");
+    showError(tabsError ?? "Failed to load tabs");
+    setEmptyState("\u26A0\uFE0F", tabsError ?? "Failed to load tabs");
   } catch (error) {
     const message = error instanceof Error ? error.message : "Failed to refresh popup";
     showError(message);
     updateStatus(false, 0);
     latestWatchers = [];
     latestCurrentWatcher = null;
-    updateHealth(void 0, null);
+    updateHealth(void 0, null, { copyAll: copyAllButton, detachAll: detachAllButton }, false);
     setEmptyState("\u26A0\uFE0F", message);
   }
 }
-function formatRelativeTimestamp(timestamp) {
-  if (!timestamp) {
-    return "-";
-  }
-  const elapsedMs = Math.max(0, Date.now() - timestamp);
-  if (elapsedMs < 1e3) {
-    return "Just now";
-  }
-  const elapsedSeconds = Math.floor(elapsedMs / 1e3);
-  if (elapsedSeconds < 60) {
-    return `${elapsedSeconds}s ago`;
-  }
-  const elapsedMinutes = Math.floor(elapsedSeconds / 60);
-  if (elapsedMinutes < 60) {
-    return `${elapsedMinutes}m ago`;
-  }
-  const elapsedHours = Math.floor(elapsedMinutes / 60);
-  return `${elapsedHours}h ago`;
-}
-async function copyWatcherInfo(tabId, button) {
+async function copyWatcherInfo(tabId) {
   const watcher = findWatcherByTabId(latestWatchers, tabId);
   const text = buildWatcherInfoText(watcher);
   if (!text) {
@@ -538,7 +653,8 @@ async function copyWatcherInfo(tabId, button) {
   }
   await copyTextToClipboard(text);
   showError(null);
-  restoreButtonFeedback(button, "Copied!", 1500, CHECK_ICON);
+  setTabFeedback(tabId, "copy-info", "Copied!", 1500, CHECK_ICON);
+  await renderFromLatestState();
 }
 async function copyAllWatchersInfo() {
   const text = buildAllWatchersInfoText(latestWatchers);
@@ -549,30 +665,6 @@ async function copyAllWatchersInfo() {
   showError(null);
   restoreButtonFeedback(copyAllButton, "Copied!");
 }
-async function copyTextToClipboard(text) {
-  try {
-    await navigator.clipboard.writeText(text);
-    return;
-  } catch {
-  }
-  const textarea = document.createElement("textarea");
-  textarea.value = text;
-  textarea.setAttribute("readonly", "true");
-  textarea.style.position = "fixed";
-  textarea.style.opacity = "0";
-  textarea.style.pointerEvents = "none";
-  document.body.appendChild(textarea);
-  textarea.select();
-  textarea.setSelectionRange(0, textarea.value.length);
-  try {
-    const copied = document.execCommand("copy");
-    if (!copied) {
-      throw new Error("Browser denied clipboard write");
-    }
-  } finally {
-    textarea.remove();
-  }
-}
 async function detachAllWatchers() {
   if (latestWatchers.length === 0) {
     return;
@@ -592,24 +684,13 @@ async function detachWatchers(tabIds) {
   const failures = [];
   for (const tabId of tabIds) {
     try {
-      await runPopupAction("detach", { tabId });
+      await runTabAction("detach", tabId);
     } catch {
       failures.push(tabId);
     }
   }
   return failures;
 }
-function setBusyButtonState(button, action) {
-  const previousMarkup = button.innerHTML;
-  const restoreFeedback = setButtonFeedback(button, action === "attach" ? "Attaching..." : "Detaching...");
-  if (action === "attach") {
-    button.textContent = "Attaching...";
-  }
-  return () => {
-    button.innerHTML = previousMarkup;
-    restoreFeedback();
-  };
-}
 function restoreButtonFeedback(button, label, timeoutMs = 1500, iconMarkup) {
   const restore = setButtonFeedback(button, label, iconMarkup);
   setTimeout(restore, timeoutMs);
@@ -635,31 +716,6 @@ function setButtonFeedback(button, label, iconMarkup) {
     setButtonIconMarkup(button, previousIcon);
   };
 }
-function buildWatcherInfoText(watcher) {
-  if (!canCopyWatcherInfo(watcher)) {
-    return null;
-  }
-  const readyWatcher = watcher;
-  const target = readyWatcher.currentTarget;
-  const attached = target.attachedAt ? new Date(target.attachedAt).toISOString() : (/* @__PURE__ */ new Date()).toISOString();
-  const fields = [
-    ["ID", readyWatcher.watcherId],
-    ["Host", `${readyWatcher.watcherHost}:${readyWatcher.watcherPort}`],
-    ["PID", String(readyWatcher.nativeHostPid)],
-    ["Target", target.title || "(no title)"],
-    ["URL", target.url || "(no url)"],
-    ["Attached", attached]
-  ];
-  return `Argus Watcher Info
-${fields.map(([label, value]) => `${label}: ${value}`).join("\n")}`;
-}
-function buildAllWatchersInfoText(watchers) {
-  const watcherInfo = watchers.map((watcher) => buildWatcherInfoText(watcher)).filter((text) => Boolean(text));
-  if (watcherInfo.length === 0) {
-    return null;
-  }
-  return watcherInfo.join("\n\n");
-}
 function buildDetachAllError(failureCount) {
   return failureCount === 1 ? "Failed to detach 1 watcher" : `Failed to detach ${failureCount} watchers`;
 }
@@ -687,12 +743,6 @@ function selectCurrentWatcher(status, tabs, activeTabId) {
   }
   return status.watchers[0] ?? null;
 }
-function canCopyWatcherInfo(watcher) {
-  return Boolean(watcher?.watcherId && watcher?.watcherHost && watcher?.watcherPort != null && watcher?.nativeHostPid && watcher?.currentTarget);
-}
-function findWatcherByTabId(watchers, tabId) {
-  return watchers.find((watcher) => watcher.tabId === tabId) ?? null;
-}
 function getTabId(element) {
   return parseInt(element.dataset.tabId ?? "0", 10);
 }
@@ -714,11 +764,6 @@ function setButtonIconMarkup(button, iconMarkup) {
     iconNode.innerHTML = iconMarkup;
   }
 }
-function escapeHtml2(text) {
-  const div = document.createElement("div");
-  div.textContent = text;
-  return div.innerHTML;
-}
 async function getCurrentTab() {
   const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
   return tabs[0];