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

package/viewer/format.js

@@ -0,0 +1,129 @@
+export const escapeHtml = (value) =>
+  String(value ?? "").replace(
+    /[&<>"']/g,
+    (character) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" })[character],
+  );
+
+export const percentage = (value) =>
+  typeof value === "number" ? `${Math.round(value * 100)}%` : "—";
+
+export const signedPercentage = (value) => {
+  if (typeof value !== "number") return "—";
+  const rounded = Math.round(value * 1_000) / 10;
+  return `${rounded > 0 ? "+" : ""}${rounded}%`;
+};
+
+export const duration = (milliseconds) => {
+  if (typeof milliseconds !== "number") return "—";
+  if (milliseconds < 1_000) return `${Math.round(milliseconds)}ms`;
+  if (milliseconds < 60_000) return `${(milliseconds / 1_000).toFixed(1)}s`;
+  return `${Math.floor(milliseconds / 60_000)}m ${Math.round((milliseconds % 60_000) / 1_000)}s`;
+};
+
+export const signedDuration = (milliseconds) => {
+  if (typeof milliseconds !== "number") return "—";
+  return `${milliseconds > 0 ? "+" : ""}${duration(milliseconds)}`;
+};
+
+export const compactNumber = (value) =>
+  new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 }).format(
+    value ?? 0,
+  );
+
+export const relativeTime = (value) => {
+  if (!value) return "unknown";
+  const elapsed = Date.now() - Date.parse(value);
+  if (!Number.isFinite(elapsed)) return "unknown";
+  const minutes = Math.floor(elapsed / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  return `${Math.floor(hours / 24)}d`;
+};
+
+export const fullDate = (value) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf())
+    ? "—"
+    : new Intl.DateTimeFormat(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      }).format(date);
+};
+
+export const statusLabel = (status) =>
+  ({
+    passed: "Passed",
+    failed: "Failed",
+    running: "Running",
+    aborted: "Aborted",
+    error: "Error",
+    promote: "Promote",
+    retain: "Retain",
+    reject: "Reject",
+    incomplete: "Incomplete",
+  })[status] ?? "Ungraded";
+
+export const badge = (status) =>
+  `<span class="status-badge ${escapeHtml(status)}">${escapeHtml(statusLabel(status))}</span>`;
+
+export const totalTokens = (usage = {}) =>
+  (usage.input ?? 0) + (usage.output ?? 0) + (usage.cacheRead ?? 0) + (usage.cacheCreation ?? 0);
+
+export const toneForDelta = (value, lowerIsBetter = false) => {
+  if (!value) return "metric-neutral";
+  const better = lowerIsBetter ? value < 0 : value > 0;
+  return better ? "metric-good" : "metric-bad";
+};
+
+export const finite = (value, digits = 2) =>
+  typeof value === "number" && Number.isFinite(value)
+    ? value.toLocaleString(undefined, { maximumFractionDigits: digits })
+    : "—";
+
+const bytes = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
+  if (Math.abs(value) < 1_024) return `${finite(value)} B`;
+  if (Math.abs(value) < 1_048_576) return `${finite(value / 1_024)} KiB`;
+  return `${finite(value / 1_048_576)} MiB`;
+};
+
+export const metricValue = (value, unit = "number") => {
+  if (unit === "milliseconds") return duration(value);
+  if (unit === "bytes") return bytes(value);
+  if (unit === "tokens") return typeof value === "number" ? `${compactNumber(value)} tokens` : "—";
+  if (unit === "usd") return typeof value === "number" ? `$${finite(value, 4)}` : "—";
+  if (unit === "ratio" || unit === "score") return percentage(value);
+  if (unit === "percent") return typeof value === "number" ? `${finite(value)}%` : "—";
+  return finite(value);
+};
+
+export const metricName = (name, label) => {
+  if (label) return label;
+  const tail =
+    String(name)
+      .replace(/^driver\./, "")
+      .split(".")
+      .at(-1) ?? String(name);
+  return tail
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[-_]+/g, " ")
+    .replace(/^./, (character) => character.toUpperCase());
+};
+
+export const detailLoading = (label) =>
+  `<div class="loading-card"><span></span><span></span><span></span><p>${escapeHtml(label)}</p></div>`;
+
+export const detailError = (message) => `<div class="error-card">${escapeHtml(message)}</div>`;
+
+export const detailEmpty = () => `
+  <div class="inspector-empty">
+    <span class="empty-glyph" aria-hidden="true">↗</span>
+    <h2>Select evidence to inspect</h2>
+    <p>Scores, assertions, traces, spend, and artifacts meet here.</p>
+  </div>`;

package/viewer/index.html

@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
+    <meta name="theme-color" content="#0b0d0f" />
+    <meta
+      name="description"
+      content="A local review cockpit for Lux evaluation runs and experiments."
+    />
+    <title>Lux Review</title>
+    <link rel="stylesheet" href="/assets/app.css" />
+    <script src="/assets/app.js" type="module"></script>
+  </head>
+  <body>
+    <div class="app-shell">
+      <aside class="sidebar">
+        <a class="brand" href="/" aria-label="Lux Review home">
+          <span class="brand-mark" aria-hidden="true">LX</span>
+          <span>
+            <strong>LUX</strong>
+            <small>REVIEW</small>
+          </span>
+        </a>
+
+        <nav class="primary-nav" aria-label="Evidence type">
+          <button class="nav-item is-active" type="button" data-tab="runs">
+            <span class="nav-glyph" aria-hidden="true">R</span>
+            <span>Runs</span>
+            <span class="nav-count" data-count="runs">0</span>
+          </button>
+          <button class="nav-item" type="button" data-tab="suites">
+            <span class="nav-glyph" aria-hidden="true">S</span>
+            <span>Suites</span>
+            <span class="nav-count" data-count="suites">0</span>
+          </button>
+          <button class="nav-item" type="button" data-tab="experiments">
+            <span class="nav-glyph" aria-hidden="true">E</span>
+            <span>Experiments</span>
+            <span class="nav-count" data-count="experiments">0</span>
+          </button>
+        </nav>
+
+        <div class="sidebar-note">
+          <span class="pulse-dot" aria-hidden="true"></span>
+          <span>
+            <strong>Local evidence</strong>
+            <small>Read-only · auto-refreshing</small>
+          </span>
+        </div>
+
+        <div class="shortcut-card">
+          <p>Shortcuts</p>
+          <dl>
+            <div class="shortcut-row"><dt><kbd>/</kbd></dt><dd>Search</dd></div>
+            <div class="shortcut-row"><dt><kbd>J</kbd> <kbd>K</kbd></dt><dd>Move</dd></div>
+            <div class="shortcut-row"><dt><kbd>R</kbd></dt><dd>Refresh</dd></div>
+          </dl>
+        </div>
+      </aside>
+
+      <main>
+        <header class="topbar">
+          <div>
+            <span class="eyebrow">Evaluation evidence</span>
+            <h1>Evidence, at a glance.</h1>
+          </div>
+          <div class="topbar-actions">
+            <label class="search">
+              <span aria-hidden="true">⌕</span>
+              <input
+                id="search-input"
+                type="search"
+                placeholder="Search cases, drivers, campaigns…"
+                autocomplete="off"
+              />
+              <kbd>/</kbd>
+            </label>
+            <button class="icon-button" id="refresh-button" type="button" aria-label="Refresh data">
+              ↻
+            </button>
+          </div>
+        </header>
+
+        <section class="metrics" aria-label="Evidence summary">
+          <article>
+            <span>Graded pass rate</span>
+            <strong id="metric-pass-rate">—</strong>
+            <small id="metric-pass-note">No graded runs</small>
+          </article>
+          <article>
+            <span>Needs attention</span>
+            <strong id="metric-failures">0</strong>
+            <small>Failed or errored runs</small>
+          </article>
+          <article>
+            <span>Experiment activity</span>
+            <strong id="metric-experiments">0</strong>
+            <small id="metric-experiment-note">No campaigns yet</small>
+          </article>
+          <article>
+            <span>Last evidence</span>
+            <strong id="metric-recency">—</strong>
+            <small id="metric-refresh">Waiting for local data</small>
+          </article>
+        </section>
+
+        <section class="workspace">
+          <div class="collection-pane">
+            <div class="collection-toolbar">
+              <div>
+                <span class="eyebrow" id="collection-eyebrow">Individual evidence</span>
+                <h2 id="collection-title">Runs</h2>
+              </div>
+              <div class="collection-actions">
+                <span class="result-count" id="result-count">0 records</span>
+                <button class="compare-button" id="compare-button" type="button">Compare</button>
+              </div>
+            </div>
+            <div class="compare-tray" id="compare-tray" hidden></div>
+            <fieldset
+              class="status-filters"
+              id="status-filters"
+              aria-label="Filter by status"
+            ></fieldset>
+            <div class="collection-list" id="collection-list" aria-live="polite">
+              <div class="loading-card">
+                <span></span><span></span><span></span>
+                <p>Reading Lux evidence…</p>
+              </div>
+            </div>
+          </div>
+
+          <aside class="inspector" id="inspector" aria-label="Evidence detail">
+            <div class="inspector-empty">
+              <span class="empty-glyph" aria-hidden="true">↗</span>
+              <h2>Select evidence to inspect</h2>
+              <p>Scores, assertions, traces, spend, and artifacts meet here.</p>
+            </div>
+          </aside>
+        </section>
+
+        <footer>
+          <span id="runs-root">Local Lux run store</span>
+          <span id="connection-state"><i></i> Connected</span>
+        </footer>
+      </main>
+    </div>
+  </body>
+</html>