rvlib-shipkit 1.1.1 → 1.3.0

package/src/serve/hub-app/controls.css

@@ -0,0 +1,32 @@
+/* small controls any page can use. Colours are hub.css tokens, spacing its
+   scale (tests/hub-css-invariants.test.ts reads this sheet too) */
+
+/* the cycling button (cycle-button.tsx): the current label, one dot per
+   option with the current one in the ink colour, then its shortcut */
+.cycle{flex:none;display:inline-flex;align-items:center;gap:var(--s1);height:18px;padding:0 var(--s1);background:var(--panel2);border:1px solid var(--line);border-radius:9px;
+ color:var(--ink);font-size:10px;line-height:1;cursor:pointer}
+.cycle:hover{border-color:var(--accent)}
+.cyclbl{min-width:26px;text-align:center}
+.cycdots{display:inline-flex;align-items:center;gap:var(--s0)}
+.cycdot{width:4px;height:4px;border-radius:2px;background:var(--dim);opacity:.5}
+.cycdot.on{background:var(--ink);opacity:1}
+.cyckey{font:9px/1 ui-monospace,Menlo,monospace;color:var(--dim);background:none;border:0;padding:0}
+
+/* a row of pills (pill-row.tsx): one row always, the rest folded into +N.
+   The probe is an invisible copy that only gives the widths */
+.pchips{position:relative;display:flex;align-items:center;gap:var(--s1);min-width:0;overflow:hidden;white-space:nowrap}
+.pchipw{flex:none;display:inline-flex}
+.pchipprobe{position:absolute;left:0;top:0;width:max-content;overflow:visible;visibility:hidden;pointer-events:none}
+.pchip{display:inline-flex;align-items:center;gap:var(--s1);height:16px;padding:0 var(--s1);border:1px solid var(--line);border-radius:8px;
+ background:var(--panel2);color:var(--dim);font-size:10px;line-height:1}
+.pchip.accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
+.pchip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
+.pchip img,.pchip .dgico{flex:none;border-radius:2px}
+.pcmark{font-weight:700}
+.pcmark.ok{color:var(--ok)}
+.pcmark.red{color:var(--red)}
+.pcmark.warn{color:var(--warn)}
+.pcmark.dim{color:var(--dim)}
+.pctext{color:var(--ink);opacity:.8}
+.pchip.accent .pctext,.pchip.warn .pctext{color:inherit;opacity:1}
+.pcage{color:var(--dim);opacity:.75}

package/src/serve/hub-app/cycle-button.tsx

@@ -0,0 +1,36 @@
+// a button that cycles through a few options: it shows only the current
+// option's label, then one dot per option (the current one lit), then its
+// shortcut. A click moves to the next option, the last one wrapping to the
+// first; the page's key handler calls the same move for the shortcut.
+
+export type CycleOption<T extends string> = { readonly value: T; readonly label: string }
+
+/** the option after `value`, the last one wrapping to the first */
+export function nextOption<T extends string>(options: readonly CycleOption<T>[], value: T): T {
+    const i = options.findIndex((o) => o.value === value)
+    return options[(i + 1) % options.length]!.value
+}
+
+export function CycleButton<T extends string>(p: {
+    options: readonly CycleOption<T>[]
+    value: T
+    onChange: (next: T) => void
+    /** the key that cycles it too, shown as a badge */
+    shortcut?: string
+    /** what the button is for, on hover */
+    title?: string
+    className?: string
+}) {
+    const cur = p.options.find((o) => o.value === p.value)
+    const next = p.options.find((o) => o.value === nextOption(p.options, p.value))
+    const hint = `${p.title == null ? '' : `${p.title}\n`}click${p.shortcut == null ? '' : ` or ${p.shortcut}`}: ${next?.label ?? ''}`
+    return (
+        <button className={`cycle${p.className == null ? '' : ` ${p.className}`}`} title={hint} onClick={() => p.onChange(nextOption(p.options, p.value))}>
+            <span className="cyclbl">{cur?.label ?? p.value}</span>
+            <span className="cycdots" aria-hidden="true">
+                {p.options.map((o) => <i key={o.value} className={`cycdot${o.value === p.value ? ' on' : ''}`} />)}
+            </span>
+            {p.shortcut == null ? null : <kbd className="cyckey">{p.shortcut}</kbd>}
+        </button>
+    )
+}

package/src/serve/hub-app/dock-anim.ts

@@ -0,0 +1,25 @@
+// the dock's size change, eased: the class on the page's vertical split
+// carries a flex-grow transition (dock.css), put on only while a size change
+// resizes the panels, so a drag, a window resize and the first paint stay
+// instant. prefers-reduced-motion drops the transition in the sheet.
+
+/** how long the dock takes to reach its new size */
+export const DOCK_ANIM_MS = 180
+/** the class that eases the split's panels */
+export const DOCK_ANIM = 'dockanim'
+
+const timers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>()
+
+/** runs `resize` with the class on `group`, and takes it off once the
+ *  transition ended; a second call meanwhile keeps it on until its own end */
+export function animateDock(group: HTMLElement | null, resize: () => void, ms = DOCK_ANIM_MS + 40): void {
+    if (group == null) return resize()
+    const was = timers.get(group)
+    if (was != null) clearTimeout(was)
+    group.classList.add(DOCK_ANIM)
+    resize()
+    timers.set(group, setTimeout(() => {
+        timers.delete(group)
+        group.classList.remove(DOCK_ANIM)
+    }, ms))
+}

package/src/serve/hub-app/dock-st.ts

@@ -0,0 +1,329 @@
+// THE DOCK, as the page holds it: the run chart docked under the whole page,
+// every house repo's runs on one clock, one group of lanes per repo that ran
+// something in the window. A node of the root (home-st.ts).
+//
+// Three sizes, cycled by one key (keys.ts), and never nothing: the line, one
+// row saying what runs, what waits and the last check that ended; slim, the
+// last two minutes in thin lanes; open, the last ten in the full chart, its
+// height dragged and kept. The size and the height are read from this browser
+// before the first render, so the page paints at its final layout and a
+// toggle moves nothing but the boundary.
+//
+// the one constraint a reader breaks first: it polls ONE route for every repo
+// (/api/house-runs.json, cached on the server), and only while the page is
+// visible. In a background tab it costs nothing.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { HouseGroup, HouseView } from '../../ledger/house-runs.ts'
+import type { TimelineBar } from '../../ledger/run-timeline.ts'
+import { ChartView, type ChartSource } from './chart-view.ts'
+import { nextOption, type CycleOption } from './cycle-button.tsx'
+import { ClockSvc } from './clock-svc.ts'
+import { serverNow } from './live-svc.ts'
+import { ROWS, type RowSize } from './timeline-geometry.ts'
+import { ageWords } from './time-ago.tsx'
+import type { HomeSt } from './home-st.ts'
+
+export type DockSize = 'line' | 'slim' | 'open'
+
+/** the sizes, in the order the size button and the key cycle them */
+export const DOCK_SIZES = [{ value: 'line', label: 'line' }, { value: 'slim', label: 'slim' }, { value: 'open', label: 'open' }] as const satisfies readonly CycleOption<DockSize>[]
+
+/** the one key's cycle: the line, slim, open, the line again */
+export const nextSize = (s: DockSize): DockSize => nextOption(DOCK_SIZES, s)
+
+/** where this browser keeps the dock, and its heights in px */
+export const DOCK = { sizeKey: 'hub:dock', heightKey: 'hub:dock-height', line: 22, slim: 72, min: 140, max: 720, def: 280 } as const
+
+/** how often it asks while it shows: the server shares one answer a second,
+ *  and the open dock redraws at this pace */
+export const DOCK_POLL_MS = 2_000
+/** the slim dock's window; open, the server's whole window (LIVE_HISTORY_MS) */
+export const SLIM_WINDOW_MS = 120_000
+/** the most lanes one repo takes */
+export const LANE_CAP: Record<Exclude<DockSize, 'line'>, number> = { slim: 3, open: 8 }
+/** the height a group's label needs beside its lanes */
+export const LABEL_PX = 14
+/** the fewest lanes a group takes at a lane size, so its label fits */
+export const minLanesFor = (rows: RowSize): number => Math.ceil(LABEL_PX / (ROWS[rows].lane + ROWS[rows].gap))
+
+/** a kept size, read. `hidden`, which an older build kept, is the line now */
+export const parseSize = (v: unknown): DockSize => (v === 'line' || v === 'hidden' ? 'line' : v === 'open' ? 'open' : 'slim')
+
+/** an open height in its bounds, or the default for anything else */
+export const clampHeight = (v: unknown): number => {
+    const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : NaN
+    return Number.isFinite(n) && n >= DOCK.min && n <= DOCK.max ? Math.round(n) : DOCK.def
+}
+
+/** the dock as this browser left it: slim at the default height when it
+ *  kept nothing or cannot say */
+export function readDock(): { size: DockSize; height: number } {
+    try {
+        return { size: parseSize(globalThis.localStorage?.getItem(DOCK.sizeKey)), height: clampHeight(globalThis.localStorage?.getItem(DOCK.heightKey)) }
+    } catch {
+        return { size: 'slim', height: DOCK.def }
+    }
+}
+
+const keep = (key: string, v: string): void => {
+    try {
+        globalThis.localStorage?.setItem(key, v)
+    } catch { /* private window or blocked site data: the dock lasts the tab */ }
+}
+
+/** the dock's height in px at a size */
+export const dockPx = (size: DockSize, height: number): number => (size === 'line' ? DOCK.line : size === 'slim' ? DOCK.slim : height)
+
+/** a verdict as one glyph */
+const MARK: Record<TimelineBar['status'], string> = { pass: '✓', fail: '✗', warn: '!', skip: '○' }
+
+/** the line's words: `2 running · 5 queued · last: app-one typecheck ✓ 12s
+ *  ago`, `idle` with the last check when the window holds one. Queued is
+ *  every check of a run in flight that is neither done nor running */
+export function lineWords(view: HouseView | null, now: number): string {
+    if (view == null) return 'reading…'
+    let last: { repo: string; bar: TimelineBar } | null = null
+    let queued = 0
+    for (const g of view.groups) {
+        queued += g.runs.reduce((a, r) => a + r.total - r.done, 0) - g.busy
+        for (const i of g.invocations) for (const b of i.bars) if (b.running !== true && (last == null || b.end > last.bar.end)) last = { repo: g.repo, bar: b }
+    }
+    const lastWords = last == null ? '' : `last: ${last.repo} ${last.bar.id} ${MARK[last.bar.status]}${last.bar.replayed ? ' cached' : ''} ${ageWords(last.bar.end, now)}`
+    const head = view.busy > 0 ? `${view.busy} running · ${Math.max(0, queued)} queued` : 'idle'
+    return [head, lastWords, ...(view.held ?? [])].filter((w) => w !== '').join(' · ')
+}
+
+/** a pill of the dock's header: a word or two in a dim box, its hover the
+ *  whole story. The last run adds its repo, its verdict and its age */
+export type DockPill = {
+    key: 'state' | 'queued' | 'held' | 'last' | 'settling' | 'window'
+    tone: 'dim' | 'accent' | 'warn'
+    text: string
+    title: string
+    repo?: string
+    mark?: string
+    markTone?: 'ok' | 'red' | 'warn' | 'dim'
+    age?: string
+}
+
+/** the verdict glyph a pill wears, and its colour */
+const PILL_MARK: Record<TimelineBar['status'], { mark: string; tone: 'ok' | 'red' | 'warn' | 'dim' }> = {
+    pass: { mark: '✓', tone: 'ok' }, fail: { mark: '✕', tone: 'red' }, warn: { mark: '!', tone: 'warn' }, skip: { mark: '○', tone: 'dim' },
+}
+
+export const windowWords = (ms: number): string => `last ${Math.round(ms / 60_000)} min`
+
+/** the longest check id a pill shows whole */
+export const ID_MAX = 16
+export const cutId = (id: string): string => (id.length <= ID_MAX ? id : `${id.slice(0, ID_MAX - 1)}…`)
+
+/** `settling: app-one, 48s`, one line of Planner.held */
+const SETTLING = /^settling: (.+), (\d+s)$/
+
+/** the header's status, left to right: what runs or idle, what waits, what
+ *  holds the plan, the last check that ended, the settling repos as one,
+ *  and slim and open their window. The row folds from the end */
+export function dockPills(view: HouseView | null, now: number, size: DockSize): DockPill[] {
+    if (view == null) return [{ key: 'state', tone: 'dim', text: 'reading…', title: 'the runs of every repo are being read' }]
+    let last: { repo: string; bar: TimelineBar } | null = null
+    let queued = 0
+    for (const g of view.groups) {
+        queued += g.runs.reduce((a, r) => a + r.total - r.done, 0) - g.busy
+        for (const i of g.invocations) for (const b of i.bars) if (b.running !== true && (last == null || b.end > last.bar.end)) last = { repo: g.repo, bar: b }
+    }
+    queued = Math.max(0, queued)
+    const flight = `${view.busy} check(s) in flight in every repo, cap ${view.cap}, ${queued} waiting for a slot`
+    const out: DockPill[] = [view.busy > 0
+        ? { key: 'state', tone: 'accent', text: `${view.busy} running`, title: flight }
+        : { key: 'state', tone: 'dim', text: 'idle', title: flight }]
+    if (queued > 0) out.push({ key: 'queued', tone: 'dim', text: `${queued} queued`, title: flight })
+    const settling: string[] = []
+    for (const line of view.held ?? []) {
+        const m = line.match(SETTLING)
+        if (m != null) settling.push(`${m[1]} ${m[2]}`)
+        else out.push({ key: 'held', tone: 'warn', text: line.replace(/ on \d+ cores$/, ''), title: line })
+    }
+    if (last != null) {
+        const v = PILL_MARK[last.bar.status]
+        out.push({
+            key: 'last', tone: 'dim', repo: last.repo, mark: v.mark, markTone: v.tone, text: cutId(last.bar.id), age: ageWords(last.bar.end, now),
+            title: `the last check that ended: ${last.repo} ${last.bar.id} ${v.mark}${last.bar.replayed ? ' cached' : ''} ${ageWords(last.bar.end, now)}`,
+        })
+    }
+    if (settling.length > 0) out.push({ key: 'settling', tone: 'dim', text: `settling ${settling.length}`, title: settling.join('\n') })
+    if (size !== 'line') {
+        const ms = size === 'open' ? view.historyMs : SLIM_WINDOW_MS
+        out.push({ key: 'window', tone: 'dim', text: windowWords(ms), title: 'the window the chart draws, ending now' })
+    }
+    return out
+}
+
+/** the groups a window draws: a repo that ran nothing since `from` has none,
+ *  and the rest stand in the order of the project list, a repo it does not
+ *  list after them by name */
+export function dockGroups(view: HouseView, from: number, order: readonly string[]): HouseGroup[] {
+    const at = (repo: string): number => {
+        const i = order.indexOf(repo)
+        return i < 0 ? order.length : i
+    }
+    return view.groups
+        .filter((g) => g.invocations.some((i) => i.running === true || i.ended >= from))
+        .sort((a, b) => at(a.repo) - at(b.repo) || a.repo.localeCompare(b.repo))
+}
+
+/** what the chart draws at a size: the window that ends now, one group per repo */
+export function dockSource(view: HouseView | null, now: number, size: DockSize, order: readonly string[]): ChartSource | null {
+    if (view == null || size === 'line') return null
+    const windowMs = size === 'open' ? view.historyMs : SLIM_WINDOW_MS
+    const groups = dockGroups(view, now - windowMs, order)
+    return {
+        invocations: groups.flatMap((g) => g.invocations),
+        groups: groups.map((g) => ({ key: g.repo, invocations: g.invocations })),
+        now,
+        windowMs,
+        laneCap: LANE_CAP[size],
+        minLanes: minLanesFor(size === 'open' ? 'full' : 'slim'),
+        zoomable: size === 'open',
+        cap: view.cap,
+    }
+}
+
+export class DockSt {
+    size: DockSize
+    /** the open height, kept even while the line or slim shows */
+    height: number
+    view: HouseView | null = null
+    /** the page clock when `view` arrived */
+    receivedAt = 0
+    error = ''
+    /** the page is in front: a background tab asks nothing */
+    visible = true
+    clock = new ClockSvc()
+    chart: ChartView
+    private timer: ReturnType<typeof setInterval> | null = null
+    private inFlight = false
+    private readonly onVisibility = (): void => this.setVisible(globalThis.document?.visibilityState !== 'hidden')
+
+    constructor(private home: HomeSt) {
+        const kept = readDock()
+        this.size = kept.size
+        this.height = kept.height
+        this.chart = new ChartView(null, () => dockSource(this.view, this.now, this.size, this.home.projects.list.map((p) => p.name)))
+        makeAutoObservable<this, 'home' | 'timer' | 'inFlight' | 'onVisibility'>(this, { home: false, timer: false, inFlight: false, onVisibility: false, view: observableRef, chart: false, clock: false })
+    }
+
+    /** its height on the page now */
+    get px(): number {
+        return dockPx(this.size, this.height)
+    }
+    get rows(): RowSize {
+        return this.size === 'open' ? 'full' : 'slim'
+    }
+    get windowMs(): number {
+        return this.size === 'open' ? (this.view?.historyMs ?? SLIM_WINDOW_MS) : SLIM_WINDOW_MS
+    }
+    /** the server clock, as of the page clock's last tick */
+    get now(): number {
+        return this.view == null ? this.clock.now : serverNow(this.view, this.receivedAt, this.clock.now)
+    }
+    get groups(): HouseGroup[] {
+        return this.view == null ? [] : dockGroups(this.view, this.now - this.windowMs, this.home.projects.list.map((p) => p.name))
+    }
+    /** it asks while the page is in front: every size shows something */
+    get wanted(): boolean {
+        return this.visible
+    }
+    /** the line's words, on the clock: the header's whole status on hover */
+    get line(): string {
+        return lineWords(this.view, this.now)
+    }
+    /** the header's status as pills, on the clock */
+    get pills(): DockPill[] {
+        return dockPills(this.view, this.now, this.size)
+    }
+
+    cycle(): void {
+        this.setSize(nextSize(this.size))
+    }
+    setSize(s: DockSize): void {
+        if (s === this.size) return
+        this.size = s
+        keep(DOCK.sizeKey, s)
+        // a size opens live, on its whole window
+        this.chart.home()
+        this.chart.attach()
+        this.sync()
+    }
+    /** a drag of the separator above the open dock ended at this height */
+    setHeight(px: number): void {
+        this.height = clampHeight(Math.round(Math.min(DOCK.max, Math.max(DOCK.min, px))))
+        keep(DOCK.heightKey, String(this.height))
+    }
+    setVisible(v: boolean): void {
+        this.visible = v
+        this.sync()
+    }
+
+    /** start or stop asking, as `wanted` says */
+    sync(): void {
+        if (this.wanted && this.timer == null) {
+            void this.poll()
+            this.timer = setInterval(() => void this.poll(), DOCK_POLL_MS)
+        } else if (!this.wanted && this.timer != null) {
+            clearInterval(this.timer)
+            this.timer = null
+        }
+        // the line's ages and the slim chart's two minutes move every second,
+        // so they tick. Open, a thousand bars over ten minutes redraw only
+        // when an answer lands (each answer ticks the clock): a second's
+        // slide is under two px there, and a redraw a second is what costs
+        if (this.wanted && this.size !== 'open') this.clock.start()
+        else this.clock.stop()
+    }
+
+    boot(): void {
+        globalThis.document?.addEventListener('visibilitychange', this.onVisibility)
+        this.onVisibility()
+    }
+    dispose(): void {
+        globalThis.document?.removeEventListener('visibilitychange', this.onVisibility)
+        this.visible = false
+        this.sync()
+    }
+
+    async poll(): Promise<void> {
+        // a slow answer must not stack a second request behind it
+        if (this.inFlight) return
+        this.inFlight = true
+        try {
+            const r = await fetch('/api/house-runs.json')
+            if (!r.ok) throw new Error(await r.text())
+            const v = (await r.json()) as HouseView
+            runInAction(() => {
+                this.view = v
+                this.receivedAt = Date.now()
+                this.clock.tick(this.receivedAt)
+                this.error = ''
+            })
+        } catch (e) {
+            runInAction(() => { this.error = `the runs could not be read: ${(e as Error).message}` })
+        } finally {
+            this.inFlight = false
+        }
+    }
+
+    /** a bar: its check's page in its repo */
+    openCheck(repo: string, check: string): void {
+        const h = this.home
+        if (h.machine != null) return h.openCheck(repo, check)
+        const own = h.shown
+        if (own != null && own.name === repo) own.cols.select('checks', `check:${check}`)
+        else h.projects.onSelect(repo)
+    }
+    /** a group's label: its repo's page */
+    openRepo(repo: string): void {
+        const h = this.home
+        if (h.machine != null) return h.select(repo)
+        if (h.shown?.name !== repo) h.projects.onSelect(repo)
+    }
+}

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

@@ -0,0 +1,68 @@
+// THE DOCK, drawn: under the whole page, on every page, what shipkit runs in
+// every house repo, as the one run chart (timeline-chart.tsx) with one group
+// of lanes per repo. Its header is one row: the size as a cycling button,
+// then the status as small pills that fold into +N rather than wrap. The
+// state is dock-st.ts; the height is the page's panel (hub-app.tsx).
+import { observer } from 'mobx-react-lite'
+import type { HomeSt } from './home-st.ts'
+import { CycleButton } from './cycle-button.tsx'
+import { DOCK_KEY } from './keys.ts'
+import { DOCK_SIZES, SLIM_WINDOW_MS, windowWords, type DockPill } from './dock-st.ts'
+import { PillRow } from './pill-row.tsx'
+import { TimelineChart } from './timeline-chart.tsx'
+import type { PlacedGroup } from './timeline-geometry.ts'
+
+/** what the dock is, on its size button's hover */
+export const DOCK_HELP = `every check shipkit runs in every repo, whoever started it: a page, an agent in a terminal, the plan. The line, the pills alone; slim, the last two minutes, one group of lanes per repo; open, the last ten, zoomed by the wheel and panned by a drag, its height dragged at the top edge`
+
+/** a group's label: the repo's icon and its name in its colour */
+const GroupLabel = observer(({ app, g }: { app: HomeSt; g: PlacedGroup }) => {
+    const p = app.projects.list.find((x) => x.name === g.key)
+    const id = app.projects.identityOf(g.key)
+    return (
+        <button className="dgroup" onClick={() => app.dock.openRepo(g.key)}
+            title={`${g.key}: open the repo${g.hidden > 0 ? `\n${g.hidden} check run(s) did not fit in its lanes` : ''}`}>
+            {p?.icon != null ? <img src={p.icon} alt="" width={12} height={12} draggable={false} /> : <i className="dgico" style={{ background: id.colorDark }} />}
+            <span style={{ color: id.colorDark }}>{g.key}</span>
+            {/* slim folds its lanes on purpose: the count is news only open */}
+            {g.hidden > 0 && app.dock.size === 'open' ? <b>+{g.hidden}</b> : null}
+        </button>
+    )
+})
+
+/** one pill's face: the repo icon on the last run, its verdict, its words, its age */
+const PillFace = observer(({ app, p }: { app: HomeSt; p: DockPill }) => {
+    const pj = p.repo == null ? null : app.projects.list.find((x) => x.name === p.repo)
+    return (
+        <span className={`pchip ${p.tone}`}>
+            {p.repo == null ? null : pj?.icon != null
+                ? <img src={pj.icon} alt="" width={12} height={12} draggable={false} />
+                : <i className="dgico" style={{ background: app.projects.identityOf(p.repo).colorDark }} />}
+            {p.mark == null ? null : <b className={`pcmark ${p.markTone ?? 'dim'}`}>{p.mark}</b>}
+            <span className="pctext">{p.text}</span>
+            {p.age == null ? null : <span className="pcage">{p.age}</span>}
+        </span>
+    )
+})
+
+export const Dock = observer(({ app }: { app: HomeSt }) => {
+    const d = app.dock
+    const v = d.view
+    const groups = d.groups
+    return (
+        <div className={`dock ${d.size}`}>
+            <div className="dhead">
+                <CycleButton options={DOCK_SIZES} value={d.size} onChange={(s) => d.setSize(s)} shortcut={DOCK_KEY} title={DOCK_HELP} />
+                <PillRow items={d.pills.map((p) => ({ key: p.key, title: p.title, node: <PillFace app={app} p={p} /> }))} />
+                {d.error !== '' ? <span className="warnline">{d.error}</span> : null}
+            </div>
+            {d.size === 'line' ? null : <div className="dbody">
+                {v == null ? null : groups.length === 0
+                    ? <div className="dempty">nothing ran in the {windowWords(d.size === 'open' ? v.historyMs : SLIM_WINDOW_MS)}</div>
+                    : <TimelineChart view={d.chart} compact={d.size === 'slim'} rows={d.rows} follow zoomable={d.size === 'open'}
+                        onBar={(b) => { if (b.group != null) d.openCheck(b.group, b.id) }}
+                        groupLabel={(g) => <GroupLabel app={app} g={g} />} />}
+            </div>}
+        </div>
+    )
+})

package/src/serve/hub-app/dock.css

@@ -0,0 +1,35 @@
+/* ── the dock (dock-view.tsx): the run chart under the whole page, every
+   repo's runs, one group of lanes each. Its height is its panel's, set by
+   the page before the first paint, so nothing inside it sizes the page. The
+   header is one row, the chart under it scrolls when the groups outgrow it ── */
+.dock{display:flex;flex-direction:column;height:100%;background:var(--bg-dock);font-size:11px;color:var(--dim)}
+.dhead{display:flex;gap:var(--s2);align-items:center;height:22px;flex:none;padding:0 var(--s3)}
+/* the status pills take the room left, and fold rather than wrap */
+.dhead .pchips{flex:1}
+.dbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 var(--s3) var(--s1);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
+.dempty{padding:var(--s1) 0;color:var(--dim)}
+.dock .tlax.compact{height:auto;padding-top:0}
+/* a group's label stands in a gutter left of the chart, level with its lanes */
+.tlgroups{display:flex;align-items:flex-start}
+.tlgroups > .tlax,.tlgroups > .tlchart{flex:1;min-width:0}
+.tlgutter{position:relative;flex:none;width:132px}
+.tlglbl{position:absolute;left:0;right:0;display:flex;align-items:center;overflow:hidden}
+.dgroup{display:flex;gap:var(--s1);align-items:center;max-width:100%;padding:0;border:0;background:transparent;font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
+.dgroup img{flex:none;border-radius:2px}
+.dgroup span{overflow:hidden;text-overflow:ellipsis}
+.dgroup:hover span{text-decoration:underline}
+.dgroup b{font-weight:500;color:var(--warn)}
+.dgico{flex:none;width:8px;height:8px;border-radius:2px}
+.tlgrp{stroke:var(--line)}
+/* the separator over the dock: a 1px rule, dragged only while the dock is open */
+.rsep.hsep{width:auto;height:1px}
+.rsep.hsep::before{top:-4px;bottom:-4px;left:0;right:0;cursor:row-resize}
+.rsep.hsep.fixed::before{cursor:default;pointer-events:none}
+.rsep.hsep.fixed:hover{background:var(--line)}
+/* a size change of the dock slides the boundary (dock-anim.ts): the class is
+   on the split only while it runs, so a drag and the first paint stay instant */
+.dockanim>[data-panel]{transition:flex-grow 180ms ease-out}
+@media (prefers-reduced-motion:reduce){.dockanim>[data-panel]{transition:none}}
+/* the runs page's record chart: its (?) in its top left corner */
+.rchart{position:relative;flex:none;overflow:hidden;margin-bottom:var(--s2)}
+.rchelp{position:absolute;top:0;left:0;z-index:4}

package/src/serve/hub-app/floating.tsx

@@ -0,0 +1,49 @@
+// THE way the page shows anything that floats over it: a tooltip, a help
+// bubble, a process log on hover, a hover card. @floating-ui/react places it
+// (flip to stay in the window, shift off its edges, an offset from the
+// trigger), a portal lifts it out of every box that clips, and hover opens
+// it after a short delay, so a pointer passing by never flickers one open.
+// Nothing here is positioned by hand.
+import { autoUpdate, flip, FloatingPortal, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, type Placement } from '@floating-ui/react'
+import { observer, useLocalObservable } from 'mobx-react-lite'
+import type { HTMLAttributes, ReactNode } from 'react'
+
+/** how long a pointer rests on a trigger before its float opens */
+export const OPEN_MS = 150
+
+/** the placement middleware every float shares; `fallbacks` are the sides
+ *  tried in order when the chosen one does not fit */
+export const middleware = (gap = 6, fallbacks?: Placement[]) => [offset(gap), flip({ padding: 8, fallbackPlacements: fallbacks }), shift({ padding: 8 })]
+
+type TipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
+    /** what floats; nothing floats while it is null */
+    content: ReactNode
+    /** the class of the floating box */
+    tipClass?: string
+    placement?: Placement
+    /** the sides tried in order when `placement` does not fit */
+    fallbacks?: Placement[]
+    /** the pointer can move into it (a log to scroll): it stays open on the way */
+    interactive?: boolean
+}
+
+/** a trigger and what floats over it on hover or focus */
+export const Tip = observer(({ content, children, tipClass = 'ftip', placement = 'top', fallbacks, interactive = false, ...rest }: TipProps) => {
+    const st = useLocalObservable(() => ({ open: false, set(v: boolean) { this.open = v } }))
+    const f = useFloating({ open: st.open, onOpenChange: (v) => st.set(v), placement, strategy: 'fixed', middleware: middleware(6, fallbacks), whileElementsMounted: autoUpdate })
+    const hover = useHover(f.context, { delay: { open: OPEN_MS, close: interactive ? 100 : 0 }, handleClose: interactive ? safePolygon() : null })
+    const focus = useFocus(f.context)
+    const dismiss = useDismiss(f.context)
+    const role = useRole(f.context, { role: 'tooltip' })
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role])
+    return (
+        <>
+            <span ref={f.refs.setReference} {...getReferenceProps(rest)}>{children}</span>
+            {st.open && content != null ? (
+                <FloatingPortal>
+                    <div ref={f.refs.setFloating} className={tipClass} style={f.floatingStyles} {...getFloatingProps()}>{content}</div>
+                </FloatingPortal>
+            ) : null}
+        </>
+    )
+})

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

@@ -7,7 +7,7 @@
 import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { useRef } from 'react'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import type { Leg } from './hub-types.ts'
 
 export type Box = { scale: number; x: number; y: number; w: number; h: number }
@@ -27,7 +27,7 @@ const LEG_TAGS = ['L·front', 'L·back', 'R·back', 'R·front']
 
 type DragStart = { px: number; py: number; x: number; y: number; w: number; legs: Leg[]; cy: number; mode: 'move' | 'resize' }
 
-const LegBox = observer(({ app, box, i, leg }: { app: HubSt; box: Box; i: number; leg: Leg }) => {
+const LegBox = observer(({ app, box, i, leg }: { app: RepoSt; box: Box; i: number; leg: Leg }) => {
     const m = app.media
     const start = useRef<{ px: number; py: number; legs: Leg[]; mode: 'move' | 'resize' } | null>(null)
     const px = (v: number): number => v * box.scale
@@ -80,7 +80,7 @@ const LegBox = observer(({ app, box, i, leg }: { app: HubSt; box: Box; i: number
     )
 })
 
-export const GeometryLayer = observer(({ app, box }: { app: HubSt; box: Box | null }) => {
+export const GeometryLayer = observer(({ app, box }: { app: RepoSt; box: Box | null }) => {
     const m = app.media
     const start = useRef<DragStart | null>(null)
     const rect = m.rect
@@ -137,7 +137,7 @@ export const GeometryLayer = observer(({ app, box }: { app: HubSt; box: Box | nu
     )
 })
 
-export const Rectbar = observer(({ app }: { app: HubSt }) => {
+export const Rectbar = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const rect = m.rect
     const showSize = m.tools.has('size')