@grifhinz/logics-manager 2.8.0 → 2.9.0

package/clients/viewer/browser-host.js

@@ -1,5 +1,59 @@
 (() => {
   const stateKey = "logics.localViewer.state";
+  const preferenceKey = "logics.localViewer.preferences.v1";
+  const lanTokenKey = "logics.lan.token";
+
+  function captureLanTokenFromUrl() {
+    try {
+      const url = new URL(window.location.href);
+      const queryToken = url.searchParams.get("t");
+      if (queryToken) {
+        window.sessionStorage.setItem(lanTokenKey, queryToken);
+        url.searchParams.delete("t");
+        const cleaned = `${url.pathname}${url.search}${url.hash}`;
+        window.history.replaceState(null, "", cleaned || "/");
+      }
+    } catch {
+      // sessionStorage / history may be unavailable in some embed contexts.
+    }
+  }
+
+  function getLanToken() {
+    try {
+      return window.sessionStorage.getItem(lanTokenKey) || "";
+    } catch {
+      return "";
+    }
+  }
+
+  captureLanTokenFromUrl();
+
+  const originalFetch = window.fetch.bind(window);
+  window.fetch = (input, init) => {
+    const token = getLanToken();
+    if (!token) return originalFetch(input, init);
+    const next = init ? { ...init } : {};
+    const headers = new Headers(next.headers || (input instanceof Request ? input.headers : undefined));
+    if (!headers.has("Authorization")) headers.set("Authorization", `Bearer ${token}`);
+    next.headers = headers;
+    return originalFetch(input, next);
+  };
+
+  if (typeof window.EventSource === "function") {
+    const NativeEventSource = window.EventSource;
+    window.EventSource = function PatchedEventSource(url, init) {
+      const token = getLanToken();
+      if (!token || typeof url !== "string") {
+        return new NativeEventSource(url, init);
+      }
+      const separator = url.includes("?") ? "&" : "?";
+      const tokenized = `${url}${separator}t=${encodeURIComponent(token)}`;
+      return new NativeEventSource(tokenized, init);
+    };
+    window.EventSource.prototype = NativeEventSource.prototype;
+  }
+
+  const preferenceVersion = 1;
   const meta = () => document.getElementById("viewer-meta");
   const documentPanel = () => document.getElementById("viewer-document");
   const documentTitle = () => document.getElementById("viewer-document-title");
@@ -16,6 +70,8 @@
   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 workshopButton = () => document.getElementById("viewer-workshop");
   const ciButton = () => document.getElementById("viewer-ci");
   const autoRefreshControl = () => document.getElementById("viewer-auto-refresh");
   const refreshIntervalControl = () => document.getElementById("viewer-refresh-interval");
@@ -72,10 +128,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 +158,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 +305,7 @@
     return Array.from(document.querySelectorAll([
       "#viewer-insights",
       "#viewer-health",
+      "#viewer-workspace",
       "#viewer-git",
       "#viewer-ci",
       "#viewer-cdx",
@@ -452,6 +603,7 @@
     autoRefreshIntervalMs = normalizeAutoRefreshIntervalSeconds(value) * 1000;
     if (options.user) {
       autoRefreshIntervalTouched = true;
+      updateViewerPreferences({ autoRefreshIntervalSeconds: Math.round(autoRefreshIntervalMs / 1000) });
     }
     updateRefreshIntervalControl();
     scheduleNextAutoRefresh();
@@ -582,10 +734,64 @@
     setMeta(created > 0 ? `Logics bootstrapped · ${created} paths created.` : "Logics bootstrap checked.");
   }
 
+  let latestLanShareUrl = "";
+
+  async function copyTextToClipboard(text) {
+    if (!text) return false;
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+        return true;
+      }
+    } catch { /* fall through to legacy path */ }
+    try {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.top = "0";
+      textarea.style.left = "0";
+      textarea.style.opacity = "0";
+      textarea.style.pointerEvents = "none";
+      document.body.appendChild(textarea);
+      textarea.focus();
+      textarea.select();
+      textarea.setSelectionRange(0, text.length);
+      const ok = document.execCommand("copy");
+      document.body.removeChild(textarea);
+      return ok;
+    } catch {
+      return false;
+    }
+  }
+
+  function applyLanBanner(active, shareUrl) {
+    const banner = document.getElementById("viewer-lan-banner");
+    if (!(banner instanceof HTMLElement)) return;
+    banner.hidden = !active;
+    latestLanShareUrl = active ? String(shareUrl || "") : "";
+    const urlNode = document.getElementById("viewer-lan-banner-url");
+    const copyButton = document.getElementById("viewer-lan-banner-copy");
+    if (urlNode instanceof HTMLElement) {
+      if (latestLanShareUrl) {
+        urlNode.hidden = false;
+        urlNode.textContent = latestLanShareUrl;
+      } else {
+        urlNode.hidden = true;
+        urlNode.textContent = "";
+      }
+    }
+    if (copyButton instanceof HTMLButtonElement) {
+      copyButton.hidden = !latestLanShareUrl;
+    }
+  }
+
   function normalizeCapabilities(payload) {
     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: "" },
+      workshop: capabilities.workshop || { state: "missing", available: false, 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 +830,29 @@
   }
 
   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 workshop = workshopButton();
+    if (workshop instanceof HTMLElement) {
+      const workshopAvailable = isCapabilityAvailable("workshop");
+      workshop.hidden = !workshopAvailable;
+      if (workshopAvailable) {
+        setButtonAvailable(workshop, "Show Workshop (terminals and commands)");
+      } else {
+        setButtonUnavailable(workshop, capabilityMessage("workshop", "Workshop is not available for this project."));
+      }
+      updateWorkshopBadges();
+      hydrateWorkshopTerminals();
+    }
+
     const gitButton = document.getElementById("viewer-git");
     if (gitButton instanceof HTMLElement) {
       gitButton.hidden = !isCapabilityAvailable("git");
@@ -733,6 +962,42 @@
     return html ? `<span class="viewer-git-badges" data-viewer-git-badges="${escapeHtml(scope)}">${html}</span>` : "";
   }
 
+  let workshopBadgeCounts = { terminals: 0, commands: 0 };
+
+  function updateWorkshopBadges() {
+    const button = document.getElementById("viewer-workshop");
+    if (!(button instanceof HTMLElement)) return;
+    button.querySelector('[data-viewer-workshop-badges]')?.remove();
+    const { terminals, commands } = workshopBadgeCounts;
+    if (terminals <= 0 && commands <= 0) return;
+    const html = [
+      terminals > 0
+        ? `<span class="viewer-git-badge viewer-git-badge--commits" title="${escapeHtml(terminals + " terminal session(s) running")}" aria-label="${escapeHtml(terminals + " terminal session(s) running")}">${escapeHtml(String(terminals))}</span>`
+        : "",
+      commands > 0
+        ? `<span class="viewer-git-badge viewer-git-badge--files" title="${escapeHtml(commands + " command(s) running")}" aria-label="${escapeHtml(commands + " command(s) running")}">${escapeHtml(String(commands))}</span>`
+        : "",
+    ].filter(Boolean).join("");
+    if (html) {
+      button.insertAdjacentHTML("beforeend", `<span class="viewer-git-badges" data-viewer-workshop-badges>${html}</span>`);
+    }
+  }
+
+  function recomputeWorkshopBadges() {
+    const isRunning = (state) => state === "running" || state === "starting";
+    let terminals = 0;
+    for (const entry of workshopTerminalState.sessions.values()) {
+      if (isRunning(entry.state)) terminals += 1;
+    }
+    let commands = 0;
+    for (const entry of workshopCommandState.sessions.values()) {
+      if (isRunning(entry.state)) commands += 1;
+    }
+    if (workshopBadgeCounts.terminals === terminals && workshopBadgeCounts.commands === commands) return;
+    workshopBadgeCounts = { terminals, commands };
+    updateWorkshopBadges();
+  }
+
   function updateMainGitBadges() {
     const button = document.getElementById("viewer-git");
     if (!(button instanceof HTMLElement)) {
@@ -1225,11 +1490,18 @@
     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);
     latestCapabilities = normalizeCapabilities(payload);
+    applyLanBanner(Boolean(payload?.lanMode), String(payload?.lanShareUrl || ""));
     updateCapabilityControls();
     const payloadWithActivity = { ...payload, items: latestItems };
     const nextPayload = applyFocusRequest(payloadWithActivity, { silent: Boolean(options.silent) });
@@ -1302,6 +1574,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 +1606,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 +2327,804 @@
     setMeta("Health loaded.");
   }
 
+  function workspaceParentPath(path) {
+    const parts = String(path || "").split("/").filter(Boolean);
+    parts.pop();
+    return parts.join("/");
+  }
+
+  function renderWorkspaceBreadcrumb(currentPath) {
+    const segments = String(currentPath || "").split("/").filter(Boolean);
+    const crumbs = [
+      `<button class="viewer-workspace__crumb" type="button" data-viewer-workspace-tree="" title="Workspace root">/</button>`,
+    ];
+    let accum = "";
+    segments.forEach((segment, idx) => {
+      accum = accum ? `${accum}/${segment}` : segment;
+      const isLast = idx === segments.length - 1;
+      crumbs.push(`<span class="viewer-workspace__crumb-sep" aria-hidden="true">/</span>`);
+      crumbs.push(
+        `<button class="viewer-workspace__crumb${isLast ? " is-current" : ""}" type="button" data-viewer-workspace-tree="${escapeHtml(accum)}" title="${escapeHtml(accum)}"${isLast ? ' aria-current="location"' : ""}>${escapeHtml(segment)}</button>`,
+      );
+    });
+    return `<nav class="viewer-workspace__breadcrumb" aria-label="Workspace breadcrumb">${crumbs.join("")}</nav>`;
+  }
+
+  function workspaceEntryIcon(kind, ignored) {
+    if (kind === "directory") {
+      return ignored
+        ? '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M2 4h4l1 1h7v8H2V4Zm9.5 3.2L9.7 9l1.8 1.8-.7.7L9 9.7l-1.8 1.8-.7-.7L8.3 9 6.5 7.2l.7-.7L9 8.3l1.8-1.8.7.7Z"/></svg>'
+        : '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M2 4h4l1 1h7v8H2V4Z"/></svg>';
+    }
+    return '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M4 2h6l3 3v9H4V2Zm6 0v3h3"/></svg>';
+  }
+
+  function renderWorkspaceTree(treePayload, selectedPath = "") {
+    if (!treePayload || treePayload.state !== "ok") {
+      const message = treePayload?.message || "Workspace tree is unavailable.";
+      const state = treePayload?.state === "unavailable" ? "unavailable" : "empty";
+      return `<div class="viewer-workspace__placeholder viewer-workspace__placeholder--${state}"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">${state === "unavailable" ? "!" : "·"}</span><span>${escapeHtml(message)}</span></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)}" title="Parent directory"><span class="viewer-workspace__item-icon" aria-hidden="true"><svg viewBox="0 0 16 16" focusable="false"><path fill="currentColor" d="M8 3 3 8h3v5h4V8h3L8 3Z"/></svg></span><span class="viewer-workspace__item-name">..</span></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 classes = [
+        "viewer-workspace__item",
+        `viewer-workspace__item--${kind === "directory" ? "directory" : "file"}`,
+      ];
+      if (selected) classes.push("is-selected");
+      if (ignored) classes.push("is-muted");
+      return `
+        <button class="${classes.join(" ")}" type="button" ${actionAttr} title="${escapeHtml(path)}"${selected ? ' aria-current="true"' : ""}>
+          <span class="viewer-workspace__item-icon" aria-hidden="true">${workspaceEntryIcon(kind, ignored)}</span>
+          <span class="viewer-workspace__item-name">${escapeHtml(entry.name || path || "/")}</span>
+        </button>
+      `;
+    }).join("");
+    return `
+      <div class="viewer-workspace__tree-header">
+        ${renderWorkspaceBreadcrumb(currentPath)}
+      </div>
+      <div class="viewer-workspace__tree-list" role="list">
+        ${upButton}
+        ${rows || '<div class="viewer-workspace__placeholder viewer-workspace__placeholder--empty"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">·</span><span>Directory is empty.</span></div>'}
+      </div>
+      ${treePayload.truncated ? '<div class="viewer-workspace__placeholder viewer-workspace__placeholder--warn"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">!</span><span>Directory listing truncated.</span></div>' : ""}
+    `;
+  }
+
+  function renderWorkspacePreview(previewPayload) {
+    if (!previewPayload) {
+      return '<div class="viewer-workspace__placeholder viewer-workspace__placeholder--empty"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">·</span><span>Select a file or directory.</span></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-workspace__placeholder viewer-workspace__placeholder--warn"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">!</span><span>Preview truncated.</span></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)}">
+      `;
+    }
+    const placeholderState = state === "unavailable" ? "unavailable" : "empty";
+    const placeholderIcon = placeholderState === "unavailable" ? "!" : "·";
+    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__placeholder viewer-workspace__placeholder--${placeholderState}"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">${placeholderIcon}</span><span>${escapeHtml(previewPayload.message || "No preview is available.")}</span></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.");
+  }
+
+  const workshopTabs = [
+    { id: "terminals", label: "Terminals", title: "In-app PTY terminals" },
+    { id: "commands", label: "Commands", title: "Discovered package and project scripts" },
+  ];
+
+  function preferredWorkshopTab() {
+    const stored = String(viewerPreferences.workshopActiveTab || "");
+    return workshopTabs.some((tab) => tab.id === stored) ? stored : "terminals";
+  }
+
+  function setWorkshopActiveTab(tabId) {
+    const next = workshopTabs.some((tab) => tab.id === tabId) ? tabId : "terminals";
+    if (next === viewerPreferences.workshopActiveTab) return;
+    updateViewerPreferences({ workshopActiveTab: next });
+  }
+
+  function renderWorkshopTabs(activeTab) {
+    const buttons = workshopTabs.map((tab) => {
+      const isActive = tab.id === activeTab;
+      return `<button class="viewer-cdx__mode${isActive ? " is-active" : ""}" type="button" role="tab" aria-selected="${isActive ? "true" : "false"}" data-viewer-workshop-tab="${escapeHtml(tab.id)}" title="${escapeHtml(tab.title)}">${escapeHtml(tab.label)}</button>`;
+    }).join("");
+    return `<div class="viewer-cdx__modes" role="tablist" aria-label="Workshop sub-screens">${buttons}</div>`;
+  }
+
+  function renderWorkshopPanel(tabId) {
+    if (tabId === "commands") {
+      return `
+        <div class="viewer-workshop__panel" role="tabpanel" data-viewer-workshop-panel="commands" data-viewer-workshop-commands>
+          <div class="viewer-workspace__placeholder viewer-workspace__placeholder--empty">
+            <span class="viewer-workspace__placeholder-icon" aria-hidden="true">·</span>
+            <span>Discovering commands...</span>
+          </div>
+        </div>
+      `;
+    }
+    const terminalsAvailable = Boolean(capability("workshop").detail?.terminalsAvailable);
+    if (!terminalsAvailable) {
+      return `
+        <div class="viewer-workshop__panel viewer-workshop__panel--terminals" role="tabpanel" data-viewer-workshop-panel="terminals">
+          <div class="viewer-workspace__placeholder viewer-workspace__placeholder--unavailable">
+            <span class="viewer-workspace__placeholder-icon" aria-hidden="true">!</span>
+            <span>In-app terminals require a Unix host with stdlib pty support (macOS or Linux). Use the Commands tab to run discovered scripts in the meantime.</span>
+          </div>
+        </div>
+      `;
+    }
+    return `
+      <div class="viewer-workshop__panel viewer-workshop__panel--terminals-active" role="tabpanel" data-viewer-workshop-panel="terminals">
+        <aside class="viewer-workshop__terminal-list" data-viewer-workshop-terminal-list aria-label="Terminal sessions"></aside>
+        <section class="viewer-workshop__terminal-stage" data-viewer-workshop-terminal-stage>
+          <div class="viewer-workspace__placeholder viewer-workspace__placeholder--empty" data-viewer-workshop-terminal-empty>
+            <span class="viewer-workspace__placeholder-icon" aria-hidden="true">·</span>
+            <span>No terminal session yet. Click "New terminal" to spawn one.</span>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+
+  const workshopCommandState = {
+    catalog: null,
+    sessions: new Map(),
+    streams: new Map(),
+  };
+
+  function renderWorkshopCommandRow(entry) {
+    const session = workshopCommandState.sessions.get(entry.id) || null;
+    const state = session?.state || "idle";
+    const running = state === "running" || state === "starting";
+    const exitBadge = session && session.exitCode !== null && session.exitCode !== undefined
+      ? `<span class="viewer-workshop__exit viewer-workshop__exit--${session.exitCode === 0 ? "ok" : "fail"}">exit ${escapeHtml(String(session.exitCode))}</span>`
+      : "";
+    return `
+      <li class="viewer-workshop__command" data-viewer-workshop-command="${escapeHtml(entry.id)}">
+        <div class="viewer-workshop__command-header">
+          <div class="viewer-workshop__command-name">
+            <strong>${escapeHtml(entry.name)}</strong>
+            <span class="viewer-workshop__command-source">${escapeHtml(entry.source)}</span>
+          </div>
+          <div class="viewer-workshop__command-actions">
+            <span class="viewer-workshop__state viewer-workshop__state--${escapeHtml(state)}">${escapeHtml(state)}</span>
+            ${exitBadge}
+            ${running
+              ? `<button class="btn" type="button" data-viewer-workshop-command-stop="${escapeHtml(entry.id)}">Stop</button>`
+              : `<button class="btn" type="button" data-viewer-workshop-command-run="${escapeHtml(entry.id)}">Run</button>`}
+          </div>
+        </div>
+        <div class="viewer-workshop__command-meta"><code>${escapeHtml(entry.command)}</code></div>
+        <pre class="viewer-workshop__log" data-viewer-workshop-command-log="${escapeHtml(entry.id)}" aria-live="polite">${escapeHtml(session?.logText || "")}</pre>
+      </li>
+    `;
+  }
+
+  function renderWorkshopCommandList(catalog) {
+    if (!catalog || catalog.state === "unavailable") {
+      return `<div class="viewer-workspace__placeholder viewer-workspace__placeholder--unavailable"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">!</span><span>${escapeHtml(catalog?.message || "Commands are unavailable.")}</span></div>`;
+    }
+    const commands = Array.isArray(catalog.commands) ? catalog.commands : [];
+    if (commands.length === 0) {
+      return `<div class="viewer-workspace__placeholder viewer-workspace__placeholder--empty"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">·</span><span>${escapeHtml(catalog.message || "No commands discovered.")}</span></div>`;
+    }
+    const groups = new Map();
+    commands.forEach((entry) => {
+      const group = entry.group || "Commands";
+      if (!groups.has(group)) groups.set(group, []);
+      groups.get(group).push(entry);
+    });
+    const sections = [...groups.entries()].map(([group, entries]) => `
+      <section class="viewer-workshop__group">
+        <h3 class="viewer-workshop__group-title">${escapeHtml(group)}</h3>
+        <ul class="viewer-workshop__commands">
+          ${entries.map(renderWorkshopCommandRow).join("")}
+        </ul>
+      </section>
+    `).join("");
+    return sections;
+  }
+
+  function renderWorkshopCommands() {
+    const container = document.querySelector("[data-viewer-workshop-commands]");
+    if (!(container instanceof HTMLElement)) return;
+    container.innerHTML = renderWorkshopCommandList(workshopCommandState.catalog);
+  }
+
+  async function loadWorkshopCommands() {
+    try {
+      const response = await fetch("/api/workshop-commands");
+      const data = await response.json();
+      workshopCommandState.catalog = data?.payload || null;
+    } catch (error) {
+      workshopCommandState.catalog = { state: "unavailable", commands: [], message: String(error?.message || error) };
+    }
+    renderWorkshopCommands();
+  }
+
+  function updateWorkshopCommandSession(commandId, patch) {
+    const previous = workshopCommandState.sessions.get(commandId) || { logText: "" };
+    workshopCommandState.sessions.set(commandId, { ...previous, ...patch });
+    renderWorkshopCommands();
+    recomputeWorkshopBadges();
+  }
+
+  function appendWorkshopCommandLog(commandId, line) {
+    const previous = workshopCommandState.sessions.get(commandId) || { logText: "" };
+    const next = previous.logText ? `${previous.logText}\n${line}` : line;
+    workshopCommandState.sessions.set(commandId, { ...previous, logText: next });
+    const node = document.querySelector(`[data-viewer-workshop-command-log="${commandId}"]`);
+    if (node instanceof HTMLElement) {
+      node.textContent = next;
+      node.scrollTop = node.scrollHeight;
+    }
+  }
+
+  function closeWorkshopCommandStream(commandId) {
+    const stream = workshopCommandState.streams.get(commandId);
+    if (stream) {
+      try { stream.close(); } catch { /* noop */ }
+      workshopCommandState.streams.delete(commandId);
+    }
+  }
+
+  async function startWorkshopCommand(commandId) {
+    try {
+      const response = await fetch("/api/workshop-command-start", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ commandId }),
+      });
+      const data = await response.json();
+      if (!response.ok || !data.ok) {
+        throw new Error(data.error || "Unable to start command.");
+      }
+      const session = data.payload;
+      updateWorkshopCommandSession(commandId, {
+        sessionId: session.id,
+        state: session.state,
+        exitCode: session.exitCode,
+        logText: "",
+      });
+      openWorkshopCommandStream(commandId, session.id);
+    } catch (error) {
+      updateWorkshopCommandSession(commandId, { state: "error", logText: `! ${error?.message || error}` });
+    }
+  }
+
+  function openWorkshopCommandStream(commandId, sessionId) {
+    closeWorkshopCommandStream(commandId);
+    const source = new EventSource(`/api/workshop-session/${encodeURIComponent(sessionId)}/stream`);
+    workshopCommandState.streams.set(commandId, source);
+    source.addEventListener("line", (event) => {
+      try {
+        const payload = JSON.parse(event.data || "{}");
+        appendWorkshopCommandLog(commandId, String(payload.line || ""));
+      } catch { /* noop */ }
+    });
+    source.addEventListener("end", (event) => {
+      try {
+        const payload = JSON.parse(event.data || "{}");
+        updateWorkshopCommandSession(commandId, {
+          state: payload.state,
+          exitCode: payload.exitCode,
+        });
+      } catch { /* noop */ }
+      closeWorkshopCommandStream(commandId);
+    });
+    source.addEventListener("error", () => {
+      closeWorkshopCommandStream(commandId);
+    });
+  }
+
+  async function stopWorkshopCommand(commandId) {
+    const session = workshopCommandState.sessions.get(commandId);
+    if (!session?.sessionId) return;
+    try {
+      await fetch("/api/workshop-command-stop", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId: session.sessionId }),
+      });
+    } catch { /* noop */ }
+  }
+
+  const workshopTerminalState = {
+    sessions: new Map(),
+    activeId: "",
+    streams: new Map(),
+    hydrated: false,
+  };
+
+  async function hydrateWorkshopTerminals() {
+    if (workshopTerminalState.hydrated) return;
+    if (!isCapabilityAvailable("workshop")) return;
+    if (!capability("workshop").detail?.terminalsAvailable) return;
+    workshopTerminalState.hydrated = true;
+    try {
+      const response = await fetch("/api/workshop-terminals");
+      const data = await response.json();
+      const sessions = Array.isArray(data?.payload?.sessions) ? data.payload.sessions : [];
+      for (const remote of sessions) {
+        const id = String(remote?.id || "");
+        if (!id) continue;
+        if (workshopTerminalState.sessions.has(id)) continue;
+        const state = String(remote?.state || "");
+        // Only restore live sessions; the server reaps stopped/failed ones via TTL.
+        if (state !== "running" && state !== "starting") continue;
+        workshopTerminalState.sessions.set(id, {
+          id,
+          label: String(remote?.label || "shell"),
+          state,
+          bufferedOutput: "",
+        });
+      }
+      if (!workshopTerminalState.activeId) {
+        const next = workshopTerminalState.sessions.keys().next();
+        workshopTerminalState.activeId = next.done ? "" : next.value;
+      }
+      recomputeWorkshopBadges();
+    } catch {
+      workshopTerminalState.hydrated = false;
+    }
+  }
+
+  function workshopTerminalListNode() {
+    return document.querySelector("[data-viewer-workshop-terminal-list]");
+  }
+
+  function workshopTerminalStageNode() {
+    return document.querySelector("[data-viewer-workshop-terminal-stage]");
+  }
+
+  function renderWorkshopTerminalList() {
+    const node = workshopTerminalListNode();
+    if (!(node instanceof HTMLElement)) return;
+    const entries = [...workshopTerminalState.sessions.values()];
+    const header = `<div class="viewer-workshop__terminal-list-header">
+      <span>Terminals</span>
+      <span class="viewer-workshop__terminal-actions">
+        <button class="btn viewer-workshop__terminal-new" type="button" data-viewer-workshop-terminal-new title="Spawn a shell session">+ Shell</button>
+        <button class="btn viewer-workshop__terminal-new" type="button" data-viewer-workshop-terminal-custom title="Spawn a session with a custom command">+ Custom</button>
+      </span>
+    </div>`;
+    if (entries.length === 0) {
+      node.innerHTML = `${header}<div class="viewer-workspace__placeholder viewer-workspace__placeholder--empty"><span class="viewer-workspace__placeholder-icon" aria-hidden="true">·</span><span>No sessions yet.</span></div>`;
+      return;
+    }
+    const rows = entries.map((entry) => {
+      const isActive = entry.id === workshopTerminalState.activeId;
+      const stateBadge = entry.state ? `<span class="viewer-workshop__state viewer-workshop__state--${escapeHtml(entry.state)}">${escapeHtml(entry.state)}</span>` : "";
+      const closing = Boolean(entry.closing);
+      const closeAttrs = closing
+        ? `aria-busy="true" aria-label="Closing session" title="Closing session..."`
+        : `data-viewer-workshop-terminal-close="${escapeHtml(entry.id)}" role="button" tabindex="0" title="Close session" aria-label="Close session"`;
+      const closeGlyph = closing
+        ? `<span class="viewer-workshop__spinner" aria-hidden="true"></span>`
+        : `×`;
+      return `<button class="viewer-workshop__terminal-row${isActive ? " is-active" : ""}${closing ? " is-closing" : ""}" type="button" data-viewer-workshop-terminal-select="${escapeHtml(entry.id)}" title="${escapeHtml(entry.label || entry.id)}">
+        <span class="viewer-workshop__terminal-row-label">${escapeHtml(entry.label || entry.id)}</span>
+        ${stateBadge}
+        <span class="viewer-workshop__terminal-row-close${closing ? " is-closing" : ""}" ${closeAttrs}>${closeGlyph}</span>
+      </button>`;
+    }).join("");
+    node.innerHTML = `${header}<div class="viewer-workshop__terminal-rows">${rows}</div>`;
+  }
+
+  function ensureWorkshopTerminalStage() {
+    const stage = workshopTerminalStageNode();
+    if (!(stage instanceof HTMLElement)) return null;
+    const active = workshopTerminalState.activeId
+      ? workshopTerminalState.sessions.get(workshopTerminalState.activeId)
+      : null;
+    // Clean up placeholder and host elements for sessions that no longer exist.
+    const placeholder = stage.querySelector("[data-viewer-workshop-terminal-empty]");
+    if (placeholder) placeholder.remove();
+    stage.querySelectorAll("[data-viewer-workshop-terminal-host]").forEach((node) => {
+      if (!(node instanceof HTMLElement)) return;
+      const id = node.getAttribute("data-viewer-workshop-terminal-host") || "";
+      if (!workshopTerminalState.sessions.has(id)) {
+        node.remove();
+      }
+    });
+    if (!active) {
+      if (!stage.querySelector("[data-viewer-workshop-terminal-empty]")) {
+        const empty = document.createElement("div");
+        empty.className = "viewer-workspace__placeholder viewer-workspace__placeholder--empty";
+        empty.setAttribute("data-viewer-workshop-terminal-empty", "");
+        empty.innerHTML = '<span class="viewer-workspace__placeholder-icon" aria-hidden="true">·</span><span>Select or create a terminal session to start.</span>';
+        stage.appendChild(empty);
+      }
+      // Hide every existing host while no session is active.
+      stage.querySelectorAll("[data-viewer-workshop-terminal-host]").forEach((node) => {
+        if (node instanceof HTMLElement) node.style.display = "none";
+      });
+      return null;
+    }
+    // Toggle visibility: only the active host shows, every other host stays
+    // mounted in the DOM so its xterm.js instance and scrollback survive.
+    let host = stage.querySelector(`[data-viewer-workshop-terminal-host="${active.id}"]`);
+    stage.querySelectorAll("[data-viewer-workshop-terminal-host]").forEach((node) => {
+      if (!(node instanceof HTMLElement)) return;
+      const id = node.getAttribute("data-viewer-workshop-terminal-host") || "";
+      node.style.display = id === active.id ? "" : "none";
+    });
+    if (!(host instanceof HTMLElement)) {
+      host = document.createElement("div");
+      host.className = "viewer-workshop__terminal-host";
+      host.setAttribute("data-viewer-workshop-terminal-host", active.id);
+      stage.appendChild(host);
+    }
+    return host instanceof HTMLElement ? host : null;
+  }
+
+  function ensureWorkshopTerminalHostFor(sessionId) {
+    const stage = workshopTerminalStageNode();
+    if (!(stage instanceof HTMLElement)) return null;
+    const placeholder = stage.querySelector("[data-viewer-workshop-terminal-empty]");
+    if (placeholder) placeholder.remove();
+    let host = stage.querySelector(`[data-viewer-workshop-terminal-host="${sessionId}"]`);
+    if (!(host instanceof HTMLElement)) {
+      host = document.createElement("div");
+      host.className = "viewer-workshop__terminal-host";
+      host.setAttribute("data-viewer-workshop-terminal-host", sessionId);
+      stage.appendChild(host);
+    }
+    return host;
+  }
+
+  function mountWorkshopTerminalEmulator(entry) {
+    if (typeof window.Terminal !== "function") return;
+    if (entry.terminal) return;
+    const host = ensureWorkshopTerminalHostFor(entry.id);
+    if (!host) return;
+    const term = new window.Terminal({
+      fontSize: 12,
+      fontFamily: 'var(--vscode-editor-font-family, "Menlo", "Consolas", monospace)',
+      theme: { background: "#0a0a0a", foreground: "#d4d4d4" },
+      cursorBlink: true,
+      scrollback: 5000,
+      convertEol: true,
+    });
+    const fitAddon = typeof window.FitAddon === "function"
+      ? new window.FitAddon()
+      : (window.FitAddon && typeof window.FitAddon.FitAddon === "function" ? new window.FitAddon.FitAddon() : null);
+    const linksAddon = window.WebLinksAddon && typeof window.WebLinksAddon.WebLinksAddon === "function"
+      ? new window.WebLinksAddon.WebLinksAddon()
+      : null;
+    if (fitAddon) term.loadAddon(fitAddon);
+    if (linksAddon) term.loadAddon(linksAddon);
+    term.open(host);
+    if (fitAddon) {
+      try { fitAddon.fit(); } catch { /* noop */ }
+    }
+    term.onData((data) => {
+      writeWorkshopTerminalInput(entry.id, data);
+    });
+    term.onResize((size) => {
+      resizeWorkshopTerminal(entry.id, size.rows, size.cols);
+    });
+    entry.terminal = term;
+    entry.fitAddon = fitAddon;
+    if (fitAddon) {
+      try {
+        const dim = fitAddon.proposeDimensions();
+        if (dim) resizeWorkshopTerminal(entry.id, dim.rows, dim.cols);
+      } catch { /* noop */ }
+    }
+    openWorkshopTerminalStream(entry.id);
+    if (entry.bufferedOutput) {
+      term.write(entry.bufferedOutput);
+    }
+  }
+
+  function setActiveWorkshopTerminal(sessionId) {
+    workshopTerminalState.activeId = sessionId || "";
+    renderWorkshopTerminalList();
+    const entry = sessionId ? workshopTerminalState.sessions.get(sessionId) : null;
+    ensureWorkshopTerminalStage();
+    if (entry) {
+      mountWorkshopTerminalEmulator(entry);
+      try { entry.terminal?.focus(); } catch { /* noop */ }
+      try { entry.fitAddon?.fit(); } catch { /* noop */ }
+    }
+  }
+
+  async function spawnWorkshopTerminal(options = {}) {
+    try {
+      const body = {};
+      if (Array.isArray(options.command) && options.command.length) body.command = options.command;
+      if (options.label) body.label = String(options.label);
+      const response = await fetch("/api/workshop-terminal-start", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      const data = await response.json();
+      if (!response.ok || !data.ok) throw new Error(data.error || "Unable to start terminal.");
+      const session = data.payload;
+      workshopTerminalState.sessions.set(session.id, {
+        id: session.id,
+        label: session.label || "shell",
+        state: session.state,
+        bufferedOutput: "",
+      });
+      recomputeWorkshopBadges();
+      // Ensure the Workshop view is mounted before activating.
+      if (preferredWorkshopTab() !== "terminals") {
+        await showWorkshop({ tab: "terminals" });
+      } else {
+        await showWorkshop({ tab: "terminals" });
+      }
+      setActiveWorkshopTerminal(session.id);
+      return session.id;
+    } catch (error) {
+      setMeta(`Terminal: ${error?.message || error}`);
+      return "";
+    }
+  }
+
+  function spawnCustomWorkshopTerminal() {
+    const raw = window.prompt("Command to run (space-separated, e.g. 'node --version'):", "");
+    if (!raw) return;
+    const command = raw.trim().split(/\s+/).filter(Boolean);
+    if (!command.length) return;
+    const label = command.slice(0, 2).join(" ").slice(0, 32) || "custom";
+    spawnWorkshopTerminal({ command, label });
+  }
+
+  // Public API for CDX / handoff launchers and other callers that want to
+  // open a Workshop terminal pre-running a canonical command.
+  window.logicsViewer = window.logicsViewer || {};
+  window.logicsViewer.launchTerminal = (command, label) => spawnWorkshopTerminal({ command, label });
+
+  function writeWorkshopTerminalInput(sessionId, data) {
+    if (!sessionId || !data) return;
+    fetch("/api/workshop-terminal-input", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sessionId, data }),
+    }).catch(() => { /* noop */ });
+  }
+
+  function resizeWorkshopTerminal(sessionId, rows, cols) {
+    if (!sessionId || rows <= 0 || cols <= 0) return;
+    fetch("/api/workshop-terminal-resize", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sessionId, rows, cols }),
+    }).catch(() => { /* noop */ });
+  }
+
+  async function stopWorkshopTerminal(sessionId) {
+    if (!sessionId) return;
+    const pending = workshopTerminalState.sessions.get(sessionId);
+    if (pending?.closing) return;
+    if (pending) {
+      pending.closing = true;
+      renderWorkshopTerminalList();
+    }
+    try {
+      await fetch("/api/workshop-terminal-stop", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId }),
+      });
+    } catch { /* noop */ }
+    closeWorkshopTerminalStream(sessionId);
+    const entry = workshopTerminalState.sessions.get(sessionId);
+    if (entry?.terminal) {
+      try { entry.terminal.dispose(); } catch { /* noop */ }
+    }
+    workshopTerminalState.sessions.delete(sessionId);
+    if (workshopTerminalState.activeId === sessionId) {
+      const next = workshopTerminalState.sessions.keys().next();
+      setActiveWorkshopTerminal(next.done ? "" : next.value);
+    } else {
+      renderWorkshopTerminalList();
+    }
+    recomputeWorkshopBadges();
+  }
+
+  function closeWorkshopTerminalStream(sessionId) {
+    const stream = workshopTerminalState.streams.get(sessionId);
+    if (stream) {
+      try { stream.close(); } catch { /* noop */ }
+      workshopTerminalState.streams.delete(sessionId);
+    }
+  }
+
+  function openWorkshopTerminalStream(sessionId) {
+    closeWorkshopTerminalStream(sessionId);
+    const source = new EventSource(`/api/workshop-terminal/${encodeURIComponent(sessionId)}/stream`);
+    workshopTerminalState.streams.set(sessionId, source);
+    source.addEventListener("data", (event) => {
+      try {
+        const payload = JSON.parse(event.data || "{}");
+        const chunk = String(payload.data || "");
+        const entry = workshopTerminalState.sessions.get(sessionId);
+        if (!entry) return;
+        if (entry.terminal) {
+          entry.terminal.write(chunk);
+        } else {
+          entry.bufferedOutput = (entry.bufferedOutput || "") + chunk;
+        }
+      } catch { /* noop */ }
+    });
+    source.addEventListener("end", (event) => {
+      try {
+        const payload = JSON.parse(event.data || "{}");
+        const entry = workshopTerminalState.sessions.get(sessionId);
+        if (entry) entry.state = payload.state;
+        renderWorkshopTerminalList();
+        recomputeWorkshopBadges();
+      } catch { /* noop */ }
+      closeWorkshopTerminalStream(sessionId);
+    });
+    source.addEventListener("error", () => {
+      closeWorkshopTerminalStream(sessionId);
+    });
+  }
+
+  function renderWorkshop(activeTab, options = {}) {
+    if (options.unavailable) {
+      return `
+        <div class="viewer-workshop">
+          <div class="viewer-workspace__placeholder viewer-workspace__placeholder--unavailable">
+            <span class="viewer-workspace__placeholder-icon" aria-hidden="true">!</span>
+            <span>${escapeHtml(options.message || "Workshop is not available for this project.")}</span>
+          </div>
+        </div>
+      `;
+    }
+    return `
+      <div class="viewer-workshop">
+        <div class="viewer-workshop__tabs" role="tablist" aria-label="Workshop sub-screens">
+          ${renderWorkshopTabs(activeTab)}
+        </div>
+        ${renderWorkshopPanel(activeTab)}
+      </div>
+    `;
+  }
+
+  async function showWorkshop(options = {}) {
+    if (!isCapabilityAvailable("workshop")) {
+      const message = capabilityMessage("workshop", "Workshop is not available for this project.");
+      setDocument("Workshop", renderWorkshop("terminals", { unavailable: true, message }));
+      setMeta(message);
+      return;
+    }
+    const activeTab = options.tab && workshopTabs.some((tab) => tab.id === options.tab)
+      ? options.tab
+      : preferredWorkshopTab();
+    setWorkshopActiveTab(activeTab);
+    setDocument("Workshop", renderWorkshop(activeTab));
+    setMeta(`Workshop / ${activeTab}`);
+    if (activeTab === "commands") {
+      await loadWorkshopCommands();
+    } else if (activeTab === "terminals") {
+      // The Workshop DOM was just re-rendered, so every prior xterm host /
+      // EventSource is gone. Drop them from the in-memory state too so the
+      // remount path recreates fresh ones and the SSE stream replays the
+      // session buffer.
+      for (const entry of workshopTerminalState.sessions.values()) {
+        if (entry.terminal) {
+          try { entry.terminal.dispose(); } catch { /* noop */ }
+        }
+        entry.terminal = null;
+        entry.fitAddon = null;
+        closeWorkshopTerminalStream(entry.id);
+      }
+      renderWorkshopTerminalList();
+      // Remount every session so switching between rows is instant and
+      // none of the terminals show a black/empty stage.
+      for (const entry of workshopTerminalState.sessions.values()) {
+        mountWorkshopTerminalEmulator(entry);
+        if (entry.id !== workshopTerminalState.activeId) {
+          const host = workshopTerminalStageNode()?.querySelector(`[data-viewer-workshop-terminal-host="${entry.id}"]`);
+          if (host instanceof HTMLElement) host.style.display = "none";
+        }
+      }
+      if (workshopTerminalState.activeId) {
+        setActiveWorkshopTerminal(workshopTerminalState.activeId);
+      }
+    }
+  }
+
+  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 +3478,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 +3588,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 +3864,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 +3900,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 +3927,12 @@
     `;
   }
 
+  function rerenderCdxStatusFromPreferences() {
+    if (isCdxStatusOpen() && latestCdxStatusPayload) {
+      setDocument("CDX status", renderCdxStatus(latestCdxStatusPayload));
+    }
+  }
+
   function renderCdxRuns(payload) {
     if (!payload || payload.state !== "ok") {
       return `
@@ -3106,6 +4263,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 +4978,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", () => {
@@ -3869,6 +5033,19 @@
       setRefreshMenuOpen(false);
       withPrimaryAction("health", "Checking health", showHealth);
     });
+    document.getElementById("viewer-lan-banner-copy")?.addEventListener("click", async () => {
+      const share = latestLanShareUrl;
+      if (!share) return;
+      const ok = await copyTextToClipboard(share);
+      if (ok) {
+        setMeta("LAN share URL copied to the clipboard.");
+      } else {
+        setMeta(`Copy failed — long-press to select: ${share}`);
+      }
+    });
+    document.getElementById("viewer-workshop")?.addEventListener("click", () => {
+      withPrimaryAction("workshop", "Opening Workshop", () => showWorkshop());
+    });
     document.getElementById("viewer-git")?.addEventListener("click", () => {
       withPrimaryAction("git", "Checking Git status", showGitStatus);
     });
@@ -3914,6 +5091,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 +5109,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 +5138,22 @@
       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 workshopTabTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workshop-tab]") : null;
+      const workshopRunTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workshop-command-run]") : null;
+      const workshopStopTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workshop-command-stop]") : null;
+      const workshopTerminalNewTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workshop-terminal-new]") : null;
+      const workshopTerminalCustomTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workshop-terminal-custom]") : null;
+      const workshopTerminalSelectTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workshop-terminal-select]") : null;
+      const workshopTerminalCloseTarget = event.target instanceof Element ? event.target.closest("[data-viewer-workshop-terminal-close]") : 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 +5189,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 +5221,62 @@
         }
         return;
       }
+      if (workshopTabTarget instanceof HTMLElement) {
+        event.preventDefault();
+        const tab = workshopTabTarget.getAttribute("data-viewer-workshop-tab") || "terminals";
+        withPrimaryAction("workshop-tab", `Switching to ${tab}`, () => showWorkshop({ tab }));
+        return;
+      }
+      if (workshopTerminalCloseTarget instanceof HTMLElement) {
+        event.preventDefault();
+        event.stopPropagation();
+        const id = workshopTerminalCloseTarget.getAttribute("data-viewer-workshop-terminal-close") || "";
+        if (id) stopWorkshopTerminal(id);
+        return;
+      }
+      if (workshopTerminalNewTarget instanceof HTMLElement) {
+        event.preventDefault();
+        spawnWorkshopTerminal();
+        return;
+      }
+      if (workshopTerminalCustomTarget instanceof HTMLElement) {
+        event.preventDefault();
+        spawnCustomWorkshopTerminal();
+        return;
+      }
+      if (workshopTerminalSelectTarget instanceof HTMLElement) {
+        event.preventDefault();
+        const id = workshopTerminalSelectTarget.getAttribute("data-viewer-workshop-terminal-select") || "";
+        if (id) setActiveWorkshopTerminal(id);
+        return;
+      }
+      if (workshopRunTarget instanceof HTMLElement) {
+        event.preventDefault();
+        const commandId = workshopRunTarget.getAttribute("data-viewer-workshop-command-run") || "";
+        if (commandId) {
+          updateWorkshopCommandSession(commandId, { state: "starting", logText: "" });
+          startWorkshopCommand(commandId);
+        }
+        return;
+      }
+      if (workshopStopTarget instanceof HTMLElement) {
+        event.preventDefault();
+        const commandId = workshopStopTarget.getAttribute("data-viewer-workshop-command-stop") || "";
+        if (commandId) {
+          stopWorkshopCommand(commandId);
+        }
+        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));