@grifhinz/logics-manager 2.3.2 → 2.4.0

package/clients/viewer/browser-host.js

@@ -1,6 +1,5 @@
 (() => {
   const stateKey = "logics.localViewer.state";
-  const autoRefreshIntervalMs = 60 * 1000;
   const meta = () => document.getElementById("viewer-meta");
   const documentPanel = () => document.getElementById("viewer-document");
   const documentTitle = () => document.getElementById("viewer-document-title");
@@ -10,6 +9,11 @@
   const updateCopy = () => document.getElementById("viewer-update-copy");
   const updateCommand = () => document.getElementById("viewer-update-command");
   const filterCount = () => document.getElementById("viewer-filter-count");
+  const repoPill = () => document.getElementById("viewer-repo-pill");
+  const autoRefreshControl = () => document.getElementById("viewer-auto-refresh");
+  const activityClearControl = () => document.getElementById("activity-clear");
+  const activityStorageLimit = 80;
+  const defaultAutoRefreshIntervalMs = 60 * 1000;
   const defaultFilterState = {
     focus: "active",
     type: "all",
@@ -19,6 +23,12 @@
   };
   let viewerFilterState = { ...defaultFilterState };
   let latestItems = [];
+  let latestRepoRoot = "";
+  let latestMetaText = "Read-only local viewer";
+  let autoRefreshIntervalMs = defaultAutoRefreshIntervalMs;
+  let nextAutoRefreshAt = 0;
+  let autoRefreshEnabled = true;
+  let autoRefreshTimeoutId = 0;
   let applyingLocalChrome = false;
   let autoRefreshStarted = false;
   let itemsLoadInFlight = false;
@@ -62,6 +72,52 @@
     writeStoredState({ ...nextState, viewerFilterState: { ...viewerFilterState } });
   }
 
+  function updateStoredActivity(nextItems) {
+    const storedState = readStoredState();
+    const baseState = storedState && typeof storedState === "object" ? storedState : {};
+    const previousSnapshot = baseState.activitySnapshot && typeof baseState.activitySnapshot === "object"
+      ? baseState.activitySnapshot
+      : {};
+    const history = Array.isArray(baseState.activityHistory) ? [...baseState.activityHistory] : [];
+    const nextSnapshot = {};
+    const now = new Date().toISOString();
+    const decorated = nextItems.map((item) => {
+      const relPath = String(item.relPath || item.path || item.id || "");
+      const status = String(item?.indicators?.Status || "").trim();
+      if (relPath) {
+        nextSnapshot[relPath] = { status, updatedAt: item.updatedAt || "" };
+      }
+      const previous = relPath ? previousSnapshot[relPath] : null;
+      const previousStatus = String(previous?.status || "").trim();
+      const statusChanged = Boolean(previousStatus && status && previousStatus !== status);
+      if (relPath && (statusChanged || !previous)) {
+        history.unshift({ path: relPath, at: now, status, previousStatus, type: statusChanged ? "status-change" : "updated" });
+      }
+      return statusChanged ? { ...item, activityType: "status-change" } : item;
+    });
+    writeStoredState({
+      ...baseState,
+      viewerFilterState: { ...viewerFilterState },
+      activitySnapshot: nextSnapshot,
+      activityHistory: history.slice(0, activityStorageLimit)
+    });
+    return decorated;
+  }
+
+  function clearActivityHistory() {
+    const storedState = readStoredState();
+    const nextState = storedState && typeof storedState === "object" ? { ...storedState } : {};
+    delete nextState.activitySnapshot;
+    delete nextState.activityHistory;
+    writeStoredState(nextState);
+    latestItems = latestItems.map((item) => {
+      const clone = { ...item };
+      delete clone.activityType;
+      return clone;
+    });
+    setMeta("Local activity history cleared.");
+  }
+
   function markdownApi() {
     if (typeof window.createCdxLogicsMarkdownApi === "function") {
       return window.createCdxLogicsMarkdownApi();
@@ -90,12 +146,45 @@
   }
 
   function setMeta(text) {
+    latestMetaText = text;
+    renderMeta();
+  }
+
+  function renderMeta() {
     const node = meta();
     if (node) {
-      node.textContent = text;
+      const parts = [latestMetaText];
+      if (autoRefreshEnabled && nextAutoRefreshAt > 0) {
+        const seconds = Math.max(0, Math.ceil((nextAutoRefreshAt - Date.now()) / 1000));
+        parts.push(`next auto refresh in ${seconds}s`);
+      }
+      node.textContent = parts.join(" · ");
     }
   }
 
+  function scheduleNextAutoRefresh() {
+    if (autoRefreshTimeoutId) {
+      window.clearTimeout(autoRefreshTimeoutId);
+      autoRefreshTimeoutId = 0;
+    }
+    nextAutoRefreshAt = autoRefreshEnabled ? Date.now() + autoRefreshIntervalMs : 0;
+    if (autoRefreshEnabled) {
+      autoRefreshTimeoutId = window.setTimeout(autoRefreshItems, autoRefreshIntervalMs);
+    }
+    renderMeta();
+  }
+
+  function updateRepositoryIdentity(payload) {
+    latestRepoRoot = String(payload.root || latestRepoRoot || "");
+    const pill = repoPill();
+    if (!pill) {
+      return;
+    }
+    const repoName = String(payload.repoName || latestRepoRoot.split(/[\\/]/).filter(Boolean).pop() || "repository");
+    pill.textContent = repoName;
+    pill.title = latestRepoRoot || repoName;
+  }
+
   function findItemByPath(relPath) {
     const normalized = String(relPath || "").replace(/\\/g, "/").replace(/^\//, "");
     return latestItems.find((entry) => entry.relPath === normalized || entry.path === normalized) || null;
@@ -333,13 +422,20 @@
   }
 
   function postToApp(payload, options = {}) {
-    latestItems = Array.isArray(payload.items) ? payload.items : [];
-    const nextPayload = options.silent ? payload : applyFocusRequest(payload);
+    latestItems = updateStoredActivity(Array.isArray(payload.items) ? payload.items : []);
+    const intervalSeconds = Number(payload.autoRefreshIntervalSeconds);
+    autoRefreshIntervalMs = Number.isFinite(intervalSeconds) && intervalSeconds > 0
+      ? intervalSeconds * 1000
+      : defaultAutoRefreshIntervalMs;
+    updateRepositoryIdentity(payload);
+    const payloadWithActivity = { ...payload, items: latestItems };
+    const nextPayload = options.silent ? payloadWithActivity : applyFocusRequest(payloadWithActivity);
     window.dispatchEvent(new MessageEvent("message", { data: { type: "data", payload: nextPayload } }));
     const rootName = payload.root ? payload.root.split(/[\\/]/).filter(Boolean).pop() : "repository";
     if (!options.silent) {
       setMeta(`${rootName} · ${payload.items.length} docs · refreshed ${new Date().toLocaleTimeString()}`);
     }
+    scheduleNextAutoRefresh();
     renderUpdateNotice(payload.updateInfo);
     updateFilterSummary();
     applyLocalViewerChrome();
@@ -387,6 +483,9 @@
   }
 
   function autoRefreshItems() {
+    if (!autoRefreshEnabled) {
+      return;
+    }
     if (document.hidden) {
       refreshAfterVisible = true;
       return;
@@ -399,7 +498,9 @@
       return;
     }
     autoRefreshStarted = true;
-    window.setInterval(autoRefreshItems, autoRefreshIntervalMs);
+    window.setInterval(() => {
+      renderMeta();
+    }, 1000);
     document.addEventListener("visibilitychange", () => {
       if (!document.hidden && refreshAfterVisible) {
         refreshAfterVisible = false;
@@ -408,6 +509,15 @@
     });
   }
 
+  function setAutoRefreshEnabled(enabled) {
+    autoRefreshEnabled = Boolean(enabled);
+    const control = autoRefreshControl();
+    if (control instanceof HTMLInputElement) {
+      control.checked = autoRefreshEnabled;
+    }
+    scheduleNextAutoRefresh();
+  }
+
   function statusValue(item) {
     return String(item?.indicators?.Status || "").toLowerCase();
   }
@@ -435,6 +545,37 @@
     return timestamp > 0 && timestamp < Date.now() - 30 * 24 * 60 * 60 * 1000 && !isClosed(item);
   }
 
+  function isRecent(item, days = 7) {
+    return updatedWithin(item, days);
+  }
+
+  function hasMissingOrAmbiguousStatus(item) {
+    const rawStatus = String(item?.indicators?.Status || "").trim();
+    if (!rawStatus) {
+      return true;
+    }
+    const normalized = rawStatus.toLowerCase();
+    return !["draft", "ready", "in progress", "blocked", "done", "archived", "obsolete"].includes(normalized);
+  }
+
+  function isSafeLogicsDocPath(value) {
+    const path = String(value || "").replace(/\\/g, "/").replace(/^\.?\//, "").trim();
+    if (!path || path.startsWith("/") || path.startsWith("~") || /^[A-Za-z]:/.test(path)) {
+      return false;
+    }
+    if (path.split("/").includes("..") || !path.endsWith(".md")) {
+      return false;
+    }
+    return [
+      "logics/request/",
+      "logics/backlog/",
+      "logics/tasks/",
+      "logics/product/",
+      "logics/architecture/",
+      "logics/specs/"
+    ].some((prefix) => path.startsWith(prefix));
+  }
+
   function matchesViewerFilter(item) {
     if (!item) {
       return false;
@@ -562,58 +703,233 @@
     count.textContent = `${visibleCount} of ${latestItems.length} docs shown${suffix}`;
   }
 
-  function buildCorpusInsights() {
-    const countsByStage = latestItems.reduce((acc, item) => {
-      acc[item.stage] = (acc[item.stage] || 0) + 1;
+  function countBy(items, selector) {
+    return items.reduce((acc, item) => {
+      const key = selector(item) || "unknown";
+      acc[key] = (acc[key] || 0) + 1;
       return acc;
     }, {});
-    const active = latestItems.filter((item) => !isClosed(item)).length;
-    const blocked = latestItems.filter((item) => statusValue(item).includes("blocked")).length;
-    const unlinked = latestItems.filter((item) => (item.references || []).length === 0 && (item.usedBy || []).length === 0).length;
-    const incompleteChains = latestItems.filter((item) => ["request", "backlog"].includes(item.stage) && !item.isPromoted && !isClosed(item)).length;
-    const cards = [
-      ["Docs", latestItems.length],
-      ["Active", active],
-      ["Blocked", blocked],
-      ["Unlinked", unlinked]
-    ].map(([label, value]) => `
+  }
+
+  function renderMetricCards(entries) {
+    return entries.map(([label, value]) => `
       <div class="viewer-insights__card">
         <div class="viewer-insights__label">${escapeHtml(label)}</div>
         <div class="viewer-insights__value">${escapeHtml(value)}</div>
       </div>
     `).join("");
+  }
+
+  function renderInsightRows(items, emptyText = "No signals") {
+    if (!items.length) {
+      return `<li class="viewer-insights__item">${escapeHtml(emptyText)}</li>`;
+    }
+    return items.map(([label, value]) => `
+      <li class="viewer-insights__item"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></li>
+    `).join("");
+  }
+
+  function renderDocRows(items, emptyText = "None", limit = 6) {
+    if (!items.length) {
+      return `<li class="viewer-insights__row viewer-insights__row--empty">${escapeHtml(emptyText)}</li>`;
+    }
+    const rows = items.map((item, index) => {
+      const path = item.relPath || item.path || "";
+      const control = path && isSafeLogicsDocPath(path)
+        ? `<button class="viewer-insights__doc" type="button" data-viewer-doc-path="${escapeHtml(path)}">${escapeHtml(item.id || path)}</button>`
+        : `<span class="viewer-insights__doc">${escapeHtml(item.id || path || item.title)}</span>`;
+      return `
+        <li class="viewer-insights__row" ${index >= limit ? "hidden data-viewer-hidden-row" : ""}>
+          ${control}
+          <span>${escapeHtml(item.indicators?.Status || item.stage || "No status")}</span>
+        </li>
+      `;
+    });
+    const hiddenCount = Math.max(0, items.length - limit);
+    if (hiddenCount > 0) {
+      rows.push(`<li class="viewer-insights__row"><button class="viewer-insights__reveal" type="button" data-viewer-reveal>Show ${hiddenCount} more</button></li>`);
+    }
+    return rows.join("");
+  }
+
+  function renderPathRows(paths, emptyText = "None", limit = 6) {
+    if (!paths.length) {
+      return `<li class="viewer-insights__row viewer-insights__row--empty">${escapeHtml(emptyText)}</li>`;
+    }
+    const rows = paths.map((path, index) => {
+      const control = isSafeLogicsDocPath(path)
+        ? `<button class="viewer-insights__doc" type="button" data-viewer-doc-path="${escapeHtml(path)}">${escapeHtml(path)}</button>`
+        : `<span class="viewer-insights__doc">${escapeHtml(path)}</span>`;
+      return `<li class="viewer-insights__row" ${index >= limit ? "hidden data-viewer-hidden-row" : ""}>${control}</li>`;
+    });
+    const hiddenCount = Math.max(0, paths.length - limit);
+    if (hiddenCount > 0) {
+      rows.push(`<li class="viewer-insights__row"><button class="viewer-insights__reveal" type="button" data-viewer-reveal>Show ${hiddenCount} more</button></li>`);
+    }
+    return rows.join("");
+  }
+
+  function renderActionRows(actions) {
+    return actions.map((action) => {
+      if (action.filter) {
+        return `
+          <li class="viewer-insights__row">
+            <button class="viewer-insights__action" type="button" data-viewer-filter-group="${escapeHtml(action.filter.group)}" data-viewer-filter-value="${escapeHtml(action.filter.value)}">${escapeHtml(action.label)}</button>
+            <strong>${escapeHtml(action.value)}</strong>
+          </li>
+        `;
+      }
+      if (action.health) {
+        return `
+          <li class="viewer-insights__row">
+            <button class="viewer-insights__action" type="button" data-viewer-open-health>${escapeHtml(action.label)}</button>
+            <strong>${escapeHtml(action.value)}</strong>
+          </li>
+        `;
+      }
+      if (action.path && isSafeLogicsDocPath(action.path)) {
+        return `
+          <li class="viewer-insights__row">
+            <button class="viewer-insights__action" type="button" data-viewer-doc-path="${escapeHtml(action.path)}">${escapeHtml(action.label)}</button>
+            <strong>${escapeHtml(action.value)}</strong>
+          </li>
+        `;
+      }
+      return `<li class="viewer-insights__row"><span>${escapeHtml(action.label)}</span><strong>${escapeHtml(action.value)}</strong></li>`;
+    }).join("");
+  }
+
+  function itemLabel(item) {
+    return `${item.id || item.relPath || "doc"} - ${item.indicators?.Status || "No status"}`;
+  }
+
+  function buildCorpusInsights(lintData = null, auditData = null) {
+    const docs = latestItems;
+    const itemPaths = new Set(docs.map((item) => item.relPath).filter(Boolean));
+    const countsByStage = countBy(docs, (item) => item.stage);
+    const closed = docs.filter(isClosed);
+    const open = docs.filter((item) => !isClosed(item));
+    const blocked = docs.filter((item) => statusValue(item).includes("blocked"));
+    const missingStatus = docs.filter(hasMissingOrAmbiguousStatus);
+    const recentlyModified = docs.filter((item) => isRecent(item, 7));
+    const incompleteChains = docs.filter((item) => ["request", "backlog"].includes(item.stage) && !item.isPromoted && !isClosed(item));
+    const unlinked = docs.filter((item) => (item.references || []).length === 0 && (item.usedBy || []).length === 0);
+    const brokenRefs = [];
+    const relationshipCounts = {};
+    docs.forEach((item) => {
+      relationshipCounts[item.stage] = (relationshipCounts[item.stage] || 0) + (item.references || []).length + (item.usedBy || []).length;
+      (item.references || []).forEach((ref) => {
+        if (ref.path && !itemPaths.has(ref.path)) {
+          brokenRefs.push(`${item.id} -> ${ref.path}`);
+        }
+      });
+    });
+    const mostReferenced = [...docs]
+      .sort((left, right) => (right.usedBy || []).length - (left.usedBy || []).length)
+      .filter((item) => (item.usedBy || []).length > 0)
+      .slice(0, 8);
+    const recentRows = [...docs]
+      .sort((left, right) => (Date.parse(right.updatedAt || "") || 0) - (Date.parse(left.updatedAt || "") || 0))
+      .slice(0, 8);
+    const staleActive = open.filter(isStale).slice(0, 8);
+    const qualityFindings = lintData && auditData ? collectHealthFindings(lintData, auditData) : [];
+    const qualityBySource = countBy(qualityFindings, (finding) => finding.source || finding.code || "finding");
+    const qualityByDocType = countBy(qualityFindings, (finding) => {
+      const path = String(finding.path || "");
+      const matched = docs.find((item) => item.relPath === path);
+      return matched?.stage || (path ? "unknown document" : "repository");
+    });
+    const concentratedIssues = Object.entries(countBy(qualityFindings, (finding) => finding.path || "repository"))
+      .sort((left, right) => Number(right[1]) - Number(left[1]))
+      .slice(0, 8);
+    const actions = [];
+    if (blocked.length) {
+      actions.push({ label: "Review blocked workflow docs", value: blocked.length, filter: { group: "focus", value: "blocked" } });
+    }
+    if (incompleteChains.length) {
+      actions.push({ label: "Promote or close incomplete workflow chains", value: incompleteChains.length, filter: { group: "focus", value: "needs-promotion" } });
+    }
+    if (brokenRefs.length) {
+      actions.push({ label: "Repair broken references", value: brokenRefs.length, health: true });
+    }
+    if (qualityFindings.length) {
+      actions.push({ label: "Open validation health", value: qualityFindings.length, health: true });
+    }
+    if (missingStatus.length) {
+      actions.push({ label: "Normalize missing or ambiguous statuses", value: missingStatus.length, path: missingStatus[0]?.relPath || "" });
+    }
+    if (!actions.length) {
+      actions.push({ label: "No immediate operator action detected", value: "OK" });
+    }
+
     const stageRows = Object.entries(countsByStage)
       .sort((left, right) => String(left[0]).localeCompare(String(right[0])))
-      .map(([stage, count]) => `<li class="viewer-insights__item"><span>${escapeHtml(stage)}</span><strong>${escapeHtml(count)}</strong></li>`)
-      .join("");
-    const recentRows = [...latestItems]
-      .sort((left, right) => (Date.parse(right.updatedAt || "") || 0) - (Date.parse(left.updatedAt || "") || 0))
-      .slice(0, 8)
-      .map((item) => `<li class="viewer-insights__item"><span>${escapeHtml(item.id)}</span><strong>${escapeHtml(item.indicators?.Status || "No status")}</strong></li>`)
-      .join("");
+      .map(([stage, count]) => [stage, count]);
     return `
       <div class="viewer-insights">
-        <div class="viewer-insights__summary">${cards}</div>
-        <div class="viewer-insights__grid">
-          <div class="viewer-insights__card">
-            <div class="viewer-insights__label">Incomplete chains</div>
-            <div class="viewer-insights__value">${escapeHtml(incompleteChains)}</div>
-          </div>
-        </div>
+        <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>Corpus families</h2>
-          <ul class="viewer-insights__list">${stageRows || '<li class="viewer-insights__item">No docs loaded</li>'}</ul>
+          <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>
         <section class="viewer-insights__section">
-          <h2>Recent activity</h2>
-          <ul class="viewer-insights__list">${recentRows || '<li class="viewer-insights__item">No recent docs</li>'}</ul>
+          <h2>Operator actions</h2>
+          <ul class="viewer-insights__rows">${renderActionRows(actions)}</ul>
         </section>
       </div>
     `;
   }
 
-  function showCorpusInsights() {
-    setDocument("Corpus insights", buildCorpusInsights());
+  async function showCorpusInsights() {
+    const [lintResponse, auditResponse] = await Promise.all([fetch("/api/lint"), fetch("/api/audit")]);
+    const [lintData, auditData] = await Promise.all([lintResponse.json(), auditResponse.json()]);
+    setDocument("Corpus insights", buildCorpusInsights(lintData, auditData));
     setMeta("Corpus insights loaded.");
   }
 
@@ -711,9 +1027,9 @@
     const list = findings.length
       ? findings.slice(0, 50).map((finding) => {
           const path = finding.path || "";
-          const pathControl = path
+          const pathControl = path && isSafeLogicsDocPath(path)
             ? `<button class="viewer-health__path" type="button" data-viewer-doc-path="${escapeHtml(path)}">${escapeHtml(path)}</button>`
-            : '<span class="viewer-health__meta">Repository-level finding</span>';
+            : `<span class="viewer-health__meta">${escapeHtml(path ? `Repository-level or unsafe path: ${path}` : "Repository-level finding")}</span>`;
           const severity = finding.severity || finding.code || finding.source || "finding";
           return `
             <li class="viewer-health__issue">
@@ -744,6 +1060,76 @@
     setMeta("Health loaded.");
   }
 
+  function renderGitStatus(payload) {
+    if (!payload || payload.state !== "ok") {
+      return `
+        <div class="viewer-git">
+          <div class="viewer-git__state">${escapeHtml(payload?.message || "Git status is unavailable.")}</div>
+        </div>
+      `;
+    }
+    const counts = payload.counts || {};
+    const summary = [
+      ["Branch", payload.branch || "HEAD"],
+      ["Tracking", payload.tracking || "None"],
+      ["Ahead", payload.ahead || 0],
+      ["Behind", payload.behind || 0],
+      ["State", payload.clean ? "Clean" : "Dirty"],
+      ["Staged", counts.staged || 0],
+      ["Modified/deleted", Number(counts.modified || 0) + Number(counts.deleted || 0)],
+      ["Untracked", counts.untracked || 0]
+    ];
+    const cards = renderMetricCards(summary);
+    const groupLabels = { staged: "Staged", modified: "Modified", deleted: "Deleted", renamed: "Renamed", untracked: "Untracked" };
+    const groups = Object.entries(groupLabels).map(([key, label]) => {
+      const entries = Array.isArray(payload.groups?.[key]) ? payload.groups[key] : [];
+      if (!entries.length) {
+        return "";
+      }
+      return `
+        <section class="viewer-git__section">
+          <h2>${escapeHtml(label)}</h2>
+          <ul class="viewer-git__files">${entries.map((entry) => `
+            <li><code>${escapeHtml(entry.from ? `${entry.from} -> ${entry.path}` : entry.path)}</code></li>
+          `).join("")}</ul>
+        </section>
+      `;
+    }).join("");
+    const clean = payload.clean ? '<p class="viewer-git__state">Working tree clean.</p>' : "";
+    return `
+      <div class="viewer-git">
+        <div class="viewer-git__summary">${cards}</div>
+        ${payload.latestCommit ? `<p class="viewer-git__commit">Latest commit: <code>${escapeHtml(payload.latestCommit)}</code></p>` : ""}
+        ${clean}
+        ${groups}
+      </div>
+    `;
+  }
+
+  async function showGitStatus() {
+    setMeta("Checking Git status...");
+    const response = await fetch("/api/git-status");
+    let data = {};
+    try {
+      data = await response.json();
+    } catch {
+      data = {};
+    }
+    if (response.status === 404) {
+      setDocument("Git status", renderGitStatus({
+        state: "unavailable",
+        message: "Git status endpoint unavailable. Restart the local viewer so it loads the current logics-manager backend."
+      }));
+      setMeta("Restart the local viewer to enable Git status.");
+      return;
+    }
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to load Git status.");
+    }
+    setDocument("Git status", renderGitStatus(data.payload));
+    setMeta("Git status loaded.");
+  }
+
   window.acquireVsCodeApi = function acquireVsCodeApi() {
     return {
       postMessage(message) {
@@ -786,11 +1172,18 @@
     setControlValue("show-companion-docs", true, "change");
     setControlValue("hide-empty-columns", true, "change");
     applyLocalViewerChrome();
-    [document.getElementById("viewer-insights"), document.getElementById("header-logics-insights")].forEach((button) => {
+    [document.getElementById("viewer-insights")].forEach((button) => {
       button?.addEventListener("click", () => {
-        showCorpusInsights();
+        showCorpusInsights().catch((error) => setMeta(error.message));
       });
     });
+    const autoControl = autoRefreshControl();
+    if (autoControl instanceof HTMLInputElement) {
+      autoControl.addEventListener("change", () => {
+        setAutoRefreshEnabled(autoControl.checked);
+      });
+      setAutoRefreshEnabled(autoControl.checked);
+    }
     document.querySelectorAll('[data-action="refresh"]').forEach((element) => {
       if (!(element instanceof HTMLElement)) {
         return;
@@ -802,6 +1195,12 @@
     document.getElementById("viewer-health")?.addEventListener("click", () => {
       showHealth().catch((error) => setMeta(error.message));
     });
+    document.getElementById("viewer-git")?.addEventListener("click", () => {
+      showGitStatus().catch((error) => setMeta(error.message));
+    });
+    activityClearControl()?.addEventListener("click", () => {
+      clearActivityHistory();
+    });
     document.querySelectorAll("[data-viewer-filter-group]").forEach((element) => {
       if (element instanceof HTMLSelectElement) {
         element.addEventListener("change", () => {
@@ -828,10 +1227,30 @@
     document.addEventListener("click", (event) => {
       window.setTimeout(() => applyLocalViewerChrome(), 0);
       const target = event.target instanceof Element ? event.target.closest("[data-viewer-doc-path]") : null;
-      if (!(target instanceof HTMLElement)) {
+      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;
+      if (revealTarget instanceof HTMLElement) {
+        const list = revealTarget.closest("ul");
+        list?.querySelectorAll("[data-viewer-hidden-row]").forEach((row) => {
+          if (row instanceof HTMLElement) {
+            row.hidden = false;
+            row.removeAttribute("data-viewer-hidden-row");
+          }
+        });
+        revealTarget.closest("li")?.remove();
+        return;
+      }
+      if (healthTarget instanceof HTMLElement) {
+        showHealth().catch((error) => setMeta(error.message));
+        return;
+      }
+      if (filterTarget instanceof HTMLElement) {
+        applyViewerFilter(filterTarget.getAttribute("data-viewer-filter-group") || "", filterTarget.getAttribute("data-viewer-filter-value") || "");
+        setMeta("Insight filter applied. Clear filters restores the normal viewer view.");
         return;
       }
-      const path = target.getAttribute("data-viewer-doc-path");
+      const path = target instanceof HTMLElement ? target.getAttribute("data-viewer-doc-path") : "";
       if (path) {
         showDocumentByPath(path).catch((error) => setMeta(error.message));
       }