rvlib-shipkit 1.1.0 → 1.2.0

package/src/serve/hub-app/screen-cache.ts

@@ -0,0 +1,74 @@
+// each repo's last first screen, kept per browser in IndexedDB (a repo's rows
+// run to near a megabyte, past what localStorage holds for twenty repos): the
+// rows, the collections, the plan rows, the hub problems and the first media
+// category. A load paints it at once, then the hub's answer replaces it.
+// Anything that fails (no IndexedDB, a private window, a blocked store) reads
+// as nothing kept: the page then waits on the hub as it always did.
+import type { ColMeta, HubProblem, Resource } from './hub-types.ts'
+import type { PlanRow } from '../../plan/planner.ts'
+
+export type Screen = {
+    at: number
+    collections: ColMeta[]
+    resources: Resource[]
+    planned: PlanRow[] | null
+    hub: HubProblem[]
+    /** the first media category, so the header's media link is there too */
+    mediaCat: string | null
+}
+
+const DB = 'shipkit-hub'
+const STORE = 'screens'
+/** the longest a load waits on the store before it paints without it */
+export const SCREEN_WAIT_MS = 150
+/** a repo's screen is written at most this often */
+export const SCREEN_WRITE_MS = 60_000
+
+let opened: Promise<IDBDatabase | null> | null = null
+
+function db(): Promise<IDBDatabase | null> {
+    opened ??= new Promise((ok) => {
+        try {
+            const idb = globalThis.indexedDB
+            if (idb == null) return ok(null)
+            const r = idb.open(DB, 1)
+            r.onupgradeneeded = () => { r.result.createObjectStore(STORE) }
+            r.onsuccess = () => ok(r.result)
+            r.onerror = () => ok(null)
+            r.onblocked = () => ok(null)
+        } catch {
+            ok(null)
+        }
+    })
+    return opened
+}
+
+/** the screen kept for a repo, or null */
+export async function readScreen(key: string): Promise<Screen | null> {
+    const d = await db()
+    if (d == null) return null
+    return new Promise((ok) => {
+        try {
+            const r = d.transaction(STORE, 'readonly').objectStore(STORE).get(key)
+            r.onsuccess = () => {
+                const v = r.result as Screen | undefined
+                ok(v != null && Array.isArray(v.resources) && Array.isArray(v.collections) ? v : null)
+            }
+            r.onerror = () => ok(null)
+        } catch {
+            ok(null)
+        }
+    })
+}
+
+/** keeps a repo's screen; a failure only means the next load waits */
+export async function writeScreen(key: string, s: Screen): Promise<void> {
+    const d = await db()
+    if (d == null) return
+    try {
+        d.transaction(STORE, 'readwrite').objectStore(STORE).put(s, key)
+    } catch (e) {
+        // a full or blocked store only means the next load waits on the hub
+        console.warn(`shipkit: could not keep the screen of ${key}: ${(e as Error).message}`)
+    }
+}

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

@@ -5,7 +5,7 @@
 // tier.
 import { observer } from 'mobx-react-lite'
 import { durationTone, fmtMs } from './dur.ts'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import type { Resource, SuiteFacts, TestFacts, TestRun } from './hub-types.ts'
 import { copy, PathCode, Row, Section } from './check-view.tsx'
 import { editorHref, repoPath } from './check-words.ts'
@@ -34,7 +34,7 @@ const overBudget = (r: TestRun, slow: boolean): boolean => !slow && r.tier === '
 
 const dot = (r: TestRun, slow: boolean): string => (r.status === 'fail' ? 'red' : overBudget(r, slow) ? 'warn' : 'ok')
 
-const RunLine = ({ app, r, slow }: { app: HubSt; r: TestRun; slow: boolean }) => (
+const RunLine = ({ app, r, slow }: { app: RepoSt; r: TestRun; slow: boolean }) => (
     <div className={`rline rtrun${r.status === 'fail' ? ' red' : ''}`} title={stampWords(r.at)}>
         <TimeAgo clock={app.clock} at={r.at} />
         <span className="rid"><i className={`rdot ${dot(r, slow)}`} />{r.status === 'fail' ? 'failed' : 'passed'}</span>
@@ -43,7 +43,7 @@ const RunLine = ({ app, r, slow }: { app: HubSt; r: TestRun; slow: boolean }) =>
     </div>
 )
 
-const Declaration = observer(({ app, s }: { app: HubSt; s: SuiteFacts }) => {
+const Declaration = observer(({ app, s }: { app: RepoSt; s: SuiteFacts }) => {
     const where = s.unit == null ? 'tests.slow' : `units['${s.unit}'].tests.slow`
     return (
         <Section title="declared slow" help="the quick tier leaves it out: its declaration says what it catches and why it cannot be fast">
@@ -67,7 +67,7 @@ const Declaration = observer(({ app, s }: { app: HubSt; s: SuiteFacts }) => {
     )
 })
 
-export const TestCard = observer(({ app, id }: { app: HubSt; id: string }) => {
+export const TestCard = observer(({ app, id }: { app: RepoSt; id: string }) => {
     const i: Resource | null = app.cols.find('tests', id)
     if (i == null || i.test == null) return <div className="ph">this test file is gone: the repo moved on</div>
     const t = i.test

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

@@ -5,7 +5,7 @@
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { TestCheckView, TestsRootView } from '../../collections/test-time.ts'
 import { testId } from '../../collections/collection-types.ts'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 
 export type { TestCheckView, TestsRootView }
 
@@ -17,7 +17,7 @@ export class TestsSvc {
     errors = new Map<string, string>()
     loading = new Set<string>()
 
-    constructor(private st: HubSt) {
+    constructor(private st: RepoSt) {
         makeAutoObservable<this, 'st'>(this, { st: false, views: observableRef })
     }
 
@@ -45,7 +45,7 @@ export class TestsSvc {
         const k = keyOf(check)
         runInAction(() => { this.loading.add(k) })
         try {
-            const r = await fetch(check == null ? '/api/tests.json' : `/api/tests.json?check=${encodeURIComponent(check)}`)
+            const r = await fetch(this.st.url(check == null ? '/api/tests.json' : `/api/tests.json?check=${encodeURIComponent(check)}`))
             if (!r.ok) throw new Error(await r.text())
             const v = (await r.json()) as TestsRootView | TestCheckView
             runInAction(() => {

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

@@ -8,7 +8,7 @@ import { observer } from 'mobx-react-lite'
 import type { FailingFile, FileTime, LastRun, Phases, Shape, TestCheckRow, TestCheckView, 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 +22,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 +50,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 +121,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 +152,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 +194,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,7 +217,7 @@ const CheckRows = observer(({ app, rows }: { app: HubSt; rows: TestCheckRow[] })
     </div>
 ))
 
-export const TestsRootPage = observer(({ app }: { app: HubSt }) => {
+export const TestsRootPage = observer(({ app }: { app: RepoSt }) => {
     const v: TestsRootView | null = app.tests.root()
     return (
         <div className="colcard checkcard">
@@ -234,5 +234,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

@@ -5,7 +5,9 @@
 // run. 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 { 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'
@@ -15,7 +17,7 @@ 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,8 +37,8 @@ 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
@@ -48,22 +50,32 @@ export const barTip = (b: PlacedBar, now: number, at: TipAt): ChartTip => ({
     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>
     )
 })
 

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

@@ -6,7 +6,7 @@
 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

@@ -14,7 +14,7 @@ import type { InvocationSummary, SlowCheck, SuiteToFix, Timeline, TimelineBar, T
 import { byWords, 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 +40,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 +90,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 +102,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 +122,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 +142,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 +166,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 +183,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 +202,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,12 +218,12 @@ 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 }) => {
+export const TimelineView = observer(({ app }: { app: RepoSt }) => {
     const t = app.timeline
     useEffect(() => { void t.load() }, [t])
     const d = t.data
@@ -232,7 +232,7 @@ export const TimelineView = observer(({ app }: { app: HubSt }) => {
         <div className="colcard tlcard">
             <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 })

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

@@ -2,7 +2,7 @@
 // time, embedded from its own /graph/<id> route. A tab is an item of the
 // wikis collection, so the open wiki is in the url like any other page.
 import { observer } from 'mobx-react-lite'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import type { Resource } from './hub-types.ts'
 
 /** the collection id, and the address segment of every wiki */
@@ -11,10 +11,10 @@ export const WIKIS = 'wikis'
 /** `state` colours the tab label the way the tree colours the wiki's row */
 export type WikiTab = { id: string; label: string; state: Resource['state']; on: boolean; go: () => void }
 
-const wikisOf = (app: HubSt): Resource[] => app.cols.resources.filter((r) => r.collection === WIKIS)
+const wikisOf = (app: RepoSt): Resource[] => app.cols.resources.filter((r) => r.collection === WIKIS)
 
 /** the tabs over the page, in the order the server mounted the wikis */
-export function wikiTabs(app: HubSt): WikiTab[] {
+export function wikiTabs(app: RepoSt): WikiTab[] {
     const sel = app.sel
     return wikisOf(app).map((r) => ({
         id: r.id,
@@ -27,13 +27,13 @@ export function wikiTabs(app: HubSt): WikiTab[] {
 
 /** the header link: the first wiki, or the bare section while the first
  *  poll has not listed any */
-export function openWikis(app: HubSt): void {
+export function openWikis(app: RepoSt): void {
     const first = wikisOf(app)[0]
     if (first != null) app.cols.select(WIKIS, first.id)
     else app.showCol(WIKIS)
 }
 
-export const WikisView = observer(({ app, id }: { app: HubSt; id: string }) => {
+export const WikisView = observer(({ app, id }: { app: RepoSt; id: string }) => {
     const i = app.cols.find(WIKIS, id)
     const tabs = (
         <span className="seg">
@@ -47,7 +47,11 @@ export const WikisView = observer(({ app, id }: { app: HubSt; id: string }) => {
                 {tabs}
                 <span className={`gvtext tl ${i.state}`}>{i.text}</span>
             </div>
-            {i.href == null ? <div className="ph">this wiki carries no page to embed</div> : <iframe src={i.href} title={i.title} />}
+            {i.href == null ? <div className="ph">this wiki carries no page to embed</div> : (
+                // the spinner sits under the frame: the graph page paints its
+                // own background over it the moment it has something to show
+                <div className="gvframe"><span className="gvwait"><span className="spin" />reading the wiki…</span><iframe src={app.url(i.href)} title={i.title} /></div>
+            )}
         </div>
     )
 })