@crvouga/atlas 0.9.0 → 0.10.0

package/packages/visualizer/src/explorer/ExplorerIndex.tsx

@@ -0,0 +1,120 @@
+/**
+ * @module Project index
+ *
+ * The left index of a project without statecharts: its published spec kinds (when it has spec files), then every
+ * domain and spec its tests were recorded against, with a tally each. Choosing a domain or a spec filters the explorer.
+ */
+import type { StatusCounts } from '@crvouga/atlas/reports/evidence-types';
+import { Link } from '@tanstack/react-router';
+import { useMemo, useState } from 'react';
+
+import evidenceStyles from '../evidence/evidence.module.css';
+import { useEvidence } from '../evidence/evidence-context';
+import { StatusMark } from '../evidence/marks';
+import { SPEC_KINDS } from '../spec-kind';
+import { useTestCatalog } from './catalog';
+import styles from './explorer.module.css';
+import { patched, useExplorerSearch } from './navigate';
+import { values } from './search';
+
+/** Domains start open when the index has at most this many specs. */
+const OPEN_SPECS = 80;
+
+function statusOf(counts: StatusCounts) {
+  return counts.failed ? 'failed' : counts.running ? 'running' : counts.passed ? 'passed' : 'not-run';
+}
+
+/** A tally for an index row: failures in red, otherwise how many tests, quietly. */
+function Tally({ counts, tests }: { counts: StatusCounts; tests: number }) {
+  if (counts.failed) return <span className={evidenceStyles.tally} data-status="failed">{counts.failed} failed</span>;
+  if (counts.running) return <span className={evidenceStyles.tally} data-status="running">Running</span>;
+  return <span className={evidenceStyles.tally} data-status={counts.passed === tests ? 'passed' : 'not-run'}>{counts.passed === tests ? `${tests} passed` : `${counts.passed}/${tests}`}</span>;
+}
+
+function add(a: StatusCounts, b: StatusCounts): StatusCounts {
+  return { passed: a.passed + b.passed, failed: a.failed + b.failed, running: a.running + b.running, 'not-run': a['not-run'] + b['not-run'] };
+}
+
+/** The index beside the explorer. */
+export function ProjectIndex() {
+  const { files } = useEvidence();
+  const { model } = useTestCatalog();
+  const search = useExplorerSearch();
+  const kinds = SPEC_KINDS.filter((kind) => files.some(kind.accepts));
+  const domains = useMemo(() => {
+    const byDomain = new Map<string, { specs: NonNullable<typeof model>['facets']['specs'][number][]; counts: StatusCounts; tests: number }>();
+    for (const spec of model?.facets.specs ?? []) {
+      const domain = spec.domain || '(no domain)';
+      const entry = byDomain.get(domain) ?? { specs: [], counts: { passed: 0, failed: 0, running: 0, 'not-run': 0 }, tests: 0 };
+      entry.specs.push(spec);
+      entry.counts = add(entry.counts, spec.counts);
+      entry.tests += spec.tests;
+      byDomain.set(domain, entry);
+    }
+    return [...byDomain];
+  }, [model]);
+  const specCount = model?.facets.specs.length ?? 0;
+  const chosenSpecs = values(search.spec);
+  const chosenDomains = values(search.domain);
+  const [toggled, setToggled] = useState<ReadonlyMap<string, boolean>>(new Map());
+  const isOpen = (domain: string, specs: readonly { path: string }[]) => toggled.get(domain) ?? (specCount <= OPEN_SPECS || chosenDomains.includes(domain) || specs.some((spec) => chosenSpecs.includes(spec.path)));
+  const everything = !search.spec && !search.domain;
+  return (
+    <nav className={evidenceStyles.index} aria-label="Project specs">
+      {kinds.length > 0 && (
+        <>
+          <h2 className={styles.indexHeading}>Specs</h2>
+          <ul>
+            {kinds.map((kind) => (
+              <li key={kind.id}>
+                <Link className={evidenceStyles.indexRow} to="/specs/$kind" params={{ kind: kind.id }} search={{}}>{kind.label}</Link>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+      {domains.length > 0 && (
+        <section aria-label="Tests by spec">
+          <h2 className={styles.indexHeading}>Tests</h2>
+          <ul>
+            <li>
+              <Link className={evidenceStyles.indexRow} to="/" search={patched({ spec: undefined, domain: undefined, tab: undefined })} resetScroll={false} activeOptions={{ exact: true }} aria-current={everything ? 'page' : undefined}>
+                <span className={evidenceStyles.indexName}>All tests</span>
+                {model && <Tally counts={model.summary.counts} tests={model.summary.tests} />}
+              </Link>
+            </li>
+          </ul>
+          {domains.map(([domain, entry]) => {
+            const open = isOpen(domain, entry.specs);
+            return (
+              <div key={domain} className={styles.indexDomain}>
+                <div className={styles.indexDomainHead}>
+                  <button type="button" className={styles.indexToggle} aria-expanded={open} aria-label={`${open ? 'Collapse' : 'Expand'} ${domain}`} onClick={() => setToggled(new Map(toggled).set(domain, !open))}>
+                    <span className={styles.chevron} data-open={open || undefined} aria-hidden="true" />
+                  </button>
+                  <Link className={evidenceStyles.indexRow} to="/" search={patched({ domain, spec: undefined, tab: undefined })} resetScroll={false} activeOptions={{ exact: true }} aria-current={chosenDomains.length === 1 && chosenDomains[0] === domain && !search.spec ? 'page' : undefined}>
+                    <span className={evidenceStyles.indexName}><strong>{domain}</strong></span>
+                    <Tally counts={entry.counts} tests={entry.tests} />
+                  </Link>
+                </div>
+                {open && (
+                  <ul className={styles.indexSpecs}>
+                    {entry.specs.map((spec) => (
+                      <li key={spec.path}>
+                        <Link className={evidenceStyles.indexRow} to="/" search={patched({ spec: spec.path, domain: undefined, tab: undefined })} resetScroll={false} activeOptions={{ exact: true }} title={spec.path} aria-current={chosenSpecs.length === 1 && chosenSpecs[0] === spec.path ? 'page' : undefined}>
+                          <StatusMark status={statusOf(spec.counts)} size={14} />
+                          <span className={evidenceStyles.indexName}>{spec.title}</span>
+                          <Tally counts={spec.counts} tests={spec.tests} />
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            );
+          })}
+        </section>
+      )}
+    </nav>
+  );
+}

package/packages/visualizer/src/explorer/RunsView.tsx

@@ -0,0 +1,164 @@
+/**
+ * @module Runs view
+ *
+ * The CI runs that produced the report, newest first: when, on which branch and commit, which environments, how many
+ * tests and how they went, how long it took, and a link to the run. Opening one lists every test it ran, filterable,
+ * with a way to show exactly those tests in the explorer.
+ */
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import { formatMs, type RunResult, type RunSummary } from '@crvouga/atlas/reports/test-catalog';
+import { Link } from '@tanstack/react-router';
+import { useMemo, useState } from 'react';
+
+import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
+import { Meter, StatusMark } from '../evidence/marks';
+import { useRunDetail, useRunList } from './catalog';
+import styles from './explorer.module.css';
+import { patched, useExplorerSearch } from './navigate';
+import { runName } from './parts';
+
+const RUN_ROWS = 50;
+const RESULT_ROWS = 200;
+
+/** The Runs tab: the run list, or the run opened in it. */
+export function RunsView() {
+  const search = useExplorerSearch();
+  return search.openRun ? <RunDetailView runKey={search.openRun} /> : <RunTable />;
+}
+
+function Counts({ run }: { run: RunSummary }) {
+  return (
+    <span className={styles.runCounts}>
+      {run.counts.failed > 0 && <strong>{run.counts.failed} failed</strong>}
+      <span>{run.counts.passed} passed</span>
+      {run.counts['not-run'] > 0 && <span>{run.counts['not-run']} not run</span>}
+      {run.counts.running > 0 && <span data-status="running">{run.counts.running} running</span>}
+    </span>
+  );
+}
+
+function RunTable() {
+  const runs = useRunList();
+  const now = useNow();
+  const [shown, setShown] = useState(RUN_ROWS);
+  if (runs.isPending) return <p className={styles.quiet} role="status">Reading the runs…</p>;
+  if (runs.isError) return <p className={styles.notice} role="alert">The runs could not be read. {runs.error.message}</p>;
+  const list = runs.data.runs;
+  if (!list.length) return <p className={styles.quiet}>No runs recorded yet.</p>;
+  return (
+    <section className={styles.runs} aria-label="Runs">
+      <p className={styles.showing}>{runs.data.total > list.length ? `The newest ${list.length} of ${plural(runs.data.total, 'run', 'runs')}` : plural(list.length, 'run', 'runs')}</p>
+      <div className={styles.tableScroll}>
+        <table className={styles.table} data-runs>
+          <thead>
+            <tr><th scope="col">Ended</th><th scope="col">Branch</th><th scope="col">Commit</th><th scope="col">Environments</th><th scope="col">Tests</th><th scope="col">Outcomes</th><th scope="col">Span</th><th scope="col"><span className="sr-only">CI run</span></th></tr>
+          </thead>
+          <tbody>
+            {list.slice(0, shown).map((run) => (
+              <tr key={run.key} data-status={run.counts.failed ? 'failed' : 'passed'}>
+                <td title={exactTime(run.endedAtMs)}><Link to="/" search={patched({ openRun: run.key })} resetScroll={false} activeOptions={{ exact: true }} aria-label={`Open run ${runName(run.key)}`}>{ago(run.endedAtMs, now)}</Link></td>
+                <td className={styles.ellipsis} title={run.branch ?? ''}>{run.branch ?? '—'}</td>
+                <td><code>{shortSha(run.sha) ?? '—'}</code></td>
+                <td>{run.environments.map((env) => environmentLabel(env)).join(', ') || '—'}</td>
+                <td className={styles.num}>{run.tests}</td>
+                <td><span className={styles.runMeter}><Meter counts={run.counts} /></span><Counts run={run} /></td>
+                <td className={styles.num}>{formatMs(run.spanMs)}</td>
+                <td>{run.runUrl ? <a href={run.runUrl} target="_blank" rel="noreferrer">CI run</a> : null}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {list.length > shown && <button type="button" className={styles.link} onClick={() => setShown(shown + RUN_ROWS)}>Show more ({list.length - shown} more)</button>}
+    </section>
+  );
+}
+
+const RESULT_FILTERS = [{ id: '', label: 'All' }, { id: 'failed', label: 'Failed' }, { id: 'passed', label: 'Passed' }, { id: 'not-run', label: 'Not run' }] as const;
+
+function RunDetailView({ runKey }: { runKey: string }) {
+  const detail = useRunDetail(runKey);
+  const now = useNow();
+  const [status, setStatus] = useState('');
+  const [words, setWords] = useState('');
+  const [shown, setShown] = useState(RESULT_ROWS);
+  const results = detail.data?.results ?? [];
+  const filtered = useMemo(() => {
+    const terms = words.toLowerCase().split(/\s+/).filter(Boolean);
+    return results.filter((result) => (!status || result.status === status) && terms.every((term) => `${result.title}\n${result.specPath ?? ''}\n${result.environment ?? ''}\n${result.producer}`.toLowerCase().includes(term)));
+  }, [results, status, words]);
+  const bySpec = useMemo(() => {
+    const groups = new Map<string, RunResult[]>();
+    for (const result of filtered.slice(0, shown)) {
+      const key = result.specPath ?? '';
+      const group = groups.get(key);
+      if (group) group.push(result);
+      else groups.set(key, [result]);
+    }
+    return [...groups];
+  }, [filtered, shown]);
+  const back = <Link to="/" search={patched({ openRun: undefined })} resetScroll={false} activeOptions={{ exact: true }} className={styles.back}><span aria-hidden="true">←</span> All runs</Link>;
+  if (detail.isPending) return <>{back}<p className={styles.quiet} role="status">Reading the run…</p></>;
+  if (detail.isError) return <>{back}<p className={styles.notice} role="alert">The run could not be read. {detail.error.message}</p></>;
+  if (!detail.data) return <>{back}<p className={styles.notice}>That run is not in the report any more.</p></>;
+  const { run } = detail.data;
+  return (
+    <section className={styles.runs} aria-label={`Run ${runName(run.key)}`}>
+      {back}
+      <h2 className={styles.runTitle}>Run {runName(run.key)}</h2>
+      <p className={styles.runMeta}>
+        {run.branch && <span>{run.branch}</span>}
+        {run.sha && <code>{shortSha(run.sha)}</code>}
+        <span title={exactTime(run.endedAtMs)}>ended {ago(run.endedAtMs, now)}</span>
+        <span>took {formatMs(run.spanMs)}</span>
+        {run.environments.length > 0 && <span>{run.environments.map((env) => environmentLabel(env)).join(', ')}</span>}
+        <span>{run.producers.join(', ')}</span>
+        {run.totalDurationMs !== null && <span>{formatMs(run.totalDurationMs)} of test time</span>}
+      </p>
+      <div className={styles.runSummary}>
+        <span className={styles.runMeter}><Meter counts={run.counts} /></span>
+        <span>{plural(run.tests, 'test', 'tests')}</span>
+        <Counts run={run} />
+      </div>
+      <p className={styles.actionsLine}>
+        <Link className={styles.primary} to="/" search={patched({ tab: undefined, openRun: undefined, inRun: run.key, test: undefined })} resetScroll={false} activeOptions={{ exact: true }}>Show these tests in the explorer</Link>
+        {run.runUrl && <a href={run.runUrl} target="_blank" rel="noreferrer">Open the CI run</a>}
+      </p>
+      <div className={styles.searchRow}>
+        <input type="search" className={styles.searchBox} aria-label="Search this run" placeholder="Search this run…" value={words} onChange={(event) => setWords(event.target.value)} />
+      </div>
+      <div className={styles.segments} role="group" aria-label="Result status">
+        {RESULT_FILTERS.map((filter) => (
+          <button key={filter.id || 'all'} type="button" aria-pressed={status === filter.id} data-status={filter.id || undefined} onClick={() => setStatus(filter.id)}>
+            {filter.label} <span>{filter.id ? results.filter((result) => result.status === filter.id).length : results.length}</span>
+          </button>
+        ))}
+      </div>
+      {!filtered.length && <p className={styles.quiet}>No result matches.</p>}
+      {bySpec.map(([spec, list]) => (
+        <section key={spec} className={styles.group} data-open aria-label={spec || 'No spec'}>
+          <div className={styles.groupHead} data-static>
+            <span className={styles.groupName}><code>{spec || 'No spec'}</code></span>
+            <span className={styles.groupTally}>{plural(list.length, 'result', 'results')}</span>
+          </div>
+          <ul className={styles.rows}>
+            {list.map((result) => (
+              <li key={`${result.key}|${result.environment}|${result.producer}|${result.layer}`} className={styles.row} data-status={result.status}>
+                <Link to="/" search={patched({ tab: undefined, openRun: undefined, test: result.key })} resetScroll={false} activeOptions={{ exact: true }} className={styles.rowLink}>
+                  <StatusMark status={result.status} size={14} />
+                  <span className={styles.rowMain}>
+                    <span className={styles.rowTitle}>{result.title}</span>
+                    <span className={styles.rowMeta}><span>{environmentLabel(result.environment)}</span><span>{result.producer}</span><span>{statusWord(result.status)}</span></span>
+                    {result.status === 'failed' && result.detail && <span className={styles.rowError}>{result.detail.split('\n')[0]}</span>}
+                  </span>
+                  <span className={styles.columns} data-one><span>{formatMs(result.durationMs)}</span></span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+      {filtered.length > shown && <button type="button" className={styles.link} onClick={() => setShown(shown + RESULT_ROWS)}>Show more ({filtered.length - shown} more)</button>}
+    </section>
+  );
+}

package/packages/visualizer/src/explorer/TestDetail.tsx

@@ -0,0 +1,214 @@
+/**
+ * @module Test detail
+ *
+ * One test, opened beside the list: what it is (spec, domain, id), its current result in every environment, how it has
+ * gone (pass rate, flips, durations, a duration trend and a strip of past outcomes), every recorded result, its tags and
+ * labels, and what its current result carries (steps, screenshots, video, traces, the recording) through the same
+ * evidence views as a spec page.
+ */
+import type { CheckSlot } from '@crvouga/atlas/reports/evidence-view';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import { formatMs, type TestResultEntry, type TestSummary } from '@crvouga/atlas/reports/test-catalog';
+import { Link } from '@tanstack/react-router';
+import { lazy, Suspense, useState } from 'react';
+
+import { CheckDetail, type CheckSelection } from '../evidence/check-detail';
+import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
+import { StatusMark } from '../evidence/marks';
+import { useTestHistory } from './catalog';
+import styles from './explorer.module.css';
+import { Badges } from './parts';
+import { patched } from './navigate';
+
+const RecordingPage = lazy(() => import('../evidence/recording-page').then((module) => ({ default: module.RecordingPage })));
+
+/** Results the history table shows before "Show more". */
+const HISTORY_ROWS = 20;
+
+function percent(rate: number | null): string {
+  return rate === null ? '—' : `${Math.round(rate * 100)}%`;
+}
+
+/** The open test. `slot` is the report's check for it, when the page holds one, for its evidence. */
+export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot | undefined }) {
+  const now = useNow();
+  const history = useTestHistory(test.key);
+  const [selection, setSelection] = useState<CheckSelection>({});
+  const [recording, setRecording] = useState(false);
+  const [moment, setMoment] = useState<number | null>(null);
+  const [rows, setRows] = useState(HISTORY_ROWS);
+  const entries = history.data?.history ?? [];
+  const stats = test.stats;
+  const d = stats.durations;
+
+  if (recording && slot) {
+    return (
+      <Suspense fallback={<p className={styles.quiet} role="status">Loading the recording…</p>}>
+        <RecordingPage slot={slot} layerId={selection.layer} label={test.title} back="Test detail" moment={moment} onMoment={setMoment} onClose={() => setRecording(false)} />
+      </Suspense>
+    );
+  }
+
+  return (
+    <article className={styles.detail} aria-label={test.title}>
+      <div className={styles.detailTop}>
+        <Link to="/" search={patched({ test: undefined })} resetScroll={false} activeOptions={{ exact: true }} className={styles.close} aria-label="Close the test">×</Link>
+      </div>
+      <header className={styles.detailHead}>
+        {test.spec && (
+          <p className={styles.detailSpec}>
+            {test.spec.domain && <Link to="/" search={patched({ domain: test.spec.domain, spec: undefined })} resetScroll={false} activeOptions={{ exact: true }}>{test.spec.domain}</Link>}
+            <Link to="/" search={patched({ spec: test.spec.path, domain: undefined })} resetScroll={false} activeOptions={{ exact: true }}>{test.spec.title}</Link>
+          </p>
+        )}
+        <h2 className={styles.detailTitle}>{test.title}</h2>
+        <p className={styles.detailStatus}>
+          <StatusMark status={test.status} />
+          <strong data-status={test.status}>{statusWord(test.status)}</strong>
+          {stats.flaky && <span className={styles.flaky} title={stats.flakyReason}>Flaky: {stats.flakyReason}</span>}
+          <Badges test={test} />
+        </p>
+        {test.spec && <code className={styles.mono}>{test.spec.path}</code>}
+        <code className={styles.mono} title="Check id">{test.id}</code>
+      </header>
+
+      <section className={styles.detailBlock} aria-label="Current results">
+        <h3 className={styles.label}>Current result per environment</h3>
+        {test.outcomes.length === 0 ? <p className={styles.quiet}>No completed result recorded yet.</p> : (
+          <div className={styles.tableScroll}>
+            <table className={styles.table}>
+              <thead><tr><th scope="col">Environment</th><th scope="col">Producer</th><th scope="col">Status</th><th scope="col">Duration</th><th scope="col">Branch</th><th scope="col">Commit</th><th scope="col">Recorded</th><th scope="col"><span className="sr-only">Run</span></th></tr></thead>
+              <tbody>
+                {test.outcomes.map((outcome) => (
+                  <tr key={`${outcome.layer}|${outcome.producer}|${outcome.environment}|${JSON.stringify(outcome.parameters)}`} data-status={outcome.status}>
+                    <td>{environmentLabel(outcome.environment)}{Object.entries(outcome.parameters).map(([name, value]) => <span key={name} className={styles.param}> {name}: {value}</span>)}</td>
+                    <td>{outcome.producer}</td>
+                    <td><span className={styles.cellStatus}><StatusMark status={outcome.status} size={12} />{statusWord(outcome.status)}</span></td>
+                    <td className={styles.num}>{formatMs(outcome.durationMs)}</td>
+                    <td className={styles.ellipsis} title={outcome.branch ?? ''}>{outcome.branch ?? '—'}</td>
+                    <td><code>{shortSha(outcome.sha) ?? '—'}</code></td>
+                    <td title={exactTime(outcome.at)}>{ago(outcome.at, now)}</td>
+                    <td>{outcome.runUrl ? <a href={outcome.runUrl} target="_blank" rel="noreferrer">CI run</a> : null}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+
+      <section className={styles.detailBlock} aria-label="Statistics">
+        <h3 className={styles.label}>How it has gone</h3>
+        <dl className={styles.stats}>
+          <div><dt>Pass rate</dt><dd>{percent(stats.passRate)}</dd></div>
+          <div><dt>Results</dt><dd>{stats.results} <span>({stats.passed} passed{stats.failed ? `, ${stats.failed} failed` : ''})</span></dd></div>
+          <div><dt>Runs</dt><dd>{stats.runs}</dd></div>
+          <div><dt>Flips</dt><dd>{stats.flips}</dd></div>
+          <div><dt>Average</dt><dd>{formatMs(d?.avgMs)}</dd></div>
+          <div><dt>p50</dt><dd>{formatMs(d?.p50Ms)}</dd></div>
+          <div><dt>p95</dt><dd>{formatMs(d?.p95Ms)}</dd></div>
+          <div><dt>Min – max</dt><dd>{d ? `${formatMs(d.minMs)} – ${formatMs(d.maxMs)}` : '—'}</dd></div>
+          <div><dt>Last</dt><dd>{formatMs(d?.lastMs)}</dd></div>
+          <div><dt>Last passed</dt><dd>{stats.lastPassedAtMs ? ago(stats.lastPassedAtMs, now) : '—'}</dd></div>
+          <div><dt>Last failed</dt><dd>{stats.lastFailedAtMs ? ago(stats.lastFailedAtMs, now) : '—'}</dd></div>
+          <div><dt>First seen</dt><dd>{stats.firstSeenMs ? ago(stats.firstSeenMs, now) : '—'}</dd></div>
+        </dl>
+        {stats.branches.length > 0 && <p className={styles.quiet}>Branches: {stats.branches.join(', ')}</p>}
+        {!d && <p className={styles.quiet}>No duration recorded. Producers can send <code>durationMs</code> with each check.</p>}
+        {entries.length > 1 && <Trend entries={entries} />}
+      </section>
+
+      {(test.tags.length > 0 || Object.keys(test.labels).length > 0) && (
+        <section className={styles.detailBlock} aria-label="Tags and labels">
+          <h3 className={styles.label}>Tags and labels</h3>
+          <p className={styles.tags}>
+            {test.tags.map((tag) => <Link key={tag} to="/" search={patched({ tag })} resetScroll={false} activeOptions={{ exact: true }}>{tag}</Link>)}
+            {Object.entries(test.labels).map(([name, value]) => <span key={name}>{name}: {value}</span>)}
+          </p>
+        </section>
+      )}
+
+      <section className={styles.detailBlock} aria-label="Evidence">
+        <h3 className={styles.label}>What the current result carries</h3>
+        {slot ? (
+          <CheckDetail
+            slot={slot}
+            layerId={selection.layer}
+            reads="steps"
+            select={(patch) => {
+              setSelection({ check: patch.check ?? slot.id, layer: patch.layer ?? undefined });
+              if (patch.view === 'recording') { setRecording(true); setMoment(null); }
+            }}
+          />
+        ) : <p className={styles.quiet}>The evidence of this result is not loaded in this page.</p>}
+      </section>
+
+      <section className={styles.detailBlock} aria-label="History">
+        <h3 className={styles.label}>History{entries.length ? ` · ${plural(entries.length, 'result', 'results')}` : ''}</h3>
+        {history.isPending && <p className={styles.quiet} role="status">Reading the history…</p>}
+        {history.isError && <p className={styles.notice} role="alert">The history could not be read. {history.error.message}</p>}
+        {entries.length > 0 && (
+          <div className={styles.tableScroll}>
+            <table className={styles.table}>
+              <thead><tr><th scope="col">Recorded</th><th scope="col">Environment</th><th scope="col">Status</th><th scope="col">Duration</th><th scope="col">Branch</th><th scope="col">Commit</th><th scope="col">Detail</th></tr></thead>
+              <tbody>
+                {entries.slice(0, rows).map((entry) => (
+                  <tr key={`${entry.layer}|${entry.kind}|${entry.producer}|${entry.environment}|${JSON.stringify(entry.parameters)}`} data-status={entry.status}>
+                    <td title={exactTime(entry.at)}>{entry.runUrl ? <a href={entry.runUrl} target="_blank" rel="noreferrer">{ago(entry.at, now)}</a> : ago(entry.at, now)}</td>
+                    <td>{environmentLabel(entry.environment)}</td>
+                    <td><span className={styles.cellStatus}><StatusMark status={entry.status} size={12} />{statusWord(entry.status)}</span></td>
+                    <td className={styles.num}>{formatMs(entry.durationMs)}</td>
+                    <td className={styles.ellipsis} title={entry.branch ?? ''}>{entry.branch ?? '—'}</td>
+                    <td><code>{shortSha(entry.sha) ?? '—'}</code></td>
+                    <td className={styles.detailCell} title={entry.detail}>{entry.detail.split('\n')[0]}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        {entries.length > rows && <button type="button" className={styles.link} onClick={() => setRows(rows + HISTORY_ROWS)}>Show more ({entries.length - rows} more)</button>}
+      </section>
+    </article>
+  );
+}
+
+/** The duration of each completed result over time, and a strip of every outcome, oldest on the left. */
+function Trend({ entries }: { entries: readonly TestResultEntry[] }) {
+  const oldest = [...entries].reverse();
+  const timed = oldest.filter((entry) => entry.durationMs !== null && (entry.status === 'passed' || entry.status === 'failed'));
+  const width = 320, height = 56, pad = 4;
+  const max = Math.max(1, ...timed.map((entry) => entry.durationMs!));
+  const x = (index: number) => (timed.length === 1 ? width / 2 : pad + (index * (width - 2 * pad)) / (timed.length - 1));
+  const y = (ms: number) => height - pad - (ms / max) * (height - 2 * pad);
+  const points = timed.map((entry, index) => `${x(index).toFixed(1)},${y(entry.durationMs!).toFixed(1)}`).join(' ');
+  return (
+    <div className={styles.trend}>
+      {timed.length > 1 && (
+        <figure className={styles.spark}>
+          <figcaption>Duration over the last {plural(timed.length, 'result', 'results')} · max {formatMs(max)}</figcaption>
+          <svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label={`Durations from ${formatMs(timed[0]!.durationMs)} to ${formatMs(timed.at(-1)!.durationMs)}`} preserveAspectRatio="none">
+            <line x1={pad} x2={width - pad} y1={height - pad} y2={height - pad} className={styles.sparkBase} />
+            <polyline points={points} className={styles.sparkLine} />
+            {timed.map((entry, index) => (
+              <circle key={index} cx={x(index)} cy={y(entry.durationMs!)} r={entry.status === 'failed' ? 3 : index === timed.length - 1 ? 2.5 : 0} data-status={entry.status}>
+                <title>{`${exactTime(entry.at)} · ${environmentLabel(entry.environment)} · ${statusWord(entry.status)} · ${formatMs(entry.durationMs)}`}</title>
+              </circle>
+            ))}
+            {/* Wide invisible targets, so a point is easy to hover. */}
+            {timed.map((entry, index) => (
+              <rect key={`hit${index}`} x={x(index) - (width / timed.length) / 2} y={0} width={width / timed.length} height={height} className={styles.sparkHit}>
+                <title>{`${exactTime(entry.at)} · ${environmentLabel(entry.environment)} · ${statusWord(entry.status)} · ${formatMs(entry.durationMs)}`}</title>
+              </rect>
+            ))}
+          </svg>
+        </figure>
+      )}
+      <div className={styles.strip} role="img" aria-label={`Outcomes, oldest first: ${oldest.map((entry) => statusWord(entry.status)).join(', ')}`}>
+        {oldest.map((entry, index) => (
+          <span key={index} data-status={entry.status} title={`${exactTime(entry.at)} · ${environmentLabel(entry.environment)} · ${statusWord(entry.status)}${entry.durationMs !== null ? ` · ${formatMs(entry.durationMs)}` : ''}`} />
+        ))}
+      </div>
+    </div>
+  );
+}