rvlib-shipkit 1.1.1 → 1.3.0

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

@@ -0,0 +1,78 @@
+/* the activity page (activity-view.tsx): one table, a row group per repo. The
+   table is fixed width so a long title ellipses instead of scrolling the page
+   sideways; the file list floats on hover. State colours only: a branch green
+   on main, orange elsewhere; a commit orange until pushed; dirt red. */
+.activity{font-size:13px;container-type:inline-size}
+.actop{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3)}
+.acwin{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
+.acwin button{border:0;border-radius:0;padding:var(--s0) var(--s2);background:none;color:var(--dim);font-size:12px}
+.acwin button:hover{color:var(--ink);background:var(--panel2)}
+.acwin button.on{color:var(--accent);background:var(--sel)}
+.accap{display:inline-flex;align-items:center;gap:var(--s1);font-size:12px}
+.accap input{width:44px;height:22px;box-sizing:border-box;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:var(--s0) var(--s1);font:inherit;font-variant-numeric:tabular-nums}
+.accap input:focus{outline:none;border-color:var(--accent)}
+.acnext{display:inline-flex;align-items:center;min-width:40px;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
+/* the counts beside the controls, and the refresh button, as small rounded chips */
+.acpill{display:inline-flex;align-items:center;gap:var(--s1);padding:0 var(--s2);border:1px solid var(--line);border-radius:999px;background:var(--hi3);color:var(--dim);font-size:11.5px;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
+button.acpill{cursor:pointer;font:inherit;font-size:11.5px}
+button.acpill:hover:not(:disabled){color:var(--ink);border-color:var(--accent)}
+button.acpill:disabled{cursor:default}
+.acring{display:inline-block}
+.acring.on{color:var(--accent);animation:acspin 1s linear infinite}
+@keyframes acspin{to{transform:rotate(360deg)}}
+.acdim{color:var(--dim)}
+.actable{width:100%;table-layout:fixed;border-collapse:collapse}
+.actable.stale{opacity:.5}
+.actable th{text-align:left;font-weight:400;color:var(--dim);font-size:11.5px;padding:var(--s1) var(--s2);border-bottom:1px solid var(--line)}
+.actable td{padding:var(--s0) var(--s2);vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.acgrp{border-bottom:1px solid var(--line)}
+.acgrp tr:first-child td{padding-top:var(--s1)}
+.acgrp tr:last-child td{padding-bottom:var(--s1)}
+.acgrp:hover{background:var(--panel)}
+.actable{--acname-w:170px}.actable,.acchktip{--acmark-w:10px}.c-name{width:var(--acname-w)}.c-status{width:52px}.c-branch{width:150px}
+.c-sha{width:72px}.c-when{width:56px}.c-who{width:90px}
+.acrepo{display:inline-flex;align-items:center;gap:var(--s1);max-width:100%;color:var(--ink);text-decoration:none}
+.acrepo span{overflow:hidden;text-overflow:ellipsis}
+.acrepo img{flex:none;border-radius:3px;object-fit:contain}
+.acrepo:hover span{text-decoration:underline}
+.t-ok{color:var(--ok)}.t-warn{color:var(--warn)}.t-red{color:var(--red)}
+.acstatus{white-space:nowrap;font-variant-numeric:tabular-nums;cursor:default}
+/* the status dot is a button: hover floats its checks, a click lists them under the row */
+.acdot{border:0;background:none;padding:0 var(--s1);margin:0 calc(-1 * var(--s1));font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;border-radius:3px}
+.acdot:hover,.acdot[aria-expanded="true"]{background:var(--panel2)}
+.acchktip{z-index:40;max-width:560px;max-height:60vh;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 10px var(--shadow);padding:var(--s1) var(--s2);color:var(--ink);font-size:12px}
+.acchecks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1);white-space:normal}
+.acchecks li{display:flex;flex-direction:column;min-width:0}
+.acchkhead{display:flex;align-items:baseline;gap:var(--s2);min-width:0}
+.acchkmark{flex:none;width:var(--acmark-w)}
+.acchecks .fail .acchkmark,.acchecks .fail .acchkid{color:var(--red)}
+.acchecks .warn .acchkmark,.acchecks .warn .acchkid{color:var(--warn)}
+.acchkid{flex:none;font:11.5px ui-monospace,Menlo,monospace;text-decoration:none}
+.acchkid:hover{text-decoration:underline}
+.acchktitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.acchkline{margin-left:calc(var(--acmark-w) + var(--s2));color:var(--dim);font:11.5px/1.4 ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
+.acchkrow td{padding:var(--s1) var(--s2) var(--s2) calc(var(--acname-w) + var(--s2));white-space:normal}
+.acdirty,.acdirt,.acerr{color:var(--red)}
+.acdirt{cursor:help}
+.acsha{font:11.5px ui-monospace,Menlo,monospace;color:var(--dim)}
+.acwhen{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right}
+.acmark{display:inline-block;width:14px;font-size:11px}
+.pushed .acmark{color:var(--ok)}
+.unpushed{color:var(--warn)}
+/* the last commit, from before the window: grey, its marker kept */
+.actitle.old,.unpushed.old{color:var(--dim)}
+.acside{display:inline-block;margin-right:var(--s1);padding:0 var(--s1);border:1px solid var(--line);border-radius:3px;color:var(--dim);font-size:11px}
+.acwho{color:var(--dim)}
+.acmore{border:0;background:none;padding:0;color:var(--accent);font-size:12px}
+.acmore:hover{text-decoration:underline}
+.acfiles{z-index:40;max-width:480px;max-height:60vh;overflow:hidden;background:var(--panel2);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 10px var(--shadow);padding:var(--s1) var(--s2);color:var(--ink);pointer-events:none}
+.acfiles pre{margin:0;font:11.5px/1.4 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
+/* narrow: the sha and the author go, the title keeps its room */
+@container (max-width:680px){.c-sha,.acsha,.c-who,.acwho{display:none}.actable{--acname-w:120px}.c-branch{width:100px}.acchkrow td{padding-left:var(--s2)}}
+/* the open in Fork button leads the commit list, quiet until its row is hovered */
+.c-fork{width:22px}
+.actable td.acforkcell{padding-right:0;overflow:visible}
+.acfork{display:inline-flex;align-items:center;vertical-align:-2px;padding:0;border:0;background:none;color:var(--dim);cursor:pointer;opacity:.5}
+.acfork .hico{width:13px;height:13px}
+.acgrp:hover .acfork{opacity:1}
+.acfork:hover{color:var(--accent)}

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

@@ -0,0 +1,41 @@
+// A repo's admin page, as state: what administers the repo rather than works
+// in it. Archive asks first (the confirmation is this state, so it survives a
+// re-render and a test drives it headless), reload and keep active go to the
+// machine by the repo's key. On a hub of its own there is no machine, and no
+// admin page.
+import { makeAutoObservable } from 'mobx'
+import type { RepoSt } from './repo-st.ts'
+
+export class AdminSvc {
+    /** the archive button was pressed: its confirmation shows in its place */
+    confirming = false
+
+    constructor(private st: RepoSt) {
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    askArchive(): void {
+        this.confirming = true
+    }
+    cancel(): void {
+        this.confirming = false
+    }
+    /** archived, the repo leaves the project list and its page shows the
+     *  archived note with its way back */
+    archive(): void {
+        this.confirming = false
+        void this.st.home.projects.setArchived(this.st.key, true)
+    }
+
+    /** its hub, stopped in the daemon and loaded again with its config read fresh */
+    reload(): Promise<boolean> {
+        return this.st.home.machine?.hub(this.st.key, 'restart') ?? Promise.resolve(false)
+    }
+
+    get active(): boolean {
+        return this.st.home.machine?.isActive(this.st.key) === true
+    }
+    setActive(on: boolean): Promise<boolean> {
+        return this.st.home.machine?.setActive(this.st.key, on) ?? Promise.resolve(false)
+    }
+}

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

@@ -0,0 +1,42 @@
+// THE ADMIN PAGE of a repo (`#page:admin`): what administers the repo rather
+// than works in it, one row per control, each with the one sentence that says
+// what it does. State in admin-svc.ts. Only on the home: a hub of its own has
+// no machine to administer it.
+import { observer } from 'mobx-react-lite'
+import type { ReactNode } from 'react'
+import type { RepoSt } from './repo-st.ts'
+
+const Row = ({ title, says, children }: { title: string; says: string; children: ReactNode }) => (
+    <div className="adrow">
+        <div className="adtext">
+            <b>{title}</b>
+            <span className="dim">{says}</span>
+        </div>
+        <div className="adctl">{children}</div>
+    </div>
+)
+
+export const AdminPage = observer(({ app }: { app: RepoSt }) => {
+    const a = app.admin
+    const w = app.home.machine?.worker(app.key)
+    const name = app.name
+    return (
+        <div className="colcard checkcard">
+            <div className="chead">
+                <span className="tid">admin</span>
+                <h3 className="ctitle">{name}</h3>
+            </div>
+            <Row title="reload the hub" says={`stops ${name}'s hub in the daemon and loads it again, its repo.config.ts read fresh and its processes started again. The daemon already does it on its own when repo.config.ts changes: this is for a hub that is stuck.${w == null ? '' : ` Its hub is ${w.status} now.`}`}>
+                <button className="ghost" onClick={() => void a.reload()}>reload</button>
+            </Row>
+            <Row title="keep active" says="an active repo runs the checks the plan holds for it and gets its red pings. It is active on its own while an agent works in it or VS Code has it open: this keeps it active without either.">
+                <label className="adflag"><input type="checkbox" checked={a.active} onChange={(e) => void a.setActive(e.currentTarget.checked)} />active</label>
+            </Row>
+            <Row title="archive" says="it leaves the project list for the archived page, and nothing runs there: no hub, no watch, no plan rows, no processes, no widgets. Written to repo.config.ts as archived: true, and undone from the archived page.">
+                {a.confirming
+                    ? <span className="adconfirm"><span>archive {name}?</span><button className="primary" onClick={() => a.archive()}>archive it</button><button className="ghost" onClick={() => a.cancel()}>cancel</button></span>
+                    : <button className="ghost" onClick={() => a.askArchive()}>archive</button>}
+            </Row>
+        </div>
+    )
+})

package/src/serve/hub-app/chart-view.ts

@@ -1,12 +1,12 @@
 // The view state of THE run chart: its zoom, the width it has on screen and
 // what is under the pointer, over the geometry (timeline-geometry.ts) and the
-// drawing (timeline-chart.tsx). The live strip owns it, and nothing else in
-// the hub draws a run. What differs is the source: folded, a rolling window
-// that ends now; unfolded, the whole record opened on its last minutes.
+// drawing (timeline-chart.tsx). What differs is the source: the dock's, a
+// rolling window that ends now with one group of lanes per repo; a repo's
+// runs page's, its whole record opened on its last minutes.
 import { makeAutoObservable, observableRef } from 'mobx'
 import type { TimelineInvocation } from '../../ledger/run-timeline.ts'
 import {
-    anchorScroll, buildAxis, fitScale, fitWindow, layoutTimeline, maxZoom, PAD_PX, windowAxis, ZOOM_MIN, zoomStep, type Axis, type Layout, type Span,
+    anchorScroll, buildAxis, fitScale, fitWindow, layoutGroups, layoutTimeline, maxZoom, PAD_PX, windowAxis, ZOOM_MIN, zoomStep, type Axis, type ChartGroup, type Layout, type Span,
 } from './timeline-geometry.ts'
 
 /** what a chart draws. `windowMs` null = the whole record, with idle
@@ -23,6 +23,11 @@ export type ChartSource = {
     /** the span the view opens on: at its home zoom this much time, ending
      *  now, fills the width. Absent = home is zoom 1, the whole source */
     homeSpanMs?: number
+    /** one group of lanes per key, over a rolling window only. `invocations`
+     *  then holds every group's, and `laneCap` bounds each group */
+    groups?: ChartGroup[]
+    /** the fewest lanes a group takes, so its label fits beside them */
+    minLanes?: number
 }
 
 /** what the tooltip says, and the viewport point it is fixed at */
@@ -117,7 +122,9 @@ export class ChartView {
     get layout(): Layout | null {
         const s = this.src
         if (s == null || this.viewW === 0) return null
-        return layoutTimeline(s.invocations, this.now, this.scale, { from: this.from ?? undefined, laneCap: s.laneCap, cap: s.cap })
+        const from = this.from
+        if (s.groups != null && from != null) return layoutGroups(s.groups, this.now, this.scale, { from, laneCap: s.laneCap, minLanes: s.minLanes, cap: s.cap })
+        return layoutTimeline(s.invocations, this.now, this.scale, { from: from ?? undefined, laneCap: s.laneCap, cap: s.cap })
     }
 
     private axisAt(scale: number): Axis {

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

@@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'
 import { CACHED } from '../../core/outcome-words.ts'
 import { durationTone, fmtMs } from './dur.ts'
 import { Help, TERMS } from './help.tsx'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import type { SlowSuite, CheckFacts, RecentRun, WhenAt } from './hub-types.ts'
 import { renderMd, renderMdInline } from './md.ts'
 import { nextRun } from './next-run.ts'
@@ -89,7 +89,7 @@ export const copy = (text: string): void => {
 
 /** THE COMMAND, exactly as the gate spawns it from the repo root, or the one
  *  line saying its body is a function inside the gate */
-export const CommandLine = ({ app, u }: { app: HubSt; u: CheckFacts }) => {
+export const CommandLine = ({ app, u }: { app: RepoSt; u: CheckFacts }) => {
     const c = commandOf(u, app.root)
     if (c.kind === 'in-process')
         return (
@@ -132,7 +132,7 @@ export const CommandLine = ({ app, u }: { app: HubSt; u: CheckFacts }) => {
  *  through the managed block, and leaves the file dirty: a change of place is
  *  a change its owner reviews in a git client, never a commit made on their
  *  behalf. Choosing never asks for the reason before it writes. */
-const RunWhen = observer(({ app, u }: { app: HubSt; u: CheckFacts }) => {
+const RunWhen = observer(({ app, u }: { app: RepoSt; u: CheckFacts }) => {
     const s = app.checks
     const g = s.gate
     const shown = s.whenShown(u)
@@ -193,7 +193,7 @@ const Bars = ({ runs, ceiling, budget }: { runs: RecentRun[]; ceiling: number; b
 }
 
 /** how the last answer came: `ran 3m ago in 412ms`, or `cached 16m ago` */
-export const LastRunValue = observer(({ app, u }: { app: HubSt; u: CheckFacts }) => {
+export const LastRunValue = observer(({ app, u }: { app: RepoSt; u: CheckFacts }) => {
     const l = lastRun(u)
     if (l == null) return <span className="dim">never here</span>
     return (
@@ -245,7 +245,7 @@ const LogLines = ({ lines }: { lines: string[] }) => (
 
 /** the lines of the run in flight, then the lines of the last one. It
  *  scrolls itself while a run streams, so the newest line is on screen */
-const LastOutput = observer(({ app, lines }: { app: HubSt; lines: string[] }) => {
+const LastOutput = observer(({ app, lines }: { app: RepoSt; lines: string[] }) => {
     const live = app.checks.liveLines
     const box = useRef<HTMLPreElement>(null)
     useEffect(() => { if (box.current != null) box.current.scrollTop = box.current.scrollHeight }, [live.length])
@@ -263,7 +263,7 @@ const LastOutput = observer(({ app, lines }: { app: HubSt; lines: string[] }) =>
 /** the slow suites declared under the test step, each with the case it
  *  argued. Moving a suite between the tiers is the SAME managed block write,
  *  and it demands both answers exactly as `defineRepo` does. */
-const SlowSuites = observer(({ app }: { app: HubSt }) => {
+const SlowSuites = observer(({ app }: { app: RepoSt }) => {
     const s = app.checks
     const declared: SlowSuite[] = s.gate?.tests.slow ?? []
     return (
@@ -294,7 +294,7 @@ const SlowSuites = observer(({ app }: { app: HubSt }) => {
 
 // ── the pages ────────────────────────────────────────────────────────────
 
-export const CheckCard = observer(({ app, id }: { app: HubSt; id: string }) => {
+export const CheckCard = observer(({ app, id }: { app: RepoSt; id: string }) => {
     const i = app.cols.find('checks', id)
     if (i == null) return <div className="ph">check vanished, the inventory moved on</div>
     const u = i.check
@@ -325,8 +325,8 @@ export const CheckCard = observer(({ app, id }: { app: HubSt; id: string }) => {
                 <Remembered u={u} />
                 {/* the help never depends on the second, so it reads the wall
                     clock and the row does not repaint on every tick */}
-                <Row k="next run" help={nextRun(u, app.cols.schedule, Date.now()).help}>
-                    <TimeAhead clock={app.clock} words={(now) => nextRun(u, app.cols.schedule, now)} />
+                <Row k="next run" help={nextRun(u, app.cols.planOf(u.checkId), Date.now()).help}>
+                    <TimeAhead clock={app.clock} words={(now) => nextRun(u, app.cols.planOf(u.checkId), now)} />
                 </Row>
                 <Row k="last run" help={u.status == null
                     ? 'no run of it is on record in this checkout'

package/src/serve/hub-app/check-words.ts

@@ -18,7 +18,7 @@ const list = (xs: string[]): string => (xs.length < 2 ? xs.join('') : `${xs.slic
 const CADENCE: Record<WhenAt, string> = {
     always: 'on every run',
     release: 'on every release run',
-    health: 'on every daily pass',
+    health: 'each time the plan runs it',
     off: 'nowhere, it is off',
 }
 
@@ -35,6 +35,8 @@ export function rememberedFact(u: CachePop): RememberedFact {
         return { v: 'until a file it reads changes', inputs, help: `keyed on ${list(inputs)}: the answer is ${CACHED} until a change under ${inputs.length > 1 ? 'them' : 'it'}, then it runs again` }
     if (u.reads === true && inputs.length === 0 && (u.ttl == null || u.ttl === '') && u.never == null)
         return { v: 'until a file it read changes', inputs: [], help: `keyed on what its last run read: the answer is ${CACHED} until one of those files, existence probes or listings changes, then it runs again. \`shipkit keys --why\` names them` }
+    if (u.ttl === 'forever')
+        return { v: 'until its declaration changes', inputs: [], help: 'a decided fact (`ttl: \'forever\'`): a clean answer is kept until the value it checks is declared differently, and it runs only while no answer exists for that value' }
     if (u.ttl != null && u.ttl !== '') {
         let every = u.ttl
         try { every = spanWords(parseDuration(u.ttl)) } catch { /* an unparsable ttl is shown as written */ }

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

@@ -8,7 +8,7 @@
 // dropped when the run ends and the next poll brings the same facts back
 // from the one place that owns them.
 import { makeAutoObservable, runInAction } from 'mobx'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import { applyRunEvent, idleRun, startRun, stripText, type RunProgress } from './run-strip.ts'
 import type { GateBlock, Resource, ResourceState, SlowSuite, CheckEvent, WhenAt } from './hub-types.ts'
 import { WHEN_OPTION } from './check-words.ts'
@@ -42,6 +42,10 @@ export class ChecksSvc {
      *  stay after the run: they ARE the last output until the next one */
     liveLines: string[] = []
     private clearTimer: ReturnType<typeof setTimeout> | null = null
+
+    dispose(): void {
+        if (this.clearTimer != null) clearTimeout(this.clearTimer)
+    }
     /** the managed block in repo.config.ts as the server last sent it: the
      *  hash the next write hands back, and whether the file is waiting for
      *  a commit. null until the first read */
@@ -56,7 +60,7 @@ export class ChecksSvc {
     /** the slow suite form under the test check */
     suite: SlowSuite = { file: '', catches: '', whyNotFast: '' }
 
-    constructor(private st: HubSt) {
+    constructor(private st: RepoSt) {
         makeAutoObservable<this, 'st' | 'clearTimer'>(this, { st: false, clearTimer: false })
     }
 
@@ -89,7 +93,7 @@ export class ChecksSvc {
      *  silent overwrite */
     async loadGate(): Promise<void> {
         try {
-            const r = await fetch('/api/checks/when')
+            const r = await fetch(this.st.url('/api/checks/when'))
             if (!r.ok) throw new Error(await r.text())
             const b = (await r.json()) as GateBlock
             runInAction(() => { this.gate = b })
@@ -109,14 +113,14 @@ export class ChecksSvc {
             // the hash of the file the page last read: without it a write
             // could land on top of an edit this page never saw
             if (this.gate == null) await this.loadGate()
-            const r = await fetch('/api/checks/when', { method: 'POST', body: JSON.stringify({ ...edit, expect: this.gate?.hash }) })
+            const r = await fetch(this.st.url('/api/checks/when'), { method: 'POST', body: JSON.stringify({ ...edit, expect: this.gate?.hash }) })
             if (!r.ok) throw new Error(await r.text())
             const b = (await r.json()) as GateBlock
             runInAction(() => { this.gate = b; this.gateNote = said })
             took = true
             // the rows carry `when`, so they are right only after the server
             // has read the config it just wrote
-            await this.st.cols.poll()
+            await this.st.cols.poll(true)
         } catch (e) {
             runInAction(() => { this.gateNote = `refused: ${(e as Error).message}` })
             // whatever the file really says now, so the next try is not
@@ -227,7 +231,7 @@ export class ChecksSvc {
             this.note = `running ${label}…`
         })
         try {
-            const r = await fetch('/api/check/run', { method: 'POST', body: JSON.stringify({ ...(only == null ? {} : { only }), ...(gate ? { gate } : {}) }) })
+            const r = await fetch(this.st.url('/api/check/run'), { method: 'POST', body: JSON.stringify({ ...(only == null ? {} : { only }), ...(gate ? { gate } : {}) }) })
             const rd = r.body!.getReader()
             const dec = new TextDecoder()
             let buf = ''
@@ -270,9 +274,9 @@ export class ChecksSvc {
         this.clearTimer = setTimeout(() => runInAction(() => { this.progress = idleRun() }), 5_000)
         // the numbers a run just produced live on the server, in the log it
         // wrote: one poll and the page is reading them rather than a memory
-        await this.st.cols.poll()
+        await this.st.cols.poll(true)
         void this.st.health.load()
-        void this.st.timeline.load()
+        void this.st.timeline.load(true)
         // a test page on screen reads the record the run just wrote
         const sel = this.st.sel
         if (sel?.t === 'tests') void this.st.tests.load(sel.check)

package/src/serve/hub-app/col-card.tsx

@@ -5,7 +5,7 @@
 // the file wins).
 import { runInAction } from 'mobx'
 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'
 import { renderMd } from './md.ts'
 
@@ -24,7 +24,7 @@ const CredHead = ({ cred }: { cred: ReturnType<typeof credOf> }) => (
     </>
 )
 
-export const ColCard = observer(({ app, col, id }: { app: HubSt; col: string; id: string }) => {
+export const ColCard = observer(({ app, col, id }: { app: RepoSt; col: string; id: string }) => {
     const c = app.cols
     const i = c.find(col, id)
     if (i == null) return <div className="ph">item vanished — the truth file moved on</div>
@@ -103,7 +103,7 @@ export const ColCard = observer(({ app, col, id }: { app: HubSt; col: string; id
 
 // collection view — one card per visible instance, the stage-side twin of a
 // sidebar section (every section gets both views)
-export const ColGrid = observer(({ app, id }: { app: HubSt; id: string }) => {
+export const ColGrid = observer(({ app, id }: { app: RepoSt; id: string }) => {
     const c = app.cols
     const col = c.sidebarCols.find((x) => x.id === id)
     if (col == null) return <div className="stagewrap"><div className="ph">collection vanished — the truth moved on</div></div>
@@ -155,7 +155,7 @@ const wireClass = (l: string): string => {
 
 // the RAW view of a run: every check has its own page, and this is the one
 // node that keeps the whole text reachable
-export const StatusCard = observer(({ app }: { app: HubSt }) => {
+export const StatusCard = observer(({ app }: { app: RepoSt }) => {
     const h = app.health
     const body = h.live.length > 0
         ? h.live.join('\n')

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

@@ -4,20 +4,40 @@
 // file through /api/act/*; errors come back as 400 text shown verbatim on
 // the card.
 import { makeAutoObservable, runInAction } from 'mobx'
-import type { HubSt } from './hub-st.ts'
-import type { Col, ColMeta, HubProblem, Resource, Schedule } from './hub-types.ts'
+import type { RepoSt } from './repo-st.ts'
+import type { Col, ColMeta, HubProblem, Resource } from './hub-types.ts'
+import type { PlanRow } from '../../plan/planner.ts'
+import { readScreen, SCREEN_WRITE_MS, writeScreen } from './screen-cache.ts'
+
+/** what /api/resources.json answers */
+type Answer = { collections: ColMeta[]; resources: Resource[]; planned?: PlanRow[] | null; hub?: HubProblem[] }
 
 export class ColsSvc {
     /** exactly what the server last sent; `resources` is this plus the live
      *  results of a run in flight */
     fetched: Resource[] = []
     colMeta: ColMeta[] = []
-    /** the hub's daily health pass timer, as the last poll saw it */
-    schedule: Schedule | null = null
+    /** this repo's rows of the plan, null when no plan covers it */
+    planned: PlanRow[] | null = null
     /** what the server says is wrong with the hub itself */
     hubProblems: HubProblem[] = []
     /** the last poll failed: the page cannot reach its own server */
     fetchErr: string | null = null
+    /** a first answer arrived: until then the tree and the page links show a
+     *  spinner where they will be, never an empty repo */
+    loaded = false
+    /** what shows was kept by this browser from an earlier load, and the
+     *  hub has not answered yet (screen-cache.ts) */
+    cached = false
+    /** the first media category the kept screen had, until the media
+     *  heartbeat lists the assets */
+    cachedCat: string | null = null
+    /** when this repo's screen was last kept, 0 for never */
+    private keptAt = 0
+    /** the last answer, and the media category last kept with it */
+    private last: Answer | null = null
+    private keptCat: string | null | undefined = undefined
+    private restoring: Promise<void> | null = null
     actErr = ''
     remarkDraft = ''
     proofDraft = ''
@@ -25,30 +45,89 @@ export class ColsSvc {
     foldOverride = new Map<string, boolean>()
     private timer: ReturnType<typeof setInterval> | null = null
 
-    constructor(private st: HubSt) {
-        makeAutoObservable<this, 'st' | 'timer'>(this, { st: false, timer: false })
+    constructor(private st: RepoSt) {
+        makeAutoObservable<this, 'st' | 'timer' | 'keptAt' | 'restoring' | 'readKept' | 'last' | 'keptCat'>(this, { st: false, timer: false, keptAt: false, restoring: false, readKept: false, last: false, keptCat: false })
+    }
+
+    /** one check's row of the plan, null when no plan covers it */
+    planOf(check: string): PlanRow | null {
+        return this.planned?.find((r) => r.check === check) ?? null
+    }
+
+    /** where this repo's screen is kept: its name, or `self` on a hub of its own */
+    private get screenKey(): string {
+        return this.st.key === '' ? 'self' : this.st.key
+    }
+
+    /** paint the screen this browser kept, unless the hub answered first.
+     *  One read per repo, whoever asks */
+    restore(): Promise<void> {
+        this.restoring ??= this.readKept()
+        return this.restoring
+    }
+
+    private async readKept(): Promise<void> {
+        const s = await readScreen(this.screenKey)
+        if (s == null) return
+        runInAction(() => {
+            if (this.loaded) return
+            this.colMeta = s.collections
+            this.fetched = s.resources
+            this.planned = s.planned
+            this.hubProblems = s.hub
+            this.cachedCat = s.mediaCat
+            this.cached = true
+        })
+    }
+
+    /** keep the screen for the next load: the first answer, then at most
+     *  once a minute. The answer as parsed, never the observable copy, which
+     *  IndexedDB cannot clone */
+    private keep(j: Answer, cat: string | null = this.st.media.assets[0]?.cat ?? this.cachedCat, force = false): void {
+        this.last = j
+        const now = Date.now()
+        if (!force && now - this.keptAt < SCREEN_WRITE_MS) return
+        this.keptAt = now
+        this.keptCat = cat
+        void writeScreen(this.screenKey, { at: now, collections: j.collections, resources: j.resources, planned: j.planned ?? null, hub: j.hub ?? [], mediaCat: cat })
+    }
+
+    /** the media heartbeat listed the assets: a first category the kept
+     *  screen does not name yet is kept at once, so the header's media link
+     *  is there on the next load */
+    mediaListed(): void {
+        const cat = this.st.media.assets[0]?.cat ?? null
+        if (this.last != null && cat !== this.keptCat) this.keep(this.last, cat, true)
     }
 
     start(): void {
+        if (this.timer != null) return
         void this.poll()
         this.timer = setInterval(() => void this.poll(), 10_000)
     }
-    dispose(): void {
+    stop(): void {
         if (this.timer != null) clearInterval(this.timer)
+        this.timer = null
     }
 
-    async poll(): Promise<void> {
+    /** `fresh`: this page just changed the truth (an act, a run that ended),
+     *  so the answer waits on a walk that includes it rather than on the one
+     *  the server keeps warm */
+    async poll(fresh = false): Promise<void> {
         try {
-            const r = await fetch('/api/resources.json')
+            const r = await fetch(this.st.url(fresh ? '/api/resources.json?fresh=1' : '/api/resources.json'))
             if (!r.ok) throw new Error(await r.text())
-            const j = (await r.json()) as { collections: ColMeta[]; resources: Resource[]; schedule?: Schedule | null; hub?: HubProblem[] }
+            const j = (await r.json()) as Answer
             runInAction(() => {
                 this.colMeta = j.collections
                 this.fetched = j.resources
-                this.schedule = j.schedule ?? null
+                this.planned = j.planned ?? null
                 this.hubProblems = j.hub ?? []
                 this.fetchErr = null
+                this.loaded = true
+                this.cached = false
             })
+            this.keep(j)
         } catch (e) {
             // a dead server must SAY so, in the header, never leave a tree
             // that reads like a healthy repo. The last rows stay, dated by it
@@ -130,9 +209,9 @@ export class ColsSvc {
     private async act(path: string, body: Record<string, unknown>): Promise<boolean> {
         this.actErr = ''
         try {
-            const r = await fetch(`/api/act/${path}`, { method: 'POST', body: JSON.stringify(body) })
+            const r = await fetch(this.st.url(`/api/act/${path}`), { method: 'POST', body: JSON.stringify(body) })
             if (!r.ok) throw new Error(await r.text())
-            await this.poll()
+            await this.poll(true)
             return true
         } catch (e) {
             runInAction(() => { this.actErr = (e as Error).message })

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

@@ -4,7 +4,7 @@
 // it is something the panel SAID: the header never reports a state it guessed
 // from how the iframe looks.
 import { makeAutoObservable, runInAction } from 'mobx'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 
 export type ComfyBox = { url: string; up: boolean; err: string | null }
 /** what the panel says, narrowed to the messages this host acts on */
@@ -37,10 +37,16 @@ export class ComfySvc {
     private mountedFor = ''
     private frame: HTMLIFrameElement | null = null
     private handshake: ReturnType<typeof setTimeout> | null = null
+    private readonly listener = (e: MessageEvent): void => this.onMessage(e)
 
-    constructor(private st: HubSt) {
-        makeAutoObservable<this, 'st' | 'frame' | 'handshake'>(this, { st: false, frame: false, handshake: false })
-        window.addEventListener('message', (e) => this.onMessage(e))
+    dispose(): void {
+        window.removeEventListener('message', this.listener)
+        if (this.handshake != null) clearTimeout(this.handshake)
+    }
+
+    constructor(private st: RepoSt) {
+        makeAutoObservable<this, 'st' | 'frame' | 'handshake' | 'listener'>(this, { st: false, frame: false, handshake: false, listener: false })
+        window.addEventListener('message', this.listener)
     }
 
     setFrame(el: HTMLIFrameElement | null): void {
@@ -78,7 +84,7 @@ export class ComfySvc {
     }
 
     async probeBox(): Promise<void> {
-        const box = await fetch('/api/comfy/box')
+        const box = await fetch(this.st.url('/api/comfy/box'))
             .then((r) => (r.ok ? (r.json() as Promise<ComfyBox>) : null))
             .catch(() => null)
         runInAction(() => {
@@ -107,7 +113,7 @@ export class ComfySvc {
         })
         void this.probeBox()
         try {
-            const r = await fetch('/api/comfy/panel', { method: 'POST', body: JSON.stringify({ restart }) })
+            const r = await fetch(this.st.url('/api/comfy/panel'), { method: 'POST', body: JSON.stringify({ restart }) })
             if (!r.ok) throw new Error(await r.text())
             const up = (await r.json()) as { url: string }
             runInAction(() => {

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

@@ -4,7 +4,7 @@
 import { observer } from 'mobx-react-lite'
 import { useEffect } from 'react'
 import type { ComfySvc } from './comfy-svc.ts'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 
 const PANEL_CHIP: Record<ComfySvc['state'], { label: string; cls: string; title: string }> = {
     idle: { label: 'idle', cls: '', title: 'nothing started yet' },
@@ -16,7 +16,7 @@ const PANEL_CHIP: Record<ComfySvc['state'], { label: string; cls: string; title:
 
 // the same panel over an asset page. A popup, so the asset, its rolls and its
 // prompt stay on screen behind it while a value is tried
-export const ComfyOverlay = observer(({ app }: { app: HubSt }) => {
+export const ComfyOverlay = observer(({ app }: { app: RepoSt }) => {
     const c = app.comfy
     if (!c.overlay) return null
     const chip = PANEL_CHIP[c.state]
@@ -47,7 +47,7 @@ export const ComfyOverlay = observer(({ app }: { app: HubSt }) => {
     )
 })
 
-export const ComfyView = observer(({ app, id }: { app: HubSt; id: string }) => {
+export const ComfyView = observer(({ app, id }: { app: RepoSt; id: string }) => {
     const c = app.comfy
     const wf = id.replace(/^comfy:/, '')
     useEffect(() => {