@prismatic-io/lux 0.0.2-preview.3 → 0.0.2-preview.5

package/viewer/app.js

@@ -0,0 +1,601 @@
+import {
+  detailEmpty,
+  renderArtifactComparison,
+  renderArtifactPreview,
+  renderExperimentDetail,
+  renderRunComparison,
+  renderRunDetail,
+  renderSuiteComparison,
+  renderSuiteDetail,
+} from "./detail.js";
+import {
+  detailError,
+  detailLoading,
+  escapeHtml,
+  fullDate,
+  percentage,
+  relativeTime,
+  statusLabel,
+} from "./format.js";
+
+const state = {
+  snapshot: null,
+  initialized: false,
+  tab: "runs",
+  status: "all",
+  query: "",
+  selectedId: null,
+  detail: null,
+  loadingDetail: false,
+  detailRequest: 0,
+  compareMode: false,
+  compareIds: [],
+  comparison: null,
+  loadingComparison: false,
+  comparisonRequest: 0,
+  candidateTargetId: null,
+  overlay: null,
+};
+
+const elements = {
+  list: document.querySelector("#collection-list"),
+  inspector: document.querySelector("#inspector"),
+  filters: document.querySelector("#status-filters"),
+  title: document.querySelector("#collection-title"),
+  eyebrow: document.querySelector("#collection-eyebrow"),
+  count: document.querySelector("#result-count"),
+  search: document.querySelector("#search-input"),
+  refresh: document.querySelector("#refresh-button"),
+  compare: document.querySelector("#compare-button"),
+  compareTray: document.querySelector("#compare-tray"),
+  connection: document.querySelector("#connection-state"),
+};
+
+const currentItems = () => state.snapshot?.[state.tab] ?? [];
+
+const searchableText = (item) =>
+  [
+    item.caseId,
+    item.driver,
+    item.agentId,
+    item.suiteId,
+    item.profileId,
+    item.experimentId,
+    item.campaignId,
+    item.championCandidateId,
+    item.path,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+
+const visibleItems = () => {
+  const query = state.query.trim().toLowerCase();
+  return currentItems()
+    .filter((item) => state.status === "all" || item.status === state.status)
+    .filter((item) => !query || searchableText(item).includes(query))
+    .sort((left, right) =>
+      String(right.startedAt ?? right.experimentId ?? right.suiteId).localeCompare(
+        String(left.startedAt ?? left.experimentId ?? left.suiteId),
+      ),
+    );
+};
+
+const rowTitle = (item) => item.caseId ?? item.campaignId ?? item.suiteId;
+
+const rowMetric = (item) => {
+  if (item.kind === "run") {
+    return `<strong>${escapeHtml(percentage(item.score))}</strong><small>${escapeHtml(
+      `${item.assertions.passed}/${item.assertions.total} checks`,
+    )}</small>`;
+  }
+  if (item.kind === "suite") {
+    const complete = item.items.filter((entry) => entry.status === "completed").length;
+    return `<strong>${complete}/${item.items.length}</strong><small>complete</small>`;
+  }
+  return `<strong>${item.candidateCount}</strong><small>candidates</small>`;
+};
+
+const rowMeta = (item) => {
+  if (item.kind === "run") {
+    return [item.driver, item.agentId, relativeTime(item.startedAt)].filter(Boolean);
+  }
+  if (item.kind === "suite") {
+    return [item.profileId ?? "default profile", fullDate(item.startedAt), `j=${item.concurrency}`];
+  }
+  return [item.mode, fullDate(item.startedAt), item.championCandidateId ?? "no champion"];
+};
+
+const compareSlot = (id) => {
+  const index = state.compareIds.indexOf(id);
+  return index < 0 ? "" : `<span class="compare-slot">${index === 0 ? "A" : "B"}</span>`;
+};
+
+const renderRows = () => {
+  const items = visibleItems();
+  elements.count.textContent = `${items.length} ${items.length === 1 ? "record" : "records"}`;
+  if (items.length === 0) {
+    elements.list.innerHTML = `
+      <div class="empty-list">
+        <strong>No matching ${escapeHtml(state.tab)}</strong>
+        <p>Try another status or search term.</p>
+      </div>`;
+    return;
+  }
+  elements.list.innerHTML = items
+    .map(
+      (item) => `
+        <button
+          class="evidence-row${state.compareMode ? " is-compare-mode" : ""}${state.selectedId === item.id && !state.compareMode ? " is-selected" : ""}${
+            state.compareIds.includes(item.id) ? " is-compared" : ""
+          }"
+          type="button"
+          data-select="${escapeHtml(item.id)}"
+        >
+          ${state.compareMode ? compareSlot(item.id) || '<span class="compare-slot empty">+</span>' : ""}
+          <span class="status-pin ${escapeHtml(item.status)}" aria-label="${escapeHtml(
+            statusLabel(item.status),
+          )}"></span>
+          <span class="row-main">
+            <span class="row-title">${escapeHtml(rowTitle(item))}</span>
+            <span class="row-meta">
+              ${rowMeta(item)
+                .map((value) => `<span>${escapeHtml(value)}</span>`)
+                .join("<b>·</b>")}
+            </span>
+          </span>
+          <span class="row-metric">${rowMetric(item)}</span>
+        </button>`,
+    )
+    .join("");
+};
+
+const renderFilters = () => {
+  const items = currentItems();
+  const statuses = ["all", "passed", "failed", "error", "running", "aborted", "ungraded"].filter(
+    (status) => status === "all" || items.some((item) => item.status === status),
+  );
+  elements.filters.innerHTML = statuses
+    .map((status) => {
+      const count =
+        status === "all" ? items.length : items.filter((item) => item.status === status).length;
+      return `<button
+        class="filter-chip${state.status === status ? " is-active" : ""}"
+        type="button"
+        data-status="${escapeHtml(status)}"
+      >${escapeHtml(status === "all" ? "All" : statusLabel(status))} · ${count}</button>`;
+    })
+    .join("");
+};
+
+const renderCompareControls = () => {
+  const available = state.tab === "runs" || state.tab === "suites";
+  elements.compare.hidden = !available;
+  elements.compare.classList.toggle("is-active", state.compareMode);
+  elements.compare.textContent = state.compareMode ? "Cancel compare" : "Compare";
+  if (!state.compareMode) {
+    elements.compareTray.hidden = true;
+    return;
+  }
+  const selected = state.compareIds.map((id) => currentItems().find((item) => item.id === id));
+  elements.compareTray.hidden = false;
+  elements.compareTray.innerHTML = `
+    <span><b>A</b>${escapeHtml(selected[0] ? rowTitle(selected[0]) : "Choose baseline")}</span>
+    <i>→</i>
+    <span><b>B</b>${escapeHtml(selected[1] ? rowTitle(selected[1]) : "Choose candidate")}</span>
+    <small>${state.compareIds.length < 2 ? "Select two rows" : "Exact persisted evidence"}</small>`;
+};
+
+const comparisonLabels = () => {
+  const [beforeId, afterId] = state.compareIds;
+  return {
+    before: rowTitle(currentItems().find((item) => item.id === beforeId) ?? {}) ?? "A",
+    after: rowTitle(currentItems().find((item) => item.id === afterId) ?? {}) ?? "B",
+  };
+};
+
+const renderInspector = () => {
+  if (state.overlay?.loading) {
+    elements.inspector.innerHTML = detailLoading("Reading artifact…");
+    return;
+  }
+  if (state.overlay?.error) {
+    elements.inspector.innerHTML = detailError(state.overlay.error);
+    return;
+  }
+  if (state.overlay?.type === "artifact") {
+    elements.inspector.innerHTML = renderArtifactPreview(state.overlay.data);
+    return;
+  }
+  if (state.overlay?.type === "artifact-comparison") {
+    elements.inspector.innerHTML = renderArtifactComparison(state.overlay.data);
+    return;
+  }
+  if (state.compareMode) {
+    if (state.loadingComparison) {
+      elements.inspector.innerHTML = detailLoading("Comparing persisted evidence…");
+      return;
+    }
+    if (state.comparison) {
+      elements.inspector.innerHTML =
+        state.tab === "runs"
+          ? renderRunComparison(state.comparison, comparisonLabels())
+          : renderSuiteComparison(state.comparison, comparisonLabels());
+      return;
+    }
+    elements.inspector.innerHTML = `
+      <div class="inspector-empty compare-empty">
+        <span class="empty-glyph" aria-hidden="true">A/B</span>
+        <h2>Choose a baseline and candidate</h2>
+        <p>Lux will compare identity, outcomes, judgments, resources, and artifacts from the exact persisted evidence.</p>
+      </div>`;
+    return;
+  }
+  const item = currentItems().find((entry) => entry.id === state.selectedId);
+  if (!item) {
+    elements.inspector.innerHTML = detailEmpty();
+    return;
+  }
+  if (state.loadingDetail) {
+    elements.inspector.innerHTML = detailLoading(`Loading ${item.kind} evidence…`);
+    return;
+  }
+  if (!state.detail) {
+    elements.inspector.innerHTML = detailEmpty();
+    return;
+  }
+  if (item.kind === "run") {
+    elements.inspector.innerHTML = renderRunDetail(item, state.detail);
+  } else if (item.kind === "suite") {
+    elements.inspector.innerHTML = renderSuiteDetail(item, state.detail);
+  } else {
+    elements.inspector.innerHTML = renderExperimentDetail(
+      item,
+      state.detail,
+      state.candidateTargetId,
+    );
+  }
+};
+
+const renderMetrics = () => {
+  const runs = state.snapshot?.runs ?? [];
+  const graded = runs.filter((run) => run.status === "passed" || run.status === "failed");
+  const passed = graded.filter((run) => run.status === "passed").length;
+  const failures = runs.filter((run) => run.status === "failed" || run.status === "error").length;
+  const experiments = state.snapshot?.experiments ?? [];
+  const running = experiments.filter((experiment) => experiment.status === "running").length;
+  const latest = runs
+    .map((run) => run.startedAt)
+    .filter(Boolean)
+    .sort()
+    .at(-1);
+  document.querySelector("#metric-pass-rate").textContent =
+    graded.length > 0 ? percentage(passed / graded.length) : "—";
+  document.querySelector("#metric-pass-note").textContent =
+    graded.length > 0 ? `${passed} of ${graded.length} graded runs passed` : "No graded runs";
+  document.querySelector("#metric-failures").textContent = String(failures);
+  document.querySelector("#metric-experiments").textContent = String(experiments.length);
+  let experimentNote = "No campaigns yet";
+  if (running) experimentNote = `${running} campaign${running === 1 ? "" : "s"} running`;
+  else if (experiments.length) experimentNote = "All campaigns settled";
+  document.querySelector("#metric-experiment-note").textContent = experimentNote;
+  document.querySelector("#metric-recency").textContent = latest ? relativeTime(latest) : "—";
+  document.querySelector("#metric-refresh").textContent = `Refreshed ${relativeTime(
+    state.snapshot?.generatedAt,
+  )} ago`;
+};
+
+const renderChrome = () => {
+  const copy = {
+    runs: ["Individual evidence", "Runs"],
+    suites: ["Invocation groups", "Suites"],
+    experiments: ["Controlled change", "Experiments"],
+  }[state.tab];
+  elements.eyebrow.textContent = copy[0];
+  elements.title.textContent = copy[1];
+  document.querySelectorAll("[data-tab]").forEach((button) => {
+    button.classList.toggle("is-active", button.dataset.tab === state.tab);
+  });
+  for (const tab of ["runs", "suites", "experiments"]) {
+    document.querySelector(`[data-count="${tab}"]`).textContent = String(
+      state.snapshot?.[tab]?.length ?? 0,
+    );
+  }
+  document.querySelector("#runs-root").textContent =
+    state.snapshot?.runsRoot ?? "Local Lux run store";
+  renderMetrics();
+  renderFilters();
+  renderCompareControls();
+  renderRows();
+  renderInspector();
+};
+
+const setConnection = (connected, message) => {
+  elements.connection.classList.toggle("is-offline", !connected);
+  elements.connection.lastChild.textContent = ` ${message}`;
+};
+
+const updateUrl = () => {
+  if (!state.initialized) return;
+  const params = new URLSearchParams();
+  if (state.tab !== "runs") params.set("tab", state.tab);
+  if (state.status !== "all") params.set("status", state.status);
+  if (state.query) params.set("q", state.query);
+  if (state.selectedId && !state.compareMode) params.set("item", state.selectedId);
+  if (state.compareIds[0]) params.set("before", state.compareIds[0]);
+  if (state.compareIds[1]) params.set("after", state.compareIds[1]);
+  if (state.candidateTargetId) params.set("target", state.candidateTargetId);
+  const query = params.toString();
+  history.replaceState(null, "", query ? `?${query}` : location.pathname);
+};
+
+const fetchJson = async (url) => {
+  const response = await fetch(url, { cache: "no-store" });
+  const payload = await response.json();
+  if (!response.ok) throw new Error(payload.error ?? `Request failed (${response.status})`);
+  return payload;
+};
+
+const fetchDetail = async (id, { silent = false } = {}) => {
+  const request = ++state.detailRequest;
+  if (!silent) {
+    state.loadingDetail = true;
+    state.detail = null;
+    renderInspector();
+  }
+  try {
+    const payload = await fetchJson(`/api/${state.tab}/${encodeURIComponent(id)}`);
+    if (request !== state.detailRequest || id !== state.selectedId) return;
+    state.detail = payload;
+    state.loadingDetail = false;
+    renderInspector();
+  } catch (error) {
+    if (request !== state.detailRequest) return;
+    state.loadingDetail = false;
+    elements.inspector.innerHTML = detailError(error.message);
+  }
+};
+
+const fetchComparison = async ({ silent = false } = {}) => {
+  const [before, after] = state.compareIds;
+  if (!before || !after) return;
+  const request = ++state.comparisonRequest;
+  if (!silent) {
+    state.loadingComparison = true;
+    state.comparison = null;
+    renderInspector();
+  }
+  try {
+    const params = new URLSearchParams({ before, after });
+    const payload = await fetchJson(`/api/compare/${state.tab}?${params}`);
+    if (request !== state.comparisonRequest) return;
+    state.comparison = payload;
+    state.loadingComparison = false;
+    renderInspector();
+  } catch (error) {
+    if (request !== state.comparisonRequest) return;
+    state.loadingComparison = false;
+    elements.inspector.innerHTML = detailError(error.message);
+  }
+};
+
+const selectItem = (id) => {
+  state.selectedId = id;
+  state.detail = null;
+  state.overlay = null;
+  state.candidateTargetId = null;
+  updateUrl();
+  renderRows();
+  void fetchDetail(id);
+};
+
+const selectComparisonItem = (id) => {
+  const currentIndex = state.compareIds.indexOf(id);
+  if (currentIndex >= 0) state.compareIds.splice(currentIndex, 1);
+  else if (state.compareIds.length < 2) state.compareIds.push(id);
+  else state.compareIds[1] = id;
+  state.comparison = null;
+  state.overlay = null;
+  renderChrome();
+  updateUrl();
+  if (state.compareIds.length === 2) void fetchComparison();
+};
+
+const setCompareMode = (enabled) => {
+  state.compareMode = enabled;
+  state.compareIds = [];
+  state.comparison = null;
+  state.overlay = null;
+  state.comparisonRequest++;
+  renderChrome();
+  updateUrl();
+};
+
+const applyInitialUrl = (snapshot) => {
+  const params = new URLSearchParams(location.search);
+  const requestedTab = params.get("tab");
+  const validTabs = new Set(["runs", "suites", "experiments"]);
+  if (requestedTab && validTabs.has(requestedTab)) state.tab = requestedTab;
+  else if (snapshot.initial) state.tab = `${snapshot.initial.kind}s`;
+  state.status = params.get("status") ?? "all";
+  state.query = params.get("q") ?? "";
+  elements.search.value = state.query;
+  state.selectedId = params.get("item") ?? snapshot.initial?.id ?? null;
+  state.candidateTargetId = params.get("target");
+  const pair = [params.get("before"), params.get("after")].filter(Boolean);
+  if (state.tab !== "experiments" && pair.length) {
+    state.compareMode = true;
+    state.compareIds = pair
+      .filter((id) => currentItems().some((item) => item.id === id))
+      .slice(0, 2);
+  }
+  state.initialized = true;
+};
+
+const refresh = async ({ first = false } = {}) => {
+  elements.refresh.classList.add("is-spinning");
+  try {
+    state.snapshot = await fetchJson("/api/snapshot");
+    if (first && !state.initialized) applyInitialUrl(state.snapshot);
+    const selectedExists = currentItems().some((entry) => entry.id === state.selectedId);
+    if (!selectedExists && !state.compareMode) state.selectedId = visibleItems()[0]?.id ?? null;
+    state.compareIds = state.compareIds.filter((id) =>
+      currentItems().some((item) => item.id === id),
+    );
+    setConnection(true, "Connected");
+    renderChrome();
+    updateUrl();
+    if (state.compareMode && state.compareIds.length === 2) {
+      void fetchComparison({ silent: !first });
+    } else if (state.selectedId) {
+      void fetchDetail(state.selectedId, { silent: !first });
+    }
+  } catch (error) {
+    setConnection(false, "Evidence unavailable");
+    if (first) elements.list.innerHTML = detailError(error.message);
+  } finally {
+    elements.refresh.classList.remove("is-spinning");
+  }
+};
+
+const showArtifact = async (path, comparison = false) => {
+  state.overlay = { type: comparison ? "artifact-comparison" : "artifact", loading: true };
+  renderInspector();
+  try {
+    const params = comparison
+      ? new URLSearchParams({
+          before: state.compareIds[0],
+          after: state.compareIds[1],
+          path,
+        })
+      : new URLSearchParams({ run: state.selectedId, path });
+    state.overlay = {
+      type: comparison ? "artifact-comparison" : "artifact",
+      loading: false,
+      data: await fetchJson(
+        comparison ? `/api/compare/artifacts?${params}` : `/api/artifact?${params}`,
+      ),
+    };
+  } catch (error) {
+    state.overlay = { type: comparison ? "artifact-comparison" : "artifact", error: error.message };
+  }
+  renderInspector();
+};
+
+document.addEventListener("click", (event) => {
+  const tab = event.target.closest("[data-tab]");
+  if (tab) {
+    state.tab = tab.dataset.tab;
+    state.status = "all";
+    state.selectedId = null;
+    state.detail = null;
+    state.candidateTargetId = null;
+    setCompareMode(false);
+    return;
+  }
+  const filter = event.target.closest("[data-status]");
+  if (filter) {
+    state.status = filter.dataset.status;
+    renderFilters();
+    renderRows();
+    updateUrl();
+    return;
+  }
+  if (event.target.closest("#compare-button")) {
+    setCompareMode(!state.compareMode);
+    return;
+  }
+  if (event.target.closest("[data-close-compare]")) {
+    setCompareMode(false);
+    return;
+  }
+  const artifact = event.target.closest("[data-artifact]");
+  if (artifact) {
+    void showArtifact(artifact.dataset.artifact);
+    return;
+  }
+  const comparedArtifact = event.target.closest("[data-compare-artifact]");
+  if (comparedArtifact) {
+    void showArtifact(comparedArtifact.dataset.compareArtifact, true);
+    return;
+  }
+  if (event.target.closest("[data-back-detail], [data-back-comparison]")) {
+    state.overlay = null;
+    renderInspector();
+    return;
+  }
+  const openRun = event.target.closest("[data-open-run]");
+  if (openRun) {
+    state.tab = "runs";
+    state.status = "all";
+    selectItem(openRun.dataset.openRun);
+    renderChrome();
+    return;
+  }
+  const row = event.target.closest("[data-select]");
+  if (row) {
+    if (state.compareMode) selectComparisonItem(row.dataset.select);
+    else selectItem(row.dataset.select);
+  }
+});
+
+document.addEventListener("change", (event) => {
+  const target = event.target.closest("[data-candidate-target]");
+  if (!target) return;
+  state.candidateTargetId = target.value;
+  updateUrl();
+  renderInspector();
+});
+
+elements.search.addEventListener("input", () => {
+  state.query = elements.search.value;
+  renderRows();
+  updateUrl();
+});
+
+elements.refresh.addEventListener("click", () => void refresh());
+
+document.addEventListener("keydown", (event) => {
+  const typing = ["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement?.tagName);
+  if (event.key === "/" && !typing) {
+    event.preventDefault();
+    elements.search.focus();
+    return;
+  }
+  if (event.key === "Escape") {
+    if (typing) elements.search.blur();
+    else if (state.overlay) {
+      state.overlay = null;
+      renderInspector();
+    } else if (state.compareMode) setCompareMode(false);
+    return;
+  }
+  if (!typing && event.key.toLowerCase() === "r") {
+    event.preventDefault();
+    void refresh();
+    return;
+  }
+  if (!typing && ["j", "k"].includes(event.key.toLowerCase())) {
+    event.preventDefault();
+    const items = visibleItems();
+    if (!items.length) return;
+    const referenceId = state.compareMode ? state.compareIds.at(-1) : state.selectedId;
+    const current = items.findIndex((item) => item.id === referenceId);
+    const offset = event.key.toLowerCase() === "j" ? 1 : -1;
+    const next = current < 0 ? 0 : Math.max(0, Math.min(items.length - 1, current + offset));
+    if (state.compareMode) selectComparisonItem(items[next].id);
+    else selectItem(items[next].id);
+    document.querySelector(`[data-select="${CSS.escape(items[next].id)}"]`)?.scrollIntoView({
+      block: "nearest",
+    });
+  }
+});
+
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible") void refresh();
+});
+
+void refresh({ first: true });
+setInterval(() => {
+  if (document.visibilityState === "visible") void refresh();
+}, 5_000);

package/viewer/artifact-view.js

@@ -0,0 +1,48 @@
+import { escapeHtml } from "./format.js";
+
+export const renderArtifactPreview = (preview) => `
+  <header class="detail-header compact-header">
+    <button class="back-button" type="button" data-back-detail>← Evidence</button>
+    <div class="detail-title-row"><div><h2>${escapeHtml(
+      preview.path,
+    )}</h2><p class="detail-subtitle">${escapeHtml(
+      [preview.contentType, preview.size === null ? null : `${preview.size} bytes`]
+        .filter(Boolean)
+        .join(" · "),
+    )}</p></div></div>
+  </header>
+  <div class="detail-body">
+    ${
+      preview.viewable
+        ? `<pre class="artifact-preview">${escapeHtml(preview.text)}</pre>`
+        : `<div class="attention-banner">${escapeHtml(
+            preview.reason ?? "Artifact cannot be previewed.",
+          )}</div>`
+    }
+  </div>`;
+
+export const renderArtifactComparison = (comparison) => `
+  <header class="detail-header compact-header">
+    <button class="back-button" type="button" data-back-comparison>← Comparison</button>
+    <div class="detail-title-row"><div><h2>${escapeHtml(
+      comparison.path,
+    )}</h2><p class="detail-subtitle">Unified artifact diff · A → B</p></div></div>
+  </header>
+  <div class="detail-body">
+    ${
+      comparison.operations
+        ? `<pre class="artifact-diff">${comparison.operations
+            .flatMap((operation) =>
+              operation.lines.map(
+                (line) =>
+                  `<span class="diff-${escapeHtml(operation.kind)}"><b>${
+                    { added: "+", removed: "−", same: " " }[operation.kind]
+                  }</b>${escapeHtml(line)}</span>`,
+              ),
+            )
+            .join("\n")}</pre>`
+        : `<div class="attention-banner">${escapeHtml(
+            comparison.reason ?? "Artifact diff is unavailable.",
+          )}</div>`
+    }
+  </div>`;