rvlib-shipkit 1.1.1 → 1.3.0

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

@@ -1,14 +1,15 @@
-// THE PAGES OF THE TEST GROUPS: `tests` itself, one line per test check, and
+// THE PAGES OF THE TEST GROUPS: `tests` itself, every test file of the repo
+// slowest first then 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 type { FailingFile, FileTime, LastRun, Phases, Shape, TestCheckRow, TestCheckView, TestFileRow, 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 type { RepoSt } from './repo-st.ts'
 import { TimeAgo } from './time-ago.tsx'
 
 const pct = (n: number | null): string => (n == null ? '' : `${Math.round(n * 100)}%`)
@@ -22,13 +23,13 @@ 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 }) => (
+const FileLink = ({ app, file, name }: { app: RepoSt; 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 }) => (
+const Failing = observer(({ app, rows, showCheck }: { app: RepoSt; 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>
@@ -50,7 +51,7 @@ const Failing = observer(({ app, rows, showCheck }: { app: HubSt; rows: FailingF
 
 // ── where the time goes ─────────────────────────────────────────────────
 
-const Summary = observer(({ app, l }: { app: HubSt; l: LastRun }) => (
+const Summary = observer(({ app, l }: { app: RepoSt; l: LastRun }) => (
     <div className="tsum">
         <div className="tsline">
             <span><b>{l.files}</b> files</span>
@@ -121,7 +122,7 @@ const PhaseFacts = ({ p, wallMs }: { p: Phases; wallMs: number | null }) => {
     )
 }
 
-const FileRows = observer(({ app, files }: { app: HubSt; files: FileTime[] }) => (
+const FileRows = observer(({ app, files }: { app: RepoSt; files: FileTime[] }) => (
     <div className="rlist">
         <div className="rhead rtime">
             <span className="tleft">file</span>
@@ -152,13 +153,13 @@ const FileRows = observer(({ app, files }: { app: HubSt; files: FileTime[] }) =>
 
 // ── the pages ────────────────────────────────────────────────────────────
 
-const Loading = observer(({ app, check }: { app: HubSt; check: string | null }) => {
+const Loading = observer(({ app, check }: { app: RepoSt; 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 }) => {
+export const TestCheckPage = observer(({ app, check }: { app: RepoSt; check: string }) => {
     const i = app.cols.find('checks', `check:${check}`)
     const u = i?.check ?? null
     const v: TestCheckView | null = app.tests.check(check)
@@ -194,7 +195,7 @@ export const TestCheckPage = observer(({ app, check }: { app: HubSt; check: stri
     )
 })
 
-const CheckRows = observer(({ app, rows }: { app: HubSt; rows: TestCheckRow[] }) => (
+const CheckRows = observer(({ app, rows }: { app: RepoSt; rows: TestCheckRow[] }) => (
     <div className="rlist">
         <div className="rhead rcheckt">
             <span className="tleft">check</span>
@@ -217,16 +218,42 @@ const CheckRows = observer(({ app, rows }: { app: HubSt; rows: TestCheckRow[] })
     </div>
 ))
 
-export const TestsRootPage = observer(({ app }: { app: HubSt }) => {
+const STATUS_WORD = { pass: 'pass', fail: 'fail' } as const
+
+/** every file of every test check on one list, slowest first: the answer to
+ *  "which tests are slow", whatever check runs them */
+const AllFiles = observer(({ app, rows }: { app: RepoSt; rows: TestFileRow[] }) => (
+    <div className="rlist">
+        <div className="rhead rall">
+            <span className="tleft">file</span>
+            <span className="tleft">check</span>
+            <span>duration</span>
+            <span>status</span>
+            <span>when</span>
+        </div>
+        {rows.map((f) => (
+            <div key={f.file} className={`rline rall${f.status === 'fail' ? ' red' : ''}`} title={f.file} onClick={() => app.tests.openFile(f.file)}>
+                <span className="rwhat">{f.inUnit}</span>
+                <span className="rtag" title="the check that runs it">{f.check}</span>
+                <span className={`rnum ${fileTone(f)}`}>{f.ms == null ? <span className="dim">never ran</span> : fmtMs(f.ms)}</span>
+                <span className={`rnum ${f.status === 'fail' ? 'bad' : 'dim'}`}>{f.status == null ? '' : STATUS_WORD[f.status]}</span>
+                {f.at == null ? <span /> : <TimeAgo clock={app.clock} at={f.at} />}
+            </div>
+        ))}
+    </div>
+))
+
+export const TestsRootPage = observer(({ app }: { app: RepoSt }) => {
     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>
+                <h3 className="ctitle">every test</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>
+            <div className="usays">every test file by its last recorded duration, then each test check's last run. Click a file for its page, a check for where its time goes</div>
             {v == null ? <Loading app={app} check={null} /> : <>
+                <Section title={`every test file (${v.files.length})`} help="every file of every test check, by its last recorded duration in the shared run, slowest first; the ones that never ran here last. Its tone is against its budget: over it reads red"><AllFiles app={app} rows={v.files} /></Section>
                 <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 />
             </>}
@@ -234,5 +261,5 @@ export const TestsRootPage = observer(({ app }: { app: HubSt }) => {
     )
 })
 
-export const TestsPage = observer(({ app, check }: { app: HubSt; check: string | null }) =>
+export const TestsPage = observer(({ app, check }: { app: RepoSt; check: string | null }) =>
     check == null ? <TestsRootPage app={app} /> : <TestCheckPage app={app} check={check} />)

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

@@ -1,21 +1,22 @@
 // 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.
+// on the right. Two views draw it and nothing else draws a run: the dock at
+// the bottom of the page, what runs now in every repo, one group of lanes
+// each; and a repo's runs page, that repo's whole record. 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 { autoUpdate, FloatingPortal, useFloating } from '@floating-ui/react'
+import { useEffect, useLayoutEffect, useRef, type ReactNode } from 'react'
+import { middleware } from './floating.tsx'
 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 { bandLabels, gapSlices, ROWS, ticks, type GapSlice, type PlacedBar, type PlacedGroup, type RowSize } 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 BY_WORD: Record<string, string> = { cli: 'terminal', hub: 'hub', schedule: 'the plan', save: 'a save', 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
@@ -35,48 +36,59 @@ export const clockWords = (t: number): string => new Date(t).toLocaleTimeString(
  *  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 */
+/** a point on the viewport the tooltip floats from, 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,
+    head: b.group == null ? b.id : `${b.group} · ${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 })
 
+/** what a tooltip says: its head in its tone, then its lines */
+export const TipBody = ({ t }: { t: ChartTip }) => (
+    <>
+        <b className={`tl ${t.tone}`}>{t.head}</b>
+        {t.lines.map((l) => <span key={l}>{l}</span>)}
+    </>
+)
+
+/** the hovered mark's words, floated from the point the pointer entered at
+ *  (floating.tsx middleware: it flips and shifts to stay in the window) */
 const Tip = observer(({ view }: { view: ChartView }) => {
     const t = view.hover
+    const f = useFloating({ open: t != null, placement: 'bottom-start', strategy: 'fixed', middleware: middleware(0), whileElementsMounted: autoUpdate })
+    const x = t?.x ?? 0
+    const y = t?.y ?? 0
+    useLayoutEffect(() => {
+        f.refs.setPositionReference({ getBoundingClientRect: () => ({ x, y, left: x, top: y, right: x, bottom: y, width: 0, height: 0 }) })
+    }, [f.refs, x, y])
     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>
+        <FloatingPortal>
+            <div ref={f.refs.setFloating} className="tlaxtip" style={f.floatingStyles}><TipBody t={t} /></div>
+        </FloatingPortal>
     )
 })
 
 export type ChartProps = {
     view: ChartView
     compact?: boolean
-    /** other repos with something in flight, one collapsed lane each */
-    repos?: RepoLane[]
+    /** the lane sizes; compact draws `compact` and anything else `full` */
+    rows?: RowSize
     /** 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
+    /** what stands left of a group's lanes, when the chart has groups */
+    groupLabel?: (g: PlacedGroup) => ReactNode
     /** 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
@@ -91,7 +103,7 @@ 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) => {
+export const TimelineChart = observer(({ view, compact = false, rows, follow = false, onBar, groupLabel, zoomable = false }: ChartProps) => {
     const cap = view.cap
     const ref = useRef<HTMLDivElement>(null)
     /** where to scroll once the next zoom has rendered */
@@ -176,8 +188,8 @@ export const TimelineChart = observer(({ view, compact = false, repos = [], foll
             placed.current = true
         }
     })
-    const r = compact ? ROWS.compact : ROWS.full
-    const lanes = (l?.lanes ?? 0) + repos.length
+    const r = ROWS[rows ?? (compact ? 'compact' : 'full')]
+    const lanes = l?.lanes ?? 0
     const lanesH = lanes * (r.lane + r.gap)
     const top = r.band + r.conc
     const h = top + Math.max(r.lane, lanesH) + r.axis
@@ -196,7 +208,8 @@ export const TimelineChart = observer(({ view, compact = false, repos = [], foll
                 <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} />
+                            <rect key={b.runId} className={`tlband${b.reds > 0 ? ' red' : ''}${b.running ? ' run' : ''}`} x={b.x} width={Math.max(1, b.w)}
+                                y={b.lane0 == null ? 0 : laneY(b.lane0)} height={b.lane0 == null ? top + lanesH : (b.lanes ?? 1) * (r.lane + r.gap) - r.gap} />
                         ))}
                         {compact ? null : bandLabels(l.bands).map((b) => (
                             <text key={b.runId} className="tlbandlbl" x={b.x} y={11}
@@ -238,16 +251,9 @@ export const TimelineChart = observer(({ view, compact = false, repos = [], foll
                                 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)} />
-                            )
-                        })}
+                        {(l.groups ?? []).slice(1).map((g) => (
+                            <line key={g.key} className="tlgrp" x1={0} x2={l.axis.width} y1={laneY(g.lane0) - r.gap / 2} y2={laneY(g.lane0) - r.gap / 2} />
+                        ))}
                         <line className="tlnow" x1={l.axis.nowX} x2={l.axis.nowX} y1={0} y2={top + lanesH} />
                     </svg>
                     <Tip view={view} />
@@ -255,10 +261,20 @@ export const TimelineChart = observer(({ view, compact = false, repos = [], foll
             )}
         </div>
     )
-    if (!zoomable && !follow) return chart
+    // a group's label stands in a gutter of its own, level with its lanes,
+    // so it stays in sight however far the chart is panned
+    const gutter = groupLabel == null || l?.groups == null ? null : (
+        <div className="tlgutter" style={{ height: h }}>
+            {l.groups.map((g) => (
+                <div key={g.key} className="tlglbl" style={{ top: laneY(g.lane0), height: g.lanes * (r.lane + r.gap) - r.gap }}>{groupLabel(g)}</div>
+            ))}
+        </div>
+    )
+    const body = gutter == null ? chart : <div className="tlgroups">{gutter}{chart}</div>
+    if (!zoomable && !follow) return body
     return (
         <div className={`tlchart${view.zoomed ? ' zoomed' : ''}`}>
-            {chart}
+            {body}
             <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>

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

@@ -1,8 +1,9 @@
 // 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.
+// only draws what this returns. Two users: the dock at the bottom of the
+// page, a rolling window that ends now with one group of lanes per repo, and
+// a repo's runs page, its 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,
@@ -30,11 +31,14 @@ 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 */
+ *  the time axis. Compact is 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 },
+    /** the slim dock: compact, with lanes a repo's label fits beside */
+    slim: { band: 0, conc: 0, lane: 4, gap: 1, axis: 0 },
 } as const
+export type RowSize = keyof typeof ROWS
 
 /** how tall a chart with `lanes` lanes draws */
 export const chartHeight = (lanes: number, compact = false): number => {
@@ -209,8 +213,15 @@ export function gapSlices(a: Axis, charPx = 6, padPx = 3): GapSlice[] {
     })
 }
 
-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 }
+export type PlacedBar = TimelineBar & { x: number; w: number; lane: number; runId: string; label: string; by: string; group?: string }
+/** `lane0` and `lanes`: the lanes of its group, when the chart has groups */
+export type PlacedBand = { runId: string; label: string; x: number; w: number; reds: number; running: boolean; lane0?: number; lanes?: number }
+
+/** one repo's runs, a group of lanes of its own */
+export type ChartGroup = { key: string; invocations: TimelineInvocation[] }
+/** a group as drawn: its first lane, how many it takes, how many of its bars
+ *  did not fit */
+export type PlacedGroup = { key: string; lane0: number; lanes: number; hidden: number }
 
 /** 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 }
@@ -225,6 +236,8 @@ export type Layout = {
     conc: ConcStep[]
     /** the most in flight at once in view */
     concMax: number
+    /** the groups, top to bottom, when the chart has groups */
+    groups?: PlacedGroup[]
 }
 
 /** how many bars are in flight at each moment, as a step function: the
@@ -312,3 +325,25 @@ export function layoutTimeline(invs: TimelineInvocation[], now: number, pxPerMs:
     })
     return { axis, bars, bands, lanes: count, hidden, conc, concMax: Math.max(0, ...series.map((p) => p.n)) }
 }
+
+/** every group on one rolling window, stacked top to bottom: each packs its
+ *  own lanes, at least `minLanes` so its label fits beside them and at most
+ *  `laneCap`, and the concurrency band counts every group's bars together. A
+ *  window only: over the whole record each group would fold its own idle
+ *  stretches, and the groups would not share one axis */
+export function layoutGroups(groups: ChartGroup[], now: number, pxPerMs: number, o: { from: number; laneCap?: number; minLanes?: number; cap?: number }): Layout {
+    const all = layoutTimeline(groups.flatMap((g) => g.invocations), now, pxPerMs, { from: o.from, cap: o.cap, laneCap: 0 })
+    const bars: PlacedBar[] = []
+    const bands: PlacedBand[] = []
+    const placed: PlacedGroup[] = []
+    let lane0 = 0
+    for (const g of groups) {
+        const l = layoutTimeline(g.invocations, now, pxPerMs, { from: o.from, laneCap: o.laneCap })
+        const lanes = Math.max(o.minLanes ?? 1, l.lanes)
+        for (const b of l.bars) bars.push({ ...b, lane: b.lane + lane0, group: g.key })
+        for (const b of l.bands) bands.push({ ...b, lane0, lanes })
+        placed.push({ key: g.key, lane0, lanes, hidden: l.hidden })
+        lane0 += lanes
+    }
+    return { axis: all.axis, bars, bands, lanes: lane0, hidden: placed.reduce((a, g) => a + g.hidden, 0), conc: all.conc, concMax: all.concMax, groups: placed }
+}

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

@@ -1,12 +1,12 @@
 // 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.
+// poll the rest of the page pays for. The chart over the runs page reads the
+// same record from here for the runs older than the live 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'
+import type { RepoSt } from './repo-st.ts'
 
 export type { Timeline }
 
@@ -18,7 +18,7 @@ export class TimelineSvc {
      *  the reader closes it, every other one is shut until opened */
     opened = new Set<string>()
     closed = new Set<string>()
-    constructor(private st: HubSt) {
+    constructor(private st: RepoSt) {
         makeAutoObservable<this, 'st'>(this, { st: false, data: observableRef })
     }
 
@@ -46,10 +46,11 @@ export class TimelineSvc {
         this.st.cols.select('tests', testId(file))
     }
 
-    async load(): Promise<void> {
+    /** `fresh` after a run: the record it just wrote, not the warm answer */
+    async load(fresh = false): Promise<void> {
         runInAction(() => { this.loading = true })
         try {
-            const r = await fetch('/api/timeline.json')
+            const r = await fetch(this.st.url(fresh ? '/api/timeline.json?fresh=1' : '/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 = '' })

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

@@ -5,16 +5,17 @@
 // Every line sits on a grid of fixed columns (the .rline grids in hub.css):
 // numbers right aligned in tabular figures, ran and cached each a column of
 // their own told apart by colour, and no separator glyph on any line. The
-// shaping is the server's (ledger/run-timeline.ts). The chart of every run in
-// time is the live strip under the header, not this page.
+// shaping is the server's (ledger/run-timeline.ts). Over the tabs, the one run
+// chart (timeline-chart.tsx) draws this repo's whole record in time; what
+// runs now in every repo is the dock at the bottom of the page.
 import { observer } from 'mobx-react-lite'
 import { useEffect } from 'react'
 import { CACHED, RAN } from '../../core/outcome-words.ts'
 import type { InvocationSummary, SlowCheck, SuiteToFix, Timeline, TimelineBar, TimelineInvocation } from '../../ledger/run-timeline.ts'
-import { byWords, verdictWords } from './timeline-chart.tsx'
+import { byWords, TimelineChart, verdictWords } from './timeline-chart.tsx'
 import { durationTone, fmtMs } from './dur.ts'
 import { Help } from './help.tsx'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import { TimeAgo, stampWords } from './time-ago.tsx'
 import { checkName, editorHref } from './check-words.ts'
 import { RUNS_TABS, runsTab, runsTabId, type RunsTab } from './runs-tabs.ts'
@@ -40,7 +41,7 @@ export function tabBadge(tab: RunsTab, d: Timeline): TabBadge | null {
 
 /** who started a run, as a tag short enough for one fixed column. A starter
  *  this build does not name reads as the word the record holds */
-export const BY_TAG: Record<string, string> = { cli: 'terminal', hub: 'hub', schedule: 'daily', save: 'save', unknown: 'unknown' }
+export const BY_TAG: Record<string, string> = { cli: 'terminal', hub: 'hub', schedule: 'plan', save: 'save', unknown: 'unknown' }
 export const byTag = (by: string): string => BY_TAG[by] ?? by
 
 /** a check's verdict, as the label's colour class: the tree's `tl` tones */
@@ -90,7 +91,7 @@ export function childOrder(bars: readonly TimelineBar[]): TimelineBar[] {
 
 /** one check of a run, a child line on the run's grid: its word sits in the
  *  column its run counts it in */
-const CheckLine = ({ app, b, name }: { app: HubSt; b: TimelineBar; name: ChildName }) => (
+const CheckLine = ({ app, b, name }: { app: RepoSt; b: TimelineBar; name: ChildName }) => (
     <div className={`rline rchild${b.status === 'fail' ? ' red' : ''}`} onClick={() => app.timeline.openCheck(b.id)}
         title={[name.description ?? '', `${b.id}: ${verdictWords(b)}`, stampWords(b.start)].filter((x) => x !== '').join('\n')}>
         <span />
@@ -102,7 +103,7 @@ const CheckLine = ({ app, b, name }: { app: HubSt; b: TimelineBar; name: ChildNa
     </div>
 )
 
-const RunLine = observer(({ app, inv, n }: { app: HubSt; inv: TimelineInvocation; n: number }) => {
+const RunLine = observer(({ app, inv, n }: { app: RepoSt; inv: TimelineInvocation; n: number }) => {
     const open = app.timeline.isOpen(inv.runId, n)
     return (
         <>
@@ -122,12 +123,12 @@ const RunLine = observer(({ app, inv, n }: { app: HubSt; inv: TimelineInvocation
 
 /** the checks of an unfolded run, in a box of their own that scrolls: a full
  *  gate is fifty checks, which would push every other run off the page */
-const RunChecks = observer(({ app, bars }: { app: HubSt; bars: TimelineBar[] }) => {
+const RunChecks = observer(({ app, bars }: { app: RepoSt; bars: TimelineBar[] }) => {
     const names = checkNames(app.cols.resources)
     return <div className="rkids">{childOrder(bars).map((b) => <CheckLine key={`${b.id}:${b.start}`} app={app} b={b} name={nameOf(names, b.id)} />)}</div>
 })
 
-const Runs = ({ app, rows }: { app: HubSt; rows: TimelineInvocation[] }) => (
+const Runs = ({ app, rows }: { app: RepoSt; rows: TimelineInvocation[] }) => (
     rows.length === 0 ? <div className="rempty">no run on record yet</div> : <>{rows.map((inv, n) => <RunLine key={inv.runId} app={app} inv={inv} n={n} />)}</>
 )
 
@@ -142,7 +143,7 @@ const inUnit = (r: SuiteToFix): string => {
     return at < 0 ? r.file : r.file.slice(at + r.unit.length + 2)
 }
 
-const TestFiles = ({ app, rows, recorded }: { app: HubSt; rows: SuiteToFix[]; recorded: boolean }) => {
+const TestFiles = ({ app, rows, recorded }: { app: RepoSt; rows: SuiteToFix[]; recorded: boolean }) => {
     if (!recorded) return <div className="rempty">no test file run recorded yet: the next run of a test check records one</div>
     if (rows.length === 0) return <div className="rempty">every test file passed and fits the budget</div>
     return (
@@ -166,7 +167,7 @@ const TestFiles = ({ app, rows, recorded }: { app: HubSt; rows: SuiteToFix[]; re
 const FLAG_WORD = { over: 'at its ceiling', near: 'past half its ceiling', budget: 'over its budget' } as const
 
 /** two numbers side by side need their names once, above the column */
-const Slowest = ({ app, rows }: { app: HubSt; rows: SlowCheck[] }) => {
+const Slowest = ({ app, rows }: { app: RepoSt; rows: SlowCheck[] }) => {
     if (rows.length === 0) return <div className="rempty">nothing ran yet</div>
     return (
         <>
@@ -183,7 +184,7 @@ const Slowest = ({ app, rows }: { app: HubSt; rows: SlowCheck[] }) => {
     )
 }
 
-const Longest = ({ app, rows }: { app: HubSt; rows: InvocationSummary[] }) => {
+const Longest = ({ app, rows }: { app: RepoSt; rows: InvocationSummary[] }) => {
     if (rows.length === 0) return <div className="rempty">no run on record yet</div>
     return (
         <>
@@ -202,7 +203,7 @@ const Longest = ({ app, rows }: { app: HubSt; rows: InvocationSummary[] }) => {
     )
 }
 
-const Tabs = observer(({ app, on }: { app: HubSt; on: RunsTab }) => {
+const Tabs = observer(({ app, on }: { app: RepoSt; on: RunsTab }) => {
     const t = app.timeline
     const d = t.data
     return (
@@ -218,21 +219,37 @@ const Tabs = observer(({ app, on }: { app: HubSt; on: RunsTab }) => {
             })}
             <Help text={RUNS_TABS.find((x) => x.key === on)!.help} />
             <span className="sp" />
-            <button disabled={t.loading} onClick={() => void t.load()}>{t.loading ? 'reading…' : 'reload'}</button>
+            <button disabled={t.loading} onClick={() => void t.load(true)}>{t.loading ? 'reading…' : 'reload'}</button>
         </div>
     )
 })
 
-export const TimelineView = observer(({ app }: { app: HubSt }) => {
+/** what the chart over the tabs is, behind its (?) */
+export const RECORD_HELP = 'every check this repo ran, on record: the run bands, the time axis, and over the lanes how many checks ran at once, with the cap dashed and the stretches past it in orange. It opens on the last ten minutes and follows now: the right edge is the present. The wheel zooms and a drag pans; leaving the right edge stops the view where it is so a bar can be read, and ● live, the k key or panning back to the right edge follows now again. While a tooltip is open the view stands still. fit shows every run on record, and a click on a bar opens its check. What runs in every repo right now is the dock at the bottom of the page'
+
+/** this repo's whole record in time, its height held so it never jumps
+ *  under the eye as a run adds lanes and ends */
+const RecordChart = observer(({ app }: { app: RepoSt }) => {
+    const l = app.live
+    return (
+        <div className="rchart" style={{ height: l.held.h }}>
+            <span className="rchelp"><Help text={RECORD_HELP} /></span>
+            <TimelineChart view={l.chart} follow zoomable onBar={(b) => app.cols.select('checks', `check:${b.id}`)} />
+        </div>
+    )
+})
+
+export const TimelineView = observer(({ app }: { app: RepoSt }) => {
     const t = app.timeline
     useEffect(() => { void t.load() }, [t])
     const d = t.data
     const on = runsTab(app.sel?.t === 'item' ? app.sel.id : null)
     return (
         <div className="colcard tlcard">
+            <RecordChart app={app} />
             <Tabs app={app} on={on} />
             {t.error !== '' ? <div className="warnline">{t.error}</div> : null}
-            {d == null ? <div className="dim">reading the run record…</div> : (
+            {d == null ? <div className="dim twait"><span className="spin" />reading the run record…</div> : (
                 <div className={`rlist ${on}`}>
                     {on === 'runs' ? <Runs app={app} rows={d.invocations} />
                         : on === 'files' ? <TestFiles app={app} rows={d.testFiles} recorded={d.suitesRecorded} />

package/src/serve/hub-app/tree-row.tsx

@@ -4,7 +4,7 @@
 // around. No row carries prose: the words are the tooltip and the page it opens.
 import { observer } from 'mobx-react-lite'
 import type { CSSProperties } from 'react'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import { GLYPH, markOf, rowName, rowSlots, type TreeRow } from './tree-build.ts'
 
 /** the fold marker: a chevron, right when the branch is shut and down when
@@ -15,7 +15,7 @@ export const Caret = ({ open }: { open: boolean }): React.ReactElement => (
     </svg>
 )
 
-export const TreeRowView = observer(({ app, row }: { app: HubSt; row: TreeRow }) => {
+export const TreeRowView = observer(({ app, row }: { app: RepoSt; row: TreeRow }) => {
     const t = app.tree
     const u = app.checks
     const running = row.checks.some((id) => u.isRunning(id))

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

@@ -4,7 +4,7 @@
 // newline separated paths, text encodable and hand editable, and comes back
 // on reopen.
 import { makeAutoObservable } from 'mobx'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import type { Resource } from './hub-types.ts'
 import { buildPathTree, buildTypeTree, dirKeys, flattenTree, whenCounts, type TreeNode, type TreeRow } from './tree-build.ts'
 
@@ -37,7 +37,7 @@ export class TreeSvc {
     /** the row key under the keyboard cursor */
     cursor: string | null = null
 
-    constructor(private st: HubSt) {
+    constructor(private st: RepoSt) {
         this.tab = readStore(TAB_KEY) === 'type' ? 'type' : 'path'
         for (const p of readStore(EXPANDED_KEY).split('\n')) if (p !== '') this.expanded.add(p)
         makeAutoObservable<this, 'st'>(this, { st: false })