@grifhinz/logics-manager 2.5.1 → 2.6.0

package/clients/viewer/browser-host.js

@@ -8,14 +8,21 @@
   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 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 +36,7 @@
   let viewerFilterState = { ...defaultFilterState };
   let latestItems = [];
   let latestRepoRoot = "";
+  let latestRepository = { root: "", githubUrl: "" };
   let latestMetaText = "Read-only local viewer";
   let autoRefreshIntervalMs = defaultAutoRefreshIntervalMs;
   let nextAutoRefreshAt = 0;
@@ -42,6 +50,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 +168,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 +273,52 @@
 
   function updateRepositoryIdentity(payload) {
     latestRepoRoot = String(payload.root || latestRepoRoot || "");
+    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");
+      pill.textContent = repoName;
+      pill.title = latestRepoRoot || repoName;
+    }
+    updateRepositoryShortcuts();
+  }
+
+  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;
     }
-    const repoName = String(payload.repoName || latestRepoRoot.split(/[\\/]/).filter(Boolean).pop() || "repository");
-    pill.textContent = repoName;
-    pill.title = latestRepoRoot || repoName;
+    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 +366,141 @@
     }
   }
 
+  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() {
+    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 = "Show CDX status";
+      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() {
+    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) {
@@ -526,6 +758,7 @@
   }
 
   function postToApp(payload, options = {}) {
+    markConnectionHealthy({ silent: Boolean(options.silent) });
     latestItems = updateStoredActivity(Array.isArray(payload.items) ? payload.items : []);
     if (!autoRefreshIntervalTouched) {
       autoRefreshIntervalMs = normalizeAutoRefreshIntervalSeconds(payload.autoRefreshIntervalSeconds) * 1000;
@@ -541,6 +774,8 @@
     }
     scheduleNextAutoRefresh();
     renderUpdateNotice(payload.updateInfo);
+    refreshCiBadgeCounters();
+    refreshCdxBadgeCounters();
     updateFilterSummary();
     applyLocalViewerChrome();
     bindRefreshMenuControls();
@@ -585,6 +820,9 @@
         await refreshGitBadgeCounters();
       }
       return true;
+    } catch (error) {
+      markConnectionDisconnected(error);
+      throw error;
     } finally {
       itemsLoadInFlight = false;
     }
@@ -602,10 +840,18 @@
     return Boolean(panel && !panel.hidden && title && title.textContent === "CDX status");
   }
 
+  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 (method === "POST") {
@@ -893,14 +1139,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 +1321,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>
     `;
   }
@@ -1702,10 +1994,108 @@
     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.");
   }
 
+  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 (!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 `
@@ -1751,6 +2141,14 @@
         <span class="viewer-git__domain-label">${escapeHtml(label)}${key === "changes" ? gitBadgeHtml("changes") : ""}${key === "history" ? gitBadgeHtml("history") : ""}</span><strong>${escapeHtml(count)}</strong>
       </button>
     `).join("");
+    const renderChangeStats = (entry) => {
+      const additions = Number(entry?.additions);
+      const deletions = Number(entry?.deletions);
+      if (!Number.isFinite(additions) || !Number.isFinite(deletions)) {
+        return "";
+      }
+      return `<span class="viewer-git__file-changes" title="Line changes"><span class="viewer-git__file-additions">+${escapeHtml(additions)}</span><span class="viewer-git__file-deletions">-${escapeHtml(deletions)}</span></span>`;
+    };
     const renderFileSections = (allowedKeys) => groupDefs.filter(([key]) => allowedKeys.includes(key)).map(([key, label]) => {
       const entries = Array.isArray(payload.groups?.[key]) ? payload.groups[key] : [];
       if (!entries.length) {
@@ -1763,6 +2161,7 @@
             <li>
               <button class="viewer-git__file" type="button" data-viewer-git-file="${escapeHtml(entry.path)}" data-viewer-git-cached="${key === "staged" ? "1" : "0"}">
                 <span class="viewer-git__file-path">${escapeHtml(entry.from ? `${entry.from} -> ${entry.path}` : entry.path)}</span>
+                ${renderChangeStats(entry)}
                 ${entry.logicsType ? `<span class="viewer-git__file-kind">${escapeHtml(entry.logicsType)}</span>` : ""}
               </button>
             </li>
@@ -1776,9 +2175,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>
@@ -1788,7 +2194,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">
@@ -1852,6 +2258,29 @@
     });
   }
 
+  function gitDiffLineKind(line) {
+    if (line.startsWith("+") && !line.startsWith("+++")) {
+      return "add";
+    }
+    if (line.startsWith("-") && !line.startsWith("---")) {
+      return "delete";
+    }
+    if (line.startsWith("@@")) {
+      return "hunk";
+    }
+    if (line.startsWith("diff --git") || line.startsWith("index ") || line.startsWith("+++") || line.startsWith("---")) {
+      return "meta";
+    }
+    return "context";
+  }
+
+  function renderGitDiffPreview(content) {
+    return String(content)
+      .split("\n")
+      .map((line) => `<span class="viewer-git__diff-line viewer-git__diff-line--${gitDiffLineKind(line)}">${escapeHtml(line || " ")}</span>`)
+      .join("");
+  }
+
   async function loadGitDiff(path, cached, button = null) {
     const diffPanel = document.querySelector("[data-viewer-git-diff]");
     if (!(diffPanel instanceof HTMLElement) || !path) {
@@ -1873,7 +2302,7 @@
       return;
     }
     const content = payload.diff || payload.message || "No diff is available for this file.";
-    diffPanel.innerHTML = `<div class="viewer-git__diff-meta">${escapeHtml(payload.path || path)} · ${escapeHtml(payload.mode || "worktree")}${payload.truncated ? " · truncated" : ""}</div><pre><code>${escapeHtml(content)}</code></pre>`;
+    diffPanel.innerHTML = `<div class="viewer-git__diff-meta">${escapeHtml(payload.path || path)} · ${escapeHtml(payload.mode || "worktree")}${payload.truncated ? " · truncated" : ""}</div><pre><code>${renderGitDiffPreview(content)}</code></pre>`;
   }
 
   function applyGitDomain(domain) {
@@ -1989,6 +2418,7 @@
     applyLocalViewerChrome();
     [document.getElementById("viewer-insights")].forEach((button) => {
       button?.addEventListener("click", () => {
+        setRefreshMenuOpen(false);
         showCorpusInsights().catch((error) => setMeta(error.message));
       });
     });
@@ -2038,14 +2468,21 @@
       });
     });
     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));
     });
+    repoFolderButton()?.addEventListener("click", () => {
+      openRepositoryFolder().catch((error) => setMeta(error.message));
+    });
     activityClearControl()?.addEventListener("click", () => {
       clearActivityHistory();
     });
@@ -2078,8 +2515,34 @@
       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;
+      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) => {