agent-browser-stealth 0.17.0-fork.2 → 0.24.0-fork.2

package/extensions/tab-group-cdp/sidepanel.js

@@ -0,0 +1,1225 @@
+const PANEL_GET_STATE = 'AB_PANEL_GET_STATE';
+const PANEL_CLEAN_EMPTY_GROUPS = 'AB_PANEL_CLEAN_EMPTY_GROUPS';
+const PANEL_SET_OPTIONS = 'AB_PANEL_SET_OPTIONS';
+const PANEL_SET_POLICY = 'AB_PANEL_SET_POLICY';
+const PANEL_CLOSE_OTHER_TABS = 'AB_PANEL_CLOSE_OTHER_SESSION_TABS';
+const PANEL_FOCUS_SESSION = 'AB_PANEL_FOCUS_SESSION';
+const PANEL_RUN_ACTION = 'AB_PANEL_RUN_ACTION';
+const PANEL_CLEAR_ACTIVITY = 'AB_PANEL_CLEAR_ACTIVITY';
+const PANEL_START_RECORDING = 'AB_PANEL_START_RECORDING';
+const PANEL_STOP_RECORDING = 'AB_PANEL_STOP_RECORDING';
+const PANEL_SAVE_RECORDING = 'AB_PANEL_SAVE_RECORDING';
+const PANEL_RUN_WORKFLOW = 'AB_PANEL_RUN_WORKFLOW';
+const PANEL_DELETE_WORKFLOW = 'AB_PANEL_DELETE_WORKFLOW';
+const PANEL_SET_SHORTCUT = 'AB_PANEL_SET_SHORTCUT';
+const PANEL_DELETE_SHORTCUT = 'AB_PANEL_DELETE_SHORTCUT';
+const PANEL_RUN_SHORTCUT = 'AB_PANEL_RUN_SHORTCUT';
+const PANEL_CREATE_SCHEDULE = 'AB_PANEL_CREATE_SCHEDULE';
+const PANEL_DELETE_SCHEDULE = 'AB_PANEL_DELETE_SCHEDULE';
+const PANEL_TOGGLE_SCHEDULE = 'AB_PANEL_TOGGLE_SCHEDULE';
+
+const summaryEl = document.getElementById('summary');
+const controlEl = document.getElementById('control');
+const automationEl = document.getElementById('automation');
+const developerEl = document.getElementById('developer');
+const sessionsEl = document.getElementById('sessions');
+const downloadsEl = document.getElementById('downloads');
+const statusLineEl = document.getElementById('status-line');
+const refreshBtn = document.getElementById('refresh-btn');
+const cleanupBtn = document.getElementById('cleanup-btn');
+
+const viewState = {
+  panelState: null,
+  lastDomState: null,
+};
+
+async function send(message) {
+  return chrome.runtime.sendMessage(message);
+}
+
+function normalizePanelState(rawState) {
+  const state = rawState && typeof rawState === 'object' ? rawState : {};
+
+  return {
+    extensionId: typeof state.extensionId === 'string' ? state.extensionId : 'unknown',
+    latestDomState:
+      state.latestDomState && typeof state.latestDomState === 'object' ? state.latestDomState : null,
+    options:
+      state.options && typeof state.options === 'object'
+        ? {
+            strictWindowIsolation: state.options.strictWindowIsolation !== false,
+            suppressCrossWindowActivation: state.options.suppressCrossWindowActivation !== false,
+            autoCleanEmptyGroups: state.options.autoCleanEmptyGroups !== false,
+            pageBridgeEnabled: state.options.pageBridgeEnabled === true,
+          }
+        : {
+            strictWindowIsolation: true,
+            suppressCrossWindowActivation: true,
+            autoCleanEmptyGroups: true,
+            pageBridgeEnabled: false,
+          },
+    totals:
+      state.totals && typeof state.totals === 'object'
+        ? {
+            sessions: Number.isFinite(state.totals.sessions) ? state.totals.sessions : 0,
+            tabs: Number.isFinite(state.totals.tabs) ? state.totals.tabs : 0,
+          }
+        : {
+            sessions: 0,
+            tabs: 0,
+          },
+    sessions: Array.isArray(state.sessions) ? state.sessions : [],
+    downloads: Array.isArray(state.downloads) ? state.downloads : [],
+    control:
+      state.control && typeof state.control === 'object'
+        ? {
+            activeTab:
+              state.control.activeTab && typeof state.control.activeTab === 'object'
+                ? state.control.activeTab
+                : null,
+            tabs: Array.isArray(state.control.tabs) ? state.control.tabs : [],
+          }
+        : {
+            activeTab: null,
+            tabs: [],
+          },
+    activity:
+      state.activity && typeof state.activity === 'object'
+        ? {
+            events: Array.isArray(state.activity.events) ? state.activity.events : [],
+            console: Array.isArray(state.activity.console) ? state.activity.console : [],
+            network: Array.isArray(state.activity.network) ? state.activity.network : [],
+            commandHistory: Array.isArray(state.activity.commandHistory)
+              ? state.activity.commandHistory
+              : [],
+          }
+        : {
+            events: [],
+            console: [],
+            network: [],
+            commandHistory: [],
+          },
+    automation:
+      state.automation && typeof state.automation === 'object'
+        ? {
+            recording:
+              state.automation.recording && typeof state.automation.recording === 'object'
+                ? state.automation.recording
+                : null,
+            workflows: Array.isArray(state.automation.workflows) ? state.automation.workflows : [],
+            shortcuts: Array.isArray(state.automation.shortcuts) ? state.automation.shortcuts : [],
+            schedules: Array.isArray(state.automation.schedules) ? state.automation.schedules : [],
+          }
+        : {
+            recording: null,
+            workflows: [],
+            shortcuts: [],
+            schedules: [],
+          },
+  };
+}
+
+function setStatus(text, tone = 'ok') {
+  statusLineEl.textContent = text || '';
+  statusLineEl.className = `status-line ${tone}`;
+}
+
+function escapeInline(value) {
+  return String(value || '')
+    .replace(/[\n\r\t]+/g, ' ')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .slice(0, 240);
+}
+
+function formatTime(ts) {
+  if (!ts) return '-';
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return String(ts);
+  }
+}
+
+function createTag(text) {
+  const span = document.createElement('span');
+  span.className = 'tag';
+  span.textContent = text;
+  return span;
+}
+
+function parseTimeInput(timeText) {
+  const match = String(timeText || '').trim().match(/^(\d{1,2}):(\d{2})$/);
+  if (!match) return null;
+  const hour = Number.parseInt(match[1], 10);
+  const minute = Number.parseInt(match[2], 10);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) return null;
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return null;
+  return { hour, minute };
+}
+
+async function runAction(action, args = {}, tabId) {
+  const response = await send({
+    type: PANEL_RUN_ACTION,
+    action,
+    args,
+    tabId,
+  });
+
+  if (!response || response.ok !== true) {
+    setStatus(`Action failed: ${response?.error || 'unknown error'}`, 'error');
+    return response;
+  }
+
+  if (response.state) {
+    viewState.lastDomState = response.state;
+  }
+
+  setStatus(`Action succeeded: ${action}`, 'ok');
+  return response;
+}
+
+function renderSummary(state) {
+  summaryEl.innerHTML = '';
+
+  const title = document.createElement('h3');
+  title.textContent = 'Overview';
+  summaryEl.appendChild(title);
+
+  const extensionInfo = document.createElement('div');
+  extensionInfo.className = 'caption';
+  extensionInfo.textContent = `Extension ID: ${state.extensionId}`;
+  summaryEl.appendChild(extensionInfo);
+
+  const tags = document.createElement('div');
+  tags.className = 'tags';
+  tags.appendChild(createTag(`Sessions: ${state.totals.sessions}`));
+  tags.appendChild(createTag(`Tabs: ${state.totals.tabs}`));
+  tags.appendChild(
+    createTag(`Isolation: ${state.options.strictWindowIsolation === false ? 'Off' : 'On'}`)
+  );
+  tags.appendChild(
+    createTag(`Guard: ${state.options.suppressCrossWindowActivation === false ? 'Off' : 'On'}`)
+  );
+  tags.appendChild(createTag(`PageBridge: ${state.options.pageBridgeEnabled ? 'On' : 'Off'}`));
+  tags.appendChild(createTag(`Workflows: ${state.automation.workflows.length}`));
+  tags.appendChild(createTag(`Schedules: ${state.automation.schedules.length}`));
+  summaryEl.appendChild(tags);
+
+  const actions = document.createElement('div');
+  actions.className = 'row wrap';
+
+  const isolationBtn = document.createElement('button');
+  isolationBtn.textContent = 'Toggle Isolation';
+  isolationBtn.addEventListener('click', async () => {
+    await send({
+      type: PANEL_SET_OPTIONS,
+      options: {
+        ...state.options,
+        strictWindowIsolation: state.options.strictWindowIsolation === false,
+      },
+    });
+    await refresh();
+  });
+
+  const guardBtn = document.createElement('button');
+  guardBtn.textContent = 'Toggle Guard';
+  guardBtn.addEventListener('click', async () => {
+    await send({
+      type: PANEL_SET_OPTIONS,
+      options: {
+        ...state.options,
+        suppressCrossWindowActivation: state.options.suppressCrossWindowActivation === false,
+      },
+    });
+    await refresh();
+  });
+
+  const cleanBtn = document.createElement('button');
+  cleanBtn.textContent = 'Toggle Auto-Clean';
+  cleanBtn.addEventListener('click', async () => {
+    await send({
+      type: PANEL_SET_OPTIONS,
+      options: {
+        ...state.options,
+        autoCleanEmptyGroups: state.options.autoCleanEmptyGroups === false,
+      },
+    });
+    await refresh();
+  });
+
+  actions.appendChild(isolationBtn);
+  actions.appendChild(guardBtn);
+  actions.appendChild(cleanBtn);
+  summaryEl.appendChild(actions);
+}
+
+function renderControl(state) {
+  const control = state.control || { activeTab: null, tabs: [] };
+
+  controlEl.innerHTML = `
+    <h3>Browser Control</h3>
+    <div class="row">
+      <input id="ctl-url" placeholder="Open URL (example.com)" class="mono" />
+      <button id="ctl-open" class="primary">Open</button>
+    </div>
+    <div class="row wrap">
+      <button id="ctl-back">Back</button>
+      <button id="ctl-forward">Forward</button>
+      <button id="ctl-reload">Reload</button>
+      <button id="ctl-snapshot">Snapshot</button>
+      <button id="ctl-dom">DOM State</button>
+    </div>
+    <div class="row">
+      <input id="ctl-selector" placeholder="CSS selector" class="mono" />
+      <input id="ctl-value" placeholder="Value / text" />
+    </div>
+    <div class="row wrap">
+      <button id="ctl-click">Click</button>
+      <button id="ctl-fill">Fill</button>
+      <input id="ctl-key" placeholder="Key (Enter)" style="max-width:120px" />
+      <button id="ctl-press">Press</button>
+    </div>
+    <div class="row">
+      <input id="ctl-shortcut" placeholder="Shortcut name (/login or login)" class="mono" />
+      <button id="ctl-run-shortcut">Run Shortcut</button>
+    </div>
+    <hr />
+    <div class="section-title">
+      <h4>Tabs</h4>
+      <span class="caption" id="ctl-active"></span>
+    </div>
+    <div id="ctl-tabs" class="list"></div>
+  `;
+
+  const activeTab = control.activeTab;
+  const activeText = activeTab
+    ? `Active: #${activeTab.id} ${escapeInline(activeTab.title)}`
+    : 'No active tab';
+  controlEl.querySelector('#ctl-active').textContent = activeText;
+
+  const urlInput = controlEl.querySelector('#ctl-url');
+  const selectorInput = controlEl.querySelector('#ctl-selector');
+  const valueInput = controlEl.querySelector('#ctl-value');
+  const keyInput = controlEl.querySelector('#ctl-key');
+  const shortcutInput = controlEl.querySelector('#ctl-shortcut');
+
+  controlEl.querySelector('#ctl-open').addEventListener('click', async () => {
+    const url = urlInput.value.trim();
+    if (!url) {
+      setStatus('Please enter a URL', 'warn');
+      return;
+    }
+    await runAction('open', { url }, activeTab?.id);
+    await refresh();
+  });
+
+  controlEl.querySelector('#ctl-back').addEventListener('click', async () => {
+    await runAction('back', {}, activeTab?.id);
+    await refresh();
+  });
+
+  controlEl.querySelector('#ctl-forward').addEventListener('click', async () => {
+    await runAction('forward', {}, activeTab?.id);
+    await refresh();
+  });
+
+  controlEl.querySelector('#ctl-reload').addEventListener('click', async () => {
+    await runAction('reload', {}, activeTab?.id);
+    await refresh();
+  });
+
+  controlEl.querySelector('#ctl-snapshot').addEventListener('click', async () => {
+    const selector = selectorInput.value.trim();
+    const response = await runAction(
+      'snapshot',
+      {
+        selector: selector || undefined,
+        interactiveOnly: true,
+        maxNodes: 80,
+      },
+      activeTab?.id
+    );
+    if (response?.state) {
+      viewState.lastDomState = response.state;
+      renderDeveloper(state);
+    }
+  });
+
+  controlEl.querySelector('#ctl-dom').addEventListener('click', async () => {
+    const selector = selectorInput.value.trim();
+    const response = await runAction(
+      'dom-state',
+      {
+        selector: selector || undefined,
+        interactiveOnly: false,
+        maxNodes: 100,
+      },
+      activeTab?.id
+    );
+    if (response?.state) {
+      viewState.lastDomState = response.state;
+      renderDeveloper(state);
+    }
+  });
+
+  controlEl.querySelector('#ctl-click').addEventListener('click', async () => {
+    const selector = selectorInput.value.trim();
+    if (!selector) {
+      setStatus('Selector is required for click', 'warn');
+      return;
+    }
+    await runAction('click', { selector }, activeTab?.id);
+    await refresh();
+  });
+
+  controlEl.querySelector('#ctl-fill').addEventListener('click', async () => {
+    const selector = selectorInput.value.trim();
+    if (!selector) {
+      setStatus('Selector is required for fill', 'warn');
+      return;
+    }
+    await runAction(
+      'fill',
+      {
+        selector,
+        value: valueInput.value,
+      },
+      activeTab?.id
+    );
+    await refresh();
+  });
+
+  controlEl.querySelector('#ctl-press').addEventListener('click', async () => {
+    await runAction(
+      'press',
+      {
+        selector: selectorInput.value.trim() || undefined,
+        key: keyInput.value.trim() || 'Enter',
+      },
+      activeTab?.id
+    );
+    await refresh();
+  });
+
+  controlEl.querySelector('#ctl-run-shortcut').addEventListener('click', async () => {
+    const raw = shortcutInput.value.trim();
+    if (!raw) {
+      setStatus('Shortcut name is required', 'warn');
+      return;
+    }
+
+    const name = raw.startsWith('/') ? raw.slice(1) : raw;
+    const response = await send({
+      type: PANEL_RUN_SHORTCUT,
+      name,
+      tabId: activeTab?.id,
+    });
+
+    if (!response || response.ok !== true) {
+      setStatus(`Shortcut failed: ${response?.error || 'unknown error'}`, 'error');
+      return;
+    }
+
+    setStatus(`Shortcut executed: /${name}`, 'ok');
+    await refresh();
+  });
+
+  const tabsEl = controlEl.querySelector('#ctl-tabs');
+  if (!Array.isArray(control.tabs) || control.tabs.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'No tabs in current window.';
+    tabsEl.appendChild(empty);
+  } else {
+    for (const tab of control.tabs.slice(0, 20)) {
+      const item = document.createElement('div');
+      item.className = 'item';
+
+      const title = document.createElement('div');
+      title.className = 'item-title';
+      title.textContent = `#${tab.id} [${tab.index}] ${escapeInline(tab.title)}`;
+
+      const url = document.createElement('div');
+      url.className = 'item-url';
+      url.textContent = tab.url || 'about:blank';
+
+      const row = document.createElement('div');
+      row.className = 'row wrap';
+
+      const switchBtn = document.createElement('button');
+      switchBtn.textContent = tab.active ? 'Active' : 'Switch';
+      switchBtn.disabled = tab.active === true;
+      switchBtn.addEventListener('click', async () => {
+        await runAction('tabs:switch', { tabId: tab.id });
+        await refresh();
+      });
+
+      const closeBtn = document.createElement('button');
+      closeBtn.className = 'danger';
+      closeBtn.textContent = 'Close';
+      closeBtn.addEventListener('click', async () => {
+        await runAction('tabs:close', {}, tab.id);
+        await refresh();
+      });
+
+      row.appendChild(switchBtn);
+      row.appendChild(closeBtn);
+
+      if (tab.session) {
+        const pill = document.createElement('span');
+        pill.className = 'event-pill';
+        pill.textContent = `session:${tab.session}`;
+        row.appendChild(pill);
+      }
+
+      item.appendChild(title);
+      item.appendChild(url);
+      item.appendChild(row);
+      tabsEl.appendChild(item);
+    }
+  }
+}
+
+function renderSessions(state) {
+  sessionsEl.innerHTML = '';
+
+  const heading = document.createElement('h3');
+  heading.textContent = 'Managed Sessions';
+  sessionsEl.appendChild(heading);
+
+  if (!state.sessions || state.sessions.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'card empty';
+    empty.textContent = 'No active managed sessions found.';
+    sessionsEl.appendChild(empty);
+    return;
+  }
+
+  for (const session of state.sessions) {
+    const card = document.createElement('article');
+    card.className = 'card';
+
+    const titleRow = document.createElement('div');
+    titleRow.className = 'section-title';
+
+    const title = document.createElement('h4');
+    title.textContent = session.session;
+
+    const actionRow = document.createElement('div');
+    actionRow.className = 'row wrap';
+
+    const focusBtn = document.createElement('button');
+    focusBtn.textContent = 'Focus';
+    focusBtn.addEventListener('click', async () => {
+      await send({ type: PANEL_FOCUS_SESSION, session: session.session });
+      await refresh();
+    });
+
+    const isolateBtn = document.createElement('button');
+    isolateBtn.textContent = 'Isolate';
+    isolateBtn.addEventListener('click', async () => {
+      await send({ type: PANEL_CLOSE_OTHER_TABS, session: session.session });
+      await refresh();
+    });
+
+    const policyBtn = document.createElement('button');
+    policyBtn.textContent = 'Policy';
+    policyBtn.addEventListener('click', async () => {
+      const current = (session.allowedDomains || []).join(',');
+      const input = window.prompt('Allowed domains (comma-separated)', current);
+      if (input === null) return;
+      const allowedDomains = input
+        .split(',')
+        .map((item) => item.trim().toLowerCase())
+        .filter((item) => item.length > 0);
+      await send({ type: PANEL_SET_POLICY, session: session.session, allowedDomains });
+      await refresh();
+    });
+
+    actionRow.appendChild(focusBtn);
+    actionRow.appendChild(isolateBtn);
+    actionRow.appendChild(policyBtn);
+
+    titleRow.appendChild(title);
+    titleRow.appendChild(actionRow);
+
+    const tags = document.createElement('div');
+    tags.className = 'tags';
+    tags.appendChild(createTag(`Window ${session.windowId ?? 'N/A'}`));
+    tags.appendChild(createTag(`${session.tabs.length} tabs`));
+
+    if (session.group?.title) {
+      tags.appendChild(createTag(`Group: ${session.group.title}`));
+    }
+
+    const list = document.createElement('div');
+    list.className = 'list';
+
+    for (const tab of session.tabs.slice(0, 8)) {
+      const item = document.createElement('div');
+      item.className = 'item';
+
+      const tabTitle = document.createElement('div');
+      tabTitle.className = 'item-title';
+      tabTitle.textContent = `${tab.active ? '● ' : ''}#${tab.id} ${escapeInline(tab.title || '(Untitled)')}`;
+
+      const tabUrl = document.createElement('div');
+      tabUrl.className = 'item-url';
+      tabUrl.textContent = tab.url || 'about:blank';
+
+      item.appendChild(tabTitle);
+      item.appendChild(tabUrl);
+      list.appendChild(item);
+    }
+
+    card.appendChild(titleRow);
+    card.appendChild(tags);
+    card.appendChild(list);
+    sessionsEl.appendChild(card);
+  }
+}
+
+function renderDownloads(state) {
+  downloadsEl.innerHTML = '<h3>Recent Downloads</h3>';
+
+  const list = document.createElement('div');
+  list.className = 'list';
+
+  const entries = state.downloads || [];
+  if (entries.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'No download events yet.';
+    list.appendChild(empty);
+  } else {
+    for (const entry of entries.slice(0, 10)) {
+      const item = document.createElement('div');
+      item.className = 'item';
+
+      const title = document.createElement('div');
+      title.className = 'item-title';
+      title.textContent = `#${entry.id} · ${entry.state || 'updated'}`;
+
+      const filename = document.createElement('div');
+      filename.className = 'item-url';
+      filename.textContent = entry.filename || '(no filename)';
+
+      const meta = document.createElement('div');
+      meta.className = 'caption';
+      meta.textContent = formatTime(entry.timestamp);
+
+      item.appendChild(title);
+      item.appendChild(filename);
+      item.appendChild(meta);
+      list.appendChild(item);
+    }
+  }
+
+  downloadsEl.appendChild(list);
+}
+
+async function promptAndCreateSchedule(workflowId, workflowName) {
+  const cadenceKind = (window.prompt('Cadence: daily | weekly | monthly | yearly', 'daily') || '')
+    .trim()
+    .toLowerCase();
+
+  if (!cadenceKind) return;
+  if (!['daily', 'weekly', 'monthly', 'yearly'].includes(cadenceKind)) {
+    setStatus('Invalid cadence. Use daily/weekly/monthly/yearly.', 'warn');
+    return;
+  }
+
+  const timeInput = parseTimeInput(window.prompt('Time (HH:MM, 24h)', '09:00'));
+  if (!timeInput) {
+    setStatus('Invalid time format.', 'warn');
+    return;
+  }
+
+  const cadence = {
+    kind: cadenceKind,
+    hour: timeInput.hour,
+    minute: timeInput.minute,
+  };
+
+  if (cadenceKind === 'weekly') {
+    const weekday = Number.parseInt(
+      window.prompt('Weekday (0=Sun .. 6=Sat)', String(new Date().getDay())) || '',
+      10
+    );
+    if (Number.isNaN(weekday) || weekday < 0 || weekday > 6) {
+      setStatus('Invalid weekday.', 'warn');
+      return;
+    }
+    cadence.weekdays = [weekday];
+  }
+
+  if (cadenceKind === 'monthly') {
+    const day = Number.parseInt(window.prompt('Day of month (1-31)', '1') || '', 10);
+    if (Number.isNaN(day) || day < 1 || day > 31) {
+      setStatus('Invalid day of month.', 'warn');
+      return;
+    }
+    cadence.dayOfMonth = day;
+  }
+
+  if (cadenceKind === 'yearly') {
+    const month = Number.parseInt(window.prompt('Month (1-12)', '1') || '', 10);
+    const day = Number.parseInt(window.prompt('Day of month (1-31)', '1') || '', 10);
+    if (Number.isNaN(month) || month < 1 || month > 12 || Number.isNaN(day) || day < 1 || day > 31) {
+      setStatus('Invalid month/day.', 'warn');
+      return;
+    }
+    cadence.month = month;
+    cadence.dayOfMonth = day;
+  }
+
+  const response = await send({
+    type: PANEL_CREATE_SCHEDULE,
+    schedule: {
+      name: `Schedule ${workflowName}`,
+      workflowId,
+      cadence,
+      enabled: true,
+    },
+  });
+
+  if (!response || response.ok !== true) {
+    setStatus(`Create schedule failed: ${response?.error || 'unknown error'}`, 'error');
+    return;
+  }
+
+  setStatus('Schedule created.', 'ok');
+  await refresh();
+}
+
+function renderAutomation(state) {
+  const automation = state.automation;
+  const activeTabId = state.control?.activeTab?.id;
+
+  automationEl.innerHTML = `
+    <h3>Automation</h3>
+    <div class="section-title">
+      <h4>Recording</h4>
+      <span class="caption" id="recording-state"></span>
+    </div>
+    <div class="row">
+      <input id="record-name" placeholder="Workflow name" />
+      <button id="record-start">Start</button>
+      <button id="record-stop">Stop</button>
+      <button id="record-save" class="primary">Save</button>
+    </div>
+    <div id="recording-steps" class="list"></div>
+    <hr />
+    <div class="section-title"><h4>Workflows</h4></div>
+    <div id="workflow-list" class="list"></div>
+    <hr />
+    <div class="grid-2">
+      <div>
+        <div class="section-title"><h4>Shortcuts</h4></div>
+        <div id="shortcut-list" class="list"></div>
+      </div>
+      <div>
+        <div class="section-title"><h4>Schedules</h4></div>
+        <div id="schedule-list" class="list"></div>
+      </div>
+    </div>
+  `;
+
+  const recordingStateEl = automationEl.querySelector('#recording-state');
+  const recordingStepsEl = automationEl.querySelector('#recording-steps');
+  const recordNameInput = automationEl.querySelector('#record-name');
+  const workflowListEl = automationEl.querySelector('#workflow-list');
+  const shortcutListEl = automationEl.querySelector('#shortcut-list');
+  const scheduleListEl = automationEl.querySelector('#schedule-list');
+
+  if (automation.recording) {
+    recordingStateEl.textContent = `ON · ${automation.recording.stepCount} steps`;
+    recordNameInput.value = automation.recording.name || '';
+
+    for (const step of automation.recording.steps) {
+      const item = document.createElement('div');
+      item.className = 'item';
+      item.innerHTML = `<div class="item-title">${escapeInline(step.action)}</div><div class="item-url">${escapeInline(JSON.stringify(step.args || {}))}</div>`;
+      recordingStepsEl.appendChild(item);
+    }
+
+    if (automation.recording.steps.length === 0) {
+      const empty = document.createElement('div');
+      empty.className = 'caption';
+      empty.textContent = 'Recording is active. Perform actions from Browser Control.';
+      recordingStepsEl.appendChild(empty);
+    }
+  } else {
+    recordingStateEl.textContent = 'OFF';
+    const empty = document.createElement('div');
+    empty.className = 'caption';
+    empty.textContent = 'Start recording to capture actions into a reusable workflow.';
+    recordingStepsEl.appendChild(empty);
+  }
+
+  automationEl.querySelector('#record-start').addEventListener('click', async () => {
+    const result = await send({
+      type: PANEL_START_RECORDING,
+      name: recordNameInput.value.trim() || 'Recorded Workflow',
+    });
+
+    if (!result || result.ok !== true) {
+      setStatus(`Start recording failed: ${result?.error || 'unknown error'}`, 'error');
+      return;
+    }
+
+    setStatus('Recording started.', 'ok');
+    await refresh();
+  });
+
+  automationEl.querySelector('#record-stop').addEventListener('click', async () => {
+    const result = await send({ type: PANEL_STOP_RECORDING });
+    if (!result || result.ok !== true) {
+      setStatus(`Stop recording failed: ${result?.error || 'unknown error'}`, 'error');
+      return;
+    }
+
+    setStatus('Recording stopped.', 'ok');
+    await refresh();
+  });
+
+  automationEl.querySelector('#record-save').addEventListener('click', async () => {
+    const result = await send({
+      type: PANEL_SAVE_RECORDING,
+      name: recordNameInput.value.trim() || undefined,
+    });
+
+    if (!result || result.ok !== true) {
+      setStatus(`Save recording failed: ${result?.error || 'unknown error'}`, 'error');
+      return;
+    }
+
+    setStatus(`Workflow saved: ${result.workflow?.name || ''}`, 'ok');
+    await refresh();
+  });
+
+  if (!automation.workflows || automation.workflows.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'No workflows saved yet.';
+    workflowListEl.appendChild(empty);
+  } else {
+    for (const workflow of automation.workflows) {
+      const item = document.createElement('div');
+      item.className = 'item';
+
+      const title = document.createElement('div');
+      title.className = 'item-title';
+      title.textContent = `${workflow.name} (${workflow.stepCount} steps)`;
+
+      const meta = document.createElement('div');
+      meta.className = 'caption';
+      meta.textContent = `Updated: ${formatTime(workflow.updatedAt)}`;
+
+      const row = document.createElement('div');
+      row.className = 'row wrap';
+
+      const runBtn = document.createElement('button');
+      runBtn.textContent = 'Run';
+      runBtn.addEventListener('click', async () => {
+        const response = await send({
+          type: PANEL_RUN_WORKFLOW,
+          workflowId: workflow.id,
+          tabId: activeTabId,
+        });
+
+        if (!response || response.ok !== true) {
+          setStatus(`Workflow failed: ${response?.error || 'unknown error'}`, 'error');
+          return;
+        }
+
+        setStatus(`Workflow executed: ${workflow.name}`, 'ok');
+        await refresh();
+      });
+
+      const shortcutBtn = document.createElement('button');
+      shortcutBtn.textContent = 'Set Shortcut';
+      shortcutBtn.addEventListener('click', async () => {
+        const defaultName = workflow.name
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, '-')
+          .replace(/^-+|-+$/g, '')
+          .slice(0, 32);
+        const input = window.prompt('Shortcut name (without /)', defaultName || 'workflow');
+        if (!input) return;
+
+        const result = await send({
+          type: PANEL_SET_SHORTCUT,
+          name: input,
+          workflowId: workflow.id,
+        });
+
+        if (!result || result.ok !== true) {
+          setStatus(`Set shortcut failed: ${result?.error || 'unknown error'}`, 'error');
+          return;
+        }
+
+        setStatus(`Shortcut saved: /${result.shortcut.name}`, 'ok');
+        await refresh();
+      });
+
+      const scheduleBtn = document.createElement('button');
+      scheduleBtn.textContent = 'Schedule';
+      scheduleBtn.addEventListener('click', async () => {
+        await promptAndCreateSchedule(workflow.id, workflow.name);
+      });
+
+      const deleteBtn = document.createElement('button');
+      deleteBtn.className = 'danger';
+      deleteBtn.textContent = 'Delete';
+      deleteBtn.addEventListener('click', async () => {
+        if (!window.confirm(`Delete workflow \"${workflow.name}\"?`)) return;
+        const result = await send({ type: PANEL_DELETE_WORKFLOW, workflowId: workflow.id });
+        if (!result || result.ok !== true) {
+          setStatus(`Delete workflow failed: ${result?.error || 'unknown error'}`, 'error');
+          return;
+        }
+        setStatus('Workflow deleted.', 'ok');
+        await refresh();
+      });
+
+      row.appendChild(runBtn);
+      row.appendChild(shortcutBtn);
+      row.appendChild(scheduleBtn);
+      row.appendChild(deleteBtn);
+
+      item.appendChild(title);
+      item.appendChild(meta);
+      item.appendChild(row);
+      workflowListEl.appendChild(item);
+    }
+  }
+
+  if (!automation.shortcuts || automation.shortcuts.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'No shortcuts configured.';
+    shortcutListEl.appendChild(empty);
+  } else {
+    for (const shortcut of automation.shortcuts) {
+      const item = document.createElement('div');
+      item.className = 'item';
+
+      const title = document.createElement('div');
+      title.className = 'item-title';
+      title.textContent = `/${shortcut.name}`;
+
+      const desc = document.createElement('div');
+      desc.className = 'item-url';
+      desc.textContent = shortcut.workflowName;
+
+      const row = document.createElement('div');
+      row.className = 'row wrap';
+
+      const runBtn = document.createElement('button');
+      runBtn.textContent = 'Run';
+      runBtn.addEventListener('click', async () => {
+        const response = await send({
+          type: PANEL_RUN_SHORTCUT,
+          name: shortcut.name,
+          tabId: activeTabId,
+        });
+
+        if (!response || response.ok !== true) {
+          setStatus(`Shortcut failed: ${response?.error || 'unknown error'}`, 'error');
+          return;
+        }
+
+        setStatus(`Shortcut executed: /${shortcut.name}`, 'ok');
+        await refresh();
+      });
+
+      const deleteBtn = document.createElement('button');
+      deleteBtn.className = 'danger';
+      deleteBtn.textContent = 'Delete';
+      deleteBtn.addEventListener('click', async () => {
+        const result = await send({ type: PANEL_DELETE_SHORTCUT, name: shortcut.name });
+        if (!result || result.ok !== true) {
+          setStatus(`Delete shortcut failed: ${result?.error || 'unknown error'}`, 'error');
+          return;
+        }
+        setStatus('Shortcut deleted.', 'ok');
+        await refresh();
+      });
+
+      row.appendChild(runBtn);
+      row.appendChild(deleteBtn);
+
+      item.appendChild(title);
+      item.appendChild(desc);
+      item.appendChild(row);
+      shortcutListEl.appendChild(item);
+    }
+  }
+
+  if (!automation.schedules || automation.schedules.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'No schedules configured.';
+    scheduleListEl.appendChild(empty);
+  } else {
+    for (const schedule of automation.schedules) {
+      const item = document.createElement('div');
+      item.className = 'item';
+
+      const title = document.createElement('div');
+      title.className = 'item-title';
+      title.textContent = schedule.name;
+
+      const desc = document.createElement('div');
+      desc.className = 'item-url';
+      desc.textContent = `${schedule.workflowName} · ${schedule.cadence.kind}`;
+
+      const time = document.createElement('div');
+      time.className = 'caption';
+      time.textContent = `Next: ${formatTime(schedule.nextRunAt)}`;
+
+      const row = document.createElement('div');
+      row.className = 'row wrap';
+
+      const toggleBtn = document.createElement('button');
+      toggleBtn.textContent = schedule.enabled ? 'Disable' : 'Enable';
+      toggleBtn.addEventListener('click', async () => {
+        const result = await send({
+          type: PANEL_TOGGLE_SCHEDULE,
+          scheduleId: schedule.id,
+          enabled: !schedule.enabled,
+        });
+
+        if (!result || result.ok !== true) {
+          setStatus(`Toggle schedule failed: ${result?.error || 'unknown error'}`, 'error');
+          return;
+        }
+
+        setStatus('Schedule updated.', 'ok');
+        await refresh();
+      });
+
+      const deleteBtn = document.createElement('button');
+      deleteBtn.className = 'danger';
+      deleteBtn.textContent = 'Delete';
+      deleteBtn.addEventListener('click', async () => {
+        const result = await send({
+          type: PANEL_DELETE_SCHEDULE,
+          scheduleId: schedule.id,
+        });
+
+        if (!result || result.ok !== true) {
+          setStatus(`Delete schedule failed: ${result?.error || 'unknown error'}`, 'error');
+          return;
+        }
+
+        setStatus('Schedule deleted.', 'ok');
+        await refresh();
+      });
+
+      row.appendChild(toggleBtn);
+      row.appendChild(deleteBtn);
+
+      item.appendChild(title);
+      item.appendChild(desc);
+      item.appendChild(time);
+      item.appendChild(row);
+      scheduleListEl.appendChild(item);
+    }
+  }
+}
+
+function renderDeveloper(state) {
+  const activity = state.activity;
+  const activeTabId = state.control?.activeTab?.id;
+  const domState = viewState.lastDomState || state.latestDomState || null;
+
+  developerEl.innerHTML = `
+    <h3>Developer Signals</h3>
+    <div class="row wrap">
+      <button id="dev-refresh-dom">Refresh DOM</button>
+      <button id="dev-clear-activity">Clear Events</button>
+      <button id="dev-toggle-bridge">${state.options.pageBridgeEnabled ? 'Disable' : 'Enable'} Page Bridge</button>
+      <span class="caption">Console: ${activity.console.length} · Network: ${activity.network.length}</span>
+      <span class="caption">Bridge: ${state.options.pageBridgeEnabled ? 'ON' : 'OFF (high-risk default)'}</span>
+    </div>
+    <div class="row">
+      <input id="dev-selector" placeholder="DOM selector for capture (optional)" class="mono" />
+      <label class="caption" style="display:flex;align-items:center;gap:4px;white-space:nowrap;">
+        <input type="checkbox" id="dev-interactive-only" style="width:auto" />
+        interactive-only
+      </label>
+    </div>
+    <div class="grid-2">
+      <div>
+        <div class="section-title"><h4>DOM State</h4></div>
+        <pre id="dev-dom-json"></pre>
+      </div>
+      <div>
+        <div class="section-title"><h4>Recent Commands</h4></div>
+        <div id="dev-command-list" class="list"></div>
+      </div>
+    </div>
+    <hr />
+    <div class="grid-2">
+      <div>
+        <div class="section-title"><h4>Console Events</h4></div>
+        <div id="dev-console-list" class="list"></div>
+      </div>
+      <div>
+        <div class="section-title"><h4>Network Events</h4></div>
+        <div id="dev-network-list" class="list"></div>
+      </div>
+    </div>
+  `;
+
+  const domPre = developerEl.querySelector('#dev-dom-json');
+  domPre.textContent = domState
+    ? JSON.stringify(domState, null, 2)
+    : 'No DOM state captured yet. Use Snapshot or DOM State in Browser Control.';
+
+  const commandList = developerEl.querySelector('#dev-command-list');
+  if (!activity.commandHistory || activity.commandHistory.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'No commands yet.';
+    commandList.appendChild(empty);
+  } else {
+    for (const entry of activity.commandHistory.slice(0, 8)) {
+      const item = document.createElement('div');
+      item.className = 'item';
+      item.innerHTML = `<div class="item-title">${entry.ok ? 'OK' : 'FAIL'} · ${escapeInline(entry.action)}</div><div class="caption">${formatTime(entry.timestamp)}${entry.error ? ` · ${escapeInline(entry.error)}` : ''}</div>`;
+      commandList.appendChild(item);
+    }
+  }
+
+  const consoleList = developerEl.querySelector('#dev-console-list');
+  if (!activity.console || activity.console.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'No console events.';
+    consoleList.appendChild(empty);
+  } else {
+    for (const event of activity.console.slice(0, 12)) {
+      const payload = event.payload || {};
+      const level = payload.level || 'log';
+      const text = payload.message || (Array.isArray(payload.args) ? payload.args.join(' ') : JSON.stringify(payload));
+      const item = document.createElement('div');
+      item.className = 'item';
+      item.innerHTML = `<div class="item-title">${escapeInline(level.toUpperCase())}</div><div class="item-url">${escapeInline(text)}</div><div class="caption">${formatTime(event.timestamp)}</div>`;
+      consoleList.appendChild(item);
+    }
+  }
+
+  const networkList = developerEl.querySelector('#dev-network-list');
+  if (!activity.network || activity.network.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'empty';
+    empty.textContent = 'No network events.';
+    networkList.appendChild(empty);
+  } else {
+    for (const event of activity.network.slice(0, 12)) {
+      const payload = event.payload || {};
+      const item = document.createElement('div');
+      item.className = 'item';
+      const line1 = `${payload.transport || 'net'} ${payload.method || ''} ${payload.status || ''}`.trim();
+      const line2 = payload.url || payload.error || '(unknown)';
+      const line3 = payload.durationMs ? `${payload.durationMs} ms` : '';
+      item.innerHTML = `<div class="item-title">${escapeInline(line1)}</div><div class="item-url">${escapeInline(line2)}</div><div class="caption">${escapeInline(line3)} · ${formatTime(event.timestamp)}</div>`;
+      networkList.appendChild(item);
+    }
+  }
+
+  developerEl.querySelector('#dev-refresh-dom').addEventListener('click', async () => {
+    const selector = developerEl.querySelector('#dev-selector').value.trim();
+    const interactiveOnly = developerEl.querySelector('#dev-interactive-only').checked;
+
+    const response = await runAction(
+      'dom-state',
+      {
+        selector: selector || undefined,
+        interactiveOnly,
+        maxNodes: 120,
+      },
+      activeTabId
+    );
+
+    if (response?.state) {
+      viewState.lastDomState = response.state;
+      renderDeveloper(state);
+    }
+  });
+
+  developerEl.querySelector('#dev-clear-activity').addEventListener('click', async () => {
+    await send({ type: PANEL_CLEAR_ACTIVITY });
+    setStatus('Activity events cleared.', 'ok');
+    await refresh();
+  });
+
+  developerEl.querySelector('#dev-toggle-bridge').addEventListener('click', async () => {
+    const result = await send({
+      type: PANEL_SET_OPTIONS,
+      options: {
+        ...state.options,
+        pageBridgeEnabled: !state.options.pageBridgeEnabled,
+      },
+    });
+    if (!result || result.ok !== true) {
+      setStatus(`Toggle Page Bridge failed: ${result?.error || 'unknown error'}`, 'error');
+      return;
+    }
+    setStatus(
+      `Page Bridge ${!state.options.pageBridgeEnabled ? 'enabled' : 'disabled'} (reload page to apply).`,
+      'ok'
+    );
+    await refresh();
+  });
+}
+
+async function refresh() {
+  const response = await send({ type: PANEL_GET_STATE });
+  if (!response || response.ok !== true || !response.state) {
+    setStatus(response?.error || 'Failed to load extension state.', 'error');
+    return;
+  }
+
+  const normalizedState = normalizePanelState(response.state);
+  viewState.panelState = normalizedState;
+  if (normalizedState.latestDomState) {
+    viewState.lastDomState = normalizedState.latestDomState;
+  }
+  renderControl(normalizedState);
+  renderSummary(normalizedState);
+  renderAutomation(normalizedState);
+  renderDeveloper(normalizedState);
+  renderSessions(normalizedState);
+  renderDownloads(normalizedState);
+}
+
+refreshBtn.addEventListener('click', async () => {
+  await refresh();
+  setStatus('Panel refreshed.', 'ok');
+});
+
+cleanupBtn.addEventListener('click', async () => {
+  const response = await send({ type: PANEL_CLEAN_EMPTY_GROUPS });
+  if (!response || response.ok !== true) {
+    setStatus(`Clean failed: ${response?.error || 'unknown error'}`, 'error');
+    return;
+  }
+  setStatus('Empty groups cleaned.', 'ok');
+  await refresh();
+});
+
+refresh().catch((error) => {
+  setStatus(error instanceof Error ? error.message : String(error), 'error');
+});
+
+setInterval(() => {
+  refresh().catch(() => {});
+}, 5000);