rvlib-shipkit 1.2.0 → 1.3.0

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

@@ -1,18 +1,17 @@
 // 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 { autoUpdate, FloatingPortal, useFloating } from '@floating-ui/react'
-import { useEffect, useLayoutEffect, useRef } from 'react'
+import { useEffect, useLayoutEffect, useRef, type ReactNode } from 'react'
 import { middleware } from './floating.tsx'
-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 { 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
@@ -45,7 +44,7 @@ export type TipAt = { x: number; y: number }
  *  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)}`],
 })
@@ -82,13 +81,14 @@ const Tip = observer(({ view }: { view: ChartView }) => {
 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
@@ -103,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 */
@@ -188,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
@@ -208,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}
@@ -250,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} />
@@ -267,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,8 +1,8 @@
 // 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'

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

@@ -5,13 +5,14 @@
 // 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 { RepoSt } from './repo-st.ts'
@@ -223,6 +224,21 @@ const Tabs = observer(({ app, on }: { app: RepoSt; on: RunsTab }) => {
     )
 })
 
+/** 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])
@@ -230,6 +246,7 @@ export const TimelineView = observer(({ app }: { app: RepoSt }) => {
     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 twait"><span className="spin" />reading the run record…</div> : (

package/src/serve/hub-runtime.ts

@@ -42,6 +42,7 @@ import { liveJobs, startJob } from '../core/jobs.ts'
 import { followJob } from '../core/job-follow.ts'
 import { RUN_JOB } from '../home/home-words.ts'
 import { OtherRepos } from './other-repos.ts'
+import { HouseRuns } from './house-runs.ts'
 import { recordStamp } from './project-gutter.ts'
 import { RepoProcesses } from './repo-processes.ts'
 import { shapeTimeline } from '../ledger/run-timeline.ts'
@@ -63,6 +64,13 @@ export { defaultHubPort }
 
 export type ServeIo = { print: (l: string) => void; printErr: (l: string) => void }
 
+/** a hub serving on its own's view of the house: its own repo first, then
+ *  every other house repo on this disk */
+const houseOf = (root: string, name: string): HouseRuns => {
+    const others = new OtherRepos(root)
+    return new HouseRuns(() => [{ name, path: root }, ...others.repos().map((r) => ({ name: r.name, path: r.path }))])
+}
+
 
 // the BASE-CONTEXT wiki: the shared wiki this repo's CLAUDE.md include chain
 // points at (`@~/dev/<other-repo>/wiki/index.md`). It lives in ANOTHER repo and
@@ -291,10 +299,10 @@ export async function resolveHubDeps(root: string, boot: RepoConfig, io: ServeIo
     // nothing runs in this process yet, so a live row holding its pid was
     // left by an earlier image of it: `bun --watch` restarts in place
     if (record !== '') sweepLive(record, Date.now(), { ownPid: process.pid })
-    // the live strip asks every second, from every open tab: the record is
-    // read only when its files moved, and one shaped answer serves every
-    // request inside LIVE_SHARE_MS
-    const others = new OtherRepos(root)
+    // the page asks every second, from every open tab: the record is read
+    // only when its files moved, and one shaped answer serves every request
+    // inside LIVE_SHARE_MS
+    let house: HouseRuns | null = null
     let local: { stamp: string; at: number; live: ReturnType<typeof readLive>; runs: ReturnType<typeof readRunsSince>; invocations: ReturnType<typeof readInvocations> } | null = null
     let shaped: { at: number; view: LiveView } | null = null
     const LIVE_SHARE_MS = 500
@@ -308,7 +316,7 @@ export async function resolveHubDeps(root: string, boot: RepoConfig, io: ServeIo
             const since = now - LIVE_HISTORY_MS
             local = { stamp, at: now, live: readLive(record), runs: readRunsSince(record, since), invocations: readInvocations(record, since) }
         }
-        const view = shapeLive({ now, cap: parallelCap(), live: local.live, runs: local.runs, invocations: local.invocations, others: others.read() })
+        const view = shapeLive({ now, cap: parallelCap(), live: local.live, runs: local.runs, invocations: local.invocations })
         shaped = { at: now, view }
         return view
     }
@@ -342,7 +350,10 @@ export async function resolveHubDeps(root: string, boot: RepoConfig, io: ServeIo
         // every run in flight, whoever started it: they all write the same
         // record, so a terminal gate shows here the same as a button's
         live,
-        repoHub: (repo) => others.hubOf(repo),
+        // the dock of a hub serving on its own: this repo and every other
+        // house repo, built on the first ask (a hub the daemon loads is never
+        // asked, the daemon answers for the house)
+        house: () => (house ??= houseOf(root, c.name)).view(),
         timeline: async () => {
             const ceilings: Record<string, number> = {}
             const budgets: Record<string, number> = {}
@@ -456,8 +467,6 @@ export type LoadHubOpts = {
     ownTimers: boolean
     /** re-import repo.config.ts rather than reuse the module already loaded */
     fresh?: boolean
-    /** overrides where a lane click of the live strip sends another repo */
-    repoHub?: HubDeps['repoHub']
     /** every gate runs as a detached job this host follows */
     jobs?: GateJobs
 }
@@ -472,7 +481,6 @@ let warming: Promise<void> = Promise.resolve()
 export async function loadHub(root: string, io: ServeIo, o: LoadHubOpts): Promise<HubRuntime> {
     const c = await loadRepoConfig(root, { fresh: o.fresh === true })
     const deps = await resolveHubDeps(root, c, io, { port: o.port, base: o.base, jobs: o.jobs, planName: o.planName })
-    if (o.repoHub != null) deps.repoHub = o.repoHub
     const name = deps.plan.repo
     deps.planned = () => o.plan.rows(name)
     deps.ask = (check) => {

package/src/serve/other-repos.ts

@@ -1,16 +1,11 @@
-// The OTHER house repos on this disk, as the live strip reads them: their
-// runs in flight from their own run record, read only, and their hub url
-// when one serves. Which repos count is houseRepos (project-gutter.ts), the
-// same discovery the project gutter lists, minus this repo.
-//
-// Cheap on purpose, because the strip asks every second: the list is read at
-// most every LIST_TTL_MS, and a repo's record is opened only when its file or
-// its write ahead log moved since the last read.
-import { existsSync, realpathSync } from 'fs'
+// The OTHER house repos on this disk, as a hub serving on its own lists them
+// for the dock (house-runs.ts). Which repos count is houseRepos
+// (project-gutter.ts), the same discovery the project gutter lists, minus
+// this repo. The list is read at most every LIST_TTL_MS, since the dock asks
+// every few seconds.
+import { realpathSync } from 'fs'
 import { homedir } from 'os'
-import type { LiveRow } from '../ledger/live-runs.ts'
-import { readLiveReadonly } from '../ledger/run-log.ts'
-import { houseRepos, hubPortOf, recordOf, recordStamp, type WiredRepo } from './project-gutter.ts'
+import { houseRepos, type WiredRepo } from './project-gutter.ts'
 
 /** how long the list of repos is trusted before the dev root is read again */
 export const LIST_TTL_MS = 30_000
@@ -30,11 +25,10 @@ export function otherHouseRepos(root: string, userHome: string = homedir()): Wir
     return repos.filter((r) => real(r.path) !== me)
 }
 
-/** the other repos and their live rows, re-read only when something moved */
+/** the other repos, the list re-read at most every LIST_TTL_MS */
 export class OtherRepos {
     private list: WiredRepo[] = []
     private listedAt = -Infinity
-    private rows = new Map<string, { stamp: string; rows: LiveRow[] }>()
 
     constructor(private root: string, private now: () => number = Date.now, private userHome: string = homedir()) {}
 
@@ -45,35 +39,4 @@ export class OtherRepos {
         }
         return this.list
     }
-
-    /** every repo's live rows, as its record holds them */
-    read(): { repo: string; rows: LiveRow[] }[] {
-        const out: { repo: string; rows: LiveRow[] }[] = []
-        for (const r of this.repos()) {
-            const path = recordOf(r.path)
-            if (path == null || !existsSync(path)) continue
-            const stamp = recordStamp(path)
-            let hit = this.rows.get(r.path)
-            if (hit == null || hit.stamp !== stamp) {
-                hit = { stamp, rows: readLiveReadonly(path) }
-                this.rows.set(r.path, hit)
-            }
-            out.push({ repo: r.name, rows: hit.rows })
-        }
-        return out
-    }
-
-    /** a repo's hub url when it serves, checked by asking it who it is */
-    async hubOf(repo: string): Promise<string | null> {
-        const r = this.repos().find((x) => x.name === repo)
-        if (r == null) return null
-        const url = `http://localhost:${hubPortOf(r.path)}`
-        try {
-            const res = await fetch(`${url}/hub.json`, { signal: AbortSignal.timeout(500) })
-            const j = (await res.json()) as { hub?: string; root?: string }
-            return j.hub === 'shipkit' && j.root != null && real(j.root) === real(r.path) ? url : null
-        } catch {
-            return null
-        }
-    }
 }