@grifhinz/logics-manager 2.6.0 → 2.8.0

package/clients/viewer/browser-host.js

@@ -13,6 +13,7 @@
   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");
@@ -20,6 +21,7 @@
   const refreshIntervalControl = () => document.getElementById("viewer-refresh-interval");
   const refreshMenuButton = () => document.getElementById("viewer-refresh-menu-button");
   const refreshMenuPanel = () => document.getElementById("viewer-refresh-menu");
+  const versionLink = () => document.getElementById("viewer-version-link");
   const activityClearControl = () => document.getElementById("activity-clear");
   const activityStorageLimit = 80;
   const gitHistoryPageSize = 10;
@@ -37,6 +39,8 @@
   let latestItems = [];
   let latestRepoRoot = "";
   let latestRepository = { root: "", githubUrl: "" };
+  let latestCapabilities = {};
+  let latestProjects = [];
   let latestMetaText = "Read-only local viewer";
   let autoRefreshIntervalMs = defaultAutoRefreshIntervalMs;
   let nextAutoRefreshAt = 0;
@@ -51,8 +55,27 @@
   let focusApplied = false;
   let latestGitBadgeCounts = { unpushedCommits: 0, uncommittedFiles: 0 };
   let latestCiStatus = { visible: false, badgeState: "unknown", message: "" };
+  let latestUpdateInfo = {};
+  let latestCdxMissionState = {
+    missionId: "full-audit",
+    sessionId: "",
+    strengthId: "standard",
+    missionInputs: {},
+    catalog: null,
+    statusPayload: null,
+    planPayload: null,
+    runPayload: null,
+    applyPayload: null
+  };
   let connectionState = "connected";
   let lastSuccessfulSyncAt = 0;
+  let latestViewerStateSignature = "";
+  let latestGitStatusSignature = "";
+  let latestCdxStatusSignature = "";
+  let latestCiStatusSignature = "";
+  let primaryActionBusyKey = "";
+  let cdxMissionBusyKey = "";
+  let cdxCloseTarget = null;
 
   function readStoredState() {
     try {
@@ -75,6 +98,181 @@
     return nextState;
   }
 
+  function stableStringify(value) {
+    if (Array.isArray(value)) {
+      return `[${value.map((entry) => stableStringify(entry)).join(",")}]`;
+    }
+    if (value && typeof value === "object") {
+      return `{${Object.keys(value).sort().map((key) => `${JSON.stringify(key)}:${stableStringify(value[key])}`).join(",")}}`;
+    }
+    return JSON.stringify(value);
+  }
+
+  function viewerStateSignature(payload) {
+    const items = Array.isArray(payload?.items) ? payload.items : [];
+    const projects = Array.isArray(payload?.projects) ? payload.projects : [];
+    return stableStringify({
+      root: payload?.root || "",
+      repository: payload?.repository || {},
+      capabilities: normalizeCapabilities(payload),
+      projects: projects.map((project) => ({
+        id: project?.id || "",
+        active: Boolean(project?.active),
+        available: project?.available !== false,
+        hasLogics: project?.hasLogics !== false,
+        root: project?.root || ""
+      })),
+      items: items.map((item) => ({
+        id: item?.id || "",
+        relPath: item?.relPath || "",
+        stage: item?.stage || "",
+        status: item?.indicators?.Status || item?.status || "",
+        updatedAt: item?.updatedAt || ""
+      }))
+    });
+  }
+
+  function gitStatusSignature(payload) {
+    return stableStringify({
+      state: payload?.state || "",
+      branch: payload?.branch || "",
+      tracking: payload?.tracking || "",
+      ahead: Number(payload?.ahead || 0),
+      behind: Number(payload?.behind || 0),
+      clean: Boolean(payload?.clean),
+      counts: payload?.counts || {},
+      badgeCounts: payload?.badgeCounts || {},
+      latestCommit: payload?.latestCommit || "",
+      recentCommitsHasMore: Boolean(payload?.recentCommitsHasMore)
+    });
+  }
+
+  function runtimeStatusSignature(payload) {
+    return stableStringify(payload || {});
+  }
+
+  function primaryActionControls() {
+    return Array.from(document.querySelectorAll([
+      "#viewer-insights",
+      "#viewer-health",
+      "#viewer-git",
+      "#viewer-ci",
+      "#viewer-cdx",
+      "#viewer-repo-folder",
+      '[data-action="refresh"]',
+      '[data-viewer-action="edit-document"]',
+      "[data-viewer-project-id]",
+      "[data-viewer-cdx-mode]",
+      "[data-viewer-cdx-report]",
+      "[data-viewer-cdx-artifact-path]",
+      "[data-viewer-cdx-create-request]"
+    ].join(","))).filter((node) => node instanceof HTMLElement);
+  }
+
+  function setPrimaryActionBusy(actionKey, label = "") {
+    primaryActionBusyKey = actionKey || "";
+    document.body?.classList.toggle("viewer-is-busy", Boolean(primaryActionBusyKey));
+    document.body?.toggleAttribute("data-viewer-busy", Boolean(primaryActionBusyKey));
+    if (primaryActionBusyKey) {
+      document.body?.setAttribute("data-viewer-busy-action", primaryActionBusyKey);
+    } else {
+      document.body?.removeAttribute("data-viewer-busy-action");
+    }
+    primaryActionControls().forEach((control) => {
+      if (!("disabled" in control)) {
+        return;
+      }
+      control.disabled = Boolean(primaryActionBusyKey);
+      control.setAttribute("aria-busy", primaryActionBusyKey ? "true" : "false");
+      if (primaryActionBusyKey) {
+        control.setAttribute("data-viewer-action-busy", control.getAttribute("data-viewer-action-key") === actionKey ? "active" : "blocked");
+      } else {
+        control.removeAttribute("data-viewer-action-busy");
+      }
+    });
+    if (!primaryActionBusyKey) {
+      updateCapabilityControls();
+      applyLocalViewerChrome();
+    }
+    if (primaryActionBusyKey && label) {
+      setMeta(`${label}...`);
+    }
+  }
+
+  function withPrimaryAction(actionKey, label, action) {
+    if (primaryActionBusyKey) {
+      setMeta("Another viewer action is still running.");
+      return Promise.resolve(false);
+    }
+    setPrimaryActionBusy(actionKey, label);
+    return Promise.resolve()
+      .then(action)
+      .then(() => true)
+      .catch((error) => {
+        setMeta(error.message || "Viewer action failed.");
+        return false;
+      })
+      .finally(() => {
+        setPrimaryActionBusy("", "");
+      });
+  }
+
+  function cdxMissionActionControls() {
+    return Array.from(document.querySelectorAll([
+      "[data-viewer-cdx-plan]",
+      "[data-viewer-cdx-run]",
+      "[data-viewer-cdx-apply-plan]",
+      "[data-viewer-cdx-mission]"
+    ].join(","))).filter((node) => node instanceof HTMLElement);
+  }
+
+  function setCdxMissionBusy(actionKey, label = "") {
+    cdxMissionBusyKey = actionKey || "";
+    document.body?.toggleAttribute("data-viewer-cdx-mission-busy", Boolean(cdxMissionBusyKey));
+    if (cdxMissionBusyKey) {
+      document.body?.setAttribute("data-viewer-cdx-mission-busy-action", cdxMissionBusyKey);
+    } else {
+      document.body?.removeAttribute("data-viewer-cdx-mission-busy-action");
+    }
+    cdxMissionActionControls().forEach((control) => {
+      if (!("disabled" in control)) {
+        return;
+      }
+      control.disabled = Boolean(cdxMissionBusyKey);
+      control.setAttribute("aria-busy", cdxMissionBusyKey ? "true" : "false");
+      if (cdxMissionBusyKey) {
+        control.setAttribute("data-viewer-action-busy", control.getAttribute("data-viewer-action-key") === actionKey ? "active" : "blocked");
+      } else {
+        control.removeAttribute("data-viewer-action-busy");
+      }
+    });
+    if (!cdxMissionBusyKey) {
+      updateCapabilityControls();
+      applyLocalViewerChrome();
+    }
+    if (cdxMissionBusyKey && label) {
+      setMeta(`${label}...`);
+    }
+  }
+
+  function withCdxMissionAction(actionKey, label, action) {
+    if (cdxMissionBusyKey) {
+      setMeta("Another CDX mission action is still running.");
+      return Promise.resolve(false);
+    }
+    setCdxMissionBusy(actionKey, label);
+    return Promise.resolve()
+      .then(action)
+      .then(() => true)
+      .catch((error) => {
+        setMeta(error.message || "CDX mission action failed.");
+        return false;
+      })
+      .finally(() => {
+        setCdxMissionBusy("", "");
+      });
+  }
+
   function hydrateViewerFilterState() {
     const storedState = readStoredState();
     viewerFilterState = sanitizeViewerFilterState(storedState?.viewerFilterState);
@@ -273,6 +471,7 @@
 
   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 || ""),
@@ -281,10 +480,178 @@
     const pill = repoPill();
     if (pill) {
       const repoName = String(payload.repoName || latestRepoRoot.split(/[\\/]/).filter(Boolean).pop() || "repository");
-      pill.textContent = repoName;
+      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 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() {
@@ -304,6 +671,18 @@
     }
   }
 
+  function updateVersionLink(updateInfo = latestUpdateInfo) {
+    latestUpdateInfo = updateInfo && typeof updateInfo === "object" ? updateInfo : {};
+    const link = versionLink();
+    if (!(link instanceof HTMLAnchorElement)) {
+      return;
+    }
+    const currentVersion = String(latestUpdateInfo.currentVersion || "").trim();
+    link.textContent = currentVersion ? `v${currentVersion.replace(/^v/i, "")}` : "v0.0.0";
+    link.href = latestRepository.githubUrl || "https://github.com/AlexAgo83/logics-manager";
+    link.title = "Open Logics Manager on GitHub";
+  }
+
   async function openRepositoryFolder() {
     if (!latestRepository.root) {
       setMeta("Repository folder is unavailable.");
@@ -430,6 +809,10 @@
   }
 
   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) {
@@ -438,6 +821,7 @@
       }
       const data = await response.json();
       if (response.ok && data.ok) {
+        latestCiStatusSignature = runtimeStatusSignature(data.payload);
         updateMainCiBadge(data.payload);
       }
     } catch {
@@ -468,33 +852,65 @@
     return cdxProviders(status).reduce((total, provider) => total + Math.max(0, Number(provider.active || 0)), 0);
   }
 
-  function updateMainCdxBadge(payload) {
+  function activeCdxRunCountFromPayload(payload) {
+    if (!payload || payload.state !== "ok" || !Array.isArray(payload.runs)) {
+      return 0;
+    }
+    return payload.runs.filter((run) => ["running", "starting", "pending"].includes(String(cdxField(run, ["status", "state"], "")).toLowerCase())).length;
+  }
+
+  function updateMainCdxBadge(payload, runsPayload = null) {
     const button = document.getElementById("viewer-cdx");
     if (!(button instanceof HTMLElement)) {
       return;
     }
     button.querySelector("[data-viewer-cdx-badge]")?.remove();
-    const activeCount = activeCdxAssistantCountFromPayload(payload);
+    const activeSessions = activeCdxAssistantCountFromPayload(payload);
+    const activeRuns = activeCdxRunCountFromPayload(runsPayload);
+    const activeCount = activeSessions + activeRuns;
     if (activeCount <= 0) {
-      button.title = "Show CDX status";
+      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`;
+    const titleParts = [];
+    if (activeSessions > 0) {
+      titleParts.push(activeSessions === 1 ? "1 active session" : `${activeSessions} active sessions`);
+    }
+    if (activeRuns > 0) {
+      titleParts.push(activeRuns === 1 ? "1 running run" : `${activeRuns} running runs`);
+    }
+    const title = titleParts.join(" · ");
     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>`);
+    const tone = activeRuns > 0 ? " viewer-cdx-button-badge--runs" : "";
+    button.insertAdjacentHTML("beforeend", `<span class="viewer-cdx-button-badge${tone}" 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) {
+      const [statusResponse, runsResponse] = await Promise.all([
+        fetch("/api/cdx-status"),
+        fetch("/api/cdx-runs").catch(() => null)
+      ]);
+      if (statusResponse.status === 404) {
         updateMainCdxBadge(null);
         return;
       }
-      const data = await response.json();
-      if (response.ok && data.ok) {
-        updateMainCdxBadge(data.payload);
+      const data = await statusResponse.json();
+      let runsPayload = null;
+      if (runsResponse && runsResponse.ok) {
+        const runsData = await runsResponse.json();
+        runsPayload = runsData?.ok ? runsData.payload : null;
+      }
+      if (statusResponse.ok && data.ok) {
+        latestCdxStatusSignature = runtimeStatusSignature({ status: data.payload, runs: runsPayload });
+        updateMainCdxBadge(data.payload, runsPayload);
       }
     } catch {
       updateMainCdxBadge(null);
@@ -509,10 +925,16 @@
   }
 
   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();
       if (response.ok && data.ok && data.payload?.state === "ok") {
+        latestGitStatusSignature = gitStatusSignature(data.payload);
         setGitBadgeCountsFromPayload(data.payload);
       }
     } catch {
@@ -586,13 +1008,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;
@@ -600,14 +1019,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) {
@@ -635,6 +1060,7 @@
   }
 
   function setDocument(titleText, html) {
+    cdxCloseTarget = null;
     const panel = documentPanel();
     const title = documentTitle();
     const content = documentContent();
@@ -653,6 +1079,35 @@
     renderMermaidDiagrams();
   }
 
+  function currentDocumentSnapshot(fallbackTitle = "Document") {
+    const title = documentTitle();
+    const content = documentContent();
+    return {
+      title: title?.textContent || fallbackTitle,
+      html: content?.innerHTML || ""
+    };
+  }
+
+  async function closeDocumentPanel() {
+    const target = cdxCloseTarget;
+    cdxCloseTarget = null;
+    if (target?.type === "cdx-report") {
+      setDocument(target.title || "CDX run report", target.html || "");
+      cdxCloseTarget = { type: "cdx-runs" };
+      setMeta("Returned to CDX run report.");
+      return;
+    }
+    if (target?.type === "cdx-runs") {
+      await showCdxRuns({ silent: true });
+      setMeta("Returned to CDX runs.");
+      return;
+    }
+    const panel = documentPanel();
+    if (panel) {
+      panel.hidden = true;
+    }
+  }
+
   function showMermaidFallback(message) {
     document.querySelectorAll(".markdown-preview__mermaid-fallback").forEach((node) => {
       if (!(node instanceof HTMLElement)) {
@@ -759,26 +1214,39 @@
 
   function postToApp(payload, options = {}) {
     markConnectionHealthy({ silent: Boolean(options.silent) });
+    const nextSignature = viewerStateSignature(payload);
+    if (!options.force && latestViewerStateSignature && nextSignature === latestViewerStateSignature) {
+      if (!options.silent) {
+        setMeta(`Checked just now · no viewer changes (${new Date().toLocaleTimeString()})`);
+      }
+      scheduleNextAutoRefresh();
+      return false;
+    }
+    latestViewerStateSignature = nextSignature;
     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) {
       setMeta(`${rootName} · ${payload.items.length} docs · refreshed ${new Date().toLocaleTimeString()}`);
     }
     scheduleNextAutoRefresh();
+    updateVersionLink(payload.updateInfo);
     renderUpdateNotice(payload.updateInfo);
     refreshCiBadgeCounters();
     refreshCdxBadgeCounters();
     updateFilterSummary();
     applyLocalViewerChrome();
     bindRefreshMenuControls();
+    return true;
   }
 
   function renderUpdateNotice(updateInfo) {
@@ -815,11 +1283,11 @@
       if (!response.ok || !data.ok) {
         throw new Error(data.error || "Unable to load viewer data.");
       }
-      postToApp(data.payload, { silent: Boolean(options.silent) });
+      const changed = postToApp(data.payload, { silent: Boolean(options.silent), force: Boolean(options.force) });
       if (method !== "POST") {
         await refreshGitBadgeCounters();
       }
-      return true;
+      return changed;
     } catch (error) {
       markConnectionDisconnected(error);
       throw error;
@@ -840,6 +1308,18 @@
     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 isCdxMissionsOpen() {
+    const panel = documentPanel();
+    const title = documentTitle();
+    return Boolean(panel && !panel.hidden && title && title.textContent === "CDX missions");
+  }
+
   function isCiStatusOpen() {
     const panel = documentPanel();
     const title = documentTitle();
@@ -847,16 +1327,23 @@
   }
 
   async function refreshViewer(method = "POST", options = {}) {
-    await loadItems(method, options);
+    const changed = await loadItems(method, options);
     if (isGitStatusOpen()) {
-      await showGitStatus({ preserve: true, silent: Boolean(options.silent) });
+      await showGitStatus({ preserve: true, silent: Boolean(options.silent), skipUnchanged: !changed && !options.force, force: Boolean(options.force) });
     } else if (isCiStatusOpen()) {
-      await showCiStatus({ silent: Boolean(options.silent) });
+      await showCiStatus({ silent: Boolean(options.silent), skipUnchanged: !changed && !options.force, force: Boolean(options.force) });
     } else if (isCdxStatusOpen()) {
-      await showCdxStatus({ silent: Boolean(options.silent) });
+      await showCdxStatus({ silent: Boolean(options.silent), skipUnchanged: !changed && !options.force, force: Boolean(options.force) });
+    } else if (isCdxRunsOpen()) {
+      if (changed || options.force) {
+        await showCdxRuns({ silent: Boolean(options.silent) });
+      }
     } else if (method === "POST") {
       await refreshGitBadgeCounters();
     }
+    if (!changed && !options.silent && !options.force) {
+      setMeta(`Checked just now · no viewer changes (${new Date().toLocaleTimeString()})`);
+    }
   }
 
   function autoRefreshItems() {
@@ -1147,6 +1634,31 @@
     `).join("");
   }
 
+  function renderGitSummaryCard(label, value) {
+    return `
+      <div class="viewer-insights__card">
+        <div class="viewer-insights__label">${escapeHtml(label)}</div>
+        <div class="viewer-insights__value">${escapeHtml(value)}</div>
+      </div>
+    `;
+  }
+
+  function renderGitSummarySegments(label, segments) {
+    return `
+      <div class="viewer-insights__card viewer-git__summary-card">
+        <div class="viewer-insights__label">${escapeHtml(label)}</div>
+        <div class="viewer-git__summary-segments">
+          ${segments.map(([segmentLabel, value]) => `
+            <span class="viewer-git__summary-segment">
+              <span>${escapeHtml(segmentLabel)}</span>
+              <strong>${escapeHtml(value)}</strong>
+            </span>
+          `).join("")}
+        </div>
+      </div>
+    `;
+  }
+
   function renderInsightBars(entries, total) {
     const denominator = Math.max(1, Number(total) || 0);
     if (!entries.length) {
@@ -1570,15 +2082,41 @@
     return asArray(status?.rows);
   }
 
+  function numericValues(values) {
+    return values.map((value) => Number(value)).filter((value) => Number.isFinite(value));
+  }
+
+  function formatPercentRange(values) {
+    const numbers = numericValues(values).map((value) => Math.max(0, Math.min(100, Math.round(value))));
+    if (!numbers.length) {
+      return "not reported";
+    }
+    const min = Math.min(...numbers);
+    const max = Math.max(...numbers);
+    return min === max ? `${min}%` : `${min}-${max}%`;
+  }
+
   function cdxProviders(status) {
-    const explicitProviders = pickFirstArray(status, ["providers", "providerStatus", "provider_status"]);
-    if (explicitProviders.length) {
-      return explicitProviders;
+    const rows = cdxRows(status);
+    if (!rows.length) {
+      return pickFirstArray(status, ["providers", "providerStatus", "provider_status"]);
     }
     const grouped = new Map();
-    cdxRows(status).forEach((row) => {
+    rows.forEach((row) => {
       const provider = String(row.provider || "unknown");
-      const current = grouped.get(provider) || { name: provider, enabled: 0, active: 0, authenticated: 0, sessions: 0, lowest_available_pct: null };
+      const current = grouped.get(provider) || {
+        name: provider,
+        enabled: 0,
+        active: 0,
+        authenticated: 0,
+        sessions: 0,
+        remaining_5h: "not reported",
+        remaining_week: "not reported",
+        credits: "",
+        _remaining5hValues: [],
+        _remainingWeekValues: [],
+        _creditsValues: []
+      };
       current.sessions += 1;
       if (row.enabled) {
         current.enabled += 1;
@@ -1589,15 +2127,31 @@
       if (String(row.auth_status || "").toLowerCase() === "authenticated") {
         current.authenticated += 1;
       }
-      if (typeof row.available_pct === "number") {
-        current.lowest_available_pct = current.lowest_available_pct === null
-          ? row.available_pct
-          : Math.min(current.lowest_available_pct, row.available_pct);
+      const fiveHour = Number(row.remaining_5h_pct ?? row.remaining5hPct);
+      if (Number.isFinite(fiveHour)) {
+        current._remaining5hValues.push(fiveHour);
+      }
+      const week = Number(row.remaining_week_pct ?? row.remainingWeekPct);
+      if (Number.isFinite(week)) {
+        current._remainingWeekValues.push(week);
+      }
+      if (row.credits !== undefined && row.credits !== null && row.credits !== "") {
+        current._creditsValues.push(row.credits);
       }
       current.state = current.active > 0 ? "active" : current.enabled > 0 ? "enabled" : "disabled";
       grouped.set(provider, current);
     });
-    return Array.from(grouped.values());
+    return Array.from(grouped.values()).map((provider) => {
+      const creditsNumbers = numericValues(provider._creditsValues);
+      const creditsTotal = creditsNumbers.length ? creditsNumbers.reduce((total, value) => total + value, 0) : null;
+      const { _remaining5hValues, _remainingWeekValues, _creditsValues, ...publicProvider } = provider;
+      return {
+        ...publicProvider,
+        remaining_5h: formatPercentRange(_remaining5hValues),
+        remaining_week: formatPercentRange(_remainingWeekValues),
+        credits: creditsTotal === null ? "" : creditsTotal.toFixed(2)
+      };
+    });
   }
 
   function cdxSessions(status) {
@@ -1637,8 +2191,25 @@
     return rows || `<li class="viewer-cdx__empty">${escapeHtml(emptyText)}</li>`;
   }
 
+  function renderCdxArtifactRows(value, emptyText) {
+    const rows = objectEntries(value).slice(0, 12).map(([key, entry]) => {
+      const path = typeof entry === "string" ? entry : "";
+      return `
+        <li class="viewer-cdx__row">
+          <span>${escapeHtml(cdxLabel(key))}</span>
+          <strong>${path
+            ? `<button class="viewer-cdx__path-link" type="button" data-viewer-cdx-artifact-path="${escapeHtml(path)}">${escapeHtml(path)}</button>`
+            : escapeHtml(typeof entry === "object" ? JSON.stringify(entry) : entry)}
+          </strong>
+        </li>
+      `;
+    }).join("");
+    return rows || `<li class="viewer-cdx__empty">${escapeHtml(emptyText)}</li>`;
+  }
+
   function cdxLabel(value) {
     return String(value || "")
+      .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
       .replace(/[_-]+/g, " ")
       .replace(/\b\w/g, (letter) => letter.toUpperCase());
   }
@@ -1648,7 +2219,7 @@
     if (["ready", "ok", "active", "enabled", "authenticated"].some((entry) => state.includes(entry))) {
       return "ok";
     }
-    if (["starting", "pending", "warning", "low", "limited"].some((entry) => state.includes(entry))) {
+    if (["starting", "pending", "running", "warning", "low", "limited", "stale"].some((entry) => state.includes(entry))) {
       return "warn";
     }
     if (["error", "failed", "disabled", "unavailable", "unauthenticated"].some((entry) => state.includes(entry))) {
@@ -1781,6 +2352,10 @@
     return `<span class="viewer-cdx__badge viewer-cdx__badge--${cdxStateClass(label)}">${escapeHtml(cdxLabel(label))}</span>`;
   }
 
+  function cdxRunStatusDetail(run) {
+    return "";
+  }
+
   function cdxDetailEntries(item, excludedKeys) {
     return objectEntries(item)
       .filter(([key, value]) => !excludedKeys.includes(key) && value !== undefined && value !== null && value !== "")
@@ -1906,36 +2481,264 @@
     return rows || `<li class="viewer-cdx__empty">${escapeHtml(emptyText)}</li>`;
   }
 
-  function renderCdxStatus(payload) {
-    if (!payload || payload.state !== "ok") {
+  function cdxMissionCatalog(payload = {}) {
+    return payload.catalog || {
+      missions: [
+        { id: "full-audit", title: "Full audit", description: "Audit the repository and optionally apply safe, validated fixes.", scope: "repository", requiresPlanConfirmation: false, supportsFileWrites: true, inputFields: [{ id: "directFixes", label: "Fix directly", type: "checkbox" }] },
+        { id: "release-review", title: "Review since latest release", description: "Review changes since the latest release and optionally apply safe fixes.", scope: "latest-release", requiresPlanConfirmation: false, supportsFileWrites: true, inputFields: [{ id: "directFixes", label: "Fix directly", type: "checkbox" }] },
+        { id: "corpus-ready", title: "Prepare dev-ready corpus", description: "Produce a corpus plan for explicit deterministic application.", scope: "open-logics-workflow", requiresPlanConfirmation: true, supportsFileWrites: false },
+        { id: "wish-to-request", title: "Wish to request", description: "Create or draft a structured Logics request from a free-form wish.", scope: "request-draft", requiresPlanConfirmation: false, supportsFileWrites: true, inputFields: [{ id: "wishText", label: "Wish or intent", type: "textarea", required: true }] },
+        { id: "pre-release", title: "Guarded pre-release", description: "Prepare release metadata, changelog, validation, and fixes without tagging or publishing.", scope: "pre-release-report", requiresPlanConfirmation: false, supportsFileWrites: true, inputFields: [{ id: "releaseVersion", label: "Version", type: "text", placeholder: "vX.X.X", required: true }, { id: "runFullValidation", label: "Run full validation and report fixes before pre-release", type: "checkbox" }] }
+      ],
+      strengths: [
+        { id: "standard", label: "Standard" },
+        { id: "deep", label: "Deep" },
+        { id: "max", label: "Max" }
+      ],
+      defaultMissionId: "full-audit",
+      defaultStrengthId: "standard"
+    };
+  }
+
+  function selectedCdxMissionRequest() {
+    const catalog = latestCdxMissionState.catalog || cdxMissionCatalog();
+    const missions = Array.isArray(catalog.missions) ? catalog.missions : [];
+    const missionId = latestCdxMissionState.missionId || "full-audit";
+    const mission = missions.find((entry) => entry.id === missionId) || {};
+    const allowFileWrites = mission.supportsFileWrites === false
+      ? "false"
+      : (latestCdxMissionState.missionInputs.allowFileWrites === "false" ? "false" : "true");
+    return {
+      missionId,
+      sessionId: latestCdxMissionState.sessionId || "",
+      strengthId: latestCdxMissionState.strengthId || "standard",
+      ...latestCdxMissionState.missionInputs,
+      allowFileWrites,
+      commitAtEnd: latestCdxMissionState.missionInputs.commitAtEnd === "true" ? "true" : "false"
+    };
+  }
+
+  function renderCdxMissionInputs(mission) {
+    const fields = Array.isArray(mission?.inputFields) ? mission.inputFields : [];
+    if (!fields.length) {
+      return "";
+    }
+    const rows = fields.map((field) => {
+      const id = field.id || "";
+      const value = latestCdxMissionState.missionInputs[id] || "";
+      if (field.type === "checkbox") {
+        return `
+          <label class="viewer-cdx__field viewer-cdx__field--check">
+            <input data-viewer-cdx-input="${escapeHtml(id)}" type="checkbox"${value === "true" ? " checked" : ""}>
+            <span>${escapeHtml(field.label || cdxLabel(id))}</span>
+          </label>
+        `;
+      }
+      if (field.type === "textarea") {
+        return `
+          <label class="viewer-cdx__field">
+            <span>${escapeHtml(field.label || cdxLabel(id))}</span>
+            <textarea data-viewer-cdx-input="${escapeHtml(id)}" placeholder="${escapeHtml(field.placeholder || "")}" rows="5">${escapeHtml(value)}</textarea>
+          </label>
+        `;
+      }
       return `
-        <div class="viewer-cdx">
-          <div class="viewer-cdx__state">${escapeHtml(payload?.message || "CDX status is unavailable.")}</div>
-        </div>
+        <label class="viewer-cdx__field">
+          <span>${escapeHtml(field.label || cdxLabel(id))}</span>
+          <input data-viewer-cdx-input="${escapeHtml(id)}" type="${escapeHtml(field.type || "text")}" value="${escapeHtml(value)}" placeholder="${escapeHtml(field.placeholder || "")}"${field.pattern ? ` pattern="${escapeHtml(field.pattern)}"` : ""}>
+        </label>
       `;
-    }
-    const status = payload.status || {};
-    const providers = cdxProviders(status);
+    }).join("");
+    return `<div class="viewer-cdx__inputs">${rows}</div>`;
+  }
+
+  function renderCdxMissionSetup(statusPayload, planPayload, runPayload, applyPayload) {
+    const catalog = cdxMissionCatalog(planPayload || {});
+    latestCdxMissionState.catalog = catalog;
+    const missions = Array.isArray(catalog.missions) ? catalog.missions : [];
+    const strengths = Array.isArray(catalog.strengths) ? catalog.strengths : [];
+    const status = statusPayload?.status || {};
     const sessions = cdxSessions(status);
-    const readiness = cdxReadiness(status);
-    const commands = pickFirstArray(status, ["nextCommands", "next_commands", "safeCommands", "safe_commands", "commands"])
-      .map((entry) => typeof entry === "string" ? entry : (entry.command || entry.value || entry.name || ""))
-      .filter(Boolean);
-    if (!commands.length) {
-      commands.push("cdx status --json");
-    }
-    const runtimeState = status.state || status.status || status.availability || "ok";
-    const readinessCount = objectEntries(readiness).length;
-    const cards = [
-      ["Runtime", runtimeState],
-      ["Providers", providers.length],
-      ["Sessions", sessions.length],
-      ["Readiness", readinessCount ? `${readinessCount} signals` : "Not reported"]
-    ].map(([label, value]) => `
-      <div class="viewer-cdx__card">
-        <div class="viewer-cdx__label">${escapeHtml(label)}</div>
-        <div class="viewer-cdx__value">${label === "Runtime" ? renderCdxBadge(value) : escapeHtml(value)}</div>
-      </div>
+    const selectedSession = latestCdxMissionState.sessionId || cdxField(sessions[0] || {}, ["id", "name", "session_name", "value"], "");
+    const missionId = latestCdxMissionState.missionId || catalog.defaultMissionId || "full-audit";
+    const selectedMission = missions.find((mission) => mission.id === missionId) || {};
+    const strengthId = latestCdxMissionState.strengthId || catalog.defaultStrengthId || "standard";
+    const supportsFileWrites = selectedMission.supportsFileWrites !== false;
+    const allowFileWrites = supportsFileWrites && latestCdxMissionState.missionInputs.allowFileWrites !== "false";
+    const fileWriteLabel = ["full-audit", "release-review"].includes(selectedMission.id)
+      ? "Write mission corpus/report"
+      : "Allow CDX to modify files";
+    const fileWriteControl = supportsFileWrites
+      ? `
+            <label class="viewer-cdx__field viewer-cdx__field--check">
+              <input data-viewer-cdx-input="allowFileWrites" type="checkbox"${allowFileWrites ? " checked" : ""}>
+              <span>${escapeHtml(fileWriteLabel)}</span>
+            </label>
+            <label class="viewer-cdx__field viewer-cdx__field--check">
+              <input data-viewer-cdx-input="commitAtEnd" type="checkbox"${latestCdxMissionState.missionInputs.commitAtEnd === "true" ? " checked" : ""}>
+              <span>Commit changes at end</span>
+            </label>
+        `
+      : `
+            <div class="viewer-cdx__meta">Corpus updates are applied after CDX returns allowed actions.</div>
+        `;
+    latestCdxMissionState.sessionId = selectedSession;
+    const missionCards = missions.map((mission) => `
+      <button class="viewer-cdx__mission${mission.id === missionId ? " is-active" : ""}" type="button" data-viewer-cdx-mission="${escapeHtml(mission.id)}" aria-pressed="${mission.id === missionId ? "true" : "false"}">
+        <strong>${escapeHtml(mission.title || mission.id)}</strong>
+        <span>${escapeHtml(mission.description || "")}</span>
+        <em>${escapeHtml(cdxLabel(mission.scope || ""))}</em>
+      </button>
+    `).join("");
+    const sessionOptions = sessions.map((session) => {
+      const item = session && typeof session === "object" ? session : { value: session };
+      const id = cdxField(item, ["id", "name", "session_name", "value"], "");
+      const label = [id, cdxField(item, ["provider"], ""), renderTextRemaining(item)].filter(Boolean).join(" · ");
+      return `<option value="${escapeHtml(id)}"${id === selectedSession ? " selected" : ""}>${escapeHtml(label || id)}</option>`;
+    }).join("");
+    const strengthButtons = strengths.map((strength) => `
+      <button class="viewer-cdx__mode${strength.id === strengthId ? " is-active" : ""}" type="button" data-viewer-cdx-strength="${escapeHtml(strength.id)}" aria-pressed="${strength.id === strengthId ? "true" : "false"}">${escapeHtml(strength.label || cdxLabel(strength.id))}</button>
+    `).join("");
+    const plan = planPayload?.plan;
+    const warnings = Array.isArray(plan?.warnings) ? plan.warnings : [];
+    const command = Array.isArray(plan?.command) ? plan.command.join(" ") : "";
+    const warningRows = warnings.map((warning) => `<li>${escapeHtml(warning)}</li>`).join("");
+    const canRun = planPayload?.state === "ok" && plan?.canRun;
+    const usage = runPayload?.run?.usage || {};
+    const run = runPayload?.run;
+    const usageText = usage.available
+      ? `${usage.totalTokens ?? "-"} total · ${usage.inputTokens ?? "-"} in · ${usage.outputTokens ?? "-"} out`
+      : (usage.message || "Token usage not reported yet.");
+    const parsedActions = Array.isArray(run?.parsed?.actions) ? run.parsed.actions : [];
+    const applyResults = Array.isArray(applyPayload?.results) ? applyPayload.results : [];
+    const actionRows = parsedActions.map((action) => `
+      <li class="viewer-cdx__row"><span>${escapeHtml(cdxLabel(action.type || "action"))}</span><strong>${escapeHtml(action.target || "-")}</strong></li>
+    `).join("");
+    const applyRows = applyResults.map((result) => `
+      <li class="viewer-cdx__row"><span>${escapeHtml(cdxLabel(result.type || "action"))}</span><strong>${escapeHtml(result.returnCode === 0 ? "applied" : "failed")}</strong></li>
+    `).join("");
+    return `
+      <div class="viewer-cdx__workspace viewer-cdx__workspace--missions">
+        <div class="viewer-cdx__stack">
+          <section class="viewer-cdx__section">
+            <h2 class="viewer-cdx__heading">Mission</h2>
+            <div class="viewer-cdx__missions">${missionCards}</div>
+          </section>
+          <section class="viewer-cdx__section">
+            <h2 class="viewer-cdx__heading">Execution</h2>
+            <label class="viewer-cdx__field">
+              <span>Session</span>
+              <select data-viewer-cdx-session>${sessionOptions || '<option value="">No session reported</option>'}</select>
+            </label>
+            <div class="viewer-cdx__strengths">${strengthButtons}</div>
+            ${fileWriteControl}
+            ${renderCdxMissionInputs(selectedMission)}
+            <div class="viewer-cdx__actions">
+              <button class="btn" type="button" data-viewer-cdx-plan>Preview</button>
+              <button class="btn" type="button" data-viewer-cdx-run${canRun ? "" : " disabled"}>Launch run</button>
+            </div>
+          </section>
+        </div>
+        <div class="viewer-cdx__stack">
+          <section class="viewer-cdx__section">
+            <h2 class="viewer-cdx__heading">Plan preview</h2>
+            ${planPayload && planPayload.state !== "ok" ? `<div class="viewer-cdx__state">${escapeHtml(planPayload.message || "Unable to build mission plan.")}</div>` : ""}
+            ${command ? `<pre class="viewer-cdx__code">${escapeHtml(command)}</pre>` : '<div class="viewer-cdx__empty">Preview a mission to inspect the exact command before launch.</div>'}
+            ${plan?.releaseTag ? `<div class="viewer-cdx__meta">Base tag: ${escapeHtml(plan.releaseTag)}</div>` : ""}
+            ${plan?.commitAtEnd ? '<div class="viewer-cdx__meta">Commit at end: enabled when mission changes files.</div>' : ""}
+            ${plan?.requiresConfirmation ? '<div class="viewer-cdx__meta">Plan-first mission: Logics changes need explicit apply after CDX returns allowed actions.</div>' : ""}
+            ${warningRows ? `<ul class="viewer-cdx__warnings">${warningRows}</ul>` : ""}
+          </section>
+          <section class="viewer-cdx__section">
+            <h2 class="viewer-cdx__heading">Run output</h2>
+            ${runPayload ? `<div class="viewer-cdx__state viewer-cdx__state--${escapeHtml(cdxStateClass(runPayload.state))}">${escapeHtml(runPayload.message || cdxLabel(runPayload.state))}</div>` : '<div class="viewer-cdx__empty">No mission run launched yet.</div>'}
+            ${run ? `<ul class="viewer-cdx__list">
+              <li class="viewer-cdx__row"><span>Run</span><strong>${escapeHtml(run.runId || "-")}</strong></li>
+              <li class="viewer-cdx__row"><span>Usage</span><strong>${escapeHtml(usageText)}</strong></li>
+              <li class="viewer-cdx__row"><span>Return code</span><strong>${escapeHtml(run.returnCode ?? "-")}</strong></li>
+            </ul>` : ""}
+            ${run?.stdout ? `<pre class="viewer-cdx__code">${escapeHtml(run.stdout)}</pre>` : ""}
+            ${run?.stderr ? `<pre class="viewer-cdx__code viewer-cdx__code--error">${escapeHtml(run.stderr)}</pre>` : ""}
+          </section>
+          ${plan?.missionId === "corpus-ready" || latestCdxMissionState.missionId === "corpus-ready" ? `
+            <section class="viewer-cdx__section">
+              <h2 class="viewer-cdx__heading">Corpus apply</h2>
+              <ul class="viewer-cdx__list">${actionRows || '<li class="viewer-cdx__empty">CDX has not returned allowed corpus actions yet.</li>'}</ul>
+              <div class="viewer-cdx__actions">
+                <button class="btn" type="button" data-viewer-cdx-apply-plan${parsedActions.length ? "" : " disabled"}>Apply allowed actions</button>
+              </div>
+              ${applyPayload ? `<div class="viewer-cdx__state viewer-cdx__state--${escapeHtml(cdxStateClass(applyPayload.state))}">${escapeHtml(applyPayload.message || cdxLabel(applyPayload.state))}</div>` : ""}
+              ${applyRows ? `<ul class="viewer-cdx__list">${applyRows}</ul>` : ""}
+            </section>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
+
+  function renderTextRemaining(item) {
+    const percent = cdxRemainingPct(item);
+    return percent === null ? "" : `${percent}% remaining`;
+  }
+
+  function renderCdxMissions(statusPayload, planPayload = null, runPayload = null, applyPayload = null) {
+    if (!statusPayload || statusPayload.state !== "ok") {
+      return `
+        <div class="viewer-cdx">
+          ${renderCdxModeSwitcher("missions")}
+          <div class="viewer-cdx__state">${escapeHtml(statusPayload?.message || "CDX missions are unavailable.")}</div>
+        </div>
+      `;
+    }
+    return `
+      <div class="viewer-cdx">
+        ${renderCdxModeSwitcher("missions")}
+        ${renderCdxMissionSetup(statusPayload, planPayload, runPayload, applyPayload)}
+      </div>
+    `;
+  }
+
+  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 === "missions" ? " is-active" : ""}" type="button" data-viewer-cdx-mode="missions" aria-selected="${active === "missions" ? "true" : "false"}">Missions</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>
+      `;
+    }
+    const status = payload.status || {};
+    const providers = cdxProviders(status);
+    const sessions = cdxSessions(status);
+    const readiness = cdxReadiness(status);
+    const commands = pickFirstArray(status, ["nextCommands", "next_commands", "safeCommands", "safe_commands", "commands"])
+      .map((entry) => typeof entry === "string" ? entry : (entry.command || entry.value || entry.name || ""))
+      .filter(Boolean);
+    if (!commands.length) {
+      commands.push("cdx status --json");
+    }
+    const runtimeState = status.state || status.status || status.availability || "ok";
+    const readinessCount = objectEntries(readiness).length;
+    const cards = [
+      ["Runtime", runtimeState],
+      ["Providers", providers.length],
+      ["Sessions", sessions.length],
+      ["Readiness", readinessCount ? `${readinessCount} signals` : "Not reported"]
+    ].map(([label, value]) => `
+      <div class="viewer-cdx__card">
+        <div class="viewer-cdx__label">${escapeHtml(label)}</div>
+        <div class="viewer-cdx__value">${label === "Runtime" ? renderCdxBadge(value) : escapeHtml(value)}</div>
+      </div>
     `).join("");
     const commandRows = commands.slice(0, 10).map((command, index) => `
       <li>
@@ -1945,6 +2748,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">
@@ -1952,10 +2756,6 @@
               <h2 class="viewer-cdx__heading">Sessions</h2>
               ${renderCdxSessionTable(sessions, "No sessions reported.")}
             </section>
-            <section class="viewer-cdx__section">
-              <h2 class="viewer-cdx__heading">Providers</h2>
-              <ul class="viewer-cdx__list">${renderCdxEntityRows(providers, "No provider status reported.", { subtitleKeys: ["model"] })}</ul>
-            </section>
           </div>
           <div class="viewer-cdx__stack">
             <section class="viewer-cdx__section">
@@ -1966,13 +2766,316 @@
               <h2 class="viewer-cdx__heading">Safe next commands</h2>
               <ul class="viewer-cdx__commands">${commandRows || '<li class="viewer-cdx__empty">No suggested commands reported.</li>'}</ul>
             </section>
+            <section class="viewer-cdx__section">
+              <h2 class="viewer-cdx__heading">Providers</h2>
+              <ul class="viewer-cdx__list">${renderCdxEntityRows(providers, "No provider status reported.", { subtitleKeys: ["model"] })}</ul>
+            </section>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  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 staleCount = runs.filter((run) => String(cdxField(run, ["status", "state"], "")).toLowerCase() === "stale").length;
+    const runningCount = runs.filter((run) => ["running", "starting", "pending"].includes(String(cdxField(run, ["status", "state"], "")).toLowerCase())).length;
+    const runsSummary = staleCount
+      ? `${runs.length} reported · ${staleCount} incomplete${runningCount ? ` · ${runningCount} running` : ""}`
+      : runningCount
+      ? `${runs.length} reported · ${runningCount} running`
+      : `${runs.length} reported`;
+    const rows = runs.map((run) => {
+      const runId = cdxField(run, ["run_id", "runId", "id"], "");
+      const status = cdxField(run, ["status", "state"], "unknown");
+      const detail = cdxRunStatusDetail(run);
+      return `
+        <tr>
+          <td><code>${escapeHtml(runId || "-")}</code>${detail ? `<div class="viewer-cdx__meta">${escapeHtml(detail)}</div>` : ""}</td>
+          <td>${renderCdxBadge(status)}</td>
+          <td>${escapeHtml(cdxField(run, ["kind"], "assistant"))}</td>
+          <td>${escapeHtml(cdxField(run, ["session", "session_id", "sessionId"], "-"))}</td>
+          <td>${escapeHtml(cdxField(run, ["cwd", "workspace", "repo"], "-"))}</td>
+          <td>${runId ? `<button class="viewer-cdx__mode" type="button" data-viewer-cdx-report="${escapeHtml(runId)}">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(runsSummary)}</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 cdxReportMissionOutput(report, run, taskReport) {
+    const parsed = report?.parsed && typeof report.parsed === "object" ? report.parsed : {};
+    const candidates = [
+      report?.missionOutput,
+      report?.mission_output,
+      parsed.missionOutput,
+      parsed.mission_output,
+      run?.missionOutput,
+      run?.mission_output,
+      taskReport?.missionOutput,
+      taskReport?.mission_output
+    ];
+    return candidates.find((candidate) => candidate && typeof candidate === "object" && !Array.isArray(candidate)) || null;
+  }
+
+  function cdxCount(value) {
+    if (Array.isArray(value)) {
+      return value.length;
+    }
+    if (value && typeof value === "object") {
+      return objectEntries(value).length;
+    }
+    return value ? 1 : 0;
+  }
+
+  function cdxReportCanCreateRequest(taskReport, missionOutput) {
+    if (taskReport?.kind === "code-review") {
+      return true;
+    }
+    if (cdxCount(taskReport?.findings)) {
+      return true;
+    }
+    return ["findings", "recommendations", "requestFiles", "actionableFixes", "releasePlan"].some((key) => cdxCount(missionOutput?.[key]));
+  }
+
+  function renderCdxReportCards(cards) {
+    return `
+      <div class="viewer-cdx__summary">
+        ${cards.map(([label, value]) => `
+          <div class="viewer-cdx__card">
+            <div class="viewer-cdx__label">${escapeHtml(label)}</div>
+            <div class="viewer-cdx__value">${escapeHtml(value)}</div>
+          </div>
+        `).join("")}
+      </div>
+    `;
+  }
+
+  function renderCdxDetailValue(value) {
+    if (Array.isArray(value)) {
+      return `
+        <ol class="viewer-cdx__detail-list">
+          ${value.map((item) => `
+            <li>${typeof item === "object" && item !== null
+              ? `<pre class="viewer-cdx__detail-code">${escapeHtml(JSON.stringify(item, null, 2))}</pre>`
+              : escapeHtml(String(item))}
+            </li>
+          `).join("")}
+        </ol>
+      `;
+    }
+    if (value && typeof value === "object") {
+      return `<pre class="viewer-cdx__detail-code">${escapeHtml(JSON.stringify(value, null, 2))}</pre>`;
+    }
+    return `<strong>${escapeHtml(String(value))}</strong>`;
+  }
+
+  function renderCdxDetailRow(label, value) {
+    return `
+      <li class="viewer-cdx__row viewer-cdx__row--block">
+        <span>${escapeHtml(label)}</span>
+        <div class="viewer-cdx__detail-value">${renderCdxDetailValue(value)}</div>
+      </li>
+    `;
+  }
+
+  function parseCdxLogJson(content) {
+    const raw = String(content || "").trim();
+    if (!raw) {
+      return null;
+    }
+    try {
+      return { kind: "json", value: JSON.parse(raw) };
+    } catch {
+      // Fall through to JSONL detection.
+    }
+    const lines = raw.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+    if (lines.length < 2) {
+      return null;
+    }
+    const values = [];
+    for (const line of lines) {
+      try {
+        values.push(JSON.parse(line));
+      } catch {
+        return null;
+      }
+    }
+    return { kind: "jsonl", value: values };
+  }
+
+  function renderCdxStructuredLog(parsed) {
+    if (!parsed) {
+      return "";
+    }
+    const label = parsed.kind === "jsonl" ? `${parsed.value.length} JSONL event(s)` : "JSON document";
+    return `
+      <details class="viewer-cdx__log-structured" open>
+        <summary>Structured preview · ${escapeHtml(label)}</summary>
+        <div class="viewer-cdx__detail-value">${renderCdxDetailValue(parsed.value)}</div>
+      </details>
+    `;
+  }
+
+  function renderCdxLogPreview(payload) {
+    const path = payload?.path || "";
+    const content = payload?.content || "";
+    const truncated = Boolean(payload?.truncated);
+    const parsed = parseCdxLogJson(content);
+    return `
+      <div class="viewer-cdx">
+        <section class="viewer-cdx__section">
+          <div class="viewer-ci__heading"><h2>Log preview</h2><span>${truncated ? "latest output" : "complete file"}</span></div>
+          <div class="viewer-cdx__log-preview">
+            <div class="viewer-cdx__meta">${escapeHtml(path)}</div>
+            ${truncated ? '<div class="viewer-cdx__state viewer-cdx__state--warn">Preview truncated to the end of the file. Open the file externally for the full log.</div>' : ""}
+            ${renderCdxStructuredLog(parsed)}
+            <details class="viewer-cdx__log-raw"${parsed ? "" : " open"}>
+              <summary>Raw log</summary>
+              <pre class="viewer-cdx__log-content">${escapeHtml(content || "Log is empty.")}</pre>
+            </details>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+
+  function renderCdxMissionOutput(output) {
+    if (!output) {
+      return "";
+    }
+    const rows = [
+      ["Summary", output.summary],
+      ["Version", output.version],
+      ["Validation", output.validationMode],
+      ["Blocked", typeof output.blocked === "boolean" ? (output.blocked ? "Yes" : "No") : ""],
+      ["Actions", cdxCount(output.actions)],
+      ["Findings", cdxCount(output.findings)],
+      ["Recommendations", cdxCount(output.recommendations)],
+      ["Changed files", cdxCount(output.changedFiles)],
+      ["Corpus files", cdxCount(output.corpusFiles)],
+      ["Generated files", cdxCount(output.generatedFiles)],
+      ["Validation evidence", cdxCount(output.validationEvidence)]
+    ].filter(([_label, value]) => value !== undefined && value !== null && value !== "" && value !== 0);
+    const detailKeys = [
+      "actions",
+      "findings",
+      "recommendations",
+      "directFixes",
+      "requestFiles",
+      "actionableFixes",
+      "changedFiles",
+      "corpusFiles",
+      "generatedFiles",
+      "validationEvidence",
+      "releasePlan"
+    ];
+    const details = detailKeys
+      .filter((key) => cdxCount(output[key]))
+      .map((key) => renderCdxDetailRow(cdxLabel(key), output[key]))
+      .join("");
+    return `
+      <section class="viewer-cdx__section">
+        <div class="viewer-ci__heading"><h2>Mission output</h2><span>${escapeHtml(rows.length)} signals</span></div>
+        <ul class="viewer-cdx__list">
+          ${rows.map(([label, value]) => renderCdxDetailRow(label, value)).join("") || '<li class="viewer-cdx__empty">No structured mission output was reported.</li>'}
+        </ul>
+        ${details ? `<ul class="viewer-cdx__list">${details}</ul>` : ""}
+      </section>
+    `;
+  }
+
+  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 runError = report.error || run.error || {};
+    const artifacts = report.artifacts || run.artifacts || {};
+    const findings = Array.isArray(taskReport.findings) ? taskReport.findings : [];
+    const missionOutput = cdxReportMissionOutput(report, run, taskReport);
+    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 = cdxReportCanCreateRequest(taskReport, missionOutput);
+    return `
+      <div class="viewer-cdx">
+        ${renderCdxModeSwitcher("runs")}
+        <section class="viewer-cdx__section">
+          <div class="viewer-ci__heading viewer-ci__heading--actions">
+            <div><h2>Run report</h2><span>${escapeHtml(run.status || "unknown")}</span></div>
+            <button class="viewer-cdx__mode" type="button" data-viewer-cdx-back-runs>Back to runs</button>
+          </div>
+          ${renderCdxReportCards([
+            ["Status", run.status || "unknown"],
+            ["Kind", taskReport.kind || run.kind || "assistant"],
+            ["Findings", String(findings.length)],
+            ["Artifacts", String(objectEntries(artifacts).length)]
+          ])}
+          <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>
+            ${renderCdxDetailRow("Summary", taskReport.summary || "No summary reported.")}
+          </ul>
+          ${canCreate ? `<button class="btn" type="button" data-viewer-cdx-create-request="${escapeHtml(run.run_id || taskReport.run_id || "")}">Create Logics request</button>` : ""}
+        </section>
+        ${renderCdxMissionOutput(missionOutput)}
+        ${objectEntries(runError).length ? `
+          <section class="viewer-cdx__section">
+            <div class="viewer-ci__heading"><h2>Run signal</h2><span>${escapeHtml(runError.code || "reported")}</span></div>
+            <ul class="viewer-cdx__list">${renderCdxObjectRows(runError, "No run signal reported.")}</ul>
+          </section>
+        ` : ""}
+        ${objectEntries(artifacts).length ? `
+          <section class="viewer-cdx__section">
+            <div class="viewer-ci__heading"><h2>Artifacts</h2><span>${escapeHtml(objectEntries(artifacts).length)} paths</span></div>
+            <ul class="viewer-cdx__list">${renderCdxArtifactRows(artifacts, "No artifact paths reported.")}</ul>
+          </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...");
     }
@@ -1994,11 +3097,207 @@
     if (!response.ok || !data.ok) {
       throw new Error(data.error || "Unable to load CDX status.");
     }
+    const nextCdxSignature = runtimeStatusSignature(data.payload);
+    if (options.skipUnchanged && !options.force && latestCdxStatusSignature && nextCdxSignature === latestCdxStatusSignature) {
+      updateMainCdxBadge(data.payload);
+      if (!options.silent) {
+        setMeta(`Checked CDX status just now · no changes (${new Date().toLocaleTimeString()})`);
+      }
+      return;
+    }
+    latestCdxStatusSignature = nextCdxSignature;
     updateMainCdxBadge(data.payload);
     setDocument("CDX status", renderCdxStatus(data.payload));
     setMeta(options.silent ? "CDX status refreshed." : "CDX status loaded.");
   }
 
+  async function showCdxMissions(options = {}) {
+    if (!isCapabilityAvailable("cdx")) {
+      const message = capabilityMessage("cdx", "CDX is not available for this project.");
+      setDocument("CDX missions", renderCdxMissions({ state: capability("cdx").state, message }));
+      setMeta(message);
+      return;
+    }
+    if (!options.silent) {
+      setMeta("Loading CDX missions...");
+    }
+    const response = await fetch("/api/cdx-status");
+    let data = {};
+    try {
+      data = await response.json();
+    } catch {
+      data = {};
+    }
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to load CDX mission status.");
+    }
+    latestCdxMissionState.statusPayload = data.payload;
+    const sessions = cdxSessions(data.payload?.status || {});
+    if (!latestCdxMissionState.sessionId && sessions.length) {
+      latestCdxMissionState.sessionId = cdxField(sessions[0], ["id", "name", "session_name", "value"], "");
+    }
+    updateMainCdxBadge(data.payload);
+    setDocument("CDX missions", renderCdxMissions(data.payload, latestCdxMissionState.planPayload, latestCdxMissionState.runPayload, latestCdxMissionState.applyPayload));
+    setMeta(options.silent ? "CDX missions refreshed." : "CDX missions loaded.");
+  }
+
+  async function previewCdxMission() {
+    setMeta("Preparing CDX mission preview...");
+    const response = await fetch("/api/cdx-mission-plan", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(selectedCdxMissionRequest())
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to preview CDX mission.");
+    }
+    latestCdxMissionState.planPayload = data.payload;
+    latestCdxMissionState.runPayload = null;
+    latestCdxMissionState.applyPayload = null;
+    if (data.payload?.plan?.sessionId) {
+      latestCdxMissionState.sessionId = data.payload.plan.sessionId;
+    }
+    setDocument("CDX missions", renderCdxMissions(latestCdxMissionState.statusPayload || data.payload?.status, data.payload, null, null));
+    setMeta(data.payload?.state === "ok" ? "CDX mission preview ready." : (data.payload?.message || "CDX mission preview failed."));
+  }
+
+  async function launchCdxMission() {
+    setMeta("Launching CDX mission...");
+    const request = selectedCdxMissionRequest();
+    const plan = latestCdxMissionState.planPayload?.plan || null;
+    const pendingPayload = {
+      state: "running",
+      message: "CDX mission is running. You can keep using the viewer; this panel will update when it completes.",
+      plan,
+      run: {
+        runId: "pending",
+        returnCode: "pending",
+        pending: true,
+        usage: { available: false, message: "Still running." },
+        stdout: "",
+        stderr: ""
+      }
+    };
+    latestCdxMissionState.runPayload = pendingPayload;
+    latestCdxMissionState.applyPayload = null;
+    setDocument("CDX missions", renderCdxMissions(latestCdxMissionState.statusPayload, latestCdxMissionState.planPayload, pendingPayload, null));
+    const response = await fetch("/api/cdx-mission-run", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(request)
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to launch CDX mission.");
+    }
+    latestCdxMissionState.planPayload = { state: data.payload?.state === "ok" ? "ok" : data.payload?.state, message: data.payload?.message || "", plan: data.payload?.plan };
+    latestCdxMissionState.runPayload = data.payload;
+    latestCdxMissionState.applyPayload = null;
+    if (isCdxMissionsOpen()) {
+      setDocument("CDX missions", renderCdxMissions(latestCdxMissionState.statusPayload, latestCdxMissionState.planPayload, data.payload, null));
+    }
+    setMeta(data.payload?.state === "ok" ? "CDX mission launched." : (data.payload?.message || "CDX mission failed."));
+  }
+
+  async function applyCdxMissionPlan() {
+    const actions = latestCdxMissionState.runPayload?.run?.parsed?.actions;
+    if (!Array.isArray(actions) || !actions.length) {
+      setMeta("No corpus actions to apply.");
+      return;
+    }
+    setMeta("Applying allowed corpus actions...");
+    const response = await fetch("/api/cdx-mission-apply-plan", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ actions })
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to apply corpus plan.");
+    }
+    latestCdxMissionState.applyPayload = data.payload;
+    setDocument("CDX missions", renderCdxMissions(latestCdxMissionState.statusPayload, latestCdxMissionState.planPayload, latestCdxMissionState.runPayload, data.payload));
+    setMeta(data.payload?.state === "ok" ? "Corpus actions applied." : (data.payload?.message || "Corpus apply failed."));
+  }
+
+  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));
+    cdxCloseTarget = { type: "cdx-runs" };
+    setMeta("CDX report loaded.");
+  }
+
+  async function openCdxArtifact(path) {
+    if (!path) {
+      return;
+    }
+    setMeta("Loading CDX log...");
+    const response = await fetch("/api/file-preview", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path })
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to load CDX artifact.");
+    }
+    const reportSnapshot = currentDocumentSnapshot("CDX run report");
+    setDocument(data.payload?.name ? `CDX log · ${data.payload.name}` : "CDX log", renderCdxLogPreview(data.payload));
+    cdxCloseTarget = { type: "cdx-report", title: reportSnapshot.title, html: reportSnapshot.html };
+    setMeta(`Loaded ${data.payload?.path || path}.`);
+  }
+
+  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>`;
@@ -2023,11 +3322,26 @@
     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 matchLabel = run?.matchSource === "head-active"
+      ? "Current HEAD running"
+      : run?.matchSource === "head-failing"
+      ? "Current HEAD failing"
+      : run?.matchSource === "head-cancelled"
+      ? "Current HEAD cancelled"
+      : run?.matchSource === "head-unknown"
+      ? "Current HEAD unknown"
+      : run?.matchSource === "head"
+      ? "Current HEAD"
+      : run?.matchSource === "branch-active"
+      ? "Branch running"
+      : run?.matchSource === "branch-failing"
+      ? "Branch failing"
+      : "Latest branch run";
     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"]
+      ["Match", matchLabel]
     ]);
     const runUrl = run?.htmlUrl ? `<a class="viewer-ci__link" href="${escapeHtml(run.htmlUrl)}" target="_blank" rel="noreferrer">Open in GitHub</a>` : "";
     const runRows = run ? [
@@ -2068,6 +3382,12 @@
   }
 
   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...");
     }
@@ -2091,6 +3411,15 @@
     if (!response.ok || !data.ok) {
       throw new Error(data.error || "Unable to load CI status.");
     }
+    const nextCiSignature = runtimeStatusSignature(data.payload);
+    if (options.skipUnchanged && !options.force && latestCiStatusSignature && nextCiSignature === latestCiStatusSignature) {
+      updateMainCiBadge(data.payload);
+      if (!options.silent) {
+        setMeta(`Checked CI status just now · no changes (${new Date().toLocaleTimeString()})`);
+      }
+      return;
+    }
+    latestCiStatusSignature = nextCiSignature;
     updateMainCiBadge(data.payload);
     setDocument("CI status", renderCiStatus(data.payload));
     setMeta(options.silent ? "CI status refreshed." : "CI status loaded.");
@@ -2110,17 +3439,20 @@
     const deletedCount = Number(counts.deleted || 0);
     const renamedCount = Number(counts.renamed || 0);
     const untrackedCount = Number(counts.untracked || 0);
-    const summary = [
-      ["Branch", payload.branch || "HEAD"],
-      ["Tracking", payload.tracking || "None"],
-      ["Ahead", payload.ahead || 0],
-      ["Behind", payload.behind || 0],
-      ["State", payload.clean ? "Clean" : "Dirty"],
-      ["Staged", stagedCount],
-      ["Worktree", modifiedCount + deletedCount + renamedCount],
-      ["Untracked", untrackedCount]
-    ];
-    const cards = renderMetricCards(summary);
+    const cards = [
+      renderGitSummaryCard("Branch", payload.branch || "HEAD"),
+      renderGitSummaryCard("Tracking", payload.tracking || "None"),
+      renderGitSummarySegments("Ahead / Behind", [
+        ["Ahead", payload.ahead || 0],
+        ["Behind", payload.behind || 0]
+      ]),
+      renderGitSummaryCard("State", payload.clean ? "Clean" : "Dirty"),
+      renderGitSummarySegments("Files", [
+        ["Staged", stagedCount],
+        ["Worktree", modifiedCount + deletedCount + renamedCount],
+        ["Untracked", untrackedCount]
+      ])
+    ].join("");
     const groupDefs = [
       ["staged", "Staged", "staged"],
       ["modified", "Modified", "worktree"],
@@ -2133,7 +3465,7 @@
       ["staged", "Staged", stagedCount],
       ["worktree", "Worktree", modifiedCount + deletedCount + renamedCount],
       ["untracked", "Untracked", untrackedCount],
-      ["history", "History", Array.isArray(payload.recentCommits) ? payload.recentCommits.length : (payload.latestCommit ? 1 : 0)],
+      ["history", "History", formatGitHistoryCount(payload)],
       ["remote", "Remote", payload.tracking ? 1 : 0]
     ];
     const domains = domainDefs.map(([key, label, count], index) => `
@@ -2175,6 +3507,7 @@
     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 historyCount = formatGitHistoryCount(payload);
     const renderGitHistoryReveal = (hiddenCount) => {
       if (hiddenCount <= 0) {
         return "";
@@ -2212,7 +3545,7 @@
     return `
       <div class="viewer-git">
         <div class="viewer-git__summary">${cards}</div>
-        <div class="viewer-git__workspace">
+        <div class="viewer-git__workspace has-diff-detail">
           <nav class="viewer-git__domains" aria-label="Git domains">${domains}</nav>
           <div class="viewer-git__content" aria-label="Git domain content">
             <section class="viewer-git__panel" data-viewer-git-panel="changes">
@@ -2233,7 +3566,7 @@
               ${untrackedSections || '<p class="viewer-git__state">No untracked files.</p>'}
             </section>
             <section class="viewer-git__panel" data-viewer-git-panel="history" hidden>
-              <header class="viewer-git__panel-header"><span>History</span><strong>${escapeHtml(recentCommits.length || (payload.latestCommit ? 1 : 0))} commits</strong></header>
+              <header class="viewer-git__panel-header"><span>History</span><strong>${escapeHtml(historyCount)} commits</strong></header>
               ${history}
             </section>
             <section class="viewer-git__panel" data-viewer-git-panel="remote" hidden>
@@ -2241,7 +3574,7 @@
               ${remote}
             </section>
           </div>
-          <section class="viewer-git__detail" aria-label="Git diff">
+          <section class="viewer-git__detail" aria-label="Git diff" data-viewer-git-detail>
             <div class="viewer-git__detail-title">Diff preview</div>
             <div class="viewer-git__diff" data-viewer-git-diff>Select a changed file to preview its diff.</div>
           </section>
@@ -2250,6 +3583,11 @@
     `;
   }
 
+  function formatGitHistoryCount(payload) {
+    const count = Array.isArray(payload?.recentCommits) ? payload.recentCommits.length : (payload?.latestCommit ? 1 : 0);
+    return `${count}${payload?.recentCommitsHasMore ? "+" : ""}`;
+  }
+
   function setActiveGitFile(button) {
     document.querySelectorAll("[data-viewer-git-file]").forEach((node) => {
       if (node instanceof HTMLElement) {
@@ -2283,12 +3621,16 @@
 
   async function loadGitDiff(path, cached, button = null) {
     const diffPanel = document.querySelector("[data-viewer-git-diff]");
+    const detailTitle = document.querySelector("[data-viewer-git-detail] .viewer-git__detail-title");
     if (!(diffPanel instanceof HTMLElement) || !path) {
       return;
     }
     if (button instanceof HTMLElement) {
       setActiveGitFile(button);
     }
+    if (detailTitle instanceof HTMLElement) {
+      detailTitle.textContent = "Diff preview";
+    }
     diffPanel.textContent = "Loading diff...";
     const params = new URLSearchParams({ path });
     if (cached) {
@@ -2301,12 +3643,38 @@
       diffPanel.textContent = payload.message || data.error || "Unable to load diff.";
       return;
     }
-    const content = payload.diff || payload.message || "No diff is available for this file.";
+    const content = payload.diff || "";
+    if (!content.trim()) {
+      await loadGitFilePreview(path, diffPanel, detailTitle);
+      return;
+    }
     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>`;
   }
 
+  async function loadGitFilePreview(path, diffPanel, detailTitle = null) {
+    if (detailTitle instanceof HTMLElement) {
+      detailTitle.textContent = "File preview";
+    }
+    diffPanel.textContent = "Loading file preview...";
+    const response = await fetch(`/api/git-file-preview?${new URLSearchParams({ path }).toString()}`);
+    const data = await response.json();
+    const payload = data.payload || {};
+    if (!response.ok || !data.ok) {
+      diffPanel.textContent = data.error || "Unable to load file preview.";
+      return;
+    }
+    if (payload.state !== "ok") {
+      diffPanel.innerHTML = `<div class="viewer-git__diff-meta">${escapeHtml(payload.path || path)} · file preview unavailable</div><p class="viewer-git__state">${escapeHtml(payload.message || "File preview is unavailable.")}</p>`;
+      return;
+    }
+    const content = payload.content || "";
+    diffPanel.innerHTML = `<div class="viewer-git__diff-meta">${escapeHtml(payload.path || path)} · file preview${payload.truncated ? " · truncated" : ""}</div><pre><code>${renderGitDiffPreview(content)}</code></pre>`;
+  }
+
   function applyGitDomain(domain) {
     const selected = domain || "changes";
+    const diffDomains = new Set(["changes", "staged", "worktree", "untracked"]);
+    const showDiffDetail = diffDomains.has(selected);
     document.querySelectorAll(".viewer-git__domain[data-viewer-git-domain]").forEach((node) => {
       if (node instanceof HTMLElement) {
         const active = node.getAttribute("data-viewer-git-domain") === selected;
@@ -2319,6 +3687,16 @@
         node.hidden = node.getAttribute("data-viewer-git-panel") !== selected;
       }
     });
+    document.querySelectorAll(".viewer-git__workspace").forEach((node) => {
+      if (node instanceof HTMLElement) {
+        node.classList.toggle("has-diff-detail", showDiffDetail);
+      }
+    });
+    document.querySelectorAll("[data-viewer-git-detail]").forEach((node) => {
+      if (node instanceof HTMLElement) {
+        node.hidden = !showDiffDetail;
+      }
+    });
   }
 
   function currentGitViewState() {
@@ -2341,6 +3719,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...");
     }
@@ -2362,6 +3746,16 @@
     if (!response.ok || !data.ok) {
       throw new Error(data.error || "Unable to load Git status.");
     }
+    const nextGitSignature = gitStatusSignature(data.payload);
+    if (options.skipUnchanged && !options.force && latestGitStatusSignature && nextGitSignature === latestGitStatusSignature) {
+      setGitBadgeCountsFromPayload(data.payload, { updateMain: false });
+      updateMainGitBadges();
+      if (!options.silent) {
+        setMeta(`Checked Git status just now · no changes (${new Date().toLocaleTimeString()})`);
+      }
+      return;
+    }
+    latestGitStatusSignature = nextGitSignature;
     setGitBadgeCountsFromPayload(data.payload, { updateMain: false });
     updateMainGitBadges();
     setDocument("Git status", renderGitStatus(data.payload));
@@ -2385,7 +3779,11 @@
           return;
         }
         if (message.type === "refresh") {
-          refreshViewer("POST").catch((error) => setMeta(error.message));
+          refreshViewer("POST", { force: Boolean(message.force) }).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") {
@@ -2419,7 +3817,7 @@
     [document.getElementById("viewer-insights")].forEach((button) => {
       button?.addEventListener("click", () => {
         setRefreshMenuOpen(false);
-        showCorpusInsights().catch((error) => setMeta(error.message));
+        withPrimaryAction("insights", "Loading insights", showCorpusInsights);
       });
     });
     const autoControl = autoRefreshControl();
@@ -2462,26 +3860,30 @@
       if (!(element instanceof HTMLElement)) {
         return;
       }
-      element.addEventListener("click", () => {
+      element.addEventListener("click", (event) => {
         setRefreshMenuOpen(false);
-        refreshViewer("POST").catch((error) => setMeta(error.message));
+        withPrimaryAction("refresh", "Refreshing", () => refreshViewer("POST", { force: Boolean(event.shiftKey) }));
       });
     });
     document.getElementById("viewer-health")?.addEventListener("click", () => {
       setRefreshMenuOpen(false);
-      showHealth().catch((error) => setMeta(error.message));
+      withPrimaryAction("health", "Checking health", showHealth);
     });
     document.getElementById("viewer-git")?.addEventListener("click", () => {
-      showGitStatus().catch((error) => setMeta(error.message));
+      withPrimaryAction("git", "Checking Git status", showGitStatus);
     });
     ciButton()?.addEventListener("click", () => {
-      showCiStatus().catch((error) => setMeta(error.message));
+      withPrimaryAction("ci", "Checking CI status", showCiStatus);
     });
     document.getElementById("viewer-cdx")?.addEventListener("click", () => {
-      showCdxStatus().catch((error) => setMeta(error.message));
+      withPrimaryAction("cdx", "Checking CDX status", showCdxStatus);
+    });
+    repoPill()?.addEventListener("click", () => {
+      const menu = projectMenu();
+      setProjectMenuOpen(Boolean(menu?.hidden));
     });
     repoFolderButton()?.addEventListener("click", () => {
-      openRepositoryFolder().catch((error) => setMeta(error.message));
+      withPrimaryAction("open-repo-folder", "Opening repository folder", openRepositoryFolder);
     });
     activityClearControl()?.addEventListener("click", () => {
       clearActivityHistory();
@@ -2506,9 +3908,29 @@
     const editButton = editDocumentButton();
     if (editButton instanceof HTMLElement) {
       editButton.addEventListener("click", () => {
-        editDocument(selectedItem()).catch((error) => setMeta(error.message));
+        withPrimaryAction("edit-document", "Opening document", () => editDocument(selectedItem()));
       });
     }
+    document.addEventListener("change", (event) => {
+      const sessionTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-session]") : null;
+      const cdxInputTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-input]") : null;
+      if (sessionTarget instanceof HTMLSelectElement) {
+        latestCdxMissionState.sessionId = sessionTarget.value || "";
+        latestCdxMissionState.planPayload = null;
+        latestCdxMissionState.runPayload = null;
+        latestCdxMissionState.applyPayload = null;
+        setDocument("CDX missions", renderCdxMissions(latestCdxMissionState.statusPayload));
+      }
+      if (cdxInputTarget instanceof HTMLInputElement || cdxInputTarget instanceof HTMLTextAreaElement) {
+        const key = cdxInputTarget.getAttribute("data-viewer-cdx-input") || "";
+        if (key) {
+          latestCdxMissionState.missionInputs[key] = cdxInputTarget instanceof HTMLInputElement && cdxInputTarget.type === "checkbox" ? (cdxInputTarget.checked ? "true" : "false") : (cdxInputTarget.value || "");
+          latestCdxMissionState.planPayload = null;
+          latestCdxMissionState.runPayload = null;
+          latestCdxMissionState.applyPayload = null;
+        }
+      }
+    });
     document.addEventListener("click", (event) => {
       window.setTimeout(() => applyLocalViewerChrome(), 0);
       const target = event.target instanceof Element ? event.target.closest("[data-viewer-doc-path]") : null;
@@ -2518,6 +3940,84 @@
       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 cdxBackRunsTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-back-runs]") : null;
+      const cdxReportTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-report]") : null;
+      const cdxArtifactTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-artifact-path]") : null;
+      const cdxCreateRequestTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-create-request]") : null;
+      const cdxMissionTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-mission]") : null;
+      const cdxStrengthTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-strength]") : null;
+      const cdxPlanTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-plan]") : null;
+      const cdxRunTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-run]") : null;
+      const cdxApplyPlanTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-apply-plan]") : null;
+      if (cdxMissionTarget instanceof HTMLElement) {
+        latestCdxMissionState.missionId = cdxMissionTarget.getAttribute("data-viewer-cdx-mission") || "full-audit";
+        latestCdxMissionState.planPayload = null;
+        latestCdxMissionState.runPayload = null;
+        latestCdxMissionState.applyPayload = null;
+        latestCdxMissionState.missionInputs = {};
+        setDocument("CDX missions", renderCdxMissions(latestCdxMissionState.statusPayload));
+        return;
+      }
+      if (cdxStrengthTarget instanceof HTMLElement) {
+        latestCdxMissionState.strengthId = cdxStrengthTarget.getAttribute("data-viewer-cdx-strength") || "standard";
+        latestCdxMissionState.planPayload = null;
+        latestCdxMissionState.runPayload = null;
+        latestCdxMissionState.applyPayload = null;
+        setDocument("CDX missions", renderCdxMissions(latestCdxMissionState.statusPayload));
+        return;
+      }
+      if (cdxPlanTarget instanceof HTMLElement) {
+        withCdxMissionAction("cdx-plan", "Building CDX mission plan", previewCdxMission);
+        return;
+      }
+      if (cdxRunTarget instanceof HTMLElement) {
+        withCdxMissionAction("cdx-run", "Launching CDX mission", launchCdxMission);
+        return;
+      }
+      if (cdxApplyPlanTarget instanceof HTMLElement) {
+        withCdxMissionAction("cdx-apply-plan", "Applying CDX mission plan", applyCdxMissionPlan);
+        return;
+      }
+      if (cdxBackRunsTarget instanceof HTMLElement) {
+        withPrimaryAction("cdx-runs", "Loading CDX runs", showCdxRuns);
+        return;
+      }
+      if (cdxReportTarget instanceof HTMLElement) {
+        withPrimaryAction("cdx-report", "Loading CDX report", () => showCdxReport(cdxReportTarget.getAttribute("data-viewer-cdx-report") || ""));
+        return;
+      }
+      if (cdxArtifactTarget instanceof HTMLElement) {
+        withPrimaryAction("cdx-artifact", "Opening CDX artifact", () => openCdxArtifact(cdxArtifactTarget.getAttribute("data-viewer-cdx-artifact-path") || ""));
+        return;
+      }
+      if (cdxCreateRequestTarget instanceof HTMLElement) {
+        withPrimaryAction("cdx-create-request", "Creating Logics request", () => createRequestFromCdxReport(cdxCreateRequestTarget.getAttribute("data-viewer-cdx-create-request") || ""));
+        return;
+      }
+      if (cdxModeTarget instanceof HTMLElement) {
+        const mode = cdxModeTarget.getAttribute("data-viewer-cdx-mode") || "status";
+        if (mode === "runs") {
+          withPrimaryAction("cdx-runs", "Loading CDX runs", showCdxRuns);
+        } else if (mode === "missions") {
+          withPrimaryAction("cdx-missions", "Loading CDX missions", showCdxMissions);
+        } else {
+          withPrimaryAction("cdx", "Checking CDX status", showCdxStatus);
+        }
+        return;
+      }
+      if (projectSwitcherTarget instanceof HTMLElement) {
+        const menu = projectMenu();
+        setProjectMenuOpen(Boolean(menu?.hidden));
+        return;
+      }
+      if (projectTarget instanceof HTMLElement) {
+        event.preventDefault();
+        withPrimaryAction("switch-project", "Switching project", () => switchViewerProject(projectTarget.getAttribute("data-viewer-project-id") || ""));
+        return;
+      }
       if (gitHistoryRevealTarget instanceof HTMLElement) {
         event.preventDefault();
         event.stopImmediatePropagation();
@@ -2567,7 +4067,7 @@
         return;
       }
       if (healthTarget instanceof HTMLElement) {
-        showHealth().catch((error) => setMeta(error.message));
+        withPrimaryAction("health", "Checking health", showHealth);
         return;
       }
       if (filterTarget instanceof HTMLElement) {
@@ -2577,14 +4077,11 @@
       }
       const path = target instanceof HTMLElement ? target.getAttribute("data-viewer-doc-path") : "";
       if (path) {
-        showDocumentByPath(path).catch((error) => setMeta(error.message));
+        withPrimaryAction("read-document", "Loading document", () => showDocumentByPath(path));
       }
     });
     document.getElementById("viewer-document-close")?.addEventListener("click", () => {
-      const panel = documentPanel();
-      if (panel) {
-        panel.hidden = true;
-      }
+      withPrimaryAction("close-document", "Closing preview", closeDocumentPanel);
     });
     startAutoRefresh();
   });