rvlib-shipkit 0.38.0 → 1.0.0

package/src/serve/hub-app/chart-view.ts

@@ -0,0 +1,179 @@
+// The view state of THE run chart: its zoom, the width it has on screen and
+// what is under the pointer, over the geometry (timeline-geometry.ts) and the
+// drawing (timeline-chart.tsx). The live strip owns it, and nothing else in
+// the hub draws a run. What differs is the source: folded, a rolling window
+// that ends now; unfolded, the whole record opened on its last minutes.
+import { makeAutoObservable, observableRef } from 'mobx'
+import type { TimelineInvocation } from '../../ledger/run-timeline.ts'
+import {
+    anchorScroll, buildAxis, fitScale, fitWindow, layoutTimeline, maxZoom, PAD_PX, windowAxis, ZOOM_MIN, zoomStep, type Axis, type Layout, type Span,
+} from './timeline-geometry.ts'
+
+/** what a chart draws. `windowMs` null = the whole record, with idle
+ *  stretches folded; a number = the rolling window that ends at `now` */
+export type ChartSource = {
+    invocations: TimelineInvocation[]
+    now: number
+    windowMs: number | null
+    laneCap?: number
+    /** false = drawn at zoom 1 whatever the stored zoom says */
+    zoomable?: boolean
+    /** the runner's cap, drawn over the concurrency band */
+    cap?: number
+    /** the span the view opens on: at its home zoom this much time, ending
+     *  now, fills the width. Absent = home is zoom 1, the whole source */
+    homeSpanMs?: number
+}
+
+/** what the tooltip says, and the viewport point it is fixed at */
+export type ChartTip = { x: number; y: number; head: string; tone: string; lines: string[] }
+
+export class ChartView {
+    /** 1 fits the whole source in the view. null = home: the zoom the source
+     *  opens on, which moves with the width and the source */
+    zoom: number | null
+    /** the width the chart has on screen, 0 until it is measured */
+    viewW = 0
+    hover: ChartTip | null = null
+    /** FOLLOW: the right edge is now and the view advances with the clock.
+     *  Off, the view stays put in absolute time until the reader comes back
+     *  to the right edge or asks for live again */
+    follow = true
+    /** the scale the view keeps while it does not follow, so nothing on it
+     *  moves as the record grows */
+    pinned: number | null = null
+    /** the moment the view stands still at while a tooltip is open, so the
+     *  thing under the pointer can be read */
+    heldNow: number | null = null
+
+    /** `key` persists the zoom per browser; null keeps it for the tab */
+    constructor(private key: string | null, private source: () => ChartSource | null) {
+        this.zoom = this.readZoom()
+        makeAutoObservable<this, 'key' | 'source'>(this, { key: false, source: false, hover: observableRef })
+    }
+
+    private readZoom(): number | null {
+        if (this.key == null) return null
+        try {
+            const z = Number(globalThis.localStorage?.getItem(this.key) ?? '')
+            return Number.isFinite(z) && z >= ZOOM_MIN ? z : ZOOM_MIN
+        } catch {
+            return ZOOM_MIN
+        }
+    }
+
+    private get src(): ChartSource | null {
+        return this.source()
+    }
+    /** the moment the view is drawn at: the source's now, unless a tooltip
+     *  holds it still */
+    get now(): number {
+        return this.heldNow ?? this.src?.now ?? 0
+    }
+    private get spans(): Span[] {
+        return (this.src?.invocations ?? []).map((i) => ({ start: i.started, end: i.running === true ? this.now : i.ended }))
+    }
+    /** where a rolling window starts, null over the whole record */
+    get from(): number | null {
+        const s = this.src
+        return s == null || s.windowMs == null ? null : this.now - s.windowMs
+    }
+    /** the scale at zoom 1 */
+    get fit(): number {
+        const s = this.src
+        const w = Math.max(200, this.viewW)
+        if (s == null) return 1
+        return this.from == null ? fitScale(this.spans, this.now, w) : fitWindow(this.from, this.now, w)
+    }
+    /** the runner's cap the source carries, drawn over the concurrency band */
+    get cap(): number | undefined {
+        return this.src?.cap
+    }
+    get maxZoom(): number {
+        return maxZoom(this.fit)
+    }
+    /** the zoom at which the source's home span of drawn time fills the
+     *  width. Idle stretches are folded, so a record with less drawn time
+     *  than the span opens fitted */
+    get homeZoom(): number {
+        const s = this.src
+        if (s?.homeSpanMs == null) return ZOOM_MIN
+        const px = Math.max(1, Math.max(200, this.viewW) - 2 * PAD_PX) / s.homeSpanMs
+        return Math.min(this.maxZoom, Math.max(ZOOM_MIN, px / this.fit))
+    }
+    /** the zoom in effect */
+    get level(): number {
+        if (this.src?.zoomable === false) return ZOOM_MIN
+        return Math.min(this.zoom ?? this.homeZoom, this.maxZoom)
+    }
+    /** the reader zoomed away from home */
+    get zoomed(): boolean {
+        return this.zoom != null
+    }
+    /** px per ms: the zoom's while following, the pinned one while not */
+    get scale(): number {
+        return this.follow || this.pinned == null ? this.fit * this.level : this.pinned
+    }
+    get layout(): Layout | null {
+        const s = this.src
+        if (s == null || this.viewW === 0) return null
+        return layoutTimeline(s.invocations, this.now, this.scale, { from: this.from ?? undefined, laneCap: s.laneCap, cap: s.cap })
+    }
+
+    private axisAt(scale: number): Axis {
+        return this.from == null ? buildAxis(this.spans, this.now, scale) : windowAxis(this.from, this.now, scale)
+    }
+
+    /** stop following: the view keeps its scale and its place in time */
+    detach(): void {
+        if (!this.follow) return
+        this.pinned = this.scale
+        this.follow = false
+    }
+    /** follow again: the right edge is now */
+    attach(): void {
+        this.follow = true
+        this.pinned = null
+    }
+    /** the reader moved the view: away from the right edge it stops
+     *  following, back at the right edge it follows again */
+    scrolled(scrollLeft: number, clientWidth: number): void {
+        const w = this.layout?.axis.width
+        if (w == null) return
+        const atRight = scrollLeft + clientWidth >= w - 4
+        if (atRight && !this.follow) this.attach()
+        else if (!atRight && this.follow) this.detach()
+    }
+
+    setViewW(w: number): void {
+        this.viewW = w
+    }
+    /** a tooltip opens or closes. While one is open the view stands still */
+    setHover(t: ChartTip | null): void {
+        this.hover = t
+        if (t == null) this.heldNow = null
+        else if (this.heldNow == null) this.heldNow = this.src?.now ?? null
+    }
+    /** back to the zoom the source opens on */
+    home(): void {
+        this.zoom = null
+    }
+
+    /** zoom to `next` around the point `cx` of the viewport, and say where to
+     *  scroll so the moment under that point stays under it */
+    private zoomTo(next: number, cx: number, scrollLeft: number): number {
+        const before = this.axisAt(this.scale)
+        this.zoom = Math.min(this.maxZoom, Math.max(ZOOM_MIN, next))
+        if (!this.follow) this.pinned = this.fit * this.level
+        if (this.key != null) {
+            try { globalThis.localStorage?.setItem(this.key, String(this.zoom)) } catch { /* private window: the zoom lasts the tab */ }
+        }
+        return anchorScroll(before, this.axisAt(this.scale), scrollLeft, cx)
+    }
+    wheel(deltaY: number, cx: number, scrollLeft: number): number {
+        return this.zoomTo(zoomStep(this.level, deltaY, this.maxZoom), cx, scrollLeft)
+    }
+    zoomBy(factor: number, cx: number, scrollLeft: number): number {
+        return this.zoomTo(this.level * factor, cx, scrollLeft)
+    }
+}

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

@@ -0,0 +1,345 @@
+// ONE GATE CHECK, on its own page, as ONE compact block: the id as a tag, the
+// title, the sentence it wrote about itself, the exact command it runs, then
+// one grid of facts, each a dim label and a short value whose explanation is
+// the row's `(?)`. No box holds a single field. Navigation is the tree on the
+// left, so there is no back link.
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef } from 'react'
+import { CACHED } from '../../core/outcome-words.ts'
+import { durationTone, fmtMs } from './dur.ts'
+import { Help, TERMS } from './help.tsx'
+import type { HubSt } from './hub-st.ts'
+import type { SlowSuite, CheckFacts, RecentRun, WhenAt } from './hub-types.ts'
+import { renderMd, renderMdInline } from './md.ts'
+import { nextRun } from './next-run.ts'
+import { ProseHits } from './prose-hits-view.tsx'
+import { stampWords, TimeAgo, TimeAhead } from './time-ago.tsx'
+import { checkName, commandOf, docPath, editorHref, lastRun, rememberedFact, repoPath, whatFacts, WHEN_OPTION, type ShortPath } from './check-words.ts'
+
+/** which declaration is answering, so the switch never looks like it wrote
+ *  something it did not. The CHIP is the short one, its help is the sentence */
+const SOURCE_CHIP: Record<CheckFacts['whenSource'], string> = {
+    when: 'repo.config.ts',
+    'check-file': 'the check file',
+    ruleExempt: 'ruleExempt',
+    optIn: 'optIn',
+    'gate-export': 'gate = false',
+    defaults: 'defaults',
+    default: 'default',
+}
+
+const SOURCE_WORD: Record<CheckFacts['whenSource'], string> = {
+    when: 'set in the `when` block of `repo.config.ts`, which this switch writes',
+    'check-file': 'declared by the check file itself, and the `when` block overrides it',
+    ruleExempt: 'from the older `ruleExempt`, which reads as off',
+    optIn: 'from the older `optIn` key, which reads as health',
+    'gate-export': 'from `export const gate = false` in its own file',
+    defaults: 'from the `defaults` block, which removes the floor slot entirely',
+    default: 'nobody declared where this check runs, so it takes the default',
+}
+
+const WHEN_VALUES: WhenAt[] = ['always', 'release', 'health', 'off']
+
+const VERDICT_WORD: Record<'pass' | 'warn' | 'fail' | 'skip', string> = {
+    pass: 'passed', warn: 'warned', fail: 'failed', skip: 'skipped',
+}
+
+// ── the pieces ───────────────────────────────────────────────────────────
+
+/** one duration, in the one unit, in the one tone */
+const Dur = ({ ms, ceiling }: { ms: number | null | undefined; ceiling?: number }) =>
+    ms == null
+        ? <span className="dim">not timed yet</span>
+        : <span className={`dnum ${durationTone(ms, ceiling) ?? ''}`}>{fmtMs(ms)}</span>
+
+const MdHelp = ({ text }: { text: string }) => <Help text={<span className="md" dangerouslySetInnerHTML={{ __html: renderMd(text) }} />} />
+
+/** one fact: the label dim and small on the left, the value on the right. On
+ *  a wide screen the grid holds two of them per line */
+export const Row = ({ k, help, wide, children }: { k: string; help?: string; wide?: boolean; children: React.ReactNode }) => (
+    <div className={wide === true ? 'cf wide' : 'cf'}>
+        <div className="ck">{k}{help == null ? null : <MdHelp text={help} />}</div>
+        <div className="cv">{children}</div>
+    </div>
+)
+
+/** a path, short, never split mid token, the full one in its tooltip */
+export const PathCode = ({ p, href }: { p: ShortPath; href?: string | null }) => {
+    const code = <code className="cpath" title={p.full}>{p.short}</code>
+    return href == null ? code : <a href={href} title={p.full}>{code}</a>
+}
+
+/** the section title for what is not a fact: the output, the slow suites */
+export const Section = ({ title, help, children }: { title: string; help?: string; children: React.ReactNode }) => (
+    <section className="csec">
+        <div className="cstitle">{title}{help != null ? <Help text={help} /> : null}</div>
+        {children}
+    </section>
+)
+
+/** the sentence the check states about itself, as markdown, under the title */
+export const Says = ({ description }: { description: string }) =>
+    <div className="usays md" dangerouslySetInnerHTML={{ __html: renderMd(description) }} />
+
+// ── what it runs ─────────────────────────────────────────────────────────
+
+export const copy = (text: string): void => {
+    try { void navigator.clipboard?.writeText(text) } catch { /* a page served over plain http has no clipboard */ }
+}
+
+/** THE COMMAND, exactly as the gate spawns it from the repo root, or the one
+ *  line saying its body is a function inside the gate */
+export const CommandLine = ({ app, u }: { app: HubSt; u: CheckFacts }) => {
+    const c = commandOf(u, app.root)
+    if (c.kind === 'in-process')
+        return (
+            <div className="ccmd">
+                <Row k="runs" help="its body is a function, so it runs inside the gate process and a throw of its own is its own failure rather than the gate crashing" wide>
+                    in the gate process
+                    {c.file == null
+                        ? <span className="dim">, its source ships inside the toolkit</span>
+                        : <>, source <PathCode p={repoPath(c.file, app.root)} href={editorHref(app.root, c.file)} /></>}
+                </Row>
+            </div>
+        )
+    return (
+        <div className="ccmd">
+            <Row k="command" help="the exact argv the gate spawns from the repo root. Its exit code is truth: a non zero exit with no FAIL line still fails loud" wide>
+                <code className="cargv" title={u.cmd?.join(' ')}>
+                    {c.tokens.map((t, n) => (
+                        <span key={n}>
+                            {n > 0 ? ' ' : null}
+                            {t.short === u.file && editorHref(app.root, u.file) != null
+                                ? <a className="tok" href={editorHref(app.root, u.file)!} title={t.full}>{t.short}</a>
+                                : <span className="tok" title={t.full}>{t.short}</span>}
+                        </span>
+                    ))}
+                </code>
+                <button className="ccopy" title="copy the command" onClick={() => copy(c.copy)}>copy</button>
+                {c.script == null
+                    ? null
+                    : <div className="cscript">
+                        <span className="dim">script <code className="cpath">{c.script.name}</code> runs</span> <code className="cargv">{c.script.body}</code>
+                    </div>}
+            </Row>
+        </div>
+    )
+}
+
+// ── the switch ───────────────────────────────────────────────────────────
+
+/** RUN WHEN, one select named by effect. It writes `repo.config.ts` itself,
+ *  through the managed block, and leaves the file dirty: a change of place is
+ *  a change its owner reviews in a git client, never a commit made on their
+ *  behalf. Choosing never asks for the reason before it writes. */
+const RunWhen = observer(({ app, u }: { app: HubSt; u: CheckFacts }) => {
+    const s = app.checks
+    const g = s.gate
+    const shown = s.whenShown(u)
+    const reason = s.reasonFor(u.checkId)
+    return (
+        <Row k="run when" help="where this check runs. Changing it writes repo.config.ts and leaves the file for you to commit">
+            <span className="cwhen">
+                <select className="wsel" value={shown} disabled={s.gateBusy} onChange={(e) => s.chooseWhen(u.checkId, e.target.value as WhenAt)}>
+                    {WHEN_VALUES.map((v) => <option key={v} value={v}>{WHEN_OPTION[v]}</option>)}
+                </select>
+                <Help text={
+                    <span className="legend">
+                        {WHEN_VALUES.map((v) => <span key={v} className="lrow"><b>{WHEN_OPTION[v]}</b> ({v}): {TERMS[v]}</span>)}
+                    </span>
+                } />
+                <span className="stchip">{SOURCE_CHIP[u.whenSource]}</span>
+                <MdHelp text={SOURCE_WORD[u.whenSource]} />
+                {u.whenSource === 'when'
+                    ? <button className="wclear" disabled={s.gateBusy} onClick={() => void s.clearWhen(u.checkId)}>drop the entry</button>
+                    : null}
+            </span>
+            {shown === 'off'
+                ? <span className="cblock">
+                    <input className="wreason" placeholder="why it is off (required, and it rides in the config)"
+                        value={reason} onChange={(e) => s.setReason(u.checkId, e.target.value)} />
+                    {u.when === 'off' && u.whenReason != null ? <span className="note">reason today: {u.whenReason}</span> : null}
+                    <button disabled={s.gateBusy || reason.trim() === ''} onClick={() => void s.setWhen(u.checkId, 'off')}>
+                        {u.when === 'off' ? 'change the reason' : 'turn it off'}
+                    </button>
+                </span>
+                : null}
+            {g != null && g.state === 'stale'
+                ? <span className="cblock warnline">the managed block in {g.path} was hand edited: reconcile it, then the switch works again</span>
+                : null}
+            {g != null && g.dirty ? <span className="cblock note">{g.path} is edited and not committed, review it in your git client</span> : null}
+            {s.gateNote === '' ? null : <span className="cblock note">{s.gateNote}</span>}
+        </Row>
+    )
+})
+
+// ── the numbers ──────────────────────────────────────────────────────────
+
+/** the last N outcomes as a bar row: an average hides the shape, and the
+ *  reds it cannot even see */
+const Bars = ({ runs, ceiling }: { runs: RecentRun[]; ceiling: number }) => {
+    if (runs.length === 0) return <div className="dim">no run on record yet</div>
+    const top = Math.max(...runs.map((r) => r.ms), 1)
+    return (
+        <div className="bars">
+            {runs.map((r, n) => (
+                <i key={`${r.at}-${n}`}
+                    className={`bar ${r.replayed ? 'rep' : r.status === 'fail' ? 'red' : r.status === 'warn' ? 'warn' : r.status === 'skip' ? 'rep' : durationTone(r.ms, ceiling) ?? 'plain'}`}
+                    style={{ height: `${r.replayed ? 8 : Math.max(10, Math.round((r.ms / top) * 100))}%` }}
+                    title={`${stampWords(r.at)}: ${r.replayed ? CACHED : `${VERDICT_WORD[r.status]} in ${fmtMs(r.ms)}`}`} />
+            ))}
+        </div>
+    )
+}
+
+/** how the last answer came: `ran 3m ago in 412ms`, or `cached 16m ago` */
+export const LastRunValue = observer(({ app, u }: { app: HubSt; u: CheckFacts }) => {
+    const l = lastRun(u)
+    if (l == null) return <span className="dim">never here</span>
+    return (
+        <>
+            <span className={`tl ${l.tone}`}>{l.word}</span>
+            {u.lastAt == null ? null : <> <TimeAgo clock={app.clock} at={u.lastAt} /></>}
+            {u.lastMs == null || u.replayed ? null : <> in <Dur ms={u.lastMs} ceiling={u.timeoutMs} /></>}
+            {l.verdict == null ? null : <span className={`tl ${l.tone}`}>, {l.verdict}</span>}
+        </>
+    )
+})
+
+export const Timings = ({ u }: { u: CheckFacts }) => (
+    <Row k="timings" wide help="what this check costs: its last run, the mean of the runs that really ran, the worst one on record, and the limit it is killed at">
+        <span className="ctimes">
+            <span><span className="ck">last</span> <Dur ms={u.lastMs} ceiling={u.timeoutMs} /></span>
+            <span><span className="ck">average</span> {u.samples === 0 ? <span className="dim">not timed yet</span> : <><Dur ms={u.avgMs} ceiling={u.timeoutMs} /> <span className="dim">over {u.samples}</span></>}</span>
+            <span><span className="ck">slowest</span> <Dur ms={u.slowestMs} ceiling={u.timeoutMs} />{u.failures > 0 ? <span className="dim">, {u.failures} red</span> : null}</span>
+            {/* a limit, never a measurement: it wears no tone of its own */}
+            <span><span className="ck">limit</span> <span className="dnum dim">{fmtMs(u.timeoutMs)}</span> <Help term="ceiling" /></span>
+        </span>
+        <Bars runs={u.recent ?? []} ceiling={u.timeoutMs} />
+    </Row>
+)
+
+const Remembered = ({ u }: { u: CheckFacts }) => {
+    const kept = rememberedFact(u)
+    return (
+        <Row k="remembered" help={kept.help}>
+            {kept.inputs.length === 0
+                ? kept.v
+                : <details className="cinputs">
+                    <summary>{kept.v} <span className="dim">({kept.inputs.length})</span></summary>
+                    <span className="winputs">{kept.inputs.map((p) => <code key={p} className="cpath">{p}</code>)}</span>
+                </details>}
+        </Row>
+    )
+}
+
+// ── what it printed ──────────────────────────────────────────────────────
+
+/** each wire line renders as INLINE markdown, never as a fenced block: a
+ *  `fix:` pointer is made of backtick spans and urls, and a fence turns a
+ *  pointer a reader could click into text they have to retype */
+const LogLines = ({ lines }: { lines: string[] }) => (
+    <>{lines.map((l, n) => <div key={`${n}-${l}`} className="wlogline" dangerouslySetInnerHTML={{ __html: renderMdInline(l) }} />)}</>
+)
+
+/** the lines of the run in flight, then the lines of the last one. It
+ *  scrolls itself while a run streams, so the newest line is on screen */
+const LastOutput = observer(({ app, lines }: { app: HubSt; lines: string[] }) => {
+    const live = app.checks.liveLines
+    const box = useRef<HTMLPreElement>(null)
+    useEffect(() => { if (box.current != null) box.current.scrollTop = box.current.scrollHeight }, [live.length])
+    return (
+        <Section title="last output" help="what it printed, with the fix pointers it emitted. While a run streams, this is the run">
+            {live.length > 0
+                ? <pre className="wlog" ref={box}><LogLines lines={live} /></pre>
+                : lines.length > 0
+                    ? <pre className="wlog"><LogLines lines={lines} /></pre>
+                    : <div className="dim">no lines from its last run: run it to see what it says</div>}
+        </Section>
+    )
+})
+
+/** the slow suites declared under the test step, each with the case it
+ *  argued. Moving a suite between the tiers is the SAME managed block write,
+ *  and it demands both answers exactly as `defineRepo` does. */
+const SlowSuites = observer(({ app }: { app: HubSt }) => {
+    const s = app.checks
+    const declared: SlowSuite[] = s.gate?.tests.slow ?? []
+    return (
+        <Section title="slow suites" help="the suites the quick tier leaves out. Each one declares what it catches and why it cannot be fast">
+            <div className="wline">
+                {declared.length === 0
+                    ? <span className="dim">none: every suite runs in the quick tier</span>
+                    : <>the quick tier leaves {declared.length} out, `shipkit ci --full` runs them</>}
+            </div>
+            {declared.map((x) => (
+                <div key={x.file} className="wsuite">
+                    <div className="wfile"><a href="#" title="its test file page" onClick={(e) => { e.preventDefault(); app.timeline.openTest(x.file) }}><code className="cpath">{x.file}</code></a>
+                        <button disabled={s.gateBusy} onClick={() => void s.removeSlow(x.file)}>back to the quick tier</button>
+                    </div>
+                    <div className="note">catches: {x.catches}</div>
+                    <div className="note">why not fast: {x.whyNotFast}</div>
+                </div>
+            ))}
+            <div className="wform">
+                <input placeholder="tests/heavy.test.ts" value={s.suite.file} onChange={(e) => s.setSuite('file', e.target.value)} />
+                <input placeholder="catches: the regression no fast test can catch" value={s.suite.catches} onChange={(e) => s.setSuite('catches', e.target.value)} />
+                <input placeholder="why not fast: what the cost is, and what you tried" value={s.suite.whyNotFast} onChange={(e) => s.setSuite('whyNotFast', e.target.value)} />
+                <button disabled={s.gateBusy || s.suite.file.trim() === ''} onClick={() => void s.addSlow()}>declare it slow</button>
+            </div>
+        </Section>
+    )
+})
+
+// ── the pages ────────────────────────────────────────────────────────────
+
+export const CheckCard = observer(({ app, id }: { app: HubSt; id: string }) => {
+    const i = app.cols.find('checks', id)
+    if (i == null) return <div className="ph">check vanished, the inventory moved on</div>
+    const u = i.check
+    if (u == null) return <div className="ph">this row is not a gate check</div>
+    const live = app.checks.isRunning(u.checkId)
+    const name = checkName(u.checkId, i.title)
+    const doc = u.doc == null ? null : docPath(u.doc, app.root)
+    return (
+        <div className="colcard checkcard">
+            {/* the run button sits beside the thing it runs, and holds its
+                width so a click moves nothing on the page */}
+            <div className="chead">
+                {name.tag == null ? null : <span className="tid">{name.tag}</span>}
+                <h3 className={`ctitle tl ${i.state}`}>{name.title}</h3>
+                {u.advisory ? <span className="stchip warn">fails, does not block</span> : null}
+                <span className="sp" />
+                <button className="primary urun" disabled={app.checks.busy} onClick={() => void app.checks.run([u.checkId])}>
+                    {live ? <><span className="spin" />running</> : 'run it now'}
+                </button>
+            </div>
+            <Says description={u.description} />
+            <CommandLine app={app} u={u} />
+            <div className="cfacts">
+                {whatFacts(u).map((f) => (
+                    <Row key={f.k} k={f.k} help={f.help}>{f.tone == null ? f.v : <span className={`tl ${f.tone}`}>{f.v}</span>}</Row>
+                ))}
+                <RunWhen app={app} u={u} />
+                <Remembered u={u} />
+                {/* the help never depends on the second, so it reads the wall
+                    clock and the row does not repaint on every tick */}
+                <Row k="next run" help={nextRun(u, app.cols.schedule, Date.now()).help}>
+                    <TimeAhead clock={app.clock} words={(now) => nextRun(u, app.cols.schedule, now)} />
+                </Row>
+                <Row k="last run" help={u.status == null
+                    ? 'no run of it is on record in this checkout'
+                    : u.replayed ? TERMS.cached! : TERMS.ran!}>
+                    <LastRunValue app={app} u={u} />
+                </Row>
+                {doc == null ? null : <Row k="owner" help="the page that OWNS the invariant, where a `fix:` pointer lands"><PathCode p={doc} /></Row>}
+                {u.deps != null && u.deps.length > 0 ? <Row k="waits on" help="the checks that must pass before this one starts">{u.deps.join(', ')}</Row> : null}
+                {u.group == null ? null : <Row k="group" help="a label several checks share, so `--skip <group>` parks all of them at once">{u.group}</Row>}
+                <Timings u={u} />
+            </div>
+            {u.build && u.checkId === 'test' ? <SlowSuites app={app} /> : null}
+            {u.checkId === 'SK014' ? <ProseHits app={app} /> : null}
+            <LastOutput app={app} lines={u.lastLines} />
+        </div>
+    )
+})