@grifhinz/logics-manager 2.8.0 → 2.8.1

package/clients/viewer/browser-host.js

@@ -1,5 +1,7 @@
 (() => {
   const stateKey = "logics.localViewer.state";
+  const preferenceKey = "logics.localViewer.preferences.v1";
+  const preferenceVersion = 1;
   const meta = () => document.getElementById("viewer-meta");
   const documentPanel = () => document.getElementById("viewer-document");
   const documentTitle = () => document.getElementById("viewer-document-title");
@@ -16,6 +18,7 @@
   const projectMenu = () => document.getElementById("viewer-project-menu");
   const repoGithubLink = () => document.getElementById("viewer-repo-github");
   const repoFolderButton = () => document.getElementById("viewer-repo-folder");
+  const workspaceButton = () => document.getElementById("viewer-workspace");
   const ciButton = () => document.getElementById("viewer-ci");
   const autoRefreshControl = () => document.getElementById("viewer-auto-refresh");
   const refreshIntervalControl = () => document.getElementById("viewer-refresh-interval");
@@ -72,10 +75,27 @@
   let latestViewerStateSignature = "";
   let latestGitStatusSignature = "";
   let latestCdxStatusSignature = "";
+  let latestCdxStatusPayload = null;
   let latestCiStatusSignature = "";
   let primaryActionBusyKey = "";
   let cdxMissionBusyKey = "";
   let cdxCloseTarget = null;
+  let viewerPreferences = readViewerPreferences();
+  let autoRefreshIntervalForcedByLaunch = false;
+  const cdxStatusColumns = [
+    { id: "session", label: "SESSION" },
+    { id: "provider", label: "PROV." },
+    { id: "status", label: "STATUS" },
+    { id: "auth", label: "AUTH" },
+    { id: "ok", label: "OK" },
+    { id: "remaining5h", label: "5H" },
+    { id: "remainingWeek", label: "WEEK" },
+    { id: "block", label: "BLOCK", defaultVisible: false },
+    { id: "credits", label: "CR", defaultVisible: false },
+    { id: "reset5h", label: "RESET 5H" },
+    { id: "resetWeek", label: "RESET WEEK" },
+    { id: "updated", label: "UPDATED" }
+  ];
 
   function readStoredState() {
     try {
@@ -85,6 +105,83 @@
     }
   }
 
+  function readViewerPreferences() {
+    try {
+      const value = JSON.parse(window.localStorage.getItem(preferenceKey) || "null");
+      if (!value || typeof value !== "object" || value.version !== preferenceVersion) {
+        return { version: preferenceVersion };
+      }
+      return { ...value, version: preferenceVersion };
+    } catch {
+      return { version: preferenceVersion };
+    }
+  }
+
+  function writeViewerPreferences(nextPreferences) {
+    viewerPreferences = { ...nextPreferences, version: preferenceVersion };
+    try {
+      window.localStorage.setItem(preferenceKey, JSON.stringify(viewerPreferences));
+    } catch {
+      // Keep the in-memory preference for this session when browser storage is unavailable.
+    }
+  }
+
+  function updateViewerPreferences(patch) {
+    writeViewerPreferences({ ...viewerPreferences, ...patch });
+  }
+
+  function preferredAutoRefreshIntervalSeconds() {
+    const seconds = Number(viewerPreferences.autoRefreshIntervalSeconds);
+    return Number.isFinite(seconds) && seconds > 0 ? normalizeAutoRefreshIntervalSeconds(seconds) : null;
+  }
+
+  function cdxColumnVisibilityPreference() {
+    const stored = viewerPreferences.cdxStatusColumns;
+    const storedVisibility = stored && typeof stored === "object" ? stored.visibility : null;
+    const visibility = {};
+    cdxStatusColumns.forEach((column) => {
+      visibility[column.id] = column.defaultVisible !== false;
+      if (storedVisibility && typeof storedVisibility[column.id] === "boolean") {
+        visibility[column.id] = storedVisibility[column.id];
+      }
+    });
+    return visibility;
+  }
+
+  function persistCdxColumnVisibility(columnId, visible) {
+    const current = cdxColumnVisibilityPreference();
+    if (!cdxStatusColumns.some((column) => column.id === columnId)) {
+      return;
+    }
+    updateViewerPreferences({
+      cdxStatusColumns: {
+        visibility: { ...current, [columnId]: Boolean(visible) }
+      }
+    });
+  }
+
+  function cdxProviderFilterPreference() {
+    const stored = viewerPreferences.cdxStatusProviders;
+    if (!stored || typeof stored !== "object" || stored.mode !== "subset") {
+      return { mode: "all", selected: [] };
+    }
+    const selected = Array.isArray(stored.selected)
+      ? stored.selected.map((entry) => String(entry || "").trim()).filter(Boolean)
+      : [];
+    return selected.length ? { mode: "subset", selected: Array.from(new Set(selected)) } : { mode: "all", selected: [] };
+  }
+
+  function persistCdxProviderFilter(nextFilter) {
+    const selected = Array.isArray(nextFilter?.selected)
+      ? nextFilter.selected.map((entry) => String(entry || "").trim()).filter(Boolean)
+      : [];
+    updateViewerPreferences({
+      cdxStatusProviders: selected.length
+        ? { mode: "subset", selected: Array.from(new Set(selected)).sort() }
+        : { mode: "all", selected: [] }
+    });
+  }
+
   function sanitizeViewerFilterState(value) {
     const nextState = { ...defaultFilterState };
     if (!value || typeof value !== "object") {
@@ -155,6 +252,7 @@
     return Array.from(document.querySelectorAll([
       "#viewer-insights",
       "#viewer-health",
+      "#viewer-workspace",
       "#viewer-git",
       "#viewer-ci",
       "#viewer-cdx",
@@ -452,6 +550,7 @@
     autoRefreshIntervalMs = normalizeAutoRefreshIntervalSeconds(value) * 1000;
     if (options.user) {
       autoRefreshIntervalTouched = true;
+      updateViewerPreferences({ autoRefreshIntervalSeconds: Math.round(autoRefreshIntervalMs / 1000) });
     }
     updateRefreshIntervalControl();
     scheduleNextAutoRefresh();
@@ -586,6 +685,7 @@
     const capabilities = payload?.capabilities && typeof payload.capabilities === "object" ? payload.capabilities : {};
     return {
       logics: capabilities.logics || { state: "ready", available: true, message: "" },
+      workspace: capabilities.workspace || { 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: "" },
@@ -624,6 +724,16 @@
   }
 
   function updateCapabilityControls() {
+    const workspace = workspaceButton();
+    if (workspace instanceof HTMLElement) {
+      workspace.hidden = !isCapabilityAvailable("workspace");
+      if (isCapabilityAvailable("workspace")) {
+        setButtonAvailable(workspace, "Show file explorer");
+      } else {
+        setButtonUnavailable(workspace, capabilityMessage("workspace", "Explorer is not available for this project."));
+      }
+    }
+
     const gitButton = document.getElementById("viewer-git");
     if (gitButton instanceof HTMLElement) {
       gitButton.hidden = !isCapabilityAvailable("git");
@@ -1225,7 +1335,13 @@
     latestViewerStateSignature = nextSignature;
     latestItems = updateStoredActivity(Array.isArray(payload.items) ? payload.items : []);
     if (!autoRefreshIntervalTouched) {
-      autoRefreshIntervalMs = normalizeAutoRefreshIntervalSeconds(payload.autoRefreshIntervalSeconds) * 1000;
+      const launchSeconds = Number(payload.autoRefreshIntervalSeconds);
+      const preferredSeconds = preferredAutoRefreshIntervalSeconds();
+      autoRefreshIntervalForcedByLaunch = Boolean(payload.autoRefreshIntervalForced);
+      const nextSeconds = autoRefreshIntervalForcedByLaunch || preferredSeconds === null
+        ? launchSeconds
+        : preferredSeconds;
+      autoRefreshIntervalMs = normalizeAutoRefreshIntervalSeconds(nextSeconds) * 1000;
       updateRefreshIntervalControl();
     }
     updateRepositoryIdentity(payload);
@@ -1302,6 +1418,12 @@
     return Boolean(panel && !panel.hidden && title && title.textContent === "Git status");
   }
 
+  function isWorkspaceOpen() {
+    const panel = documentPanel();
+    const title = documentTitle();
+    return Boolean(panel && !panel.hidden && title && title.textContent === "Explorer");
+  }
+
   function isCdxStatusOpen() {
     const panel = documentPanel();
     const title = documentTitle();
@@ -1328,7 +1450,11 @@
 
   async function refreshViewer(method = "POST", options = {}) {
     const changed = await loadItems(method, options);
-    if (isGitStatusOpen()) {
+    if (isWorkspaceOpen()) {
+      if (changed || options.force) {
+        await showWorkspace({ silent: Boolean(options.silent) });
+      }
+    } else if (isGitStatusOpen()) {
       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), skipUnchanged: !changed && !options.force, force: Boolean(options.force) });
@@ -2045,6 +2171,145 @@
     setMeta("Health loaded.");
   }
 
+  function workspaceParentPath(path) {
+    const parts = String(path || "").split("/").filter(Boolean);
+    parts.pop();
+    return parts.join("/");
+  }
+
+  function renderWorkspaceTree(treePayload, selectedPath = "") {
+    if (!treePayload || treePayload.state !== "ok") {
+      return `<div class="viewer-workspace__empty">${escapeHtml(treePayload?.message || "Workspace tree is unavailable.")}</div>`;
+    }
+    const currentPath = String(treePayload.path || "");
+    const parentPath = workspaceParentPath(currentPath);
+    const upButton = currentPath
+      ? `<button class="viewer-workspace__item viewer-workspace__item--up" type="button" data-viewer-workspace-tree="${escapeHtml(parentPath)}">..</button>`
+      : "";
+    const rows = (Array.isArray(treePayload.entries) ? treePayload.entries : []).map((entry) => {
+      const path = String(entry.path || "");
+      const kind = String(entry.kind || "file");
+      const ignored = Boolean(entry.ignored);
+      const selected = path === selectedPath;
+      const actionAttr = kind === "directory" && !ignored
+        ? `data-viewer-workspace-tree="${escapeHtml(path)}"`
+        : `data-viewer-workspace-preview="${escapeHtml(path)}"`;
+      const icon = kind === "directory" ? (ignored ? "x" : ">") : "-";
+      return `
+        <button class="viewer-workspace__item${selected ? " is-selected" : ""}${ignored ? " is-muted" : ""}" type="button" ${actionAttr} title="${escapeHtml(path)}">
+          <span class="viewer-workspace__item-icon" aria-hidden="true">${escapeHtml(icon)}</span>
+          <span class="viewer-workspace__item-name">${escapeHtml(entry.name || path || "/")}</span>
+        </button>
+      `;
+    }).join("");
+    return `
+      <div class="viewer-workspace__tree-header">
+        <span>${escapeHtml(currentPath || "/")}</span>
+      </div>
+      <div class="viewer-workspace__tree-list">
+        ${upButton}
+        ${rows || '<div class="viewer-workspace__empty">Directory is empty.</div>'}
+      </div>
+      ${treePayload.truncated ? '<div class="viewer-workspace__empty">Directory listing truncated.</div>' : ""}
+    `;
+  }
+
+  function renderWorkspacePreview(previewPayload) {
+    if (!previewPayload) {
+      return '<div class="viewer-workspace__empty">Select a file or directory.</div>';
+    }
+    const path = previewPayload.path || "/";
+    const name = previewPayload.name || path || "/";
+    const state = previewPayload.state || "unknown";
+    if (state === "ok") {
+      return `
+        <div class="viewer-workspace__preview-header">
+          <div><strong>${escapeHtml(name)}</strong><span>${escapeHtml(path)}</span></div>
+          <em>${escapeHtml(previewPayload.truncated ? "truncated" : `${previewPayload.size || 0} bytes`)}</em>
+        </div>
+        ${previewPayload.truncated ? '<div class="viewer-cdx__state viewer-cdx__state--warn">Preview truncated.</div>' : ""}
+        <pre class="viewer-workspace__code">${escapeHtml(previewPayload.content || "")}</pre>
+      `;
+    }
+    if (state === "image") {
+      return `
+        <div class="viewer-workspace__preview-header">
+          <div><strong>${escapeHtml(name)}</strong><span>${escapeHtml(path)}</span></div>
+          <em>${escapeHtml(previewPayload.contentType || "image")}</em>
+        </div>
+        <img class="viewer-workspace__image" src="/api/workspace-file?path=${encodeURIComponent(path)}" alt="${escapeHtml(name)}">
+      `;
+    }
+    return `
+      <div class="viewer-workspace__preview-header">
+        <div><strong>${escapeHtml(name)}</strong><span>${escapeHtml(path)}</span></div>
+        <em>${escapeHtml(state)}</em>
+      </div>
+      <div class="viewer-workspace__empty">${escapeHtml(previewPayload.message || "No preview is available.")}</div>
+    `;
+  }
+
+  function renderWorkspace(treePayload, previewPayload) {
+    const selectedPath = previewPayload?.path || "";
+    return `
+      <div class="viewer-workspace">
+        <aside class="viewer-workspace__tree" aria-label="Workspace files">
+          ${renderWorkspaceTree(treePayload, selectedPath)}
+        </aside>
+        <section class="viewer-workspace__preview" aria-label="Workspace preview">
+          ${renderWorkspacePreview(previewPayload)}
+        </section>
+      </div>
+    `;
+  }
+
+  async function fetchWorkspaceTree(path = "") {
+    const response = await fetch(`/api/workspace-tree?path=${encodeURIComponent(path)}`);
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to load workspace tree.");
+    }
+    return data.payload;
+  }
+
+  async function fetchWorkspacePreview(path = "") {
+    const response = await fetch(`/api/workspace-preview?path=${encodeURIComponent(path)}`);
+    const data = await response.json();
+    if (!response.ok || !data.ok) {
+      throw new Error(data.error || "Unable to load workspace preview.");
+    }
+    return data.payload;
+  }
+
+  async function showWorkspace(options = {}) {
+    if (!isCapabilityAvailable("workspace")) {
+      const message = capabilityMessage("workspace", "Explorer is not available for this project.");
+      setDocument("Explorer", renderWorkspace({ state: "unavailable", message }, { state: "unavailable", message }));
+      setMeta(message);
+      return;
+    }
+    if (!options.silent) {
+      setMeta("Loading workspace...");
+    }
+    const tree = await fetchWorkspaceTree("");
+    const preview = await fetchWorkspacePreview("");
+    setDocument("Explorer", renderWorkspace(tree, preview));
+    setMeta(options.silent ? "Explorer refreshed." : "Explorer loaded.");
+  }
+
+  async function openWorkspaceTree(path) {
+    const [tree, preview] = await Promise.all([fetchWorkspaceTree(path), fetchWorkspacePreview(path)]);
+    setDocument("Explorer", renderWorkspace(tree, preview));
+    setMeta(path ? `Explorer folder ${path}` : "Explorer root.");
+  }
+
+  async function openWorkspacePreview(path) {
+    const treePath = workspaceParentPath(path);
+    const [tree, preview] = await Promise.all([fetchWorkspaceTree(treePath), fetchWorkspacePreview(path)]);
+    setDocument("Explorer", renderWorkspace(tree, preview));
+    setMeta(`Previewing ${path || "workspace root"}.`);
+  }
+
   function objectEntries(value) {
     return value && typeof value === "object" && !Array.isArray(value) ? Object.entries(value) : [];
   }
@@ -2398,31 +2663,108 @@
     return explicit === true ? "YES" : "-";
   }
 
+  function cdxProviderName(item) {
+    return String(cdxField(item, ["provider", "name"], "unknown") || "unknown");
+  }
+
+  function cdxKnownProviders(status, providers, sessions) {
+    const names = new Set();
+    providers.forEach((provider) => {
+      const name = cdxProviderName(provider);
+      if (name) {
+        names.add(name);
+      }
+    });
+    sessions.forEach((session) => {
+      const name = cdxProviderName(session);
+      if (name) {
+        names.add(name);
+      }
+    });
+    pickFirstArray(status, ["providers", "providerStatus", "provider_status"]).forEach((provider) => {
+      const name = cdxProviderName(provider);
+      if (name) {
+        names.add(name);
+      }
+    });
+    return Array.from(names).sort((left, right) => left.localeCompare(right));
+  }
+
+  function filterCdxEntriesByProvider(entries, providerFilter) {
+    if (providerFilter.mode !== "subset" || !providerFilter.selected.length) {
+      return entries;
+    }
+    const selected = new Set(providerFilter.selected);
+    return entries.filter((entry) => selected.has(cdxProviderName(entry)));
+  }
+
+  function renderCdxStatusControls(knownProviders, visibleColumns, providerFilter) {
+    const columnRows = cdxStatusColumns.map((column) => `
+      <label class="viewer-cdx__menu-check">
+        <input type="checkbox" data-viewer-cdx-column="${escapeHtml(column.id)}"${visibleColumns[column.id] ? " checked" : ""}>
+        <span>${escapeHtml(column.label)}</span>
+      </label>
+    `).join("");
+    const selected = new Set(providerFilter.mode === "subset" ? providerFilter.selected : knownProviders);
+    const providerRows = knownProviders.map((provider) => `
+      <label class="viewer-cdx__menu-check">
+        <input type="checkbox" data-viewer-cdx-provider="${escapeHtml(provider)}"${selected.has(provider) ? " checked" : ""}>
+        <span>${escapeHtml(provider)}</span>
+      </label>
+    `).join("");
+    const providerSummary = providerFilter.mode === "subset" && providerFilter.selected.length
+      ? `${providerFilter.selected.length}/${knownProviders.length || providerFilter.selected.length}`
+      : "All";
+    return `
+      <div class="viewer-cdx__controls" aria-label="CDX status table controls">
+        <details class="viewer-cdx__menu">
+          <summary class="viewer-cdx__icon-button" title="Configure status columns" aria-label="Configure status columns">
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2 3.4-.2-.1a1.7 1.7 0 0 0-2 .1 1.7 1.7 0 0 0-.8 1.7v.2H9.2v-.2a1.7 1.7 0 0 0-.8-1.7 1.7 1.7 0 0 0-2-.1l-.2.1-2-3.4.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1.1H3v-3.8h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.9l-.1-.1 2-3.4.2.1a1.7 1.7 0 0 0 2-.1 1.7 1.7 0 0 0 .8-1.7v-.2h5.6v.2a1.7 1.7 0 0 0 .8 1.7 1.7 1.7 0 0 0 2 .1l.2-.1 2 3.4-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.5 1.1h.1v3.8h-.1a1.7 1.7 0 0 0-1.5 1.1Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
+          </summary>
+          <div class="viewer-cdx__menu-panel" role="menu" aria-label="CDX status columns">${columnRows}</div>
+        </details>
+        <details class="viewer-cdx__menu">
+          <summary class="viewer-cdx__icon-button" title="Filter status providers" aria-label="Filter status providers">
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 6h16l-6.5 7.2V19l-3 1.5v-7.3z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/></svg>
+            <span class="viewer-cdx__icon-count">${escapeHtml(providerSummary)}</span>
+          </summary>
+          <div class="viewer-cdx__menu-panel" role="menu" aria-label="CDX provider filter">
+            <button class="viewer-cdx__menu-action" type="button" data-viewer-cdx-provider-all>All providers</button>
+            ${providerRows || '<div class="viewer-cdx__empty">No providers reported.</div>'}
+          </div>
+        </details>
+      </div>
+    `;
+  }
+
   function renderCdxSessionTable(sessions, emptyText) {
     if (!sessions.length) {
       return `<div class="viewer-cdx__empty">${escapeHtml(emptyText)}</div>`;
     }
+    const visibleColumns = cdxColumnVisibilityPreference();
+    const cellRenderers = {
+      session: (item) => {
+        const name = cdxField(item, ["session_name", "name", "id", "value"]);
+        return `<td class="viewer-cdx__session-name">${escapeHtml(`${name}${item.active ? "*" : ""}`)}</td>`;
+      },
+      provider: (item) => `<td>${escapeHtml(cdxField(item, ["provider"], "-"))}</td>`,
+      status: (item) => `<td>${renderCdxBadge(cdxField(item, ["status", "state"]))}</td>`,
+      auth: (item) => `<td>${escapeHtml(String(cdxField(item, ["auth_status", "authStatus"], "-")).replace("authenticated", "logged"))}</td>`,
+      ok: (item) => `<td>${renderCdxRemainingPill(item) || escapeHtml(cdxPct(cdxField(item, ["available_pct", "availablePct"], NaN)))}</td>`,
+      remaining5h: (item) => `<td>${escapeHtml(cdxPct(cdxField(item, ["remaining_5h_pct", "remaining5hPct"], NaN)))}</td>`,
+      remainingWeek: (item) => `<td>${escapeHtml(cdxPct(cdxField(item, ["remaining_week_pct", "remainingWeekPct"], NaN)))}</td>`,
+      block: (item) => `<td>${escapeHtml(cdxSessionBlock(item))}</td>`,
+      credits: (item) => `<td>${escapeHtml(formatCdxCredits(cdxField(item, ["credits", "cr"], "-")))}</td>`,
+      reset5h: (item) => `<td>${escapeHtml(formatCdxResetAt(cdxField(item, ["reset_5h_at", "reset5hAt", "reset_at", "resetAt"], "")))}</td>`,
+      resetWeek: (item) => `<td>${escapeHtml(formatCdxResetAt(cdxField(item, ["reset_week_at", "resetWeekAt", "reset_at", "resetAt"], "")))}</td>`,
+      updated: (item) => `<td>${escapeHtml(formatCdxResetAt(cdxField(item, ["updated_at", "updatedAt"], "")))}</td>`
+    };
+    const activeColumns = cdxStatusColumns.filter((column) => visibleColumns[column.id]);
     const rows = sessions.slice(0, 24).map((entry) => {
       const item = entry && typeof entry === "object" ? entry : { value: entry };
-      const name = cdxField(item, ["session_name", "name", "id", "value"]);
-      const sessionName = `${name}${item.active ? "*" : ""}`;
-      const status = cdxField(item, ["status", "state"]);
-      const auth = String(cdxField(item, ["auth_status", "authStatus"], "-")).replace("authenticated", "logged");
-      const block = cdxSessionBlock(item);
       return `
         <tr>
-          <td class="viewer-cdx__session-name">${escapeHtml(sessionName)}</td>
-          <td>${escapeHtml(cdxField(item, ["provider"], "-"))}</td>
-          <td>${renderCdxBadge(status)}</td>
-          <td>${escapeHtml(auth)}</td>
-          <td>${renderCdxRemainingPill(item) || escapeHtml(cdxPct(cdxField(item, ["available_pct", "availablePct"], NaN)))}</td>
-          <td>${escapeHtml(cdxPct(cdxField(item, ["remaining_5h_pct", "remaining5hPct"], NaN)))}</td>
-          <td>${escapeHtml(cdxPct(cdxField(item, ["remaining_week_pct", "remainingWeekPct"], NaN)))}</td>
-          <td>${escapeHtml(block)}</td>
-          <td>${escapeHtml(formatCdxCredits(cdxField(item, ["credits", "cr"], "-")))}</td>
-          <td>${escapeHtml(formatCdxResetAt(cdxField(item, ["reset_5h_at", "reset5hAt", "reset_at", "resetAt"], "")))}</td>
-          <td>${escapeHtml(formatCdxResetAt(cdxField(item, ["reset_week_at", "resetWeekAt", "reset_at", "resetAt"], "")))}</td>
-          <td>${escapeHtml(formatCdxResetAt(cdxField(item, ["updated_at", "updatedAt"], "")))}</td>
+          ${activeColumns.map((column) => cellRenderers[column.id](item)).join("")}
         </tr>
       `;
     }).join("");
@@ -2431,18 +2773,7 @@
         <table class="viewer-cdx__table">
           <thead>
             <tr>
-              <th>SESSION</th>
-              <th>PROV.</th>
-              <th>STATUS</th>
-              <th>AUTH</th>
-              <th>OK</th>
-              <th>5H</th>
-              <th>WEEK</th>
-              <th>BLOCK</th>
-              <th>CR</th>
-              <th>RESET 5H</th>
-              <th>RESET WEEK</th>
-              <th>UPDATED</th>
+              ${activeColumns.map((column) => `<th>${escapeHtml(column.label)}</th>`).join("")}
             </tr>
           </thead>
           <tbody>${rows}</tbody>
@@ -2718,8 +3049,12 @@
       `;
     }
     const status = payload.status || {};
-    const providers = cdxProviders(status);
-    const sessions = cdxSessions(status);
+    const allProviders = cdxProviders(status);
+    const allSessions = cdxSessions(status);
+    const providerFilter = cdxProviderFilterPreference();
+    const knownProviders = cdxKnownProviders(status, allProviders, allSessions);
+    const providers = filterCdxEntriesByProvider(allProviders, providerFilter);
+    const sessions = filterCdxEntriesByProvider(allSessions, providerFilter);
     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 || ""))
@@ -2750,6 +3085,7 @@
       <div class="viewer-cdx">
         ${renderCdxModeSwitcher("status")}
         <div class="viewer-cdx__summary">${cards}</div>
+        ${renderCdxStatusControls(knownProviders, cdxColumnVisibilityPreference(), providerFilter)}
         <div class="viewer-cdx__workspace">
           <div class="viewer-cdx__stack">
             <section class="viewer-cdx__section">
@@ -2776,6 +3112,12 @@
     `;
   }
 
+  function rerenderCdxStatusFromPreferences() {
+    if (isCdxStatusOpen() && latestCdxStatusPayload) {
+      setDocument("CDX status", renderCdxStatus(latestCdxStatusPayload));
+    }
+  }
+
   function renderCdxRuns(payload) {
     if (!payload || payload.state !== "ok") {
       return `
@@ -3106,6 +3448,7 @@
       return;
     }
     latestCdxStatusSignature = nextCdxSignature;
+    latestCdxStatusPayload = data.payload;
     updateMainCdxBadge(data.payload);
     setDocument("CDX status", renderCdxStatus(data.payload));
     setMeta(options.silent ? "CDX status refreshed." : "CDX status loaded.");
@@ -3820,6 +4163,12 @@
         withPrimaryAction("insights", "Loading insights", showCorpusInsights);
       });
     });
+    [workspaceButton()].forEach((button) => {
+      button?.addEventListener("click", () => {
+        setRefreshMenuOpen(false);
+        withPrimaryAction("workspace", "Loading Explorer", showWorkspace);
+      });
+    });
     const autoControl = autoRefreshControl();
     if (autoControl instanceof HTMLInputElement) {
       autoControl.addEventListener("change", () => {
@@ -3914,6 +4263,8 @@
     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;
+      const cdxColumnTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-column]") : null;
+      const cdxProviderTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-provider]") : null;
       if (sessionTarget instanceof HTMLSelectElement) {
         latestCdxMissionState.sessionId = sessionTarget.value || "";
         latestCdxMissionState.planPayload = null;
@@ -3930,6 +4281,25 @@
           latestCdxMissionState.applyPayload = null;
         }
       }
+      if (cdxColumnTarget instanceof HTMLInputElement) {
+        persistCdxColumnVisibility(cdxColumnTarget.getAttribute("data-viewer-cdx-column") || "", cdxColumnTarget.checked);
+        rerenderCdxStatusFromPreferences();
+      }
+      if (cdxProviderTarget instanceof HTMLInputElement) {
+        const provider = cdxProviderTarget.getAttribute("data-viewer-cdx-provider") || "";
+        const status = latestCdxStatusPayload?.status || {};
+        const allProviders = cdxKnownProviders(status, cdxProviders(status), cdxSessions(status));
+        const current = cdxProviderFilterPreference();
+        const selected = new Set(current.mode === "subset" ? current.selected : allProviders);
+        if (cdxProviderTarget.checked) {
+          selected.add(provider);
+        } else {
+          selected.delete(provider);
+        }
+        const nextSelected = Array.from(selected).filter((entry) => allProviders.includes(entry));
+        persistCdxProviderFilter(nextSelected.length === allProviders.length ? { mode: "all", selected: [] } : { mode: "subset", selected: nextSelected });
+        rerenderCdxStatusFromPreferences();
+      }
     });
     document.addEventListener("click", (event) => {
       window.setTimeout(() => applyLocalViewerChrome(), 0);
@@ -3940,12 +4310,15 @@
       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 workspaceTreeTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workspace-tree]") : null;
+      const workspacePreviewTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workspace-preview]") : 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 cdxProviderAllTarget = event.target instanceof Element ? event.target.closest("[data-viewer-cdx-provider-all]") : 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;
@@ -3981,6 +4354,11 @@
         withCdxMissionAction("cdx-apply-plan", "Applying CDX mission plan", applyCdxMissionPlan);
         return;
       }
+      if (cdxProviderAllTarget instanceof HTMLElement) {
+        persistCdxProviderFilter({ mode: "all", selected: [] });
+        rerenderCdxStatusFromPreferences();
+        return;
+      }
       if (cdxBackRunsTarget instanceof HTMLElement) {
         withPrimaryAction("cdx-runs", "Loading CDX runs", showCdxRuns);
         return;
@@ -4008,6 +4386,16 @@
         }
         return;
       }
+      if (workspaceTreeTarget instanceof HTMLElement) {
+        event.preventDefault();
+        withPrimaryAction("workspace-tree", "Loading Explorer folder", () => openWorkspaceTree(workspaceTreeTarget.getAttribute("data-viewer-workspace-tree") || ""));
+        return;
+      }
+      if (workspacePreviewTarget instanceof HTMLElement) {
+        event.preventDefault();
+        withPrimaryAction("workspace-preview", "Loading Explorer preview", () => openWorkspacePreview(workspacePreviewTarget.getAttribute("data-viewer-workspace-preview") || ""));
+        return;
+      }
       if (projectSwitcherTarget instanceof HTMLElement) {
         const menu = projectMenu();
         setProjectMenuOpen(Boolean(menu?.hidden));

package/clients/viewer/index.html

@@ -37,6 +37,7 @@
       <div class="viewer-topbar__meta" id="viewer-meta">Read-only local viewer</div>
     </div>
     <div class="viewer-topbar__actions">
+      <button class="btn" id="viewer-workspace" type="button" title="Show file explorer" hidden>Explorer</button>
       <button class="btn" id="viewer-git" type="button" title="Show Git status">Git</button>
       <button class="btn" id="viewer-ci" type="button" title="Show GitHub Actions CI status" hidden>CI</button>
       <button class="btn" id="viewer-cdx" type="button" title="Show CDX status">CDX</button>