@grifhinz/logics-manager 2.5.2 → 2.7.0

package/clients/viewer/browser-host.js

@@ -8,14 +8,22 @@
   const updateBanner = () => document.getElementById("viewer-update");
   const updateCopy = () => document.getElementById("viewer-update-copy");
   const updateCommand = () => document.getElementById("viewer-update-command");
+  const connectionBanner = () => document.getElementById("viewer-connection");
+  const connectionCopy = () => document.getElementById("viewer-connection-copy");
+  const connectionDetail = () => document.getElementById("viewer-connection-detail");
   const filterCount = () => document.getElementById("viewer-filter-count");
   const repoPill = () => document.getElementById("viewer-repo-pill");
+  const projectMenu = () => document.getElementById("viewer-project-menu");
+  const repoGithubLink = () => document.getElementById("viewer-repo-github");
+  const repoFolderButton = () => document.getElementById("viewer-repo-folder");
+  const ciButton = () => document.getElementById("viewer-ci");
   const autoRefreshControl = () => document.getElementById("viewer-auto-refresh");
   const refreshIntervalControl = () => document.getElementById("viewer-refresh-interval");
   const refreshMenuButton = () => document.getElementById("viewer-refresh-menu-button");
   const refreshMenuPanel = () => document.getElementById("viewer-refresh-menu");
   const activityClearControl = () => document.getElementById("activity-clear");
   const activityStorageLimit = 80;
+  const gitHistoryPageSize = 10;
   const minAutoRefreshIntervalSeconds = 5;
   const maxAutoRefreshIntervalSeconds = 60;
   const defaultAutoRefreshIntervalMs = 15 * 1000;
@@ -29,6 +37,9 @@
   let viewerFilterState = { ...defaultFilterState };
   let latestItems = [];
   let latestRepoRoot = "";
+  let latestRepository = { root: "", githubUrl: "" };
+  let latestCapabilities = {};
+  let latestProjects = [];
   let latestMetaText = "Read-only local viewer";
   let autoRefreshIntervalMs = defaultAutoRefreshIntervalMs;
   let nextAutoRefreshAt = 0;
@@ -42,6 +53,9 @@
   let mermaidInitialized = false;
   let focusApplied = false;
   let latestGitBadgeCounts = { unpushedCommits: 0, uncommittedFiles: 0 };
+  let latestCiStatus = { visible: false, badgeState: "unknown", message: "" };
+  let connectionState = "connected";
+  let lastSuccessfulSyncAt = 0;
 
   function readStoredState() {
     try {
@@ -157,6 +171,53 @@
     renderMeta();
   }
 
+  function formatConnectionTime(timestamp) {
+    if (!timestamp) {
+      return "No successful sync yet";
+    }
+    return `Last successful sync ${new Date(timestamp).toLocaleTimeString()}`;
+  }
+
+  function renderConnectionNotice() {
+    const banner = connectionBanner();
+    if (!(banner instanceof HTMLElement)) {
+      return;
+    }
+    if (connectionState !== "disconnected") {
+      banner.hidden = true;
+      return;
+    }
+    const copy = connectionCopy();
+    const detail = connectionDetail();
+    if (copy) {
+      copy.textContent = "Local viewer server disconnected. Displayed data may be stale; waiting for reconnection.";
+    }
+    if (detail) {
+      detail.textContent = formatConnectionTime(lastSuccessfulSyncAt);
+    }
+    banner.hidden = false;
+  }
+
+  function markConnectionHealthy(options = {}) {
+    const wasDisconnected = connectionState === "disconnected";
+    connectionState = "connected";
+    lastSuccessfulSyncAt = Date.now();
+    renderConnectionNotice();
+    if (wasDisconnected && !options.silent) {
+      setMeta(`Reconnected · refreshed ${new Date(lastSuccessfulSyncAt).toLocaleTimeString()}`);
+    }
+  }
+
+  function markConnectionDisconnected(error) {
+    connectionState = "disconnected";
+    renderConnectionNotice();
+    scheduleNextAutoRefresh();
+    const message = error instanceof Error && error.message
+      ? error.message
+      : "Unable to reach local viewer server.";
+    setMeta(`Disconnected · ${message}`);
+  }
+
   function renderMeta() {
     const node = meta();
     if (node) {
@@ -215,13 +276,221 @@
 
   function updateRepositoryIdentity(payload) {
     latestRepoRoot = String(payload.root || latestRepoRoot || "");
+    latestProjects = Array.isArray(payload.projects) ? payload.projects : latestProjects;
+    const repository = payload.repository && typeof payload.repository === "object" ? payload.repository : {};
+    latestRepository = {
+      root: String(repository.root || latestRepoRoot || ""),
+      githubUrl: String(repository.githubUrl || "")
+    };
     const pill = repoPill();
-    if (!pill) {
+    if (pill) {
+      const repoName = String(payload.repoName || latestRepoRoot.split(/[\\/]/).filter(Boolean).pop() || "repository");
+      const label = pill.querySelector("[data-viewer-project-label]");
+      if (label) {
+        label.textContent = repoName;
+      } else {
+        pill.textContent = repoName;
+      }
+      pill.title = latestRepoRoot || repoName;
+      if ("disabled" in pill) {
+        pill.disabled = latestProjects.length <= 1;
+      }
+      pill.onclick = () => {
+        const menu = projectMenu();
+        setProjectMenuOpen(Boolean(menu?.hidden));
+      };
+    }
+    updateRepositoryShortcuts();
+    renderProjectMenu();
+  }
+
+  function projectStateLabel(project) {
+    if (project?.active) {
+      return "current";
+    }
+    if (project?.available === false) {
+      return "missing";
+    }
+    if (project?.hasLogics === false) {
+      return "no Logics";
+    }
+    return "available";
+  }
+
+  function renderProjectMenu() {
+    const menu = projectMenu();
+    if (!(menu instanceof HTMLElement)) {
       return;
     }
-    const repoName = String(payload.repoName || latestRepoRoot.split(/[\\/]/).filter(Boolean).pop() || "repository");
-    pill.textContent = repoName;
-    pill.title = latestRepoRoot || repoName;
+    const projects = latestProjects.filter((project) => project && typeof project === "object");
+    menu.innerHTML = projects.map((project) => `
+      <button class="viewer-project-switcher__item${project.active ? " is-active" : ""}" type="button" role="menuitem" data-viewer-project-id="${escapeHtml(project.id || "")}" title="${escapeHtml(project.root || project.name || "")}">
+        <span class="viewer-project-switcher__item-name">${escapeHtml(project.name || "project")}</span>
+        <span class="viewer-project-switcher__item-state">${escapeHtml(projectStateLabel(project))}</span>
+        <span class="viewer-project-switcher__item-path">${escapeHtml(project.root || "")}</span>
+      </button>
+    `).join("");
+  }
+
+  function setProjectMenuOpen(open) {
+    const button = repoPill();
+    const menu = projectMenu();
+    if (!(button instanceof HTMLElement) || !(menu instanceof HTMLElement)) {
+      return;
+    }
+    const nextOpen = Boolean(open) && latestProjects.length > 1;
+    menu.hidden = !nextOpen;
+    button.setAttribute("aria-expanded", nextOpen ? "true" : "false");
+  }
+
+  async function switchViewerProject(projectId) {
+    if (!projectId) {
+      return;
+    }
+    const target = latestProjects.find((project) => project.id === projectId);
+    if (!target || target.active) {
+      setProjectMenuOpen(false);
+      return;
+    }
+    setProjectMenuOpen(false);
+    setMeta(`Switching to ${target.name || "project"}...`);
+    const response = await fetch("/api/switch-project", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ projectId })
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to switch project.");
+    }
+    latestGitBadgeCounts = { unpushedCommits: 0, uncommittedFiles: 0 };
+    latestCiStatus = { visible: false, badgeState: "unknown", message: "" };
+    updateMainGitBadges();
+    updateMainCiBadge(latestCiStatus);
+    updateMainCdxBadge(null);
+    const panel = documentPanel();
+    if (panel) {
+      panel.hidden = true;
+    }
+    postToApp(data.payload);
+  }
+
+  async function bootstrapLogicsProject() {
+    setMeta("Bootstrapping Logics...");
+    const response = await fetch("/api/bootstrap-logics", { method: "POST" });
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to bootstrap Logics.");
+    }
+    postToApp(data.payload);
+    const created = Array.isArray(data.bootstrap?.created_paths) ? data.bootstrap.created_paths.length : 0;
+    setMeta(created > 0 ? `Logics bootstrapped · ${created} paths created.` : "Logics bootstrap checked.");
+  }
+
+  function normalizeCapabilities(payload) {
+    const capabilities = payload?.capabilities && typeof payload.capabilities === "object" ? payload.capabilities : {};
+    return {
+      logics: capabilities.logics || { state: "ready", available: true, message: "" },
+      git: capabilities.git || { state: "ready", available: true, message: "" },
+      ci: capabilities.ci || { state: "ready", available: true, message: "" },
+      cdx: capabilities.cdx || { state: "ready", available: true, message: "" },
+      cdxRuns: capabilities.cdxRuns || { state: "unsupported", available: false, message: "" }
+    };
+  }
+
+  function capability(name) {
+    return latestCapabilities?.[name] || { state: "unknown", available: false, message: "" };
+  }
+
+  function isCapabilityAvailable(name) {
+    return capability(name).available === true;
+  }
+
+  function capabilityMessage(name, fallback) {
+    return String(capability(name).message || fallback || "");
+  }
+
+  function setButtonUnavailable(button, message) {
+    if (!(button instanceof HTMLElement) || !("disabled" in button)) {
+      return;
+    }
+    button.disabled = true;
+    button.setAttribute("aria-disabled", "true");
+    button.title = message;
+  }
+
+  function setButtonAvailable(button, title) {
+    if (!(button instanceof HTMLElement) || !("disabled" in button)) {
+      return;
+    }
+    button.disabled = false;
+    button.removeAttribute("aria-disabled");
+    button.title = title;
+  }
+
+  function updateCapabilityControls() {
+    const gitButton = document.getElementById("viewer-git");
+    if (gitButton instanceof HTMLElement) {
+      gitButton.hidden = !isCapabilityAvailable("git");
+      if (isCapabilityAvailable("git")) {
+        setButtonAvailable(gitButton, "Show Git status");
+      } else {
+        setButtonUnavailable(gitButton, capabilityMessage("git", "Git is not available for this project."));
+      }
+    }
+
+    const ci = ciButton();
+    if (ci instanceof HTMLElement) {
+      ci.hidden = !isCapabilityAvailable("ci");
+      if (isCapabilityAvailable("ci")) {
+        setButtonAvailable(ci, "Show GitHub Actions CI status");
+      } else {
+        setButtonUnavailable(ci, capabilityMessage("ci", "CI is not available for this project."));
+      }
+    }
+
+    const cdx = document.getElementById("viewer-cdx");
+    if (cdx instanceof HTMLElement) {
+      if (isCapabilityAvailable("cdx")) {
+        setButtonAvailable(cdx, "Show CDX status");
+      } else {
+        setButtonUnavailable(cdx, capabilityMessage("cdx", "CDX is not available for this project."));
+      }
+    }
+  }
+
+  function updateRepositoryShortcuts() {
+    const github = repoGithubLink();
+    const folder = repoFolderButton();
+    if (github instanceof HTMLAnchorElement) {
+      if (latestRepository.githubUrl) {
+        github.hidden = false;
+        github.href = latestRepository.githubUrl;
+      } else {
+        github.hidden = true;
+        github.removeAttribute("href");
+      }
+    }
+    if (folder instanceof HTMLButtonElement) {
+      folder.hidden = !latestRepository.root;
+    }
+  }
+
+  async function openRepositoryFolder() {
+    if (!latestRepository.root) {
+      setMeta("Repository folder is unavailable.");
+      return;
+    }
+    try {
+      const response = await fetch("/api/open-repo-folder", { method: "POST" });
+      const data = await response.json();
+      if (!response.ok || !data.ok) {
+        throw new Error(data.error || "Unable to open repository folder.");
+      }
+      setMeta("Repository folder opened.");
+    } catch (error) {
+      setMeta(error instanceof Error ? error.message : "Unable to open repository folder.");
+    }
   }
 
   function normalizeGitBadgeCounts(payload) {
@@ -269,6 +538,151 @@
     }
   }
 
+  function ciBadgeTone(value) {
+    const state = String(value || "").toLowerCase();
+    if (state === "passing") {
+      return "passing";
+    }
+    if (state === "failing") {
+      return "failing";
+    }
+    if (state === "running" || state === "queued") {
+      return "running";
+    }
+    if (state === "cancelled") {
+      return "cancelled";
+    }
+    if (state === "unavailable") {
+      return "unavailable";
+    }
+    return "unknown";
+  }
+
+  function ciBadgeLabel(value) {
+    const state = ciBadgeTone(value);
+    if (state === "passing") {
+      return "pass";
+    }
+    if (state === "failing") {
+      return "fail";
+    }
+    if (state === "running") {
+      return String(value || "").toLowerCase() === "queued" ? "queue" : "run";
+    }
+    if (state === "cancelled") {
+      return "cancel";
+    }
+    if (state === "unavailable") {
+      return "auth";
+    }
+    return "n/a";
+  }
+
+  function renderCiButtonBadge(payload) {
+    const state = payload?.badgeState || payload?.state || "unknown";
+    const label = ciBadgeLabel(state);
+    const tone = ciBadgeTone(state);
+    return `<span class="viewer-ci-badge viewer-ci-badge--${escapeHtml(tone)}" data-viewer-ci-badge title="${escapeHtml(payload?.message || `CI ${label}`)}">${escapeHtml(label)}</span>`;
+  }
+
+  function updateMainCiBadge(payload = latestCiStatus) {
+    latestCiStatus = payload && typeof payload === "object" ? payload : { visible: false, badgeState: "unknown", message: "" };
+    const button = ciButton();
+    if (!(button instanceof HTMLElement)) {
+      return;
+    }
+    button.querySelector("[data-viewer-ci-badge]")?.remove();
+    if (!latestCiStatus.visible) {
+      button.hidden = true;
+      return;
+    }
+    button.hidden = false;
+    button.title = latestCiStatus.message || "Show GitHub Actions CI status";
+    button.insertAdjacentHTML("beforeend", renderCiButtonBadge(latestCiStatus));
+  }
+
+  async function refreshCiBadgeCounters() {
+    if (!isCapabilityAvailable("ci")) {
+      updateMainCiBadge({ visible: false, badgeState: "unknown", message: capabilityMessage("ci", "CI is not available for this project.") });
+      return;
+    }
+    try {
+      const response = await fetch("/api/ci-status");
+      if (response.status === 404) {
+        updateMainCiBadge({ visible: false, badgeState: "unknown", message: "CI status endpoint unavailable." });
+        return;
+      }
+      const data = await response.json();
+      if (response.ok && data.ok) {
+        updateMainCiBadge(data.payload);
+      }
+    } catch {
+      updateMainCiBadge({ visible: false, badgeState: "unknown", message: "CI status unavailable." });
+    }
+  }
+
+  function activeCdxAssistantCountFromPayload(payload) {
+    if (!payload || payload.state !== "ok") {
+      return 0;
+    }
+    const status = payload.status || {};
+    const sessions = cdxSessions(status);
+    const sessionActive = sessions.filter((session) => {
+      const state = String(session.state || session.status || session.availability || "").toLowerCase();
+      return session.active === true ||
+        state.includes("active") ||
+        state.includes("running") ||
+        state.includes("busy");
+    }).length;
+    if (sessionActive > 0) {
+      return sessionActive;
+    }
+    const rowsActive = cdxRows(status).filter((row) => row.active === true).length;
+    if (rowsActive > 0) {
+      return rowsActive;
+    }
+    return cdxProviders(status).reduce((total, provider) => total + Math.max(0, Number(provider.active || 0)), 0);
+  }
+
+  function updateMainCdxBadge(payload) {
+    const button = document.getElementById("viewer-cdx");
+    if (!(button instanceof HTMLElement)) {
+      return;
+    }
+    button.querySelector("[data-viewer-cdx-badge]")?.remove();
+    const activeCount = activeCdxAssistantCountFromPayload(payload);
+    if (activeCount <= 0) {
+      button.title = isCapabilityAvailable("cdx")
+        ? "Show CDX status"
+        : capabilityMessage("cdx", "CDX is not available for this project.");
+      return;
+    }
+    const label = activeCount > 9 ? "9+" : String(activeCount);
+    const title = activeCount === 1 ? "1 active assistant/session" : `${activeCount} active assistants/sessions`;
+    button.title = `Show CDX status · ${title}`;
+    button.insertAdjacentHTML("beforeend", `<span class="viewer-cdx-button-badge" data-viewer-cdx-badge title="${escapeHtml(title)}" aria-label="${escapeHtml(title)}">${escapeHtml(label)}</span>`);
+  }
+
+  async function refreshCdxBadgeCounters() {
+    if (!isCapabilityAvailable("cdx")) {
+      updateMainCdxBadge(null);
+      return;
+    }
+    try {
+      const response = await fetch("/api/cdx-status");
+      if (response.status === 404) {
+        updateMainCdxBadge(null);
+        return;
+      }
+      const data = await response.json();
+      if (response.ok && data.ok) {
+        updateMainCdxBadge(data.payload);
+      }
+    } catch {
+      updateMainCdxBadge(null);
+    }
+  }
+
   function setGitBadgeCountsFromPayload(payload, options = {}) {
     latestGitBadgeCounts = normalizeGitBadgeCounts(payload);
     if (options.updateMain !== false) {
@@ -277,6 +691,11 @@
   }
 
   async function refreshGitBadgeCounters() {
+    if (!isCapabilityAvailable("git")) {
+      latestGitBadgeCounts = { unpushedCommits: 0, uncommittedFiles: 0 };
+      updateMainGitBadges();
+      return;
+    }
     try {
       const response = await fetch("/api/git-status");
       const data = await response.json();
@@ -354,13 +773,10 @@
     }, 0);
   }
 
-  function applyFocusRequest(payload) {
-    if (focusApplied) {
-      return payload;
-    }
+  function applyFocusRequest(payload, options = {}) {
     const request = focusRequest();
     if (!request.focus) {
-      if (window.location.search.includes("focus=")) {
+      if (!focusApplied && !options.silent && window.location.search.includes("focus=")) {
         window.setTimeout(() => setMeta("Invalid focus target. Loaded corpus without changing selection."), 0);
       }
       focusApplied = true;
@@ -368,14 +784,20 @@
     }
     const item = findFocusItem(request.focus);
     if (!item) {
-      window.setTimeout(() => setMeta(`Focus target not found: ${request.focus}`), 0);
+      if (!focusApplied && !options.silent) {
+        window.setTimeout(() => setMeta(`Focus target not found: ${request.focus}`), 0);
+      }
       focusApplied = true;
       return payload;
     }
+    const nextPayload = { ...payload, selectedId: item.id };
+    if (focusApplied) {
+      persistSelectedItem(item.id);
+      return nextPayload;
+    }
     viewerFilterState = { ...viewerFilterState, focus: "all", type: "all", status: "any", relation: "any", activity: "any" };
     persistSelectedItem(item.id);
     focusApplied = true;
-    const nextPayload = { ...payload, selectedId: item.id };
     window.setTimeout(() => {
       revealFocusedCard(item);
       if (request.read) {
@@ -526,14 +948,17 @@
   }
 
   function postToApp(payload, options = {}) {
+    markConnectionHealthy({ silent: Boolean(options.silent) });
     latestItems = updateStoredActivity(Array.isArray(payload.items) ? payload.items : []);
     if (!autoRefreshIntervalTouched) {
       autoRefreshIntervalMs = normalizeAutoRefreshIntervalSeconds(payload.autoRefreshIntervalSeconds) * 1000;
       updateRefreshIntervalControl();
     }
     updateRepositoryIdentity(payload);
+    latestCapabilities = normalizeCapabilities(payload);
+    updateCapabilityControls();
     const payloadWithActivity = { ...payload, items: latestItems };
-    const nextPayload = options.silent ? payloadWithActivity : applyFocusRequest(payloadWithActivity);
+    const nextPayload = applyFocusRequest(payloadWithActivity, { silent: Boolean(options.silent) });
     window.dispatchEvent(new MessageEvent("message", { data: { type: "data", payload: nextPayload } }));
     const rootName = payload.root ? payload.root.split(/[\\/]/).filter(Boolean).pop() : "repository";
     if (!options.silent) {
@@ -541,6 +966,8 @@
     }
     scheduleNextAutoRefresh();
     renderUpdateNotice(payload.updateInfo);
+    refreshCiBadgeCounters();
+    refreshCdxBadgeCounters();
     updateFilterSummary();
     applyLocalViewerChrome();
     bindRefreshMenuControls();
@@ -585,6 +1012,9 @@
         await refreshGitBadgeCounters();
       }
       return true;
+    } catch (error) {
+      markConnectionDisconnected(error);
+      throw error;
     } finally {
       itemsLoadInFlight = false;
     }
@@ -602,12 +1032,28 @@
     return Boolean(panel && !panel.hidden && title && title.textContent === "CDX status");
   }
 
+  function isCdxRunsOpen() {
+    const panel = documentPanel();
+    const title = documentTitle();
+    return Boolean(panel && !panel.hidden && title && title.textContent === "CDX runs");
+  }
+
+  function isCiStatusOpen() {
+    const panel = documentPanel();
+    const title = documentTitle();
+    return Boolean(panel && !panel.hidden && title && title.textContent === "CI status");
+  }
+
   async function refreshViewer(method = "POST", options = {}) {
     await loadItems(method, options);
     if (isGitStatusOpen()) {
       await showGitStatus({ preserve: true, silent: Boolean(options.silent) });
+    } else if (isCiStatusOpen()) {
+      await showCiStatus({ silent: Boolean(options.silent) });
     } else if (isCdxStatusOpen()) {
       await showCdxStatus({ silent: Boolean(options.silent) });
+    } else if (isCdxRunsOpen()) {
+      await showCdxRuns({ silent: Boolean(options.silent) });
     } else if (method === "POST") {
       await refreshGitBadgeCounters();
     }
@@ -893,14 +1339,43 @@
   }
 
   function renderMetricCards(entries) {
-    return entries.map(([label, value]) => `
-      <div class="viewer-insights__card">
+    return entries.map(([label, value, tone]) => `
+      <div class="viewer-insights__card${tone ? ` viewer-insights__card--${escapeHtml(tone)}` : ""}">
         <div class="viewer-insights__label">${escapeHtml(label)}</div>
         <div class="viewer-insights__value">${escapeHtml(value)}</div>
       </div>
     `).join("");
   }
 
+  function renderInsightBars(entries, total) {
+    const denominator = Math.max(1, Number(total) || 0);
+    if (!entries.length) {
+      return '<li class="viewer-insights__bar-row">No corpus shape available</li>';
+    }
+    return entries.map(([label, value]) => {
+      const count = Number(value) || 0;
+      const width = Math.max(count > 0 ? 4 : 0, Math.min(100, Math.round((count / denominator) * 100)));
+      return `
+        <li class="viewer-insights__bar-row">
+          <div class="viewer-insights__bar-meta"><span>${escapeHtml(label)}</span><strong>${escapeHtml(count)}</strong></div>
+          <div class="viewer-insights__bar-track" aria-hidden="true"><span style="width: ${width}%"></span></div>
+        </li>
+      `;
+    }).join("");
+  }
+
+  function renderSignalRows(items, emptyText = "No signals") {
+    if (!items.length) {
+      return `<li class="viewer-insights__signal viewer-insights__signal--empty">${escapeHtml(emptyText)}</li>`;
+    }
+    return items.map(([label, value, tone]) => `
+      <li class="viewer-insights__signal${tone ? ` viewer-insights__signal--${escapeHtml(tone)}` : ""}">
+        <span>${escapeHtml(label)}</span>
+        <strong>${escapeHtml(value)}</strong>
+      </li>
+    `).join("");
+  }
+
   function renderInsightRows(items, emptyText = "No signals") {
     if (!items.length) {
       return `<li class="viewer-insights__item">${escapeHtml(emptyText)}</li>`;
@@ -1046,63 +1521,80 @@
     const stageRows = Object.entries(countsByStage)
       .sort((left, right) => String(left[0]).localeCompare(String(right[0])))
       .map(([stage, count]) => [stage, count]);
+    const qualityTotal = qualityFindings.length;
+    const needsAttention = blocked.length + incompleteChains.length + brokenRefs.length + missingStatus.length + qualityTotal;
+    const activeQuiet = Math.max(0, open.length - recentlyModified.length - staleActive.length);
+    const primaryState = needsAttention > 0
+      ? `${needsAttention} signals need attention`
+      : "No immediate workflow risk detected";
     return `
       <div class="viewer-insights">
-        <div class="viewer-insights__summary">${renderMetricCards([
-          ["Docs", docs.length],
-          ["Open", open.length],
-          ["Closed", closed.length],
-          ["Blocked", blocked.length],
-          ["Missing status", missingStatus.length],
-          ["Modified 7d", recentlyModified.length]
-        ])}</div>
-        <section class="viewer-insights__section">
-          <h2>Overview</h2>
-          <ul class="viewer-insights__list">${renderInsightRows(stageRows, "No docs loaded")}</ul>
-        </section>
-        <section class="viewer-insights__section">
-          <h2>Flow health</h2>
-          <ul class="viewer-insights__list">${renderInsightRows([
-            ["Incomplete workflow chains", incompleteChains.length],
-            ["Promotion gaps", incompleteChains.filter((item) => item.stage === "request" || item.stage === "backlog").length],
-            ["Orphan or unlinked docs", unlinked.length],
-            ["Broken reference risks", brokenRefs.length]
-          ])}</ul>
-          <ul class="viewer-insights__rows">${renderDocRows(incompleteChains, "No incomplete chains")}</ul>
-        </section>
-        <section class="viewer-insights__section">
-          <h2>Activity</h2>
-          <ul class="viewer-insights__list">${renderInsightRows([
-            ["Latest changes", recentRows.map(itemLabel).join(", ") || "None"],
-            ["Stale active docs", staleActive.map(itemLabel).join(", ") || "None"],
-            ["Recently active docs", recentlyModified.slice(0, 8).map(itemLabel).join(", ") || "None"],
-            ["Activity classification", `recent ${recentlyModified.length}, stale ${open.filter(isStale).length}, quiet ${Math.max(0, open.length - recentlyModified.length)}`]
-          ])}</ul>
-          <ul class="viewer-insights__rows">${renderDocRows(recentRows, "No recent documents")}</ul>
-        </section>
-        <section class="viewer-insights__section">
-          <h2>Traceability</h2>
-          <ul class="viewer-insights__list">${renderInsightRows([
-            ["Most referenced docs", mostReferenced.map((item) => `${item.id} (${(item.usedBy || []).length})`).join(", ") || "None"],
-            ["Unlinked docs", unlinked.slice(0, 8).map((item) => item.id).join(", ") || "None"],
-            ["Broken references", brokenRefs.slice(0, 8).join(", ") || "None"],
-            ["Relationships by type", Object.entries(relationshipCounts).map(([stage, count]) => `${stage} ${count}`).join(", ") || "None"]
-          ])}</ul>
-          <ul class="viewer-insights__rows">${renderDocRows(unlinked, "No unlinked documents")}${renderPathRows(brokenRefs, "No broken references")}</ul>
-        </section>
-        <section class="viewer-insights__section">
-          <h2>Quality signals</h2>
-          <ul class="viewer-insights__list">${renderInsightRows([
-            ["Lint/audit categories", Object.entries(qualityBySource).map(([key, count]) => `${key} ${count}`).join(", ") || "No findings loaded"],
-            ["Findings by document type", Object.entries(qualityByDocType).map(([key, count]) => `${key} ${count}`).join(", ") || "No findings loaded"],
-            ["Concentrated issues", concentratedIssues.map(([key, count]) => `${key} ${count}`).join(", ") || "None"]
-          ])}</ul>
-          <ul class="viewer-insights__rows">${renderPathRows(concentratedIssues.map(([key, count]) => `${key} (${count})`), "No concentrated issues")}</ul>
+        <section class="viewer-insights__hero">
+          <div>
+            <h2>Overview</h2>
+            <p>${escapeHtml(primaryState)} across ${escapeHtml(docs.length)} workflow docs.</p>
+          </div>
+          <div class="viewer-insights__summary">${renderMetricCards([
+            ["Docs", docs.length],
+            ["Needs attention", needsAttention, needsAttention ? "warning" : "ok"],
+            ["Recent 7d", recentlyModified.length],
+            ["Quality findings", qualityTotal, qualityTotal ? "warning" : "ok"]
+          ])}</div>
         </section>
         <section class="viewer-insights__section">
           <h2>Operator actions</h2>
-          <ul class="viewer-insights__rows">${renderActionRows(actions)}</ul>
+          <ul class="viewer-insights__rows viewer-insights__rows--actions">${renderActionRows(actions)}</ul>
         </section>
+        <div class="viewer-insights__workspace">
+          <section class="viewer-insights__section">
+            <h2>Corpus shape</h2>
+            <ul class="viewer-insights__bars">${renderInsightBars(stageRows, docs.length)}</ul>
+            <ul class="viewer-insights__list">${renderInsightRows([
+              ["Open", open.length],
+              ["Closed", closed.length],
+              ["Blocked", blocked.length],
+              ["Missing status", missingStatus.length]
+            ])}</ul>
+          </section>
+          <section class="viewer-insights__section">
+            <h2>Flow health</h2>
+            <ul class="viewer-insights__signals">${renderSignalRows([
+              ["Incomplete workflow chains", incompleteChains.length, incompleteChains.length ? "warning" : "ok"],
+              ["Promotion gaps", incompleteChains.filter((item) => item.stage === "request" || item.stage === "backlog").length, incompleteChains.length ? "warning" : "ok"],
+              ["Orphan or unlinked docs", unlinked.length, unlinked.length ? "muted" : "ok"],
+              ["Broken reference risks", brokenRefs.length, brokenRefs.length ? "warning" : "ok"]
+            ])}</ul>
+            <ul class="viewer-insights__rows">${renderDocRows(incompleteChains, "No incomplete chains")}</ul>
+          </section>
+          <section class="viewer-insights__section">
+            <h2>Activity</h2>
+            <ul class="viewer-insights__signals">${renderSignalRows([
+              ["Recently active docs", recentlyModified.length],
+              ["Stale active docs", staleActive.length, staleActive.length ? "warning" : "ok"],
+              ["Quiet active docs", activeQuiet]
+            ])}</ul>
+            <ul class="viewer-insights__rows">${renderDocRows(recentRows, "No recent documents")}</ul>
+          </section>
+          <section class="viewer-insights__section">
+            <h2>Traceability</h2>
+            <ul class="viewer-insights__signals">${renderSignalRows([
+              ["Broken references", brokenRefs.length, brokenRefs.length ? "warning" : "ok"],
+              ["Unlinked docs", unlinked.length, unlinked.length ? "muted" : "ok"],
+              ["Most referenced docs", mostReferenced.map((item) => `${item.id} (${(item.usedBy || []).length})`).join(", ") || "None"],
+              ["Relationships by type", Object.entries(relationshipCounts).map(([stage, count]) => `${stage} ${count}`).join(", ") || "None"]
+            ])}</ul>
+            <ul class="viewer-insights__rows">${renderPathRows(brokenRefs, "No broken references")}${renderDocRows(unlinked, "No unlinked documents")}</ul>
+          </section>
+          <section class="viewer-insights__section viewer-insights__section--wide">
+            <h2>Quality signals</h2>
+            <ul class="viewer-insights__signals">${renderSignalRows([
+              ["Lint/audit categories", Object.entries(qualityBySource).map(([key, count]) => `${key} ${count}`).join(", ") || "No findings loaded", qualityTotal ? "warning" : "ok"],
+              ["Findings by document type", Object.entries(qualityByDocType).map(([key, count]) => `${key} ${count}`).join(", ") || "No findings loaded"],
+              ["Concentrated issues", concentratedIssues.map(([key, count]) => `${key} ${count}`).join(", ") || "None"]
+            ])}</ul>
+            <ul class="viewer-insights__rows">${renderPathRows(concentratedIssues.map(([key, count]) => `${key} (${count})`), "No concentrated issues")}</ul>
+          </section>
+        </div>
       </div>
     `;
   }
@@ -1614,10 +2106,20 @@
     return rows || `<li class="viewer-cdx__empty">${escapeHtml(emptyText)}</li>`;
   }
 
+  function renderCdxModeSwitcher(active) {
+    return `
+      <div class="viewer-cdx__modes" role="tablist" aria-label="CDX views">
+        <button class="viewer-cdx__mode${active === "status" ? " is-active" : ""}" type="button" data-viewer-cdx-mode="status" aria-selected="${active === "status" ? "true" : "false"}">Status</button>
+        <button class="viewer-cdx__mode${active === "runs" ? " is-active" : ""}" type="button" data-viewer-cdx-mode="runs" aria-selected="${active === "runs" ? "true" : "false"}">Runs</button>
+      </div>
+    `;
+  }
+
   function renderCdxStatus(payload) {
     if (!payload || payload.state !== "ok") {
       return `
         <div class="viewer-cdx">
+          ${renderCdxModeSwitcher("status")}
           <div class="viewer-cdx__state">${escapeHtml(payload?.message || "CDX status is unavailable.")}</div>
         </div>
       `;
@@ -1653,6 +2155,7 @@
     `).join("");
     return `
       <div class="viewer-cdx">
+        ${renderCdxModeSwitcher("status")}
         <div class="viewer-cdx__summary">${cards}</div>
         <div class="viewer-cdx__workspace">
           <div class="viewer-cdx__stack">
@@ -1680,7 +2183,87 @@
     `;
   }
 
+  function renderCdxRuns(payload) {
+    if (!payload || payload.state !== "ok") {
+      return `
+        <div class="viewer-cdx">
+          ${renderCdxModeSwitcher("runs")}
+          <div class="viewer-cdx__state">${escapeHtml(payload?.message || "CDX runs are unavailable.")}</div>
+        </div>
+      `;
+    }
+    const runs = Array.isArray(payload.runs) ? payload.runs : [];
+    const rows = runs.map((run) => `
+      <tr>
+        <td><code>${escapeHtml(run.run_id || "-")}</code></td>
+        <td>${renderCdxBadge(run.status || "unknown")}</td>
+        <td>${escapeHtml(run.kind || "assistant")}</td>
+        <td>${escapeHtml(run.session || "-")}</td>
+        <td>${escapeHtml(run.cwd || "-")}</td>
+        <td><button class="viewer-cdx__mode" type="button" data-viewer-cdx-report="${escapeHtml(run.run_id || "")}">Report</button></td>
+      </tr>
+    `).join("");
+    return `
+      <div class="viewer-cdx">
+        ${renderCdxModeSwitcher("runs")}
+        <section class="viewer-cdx__section">
+          <div class="viewer-ci__heading"><h2>Assistant runs</h2><span>${escapeHtml(runs.length)} reported</span></div>
+          <div class="viewer-cdx__table-wrap">
+            <table class="viewer-cdx__table">
+              <thead><tr><th>RUN</th><th>STATUS</th><th>KIND</th><th>SESSION</th><th>CWD</th><th>REPORT</th></tr></thead>
+              <tbody>${rows || '<tr><td colspan="6" class="viewer-cdx__empty">No assistant runs reported.</td></tr>'}</tbody>
+            </table>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+
+  function renderCdxReport(payload) {
+    if (!payload || payload.state !== "ok" || !payload.report) {
+      return `
+        <div class="viewer-cdx">
+          ${renderCdxModeSwitcher("runs")}
+          <div class="viewer-cdx__state">${escapeHtml(payload?.message || "CDX run report is unavailable.")}</div>
+        </div>
+      `;
+    }
+    const report = payload.report || {};
+    const run = report.run || {};
+    const taskReport = report.task_report || {};
+    const findings = Array.isArray(taskReport.findings) ? taskReport.findings : [];
+    const findingRows = findings.map((finding, index) => {
+      const location = [finding.path || finding.file || "", finding.line || ""].filter(Boolean).join(":") || "-";
+      return `<li class="viewer-cdx__entity"><div class="viewer-cdx__entity-main"><div><strong>${escapeHtml(finding.message || finding.title || `Finding ${index + 1}`)}</strong><div class="viewer-cdx__meta">${escapeHtml(location)}</div></div>${renderCdxBadge(finding.severity || "unknown")}</div></li>`;
+    }).join("");
+    const canCreate = taskReport.kind === "code-review";
+    return `
+      <div class="viewer-cdx">
+        ${renderCdxModeSwitcher("runs")}
+        <section class="viewer-cdx__section">
+          <div class="viewer-ci__heading"><h2>Run report</h2><span>${escapeHtml(run.status || "unknown")}</span></div>
+          <ul class="viewer-cdx__list">
+            <li class="viewer-cdx__row"><span>Run</span><strong>${escapeHtml(run.run_id || taskReport.run_id || "-")}</strong></li>
+            <li class="viewer-cdx__row"><span>Kind</span><strong>${escapeHtml(taskReport.kind || run.kind || "assistant")}</strong></li>
+            <li class="viewer-cdx__row"><span>Summary</span><strong>${escapeHtml(taskReport.summary || "No summary reported.")}</strong></li>
+          </ul>
+          ${canCreate ? `<button class="btn" type="button" data-viewer-cdx-create-request="${escapeHtml(run.run_id || taskReport.run_id || "")}">Create Logics request</button>` : ""}
+        </section>
+        <section class="viewer-cdx__section">
+          <div class="viewer-ci__heading"><h2>Findings</h2><span>${escapeHtml(findings.length)} reported</span></div>
+          <ul class="viewer-cdx__list">${findingRows || '<li class="viewer-cdx__empty">No structured findings reported.</li>'}</ul>
+        </section>
+      </div>
+    `;
+  }
+
   async function showCdxStatus(options = {}) {
+    if (!isCapabilityAvailable("cdx")) {
+      const message = capabilityMessage("cdx", "CDX is not available for this project.");
+      setDocument("CDX status", renderCdxStatus({ state: capability("cdx").state, message }));
+      setMeta(message);
+      return;
+    }
     if (!options.silent) {
       setMeta("Checking CDX status...");
     }
@@ -1702,10 +2285,170 @@
     if (!response.ok || !data.ok) {
       throw new Error(data.error || "Unable to load CDX status.");
     }
+    updateMainCdxBadge(data.payload);
     setDocument("CDX status", renderCdxStatus(data.payload));
     setMeta(options.silent ? "CDX status refreshed." : "CDX status loaded.");
   }
 
+  async function showCdxRuns(options = {}) {
+    if (!isCapabilityAvailable("cdx")) {
+      const message = capabilityMessage("cdx", "CDX is not available for this project.");
+      setDocument("CDX runs", renderCdxRuns({ state: capability("cdx").state, message }));
+      setMeta(message);
+      return;
+    }
+    if (!options.silent) {
+      setMeta("Checking CDX runs...");
+    }
+    const response = await fetch("/api/cdx-runs");
+    let data = {};
+    try {
+      data = await response.json();
+    } catch {
+      data = {};
+    }
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to load CDX runs.");
+    }
+    setDocument("CDX runs", renderCdxRuns(data.payload));
+    setMeta(options.silent ? "CDX runs refreshed." : "CDX runs loaded.");
+  }
+
+  async function showCdxReport(runId) {
+    if (!runId) {
+      return;
+    }
+    setMeta("Loading CDX report...");
+    const response = await fetch(`/api/cdx-run-report?${new URLSearchParams({ runId }).toString()}`);
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to load CDX report.");
+    }
+    setDocument("CDX run report", renderCdxReport(data.payload));
+    setMeta("CDX report loaded.");
+  }
+
+  async function createRequestFromCdxReport(runId) {
+    if (!runId) {
+      return;
+    }
+    setMeta("Creating Logics request from CDX report...");
+    const response = await fetch("/api/cdx-report-request", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ runId })
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to create Logics request.");
+    }
+    postToApp(data.payload);
+    setMeta(`Created ${data.created?.id || "Logics request"} from CDX report.`);
+  }
+
+  function renderCiBadge(value) {
+    const tone = ciBadgeTone(value);
+    return `<span class="viewer-ci__badge viewer-ci__badge--${escapeHtml(tone)}">${escapeHtml(ciBadgeLabel(value))}</span>`;
+  }
+
+  function formatCiDate(value) {
+    const timestamp = Date.parse(String(value || ""));
+    if (!Number.isFinite(timestamp)) {
+      return "";
+    }
+    return new Date(timestamp).toLocaleString();
+  }
+
+  function renderCiStatus(payload) {
+    if (!payload || !payload.visible) {
+      return `
+        <div class="viewer-ci">
+          <div class="viewer-ci__state">${escapeHtml(payload?.message || "GitHub Actions CI is not configured for this repository.")}</div>
+        </div>
+      `;
+    }
+    const run = payload.run && typeof payload.run === "object" ? payload.run : null;
+    const jobs = Array.isArray(payload.jobs) ? payload.jobs : [];
+    const state = payload.badgeState || run?.badgeState || payload.state || "unknown";
+    const cards = renderMetricCards([
+      ["State", ciBadgeLabel(state)],
+      ["Branch", run?.branch || payload.branch || "Unknown"],
+      ["Commit", (run?.headSha || payload.headSha || "").slice(0, 7) || "Unknown"],
+      ["Match", run?.matchSource === "head" ? "Current HEAD" : "Latest branch run"]
+    ]);
+    const runUrl = run?.htmlUrl ? `<a class="viewer-ci__link" href="${escapeHtml(run.htmlUrl)}" target="_blank" rel="noreferrer">Open in GitHub</a>` : "";
+    const runRows = run ? [
+      ["Workflow", run.workflowName || run.name || "GitHub Actions"],
+      ["Status", `${run.status || "unknown"}${run.conclusion ? ` / ${run.conclusion}` : ""}`],
+      ["Event", run.event || "Unknown"],
+      ["Commit", run.commitMessage || payload.subject || "Unknown"],
+      ["Author", run.author || payload.author || "Unknown"],
+      ["Started", formatCiDate(run.runStartedAt || run.createdAt) || "Unknown"],
+      ["Updated", formatCiDate(run.updatedAt) || "Unknown"]
+    ].map(([label, value]) => `
+      <li class="viewer-ci__row"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></li>
+    `).join("") : `<li class="viewer-ci__empty">${escapeHtml(payload.message || "No GitHub Actions run found for this branch.")}</li>`;
+    const jobRows = jobs.length ? jobs.map((job) => {
+      const jobState = ciBadgeTone(job.conclusion || job.status);
+      const content = `
+        <span>${escapeHtml(job.name || "Job")}</span>
+        <strong>${escapeHtml([job.status, job.conclusion].filter(Boolean).join(" / ") || "unknown")}</strong>
+      `;
+      return `<li class="viewer-ci__job viewer-ci__job--${escapeHtml(jobState)}">${job.htmlUrl ? `<a href="${escapeHtml(job.htmlUrl)}" target="_blank" rel="noreferrer">${content}</a>` : content}</li>`;
+    }).join("") : `<li class="viewer-ci__empty">No job details reported.</li>`;
+    return `
+      <div class="viewer-ci">
+        <div class="viewer-ci__summary">${cards}</div>
+        <div class="viewer-ci__workspace">
+          <section class="viewer-ci__section">
+            <div class="viewer-ci__heading"><h2>Latest run</h2>${renderCiBadge(state)}</div>
+            <ul class="viewer-ci__list">${runRows}</ul>
+            ${runUrl}
+          </section>
+          <section class="viewer-ci__section">
+            <div class="viewer-ci__heading"><h2>Jobs</h2><span>${escapeHtml(jobs.length)} reported</span></div>
+            <ul class="viewer-ci__jobs">${jobRows}</ul>
+          </section>
+        </div>
+      </div>
+    `;
+  }
+
+  async function showCiStatus(options = {}) {
+    if (!isCapabilityAvailable("ci")) {
+      const message = capabilityMessage("ci", "CI is not available for this project.");
+      setDocument("CI status", renderCiStatus({ visible: false, state: capability("ci").state, message }));
+      setMeta(message);
+      return;
+    }
+    if (!options.silent) {
+      setMeta("Checking CI status...");
+    }
+    const response = await fetch("/api/ci-status");
+    let data = {};
+    try {
+      data = await response.json();
+    } catch {
+      data = {};
+    }
+    if (response.status === 404) {
+      setDocument("CI status", renderCiStatus({
+        visible: true,
+        state: "unavailable",
+        badgeState: "unavailable",
+        message: "CI status endpoint unavailable. Restart the local viewer so it loads the current logics-manager backend."
+      }));
+      setMeta("Restart the local viewer to enable CI status.");
+      return;
+    }
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to load CI status.");
+    }
+    updateMainCiBadge(data.payload);
+    setDocument("CI status", renderCiStatus(data.payload));
+    setMeta(options.silent ? "CI status refreshed." : "CI status loaded.");
+  }
+
   function renderGitStatus(payload) {
     if (!payload || payload.state !== "ok") {
       return `
@@ -1785,9 +2528,16 @@
     const untrackedSections = renderFileSections(["untracked"]);
     const clean = payload.clean ? '<p class="viewer-git__state">Working tree clean.</p>' : "";
     const recentCommits = Array.isArray(payload.recentCommits) ? payload.recentCommits : [];
+    const renderGitHistoryReveal = (hiddenCount) => {
+      if (hiddenCount <= 0) {
+        return "";
+      }
+      const nextCount = Math.min(gitHistoryPageSize, hiddenCount);
+      return `<li class="viewer-git__commit-row viewer-git__commit-row--reveal"><button class="viewer-git__reveal" type="button" data-viewer-git-history-reveal>Show ${escapeHtml(nextCount)} more</button></li>`;
+    };
     const historyRows = recentCommits.length
-      ? recentCommits.map((commit) => `
-        <li class="viewer-git__commit-row">
+      ? recentCommits.map((commit, index) => `
+        <li class="viewer-git__commit-row" ${index >= gitHistoryPageSize ? "hidden data-viewer-git-history-hidden" : ""}>
           <div class="viewer-git__commit-main">
             <code>${escapeHtml(commit.hash || "")}</code>
             <strong>${escapeHtml(commit.subject || "Untitled commit")}</strong>
@@ -1797,7 +2547,7 @@
             ${commit.refs ? `<span class="viewer-git__commit-refs">${escapeHtml(commit.refs)}</span>` : ""}
           </div>
         </li>
-      `).join("")
+      `).join("") + renderGitHistoryReveal(Math.max(0, recentCommits.length - gitHistoryPageSize))
       : `<li class="viewer-git__commit-row">${escapeHtml(payload.latestCommit || "No commit history available.")}</li>`;
     const history = `
       <section class="viewer-git__section">
@@ -1944,6 +2694,12 @@
 
   async function showGitStatus(options = {}) {
     const previous = options.preserve ? currentGitViewState() : { domain: "changes", path: "", cached: false };
+    if (!isCapabilityAvailable("git")) {
+      const message = capabilityMessage("git", "Git is not available for this project.");
+      setDocument("Git status", renderGitStatus({ state: capability("git").state, message }));
+      setMeta(message);
+      return;
+    }
     if (!options.silent) {
       setMeta("Checking Git status...");
     }
@@ -1991,6 +2747,10 @@
           refreshViewer("POST").catch((error) => setMeta(error.message));
           return;
         }
+        if (message.type === "bootstrap-logics") {
+          bootstrapLogicsProject().catch((error) => setMeta(error.message));
+          return;
+        }
         if (message.type === "open" || message.type === "read") {
           const item = latestItems.find((entry) => entry.id === message.id);
           showDocument(item).catch((error) => setMeta(error.message));
@@ -2021,6 +2781,7 @@
     applyLocalViewerChrome();
     [document.getElementById("viewer-insights")].forEach((button) => {
       button?.addEventListener("click", () => {
+        setRefreshMenuOpen(false);
         showCorpusInsights().catch((error) => setMeta(error.message));
       });
     });
@@ -2070,14 +2831,25 @@
       });
     });
     document.getElementById("viewer-health")?.addEventListener("click", () => {
+      setRefreshMenuOpen(false);
       showHealth().catch((error) => setMeta(error.message));
     });
     document.getElementById("viewer-git")?.addEventListener("click", () => {
       showGitStatus().catch((error) => setMeta(error.message));
     });
+    ciButton()?.addEventListener("click", () => {
+      showCiStatus().catch((error) => setMeta(error.message));
+    });
     document.getElementById("viewer-cdx")?.addEventListener("click", () => {
       showCdxStatus().catch((error) => setMeta(error.message));
     });
+    repoPill()?.addEventListener("click", () => {
+      const menu = projectMenu();
+      setProjectMenuOpen(Boolean(menu?.hidden));
+    });
+    repoFolderButton()?.addEventListener("click", () => {
+      openRepositoryFolder().catch((error) => setMeta(error.message));
+    });
     activityClearControl()?.addEventListener("click", () => {
       clearActivityHistory();
     });
@@ -2110,8 +2882,66 @@
       const healthTarget = event.target instanceof Element ? event.target.closest("[data-viewer-open-health]") : null;
       const filterTarget = event.target instanceof Element ? event.target.closest("[data-viewer-filter-group][data-viewer-filter-value]") : null;
       const revealTarget = event.target instanceof Element ? event.target.closest("[data-viewer-reveal]") : null;
+      const gitHistoryRevealTarget = event.target instanceof Element ? event.target.closest("[data-viewer-git-history-reveal]") : null;
       const gitDomainTarget = event.target instanceof Element ? event.target.closest(".viewer-git__domain[data-viewer-git-domain]") : null;
       const gitFileTarget = event.target instanceof Element ? event.target.closest("[data-viewer-git-file]") : null;
+      const projectSwitcherTarget = event.target instanceof Element ? event.target.closest("#viewer-repo-pill") : null;
+      const projectTarget = event.target instanceof Element ? event.target.closest("[data-viewer-project-id]") : null;
+      const cdxModeTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-mode]") : null;
+      const cdxReportTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-report]") : null;
+      const cdxCreateRequestTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-create-request]") : null;
+      if (cdxReportTarget instanceof HTMLElement) {
+        showCdxReport(cdxReportTarget.getAttribute("data-viewer-cdx-report") || "").catch((error) => setMeta(error.message));
+        return;
+      }
+      if (cdxCreateRequestTarget instanceof HTMLElement) {
+        createRequestFromCdxReport(cdxCreateRequestTarget.getAttribute("data-viewer-cdx-create-request") || "").catch((error) => setMeta(error.message));
+        return;
+      }
+      if (cdxModeTarget instanceof HTMLElement) {
+        const mode = cdxModeTarget.getAttribute("data-viewer-cdx-mode") || "status";
+        if (mode === "runs") {
+          showCdxRuns().catch((error) => setMeta(error.message));
+        } else {
+          showCdxStatus().catch((error) => setMeta(error.message));
+        }
+        return;
+      }
+      if (projectSwitcherTarget instanceof HTMLElement) {
+        const menu = projectMenu();
+        setProjectMenuOpen(Boolean(menu?.hidden));
+        return;
+      }
+      if (projectTarget instanceof HTMLElement) {
+        event.preventDefault();
+        switchViewerProject(projectTarget.getAttribute("data-viewer-project-id") || "").catch((error) => setMeta(error.message));
+        return;
+      }
+      if (gitHistoryRevealTarget instanceof HTMLElement) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (gitHistoryRevealTarget.dataset.viewerGitHistoryBusy === "true") {
+          return;
+        }
+        gitHistoryRevealTarget.dataset.viewerGitHistoryBusy = "true";
+        const list = gitHistoryRevealTarget.closest("ul");
+        const hiddenRows = Array.from(list?.querySelectorAll("[data-viewer-git-history-hidden]") || [])
+          .filter((row) => row instanceof HTMLElement);
+        hiddenRows.slice(0, gitHistoryPageSize).forEach((row) => {
+          if (row instanceof HTMLElement) {
+            row.hidden = false;
+            row.removeAttribute("data-viewer-git-history-hidden");
+          }
+        });
+        const remaining = Array.from(list?.querySelectorAll("[data-viewer-git-history-hidden]") || []).length;
+        if (remaining > 0) {
+          gitHistoryRevealTarget.textContent = `Show ${Math.min(gitHistoryPageSize, remaining)} more`;
+          gitHistoryRevealTarget.dataset.viewerGitHistoryBusy = "false";
+        } else {
+          gitHistoryRevealTarget.closest("li")?.remove();
+        }
+        return;
+      }
       if (revealTarget instanceof HTMLElement) {
         const list = revealTarget.closest("ul");
         list?.querySelectorAll("[data-viewer-hidden-row]").forEach((row) => {