@deadragdoll/tellymcp 0.0.13 → 0.0.15

package/packages/chrome-attach-extension/dist/background.js

@@ -15,18 +15,38 @@ const POPUP_COMMAND_RESULT_KEY = "attach_popup_command_result";
 const CONTROL_PANEL_PORT_NAME = "telly-control-panel";
 const RECONNECT_DELAY_MS = 3000;
 const HEARTBEAT_INTERVAL_MS = 15000;
+const KEEPALIVE_ALARM_NAME = "telly-keepalive";
+const KEEPALIVE_ALARM_PERIOD_MINUTES = 0.5;
 const MAX_CAPTURE_BYTES = 512 * 1024;
+const MAX_BUFFERED_LOG_ENTRIES = 200;
 
 let socket = null;
 let reconnectTimer = null;
 let heartbeatTimer = null;
 let instanceId = null;
+let attachedTabId = null;
 let manualDisconnect = false;
 const pendingManualRecordingRequests = new Map();
 const controlPanelPorts = new Set();
 
 const activeRecordingsById = new Map();
 const activeRecordingIdByTabId = new Map();
+const consoleMessagesByTabId = new Map();
+const pageErrorsByTabId = new Map();
+const networkFailuresByTabId = new Map();
+
+function padNumber(value, length = 2) {
+  return String(value).padStart(length, "0");
+}
+
+function formatLocalTimestamp(date = new Date()) {
+  return `${date.getFullYear()}-${padNumber(date.getMonth() + 1)}-${padNumber(date.getDate())}T${padNumber(
+    date.getHours(),
+  )}:${padNumber(date.getMinutes())}:${padNumber(date.getSeconds())}.${padNumber(
+    date.getMilliseconds(),
+    3,
+  )}`;
+}
 
 function storageGet(defaults) {
   return new Promise((resolve, reject) => {
@@ -106,6 +126,19 @@ function windowsUpdate(windowId, updateInfo) {
   });
 }
 
+function tabsRemove(tabId) {
+  return new Promise((resolve, reject) => {
+    browser.tabs.remove(tabId, () => {
+      const error = browser.runtime?.lastError;
+      if (error) {
+        reject(new Error(error.message));
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
 function cookiesGetAll(details) {
   return new Promise((resolve, reject) => {
     browser.cookies.getAll(details, (cookies) => {
@@ -225,6 +258,10 @@ async function setLocalInstanceId(value) {
 }
 
 async function setAttachedTab(tab) {
+  attachedTabId =
+    tab && Number.isInteger(tab.tab_id)
+      ? Number(tab.tab_id)
+      : null;
   await storageSet({
     [ATTACHED_TAB_KEY]: tab,
   });
@@ -236,6 +273,15 @@ async function setRecordingStatus(status) {
   });
 }
 
+async function hydrateAttachedTabSelection() {
+  const stored = await storageGet({ [ATTACHED_TAB_KEY]: null });
+  const tab = stored[ATTACHED_TAB_KEY];
+  attachedTabId =
+    tab && Number.isInteger(tab.tab_id)
+      ? Number(tab.tab_id)
+      : null;
+}
+
 function buildWebSocketUrl(settings) {
   return `ws://${settings.host}:${settings.port}/browser-attach/ws`;
 }
@@ -290,144 +336,421 @@ async function ensureTabIsActive(tabId) {
   return await tabsGet(tabId);
 }
 
-function buildTabActionCode(action, payload) {
-  const serializedAction = JSON.stringify(action);
-  const serializedPayload = JSON.stringify(payload || {});
-
-  return `(() => {
-    const action = ${serializedAction};
-    const payload = ${serializedPayload};
-    const normalize = (value) => typeof value === "string" ? value.trim() : "";
-    const byText = (text, exact) => {
-      const needle = normalize(text);
-      if (!needle) return null;
-      const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
-      while (walker.nextNode()) {
-        const element = walker.currentNode;
-        const textContent = normalize(element.textContent || "");
-        if (!textContent) continue;
-        if ((exact && textContent === needle) || (!exact && textContent.includes(needle))) {
-          return element;
-        }
-      }
-      return null;
-    };
-    const resolveTarget = () => {
-      const aiTag = normalize(payload.ai_tag);
-      if (aiTag) {
-        return document.querySelector('[data-drive-tag="' + aiTag.replace(/"/g, '\\"') + '"], [ai-tag="' + aiTag.replace(/"/g, '\\"') + '"]');
-      }
-      const selector = normalize(payload.selector);
-      if (selector) {
-        return document.querySelector(selector);
-      }
-      const text = normalize(payload.text);
-      if (text) {
-        return byText(text, payload.exact === true);
+function trimBufferedEntries(entries) {
+  if (entries.length <= MAX_BUFFERED_LOG_ENTRIES) {
+    return entries;
+  }
+  return entries.slice(entries.length - MAX_BUFFERED_LOG_ENTRIES);
+}
+
+function appendBufferedEntry(store, tabId, entry) {
+  if (!Number.isInteger(tabId) || tabId < 0 || !entry || typeof entry !== "object") {
+    return;
+  }
+  const existing = store.get(tabId) || [];
+  existing.push(entry);
+  store.set(tabId, trimBufferedEntries(existing));
+}
+
+function extractErrorStack(args) {
+  if (!Array.isArray(args)) {
+    return "";
+  }
+  for (const arg of args) {
+    if (!arg || typeof arg !== "object") {
+      continue;
+    }
+    if (typeof arg.stack === "string" && arg.stack.trim()) {
+      return arg.stack;
+    }
+  }
+  return "";
+}
+
+function extractConsoleLocation(event) {
+  if (!event || typeof event !== "object" || !Array.isArray(event.args)) {
+    return "";
+  }
+  for (const arg of event.args) {
+    if (!arg || typeof arg !== "object") {
+      continue;
+    }
+    if (typeof arg.filename === "string" && arg.filename.trim()) {
+      const line = Number.isFinite(arg.lineno) ? Number(arg.lineno) : 0;
+      const column = Number.isFinite(arg.colno) ? Number(arg.colno) : 0;
+      return `${arg.filename}:${line}:${column}`;
+    }
+  }
+  return "";
+}
+
+function recordPageEventForBuffers(tabId, event) {
+  if (!Number.isInteger(tabId) || tabId < 0 || !event || typeof event !== "object") {
+    return;
+  }
+  if (event.kind !== "console_event") {
+    return;
+  }
+
+  const timestamp =
+    typeof event.at === "string" && event.at.trim()
+      ? event.at
+      : formatLocalTimestamp(new Date());
+  const text = typeof event.text === "string" ? event.text : "";
+  const location = extractConsoleLocation(event);
+
+  appendBufferedEntry(consoleMessagesByTabId, tabId, {
+    type:
+      typeof event.level === "string" && event.level.trim()
+        ? event.level
+        : "log",
+    text,
+    ...(location ? { location } : {}),
+    timestamp,
+  });
+
+  if (event.level === "error" || event.level === "assert") {
+    const stack = extractErrorStack(event.args);
+    appendBufferedEntry(pageErrorsByTabId, tabId, {
+      message: text || "Console error",
+      ...(stack ? { stack } : {}),
+      timestamp,
+    });
+  }
+}
+
+function recordNetworkFailure(tabId, event) {
+  if (!Number.isInteger(tabId) || tabId < 0 || !event || typeof event !== "object") {
+    return;
+  }
+  appendBufferedEntry(networkFailuresByTabId, tabId, {
+    url: typeof event.url === "string" ? event.url : "",
+    method:
+      typeof event.method === "string" && event.method.trim()
+        ? event.method
+        : "GET",
+    ...(typeof event.status === "number" ? { status: event.status } : {}),
+    ...(typeof event.error_text === "string" ? { error_text: event.error_text } : {}),
+    ...(typeof event.resource_type === "string"
+      ? { resource_type: event.resource_type }
+      : {}),
+    timestamp:
+      typeof event.timestamp === "string" && event.timestamp.trim()
+        ? event.timestamp
+        : formatLocalTimestamp(new Date()),
+  });
+}
+
+function getBufferedLogSnapshot(tabId, limit) {
+  const normalize = (value) =>
+    Number.isInteger(value) && value > 0 ? Number(value) : undefined;
+  const sliceEntries = (entries) => {
+    const normalizedLimit = normalize(limit);
+    return normalizedLimit ? entries.slice(-normalizedLimit) : entries;
+  };
+
+  const consoleMessages = consoleMessagesByTabId.get(tabId) || [];
+  const pageErrors = pageErrorsByTabId.get(tabId) || [];
+  const networkFailures = networkFailuresByTabId.get(tabId) || [];
+
+  return {
+    console_messages: sliceEntries(consoleMessages),
+    console_total: consoleMessages.length,
+    page_errors: sliceEntries(pageErrors),
+    page_error_total: pageErrors.length,
+    network_failures: sliceEntries(networkFailures),
+    network_failure_total: networkFailures.length,
+  };
+}
+
+function clearBufferedLogs(tabId) {
+  const consoleMessages = consoleMessagesByTabId.get(tabId) || [];
+  const pageErrors = pageErrorsByTabId.get(tabId) || [];
+  const networkFailures = networkFailuresByTabId.get(tabId) || [];
+  consoleMessagesByTabId.delete(tabId);
+  pageErrorsByTabId.delete(tabId);
+  networkFailuresByTabId.delete(tabId);
+  return {
+    console_messages_cleared: consoleMessages.length,
+    page_errors_cleared: pageErrors.length,
+    network_failures_cleared: networkFailures.length,
+  };
+}
+
+async function executeTabActionInPage(action, payload) {
+  payload = payload || {};
+  const normalize = (value) => typeof value === "string" ? value.trim() : "";
+  const timeoutMs = Number.isInteger(payload.timeout_ms) ? payload.timeout_ms : 30000;
+  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+  const byText = (text, exact) => {
+    const needle = normalize(text);
+    if (!needle) return null;
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
+    while (walker.nextNode()) {
+      const element = walker.currentNode;
+      const textContent = normalize(element.textContent || "");
+      if (!textContent) continue;
+      if ((exact && textContent === needle) || (!exact && textContent.includes(needle))) {
+        return element;
       }
-      return document.body;
-    };
-    const target = resolveTarget();
-    if (action !== "screenshot" && action !== "inject_script" && !target) {
-      return { ok: false, error: "Target element was not found." };
     }
-    if (target && typeof target.scrollIntoView === "function") {
-      target.scrollIntoView({ block: "center", inline: "center" });
+    return null;
+  };
+  const isVisible = (element) => {
+    if (!element) return false;
+    const computed = window.getComputedStyle(element);
+    return computed.display !== "none" && computed.visibility !== "hidden" && computed.opacity !== "0";
+  };
+  const resolveTarget = () => {
+    const aiTag = normalize(payload.ai_tag);
+    if (aiTag) {
+      return document.querySelector('[data-drive-tag="' + aiTag.replace(/"/g, '\\"') + '"], [ai-tag="' + aiTag.replace(/"/g, '\\"') + '"]');
     }
-    const toVisible = (element) => {
-      const computed = window.getComputedStyle(element);
-      return computed.display !== "none" && computed.visibility !== "hidden" && computed.opacity !== "0";
-    };
-    if (action === "dom") {
-      const attributes = target
-        ? Object.fromEntries(Array.from(target.attributes || []).map((attr) => [attr.name, attr.value]))
-        : {};
-      return {
-        ok: true,
-        result: {
-          found: Boolean(target),
-          outer_html: payload.include_html === false ? undefined : target.outerHTML,
-          text_content: payload.include_text === false ? undefined : (target.textContent || "").trim(),
-          visible: target ? toVisible(target) : false,
-          attributes,
-          url: location.href,
-          title: document.title,
-        },
-      };
+    const selector = normalize(payload.selector);
+    if (selector) {
+      return document.querySelector(selector);
     }
-    if (action === "click") {
-      target.click();
-      return {
-        ok: true,
-        result: {
-          url: location.href,
-          title: document.title,
-        },
-      };
+    const text = normalize(payload.text);
+    if (text) {
+      return byText(text, payload.exact === true);
     }
-    if (action === "fill") {
-      target.focus();
-      target.value = payload.value || "";
-      target.dispatchEvent(new Event("input", { bubbles: true }));
-      target.dispatchEvent(new Event("change", { bubbles: true }));
+    return document.body;
+  };
+  const target = resolveTarget();
+  if (!target) {
+    return { ok: false, error: "Target element was not found." };
+  }
+  if (target && typeof target.scrollIntoView === "function") {
+    target.scrollIntoView({ block: "center", inline: "center" });
+  }
+  if (action === "dom") {
+    const attributes = target
+      ? Object.fromEntries(Array.from(target.attributes || []).map((attr) => [attr.name, attr.value]))
+      : {};
+    return {
+      ok: true,
+      result: {
+        found: Boolean(target),
+        outer_html: payload.include_html === false ? undefined : target.outerHTML,
+        text_content: payload.include_text === false ? undefined : (target.textContent || "").trim(),
+        visible: target ? isVisible(target) : false,
+        attributes,
+        url: location.href,
+        title: document.title,
+      },
+    };
+  }
+  if (action === "computed_style") {
+    if (!target) {
       return {
         ok: true,
         result: {
+          found: false,
           url: location.href,
           title: document.title,
         },
       };
     }
-    if (action === "inject_script") {
-      const namespace = normalize(payload.namespace) || "TELLY";
-      const source = String(payload.source || "");
-      if (!source) {
-        return { ok: false, error: "Script source is required." };
-      }
-      const wrapped = "const __tellyNamespace=" + JSON.stringify(namespace)
-        + ";window[__tellyNamespace]=window[__tellyNamespace]||{};var TELLY=window[__tellyNamespace];const __tellyBeforeKeys=new Set(Object.getOwnPropertyNames(window));\\n"
-        + source
-        + "\\nfor(const __tellyKey of Object.getOwnPropertyNames(window)){if(__tellyBeforeKeys.has(__tellyKey)){continue;}if(__tellyKey===__tellyNamespace){continue;}try{window[__tellyNamespace][__tellyKey]=window[__tellyKey];}catch{}}";
-      const script = document.createElement("script");
-      script.textContent = wrapped;
-      (document.documentElement || document.head || document.body).appendChild(script);
-      script.remove();
-      return {
-        ok: true,
-        result: {
-          namespace,
-          bytes: source.length,
-          url: location.href,
-          title: document.title,
+    const requestedProperties = Array.isArray(payload.properties) && payload.properties.length
+      ? payload.properties.map((item) => String(item))
+      : ["display","position","visibility","opacity","color","background-color","font-size","z-index","overflow"];
+    const computed = window.getComputedStyle(target);
+    const rect = target.getBoundingClientRect();
+    const styles = Object.fromEntries(
+      requestedProperties.map((property) => [property, computed.getPropertyValue(property)]),
+    );
+    return {
+      ok: true,
+      result: {
+        found: true,
+        visible: isVisible(target),
+        styles,
+        box: {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
         },
-      };
+        url: location.href,
+        title: document.title,
+      },
+    };
+  }
+  if (action === "click") {
+    target.click();
+    return {
+      ok: true,
+      result: {
+        url: location.href,
+        title: document.title,
+      },
+    };
+  }
+  if (action === "wait_for") {
+    const waitState = normalize(payload.state) || "visible";
+    const startedAt = Date.now();
+    while (Date.now() - startedAt <= timeoutMs) {
+      const current = resolveTarget();
+      const visible = current ? isVisible(current) : false;
+      if (
+        (waitState === "attached" && current) ||
+        (waitState === "detached" && !current) ||
+        (waitState === "visible" && current && visible) ||
+        (waitState === "hidden" && (!current || !visible))
+      ) {
+        return {
+          ok: true,
+          result: {
+            url: location.href,
+            title: document.title,
+          },
+        };
+      }
+      await sleep(100);
     }
-    if (action === "press") {
-      const key = String(payload.key || "");
-      if (target && typeof target.focus === "function") {
-        target.focus();
+    return {
+      ok: false,
+      error: "Timed out waiting for the requested element state.",
+    };
+  }
+  if (action === "wait_for_url") {
+    const exactUrl = normalize(payload.url);
+    const containsUrl = normalize(payload.url_contains);
+    const startedAt = Date.now();
+    while (Date.now() - startedAt <= timeoutMs) {
+      const currentUrl = String(location.href || "");
+      if ((exactUrl && currentUrl === exactUrl) || (containsUrl && currentUrl.includes(containsUrl))) {
+        return {
+          ok: true,
+          result: {
+            url: currentUrl,
+            title: document.title,
+          },
+        };
       }
-      const eventInit = { key, bubbles: true, cancelable: true };
-      const keyboardTarget = document.activeElement || target || document.body;
-      keyboardTarget.dispatchEvent(new KeyboardEvent("keydown", eventInit));
-      keyboardTarget.dispatchEvent(new KeyboardEvent("keypress", eventInit));
-      keyboardTarget.dispatchEvent(new KeyboardEvent("keyup", eventInit));
-      return {
-        ok: true,
-        result: {
-          url: location.href,
-          title: document.title,
-        },
-      };
+      await sleep(100);
+    }
+    return {
+      ok: false,
+      error: "Timed out waiting for the requested URL.",
+    };
+  }
+  if (action === "reload") {
+    location.reload();
+    return {
+      ok: true,
+      result: {
+        url: location.href,
+        title: document.title,
+      },
+    };
+  }
+  if (action === "fill") {
+    target.focus();
+    target.value = payload.value || "";
+    target.dispatchEvent(new Event("input", { bubbles: true }));
+    target.dispatchEvent(new Event("change", { bubbles: true }));
+    return {
+      ok: true,
+      result: {
+        url: location.href,
+        title: document.title,
+      },
+    };
+  }
+  if (action === "press") {
+    const key = String(payload.key || "");
+    if (target && typeof target.focus === "function") {
+      target.focus();
     }
-    return { ok: false, error: "Unsupported tab action." };
-  })();`;
+    const eventInit = { key, bubbles: true, cancelable: true };
+    const keyboardTarget = document.activeElement || target || document.body;
+    keyboardTarget.dispatchEvent(new KeyboardEvent("keydown", eventInit));
+    keyboardTarget.dispatchEvent(new KeyboardEvent("keypress", eventInit));
+    keyboardTarget.dispatchEvent(new KeyboardEvent("keyup", eventInit));
+    return {
+      ok: true,
+      result: {
+        url: location.href,
+        title: document.title,
+      },
+    };
+  }
+  return { ok: false, error: "Unsupported tab action." };
 }
 
 async function runTabAction(tabId, action, payload) {
   const activeTab = await ensureTabIsActive(tabId);
 
+  if (action === "attach") {
+    const record = {
+      tab_id: activeTab.id,
+      window_id: activeTab.windowId,
+      active: activeTab.active === true,
+      title: activeTab.title || "",
+      url: activeTab.url || "",
+      status: activeTab.status || "",
+    };
+    await setAttachedTab(record);
+    try {
+      await injectRecorderContent(tabId);
+    } catch {
+      // ignore
+    }
+    return {
+      ok: true,
+      result: {
+        url: record.url,
+        title: record.title,
+      },
+    };
+  }
+
+  if (action === "detach") {
+    await setAttachedTab(null);
+    return {
+      ok: true,
+      result: {
+        url: activeTab.url || "",
+        title: activeTab.title || "",
+      },
+    };
+  }
+
+  if (action === "close") {
+    if (attachedTabId === tabId) {
+      await setAttachedTab(null);
+    }
+    await tabsRemove(tabId);
+    return {
+      ok: true,
+      result: {
+        url: activeTab.url || "",
+        title: activeTab.title || "",
+      },
+    };
+  }
+
+  if (action === "get_logs") {
+    return {
+      ok: true,
+      result: getBufferedLogSnapshot(
+        tabId,
+        Number.isInteger(payload?.limit) ? Number(payload.limit) : undefined,
+      ),
+    };
+  }
+
+  if (action === "clear_logs") {
+    return {
+      ok: true,
+      result: clearBufferedLogs(tabId),
+    };
+  }
+
   if (action === "screenshot") {
+    await new Promise((resolve) => setTimeout(resolve, 180));
+    const refreshedTab = await tabsGet(tabId).catch(() => activeTab);
     const dataUrl = await captureVisibleTab(activeTab.windowId, {
       format: "png",
     });
@@ -435,8 +758,8 @@ async function runTabAction(tabId, action, payload) {
       ok: true,
       result: {
         png_base64: String(dataUrl).replace(/^data:image\/png;base64,/, ""),
-        url: activeTab.url || "",
-        title: activeTab.title || "",
+        url: refreshedTab.url || "",
+        title: refreshedTab.title || "",
       },
     };
   }
@@ -474,7 +797,8 @@ async function runTabAction(tabId, action, payload) {
 
   const execution = await scriptingExecuteScript({
     target: { tabId },
-    func: new Function(`return ${buildTabActionCode(action, payload)}`),
+    func: executeTabActionInPage,
+    args: [action, payload || {}],
   });
   const result = execution[0]?.result;
 
@@ -495,6 +819,14 @@ function sendJson(payload) {
   socket.send(JSON.stringify(payload));
 }
 
+function isSocketOpenOrConnecting() {
+  return Boolean(
+    socket &&
+      (socket.readyState === WebSocket.OPEN ||
+        socket.readyState === WebSocket.CONNECTING),
+  );
+}
+
 function clearTimers() {
   if (reconnectTimer) {
     clearTimeout(reconnectTimer);
@@ -534,7 +866,7 @@ function startHeartbeat() {
   heartbeatTimer = setInterval(() => {
     sendJson({
       type: "heartbeat",
-      sent_at: new Date().toISOString(),
+      sent_at: formatLocalTimestamp(new Date()),
     });
   }, HEARTBEAT_INTERVAL_MS);
 }
@@ -581,7 +913,7 @@ function sendRecordingEvent(recordingId, tabId, event) {
     tab_id: tabId,
     event: {
       ...event,
-      at: event.at || new Date().toISOString(),
+      at: event.at || formatLocalTimestamp(new Date()),
     },
   });
 }
@@ -593,19 +925,31 @@ async function injectRecorderContent(tabId) {
   });
 }
 
+function capturePageSnapshotInTab(recordingReason) {
+  const now = new Date();
+  const pad = (value, length = 2) => String(value).padStart(length, "0");
+  const timestamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(
+    now.getHours(),
+  )}:${pad(now.getMinutes())}:${pad(now.getSeconds())}.${pad(
+    now.getMilliseconds(),
+    3,
+  )}`;
+  return {
+    kind: "page_snapshot",
+    source: "background",
+    reason: recordingReason,
+    at: timestamp,
+    url: location.href,
+    title: document.title,
+    ready_state: document.readyState,
+    html: document.documentElement ? document.documentElement.outerHTML : "",
+  };
+}
+
 async function captureTabSnapshot(tabId, reason) {
   const execution = await scriptingExecuteScript({
     target: { tabId },
-    func: (recordingReason) => ({
-      kind: "page_snapshot",
-      source: "background",
-      reason: recordingReason,
-      at: new Date().toISOString(),
-      url: location.href,
-      title: document.title,
-      ready_state: document.readyState,
-      html: document.documentElement ? document.documentElement.outerHTML : ""
-    }),
+    func: capturePageSnapshotInTab,
     args: [reason],
   });
   const result = execution[0]?.result;
@@ -656,7 +1000,7 @@ async function startRecording(message) {
     tabId,
     tabTitle: browserTab.title || "",
     tabUrl: browserTab.url || "",
-    startedAt: new Date().toISOString(),
+    startedAt: formatLocalTimestamp(new Date()),
   });
   activeRecordingIdByTabId.set(tabId, message.recording_id);
 
@@ -730,6 +1074,11 @@ async function handleAttachTabSelectedCommand(tabId) {
     tab: record,
   });
   await setAttachedTab(record);
+  try {
+    await injectRecorderContent(tabId);
+  } catch {
+    // ignore recorder bootstrap errors for manual attach
+  }
 
   return {
     ok: true,
@@ -831,6 +1180,29 @@ async function sendManualRecordingRequest(type, payload = {}) {
   return result;
 }
 
+async function handleTabActionMessage(message) {
+  let result;
+  try {
+    result = await runTabAction(
+      message.tab_id,
+      message.action,
+      message.payload || {},
+    );
+  } catch (error) {
+    result = {
+      ok: false,
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+  sendJson({
+    type: "tab_action_result",
+    request_id: message.request_id,
+    ok: result.ok === true,
+    ...(result.result ? { result: result.result } : {}),
+    ...(result.error ? { error: result.error } : {}),
+  });
+}
+
 async function handleMessage(rawData) {
   const message =
     typeof rawData === "string"
@@ -865,18 +1237,7 @@ async function handleMessage(rawData) {
       return;
     }
     case "tab_action": {
-      const result = await runTabAction(
-        message.tab_id,
-        message.action,
-        message.payload || {},
-      );
-      sendJson({
-        type: "tab_action_result",
-        request_id: message.request_id,
-        ok: result.ok === true,
-        ...(result.result ? { result: result.result } : {}),
-        ...(result.error ? { error: result.error } : {}),
-      });
+      await handleTabActionMessage(message);
       return;
     }
     case "recording_start": {
@@ -933,6 +1294,9 @@ async function connect() {
     });
     return;
   }
+  if (isSocketOpenOrConnecting()) {
+    return;
+  }
   clearTimers();
   await setConnectionStatus({
     state: "connecting",
@@ -1015,7 +1379,7 @@ browser.storage.onChanged.addListener((changes, areaName) => {
           [POPUP_COMMAND_RESULT_KEY]: {
             command_id: command.command_id,
             result,
-            at: new Date().toISOString(),
+            at: formatLocalTimestamp(new Date()),
           },
         }),
       )
@@ -1027,7 +1391,7 @@ browser.storage.onChanged.addListener((changes, areaName) => {
               ok: false,
               error: error instanceof Error ? error.message : String(error),
             },
-            at: new Date().toISOString(),
+            at: formatLocalTimestamp(new Date()),
           },
         }),
       );
@@ -1095,34 +1459,41 @@ browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
   });
 
   const recording = getRecordingByTabId(tabId);
-  if (!recording) {
+  const shouldTrackTab = recording || attachedTabId === tabId;
+  if (!shouldTrackTab) {
     return;
   }
 
-  sendRecordingEvent(recording.recordingId, tabId, {
-    kind: "navigation",
-    source: "browser",
-    status: changeInfo.status || tab.status || "",
-    url: tab.url || "",
-    title: tab.title || "",
-  });
+  if (recording) {
+    sendRecordingEvent(recording.recordingId, tabId, {
+      kind: "navigation",
+      source: "browser",
+      status: changeInfo.status || tab.status || "",
+      url: tab.url || "",
+      title: tab.title || "",
+    });
+  }
 
   if (changeInfo.status === "complete") {
     try {
       await injectRecorderContent(tabId);
-      const snapshot = await captureTabSnapshot(tabId, "tab-updated-complete");
-      if (snapshot) {
-        sendRecordingEvent(recording.recordingId, tabId, snapshot);
+      if (recording) {
+        const snapshot = await captureTabSnapshot(tabId, "tab-updated-complete");
+        if (snapshot) {
+          sendRecordingEvent(recording.recordingId, tabId, snapshot);
+        }
       }
     } catch {
       // ignore
     }
-    await emitCookiesSnapshot(
-      recording.recordingId,
-      tabId,
-      tab.url || "",
-      tab.title || "",
-    );
+    if (recording) {
+      await emitCookiesSnapshot(
+        recording.recordingId,
+        tabId,
+        tab.url || "",
+        tab.title || "",
+      );
+    }
   }
 });
 
@@ -1170,9 +1541,10 @@ async function handleRuntimeMessage(message, sender) {
     if (!Number.isInteger(tabId)) {
       return undefined;
     }
+    recordPageEventForBuffers(tabId, message.event || {});
     const recording = getRecordingByTabId(tabId);
     if (!recording) {
-      return undefined;
+      return { ok: true };
     }
     sendRecordingEvent(recording.recordingId, tabId, message.event || {});
     return { ok: true };
@@ -1286,6 +1658,20 @@ browser.webRequest.onHeadersReceived.addListener(
 
 browser.webRequest.onCompleted.addListener(
   (details) => {
+    if (
+      Number.isInteger(details.tabId) &&
+      details.tabId >= 0 &&
+      typeof details.statusCode === "number" &&
+      details.statusCode >= 400
+    ) {
+      recordNetworkFailure(details.tabId, {
+        url: details.url,
+        method: details.method,
+        status: details.statusCode,
+        resource_type: details.type,
+        timestamp: formatLocalTimestamp(new Date()),
+      });
+    }
     const recording = getRecordingByTabId(details.tabId);
     if (!recording) {
       return;
@@ -1305,6 +1691,15 @@ browser.webRequest.onCompleted.addListener(
 
 browser.webRequest.onErrorOccurred.addListener(
   (details) => {
+    if (Number.isInteger(details.tabId) && details.tabId >= 0) {
+      recordNetworkFailure(details.tabId, {
+        url: details.url,
+        method: details.method,
+        error_text: details.error,
+        resource_type: details.type,
+        timestamp: formatLocalTimestamp(new Date()),
+      });
+    }
     const recording = getRecordingByTabId(details.tabId);
     if (!recording) {
       return;
@@ -1322,5 +1717,19 @@ browser.webRequest.onErrorOccurred.addListener(
   { urls: ["<all_urls>"] },
 );
 
+browser.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name !== KEEPALIVE_ALARM_NAME || manualDisconnect) {
+    return;
+  }
+  if (!isSocketOpenOrConnecting()) {
+    void connect();
+  }
+});
+
+browser.alarms.create(KEEPALIVE_ALARM_NAME, {
+  periodInMinutes: KEEPALIVE_ALARM_PERIOD_MINUTES,
+});
+
+void hydrateAttachedTabSelection();
 void computeInstanceId();
 void connect();