@crvouga/atlas 0.3.0 → 0.4.0

package/packages/visualizer/scripts/publish-data.ts

@@ -5,8 +5,7 @@ import { publishData } from '../vite/publish';
 
 /**
  * `pnpm publish-data`: the spec and the newest runs into `public/data` (or `ATLAS_OUT`), where
- * `pnpm build` picks them up. Roots come from `ATLAS_SPECS_ROOT` / `ATLAS_RUNS_ROOT` or
- * `ATLAS_FIXTURE`, as for the dev server.
+ * `pnpm build` picks them up. Roots come from `ATLAS_SPECS_ROOT` / `ATLAS_RUNS_ROOT`, as for the dev server.
  */
 try {
   const roots = resolveRoots();

package/packages/visualizer/src/components/Header.tsx

@@ -77,7 +77,7 @@ function SourcesButton() {
   return (
     <button type="button" className={styles.sources} data-filtered={off > 0 || undefined} onClick={() => setOpen(true)}>
       Sources
-      <span>{unavailable ? 'unavailable' : off > 0 ? `${off} off` : plural(layers.length, 'run', 'runs')}</span>
+      <span>{unavailable ? 'unavailable' : off > 0 ? `${off} off` : plural(layers.length, 'layer', 'layers')}</span>
     </button>
   );
 }

package/packages/visualizer/src/evidence/check-detail.tsx

@@ -1,5 +1,7 @@
 import { recordingPaths } from '@crvouga/atlas/reports/evidence-types';
 import { checkHistory, type CheckSlot, type HistoryEntry } from '@crvouga/atlas/reports/evidence-view';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import type { EvidenceResult } from '@crvouga/atlas/reports/layer-merge';
 import { flattenFrames } from '@crvouga/atlas/reports/frames';
 import type { ReportStep, RunReport } from '@crvouga/atlas/reports/report-types';
 import { useQuery } from '@tanstack/react-query';
@@ -34,15 +36,45 @@ export function useRecordedReport(entry: HistoryEntry | null, enabled = true) {
 }
 
 /** One check in a list: its outcome at a glance, and everything recorded for it when opened. */
+const ENV_RANK = { passed: 0, 'not-run': 1, running: 2, failed: 3 } as const;
+
+/** One mark per client when the same check was recorded on more than one. */
+function environmentMarks(slot: CheckSlot) {
+  const seen = new Map<string, CheckSlot['status']>();
+  for (const outcome of slot.outcomes) {
+    const id = outcome.layer.environment ?? '';
+    const prior = seen.get(id);
+    if (prior === undefined || ENV_RANK[outcome.row.status] > ENV_RANK[prior]) seen.set(id, outcome.row.status);
+  }
+  if (seen.size < 2) return [];
+  return [...seen].map(([id, status]) => ({ id, status }));
+}
+
+function outcomeName(outcome: EvidenceResult) {
+  const environment = outcome.layer.environment ? environmentLabel(outcome.layer.environment) : '';
+  const parameters = Object.entries(outcome.parameters).map(([name, value]) => `${name}: ${value}`).join(', ');
+  return [environment, parameters].filter(Boolean).join(' · ') || outcome.layer.producer;
+}
+
 export function ResultRow({ label, slot, open, onToggle, children }: { label: string; slot: CheckSlot | null; open: boolean; onToggle: () => void; children: ReactNode }) {
   const now = useNow();
   const newest = slot?.outcomes[0];
+  const marks = slot ? environmentMarks(slot) : [];
   const failure = slot?.status === 'failed' ? slot.outcomes.find((outcome) => outcome.row.status === 'failed')?.row.detail.split('\n')[0] : '';
   return (
     <li className={styles.result} data-status={slot?.status ?? 'none'} data-open={open || undefined}>
       <button type="button" className={styles.resultHead} aria-expanded={open} onClick={onToggle}>
         <StatusMark status={slot?.status ?? 'none'} />
-        <span className={styles.resultName}>{label}</span>
+        <span className={styles.resultName}>
+          {label}
+          {marks.length > 0 && (
+            <span className={styles.envMarks}>
+              {marks.map((mark) => (
+                <span key={mark.id || 'unspecified'} data-status={mark.status}>{environmentLabel(mark.id || null)}</span>
+              ))}
+            </span>
+          )}
+        </span>
         {slot?.live && <span className={styles.liveTag}>Running now</span>}
         <span className={styles.resultAside}>
           {newest ? [duration(newest.row.durationMs), slot.live ? '' : ago(slot.latestAtMs, now)].filter(Boolean).join(' · ') : 'No result'}
@@ -185,11 +217,11 @@ export function CheckDetail({ slot, layerId, select, reads, written }: Props) {
   return (
     <div className={styles.detail}>
       {slot.outcomes.length > 1 && !earlier && (
-        <div className={styles.variants} role="group" aria-label="Parameter sets">
+        <div className={styles.variants} role="group" aria-label="Environments">
           {slot.outcomes.map((outcome, index) => (
             <button key={outcome.key} type="button" aria-pressed={index === variant} onClick={() => setVariant(index)}>
               <StatusMark status={outcome.row.status} size={12} />
-              {Object.entries(outcome.layer.parameters).map(([name, value]) => `${name}: ${value}`).join(', ') || outcome.layer.producer}
+              {outcomeName(outcome)}
             </button>
           ))}
         </div>

package/packages/visualizer/src/evidence/evidence.module.css

@@ -455,11 +455,31 @@
 }
 
 .resultName {
+  display: flex;
   flex: 1;
+  flex-direction: column;
   min-width: 0;
   font-weight: 500;
 }
 
+.envMarks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 2px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.envMarks span[data-status='passed'] {
+  color: var(--passed-ink);
+}
+
+.envMarks span[data-status='failed'] {
+  color: var(--failed-ink);
+}
+
 .result[data-status='none'] .resultName {
   color: var(--ink-3);
   font-weight: 400;

package/packages/visualizer/src/evidence/marks.tsx

@@ -1,5 +1,6 @@
 import type { BackendInfo, LayerHeader, StatusCounts } from '@crvouga/atlas/reports/evidence-types';
 import type { SpecStatus, SpecSummary } from '@crvouga/atlas/reports/evidence-view';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import { useState, type ReactNode } from 'react';
 
 import styles from './evidence.module.css';
@@ -89,6 +90,7 @@ export function Origin({ layer, backends, now }: { layer: LayerHeader; backends:
       {layer.live && <span className={styles.liveTag}>Running now</span>}
       <span>{backendLabel(backends, layer.backend)}</span>
       {layer.branch && <span>{layer.branch}</span>}
+      {layer.environment && <span>{environmentLabel(layer.environment)}</span>}
       {sha && <code>{sha}</code>}
       {layer.freshness === 'modified' && <span>with local changes</span>}
       {layer.freshness === 'unknown' && <span>origin not captured</span>}

package/packages/visualizer/src/evidence/overview.tsx

@@ -67,7 +67,7 @@ export function Overview({ kind }: { kind: SpecKind }) {
         </p>
       ))}
       {!evidence.ready && !evidence.unavailable && <p className={styles.aside} role="status">Loading recorded results…</p>}
-      {evidence.ready && evidence.pending > 0 && <p className={styles.aside} role="status">Reading {plural(evidence.pending, 'more run', 'more runs')}…</p>}
+      {evidence.ready && evidence.pending > 0 && <p className={styles.aside} role="status">Reading {plural(evidence.pending, 'more layer', 'more layers')}…</p>}
 
       {evidence.active.length > 0 && (
         <section className={styles.block}>
@@ -111,13 +111,13 @@ export function Overview({ kind }: { kind: SpecKind }) {
         <p className={styles.aside}>
           {evidence.layers.length === 0
             ? `Nothing has been recorded yet. Results appear here as a spec run finishes each test.`
-            : `None of the ${plural(evidence.layers.length, 'run', 'runs')} in the combined report checked a ${kind.one}.`}
+            : `None of the ${plural(evidence.layers.length, 'layer', 'layers')} in the combined report checked a ${kind.one}.`}
         </p>
       )}
 
       {evidence.ready && (
         <p className={styles.footLine}>
-          {plural(evidence.layers.length, 'run', 'runs')} from {evidence.backends.filter((backend) => backend.available).map((backend) => backendLabel(evidence.backends, backend.id)).join(' and ') || 'no report store'}.{' '}
+          {plural(evidence.layers.length, 'layer', 'layers')} from {evidence.backends.filter((backend) => backend.available).map((backend) => backendLabel(evidence.backends, backend.id)).join(' and ') || 'no report store'}.{' '}
           <button type="button" className={styles.link} onClick={() => setSourcesOpen(true)}>Choose sources</button>
           {empty > 0 && (
             <>

package/packages/visualizer/src/evidence/sources-panel.tsx

@@ -1,5 +1,6 @@
 import type { LayerHeader } from '@crvouga/atlas/reports/evidence-types';
-import { branchOf, contributes, sourceFacets, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
+import { ALL_SOURCES, branchOf, contributes, sourceFacets, sourceSelection, type SourceFacet, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useMemo } from 'react';
 
@@ -20,16 +21,23 @@ function counts(layer: LayerHeader) {
 }
 
 /** How many sources are switched off, for the button that opens the panel. */
-export function excludedCount(excluded: SourceSelection) {
-  return excluded.backends.length + excluded.branches.length + excluded.layers.length;
+export function excludedCount(excluded: Partial<SourceSelection>) {
+  const selection = sourceSelection(excluded);
+  return selection.backends.length + selection.branches.length + selection.versions.length + selection.environments.length + selection.layers.length;
+}
+
+function versionLabel(id: string) {
+  return id === 'unknown' ? 'Unknown version' : id.slice(0, 7);
 }
 
 /**
- * Where the combined report comes from. Every backend, branch and run contributes unless it is
- * switched off here, which is also how an earlier result is brought back into view.
+ * Where the combined report comes from. Every backend, environment, branch, version and layer
+ * contributes unless it is switched off here, which is also how an earlier result is brought back.
  */
 export function SourcesPanel() {
-  const { layers, backends, excluded, setExcluded, notices, retry } = useEvidence();
+  const evidence = useEvidence();
+  const { layers, backends, setExcluded, notices, retry } = evidence;
+  const excluded = sourceSelection(evidence.excluded);
   const open = useUiStore((s) => s.sourcesOpen);
   const setOpen = useUiStore((s) => s.setSourcesOpen);
   const now = useNow();
@@ -48,10 +56,10 @@ export function SourcesPanel() {
             </Dialog.Close>
           </div>
           <p className={styles.lead}>
-            {contributing} of {plural(layers.length, 'run', 'runs')} contribute. For each check the newest completed result is shown. Switch a source off to see what earlier runs recorded.
+            {contributing} of {plural(layers.length, 'layer', 'layers')} contribute. For each check and environment, the newest completed result is shown. A layer fills only the checks it ran, so the rest of the report stays in place. Switch a source off to see an earlier result.
           </p>
           {excludedCount(excluded) > 0 && (
-            <button type="button" className={styles.reset} onClick={() => setExcluded({ backends: [], branches: [], layers: [] })}>
+            <button type="button" className={styles.reset} onClick={() => setExcluded(ALL_SOURCES)}>
               Use every source
             </button>
           )}
@@ -71,42 +79,52 @@ export function SourcesPanel() {
                   <label className={styles.option}>
                     <input type="checkbox" checked={!excluded.backends.includes(backend.id)} onChange={() => setExcluded({ ...excluded, backends: toggled(excluded.backends, backend.id) })} />
                     <span className={styles.optionName}>{backend.label}</span>
-                    <span className={styles.optionMeta}>{backend.available ? plural(layerCount(backend.id), 'run', 'runs') : 'Unavailable'}</span>
+                    <span className={styles.optionMeta}>{backend.available ? plural(layerCount(backend.id), 'layer', 'layers') : 'Unavailable'}</span>
                   </label>
                 </li>
               ))}
             </ul>
           </section>
 
-          <section className={styles.group}>
-            <h3>Branches</h3>
-            {facets.branches.length === 0 && <p className={styles.empty}>No runs yet.</p>}
-            <ul>
-              {facets.branches.map((branch) => (
-                <li key={branch.id}>
-                  <label className={styles.option}>
-                    <input type="checkbox" checked={!excluded.branches.includes(branch.id)} onChange={() => setExcluded({ ...excluded, branches: toggled(excluded.branches, branch.id) })} />
-                    <span className={styles.optionName}>{branch.id}</span>
-                    <span className={styles.optionMeta}>
-                      {plural(branch.layers, 'run', 'runs')} · {ago(branch.latestAtMs, now)}
-                    </span>
-                  </label>
-                  {facets.branches.length > 1 && (
-                    <button type="button" className={styles.only} onClick={() => setExcluded({ ...excluded, branches: facets.branches.map((facet) => facet.id).filter((id) => id !== branch.id) })}>
-                      Only
-                    </button>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </section>
+          <FacetGroup
+            title="Environments"
+            facets={facets.environments.filter((facet) => facets.environments.length > 1 || facet.id !== 'unspecified')}
+            excluded={excluded.environments}
+            label={(id) => environmentLabel(id === 'unspecified' ? null : id)}
+            empty={null}
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, environments: toggled(excluded.environments, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, environments: facets.environments.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
+
+          <FacetGroup
+            title="Branches"
+            facets={facets.branches}
+            excluded={excluded.branches}
+            label={(id) => id}
+            empty="No layers yet."
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, branches: toggled(excluded.branches, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, branches: facets.branches.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
+
+          <FacetGroup
+            title="Versions"
+            facets={facets.versions}
+            excluded={excluded.versions}
+            label={versionLabel}
+            empty={null}
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, versions: toggled(excluded.versions, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, versions: facets.versions.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
 
           <section className={styles.group}>
-            <h3>Runs</h3>
+            <h3>Layers</h3>
             <ul>
-              <Bounded items={layers} size={40} more="Earlier runs">
+              <Bounded items={layers} size={40} more="Earlier layers">
                 {(layer) => {
-                  const off = excluded.backends.includes(layer.backend) || excluded.branches.includes(branchOf(layer));
+                  const off = !contributes(layer, { ...excluded, layers: [] });
                   return (
                     <li key={`${layer.backend}|${layer.id}`}>
                       <label className={styles.option} data-off={off || undefined}>
@@ -115,6 +133,7 @@ export function SourcesPanel() {
                           {layer.packageDir ?? layer.producer}
                           <span className={styles.run}>
                             {layer.live ? 'Running now' : <time title={exactTime(layer.recordedAtMs)}>{ago(layer.recordedAtMs, now)}</time>} · {branchOf(layer)}
+                            {layer.environment && <> · {environmentLabel(layer.environment)}</>}
                             {shortSha(layer.sha) && <> · <code>{shortSha(layer.sha)}</code></>}
                             {layer.freshness === 'modified' && ' · local changes'}
                           </span>
@@ -132,3 +151,38 @@ export function SourcesPanel() {
     </Dialog.Root>
   );
 }
+
+function FacetGroup({ title, facets, excluded, label, empty, now, onToggle, onOnly }: {
+  title: string;
+  facets: readonly SourceFacet[];
+  excluded: readonly string[];
+  label: (id: string) => string;
+  empty: string | null;
+  now: number;
+  onToggle: (id: string) => void;
+  onOnly: (id: string) => void;
+}) {
+  if (!facets.length && empty === null) return null;
+  return (
+    <section className={styles.group}>
+      <h3>{title}</h3>
+      {facets.length === 0 && <p className={styles.empty}>{empty}</p>}
+      <ul>
+        {facets.map((facet) => (
+          <li key={facet.id}>
+            <label className={styles.option}>
+              <input type="checkbox" checked={!excluded.includes(facet.id)} onChange={() => onToggle(facet.id)} />
+              <span className={styles.optionName} title={facet.id}>{label(facet.id)}</span>
+              <span className={styles.optionMeta}>
+                {plural(facet.layers, 'layer', 'layers')} · {ago(facet.latestAtMs, now)}
+              </span>
+            </label>
+            {facets.length > 1 && (
+              <button type="button" className={styles.only} onClick={() => onOnly(facet.id)}>Only</button>
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/packages/visualizer/src/state/ui-store.ts

@@ -11,7 +11,7 @@ type UiState = {
   issuesOpen: boolean;
   sourcesOpen: boolean;
   resultFilter: ResultFilter;
-  /** Backends, branches and layers left out of the combined report. */
+  /** Backends, branches, versions, environments and layers left out of the combined report. */
   excluded: SourceSelection;
   saveViewport: (chartId: string, viewport: Viewport) => void;
   setIssuesOpen: (open: boolean) => void;
@@ -38,7 +38,11 @@ export const useUiStore = create<UiState>()(
     {
       name: 'atlas-ui',
       storage: createJSONStorage(() => sessionStorage),
-      partialize: (s) => ({ viewports: s.viewports, excluded: s.excluded, resultFilter: s.resultFilter })
+      partialize: (s) => ({ viewports: s.viewports, excluded: s.excluded, resultFilter: s.resultFilter }),
+      merge: (persisted, current) => {
+        const saved = (persisted ?? {}) as Partial<UiState>;
+        return { ...current, ...saved, excluded: { ...ALL_SOURCES, ...saved.excluded } };
+      }
     }
   )
 );