browser-debugging-daemon 1.0.0

package/dashboard/app.js

@@ -0,0 +1,1139 @@
+const state = {
+  runs: [],
+  selectedRunId: null,
+  pollHandle: null,
+  eventFilter: "all",
+  messageFilter: "all",
+  currentRun: null,
+  focusedHistory: null,
+  templates: [],
+  selectedTemplateId: "",
+};
+const TOKEN_STORAGE_KEY = "browserDaemonToken";
+const urlSearchParams = new URLSearchParams(window.location.search);
+const tokenFromUrl = urlSearchParams.get("token");
+if (tokenFromUrl) {
+  localStorage.setItem(TOKEN_STORAGE_KEY, tokenFromUrl);
+}
+
+function getAuthToken() {
+  return localStorage.getItem(TOKEN_STORAGE_KEY) || "";
+}
+
+async function apiFetch(url, options = {}) {
+  const headers = new Headers(options.headers || {});
+  const token = getAuthToken();
+  if (token) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+  return fetch(url, { ...options, headers });
+}
+
+async function readJsonSafe(response) {
+  try {
+    return await response.json();
+  } catch (error) {
+    return {};
+  }
+}
+
+function withTokenQuery(url) {
+  const token = getAuthToken();
+  if (!token) {
+    return url;
+  }
+  const [base, query = ""] = url.split("?");
+  const params = new URLSearchParams(query);
+  params.set("token", token);
+  const encoded = params.toString();
+  return encoded ? `${base}?${encoded}` : base;
+}
+
+const runListEl = document.getElementById("runList");
+const runCountEl = document.getElementById("runCount");
+const emptyStateEl = document.getElementById("emptyState");
+const runDetailEl = document.getElementById("runDetail");
+const detailTitleEl = document.getElementById("detailTitle");
+const detailStatusEl = document.getElementById("detailStatus");
+const detailSummaryEl = document.getElementById("detailSummary");
+const detailTaskEl = document.getElementById("detailTask");
+const detailTimingEl = document.getElementById("detailTiming");
+const detailLinksEl = document.getElementById("detailLinks");
+const detailRuntimeEl = document.getElementById("detailRuntime");
+const detailRuntimeNoteEl = document.getElementById("detailRuntimeNote");
+const detailTemplateEl = document.getElementById("detailTemplate");
+const detailScreenshotEl = document.getElementById("detailScreenshot");
+const detailVideoEl = document.getElementById("detailVideo");
+const videoFrameEl = document.getElementById("videoFrame");
+const detailStepFocusEl = document.getElementById("detailStepFocus");
+const detailWalkthroughEl = document.getElementById("detailWalkthrough");
+const detailHistoryEl = document.getElementById("detailHistory");
+const detailConsoleEl = document.getElementById("detailConsole");
+const detailNetworkEl = document.getElementById("detailNetwork");
+const detailErrorsEl = document.getElementById("detailErrors");
+const detailEventsEl = document.getElementById("detailEvents");
+const clearStepFocusButtonEl = document.getElementById("clearStepFocusButton");
+const coordinationEmptyEl = document.getElementById("coordinationEmpty");
+const pendingInputPanelEl = document.getElementById("pendingInputPanel");
+const pendingInputQuestionEl = document.getElementById("pendingInputQuestion");
+const pendingInputDetailsEl = document.getElementById("pendingInputDetails");
+const pendingInputSuggestionEl = document.getElementById("pendingInputSuggestion");
+const operatorMessagesEl = document.getElementById("operatorMessages");
+const messageFilterEl = document.getElementById("messageFilter");
+const replyFormEl = document.getElementById("replyForm");
+const replyInstructionEl = document.getElementById("replyInstruction");
+const replyMessageEl = document.getElementById("replyMessage");
+const abortRunButtonEl = document.getElementById("abortRunButton");
+const abortRunButtonSecondaryEl = document.getElementById("abortRunButtonSecondary");
+const manualControlButtonEl = document.getElementById("manualControlButton");
+const resumeRunButtonEl = document.getElementById("resumeRunButton");
+const runControlBarEl = document.getElementById("runControlBar");
+const eventFilterEl = document.getElementById("eventFilter");
+const refreshButtonEl = document.getElementById("refreshButton");
+const runFormEl = document.getElementById("runForm");
+const taskInstructionEl = document.getElementById("taskInstruction");
+const templateSelectEl = document.getElementById("templateSelect");
+const templateRefreshButtonEl = document.getElementById("templateRefreshButton");
+const templateSaveButtonEl = document.getElementById("templateSaveButton");
+const templateDeleteButtonEl = document.getElementById("templateDeleteButton");
+const templateNameEl = document.getElementById("templateName");
+const templateStartUrlEl = document.getElementById("templateStartUrl");
+const templateLoginChecksEl = document.getElementById("templateLoginChecks");
+const templateAssertionsEl = document.getElementById("templateAssertions");
+const browserSourceEl = document.getElementById("browserSource");
+const cdpEndpointEl = document.getElementById("cdpEndpoint");
+const maxStepsEl = document.getElementById("maxSteps");
+const handoffTimeoutSecondsEl = document.getElementById("handoffTimeoutSeconds");
+const formMessageEl = document.getElementById("formMessage");
+
+function formatDate(value) {
+  if (!value) return "n/a";
+  return new Date(value).toLocaleString();
+}
+
+function setStatusChip(element, status) {
+  element.dataset.status = status || "unknown";
+  element.textContent = status || "unknown";
+}
+
+function durationText(run) {
+  if (!run.startedAt) return "Queued";
+  const start = new Date(run.startedAt).getTime();
+  const end = run.finishedAt ? new Date(run.finishedAt).getTime() : Date.now();
+  const seconds = Math.max(0, Math.round((end - start) / 1000));
+  return `${seconds}s`;
+}
+
+function createLink(label, url) {
+  const anchor = document.createElement("a");
+  anchor.href = withTokenQuery(url);
+  anchor.target = "_blank";
+  anchor.rel = "noreferrer";
+  anchor.textContent = label;
+  return anchor;
+}
+
+function createTraceViewerButton(label, artifactUrl) {
+  if (!artifactUrl) return null;
+  // Convert /artifacts/<session>/traces/<file> to /trace/<session>/<file>
+  const match = artifactUrl.match(/^\/artifacts\/([^/]+)\/traces\/([^/?]+)/);
+  if (!match) {
+    // Fallback to download link if path doesn't match expected pattern
+    return createLink(label, artifactUrl);
+  }
+  const [, sessionId, traceFile] = match;
+  const btn = document.createElement("button");
+  btn.textContent = label;
+  btn.className = "trace-button";
+  btn.onclick = () => {
+    const traceUrl = `/trace/${sessionId}/${encodeURIComponent(traceFile)}`;
+    window.open(withTokenQuery(traceUrl), "_blank");
+  };
+  return btn;
+}
+
+function withTokenAndCacheBust(url) {
+  if (!url) return "";
+  const tokenized = withTokenQuery(url);
+  const [base, query = ""] = tokenized.split("?");
+  const params = new URLSearchParams(query);
+  params.set("t", String(Date.now()));
+  const encoded = params.toString();
+  return encoded ? `${base}?${encoded}` : base;
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function renderLogList(container, entries, formatter) {
+  container.innerHTML = "";
+  if (!entries?.length) {
+    const empty = document.createElement("p");
+    empty.textContent = "No entries recorded.";
+    container.appendChild(empty);
+    return;
+  }
+
+  for (const entry of entries) {
+    const item = document.createElement("article");
+    item.className = "log-entry";
+    item.innerHTML = formatter(entry);
+    container.appendChild(item);
+  }
+}
+
+function formatTimestamp(value) {
+  if (!value) return "n/a";
+  return new Date(value).toLocaleTimeString();
+}
+
+function parseTimestampMs(value) {
+  const timestampMs = Date.parse(value);
+  return Number.isFinite(timestampMs) ? timestampMs : null;
+}
+
+function formatDurationMs(durationMs) {
+  const numeric = Number(durationMs);
+  if (!Number.isFinite(numeric) || numeric < 0) return "n/a";
+  if (numeric < 1000) return `${Math.round(numeric)}ms`;
+  return `${(numeric / 1000).toFixed(2)}s`;
+}
+
+function normalizeNumber(value) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : null;
+}
+
+function getFocusedHistoryEntry(run, history) {
+  if (!state.focusedHistory || state.focusedHistory.runId !== run.id) {
+    return null;
+  }
+  const { index } = state.focusedHistory;
+  if (!Number.isInteger(index) || index < 0 || index >= history.length) {
+    return null;
+  }
+  return history[index];
+}
+
+function buildFocusWindow(history, focusedEntry) {
+  if (!focusedEntry) return null;
+  const currentIndex = history.findIndex((entry) => entry._index === focusedEntry._index);
+  if (currentIndex < 0) return null;
+
+  let startMs = parseTimestampMs(focusedEntry.stepStartedAt);
+  let endMs = parseTimestampMs(focusedEntry.stepFinishedAt);
+  if (!endMs && history[currentIndex + 1]) {
+    endMs = parseTimestampMs(history[currentIndex + 1].stepStartedAt);
+  }
+
+  if (!startMs && endMs) {
+    startMs = endMs - 15000;
+  }
+  if (!endMs && startMs) {
+    endMs = startMs + 15000;
+  }
+  if (!startMs && !endMs) {
+    return null;
+  }
+
+  return { startMs, endMs };
+}
+
+function setScreenshot(url, runId, stepLabel = "Latest run view") {
+  if (!url) {
+    detailScreenshotEl.removeAttribute("src");
+    detailScreenshotEl.alt = "No screenshot available";
+    detailScreenshotEl.style.display = "none";
+  } else {
+    detailScreenshotEl.src = withTokenAndCacheBust(url);
+    detailScreenshotEl.alt = `${stepLabel} screenshot for run ${runId}`;
+    detailScreenshotEl.style.display = "block";
+  }
+}
+
+function applyVideoState(videoUrl, focusedEntry) {
+  if (!videoUrl) {
+    detailVideoEl.pause();
+    detailVideoEl.removeAttribute("src");
+    delete detailVideoEl.dataset.sourceUrl;
+    videoFrameEl.style.display = "none";
+    return;
+  }
+
+  videoFrameEl.style.display = "block";
+  const sourceUrl = withTokenQuery(videoUrl);
+  if (detailVideoEl.dataset.sourceUrl !== sourceUrl) {
+    detailVideoEl.dataset.sourceUrl = sourceUrl;
+    detailVideoEl.src = sourceUrl;
+  }
+
+  const targetOffset = normalizeNumber(focusedEntry?.videoOffsetSeconds);
+  if (targetOffset === null) {
+    return;
+  }
+
+  const seekToOffset = () => {
+    try {
+      detailVideoEl.currentTime = Math.max(0, targetOffset);
+    } catch (error) {
+      // Ignore seek errors while metadata is still loading.
+    }
+  };
+
+  if (detailVideoEl.readyState >= 1) {
+    seekToOffset();
+  } else {
+    detailVideoEl.addEventListener("loadedmetadata", seekToOffset, { once: true });
+  }
+}
+
+function parseRuleLines(text) {
+  return String(text || "")
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line, index) => {
+      const [kindRaw = "", expectedRaw = "", nameRaw = ""] = line.split("|");
+      const kind = kindRaw.trim().toLowerCase();
+      const expected = expectedRaw.trim();
+      const name = nameRaw.trim() || `Rule ${index + 1}`;
+      if (!kind || !expected) return null;
+      return { kind, expected, name, required: true };
+    })
+    .filter(Boolean);
+}
+
+function formatRuleLines(rules) {
+  if (!Array.isArray(rules) || !rules.length) return "";
+  return rules
+    .map((rule) => {
+      const kind = rule.kind || "text_includes";
+      const expected = rule.expected || rule.value || "";
+      const name = rule.name || "";
+      return [kind, expected, name].join("|");
+    })
+    .join("\n");
+}
+
+function getSelectedTemplate() {
+  if (!state.selectedTemplateId) return null;
+  return state.templates.find((template) => template.id === state.selectedTemplateId) || null;
+}
+
+function applyTemplateToForm(template) {
+  if (!template) return;
+  templateNameEl.value = template.name || "";
+  templateStartUrlEl.value = template.startUrl || "";
+  templateLoginChecksEl.value = formatRuleLines(template.preLoginChecks || []);
+  templateAssertionsEl.value = formatRuleLines(template.assertionRules || []);
+  taskInstructionEl.value = template.taskInstruction || "";
+  browserSourceEl.value = template.browserSource || "auto";
+  cdpEndpointEl.value = template.cdpEndpoint || cdpEndpointEl.value || "http://127.0.0.1:9222";
+  maxStepsEl.value = String(template.timeoutPolicy?.maxSteps || 12);
+  const handoffTimeoutSeconds = Math.max(5, Math.round((template.timeoutPolicy?.handoffTimeoutMs || 300000) / 1000));
+  handoffTimeoutSecondsEl.value = String(handoffTimeoutSeconds);
+}
+
+function renderTemplateOptions() {
+  const previousSelection = state.selectedTemplateId || templateSelectEl.value || "";
+  templateSelectEl.innerHTML = "";
+
+  const defaultOption = document.createElement("option");
+  defaultOption.value = "";
+  defaultOption.textContent = "No Template";
+  templateSelectEl.appendChild(defaultOption);
+
+  for (const template of state.templates) {
+    const option = document.createElement("option");
+    option.value = template.id;
+    option.textContent = template.name;
+    templateSelectEl.appendChild(option);
+  }
+
+  const hasSelection = state.templates.some((template) => template.id === previousSelection);
+  state.selectedTemplateId = hasSelection ? previousSelection : "";
+  templateSelectEl.value = state.selectedTemplateId;
+  templateDeleteButtonEl.disabled = !state.selectedTemplateId;
+}
+
+async function loadTemplates() {
+  const response = await apiFetch("/run-templates?limit=200");
+  const payload = await readJsonSafe(response);
+  if (!response.ok) {
+    throw new Error(payload.error || `Failed to load templates (${response.status}).`);
+  }
+  state.templates = payload.templates || [];
+  renderTemplateOptions();
+  const selectedTemplate = getSelectedTemplate();
+  if (selectedTemplate) {
+    applyTemplateToForm(selectedTemplate);
+  }
+}
+
+function collectTemplatePayload() {
+  const timeoutSeconds = Number.parseInt(handoffTimeoutSecondsEl.value, 10);
+  return {
+    id: state.selectedTemplateId || undefined,
+    name: templateNameEl.value.trim(),
+    task_instruction: taskInstructionEl.value.trim(),
+    browser_source: browserSourceEl.value || "auto",
+    cdp_endpoint: cdpEndpointEl.value.trim() || null,
+    start_url: templateStartUrlEl.value.trim(),
+    pre_login_checks: parseRuleLines(templateLoginChecksEl.value),
+    assertion_rules: parseRuleLines(templateAssertionsEl.value),
+    timeout_policy: {
+      max_steps: Number.parseInt(maxStepsEl.value, 10) || 12,
+      handoff_timeout_ms: Number.isFinite(timeoutSeconds) ? Math.max(5, timeoutSeconds) * 1000 : 300000,
+    },
+  };
+}
+
+function summarizeEvent(event) {
+  const payload = event?.payload || {};
+
+  switch (event?.type) {
+    case "goto":
+      return `Navigated to ${payload.url || "unknown URL"}.`;
+    case "observe":
+      return `Observed ${payload.count ?? 0} interactable elements.`;
+    case "click":
+      return `Clicked SoM target ${payload.id ?? "unknown"}.`;
+    case "type":
+      return `Typed into SoM target ${payload.id ?? "unknown"}.`;
+    case "hover":
+      return `Hovered SoM target ${payload.id ?? "unknown"}.`;
+    case "scroll":
+      return `Scrolled ${payload.direction || "unknown direction"}.`;
+    case "keypress":
+      return `Pressed ${payload.key || "unknown key"}.`;
+    case "subagent_task_started":
+      return `Started delegated task with max ${payload.maxSteps ?? "?"} steps.`;
+    case "subagent_decision":
+      return `Planner produced a ${payload.decision?.next_action?.type || "no-op"} action.`;
+    case "subagent_verification":
+      return payload.verification?.summary || "Verification finished.";
+    case "subagent_input_requested":
+      return payload.question || "Subagent requested guidance.";
+    case "subagent_input_received":
+      return "Main agent guidance received.";
+    case "task_runner_abort_requested":
+      return payload.reason || "Abort requested.";
+    case "task_runner_manual_control_requested":
+      return payload.reason || "Manual control requested.";
+    case "subagent_task_aborted":
+      return payload.summary || "Delegated task aborted.";
+    case "subagent_task_completed":
+      return payload.summary || "Delegated task completed.";
+    case "subagent_task_failed":
+      return payload.summary || "Delegated task failed.";
+    case "session_started":
+      return payload.reusedStorageState ? "Browser session started with saved storage state." : "Browser session started with a fresh storage state.";
+    case "session_auto_attached":
+      return "Auto source attached to the current Chrome session.";
+    case "session_auto_attach_failed":
+      return `Auto attach failed, falling back to managed runtime: ${payload.error || "unknown reason"}.`;
+    case "session_auto_fallback_started":
+      return "Auto source switched to managed runtime fallback.";
+    case "session_switch_requested":
+      return `Switching browser mode from ${payload.from || "unknown"} to ${payload.to || "unknown"}.`;
+    case "session_switched":
+      return `Browser relaunched in ${payload.browserMode || "unknown"} mode.`;
+    case "session_switch_completed":
+      return `Browser mode switch completed: ${payload.from || "unknown"} to ${payload.to || "unknown"}.`;
+    case "session_switch_failed":
+      return `Browser mode switch failed: ${payload.error || "unknown error"}.`;
+    case "session_switch_recovered":
+      return `Browser session recovered in ${payload.browserMode || "previous"} mode.`;
+    case "session_switch_recovery_failed":
+      return `Browser session recovery failed: ${payload.error || "unknown error"}.`;
+    case "session_stopping":
+      return "Browser session is stopping and flushing artifacts.";
+    default:
+      return "Event recorded.";
+  }
+}
+
+function renderEventList(container, entries, options = {}) {
+  container.innerHTML = "";
+  const focusWindow = options.focusWindow || null;
+  if (!entries?.length) {
+    const empty = document.createElement("p");
+    empty.textContent = "No runtime events recorded yet.";
+    container.appendChild(empty);
+    return;
+  }
+
+  const filteredEntries = [...entries].reverse().filter((entry) => {
+    if (state.eventFilter === "all") return true;
+    if (state.eventFilter === "subagent") return String(entry.type || "").startsWith("subagent_");
+    if (state.eventFilter === "browser") return ["goto", "observe", "click", "type", "hover", "scroll", "keypress", "session_started", "session_auto_attached", "session_auto_attach_failed", "session_auto_fallback_started", "session_switch_requested", "session_switched", "session_switch_completed", "session_switch_failed", "session_switch_recovered", "session_switch_recovery_failed", "session_stopping"].includes(entry.type);
+    if (state.eventFilter === "control") return String(entry.type || "").startsWith("task_runner_");
+    if (state.eventFilter === "errors") return ["subagent_task_failed", "subagent_task_aborted", "task_runner_abort_requested", "invalid_event"].includes(entry.type);
+    return true;
+  }).filter((entry) => {
+    if (!focusWindow) {
+      return true;
+    }
+    const timestampMs = parseTimestampMs(entry.timestamp);
+    if (!timestampMs) {
+      return false;
+    }
+    if (focusWindow.startMs && timestampMs < (focusWindow.startMs - 1200)) {
+      return false;
+    }
+    if (focusWindow.endMs && timestampMs > (focusWindow.endMs + 1200)) {
+      return false;
+    }
+    return true;
+  });
+
+  if (!filteredEntries.length) {
+    const empty = document.createElement("p");
+    empty.textContent = focusWindow
+      ? "No runtime events match this filter in the selected step window."
+      : "No runtime events match this filter.";
+    container.appendChild(empty);
+    return;
+  }
+
+  for (const entry of filteredEntries) {
+    const item = document.createElement("article");
+    item.className = "event-entry";
+    item.innerHTML = `
+      <div class="event-entry-top">
+        <span class="event-type">${escapeHtml(entry.type || "event")}</span>
+        <time>${escapeHtml(formatTimestamp(entry.timestamp))}</time>
+      </div>
+      <p class="event-summary">${escapeHtml(summarizeEvent(entry))}</p>
+      <details>
+        <summary>Payload</summary>
+        <pre>${escapeHtml(JSON.stringify(entry.payload || {}, null, 2))}</pre>
+      </details>
+    `;
+    container.appendChild(item);
+  }
+}
+
+function renderOperatorMessages(container, messages) {
+  container.innerHTML = "";
+  const filteredMessages = (messages || []).filter((message) => {
+    if (state.messageFilter === "all") return true;
+    return message.role === state.messageFilter;
+  });
+
+  if (!filteredMessages.length) {
+    const empty = document.createElement("p");
+    empty.textContent = messages?.length ? "No messages match this filter." : "No operator messages yet.";
+    container.appendChild(empty);
+    return;
+  }
+
+  for (const message of [...filteredMessages].reverse()) {
+    const item = document.createElement("article");
+    item.className = "message-entry";
+    item.innerHTML = `
+      <div class="message-entry-header">
+        <span>${escapeHtml(message.role || "operator")}</span>
+        <time>${escapeHtml(formatTimestamp(message.timestamp))}</time>
+      </div>
+      <p>${escapeHtml(message.content || "")}</p>
+    `;
+    container.appendChild(item);
+  }
+}
+
+function renderRunList() {
+  runCountEl.textContent = String(state.runs.length);
+  runListEl.innerHTML = "";
+
+  if (!state.runs.length) {
+    const empty = document.createElement("p");
+    empty.className = "empty-list";
+    empty.textContent = "No runs yet. Queue one below.";
+    runListEl.appendChild(empty);
+    return;
+  }
+
+  for (const run of state.runs) {
+    const card = document.createElement("button");
+    card.type = "button";
+    card.className = `run-card${run.id === state.selectedRunId ? " active" : ""}`;
+    card.innerHTML = `
+      <div class="run-card-top">
+        <h3>${run.id.slice(0, 8)}</h3>
+        <span class="status-chip" data-status="${run.status}">${run.status}</span>
+      </div>
+      <p>${run.summary || run.taskInstruction}</p>
+      <div class="run-card-bottom">
+        <time>${formatDate(run.createdAt)}</time>
+        <span>${durationText(run)}</span>
+      </div>
+    `;
+    card.addEventListener("click", () => {
+      state.selectedRunId = run.id;
+      state.focusedHistory = null;
+      renderRunList();
+      void loadRunDetail(run.id);
+    });
+    runListEl.appendChild(card);
+  }
+}
+
+async function loadRuns() {
+  const response = await apiFetch("/runs?limit=30");
+  const payload = await readJsonSafe(response);
+  if (!response.ok) {
+    throw new Error(payload.error || `Failed to load runs (${response.status}).`);
+  }
+  state.runs = payload.runs || [];
+
+  if (!state.selectedRunId && state.runs.length) {
+    state.selectedRunId = state.runs[0].id;
+  }
+
+  const activeRunStillExists = state.runs.some((run) => run.id === state.selectedRunId);
+  if (!activeRunStillExists) {
+    state.selectedRunId = state.runs[0]?.id || null;
+  }
+
+  renderRunList();
+
+  if (state.selectedRunId) {
+    await loadRunDetail(state.selectedRunId);
+  } else {
+    showEmptyState();
+  }
+}
+
+function showEmptyState() {
+  state.currentRun = null;
+  state.focusedHistory = null;
+  emptyStateEl.classList.remove("hidden");
+  runDetailEl.classList.add("hidden");
+}
+
+function showRunDetail() {
+  emptyStateEl.classList.add("hidden");
+  runDetailEl.classList.remove("hidden");
+}
+
+function renderDetail(run) {
+  const previousRunId = state.currentRun?.id || null;
+  state.currentRun = run;
+  showRunDetail();
+  const effectiveSource = run.result?.debug?.sessionSource || run.browserSource || "auto";
+  const fallbackReason = run.result?.debug?.autoFallbackReason || null;
+  detailTitleEl.textContent = `Run ${run.id.slice(0, 8)}`;
+  setStatusChip(detailStatusEl, run.status);
+  detailSummaryEl.textContent = run.summary || "No summary yet.";
+  detailTaskEl.textContent = run.taskInstruction || "No task description.";
+  detailTimingEl.textContent = [
+    `Requested source: ${run.browserSource || "auto"}`,
+    `Effective source: ${effectiveSource}`,
+    `Created: ${formatDate(run.createdAt)}`,
+    `Started: ${formatDate(run.startedAt)}`,
+    `Finished: ${formatDate(run.finishedAt)}`,
+    `Duration: ${durationText(run)}`,
+  ].join("\n");
+  const capabilities = run.result?.capabilities || run.result?.debug?.capabilities || null;
+  detailRuntimeEl.textContent = capabilities
+    ? [
+        `Browser mode: ${run.result?.debug?.browserMode || run.browserSource || "unknown"}`,
+        `Visible browser: ${capabilities.visibleBrowser ? "yes" : "no"}`,
+        `Videos: ${capabilities.videos ? "available" : "not guaranteed"}`,
+        `Traces: ${capabilities.traces ? "available" : "limited"}`,
+        `Mode switching: ${capabilities.modeSwitching ? "supported" : "not supported"}`,
+      ].join("\n")
+    : "Runtime capability summary not available yet.";
+  if (run.browserSource === "attached") {
+    detailRuntimeNoteEl.textContent = "Attached runs operate on your current Chrome session. They usually preserve live login state better, but some artifacts and automation guarantees can be more limited than the managed runtime.";
+  } else if (run.browserSource === "auto") {
+    detailRuntimeNoteEl.textContent = effectiveSource === "attached"
+      ? "Auto mode successfully attached to your current Chrome session for better live login reuse."
+      : `Auto mode is running in managed fallback.${fallbackReason ? ` Reason: ${fallbackReason}` : ""}`;
+  } else {
+    detailRuntimeNoteEl.textContent = "Managed runs launch a dedicated browser owned by the daemon. They provide stronger artifact capture and more predictable automation behavior.";
+  }
+  const templateEvaluation = run.templateEvaluation || run.result?.templateEvaluation || null;
+  if (run.template) {
+    const checksSummary = templateEvaluation
+      ? `Checks: ${templateEvaluation.passed ? "passed" : "failed"} (${(templateEvaluation.failureMessages || []).length} issues)`
+      : "Checks: pending";
+    detailTemplateEl.textContent = [
+      `Name: ${run.template.name || run.template.id}`,
+      `ID: ${run.template.id}`,
+      checksSummary,
+    ].join("\n");
+  } else {
+    detailTemplateEl.textContent = "No run template attached.";
+  }
+
+  detailLinksEl.innerHTML = "";
+  if (run.reports?.reportJsonUrl) detailLinksEl.appendChild(createLink("task-report.json", run.reports.reportJsonUrl));
+  if (run.reports?.walkthroughUrl) detailLinksEl.appendChild(createLink("walkthrough.md", run.reports.walkthroughUrl));
+  if (run.reports?.timelineJsonUrl) detailLinksEl.appendChild(createLink("task-timeline.json", run.reports.timelineJsonUrl));
+  if (run.artifacts?.traceUrls?.length) {
+    run.artifacts.traceUrls.forEach((url, index) => {
+      const btn = createTraceViewerButton(`View Trace ${index + 1}`, url);
+      if (btn) detailLinksEl.appendChild(btn);
+    });
+  } else if (run.artifacts?.traceUrl) {
+    const btn = createTraceViewerButton("View Trace", run.artifacts.traceUrl);
+    if (btn) detailLinksEl.appendChild(btn);
+  }
+  if (run.artifacts?.eventsUrl) detailLinksEl.appendChild(createLink("events.jsonl", run.artifacts.eventsUrl));
+  if (run.artifacts?.videoUrls?.[0]) detailLinksEl.appendChild(createLink("video", run.artifacts.videoUrls[0]));
+
+  const history = (run.result?.history || []).map((entry, index) => ({
+    ...entry,
+    _index: index,
+    actionDurationMs: normalizeNumber(entry.actionDurationMs),
+    elapsedMs: normalizeNumber(entry.elapsedMs),
+    videoOffsetSeconds: normalizeNumber(entry.videoOffsetSeconds),
+  }));
+
+  const focusedHistory = getFocusedHistoryEntry(run, history);
+  if (!focusedHistory && state.focusedHistory?.runId === run.id) {
+    state.focusedHistory = null;
+  }
+  const focusLabel = focusedHistory ? `Step ${focusedHistory.step}` : "Latest run view";
+  detailStepFocusEl.textContent = focusLabel;
+  clearStepFocusButtonEl.disabled = !focusedHistory;
+
+  const screenshotUrl = focusedHistory?.actionResult?.screenshotUrl || run.latestScreenshotUrl || null;
+  setScreenshot(screenshotUrl, run.id, focusLabel);
+  applyVideoState(run.artifacts?.videoUrls?.[0] || null, focusedHistory);
+
+  detailWalkthroughEl.textContent = run.walkthroughContent || "Walkthrough not available yet.";
+  if (previousRunId !== run.id) {
+    replyInstructionEl.value = "";
+    replyMessageEl.textContent = "";
+  }
+
+  detailHistoryEl.innerHTML = "";
+  if (!history.length) {
+    const empty = document.createElement("p");
+    empty.textContent = "No browser actions recorded yet.";
+    detailHistoryEl.appendChild(empty);
+  } else {
+    for (const entry of history) {
+      const historyScreenshotUrl = entry.actionResult?.screenshotUrl
+        ? withTokenQuery(entry.actionResult.screenshotUrl)
+        : null;
+      const item = document.createElement("article");
+      const isFocused = focusedHistory?._index === entry._index;
+      item.className = `history-item${isFocused ? " active" : ""}`;
+      const timingLine = [
+        `start ${formatTimestamp(entry.stepStartedAt)}`,
+        `end ${formatTimestamp(entry.stepFinishedAt)}`,
+        `action ${formatDurationMs(entry.actionDurationMs)}`,
+        `elapsed ${formatDurationMs(entry.elapsedMs)}`,
+        `video ${entry.videoOffsetSeconds === null ? "n/a" : `${entry.videoOffsetSeconds.toFixed(1)}s`}`,
+      ].join(" • ");
+      item.innerHTML = `
+        <div class="history-item-header">
+          <strong>Step ${escapeHtml(entry.step)}</strong>
+          <span>${escapeHtml(entry.action?.type || "unknown action")}</span>
+        </div>
+        <p>${escapeHtml(entry.summary || entry.thinking || "No planner note.")}</p>
+        <p><strong>Verification:</strong> ${escapeHtml(entry.verification?.summary || "No verification summary.")}</p>
+        <p class="history-timing">${escapeHtml(timingLine)}</p>
+        ${historyScreenshotUrl ? `<div class="history-screenshot"><a href="${escapeHtml(historyScreenshotUrl)}" target="_blank" rel="noreferrer">Open screenshot</a></div>` : ""}
+      `;
+      item.addEventListener("click", () => {
+        state.focusedHistory = { runId: run.id, index: entry._index };
+        renderDetail(run);
+      });
+      detailHistoryEl.appendChild(item);
+    }
+  }
+
+  renderLogList(detailConsoleEl, run.result?.debug?.recentConsole || [], (entry) => `
+    <strong>${escapeHtml(entry.type || "log")}</strong>
+    <div>${escapeHtml(entry.text || "")}</div>
+  `);
+
+  renderLogList(detailNetworkEl, run.result?.debug?.recentNetwork || [], (entry) => `
+    <strong>${escapeHtml(entry.method || "GET")} ${escapeHtml(entry.status ?? "")}</strong>
+    <div>${escapeHtml(entry.url || "")}</div>
+    <div>${escapeHtml(entry.resourceType || "")}${entry.failure ? ` • ${escapeHtml(entry.failure)}` : ""}</div>
+  `);
+
+  renderLogList(detailErrorsEl, run.result?.debug?.recentErrors || [], (entry) => `
+    <strong>${escapeHtml(entry.message || "Page error")}</strong>
+    <div>${escapeHtml(entry.stack ? "Stack trace available below." : "No stack trace captured.")}</div>
+    ${entry.stack ? `<pre>${escapeHtml(entry.stack)}</pre>` : ""}
+  `);
+
+  const focusWindow = buildFocusWindow(history, focusedHistory);
+  renderEventList(detailEventsEl, run.recentEvents || [], { focusWindow });
+  renderOperatorMessages(operatorMessagesEl, run.result?.operatorMessages || []);
+
+  const isAbortable = ["queued", "running", "waiting_for_instruction", "manual_control_requested", "manual_control", "aborting"].includes(run.status);
+  const canManualControl = ["running", "waiting_for_instruction", "manual_control_requested", "manual_control"].includes(run.status);
+  const canResume = ["waiting_for_instruction", "manual_control"].includes(run.status);
+  runControlBarEl.classList.toggle("hidden", !isAbortable);
+  abortRunButtonEl.disabled = !isAbortable;
+  abortRunButtonSecondaryEl.disabled = !isAbortable;
+  manualControlButtonEl.disabled = !canManualControl || run.status === "manual_control";
+  resumeRunButtonEl.disabled = !canResume;
+
+  if (run.pendingInput) {
+    coordinationEmptyEl.classList.add("hidden");
+    pendingInputPanelEl.classList.remove("hidden");
+    pendingInputQuestionEl.textContent = run.pendingInput.question || "The subagent is waiting for guidance.";
+    pendingInputDetailsEl.textContent = run.pendingInput.details || "No extra details provided.";
+    pendingInputSuggestionEl.textContent = run.pendingInput.suggestedReply ? `Suggested reply: ${run.pendingInput.suggestedReply}` : "No suggested reply.";
+  } else {
+    coordinationEmptyEl.classList.remove("hidden");
+    pendingInputPanelEl.classList.add("hidden");
+    pendingInputQuestionEl.textContent = "";
+    pendingInputDetailsEl.textContent = "";
+    pendingInputSuggestionEl.textContent = "";
+  }
+}
+
+async function loadRunDetail(runId) {
+  const response = await apiFetch(`/runs/${runId}`);
+  if (!response.ok) {
+    showEmptyState();
+    return;
+  }
+
+  const payload = await readJsonSafe(response);
+  renderDetail(payload.run);
+}
+
+async function queueRun(event) {
+  event.preventDefault();
+  const taskInstruction = taskInstructionEl.value.trim();
+  const templateId = state.selectedTemplateId || templateSelectEl.value || "";
+  const maxSteps = Number.parseInt(maxStepsEl.value, 10) || 12;
+  const handoffTimeoutSeconds = Number.parseInt(handoffTimeoutSecondsEl.value, 10) || 300;
+  const browserSource = browserSourceEl.value || "auto";
+  const cdpEndpoint = cdpEndpointEl.value.trim() || "http://127.0.0.1:9222";
+
+  if (!taskInstruction && !templateId) {
+    formMessageEl.textContent = "Task instruction is required when no template is selected.";
+    return;
+  }
+
+  if (browserSource !== "managed") {
+    formMessageEl.textContent = "Running attach diagnostics...";
+    try {
+      const diagnosticsResponse = await apiFetch(`/attach-diagnostics?${new URLSearchParams({ cdp_endpoint: cdpEndpoint }).toString()}`);
+      const diagnosticsPayload = await readJsonSafe(diagnosticsResponse);
+      const diagnostics = diagnosticsPayload?.diagnostics;
+      const primaryHint = diagnostics?.hints?.[0] || diagnostics?.health?.error || "endpoint unavailable";
+      if ((!diagnosticsResponse.ok || !diagnostics?.ok) && browserSource === "attached") {
+        formMessageEl.textContent = `Cannot attach to Chrome: ${primaryHint}`;
+        return;
+      }
+      if ((!diagnosticsResponse.ok || !diagnostics?.ok) && browserSource === "auto") {
+        formMessageEl.textContent = `Attach diagnostic warning: ${primaryHint} Auto mode will fall back to managed runtime if needed.`;
+      }
+    } catch (error) {
+      if (browserSource === "attached") {
+        formMessageEl.textContent = `Cannot attach to Chrome: ${error.message}`;
+        return;
+      }
+      formMessageEl.textContent = `CDP health check skipped: ${error.message}. Auto mode may fall back to managed runtime.`;
+    }
+  }
+
+  formMessageEl.textContent = "Queueing run...";
+
+  const response = await apiFetch("/runs", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      task_instruction: taskInstruction,
+      max_steps: maxSteps,
+      browser_source: browserSource,
+      cdp_endpoint: cdpEndpoint || null,
+      template_id: templateId || null,
+      handoff_timeout_ms: Math.max(5, handoffTimeoutSeconds) * 1000,
+    }),
+  });
+
+  const payload = await readJsonSafe(response);
+  if (!response.ok) {
+    formMessageEl.textContent = payload.error || "Failed to queue run.";
+    return;
+  }
+
+  state.selectedRunId = payload.run.id;
+  if (!templateId) {
+    taskInstructionEl.value = "";
+  }
+  formMessageEl.textContent = `Queued run ${payload.run.id.slice(0, 8)}.`;
+  await loadRuns();
+}
+
+async function saveTemplateFromForm() {
+  const payload = collectTemplatePayload();
+  if (!payload.name) {
+    formMessageEl.textContent = "Template name is required.";
+    return;
+  }
+
+  formMessageEl.textContent = "Saving template...";
+  const response = await apiFetch("/run-templates", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  const data = await readJsonSafe(response);
+  if (!response.ok) {
+    formMessageEl.textContent = data.error || "Failed to save template.";
+    return;
+  }
+
+  state.selectedTemplateId = data.template?.id || "";
+  await loadTemplates();
+  templateSelectEl.value = state.selectedTemplateId;
+  templateDeleteButtonEl.disabled = !state.selectedTemplateId;
+  formMessageEl.textContent = `Template saved: ${data.template?.name || "Unnamed"}.`;
+}
+
+async function deleteSelectedTemplate() {
+  const template = getSelectedTemplate();
+  if (!template) {
+    formMessageEl.textContent = "Select a template to delete.";
+    return;
+  }
+
+  formMessageEl.textContent = `Deleting template ${template.name}...`;
+  const response = await apiFetch(`/run-templates/${template.id}`, {
+    method: "DELETE",
+  });
+  const data = await readJsonSafe(response);
+  if (!response.ok) {
+    formMessageEl.textContent = data.error || "Failed to delete template.";
+    return;
+  }
+
+  state.selectedTemplateId = "";
+  await loadTemplates();
+  formMessageEl.textContent = `Template deleted: ${template.name}.`;
+}
+
+async function refreshNow() {
+  try {
+    await loadRuns();
+  } catch (error) {
+    formMessageEl.textContent = `Refresh failed: ${error.message}`;
+  }
+}
+
+async function sendReply(event) {
+  event.preventDefault();
+  if (!state.selectedRunId) {
+    replyMessageEl.textContent = "Select a run first.";
+    return;
+  }
+
+  const instruction = replyInstructionEl.value.trim();
+  if (!instruction) {
+    replyMessageEl.textContent = "Reply text is required.";
+    return;
+  }
+
+  replyMessageEl.textContent = "Sending reply...";
+
+  const response = await apiFetch(`/runs/${state.selectedRunId}/reply`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ instruction }),
+  });
+
+  const payload = await readJsonSafe(response);
+  if (!response.ok) {
+    replyMessageEl.textContent = payload.error || "Failed to send reply.";
+    return;
+  }
+
+  replyMessageEl.textContent = "Reply sent. The run is resuming.";
+  replyInstructionEl.value = "";
+  await refreshNow();
+}
+
+async function abortRun() {
+  if (!state.selectedRunId) {
+    replyMessageEl.textContent = "Select a run first.";
+    return;
+  }
+
+  replyMessageEl.textContent = "Aborting run...";
+  const response = await apiFetch(`/runs/${state.selectedRunId}/abort`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      reason: "Run aborted from the dashboard.",
+    }),
+  });
+
+  const payload = await readJsonSafe(response);
+  if (!response.ok) {
+    replyMessageEl.textContent = payload.error || "Failed to abort run.";
+    return;
+  }
+
+  replyMessageEl.textContent = "Abort requested.";
+  await refreshNow();
+}
+
+async function requestManualControl() {
+  if (!state.selectedRunId) {
+    replyMessageEl.textContent = "Select a run first.";
+    return;
+  }
+
+  replyMessageEl.textContent = "Requesting manual control...";
+  const response = await apiFetch(`/runs/${state.selectedRunId}/manual-control`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      reason: "Manual control requested from the dashboard.",
+    }),
+  });
+
+  const payload = await readJsonSafe(response);
+  if (!response.ok) {
+    replyMessageEl.textContent = payload.error || "Failed to enter manual control.";
+    return;
+  }
+
+  replyMessageEl.textContent = "Manual control requested.";
+  await refreshNow();
+}
+
+async function resumeRun() {
+  if (!state.selectedRunId) {
+    replyMessageEl.textContent = "Select a run first.";
+    return;
+  }
+
+  const instruction = replyInstructionEl.value.trim() || "Manual control complete. Continue from the current page.";
+  replyMessageEl.textContent = "Resuming run...";
+
+  const response = await apiFetch(`/runs/${state.selectedRunId}/resume`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ instruction }),
+  });
+
+  const payload = await readJsonSafe(response);
+  if (!response.ok) {
+    replyMessageEl.textContent = payload.error || "Failed to resume run.";
+    return;
+  }
+
+  replyInstructionEl.value = "";
+  replyMessageEl.textContent = "Run resumed.";
+  await refreshNow();
+}
+
+function startPolling() {
+  if (state.pollHandle) {
+    clearInterval(state.pollHandle);
+  }
+  state.pollHandle = setInterval(() => {
+    void refreshNow();
+  }, 4000);
+}
+
+function startEventStream() {
+  const stream = new EventSource(withTokenQuery("/runs/stream"));
+  stream.onmessage = () => {
+    void refreshNow();
+  };
+  stream.onerror = () => {
+    stream.close();
+    setTimeout(startEventStream, 3000);
+  };
+}
+
+refreshButtonEl.addEventListener("click", () => {
+  void refreshNow();
+  void loadTemplates().catch(() => {});
+});
+templateRefreshButtonEl.addEventListener("click", () => {
+  void loadTemplates().catch((error) => {
+    formMessageEl.textContent = `Template refresh failed: ${error.message}`;
+  });
+});
+templateSaveButtonEl.addEventListener("click", () => {
+  void saveTemplateFromForm();
+});
+templateDeleteButtonEl.addEventListener("click", () => {
+  void deleteSelectedTemplate();
+});
+templateSelectEl.addEventListener("change", () => {
+  state.selectedTemplateId = templateSelectEl.value || "";
+  templateDeleteButtonEl.disabled = !state.selectedTemplateId;
+  const template = getSelectedTemplate();
+  if (template) {
+    applyTemplateToForm(template);
+  }
+});
+
+runFormEl.addEventListener("submit", queueRun);
+replyFormEl.addEventListener("submit", (event) => {
+  void sendReply(event);
+});
+manualControlButtonEl.addEventListener("click", () => {
+  void requestManualControl();
+});
+resumeRunButtonEl.addEventListener("click", () => {
+  void resumeRun();
+});
+abortRunButtonEl.addEventListener("click", () => {
+  void abortRun();
+});
+abortRunButtonSecondaryEl.addEventListener("click", () => {
+  void abortRun();
+});
+clearStepFocusButtonEl.addEventListener("click", () => {
+  state.focusedHistory = null;
+  if (state.currentRun) {
+    renderDetail(state.currentRun);
+  }
+});
+eventFilterEl.addEventListener("change", () => {
+  state.eventFilter = eventFilterEl.value;
+  if (state.currentRun) {
+    renderDetail(state.currentRun);
+  } else if (state.selectedRunId) {
+    void loadRunDetail(state.selectedRunId);
+  }
+});
+messageFilterEl.addEventListener("change", () => {
+  state.messageFilter = messageFilterEl.value;
+  if (state.currentRun) {
+    renderDetail(state.currentRun);
+  } else if (state.selectedRunId) {
+    void loadRunDetail(state.selectedRunId);
+  }
+});
+
+if (!cdpEndpointEl.value.trim()) {
+  cdpEndpointEl.value = "http://127.0.0.1:9222";
+}
+if (!handoffTimeoutSecondsEl.value.trim()) {
+  handoffTimeoutSecondsEl.value = "300";
+}
+templateDeleteButtonEl.disabled = true;
+
+startPolling();
+startEventStream();
+void loadTemplates().catch((error) => {
+  formMessageEl.textContent = `Template load failed: ${error.message}`;
+});
+void refreshNow();