rvlib-shipkit 0.38.1 → 1.0.1

package/src/serve/hub-app/test-view.tsx

@@ -0,0 +1,107 @@
+// ONE TEST FILE, on its own page, in the compact shape of a check page: its
+// path, the check that runs it, its unit and tier, the command that runs it
+// alone, then its last recorded runs against its budget. A declared slow
+// suite adds the case its declaration argued and the way back to the quick
+// tier.
+import { observer } from 'mobx-react-lite'
+import { durationTone, fmtMs } from './dur.ts'
+import type { HubSt } from './hub-st.ts'
+import type { Resource, SuiteFacts, TestFacts, TestRun } from './hub-types.ts'
+import { copy, PathCode, Row, Section } from './check-view.tsx'
+import { editorHref, repoPath } from './check-words.ts'
+import { stampWords, TimeAgo } from './time-ago.tsx'
+
+/** what a file's standing means, in one line under its title */
+export function standingWords(t: TestFacts): string {
+    if (t.standing === 'runs') return t.tier === 'full' ? `runs in ${t.checkId} on the release path only: it is declared slow` : `runs in ${t.checkId} on every gate`
+    if (t.standing === 'ignored') return `ignored on purpose: the ignore pattern ${t.why} keeps it out of ${t.checkId}`
+    if (t.standing === 'orphan') return `runs in no check: ${t.why}`
+    if (t.standing === 'opaque') return t.why ?? 'which check runs it cannot be read'
+    return `declared slow in ${t.suite?.configPath ?? 'repo.config.ts'}, but no such file is on disk`
+}
+
+/** the to fix verdict, as the runs page tab words it */
+export function fixWords(t: TestFacts): string | null {
+    if (t.toFix == null) return null
+    return t.toFix.red ? 'its last run failed' : `its last quick run broke the ${fmtMs(t.budgetMs)} budget`
+}
+
+/** the command to copy: `cd` into the unit first when it has a dir of its own */
+export const testCommand = (t: TestFacts): string => (t.cmd.cwd === '' ? t.cmd.line : `cd ${t.cmd.cwd} && ${t.cmd.line}`)
+
+/** over its budget: only a quick run of a file the quick tier holds to one */
+const overBudget = (r: TestRun, slow: boolean): boolean => !slow && r.tier === 'quick' && r.ms > r.budgetMs
+
+const dot = (r: TestRun, slow: boolean): string => (r.status === 'fail' ? 'red' : overBudget(r, slow) ? 'warn' : 'ok')
+
+const RunLine = ({ app, r, slow }: { app: HubSt; r: TestRun; slow: boolean }) => (
+    <div className={`rline rtrun${r.status === 'fail' ? ' red' : ''}`} title={stampWords(r.at)}>
+        <TimeAgo clock={app.clock} at={r.at} />
+        <span className="rid"><i className={`rdot ${dot(r, slow)}`} />{r.status === 'fail' ? 'failed' : 'passed'}</span>
+        <span className={`rnum ${overBudget(r, slow) ? 'bad' : durationTone(r.ms) ?? ''}`}>{fmtMs(r.ms)}</span>
+        <span className="rtag">{r.tier === 'full' ? 'full tier' : 'quick tier'}</span>
+    </div>
+)
+
+const Declaration = observer(({ app, s }: { app: HubSt; s: SuiteFacts }) => {
+    const where = s.unit == null ? 'tests.slow' : `units['${s.unit}'].tests.slow`
+    return (
+        <Section title="declared slow" help="the quick tier leaves it out: its declaration says what it catches and why it cannot be fast">
+            <div className="cfacts">
+                <Row k="declared in"><code className="cpath">{s.configPath}</code> <code className="cpath">{where}</code></Row>
+                <Row k="back">
+                    {s.unit == null
+                        ? <span className="cblock">
+                            <button disabled={app.checks.gateBusy} onClick={() => void app.checks.removeSlow(s.file)}>back to the quick tier</button>
+                            {app.checks.gateNote === '' ? null : <span className="note"> {app.checks.gateNote}</span>}
+                        </span>
+                        // the managed block owns the ROOT tests declaration
+                        // only, so a unit's own entry is edited where
+                        // it lives rather than silently written somewhere else
+                        : <span className="cblock dim">edit <code className="cpath">{where}</code> in <code className="cpath">{s.configPath}</code></span>}
+                </Row>
+                <Row k="catches" wide>{s.catches}</Row>
+                <Row k="why not fast" wide>{s.whyNotFast}</Row>
+            </div>
+        </Section>
+    )
+})
+
+export const TestCard = observer(({ app, id }: { app: HubSt; id: string }) => {
+    const i: Resource | null = app.cols.find('tests', id)
+    if (i == null || i.test == null) return <div className="ph">this test file is gone: the repo moved on</div>
+    const t = i.test
+    const fix = fixWords(t)
+    const cmd = testCommand(t)
+    return (
+        <div className="colcard checkcard">
+            <div className="chead">
+                <span className="tid">test</span>
+                <h3 className={`ctitle tl ${i.state}`}>{t.inUnit}</h3>
+            </div>
+            <div className="usays">{standingWords(t)}{fix == null ? null : <span className={t.toFix?.red === true ? 'tl red' : 'tl warn'}>, to fix: {fix}</span>}</div>
+            <div className="ccmd">
+                <Row k="command" help="runs this file alone, from its unit's dir, with the unit's own preload and bunfig" wide>
+                    <code className="cargv" title={cmd}>{cmd}</code>
+                    <button className="ccopy" title="copy the command" onClick={() => copy(cmd)}>copy</button>
+                </Row>
+            </div>
+            <div className="cfacts">
+                <Row k="file">{t.standing === 'missing' ? <code className="cpath">{t.file}</code> : <PathCode p={repoPath(t.file, app.root)} href={editorHref(app.root, t.file)} />}</Row>
+                <Row k="check" help="the test check whose `bun test` reaches it: `test` for the root, `test:<unit>` for a unit">
+                    {t.checkId == null ? <span className="tl red">none</span> : <a href="#" onClick={(e) => { e.preventDefault(); app.timeline.openCheck(t.checkId!) }}><code className="cpath">{t.checkId}</code></a>}
+                </Row>
+                <Row k="unit" help="the unit whose dir holds it: the root takes every file no unit holds">{t.unit}{t.unitDir === '' ? null : <span className="dim"> ({t.unitDir})</span>}</Row>
+                <Row k="tier" help="quick = every gate. release only = declared slow, so `shipkit ci --full` and the release path run it">{t.tier === 'full' ? 'release only' : 'quick'}</Row>
+                {/* a budget is a limit, so it is never coloured like a measurement */}
+                <Row k="budget" help="what one file may cost in the quick tier"><span className="dnum dim">{fmtMs(t.budgetMs)}</span> per file</Row>
+            </div>
+            <Section title="last runs" help="the suite record: every run of this file the suite runner timed, newest first">
+                {t.runs.length === 0
+                    ? <div className="dim">no run recorded yet: the next run of {t.checkId ?? 'a test check'} records one</div>
+                    : <div className="rlist">{t.runs.map((r, n) => <RunLine key={`${r.at}:${n}`} app={app} r={r} slow={t.suite != null} />)}</div>}
+            </Section>
+            {t.suite == null ? null : <Declaration app={app} s={t.suite} />}
+        </div>
+    )
+})

package/src/serve/hub-app/tests-svc.ts

@@ -0,0 +1,62 @@
+// The pages behind the test groups of the tree: what the server shaped from
+// the test files and the two records (collections/test-time.ts), one view per
+// page. Fetched when a page opens, never on the ten second poll, and kept per
+// page so going back shows the last answer while the fresh one loads.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { TestCheckView, TestsRootView } from '../../collections/test-time.ts'
+import { testId } from '../../collections/collection-types.ts'
+import type { HubSt } from './hub-st.ts'
+
+export type { TestCheckView, TestsRootView }
+
+/** the key of a page: '' is the `tests` page, a check id its own */
+const keyOf = (check: string | null): string => check ?? ''
+
+export class TestsSvc {
+    views = new Map<string, TestsRootView | TestCheckView>()
+    errors = new Map<string, string>()
+    loading = new Set<string>()
+
+    constructor(private st: HubSt) {
+        makeAutoObservable<this, 'st'>(this, { st: false, views: observableRef })
+    }
+
+    root(): TestsRootView | null {
+        return (this.views.get('') as TestsRootView | undefined) ?? null
+    }
+    check(id: string): TestCheckView | null {
+        return (this.views.get(id) as TestCheckView | undefined) ?? null
+    }
+    error(check: string | null): string {
+        return this.errors.get(keyOf(check)) ?? ''
+    }
+    isLoading(check: string | null): boolean {
+        return this.loading.has(keyOf(check))
+    }
+
+    open(check: string | null): void {
+        this.st.showTests(check)
+    }
+    openFile(file: string): void {
+        this.st.cols.select('tests', testId(file))
+    }
+
+    async load(check: string | null): Promise<void> {
+        const k = keyOf(check)
+        runInAction(() => { this.loading.add(k) })
+        try {
+            const r = await fetch(check == null ? '/api/tests.json' : `/api/tests.json?check=${encodeURIComponent(check)}`)
+            if (!r.ok) throw new Error(await r.text())
+            const v = (await r.json()) as TestsRootView | TestCheckView
+            runInAction(() => {
+                // a new map, so the ref annotation sees the swap
+                this.views = new Map(this.views).set(k, v)
+                this.errors.delete(k)
+            })
+        } catch (e) {
+            runInAction(() => { this.errors.set(k, (e as Error).message) })
+        } finally {
+            runInAction(() => { this.loading.delete(k) })
+        }
+    }
+}

package/src/serve/hub-app/tests-view.tsx

@@ -0,0 +1,238 @@
+// THE PAGES OF THE TEST GROUPS: `tests` itself, one line per test check, and
+// each test check (`test`, `test:<unit>`), which answers one question: where
+// does its time go. The check's own facts (its sentence, its command, its
+// last wall time and its trend) are the check page's pieces, read from the
+// resource the tree already holds. The breakdown is the one fetch the page
+// makes (tests-svc.ts), shaped on the server (collections/test-time.ts).
+import { observer } from 'mobx-react-lite'
+import type { FailingFile, FileTime, LastRun, Phases, Shape, TestCheckRow, TestCheckView, TestsRootView } from '../../collections/test-time.ts'
+import { CommandLine, LastRunValue, Row, Says, Section, Timings } from './check-view.tsx'
+import { durationTone, fmtMs } from './dur.ts'
+import type { HubSt } from './hub-st.ts'
+import { TimeAgo } from './time-ago.tsx'
+
+const pct = (n: number | null): string => (n == null ? '' : `${Math.round(n * 100)}%`)
+
+/** a file's duration, coloured against its budget: over it is red whatever
+ *  the table says, the way its tree row reads */
+const fileTone = (f: FileTime): string => (f.ms == null ? '' : f.over ? 'bad' : durationTone(f.ms) ?? '')
+
+const TREND_GLYPH = { up: '↑', down: '↓', flat: '→' } as const
+const TREND_TONE = { up: 'bad', down: 'fast', flat: 'dim' } as const
+
+export const SHAPE_WORD: Record<Shape, string> = { tail: 'long tail', volume: 'volume', overhead: 'overhead' }
+
+const FileLink = ({ app, file, name }: { app: HubSt; file: string; name: string }) => (
+    <a href="#" title={`${file}: its own page`} onClick={(e) => { e.preventDefault(); e.stopPropagation(); app.tests.openFile(file) }}>{name}</a>
+)
+
+// ── failing now ─────────────────────────────────────────────────────────
+
+const Failing = observer(({ app, rows, showCheck }: { app: HubSt; rows: FailingFile[]; showCheck: boolean }) => (
+    <Section title={`failing now (${rows.length})`} help="the files whose last recorded run failed: the same verdict that colours them red in the tree and lists them on the runs page tab">
+        {rows.length === 0
+            ? <div className="dim">nothing: every file passed its last recorded run</div>
+            : <div className="rlist">
+                {rows.map((r) => (
+                    <div key={r.file} className="tfail" onClick={() => app.tests.openFile(r.file)}>
+                        <div className={`rline tfline red${showCheck ? ' wc' : ''}`}>
+                            {showCheck ? <span className="rtag" title="the check that runs it">{r.check ?? 'no check'}</span> : null}
+                            <span className="rwhat" title={r.file}>{r.inUnit}</span>
+                            <span className="rnum">{fmtMs(r.ms)}</span>
+                            {r.at == null ? <span /> : <TimeAgo clock={app.clock} at={r.at} />}
+                        </div>
+                        <div className={r.failLine == null ? 'tfwhy dim' : 'tfwhy'}>{r.failLine ?? 'no failure line recorded: the next run records one'}</div>
+                    </div>
+                ))}
+            </div>}
+    </Section>
+))
+
+// ── where the time goes ─────────────────────────────────────────────────
+
+const Summary = observer(({ app, l }: { app: HubSt; l: LastRun }) => (
+    <div className="tsum">
+        <div className="tsline">
+            <span><b>{l.files}</b> files</span>
+            <span>sum <b className="dnum">{fmtMs(l.sumMs)}</b></span>
+            <span title={l.wallFrom === 'runner' ? 'the check run is not on record, so this is the suite runner alone' : 'the check, start to end'}>
+                wall <b className="dnum">{l.wallMs == null ? 'not recorded' : fmtMs(l.wallMs)}</b>{l.wallFrom === 'runner' ? <span className="dim"> (runner)</span> : null}
+            </span>
+            <span>{l.workers == null ? <span className="dim">workers not recorded</span> : l.workers === 0 ? 'one file at a time' : <><b>{l.workers}</b> workers</>}</span>
+            {l.ratio == null ? null : <span title="the sum of file times over the wall: how many files ran at once, on average">sum/wall <b className="dnum">{l.ratio.toFixed(1)}×</b></span>}
+            <span className="dim"><TimeAgo clock={app.clock} at={l.at} /></span>
+        </div>
+        <div className={`tshape ${l.shape ?? ''}`}>{l.shape == null ? null : <b>{SHAPE_WORD[l.shape]}: </b>}{l.shapeWords}</div>
+        {l.top.length === 0 ? null : (
+            <div className="tstop">
+                top {l.top.length}:{' '}
+                {l.top.map((t, n) => (
+                    <span key={t.file}>{n > 0 ? ', ' : null}<FileLink app={app} file={t.file} name={t.inUnit} /> <span className="dnum">{fmtMs(t.ms)}</span> <span className="dim">({pct(t.share)})</span></span>
+                ))}
+            </div>
+        )}
+    </div>
+))
+
+/** the runner's wall, cut into what it spent it on: nothing it spends outside
+ *  the files may hide */
+const PhaseBar = ({ p, wallMs }: { p: Phases; wallMs: number | null }) => {
+    const parts: { k: string; ms: number; cls: string; word: string }[] = [
+        { k: 'setup', ms: p.setupMs, cls: 'p-setup', word: 'setup: probing bun, reading the bunfig and the pool' },
+        { k: 'parallel', ms: p.parallelMs, cls: 'p-par', word: p.workers === 0 ? 'the files, one at a time' : `the files, on ${p.workers} workers` },
+        ...(p.serialMs == null ? [] : [{ k: 'serial', ms: p.serialMs, cls: 'p-ser', word: `the ${p.serialFiles} declared serial files, after` }]),
+        ...(p.aloneFiles === 0 ? [] : [{ k: 'alone', ms: p.aloneMs, cls: 'p-alone', word: `${p.aloneFiles} over budget files, run again alone` }]),
+        ...(p.hostMs == null ? [] : [{ k: 'host', ms: p.hostMs, cls: 'p-host', word: 'the check around the runner: its process start and module load' }]),
+    ]
+    const total = Math.max(1, wallMs ?? parts.reduce((n, x) => n + x.ms, 0))
+    return (
+        <div className="tpbar">
+            {parts.map((x) => <i key={x.k} className={x.cls} style={{ width: `${Math.max(0.5, (x.ms / total) * 100)}%` }} title={`${x.word}: ${fmtMs(x.ms)}`} />)}
+        </div>
+    )
+}
+
+const PhaseFacts = ({ p, wallMs }: { p: Phases; wallMs: number | null }) => {
+    const other = p.runnerMs - p.setupMs - p.parallelMs - (p.serialMs ?? 0) - p.aloneMs
+    return (
+        <Section title="phases" help="the suite runner's own record of its last run: where its wall time went, the files included and everything around them">
+            <PhaseBar p={p} wallMs={wallMs} />
+            <div className="cfacts">
+                <Row k="setup" help="the runner before its first phase: probing bun, reading the bunfig, reading the pool"><span className="dnum">{fmtMs(p.setupMs)}</span></Row>
+                <Row k={p.workers === 0 ? 'files' : 'parallel'} help="the first phase: every quick tier file, on the workers the pool left it">
+                    <span className="dnum">{fmtMs(p.parallelMs)}</span>
+                    <span className="dim"> {p.workers === 0 ? 'one at a time' : `on ${p.workers} workers`}{p.parallelCpuMs == null ? null : `, ${fmtMs(p.parallelCpuMs)} of CPU`}</span>
+                </Row>
+                <Row k="serial" help="the files declared serial run after, one at a time">
+                    {p.serialMs == null ? <span className="dim">none declared</span> : <><span className="dnum">{fmtMs(p.serialMs)}</span> <span className="dim">for {p.serialFiles} files</span></>}
+                </Row>
+                <Row k="alone" help="a file over its budget in the shared run is run again alone before it can fail: that rerun is wall time too">
+                    {p.aloneFiles === 0 ? <span className="dim">no rerun</span> : <><span className="dnum">{fmtMs(p.aloneMs)}</span> <span className="dim">for {p.aloneFiles} files</span></>}
+                </Row>
+                <Row k="runner" help="the suite runner, first line to the record write. What is left after the phases is its own bookkeeping">
+                    <span className="dnum">{fmtMs(p.runnerMs)}</span>{other > 0 ? <span className="dim">, {fmtMs(other)} its own</span> : null}
+                </Row>
+                <Row k="host" help="the check's wall minus the runner's: the process that hosts it, its start and its module load">
+                    {p.hostMs == null ? <span className="dim">the check run is not on record</span> : <span className="dnum">{fmtMs(p.hostMs)}</span>}
+                </Row>
+                {p.load1 == null ? null : <Row k="load" help="the machine's one minute load when the runner judged the budgets, and its cores">{p.load1.toFixed(1)} <span className="dim">on {p.cores ?? '?'} cores</span></Row>}
+            </div>
+        </Section>
+    )
+}
+
+const FileRows = observer(({ app, files }: { app: HubSt; files: FileTime[] }) => (
+    <div className="rlist">
+        <div className="rhead rtime">
+            <span className="tleft">file</span>
+            <span>duration</span>
+            <span title="CPU the file burned alone, known only where a process ran it alone">cpu</span>
+            <span className="tleft">share</span>
+            <span>budget</span>
+            <span title="the last run against the mean of its earlier ones">trend</span>
+            <span>tier</span>
+        </div>
+        {files.map((f) => (
+            <div key={f.file} className={`rline rtime${f.status === 'fail' ? ' red' : ''}`} title={f.file} onClick={() => app.tests.openFile(f.file)}>
+                <span className="rwhat">{f.inUnit}</span>
+                <span className={`rnum ${fileTone(f)}`} title={f.judgedMs == null ? undefined : `its wall in the shared run. Run again alone, the budget judged ${fmtMs(f.judgedMs)}`}>
+                    {f.ms == null ? <span className="dim">never ran</span> : fmtMs(f.ms)}
+                </span>
+                <span className="rnum dim">{fmtMs(f.cpuMs)}</span>
+                <span className="tshare" title={f.inLastRun ? `${pct(f.share)} of the sum of the last run` : 'not in the last run'}>
+                    {f.share == null ? <span className="dim">{f.ms == null ? '' : 'older run'}</span> : <><span className="ttrack"><i style={{ width: `${Math.max(1, f.share * 100)}%` }} /></span><span className="rnum">{pct(f.share)}</span></>}
+                </span>
+                <span className="rnum dim">{fmtMs(f.budgetMs)}</span>
+                <span className={`rnum ${f.trend == null ? '' : TREND_TONE[f.trend]}`} title={f.avgMs == null ? 'no earlier run to compare' : `mean of its earlier runs: ${fmtMs(f.avgMs)}`}>{f.trend == null ? '' : TREND_GLYPH[f.trend]}</span>
+                <span className="rtag dim">{f.tier === 'full' ? 'release' : 'quick'}{f.phase === 'serial' ? ', serial' : ''}</span>
+            </div>
+        ))}
+    </div>
+))
+
+// ── the pages ────────────────────────────────────────────────────────────
+
+const Loading = observer(({ app, check }: { app: HubSt; check: string | null }) => {
+    const err = app.tests.error(check)
+    if (err !== '') return <div className="warnline">✗ {err}</div>
+    return <div className="dim">{app.tests.isLoading(check) ? 'reading the record…' : 'nothing loaded yet'}</div>
+})
+
+export const TestCheckPage = observer(({ app, check }: { app: HubSt; check: string }) => {
+    const i = app.cols.find('checks', `check:${check}`)
+    const u = i?.check ?? null
+    const v: TestCheckView | null = app.tests.check(check)
+    const live = app.checks.isRunning(check)
+    return (
+        <div className="colcard checkcard">
+            <div className="chead">
+                <span className="tid">test check</span>
+                <h3 className={`ctitle tl ${i?.state ?? 'idle'}`}>{check}</h3>
+                <a href="#" className="dim" title="its check page: when it runs, what it printed" onClick={(e) => { e.preventDefault(); app.timeline.openCheck(check) }}>check page</a>
+                <span className="sp" />
+                <button className="primary urun" disabled={app.checks.busy} onClick={() => void app.checks.run([check])}>
+                    {live ? <><span className="spin" />running</> : 'run it now'}
+                </button>
+            </div>
+            {u == null ? null : <Says description={u.description} />}
+            {u == null ? null : <CommandLine app={app} u={u} />}
+            {u == null ? null : (
+                <div className="cfacts">
+                    <Row k="last run" help="how its last answer came: ran, or cached (answered from the cache, nothing ran)"><LastRunValue app={app} u={u} /></Row>
+                    <Timings u={u} />
+                </div>
+            )}
+            {v == null ? <Loading app={app} check={check} /> : <>
+                <Failing app={app} rows={v.failing} showCheck={false} />
+                <Section title="where the time goes" help="every file this check runs, by its last recorded duration. The share is of the sum of file times in the check's last run. Its tone is against the budget: over it reads red">
+                    {v.last == null ? <div className="dim">no run recorded yet: the next run of {check} records one</div> : <Summary app={app} l={v.last} />}
+                    <FileRows app={app} files={v.files} />
+                </Section>
+                {v.last?.phases == null ? null : <PhaseFacts p={v.last.phases} wallMs={v.last.wallMs} />}
+            </>}
+        </div>
+    )
+})
+
+const CheckRows = observer(({ app, rows }: { app: HubSt; rows: TestCheckRow[] }) => (
+    <div className="rlist">
+        <div className="rhead rcheckt">
+            <span className="tleft">check</span>
+            <span>wall</span>
+            <span>files</span>
+            <span>failing</span>
+            <span className="tleft">slowest file</span>
+            <span className="tleft">shape</span>
+        </div>
+        {rows.map((r) => (
+            <div key={r.checkId} className={`rline rcheckt${r.failing > 0 ? ' red' : ''}`} onClick={() => app.tests.open(r.checkId)}>
+                <span className="rtag">{r.checkId}</span>
+                <span className={`rnum ${durationTone(r.wallMs) ?? ''}`}>{r.wallMs == null ? <span className="dim">never ran</span> : fmtMs(r.wallMs)}</span>
+                <span className="rnum">{r.files}</span>
+                <span className={`rnum ${r.failing > 0 ? 'bad' : 'dim'}`}>{r.failing}</span>
+                <span className="rwhat">{r.slowest == null ? null : <><FileLink app={app} file={r.slowest.file} name={r.slowest.inUnit} /> <span className="dnum dim">{fmtMs(r.slowest.ms)}</span></>}</span>
+                <span className="rtag dim">{r.shape == null ? '' : SHAPE_WORD[r.shape]}</span>
+            </div>
+        ))}
+    </div>
+))
+
+export const TestsRootPage = observer(({ app }: { app: HubSt }) => {
+    const v: TestsRootView | null = app.tests.root()
+    return (
+        <div className="colcard checkcard">
+            <div className="chead">
+                <span className="tid">tests</span>
+                <h3 className="ctitle">every test check</h3>
+            </div>
+            <div className="usays">each test check's last run: its wall time, its files, how many fail, the slowest file. Click a check for where its time goes</div>
+            {v == null ? <Loading app={app} check={null} /> : <>
+                <Section title="test checks" help="one line per test check, slowest wall first"><CheckRows app={app} rows={v.checks} /></Section>
+                <Failing app={app} rows={v.failing} showCheck />
+            </>}
+        </div>
+    )
+})
+
+export const TestsPage = observer(({ app, check }: { app: HubSt; check: string | null }) =>
+    check == null ? <TestsRootPage app={app} /> : <TestCheckPage app={app} check={check} />)

package/src/serve/hub-app/time-ago.tsx

@@ -0,0 +1,34 @@
+// An age that moves, from the one clock (clock-svc.ts). The words are pure,
+// so a test pins them, and the component is the only thing on the page that
+// observes the second tick.
+import { observer } from 'mobx-react-lite'
+import type { ClockSvc } from './clock-svc.ts'
+
+/** how long ago, in the shortest honest unit. A stamp ahead of the clock
+ *  reads as now: a clock skew is not a negative age */
+export function ageWords(at: number, now: number): string {
+    const s = Math.max(0, Math.round((now - at) / 1000))
+    if (s < 60) return `${s}s ago`
+    if (s < 3600) return `${Math.round(s / 60)}m ago`
+    if (s < 86400) return `${Math.round(s / 3600)}h ago`
+    return `${Math.round(s / 86400)}d ago`
+}
+
+/** the absolute stamp, which is what a reader compares against their own
+ *  edits. It never moves, so it is not observable */
+export const stampWords = (at: number): string => {
+    const d = new Date(at)
+    return `${d.toLocaleDateString()} ${d.toLocaleTimeString()}`
+}
+
+export const TimeAgo = observer(({ clock, at, stamp }: { clock: ClockSvc; at: number; stamp?: boolean }) => (
+    <span className="ago" title={stampWords(at)}>{stamp === true ? `${stampWords(at)} ` : ''}{ageWords(at, clock.now)}</span>
+))
+
+/** a moment ahead, in words that move with the clock, with the exact stamp in
+ *  the tooltip. `words` is computed by the caller from `clock.now`, so this
+ *  component only has to be the thing that observes the tick */
+export const TimeAhead = observer(({ clock, words }: { clock: ClockSvc; words: (now: number) => { words: string; at: number | null } }) => {
+    const w = words(clock.now)
+    return <span className="ago" title={w.at == null ? undefined : stampWords(w.at)}>{w.words}</span>
+})