rvlib-shipkit 0.38.0 → 1.0.0

package/src/serve/hub-app/timeline-chart.tsx

@@ -0,0 +1,274 @@
+// THE ONE RUN CHART: every check run a bar at its true start and length,
+// parallel ones stacked in lanes, each invocation a band behind its bars, now
+// on the right. The live strip under the header draws it, folded over a
+// rolling window and unfolded over the whole record, and nothing else draws a
+// run. Geometry is timeline-geometry.ts, view state chart-view.ts; this file
+// only draws.
+import { observer } from 'mobx-react-lite'
+import { useEffect, useLayoutEffect, useRef } from 'react'
+import type { RepoLane } from '../../ledger/live-timeline.ts'
+import type { TimelineBar } from '../../ledger/run-timeline.ts'
+import type { ChartTip, ChartView } from './chart-view.ts'
+import { durationTone, fmtMs } from './dur.ts'
+import { bandLabels, gapSlices, ROWS, ticks, xOf, type GapSlice, type PlacedBar } from './timeline-geometry.ts'
+import { CACHED } from '../../core/outcome-words.ts'
+
+/** who started a run, in words. A starter this build does not name reads as
+ *  the word the record holds */
+export const BY_WORD: Record<string, string> = { cli: 'terminal', hub: 'hub', schedule: 'daily pass', save: 'save trigger', unknown: 'before the record' }
+export const byWords = (by: string): string => BY_WORD[by] ?? by
+
+/** the one tone a bar wears: running in the accent, then the verdict, a
+ *  cached grey, and a pass that ran in the duration tone the hub uses */
+export const barTone = (b: TimelineBar): string =>
+    b.running === true ? 'run' : b.status === 'fail' ? 'red' : b.status === 'warn' ? 'warn' : b.replayed || b.status === 'skip' ? 'rep' : durationTone(b.ms) ?? 'plain'
+
+/** what a bar did, in words: `passed in 900ms`, `running, 4 200ms so far` */
+export const verdictWords = (b: TimelineBar, now?: number): string =>
+    b.running === true
+        ? `running, ${fmtMs((now ?? b.end) - b.start)} so far`
+        : b.replayed ? `${CACHED}, nothing ran` : `${b.status === 'pass' ? 'passed' : b.status === 'fail' ? 'failed' : b.status === 'warn' ? 'warned' : 'skipped'} in ${fmtMs(b.ms)}`
+
+export const clockWords = (t: number): string => new Date(t).toLocaleTimeString([], { hour12: false })
+
+/** what hovering an idle slice adds under its words: when it began, and
+ *  when it ended or that it still grows */
+export const gapTipWords = (g: GapSlice): string => (g.live ? `since ${clockWords(g.t0)}, nothing ran` : `${clockWords(g.t0)} to ${clockWords(g.t1)}, nothing ran`)
+
+/** a point on the viewport: the tooltip is fixed there, out of every box
+ *  of the strip that clips */
+export type TipAt = { x: number; y: number }
+
+/** what hovering a bar says: its check, its verdict with its duration or its
+ *  elapsed time, when it started, the run and who started it */
+export const barTip = (b: PlacedBar, now: number, at: TipAt): ChartTip => ({
+    ...at,
+    head: b.id,
+    tone: b.status === 'fail' ? 'red' : b.status === 'warn' ? 'warn' : 'idle',
+    lines: [verdictWords(b, now), `${clockWords(b.start)} · ${b.label} · ${byWords(b.by)}`],
+})
+
+/** right of the pointer, or left of it past the middle of the window, so a
+ *  tooltip over the running bars at the right edge stays on screen */
+export const tipStyle = (t: TipAt, viewportW: number): { left: number; top: number } | { right: number; top: number } =>
+    t.x > viewportW / 2 ? { right: viewportW - t.x, top: t.y } : { left: t.x, top: t.y }
+
+/** under the element the pointer entered, at the pointer's x */
+const tipAtEvent = (e: React.MouseEvent<Element>): TipAt => ({ x: e.clientX, y: e.currentTarget.getBoundingClientRect().bottom + 4 })
+
+const Tip = observer(({ view }: { view: ChartView }) => {
+    const t = view.hover
+    if (t == null) return null
+    return (
+        <div className="tlaxtip" style={tipStyle(t, globalThis.innerWidth ?? Number.POSITIVE_INFINITY)}>
+            <b className={`tl ${t.tone}`}>{t.head}</b>
+            {t.lines.map((l) => <span key={l}>{l}</span>)}
+        </div>
+    )
+})
+
+export type ChartProps = {
+    view: ChartView
+    compact?: boolean
+    /** other repos with something in flight, one collapsed lane each */
+    repos?: RepoLane[]
+    /** keep now in sight: while the reader has not scrolled away, the view
+     *  follows the right edge as the window slides */
+    follow?: boolean
+    onBar: (b: PlacedBar) => void
+    onRepo?: (r: RepoLane) => void
+    /** the zoom control, floating over the top right corner: shown while the
+     *  pointer is on the chart and while it is zoomed away from home */
+    zoomable?: boolean
+}
+
+/** the key that brings a chart that stopped following back to now */
+export const FOLLOW_KEY = 'k'
+
+/** how far a press moves before it is a pan rather than a click */
+export const DRAG_PX = 4
+
+/** a press that moved this far is a pan, and never also a click */
+export const isPan = (x0: number, x: number): boolean => Math.abs(x - x0) >= DRAG_PX
+
+export const TimelineChart = observer(({ view, compact = false, repos = [], follow = false, onBar, onRepo, zoomable = false }: ChartProps) => {
+    const cap = view.cap
+    const ref = useRef<HTMLDivElement>(null)
+    /** where to scroll once the next zoom has rendered */
+    const pending = useRef<number | null>(null)
+    const placed = useRef(false)
+    /** a pan in progress: a tooltip fixed to the window would stay behind
+     *  while the bars move under it, so none opens */
+    const panning = useRef(false)
+    const hover = (t: ChartTip | null): void => {
+        if (t == null || !panning.current) view.setHover(t)
+    }
+    useEffect(() => {
+        const el = ref.current
+        if (el == null) return
+        view.setViewW(el.clientWidth)
+        const ro = new ResizeObserver(() => view.setViewW(el.clientWidth))
+        ro.observe(el)
+        // a pan away from the right edge stops following, a pan back to it
+        // follows again (chart-view.ts scrolled)
+        const onScroll = (): void => { if (follow) view.scrolled(el.scrollLeft, el.clientWidth) }
+        el.addEventListener('scroll', onScroll)
+        // a vertical wheel zooms, so it must be able to stop the page scroll:
+        // react attaches wheel listeners passive, which cannot
+        const onWheel = (e: WheelEvent): void => {
+            if (compact || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return
+            e.preventDefault()
+            pending.current = view.wheel(e.deltaY, e.clientX - el.getBoundingClientRect().left, el.scrollLeft)
+        }
+        el.addEventListener('wheel', onWheel, { passive: false })
+        // the pan is a drag: the chart shows no scrollbar. A drag past a few
+        // px is a pan and never also a click on the bar it started on
+        let drag: { x: number; left: number; moved: boolean } | null = null
+        let swallow = false
+        const onDown = (e: PointerEvent): void => { if (!compact && e.button === 0) drag = { x: e.clientX, left: el.scrollLeft, moved: false } }
+        const onMove = (e: PointerEvent): void => {
+            if (drag == null) return
+            if (!drag.moved && !isPan(drag.x, e.clientX)) return
+            if (!drag.moved) {
+                drag.moved = true
+                panning.current = true
+                view.setHover(null)
+            }
+            el.classList.add('dragging')
+            el.scrollLeft = drag.left - (e.clientX - drag.x)
+        }
+        const onUp = (): void => {
+            swallow = drag?.moved === true
+            drag = null
+            panning.current = false
+            el.classList.remove('dragging')
+        }
+        const onClick = (e: MouseEvent): void => {
+            if (!swallow) return
+            swallow = false
+            e.stopPropagation()
+            e.preventDefault()
+        }
+        el.addEventListener('pointerdown', onDown)
+        window.addEventListener('pointermove', onMove)
+        window.addEventListener('pointerup', onUp)
+        el.addEventListener('click', onClick, true)
+        return () => {
+            ro.disconnect()
+            el.removeEventListener('wheel', onWheel)
+            el.removeEventListener('scroll', onScroll)
+            el.removeEventListener('pointerdown', onDown)
+            window.removeEventListener('pointermove', onMove)
+            window.removeEventListener('pointerup', onUp)
+            el.removeEventListener('click', onClick, true)
+        }
+    }, [view, compact, follow])
+    const l = view.layout
+    useLayoutEffect(() => {
+        const el = ref.current
+        if (el == null || l == null) return
+        if (pending.current != null) {
+            el.scrollLeft = pending.current
+            pending.current = null
+        } else if (!placed.current || (follow && view.follow)) {
+            // following: now is the right edge, and that is where the eye is
+            el.scrollLeft = el.scrollWidth
+            placed.current = true
+        }
+    })
+    const r = compact ? ROWS.compact : ROWS.full
+    const lanes = (l?.lanes ?? 0) + repos.length
+    const lanesH = lanes * (r.lane + r.gap)
+    const top = r.band + r.conc
+    const h = top + Math.max(r.lane, lanesH) + r.axis
+    const laneY = (n: number): number => top + n * (r.lane + r.gap)
+    // the concurrency band: the count on one scale that always fits the cap
+    const concBase = r.band + r.conc - 2
+    const concUnit = (r.conc - 4) / Math.max(1, l?.concMax ?? 0, cap ?? 0)
+    const now = l?.axis.now ?? 0
+    const zoomBy = (f: number): void => {
+        const el = ref.current
+        if (el != null) pending.current = view.zoomBy(f, el.clientWidth / 2, el.scrollLeft)
+    }
+    const chart = (
+        <div className={`tlax${compact ? ' compact' : ''}`} ref={ref}>
+            {l == null ? <div style={{ height: h }} /> : (
+                <div className="tlaxin" style={{ width: l.axis.width }}>
+                    <svg className="tlsvg" width={l.axis.width} height={h}>
+                        {l.bands.map((b) => (
+                            <rect key={b.runId} className={`tlband${b.reds > 0 ? ' red' : ''}${b.running ? ' run' : ''}`} x={b.x} y={0} width={Math.max(1, b.w)} height={top + lanesH} />
+                        ))}
+                        {compact ? null : bandLabels(l.bands).map((b) => (
+                            <text key={b.runId} className="tlbandlbl" x={b.x} y={11}
+                                onMouseEnter={(e) => hover({ ...tipAtEvent(e), head: b.full, tone: 'idle', lines: [] })}
+                                onMouseLeave={() => hover(null)}>{b.text}</text>
+                        ))}
+                        {compact ? null : (
+                            <g className="tlconcg">
+                                {l.conc.map((c) => (
+                                    <rect key={c.x} className={`tlconc${c.over ? ' over' : ''}`} x={c.x} y={concBase - c.n * concUnit} width={Math.max(1, c.w)} height={c.n * concUnit}
+                                        onMouseEnter={(e) => hover({ ...tipAtEvent(e), head: `${c.n} in flight`, tone: c.over ? 'warn' : 'idle', lines: cap == null ? [] : [`cap ${cap}${c.over ? `, ${c.n - cap} over it` : ''}`] })}
+                                        onMouseLeave={() => hover(null)} />
+                                ))}
+                                {cap == null ? null : (
+                                    <>
+                                        <line className="tlcap" x1={0} x2={l.axis.width} y1={concBase - cap * concUnit} y2={concBase - cap * concUnit} />
+                                        <text className="tlcaplbl" x={l.axis.width - 4} y={concBase - cap * concUnit - 2} textAnchor="end">cap {cap}</text>
+                                    </>
+                                )}
+                            </g>
+                        )}
+                        {compact ? null : gapSlices(l.axis).map((g) => (
+                            <g key={g.t0} className={`tlgap${g.live ? ' live' : ''}`}
+                                onMouseEnter={(e) => hover({ ...tipAtEvent(e), head: g.full, tone: 'idle', lines: [gapTipWords(g)] })}
+                                onMouseLeave={() => hover(null)}>
+                                <rect x={g.x} y={0} width={g.w} height={h} />
+                                {g.text == null ? null : <text x={g.x + g.w / 2} y={top + Math.max(r.lane, lanesH) / 2 + 3} textAnchor="middle">{g.text}</text>}
+                            </g>
+                        ))}
+                        {compact ? null : ticks(l.axis).map((k) => (
+                            <g key={k.t} className="tltick">
+                                <line x1={k.x} x2={k.x} y1={top + lanesH} y2={top + lanesH + 4} />
+                                <text x={k.x} y={h - 5} textAnchor="middle">{clockWords(k.t)}</text>
+                            </g>
+                        ))}
+                        {l.bars.map((b) => (
+                            <rect key={`${b.runId}:${b.id}:${b.start}`} className={`tlb ${barTone(b)}`} x={b.x} y={laneY(b.lane)} width={Math.max(2, b.w)} height={r.lane}
+                                onMouseEnter={(e) => hover(barTip(b, now, tipAtEvent(e)))}
+                                onMouseLeave={() => hover(null)}
+                                onClick={() => onBar(b)} />
+                        ))}
+                        {repos.map((rl, k) => {
+                            const x = xOf(l.axis, Math.max(rl.start, l.axis.segs[0]?.t0 ?? rl.start))
+                            const lane = l.lanes + k
+                            return (
+                                <rect key={rl.repo} className="tlb repo" x={x} y={laneY(lane)} width={Math.max(2, l.axis.nowX - x)} height={r.lane}
+                                    onMouseEnter={(e) => hover({ ...tipAtEvent(e), head: rl.repo, tone: 'idle', lines: [`${rl.running} running: ${rl.checks.slice(0, 4).join(', ')}${rl.checks.length > 4 ? ', …' : ''}`, `${rl.label} · ${byWords(rl.by)}`, onRepo == null ? '' : 'click opens its hub when it serves'].filter((x) => x !== '') })}
+                                    onMouseLeave={() => hover(null)}
+                                    onClick={() => onRepo?.(rl)} />
+                            )
+                        })}
+                        <line className="tlnow" x1={l.axis.nowX} x2={l.axis.nowX} y1={0} y2={top + lanesH} />
+                    </svg>
+                    <Tip view={view} />
+                </div>
+            )}
+        </div>
+    )
+    if (!zoomable && !follow) return chart
+    return (
+        <div className={`tlchart${view.zoomed ? ' zoomed' : ''}`}>
+            {chart}
+            <span className="tlfloat">
+                {follow && !view.follow
+                    ? <button className="tllive" onClick={() => view.attach()} title={`the view stays where it is; back to now and follow it (${FOLLOW_KEY})`}>● live</button>
+                    : null}
+                {zoomable ? <span className="seg tlzoom">
+                <button onClick={() => zoomBy(1 / 2)} disabled={view.level <= 1} title="zoom out">−</button>
+                <button onClick={() => zoomBy(1 / view.level)} disabled={view.level <= 1} title="fit the whole record">fit</button>
+                <button onClick={() => zoomBy(2)} disabled={view.level >= view.maxZoom} title="zoom in (or the wheel over the chart)">+</button>
+                </span> : null}
+            </span>
+        </div>
+    )
+})

package/src/serve/hub-app/timeline-geometry.ts

@@ -0,0 +1,314 @@
+// The horizontal run timeline, as geometry: one time axis with now on the
+// right, every bar at its true start and length, parallel bars stacked in
+// lanes, and the zoom math. Pure, so a test pins every position and the view
+// only draws what this returns. The live strip is its one user, with two
+// windows: folded, a rolling window that ends now; unfolded, the whole record.
+//
+// ONE rule bends a plain linear axis over the record: an idle stretch longer
+// than GAP_MS is folded to a fixed GAP_PX slice that says how long it was,
+// the trailing one (last run to now) included, whose words grow with the
+// clock. Runs are seconds long and hours apart, and a linear axis over twelve
+// of them draws every bar as the same hairline. Inside a stretch of activity
+// the scale is linear and the same for every stretch, so two bars side by
+// side compare by width.
+import type { TimelineBar, TimelineInvocation } from '../../ledger/run-timeline.ts'
+
+/** an idle stretch longer than this is folded into a break */
+export const GAP_MS = 60_000
+/** how wide a folded idle slice is drawn: room for `idle 29m 55s` */
+export const GAP_PX = 80
+/** the margin at either end of the axis */
+export const PAD_PX = 8
+/** the zoom range. 1 fits the whole record in the view */
+export const ZOOM_MIN = 1
+/** the finest scale the zoom reaches, in px per ms: a millisecond is never
+ *  worth more than this */
+export const MAX_PX_PER_MS = 0.5
+/** ticks are never closer than this */
+export const TICK_MIN_PX = 72
+
+export type Span = { start: number; end: number }
+
+/** the rows of a chart, in px: band labels, the concurrency band, the lanes,
+ *  the time axis. Compact is the folded strip: thin lanes and nothing else */
+export const ROWS = {
+    full: { band: 16, conc: 20, lane: 8, gap: 2, axis: 18 },
+    compact: { band: 0, conc: 0, lane: 3, gap: 1, axis: 0 },
+} as const
+
+/** how tall a chart with `lanes` lanes draws */
+export const chartHeight = (lanes: number, compact = false): number => {
+    const r = compact ? ROWS.compact : ROWS.full
+    return r.band + r.conc + Math.max(r.lane, lanes * (r.lane + r.gap)) + r.axis
+}
+
+/** a stretch of activity drawn linearly, from x0 */
+export type Segment = { t0: number; t1: number; x0: number }
+/** a folded idle stretch, drawn at x, GAP_PX wide */
+export type Gap = { x: number; t0: number; t1: number }
+
+export type Axis = { segs: Segment[]; gaps: Gap[]; pxPerMs: number; width: number; now: number; nowX: number }
+
+/** the stretches of activity: every span merged with the next one when the
+ *  idle time between them is short enough to draw as it is, and the last one
+ *  carried to now when now is close */
+export function stretches(spans: Span[], now: number, gapMs = GAP_MS): Span[] {
+    const sorted = spans.filter((s) => s.end >= s.start).sort((a, b) => a.start - b.start)
+    const out: Span[] = []
+    for (const s of sorted) {
+        const last = out.at(-1)
+        if (last != null && s.start - last.end <= gapMs) last.end = Math.max(last.end, s.end)
+        else out.push({ ...s })
+    }
+    const last = out.at(-1)
+    if (last == null) return [{ start: now, end: now }]
+    if (now - last.end <= gapMs) last.end = Math.max(last.end, now)
+    return out
+}
+
+/** a rolling window: one linear stretch from `from` to now, no breaks */
+export function windowAxis(from: number, now: number, pxPerMs: number): Axis {
+    const seg = { t0: from, t1: now, x0: PAD_PX }
+    const nowX = PAD_PX + (now - from) * pxPerMs
+    return { segs: [seg], gaps: [], pxPerMs, width: nowX + PAD_PX, now, nowX }
+}
+
+/** the scale that fits a rolling window in `viewW` */
+export const fitWindow = (from: number, now: number, viewW: number): number => Math.max(1, viewW - 2 * PAD_PX) / Math.max(1, now - from)
+
+/** the scale that fits every stretch and every break in `viewW` */
+export function fitScale(spans: Span[], now: number, viewW: number): number {
+    const st = stretches(spans, now)
+    const active = st.reduce((a, s) => a + (s.end - s.start), 0)
+    const breaks = st.length - 1 + (now > st.at(-1)!.end ? 1 : 0)
+    const room = Math.max(1, viewW - 2 * PAD_PX - breaks * GAP_PX)
+    return active <= 0 ? MAX_PX_PER_MS : Math.min(MAX_PX_PER_MS, room / active)
+}
+
+/** the axis at a given scale */
+export function buildAxis(spans: Span[], now: number, pxPerMs: number): Axis {
+    const st = stretches(spans, now)
+    const segs: Segment[] = []
+    const gaps: Gap[] = []
+    let x = PAD_PX
+    st.forEach((s, i) => {
+        if (i > 0) {
+            gaps.push({ x, t0: st[i - 1]!.end, t1: s.start })
+            x += GAP_PX
+        }
+        segs.push({ t0: s.start, t1: s.end, x0: x })
+        x += (s.end - s.start) * pxPerMs
+    })
+    const lastEnd = st.at(-1)!.end
+    if (now > lastEnd) {
+        // the trailing slice: fixed width, its words grow with the clock
+        gaps.push({ x, t0: lastEnd, t1: now })
+        x += GAP_PX
+    }
+    return { segs, gaps, pxPerMs, width: x + PAD_PX, now, nowX: x }
+}
+
+/** where a moment is drawn. A moment inside a break sits on the break's
+ *  proportional point, so the inverse below round trips everywhere */
+export function xOf(a: Axis, t: number): number {
+    for (const s of a.segs) if (t >= s.t0 && t <= s.t1) return s.x0 + (t - s.t0) * a.pxPerMs
+    for (const g of a.gaps) if (t > g.t0 && t < g.t1) return g.x + ((t - g.t0) / (g.t1 - g.t0)) * GAP_PX
+    const first = a.segs[0]
+    if (first != null && t < first.t0) return PAD_PX
+    return a.nowX
+}
+
+/** which moment is drawn at x */
+export function tOf(a: Axis, x: number): number {
+    for (const s of a.segs) {
+        const x1 = s.x0 + (s.t1 - s.t0) * a.pxPerMs
+        if (x >= s.x0 && x <= x1) return s.t0 + (x - s.x0) / a.pxPerMs
+    }
+    for (const g of a.gaps) if (x > g.x && x < g.x + GAP_PX) return g.t0 + ((x - g.x) / GAP_PX) * (g.t1 - g.t0)
+    return x < PAD_PX ? (a.segs[0]?.t0 ?? a.now) : a.now
+}
+
+/** each bar's lane: the first lane free by the time it starts, so bars that
+ *  ran at once stack and bars that ran one after another share a lane */
+export function packLanes(bars: Span[], cap = Number.POSITIVE_INFINITY): { lanes: number[]; count: number; hidden: number } {
+    const order = bars.map((b, i) => i).sort((i, j) => bars[i]!.start - bars[j]!.start || bars[i]!.end - bars[j]!.end)
+    const ends: number[] = []
+    // -1 = past the cap: counted, never drawn over another bar
+    const lanes: number[] = new Array(bars.length).fill(-1)
+    let hidden = 0
+    for (const i of order) {
+        const b = bars[i]!
+        let lane = ends.findIndex((e) => e <= b.start)
+        if (lane === -1) {
+            if (ends.length >= cap) { hidden++; continue }
+            lane = ends.length
+            ends.push(b.end)
+        } else ends[lane] = b.end
+        lanes[i] = lane
+    }
+    return { lanes, count: ends.length, hidden }
+}
+
+/** the zoom after one wheel step, clamped to the range this record allows */
+export function zoomStep(zoom: number, deltaY: number, maxZoom: number): number {
+    return Math.min(maxZoom, Math.max(ZOOM_MIN, zoom * Math.exp(-deltaY * 0.002)))
+}
+
+/** the most a record can be zoomed: until a millisecond is MAX_PX_PER_MS */
+export const maxZoom = (fit: number): number => Math.max(ZOOM_MIN, MAX_PX_PER_MS / fit)
+
+/** where to scroll after a zoom so the moment under the pointer stays under
+ *  it. `cx` is the pointer's offset inside the viewport */
+export function anchorScroll(before: Axis, after: Axis, scrollLeft: number, cx: number): number {
+    const t = tOf(before, scrollLeft + cx)
+    return Math.max(0, xOf(after, t) - cx)
+}
+
+const STEPS = [100, 250, 500, 1_000, 2_000, 5_000, 10_000, 15_000, 30_000, 60_000, 120_000, 300_000, 600_000, 1_800_000, 3_600_000]
+
+/** the tick step for a scale: the smallest round step at least TICK_MIN_PX wide */
+export const tickStep = (pxPerMs: number): number => STEPS.find((s) => s * pxPerMs >= TICK_MIN_PX) ?? STEPS.at(-1)!
+
+/** the ticks along every stretch, at round moments of the clock */
+export function ticks(a: Axis): { x: number; t: number }[] {
+    const step = tickStep(a.pxPerMs)
+    const out: { x: number; t: number }[] = []
+    for (const s of a.segs) {
+        for (let t = Math.ceil(s.t0 / step) * step; t <= s.t1; t += step) out.push({ x: xOf(a, t), t })
+    }
+    return out
+}
+
+/** an idle stretch, in short units: `42s`, `4m 12s`, `3h 5m`, `2d 4h`.
+ *  Floored, so a stretch that grows with the clock turns over once a second,
+ *  and seconds are dropped past an hour */
+export function idleWords(ms: number): string {
+    const s = Math.max(0, Math.floor(ms / 1_000))
+    if (s < 60) return `${s}s`
+    const m = Math.floor(s / 60)
+    if (m < 60) return `${m}m ${s % 60}s`
+    const h = Math.floor(m / 60)
+    if (h < 48) return `${h}h ${m % 60}m`
+    return `${Math.floor(h / 24)}d ${h % 24}h`
+}
+
+/** a folded idle stretch as drawn: its slice, the words inside it (null when
+ *  not even the bare duration fits, the tooltip then says it), the whole
+ *  words, and whether it is the trailing one, growing until the next run */
+export type GapSlice = { x: number; w: number; t0: number; t1: number; text: string | null; full: string; live: boolean }
+
+/** every idle slice of an axis: `idle 4m 12s` when it fits, `4m 12s` when
+ *  only the duration does, no words when not even that */
+export function gapSlices(a: Axis, charPx = 6, padPx = 3): GapSlice[] {
+    const room = Math.floor((GAP_PX - 2 * padPx) / charPx)
+    return a.gaps.map((g) => {
+        const bare = idleWords(g.t1 - g.t0)
+        const full = `idle ${bare}`
+        const text = full.length <= room ? full : bare.length <= room ? bare : null
+        return { x: g.x, w: GAP_PX, t0: g.t0, t1: g.t1, text, full, live: g.t1 === a.now }
+    })
+}
+
+export type PlacedBar = TimelineBar & { x: number; w: number; lane: number; runId: string; label: string; by: string }
+export type PlacedBand = { runId: string; label: string; x: number; w: number; reds: number; running: boolean }
+
+/** one step of the concurrency band: `n` checks in flight from x for w px */
+export type ConcStep = { x: number; w: number; n: number; over: boolean }
+
+export type Layout = {
+    axis: Axis
+    bars: PlacedBar[]
+    bands: PlacedBand[]
+    lanes: number
+    hidden: number
+    /** how many checks were in flight at each moment, as steps */
+    conc: ConcStep[]
+    /** the most in flight at once in view */
+    concMax: number
+}
+
+/** how many bars are in flight at each moment, as a step function: the
+ *  count holds from each point to the next. An end and a start at the same
+ *  moment do not stack, and a bar of no length (a replay) is never in flight */
+export function concurrency(bars: Span[]): { t: number; n: number }[] {
+    const ev: [number, number][] = []
+    for (const b of bars) if (b.end > b.start) ev.push([b.start, 1], [b.end, -1])
+    ev.sort((a, b) => a[0] - b[0] || a[1] - b[1])
+    const out: { t: number; n: number }[] = []
+    let n = 0
+    for (const [t, d] of ev) {
+        n += d
+        const last = out.at(-1)
+        if (last != null && last.t === t) last.n = n
+        else out.push({ t, n })
+    }
+    return out
+}
+
+/** the stretches where the count ran past the cap */
+export function overCap(series: { t: number; n: number }[], cap: number): Span[] {
+    const out: Span[] = []
+    series.forEach((p, i) => {
+        const next = series[i + 1]
+        if (p.n > cap && next != null) {
+            const last = out.at(-1)
+            if (last != null && last.end === p.t) last.end = next.t
+            else out.push({ start: p.t, end: next.t })
+        }
+    })
+    return out
+}
+
+/** the label each band shows: whole when it fits before the next band's
+ *  label, cut with an ellipsis when only part fits, none when not even a
+ *  few letters do. The full label stays on hover */
+export function bandLabels(bands: { runId: string; label: string; x: number; w: number }[], charPx = 6, padPx = 3): { runId: string; x: number; text: string; full: string }[] {
+    const sorted = [...bands].sort((a, b) => a.x - b.x || a.runId.localeCompare(b.runId))
+    const out: { runId: string; x: number; text: string; full: string }[] = []
+    sorted.forEach((b, i) => {
+        const next = sorted.slice(i + 1).find((o) => o.x > b.x)
+        const blocked = sorted.slice(i + 1).some((o) => o.x === b.x)
+        if (blocked) return
+        const room = Math.min(b.w, (next?.x ?? Number.POSITIVE_INFINITY) - b.x) - 2 * padPx
+        const fits = Math.floor(room / charPx)
+        if (fits >= b.label.length) out.push({ runId: b.runId, x: b.x + padPx, text: b.label, full: b.label })
+        else if (fits >= 4) out.push({ runId: b.runId, x: b.x + padPx, text: `${b.label.slice(0, fits - 1)}…`, full: b.label })
+    })
+    return out
+}
+
+/** every invocation laid on one axis: a band per invocation, and its bars in
+ *  lanes shared across the whole axis. With `from`, the axis is the rolling
+ *  window from there to now, and what lies wholly before it is not drawn. A
+ *  bar still running ends at now. `laneCap` bounds the lanes, for a strip of
+ *  a fixed height */
+export function layoutTimeline(invs: TimelineInvocation[], now: number, pxPerMs: number, o: { from?: number; laneCap?: number; cap?: number } = {}): Layout {
+    const from = o.from
+    const inView = (end: number): boolean => from == null || end >= from
+    const endOf = (e: number, running?: boolean): number => (running === true ? now : e)
+    const shown = invs.filter((i) => inView(endOf(i.ended, i.running)))
+    const axis = from == null ? buildAxis(shown.map((i) => ({ start: i.started, end: endOf(i.ended, i.running) })), now, pxPerMs) : windowAxis(from, now, pxPerMs)
+    const flat = shown.flatMap((i) => i.bars.map((b) => ({ ...b, end: endOf(b.end, b.running), runId: i.runId, label: i.label, by: i.by }))).filter((b) => inView(b.end))
+    const { lanes, count, hidden } = packLanes(flat, o.laneCap)
+    const clip = (t: number): number => (from == null ? t : Math.max(from, t))
+    const bars = flat.flatMap((b, i) => {
+        if (lanes[i]! < 0) return []
+        const x = xOf(axis, clip(b.start))
+        return [{ ...b, x, w: xOf(axis, clip(b.end)) - x, lane: lanes[i]! }]
+    })
+    const bands = shown.map((i) => {
+        const x = xOf(axis, clip(i.started))
+        return { runId: i.runId, label: i.label, x, w: xOf(axis, clip(endOf(i.ended, i.running))) - x, reds: i.reds, running: i.running === true }
+    })
+    // every bar counts, the ones past the lane cap included: the band says
+    // how many ran, the lanes only what fits
+    const series = concurrency(flat.map((b) => ({ start: clip(b.start), end: b.end })))
+    const conc: ConcStep[] = []
+    series.forEach((p, i) => {
+        const next = series[i + 1]
+        if (next == null || p.n === 0) return
+        const x = xOf(axis, p.t)
+        conc.push({ x, w: xOf(axis, next.t) - x, n: p.n, over: o.cap != null && p.n > o.cap })
+    })
+    return { axis, bars, bands, lanes: count, hidden, conc, concMax: Math.max(0, ...series.map((p) => p.n)) }
+}

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

@@ -0,0 +1,62 @@
+// The runs page, as it holds the record: what the server shaped from the run
+// record (ledger/run-timeline.ts), and which invocations the reader opened.
+// Loaded when the page opens and again after a run ends, so it is never a
+// poll the rest of the page pays for. The live strip's unfolded chart reads
+// the same record from here for the runs older than its own window.
+import { testId } from '../../collections/collection-types.ts'
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { Timeline } from '../../ledger/run-timeline.ts'
+import type { HubSt } from './hub-st.ts'
+
+export type { Timeline }
+
+export class TimelineSvc {
+    data: Timeline | null = null
+    error = ''
+    loading = false
+    /** what the reader opened and closed. The newest invocation is open until
+     *  the reader closes it, every other one is shut until opened */
+    opened = new Set<string>()
+    closed = new Set<string>()
+    constructor(private st: HubSt) {
+        makeAutoObservable<this, 'st'>(this, { st: false, data: observableRef })
+    }
+
+    isOpen(runId: string, index: number): boolean {
+        return this.opened.has(runId) || (index === 0 && !this.closed.has(runId))
+    }
+
+    toggle(runId: string, index: number): void {
+        if (this.isOpen(runId, index)) {
+            this.opened.delete(runId)
+            this.closed.add(runId)
+        } else {
+            this.closed.delete(runId)
+            this.opened.add(runId)
+        }
+    }
+
+    /** the check page, from a bar or a row */
+    openCheck(checkId: string): void {
+        this.st.cols.select('checks', `check:${checkId}`)
+    }
+
+    /** a test file's page, from a row of the to fix list */
+    openTest(file: string): void {
+        this.st.cols.select('tests', testId(file))
+    }
+
+    async load(): Promise<void> {
+        runInAction(() => { this.loading = true })
+        try {
+            const r = await fetch('/api/timeline.json')
+            if (!r.ok) throw new Error(await r.text())
+            const t = (await r.json()) as Timeline
+            runInAction(() => { this.data = t; this.error = '' })
+        } catch (e) {
+            runInAction(() => { this.error = (e as Error).message })
+        } finally {
+            runInAction(() => { this.loading = false })
+        }
+    }
+}