rvlib-shipkit 1.1.1 → 1.3.0

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

@@ -0,0 +1,340 @@
+// RepoSt: one repo's hub page as a node of the page tree (home-st.ts owns
+// the root, build/app-state-tree). Owns cross-service state: selection, the
+// severity filter (an ADDRESS: ?f=needs · ?f=red), and the hash router: every
+// page and every tab is a selection, every selection has an address
+// (hash-route.ts), and setSel is the one place both move together. A repo
+// that is not shown keeps all of it and polls nothing (resume, pause), and
+// only the shown one writes the url.
+import { makeAutoObservable } from 'mobx'
+import { ClockSvc } from './clock-svc.ts'
+import { ColsSvc } from './cols-svc.ts'
+import { canonicalSel, currentHash, hashFor, parseHash, selOf, type HashSel } from './hash-route.ts'
+import { ComfySvc } from './comfy-svc.ts'
+import { HealthSvc } from './health-svc.ts'
+import { ReadmeSvc } from './readme-svc.ts'
+import { LiveSvc } from './live-svc.ts'
+import { MediaSvc } from './media-svc.ts'
+import { TimelineSvc } from './timeline-svc.ts'
+import { TreeSvc } from './tree-svc.ts'
+import { ChecksSvc } from './checks-svc.ts'
+import { ProcessesSvc } from './processes-svc.ts'
+import { TestsSvc } from './tests-svc.ts'
+import { AdminSvc } from './admin-svc.ts'
+import { repoSections } from './repo-sections.tsx'
+import { sectionKeyLabel } from './keys.ts'
+import type { Resource } from './hub-types.ts'
+import type { HomeSt } from './home-st.ts'
+
+export type Sel = HashSel | null
+
+/** one picker target (cmd+k): run() fires the SAME action clicking would */
+/** what a picker entry wears: a repo's own icon, or a place's button icon */
+export type JumpFace = { repo: string } | { place: 'home' | 'planned' | 'activity' | 'archived' }
+/** `key`: the shortcut that does the same, printed at the entry's end */
+export type Jump = { id: string; label: string; section: string; run: () => void; face?: JumpFace; key?: string }
+
+/** all · needs (yellow+red) · red — one severity ladder for every section */
+export type Filter = 'all' | 'needs' | 'red'
+export const parseFilter = (search: string): Filter => {
+    const f = new URLSearchParams(search).get('f')
+    return f === 'needs' || f === 'red' ? f : 'all'
+}
+
+export class RepoSt {
+    /** the repo's name, from /hub.json; its key until that answers */
+    name: string
+    /** where this repo sits on disk, from /hub.json: what makes a source
+     *  path on a page a link that opens his editor */
+    root = ''
+    /** the one second tick every age of this repo reads (clock-svc.ts). It
+     *  ticks only while the repo is shown, so a hidden page repaints nothing */
+    clock: ClockSvc
+    media: MediaSvc
+    cols: ColsSvc
+    tree: TreeSvc
+    health: HealthSvc
+    readme: ReadmeSvc
+    checks: ChecksSvc
+    comfy: ComfySvc
+    timeline: TimelineSvc
+    /** the runs in flight, whoever started them (live-svc.ts) */
+    live: LiveSvc
+    processes: ProcessesSvc
+    /** the pages behind the test groups of the tree (tests-svc.ts) */
+    tests: TestsSvc
+    /** the admin page: archive behind its confirmation, reload, keep active */
+    admin: AdminSvc
+    sel: Sel = null
+    filter: Filter = 'all'
+    /** sidebar search — live substring filter over asset + collection rows */
+    query = ''
+    /** the first resume or prefetch ran: on the home, only once this repo's
+     *  hub answered */
+    started = false
+    /** the page showed it once: only a repo shown has a region mounted, so a
+     *  repo read ahead in the background costs no render */
+    seen = false
+    /** the sidebar search box, so `/` focuses this repo's own */
+    searchEl: HTMLInputElement | null = null
+    /** its timers run: only the shown repo's do */
+    polling = false
+    private beat = false
+    /** the hub name, the gate block and STATUS.md were asked for */
+    private onceRead = false
+
+    /** `key` names the repo in the root's map, `base` is where its hub
+     *  answers: '/r/<repo>' on the home, '' on a hub of its own */
+    constructor(readonly home: HomeSt, readonly key: string, readonly base: string) {
+        this.name = key
+        // children built in the ctor body: a field initializer would run
+        // before `home` is assigned
+        this.clock = new ClockSvc()
+        this.media = new MediaSvc(this)
+        this.cols = new ColsSvc(this)
+        this.tree = new TreeSvc(this)
+        this.health = new HealthSvc(this)
+        this.readme = new ReadmeSvc(this)
+        this.checks = new ChecksSvc(this)
+        this.comfy = new ComfySvc(this)
+        this.timeline = new TimelineSvc(this)
+        this.live = new LiveSvc(this)
+        this.processes = new ProcessesSvc(this)
+        this.tests = new TestsSvc(this)
+        this.admin = new AdminSvc(this)
+        makeAutoObservable<this, 'beat' | 'onceRead'>(this, { onceRead: false, home: false, key: false, base: false, clock: false, media: false, cols: false, tree: false, health: false, readme: false, checks: false, comfy: false, timeline: false, live: false, processes: false, tests: false, admin: false, searchEl: false, beat: false })
+    }
+
+    /** an absolute hub path ('/api/…', '/media/…', '/hub.json') as this
+     *  repo's hub answers it. Every request of the repo goes through here */
+    url(path: string): string {
+        return path.startsWith('/') ? `${this.base}${path}` : path
+    }
+
+    /** the repo the page shows now: only it writes the url */
+    get isShown(): boolean {
+        return this.home.shown === this
+    }
+
+    /** what the url carries for this repo: its filter, then its selection */
+    get search(): string {
+        return this.filter === 'all' ? '' : `?f=${this.filter}`
+    }
+    get hash(): string {
+        const h = this.sel?.t === 'asset' ? this.media.hash : hashFor(this.sel)
+        return h == null ? '' : `#${h}`
+    }
+
+    /** what is read once, the first time the repo starts or is read ahead */
+    private readOnce(): Promise<unknown> {
+        this.started = true
+        this.onceRead = true
+        return Promise.all([this.readHub(), this.checks.loadGate(), this.health.load()])
+    }
+
+    /** the repo's name and where it sits on disk, from /hub.json */
+    private readHub(): Promise<void> {
+        return fetch(this.url('/hub.json'))
+            .then((r) => r.json() as Promise<{ name: string; root?: string }>)
+            .then((h) => { this.setHub(h.name, h.root ?? '') })
+            .catch(() => {})
+    }
+
+    /** the first screen of the repo, read in the background while another
+     *  one shows, so its first visit has its data at once. One step at a
+     *  time: the browser opens six connections to the home, and the repo on
+     *  screen keeps most of them. Nothing polls: a resume takes over when it
+     *  shows */
+    async prefetch(): Promise<void> {
+        if (this.started) return
+        this.started = true
+        const steps: (() => Promise<unknown>)[] = [
+            () => this.cols.poll(),
+            () => this.readOnce(),
+            () => this.processes.load(),
+            () => this.media.heartbeat(),
+            () => this.live.poll(),
+            () => this.timeline.load(),
+        ]
+        for (const step of steps) {
+            // shown meanwhile: its resume polls everything, so stop here
+            if (this.polling) return
+            await step()
+        }
+    }
+
+    /** start polling. The first one also reads what is read once */
+    resume(): void {
+        if (this.polling) return
+        this.polling = true
+        if (!this.onceRead) {
+            void this.readOnce()
+            this.applyHash()
+        }
+        this.clock.start()
+        this.processes.start()
+        this.media.start()
+        this.cols.start()
+        this.live.start()
+    }
+
+    /** stop polling, keep every state: a resume shows the same page */
+    pause(): void {
+        if (!this.polling) return
+        this.polling = false
+        this.clock.stop()
+        this.processes.stop()
+        this.media.stop()
+        this.cols.stop()
+        this.live.stop()
+    }
+
+    dispose(): void {
+        this.pause()
+        this.media.dispose()
+        this.checks.dispose()
+        this.comfy.dispose()
+    }
+
+    markSeen(): void {
+        this.seen = true
+    }
+
+    private setHub(n: string, root: string): void {
+        this.name = n
+        this.root = root
+    }
+
+    setFilter(v: Filter): void {
+        this.filter = v
+        if (!this.isShown) return
+        const u = new URL(location.href)
+        v === 'all' ? u.searchParams.delete('f') : u.searchParams.set('f', v)
+        history.replaceState(null, '', u)
+    }
+    /** the atelier rewrites its tool set in place: same page, no entry */
+    replaceHash(h: string): void {
+        if (this.isShown && location.hash.slice(1) !== h) history.replaceState(null, '', `#${h}`)
+    }
+    setQuery(v: string): void {
+        this.query = v
+    }
+
+    /** every jump target: section titles, media assets, collection instances */
+    get jumps(): Jump[] {
+        const out: Jump[] = []
+        for (const cat of new Set(this.media.assets.map((a) => a.cat)))
+            out.push({ id: `cat:${cat}`, label: cat, section: 'media', run: () => this.showCat(cat) })
+        for (const a of this.media.assets)
+            out.push({ id: `asset:${a.id}`, label: a.label, section: a.cat, run: () => this.selectAsset(a.id) })
+        // the section lines, with their keys: the same list the left pane draws
+        const secs = repoSections(this)
+        for (const s of secs) out.push({ id: `section:${s.id}`, label: s.label, section: 'section', key: sectionKeyLabel(s.id), run: s.go })
+        for (const col of this.cols.sidebarCols) {
+            if (!secs.some((s) => s.id === col.id)) out.push({ id: `col:${col.id}`, label: col.title, section: 'section', run: () => this.showCol(col.id) })
+            for (const i of col.instances)
+                out.push({ id: `item:${i.id}`, label: i.text, section: col.title, run: () => this.cols.select(col.id, i.id) })
+        }
+        return out
+    }
+    // ── selection + hash deep-links ───────────────────────────────────────
+    selectAsset(id: string): void {
+        this.setSel({ t: 'asset', id })
+        void this.media.select(id)
+    }
+    showCat(cat: string): void {
+        this.setSel({ t: 'cat', cat })
+        this.media.openCats.add(cat)
+        void this.media.fillCat()
+    }
+    showStatus(): void {
+        this.setSel({ t: 'status' })
+        void this.health.load()
+    }
+    /** where the test checks' time goes: the `tests` group (null) or one test
+     *  check's group. Fetched as the page opens, never on the poll */
+    showTests(check: string | null): void {
+        this.setSel({ t: 'tests', check })
+        void this.tests.load(check)
+    }
+
+    /** the ONE place a selection is written, so the url always describes what
+     *  is on screen. A new page is a history entry, so back returns to the
+     *  page before it. The same address is never pushed twice: applyHash
+     *  lands here too, with the hash already naming this selection */
+    setSel(sel: Sel): void {
+        this.sel = sel
+        const h = hashFor(sel)
+        if (h == null || !this.isShown) return
+        const cur = parseHash(currentHash())
+        const next = parseHash(h)
+        // the tool set rides after the asset id (media-svc syncHash), so an
+        // address is the same page whatever tools it carries
+        if (cur.kind === next.kind && cur.col === next.col && cur.id === next.id) return
+        history.pushState(null, '', `#${h}`)
+    }
+    /** one tree row, opened: an asset goes to the atelier, everything else to
+     *  its own item card. A gate check has a page of its own now, so nothing
+     *  lands on the raw wall of text unless it is asked for by name */
+    openResource(r: Resource): void {
+        const assetId = r.id.replace(/^media:/, '')
+        if (r.collection === 'media' && this.media.assets.some((a) => a.id === assetId)) {
+            this.selectAsset(assetId)
+            return
+        }
+        this.cols.select(r.collection, r.id)
+    }
+
+    /** what administers the repo: reload its hub, keep it active, archive it */
+    showAdmin(): void {
+        this.admin.cancel()
+        this.setSel({ t: 'admin' })
+    }
+
+    /** collection view — one card per instance */
+    showCol(id: string): void {
+        this.setSel({ t: 'col', id })
+    }
+    /** open whatever a selection names, through the same calls a click makes */
+    go(sel: HashSel): void {
+        switch (sel.t) {
+            case 'asset': return this.selectAsset(sel.id)
+            case 'cat': return this.showCat(sel.cat)
+            case 'col': return this.showCol(sel.id)
+            case 'item': return this.cols.select(sel.col, sel.id)
+            case 'status': return this.showStatus()
+            case 'tests': return this.showTests(sel.check)
+            case 'admin': return this.showAdmin()
+        }
+    }
+    /** the url decides the page: a reload, back, forward and a pasted link
+     *  all land here, and only a hash naming something else moves the view */
+    applyHash(): void {
+        if (!this.isShown) return
+        const p = parseHash(currentHash())
+        const named = selOf(p)
+        if (named == null) return
+        // an address naming what this build opens under another address is
+        // rewritten in place: a replace, so back never lands on the stale one
+        const sel = canonicalSel(named)
+        if (sel !== named) history.replaceState(null, '', `#${hashFor(sel)}`)
+        // media addresses resolve only once the first heartbeat listed the
+        // assets (afterFirstBeat calls back)
+        if (sel.t === 'asset' && !this.media.assets.some((a) => a.id === sel.id)) return
+        if (sel.t === 'cat' && !this.media.assets.some((a) => a.cat === sel.cat)) return
+        if (sel.t === 'asset' && this.media.curId === sel.id) {
+            // same asset, new tool set (a pasted share link): apply NOW, a
+            // parked pendingTools would hijack the next selection instead
+            if (p.tools != null) this.media.applyTab(p.tools)
+            return
+        }
+        if (hashFor(sel) === hashFor(this.sel)) return
+        if (sel.t === 'asset') this.media.pendingTools = p.tools
+        this.go(sel)
+    }
+    /** first heartbeat has the asset list — only then can a hash resolve */
+    afterFirstBeat(): void {
+        if (this.beat || !this.isShown) return
+        this.beat = true
+        this.applyHash()
+    }
+}

package/src/serve/hub-app/runs-tabs.ts

@@ -7,7 +7,7 @@ export type RunsTab = 'runs' | 'files' | 'slowest' | 'longest'
 
 /** the four lists, in tab order. `key` is what the address carries */
 export const RUNS_TABS: { key: RunsTab; label: string; help: string }[] = [
-    { key: 'runs', label: 'runs', help: `every run on record, newest first: shipkit ci, shipkit check, the hub's buttons, its save trigger and its daily health pass. One line per run: when, who started it, what ran, its wall time, how many checks ${RAN}, how many were ${CACHED} (answered from the cache, nothing ran), and its reds. Unfold a run for one line per check, named by its title with its id as the small tag, in a box that scrolls: its reds first, then what ${RAN}, slowest first, then what was ${CACHED}. Click a check for its page. Every run in time, and how many ran at once, is the live strip under the header: unfold it and press fit` },
+    { key: 'runs', label: 'runs', help: `every run on record, newest first: shipkit ci, shipkit check, the hub's buttons, and the runs the plan starts. One line per run: when, who started it, what ran, its wall time, how many checks ${RAN}, how many were ${CACHED} (answered from the cache, nothing ran), and its reds. Unfold a run for one line per check, named by its title with its id as the small tag, in a box that scrolls: its reds first, then what ${RAN}, slowest first, then what was ${CACHED}. Click a check for its page. Every run in time, and how many ran at once, is the chart over the tabs: press fit for the whole record` },
     { key: 'files', label: 'test files to fix', help: "bun test files, not checks: each file's last recorded run inside the check that ran it (test, test:<unit>), kept when a test in it failed or when it broke the quick tier budget per file. The same verdict colours the file in the tree under tests. Click a file for its page, the check tag for the check" },
     { key: 'slowest', label: 'slowest checks', help: 'the checks that cost the most when they really run: the mean and the worst of the runs that ran. A check whose worst run passed half its ceiling is flagged, because the next slow machine trips it' },
     { key: 'longest', label: 'longest runs', help: 'the invocations on record that took the longest, start to end, whatever ran them' },

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/sidebar.tsx

@@ -0,0 +1,84 @@
+// A repo page's left pane: its sections (repo-sections.tsx), then the tree of
+// every resource of the repo, one row deep in its path, under its filter, its
+// two tabs and its severity filter. Only the tree scrolls, so the sections and
+// the filter stay in reach. The row itself is tree-row.tsx.
+import { observer } from 'mobx-react-lite'
+import { Help } from './help.tsx'
+import { SEARCH_KEY } from './keys.ts'
+import { Sections } from './repo-sections.tsx'
+import type { RepoSt } from './repo-st.ts'
+import { TYPE_MARK } from './tree-build.ts'
+import { TreeRowView } from './tree-row.tsx'
+
+const Tree = observer(({ app }: { app: RepoSt }) => {
+    const t = app.tree
+    return (
+        // roving focus: the arrows belong to the tree only while it HAS the
+        // focus, so the atelier keeps its own keys
+        <div className="tree" tabIndex={0} onKeyDown={(e) => { if (t.key(e.key)) e.preventDefault() }}>
+            {t.rows.map((r) => <TreeRowView key={r.key} app={app} row={r} />)}
+            {!app.cols.loaded && !app.cols.cached ? <div className="tempty twait"><span className="spin" />reading the repo…</div> : null}
+            {app.cols.loaded && t.rows.length === 0 ? <div className="tempty">{app.filter === 'red' ? 'no reds — nothing is blocked ✨' : app.filter === 'needs' ? 'nothing needs you ✨' : 'no resources yet'}</div> : null}
+        </div>
+    )
+})
+
+/** what every glyph in the type slot means, behind one `(?)` */
+const TypeLegend = () => (
+    <Help text={
+        <span className="legend">
+            {Object.entries(TYPE_MARK).map(([kind, m]) => (
+                <span key={kind} className="lrow"><i className={`ty ${m.hue}`}>{m.glyph}</i>{m.word}</span>
+            ))}
+        </span>
+    } />
+)
+
+const TreeTabs = observer(({ app }: { app: RepoSt }) => (
+    <span className="seg">
+        {(['path', 'type'] as const).map((t) => (
+            <button key={t} className={app.tree.tab === t ? 'on' : ''} onClick={() => app.tree.setTab(t)}>by {t}</button>
+        ))}
+    </span>
+))
+
+// segmented severity filter — all · needs (yellow+red) · red, the address
+// rides at /?f=… so a filtered view is shareable. The shortcut letter rides
+// INSIDE its own button, so the binding is discoverable without a legend
+const FILTER_KEY = { all: 'a', needs: 'n', red: 'r' } as const
+const SegFilter = observer(({ app }: { app: RepoSt }) => (
+    <span className="seg">
+        {(['all', 'needs', 'red'] as const).map((f) => (
+            <button key={f} className={app.filter === f ? 'on' : ''} onClick={() => app.setFilter(f)}>
+                {f}<span className="sk">{FILTER_KEY[f]}</span>
+            </button>
+        ))}
+    </span>
+))
+
+export const Sidebar = observer(({ app }: { app: RepoSt }) => (
+    <aside>
+        <Sections app={app} />
+        <div className="ssearch">
+            <span className="sfield">
+                <input ref={(el) => { app.searchEl = el }} placeholder="filter" aria-label="filter the tree" value={app.query}
+                    onChange={(e) => app.setQuery(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Escape') app.setQuery('') }} />
+                <kbd className="skey">{SEARCH_KEY}</kbd>
+            </span>
+            <SegFilter app={app} />
+        </div>
+        <div className="stabs">
+            <TreeTabs app={app} />
+            <span className="sp" />
+            <TypeLegend />
+            <span className="cnt">{app.tree.visible.length}</span>
+        </div>
+        {/* its line is held while the repo is read, so the tree never drops under it */}
+        {app.tree.whenLine === '' && app.cols.loaded ? null : <div className="swhen">{app.tree.whenLine === '' ? ' ' : app.tree.whenLine}</div>}
+        {app.media.dead != null ? <div className="tempty"><span className="warnline">media API down: {app.media.dead}</span></div> : null}
+        <div className="tscroll">
+            <Tree app={app} />
+        </div>
+    </aside>
+))

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(() => {