rvlib-shipkit 0.38.0 → 1.0.0

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

@@ -1,12 +1,19 @@
-// Collections service — asks · creds · posts · health · graphs sections +
-// the act-in-place verbs. Every act hits a git-tracked truth file through
-// /api/act/*; errors come back as 400 text shown verbatim on the card.
+// Resources service — ONE flat list for the whole repo (/api/resources.json)
+// plus the act-in-place verbs. The collections are a GROUPING of that array,
+// computed here, never a second fetch. Every act hits a git-tracked truth
+// 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, ColInstance } from './hub-types.ts'
+import type { Col, ColMeta, Resource, Schedule } from './hub-types.ts'
 
 export class ColsSvc {
-    cols: Col[] = []
+    /** 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
     actErr = ''
     remarkDraft = ''
     proofDraft = ''
@@ -28,17 +35,37 @@ export class ColsSvc {
 
     async poll(): Promise<void> {
         try {
-            const r = await fetch('/api/collections.json')
+            const r = await fetch('/api/resources.json')
             if (!r.ok) throw new Error(await r.text())
-            const j = (await r.json()) as { collections: Col[] }
-            runInAction(() => { this.cols = j.collections })
+            const j = (await r.json()) as { collections: ColMeta[]; resources: Resource[]; schedule?: Schedule | null }
+            runInAction(() => {
+                this.colMeta = j.collections
+                this.fetched = j.resources
+                this.schedule = j.schedule ?? null
+            })
         } catch (e) {
+            // a dead server must SAY so on the tree, never render an empty
+            // repo that reads like a healthy one
+            const text = `resources fetch broke: ${(e as Error).message}`
             runInAction(() => {
-                this.cols = [{ id: 'hub', title: 'hub', media: 'health', instances: [{ id: 'hub:collections-broken', text: `collections fetch broke: ${(e as Error).message}`, severity: 'red' }] }]
+                this.colMeta = [{ id: 'hub', title: 'hub', media: 'health' }]
+                this.fetched = [{ id: 'hub:resources-broken', collection: 'hub', type: 'health', path: 'health/hub-fetch', virtual: true, title: text, text, state: 'red', severity: 'red' }]
             })
         }
     }
 
+    /** the one array, with whatever a RUNNING gate has already reported laid
+     *  over it: a row recolours the moment its check finishes, rather than on
+     *  the next ten second poll */
+    get resources(): Resource[] {
+        return this.st.checks.overlay(this.fetched)
+    }
+
+    /** the collections, as a grouping of the one array */
+    get cols(): Col[] {
+        return this.colMeta.map((m) => ({ ...m, instances: this.resources.filter((r) => r.collection === m.id) }))
+    }
+
     /** media instances render richer through the media sidebar — the
      *  collection twin would be a duplicate surface (kept in `cols` so the
      *  asset card can show its remarks) */
@@ -46,10 +73,10 @@ export class ColsSvc {
         return this.cols.filter((c) => c.id !== 'media')
     }
     mediaRemarks(assetId: string): string[] {
-        return this.cols.find((c) => c.id === 'media')?.instances.find((i) => i.id === `media:${assetId}`)?.remarks ?? []
+        return this.resources.find((i) => i.id === `media:${assetId}`)?.remarks ?? []
     }
 
-    needsItem = (i: ColInstance): boolean => i.severity != null
+    needsItem = (i: Resource): boolean => i.severity != null
     isOpen(c: Col): boolean {
         // a live search must SHOW its matches — folds yield while it runs
         if (this.st.query.trim() !== '') return true
@@ -69,9 +96,9 @@ export class ColsSvc {
         return c.instances.some((i) => i.severity === 'red')
     }
     get mediaHasRed(): boolean {
-        return this.cols.find((c) => c.id === 'media')?.instances.some((i) => i.severity === 'red') === true
+        return this.resources.some((i) => i.collection === 'media' && i.severity === 'red')
     }
-    visibleInstances(c: Col): ColInstance[] {
+    visibleInstances(c: Col): Resource[] {
         const f = this.st.filter
         const base = f === 'all' ? c.instances
             : c.instances.filter((i) => (f === 'red' ? i.severity === 'red' : this.needsItem(i)))
@@ -80,17 +107,14 @@ export class ColsSvc {
         return base.filter((i) => i.text.toLowerCase().includes(q) || (i.file ?? '').toLowerCase().includes(q))
     }
     get redCount(): number {
-        return this.cols.flatMap((c) => c.instances).filter((i) => i.severity === 'red').length
-    }
-    find(colId: string, id: string): ColInstance | null {
-        return this.cols.find((c) => c.id === colId)?.instances.find((i) => i.id === id) ?? null
+        return this.resources.filter((i) => i.severity === 'red').length
     }
-    colTitle(colId: string): string {
-        return this.cols.find((c) => c.id === colId)?.title ?? colId
+    find(colId: string, id: string): Resource | null {
+        return this.resources.find((i) => i.collection === colId && i.id === id) ?? null
     }
 
     select(colId: string, id: string): void {
-        this.st.sel = { t: 'item', col: colId, id }
+        this.st.setSel({ t: 'item', col: colId, id })
         this.actErr = ''
         this.remarkDraft = ''
         this.proofDraft = ''

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

@@ -0,0 +1,171 @@
+// Comfy service — starts the repo's comfy-ts panel on demand and speaks the
+// documented host protocol to the frame (comfy-ts src/cli/serve/hostProtocol.ts).
+// The panel is CROSS-ORIGIN (its own port), so everything the hub knows about
+// 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'
+
+export type ComfyBox = { url: string; up: boolean; err: string | null }
+/** what the panel says, narrowed to the messages this host acts on */
+type PanelMsg = { comfyTs?: unknown; module?: unknown; draft?: unknown; code?: unknown; message?: unknown }
+
+/** `ready` never arriving is not the same as a dead panel: an older comfy-ts
+ *  serves a working ui and speaks no protocol, so the chip says which it is */
+const HANDSHAKE_MS = 10_000
+
+export class ComfySvc {
+    /** the iframe src, set ONCE per hub session: re-pointing it remounts the
+     *  panel and throws away its gallery, so a workflow switch is a message */
+    mountUrl = ''
+    /** bumped on a restart: it is the iframe's react key, so a fresh panel
+     *  process gets a fresh frame instead of one pointing at a dead port */
+    mountNonce = 0
+    state: 'idle' | 'starting' | 'live' | 'silent' | 'dead' = 'idle'
+    err = ''
+    box: ComfyBox | null = null
+    /** the selection as the PANEL reports it — the hub follows, never the reverse */
+    live: { module: string; draft: string } | null = null
+    /** the panel over the ASSET page, so tuning starts where the asset already
+     *  is instead of sending him to another section to find the same frame */
+    overlay = false
+    /** a draft asked for before the panel answered: the deep link carries the
+     *  workflow only, so the draft rides a message once the handshake lands */
+    private wantDraft = ''
+    /** the workflow the mount url carries — the panel opens on it by deep link,
+     *  so asking for it again by message would reset its draft for nothing */
+    private mountedFor = ''
+    private frame: HTMLIFrameElement | null = null
+    private handshake: ReturnType<typeof setTimeout> | null = null
+
+    constructor(private st: HubSt) {
+        makeAutoObservable<this, 'st' | 'frame' | 'handshake'>(this, { st: false, frame: false, handshake: false })
+        window.addEventListener('message', (e) => this.onMessage(e))
+    }
+
+    setFrame(el: HTMLIFrameElement | null): void {
+        this.frame = el
+    }
+
+    /** the comfy row's ONE action: mount the panel, or move the mounted one */
+    async open(id: string): Promise<void> {
+        if (this.mountUrl === '') return await this.start(id)
+        if (id !== (this.live?.module ?? this.mountedFor)) this.post({ comfyTs: 'set-selection', module: id, draft: 'default' })
+    }
+
+    /** an asset page's own action: tune THIS asset's workflow without leaving
+     *  the asset. The draft is the KIND's, one file shared by every asset of
+     *  that kind, and the asset's own prompt and seed land on top of it at run
+     *  time */
+    async tune(module: string, draft: string): Promise<void> {
+        runInAction(() => {
+            this.overlay = true
+            this.wantDraft = draft
+        })
+        if (this.mountUrl === '') return await this.start(module)
+        this.selectWanted(module)
+    }
+
+    closeOverlay(): void {
+        this.overlay = false
+    }
+
+    /** the panel is live already, so the move is a message and the gallery stays */
+    private selectWanted(module: string): void {
+        const draft = this.wantDraft === '' ? 'default' : this.wantDraft
+        if (this.live?.module === module && this.live.draft === draft) return
+        this.post({ comfyTs: 'set-selection', module, draft })
+    }
+
+    async probeBox(): Promise<void> {
+        const box = await fetch('/api/comfy/box')
+            .then((r) => (r.ok ? (r.json() as Promise<ComfyBox>) : null))
+            .catch(() => null)
+        runInAction(() => {
+            this.box = box
+        })
+    }
+
+    /** an edited .cflow.ts module reaches the panel only through a new process:
+     *  comfy-ts serve imports every module once, at boot */
+    async restart(): Promise<void> {
+        const id = this.live?.module ?? this.mountedFor
+        if (id === '') return
+        runInAction(() => {
+            this.live = null
+            this.mountUrl = ''
+            this.mountNonce++
+        })
+        await this.start(id, true)
+    }
+
+    private async start(id: string, restart = false): Promise<void> {
+        if (this.state === 'starting' && !restart) return
+        runInAction(() => {
+            this.state = 'starting'
+            this.err = ''
+        })
+        void this.probeBox()
+        try {
+            const r = await fetch('/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(() => {
+                this.mountedFor = id
+                this.mountUrl = `${up.url}/?workflow=${encodeURIComponent(id)}`
+            })
+            this.armHandshake()
+        } catch (e) {
+            runInAction(() => {
+                this.state = 'dead'
+                this.err = (e as Error).message
+            })
+        }
+    }
+
+    private armHandshake(): void {
+        if (this.handshake != null) clearTimeout(this.handshake)
+        this.handshake = setTimeout(
+            () =>
+                runInAction(() => {
+                    if (this.state === 'starting') this.state = 'silent'
+                }),
+            HANDSHAKE_MS,
+        )
+    }
+
+    private post(msg: Record<string, unknown>): void {
+        const w = this.frame?.contentWindow
+        if (w == null || this.mountUrl === '') return
+        w.postMessage(msg, new URL(this.mountUrl).origin)
+    }
+
+    private onMessage(e: MessageEvent): void {
+        // the frame we mounted and nobody else: another embed on this page
+        // speaking first must never drive this header
+        if (this.frame == null || e.source !== this.frame.contentWindow) return
+        const m = e.data as PanelMsg | null
+        if (m == null || typeof m.comfyTs !== 'string') return
+        runInAction(() => {
+            if (m.comfyTs === 'ready') {
+                this.state = 'live'
+                this.err = ''
+                if (this.wantDraft !== '') this.selectWanted(this.mountedFor)
+            } else if (m.comfyTs === 'error' && m.code === 'boot') {
+                this.state = 'dead'
+                this.err = typeof m.message === 'string' ? m.message : 'the panel could not boot'
+            } else if (m.comfyTs === 'selection' && typeof m.module === 'string' && typeof m.draft === 'string') {
+                this.state = 'live'
+                this.live = { module: m.module, draft: m.draft }
+                if (m.draft === this.wantDraft) this.wantDraft = ''
+                // over an asset page the panel is a popup ON that asset: following
+                // its selection here would navigate off the asset it was opened from
+                if (this.overlay) return
+                // a switch made INSIDE the panel moves the hub's selected row,
+                // so the two never show different workflows
+                const id = `comfy:${m.module}`
+                if (this.st.sel?.t !== 'item' || this.st.sel.id !== id) this.st.cols.select('comfy', id)
+            }
+        })
+    }
+}

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

@@ -0,0 +1,81 @@
+// comfy item view — comfy-ts's own panel fills the stage, the header states
+// what the hub cannot see from the outside: whether the panel handshook, and
+// whether the box a run needs is answering.
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
+import type { ComfySvc } from './comfy-svc.ts'
+import type { HubSt } from './hub-st.ts'
+
+const PANEL_CHIP: Record<ComfySvc['state'], { label: string; cls: string; title: string }> = {
+    idle: { label: 'idle', cls: '', title: 'nothing started yet' },
+    starting: { label: 'starting', cls: '', title: 'the hub is starting comfy-ts serve' },
+    live: { label: 'live', cls: 'ok', title: 'the panel handshook over the host protocol' },
+    silent: { label: 'no handshake', cls: '', title: 'the panel never sent ready — it still works, this hub just cannot follow its selection' },
+    dead: { label: 'failed', cls: 'miss', title: 'the panel could not start' },
+}
+
+// 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 }) => {
+    const c = app.comfy
+    if (!c.overlay) return null
+    const chip = PANEL_CHIP[c.state]
+    const box = c.box
+    return (
+        <div className="cfov" onClick={() => c.closeOverlay()}>
+            <div className="cfbox" onClick={(e) => e.stopPropagation()}>
+                <div className="gvhead">
+                    <span className="gvtext">{c.live?.module ?? ''}{c.live != null ? ` · ${c.live.draft}` : ''}</span>
+                    <span className={`stchip ${chip.cls}`} title={chip.title}>{chip.label}</span>
+                    {box != null ? (
+                        <span className={`stchip ${box.up ? 'ok' : 'miss'}`} title={box.err ?? box.url}>
+                            {box.up ? 'box up' : `box unreachable — ${box.url}`}
+                        </span>
+                    ) : null}
+                    <button className="ghost" title="restart the panel process — the only way an edited .cflow.ts module reaches it"
+                        onClick={() => void c.restart()}>restart panel</button>
+                    <button className="ghost" onClick={() => c.closeOverlay()}>close</button>
+                </div>
+                {c.err !== '' ? <div className="err">✗ {c.err}</div> : null}
+                {c.mountUrl !== '' ? (
+                    <iframe key={c.mountNonce} ref={(el) => c.setFrame(el)} src={c.mountUrl} title="comfy-ts panel" />
+                ) : (
+                    <div className="ph">{c.state === 'dead' ? 'the panel did not start' : 'starting the comfy-ts panel…'}</div>
+                )}
+            </div>
+        </div>
+    )
+})
+
+export const ComfyView = observer(({ app, id }: { app: HubSt; id: string }) => {
+    const c = app.comfy
+    const wf = id.replace(/^comfy:/, '')
+    useEffect(() => {
+        void c.open(wf)
+    }, [c, wf])
+    const chip = PANEL_CHIP[c.state]
+    const box = c.box
+    return (
+        <div className="comfyview">
+            <div className="gvhead">
+                <span className="gvtext">{c.live?.module ?? wf}{c.live != null ? ` · ${c.live.draft}` : ''}</span>
+                <span className={`stchip ${chip.cls}`} title={chip.title}>{chip.label}</span>
+                {box != null ? (
+                    <span className={`stchip ${box.up ? 'ok' : 'miss'}`} title={box.err ?? box.url}>
+                        {box.up ? 'box up' : `box unreachable — ${box.url}`}
+                    </span>
+                ) : null}
+                <button className="ghost" title="re-probe the box" onClick={() => void c.probeBox()}>↻</button>
+                <button className="ghost" title="restart the panel process — the only way an edited .cflow.ts module reaches it"
+                    onClick={() => void c.restart()}>restart panel</button>
+            </div>
+            {c.err !== '' ? <div className="err">✗ {c.err}</div> : null}
+            {box?.err != null ? <div className="err">✗ {box.err}</div> : null}
+            {c.mountUrl !== '' ? (
+                <iframe key={c.mountNonce} ref={(el) => c.setFrame(el)} src={c.mountUrl} title="comfy-ts panel" />
+            ) : (
+                <div className="ph">{c.state === 'dead' ? 'the panel did not start' : 'starting the comfy-ts panel…'}</div>
+            )}
+        </div>
+    )
+})

package/src/serve/hub-app/dur.ts

@@ -0,0 +1,41 @@
+// ONE duration unit for the whole hub, and ONE tone table under it.
+//
+// Every number the page prints is milliseconds, grouped by a thin space, so a
+// column of them compares by eye. Mixing `4.2s` into a column of `412ms` made
+// the two biggest numbers on the page look like the two smallest.
+//
+// The tone is here rather than in a component because the tree row and the
+// check page both colour the same number, and two tables would eventually say
+// two things about one measurement.
+
+/** the thousands separator: a thin space, so the digits stay a block */
+export const THIN = ' '
+
+/** green · plain ink · orange · red */
+export type DurTone = 'fast' | 'plain' | 'slow' | 'bad'
+
+const FAST_MS = 500
+const PLAIN_MS = 2_000
+const SLOW_MS = 10_000
+
+/** past this share of its kill time a check is red whatever the table says:
+ *  the next slow machine trips it */
+const CEILING_SHARE = 0.5
+
+const group = (n: number): string => {
+    const s = `${n}`
+    let out = ''
+    for (let i = 0; i < s.length; i++) out += (i > 0 && (s.length - i) % 3 === 0 ? THIN : '') + s[i]!
+    return out
+}
+
+export const fmtMs = (ms: number | null | undefined): string => (ms == null ? '' : `${group(Math.round(ms))}ms`)
+
+export function durationTone(ms: number | null | undefined, ceilingMs?: number | null): DurTone | null {
+    if (ms == null) return null
+    if (ceilingMs != null && ceilingMs > 0 && ms > ceilingMs * CEILING_SHARE) return 'bad'
+    if (ms < FAST_MS) return 'fast'
+    if (ms < PLAIN_MS) return 'plain'
+    if (ms < SLOW_MS) return 'slow'
+    return 'bad'
+}

package/src/serve/hub-app/hash-route.ts

@@ -0,0 +1,121 @@
+// THE ADDRESS of what is on screen, both ways, and nothing else. Pure on
+// purpose: the page's selection rules are worth pinning, and HubSt cannot be
+// instantiated without a browser.
+//
+// The media forms are older than the rest and stay byte for byte what they
+// were, because they are pasted around as share links: `#<assetId>` with an
+// optional `?tools=a,b`, and `#cat-<Category>`.
+
+/** every selection the page can show. Each one has an address, so nothing
+ *  that decides which page is on screen lives outside the url */
+import { RUNS_ID } from '../../collections/collection-types.ts'
+import { runsTab, runsTabId } from './runs-tabs.ts'
+
+export type HashSel =
+    | { t: 'asset'; id: string }
+    | { t: 'cat'; cat: string }
+    | { t: 'col'; id: string }
+    | { t: 'item'; col: string; id: string }
+    | { t: 'status' }
+    /** where the test checks' time goes: every one of them (check null), or
+     *  one test check (`test`, `test:<unit>`) */
+    | { t: 'tests'; check: string | null }
+
+export type ParsedHash = {
+    kind: 'asset' | 'cat' | 'col' | 'item' | 'status' | 'tests' | 'none'
+    /** the collection, for an item. null for everything else */
+    col: string | null
+    id: string
+    /** the media tool set, when the address carried one. An empty array is a
+     *  choice (every tool off), null is no statement at all */
+    tools: string[] | null
+}
+
+const ITEM = 'item:'
+const COL = 'col:'
+const CAT = 'cat-'
+/** prefixed, so no asset id can shadow it */
+const STATUS = 'page:status'
+const TESTS = 'page:tests'
+
+/** what this selection puts in the url. null only for no selection at all,
+ *  and then the hash is left alone rather than wiped */
+export function hashFor(sel: HashSel | null): string | null {
+    if (sel == null) return null
+    switch (sel.t) {
+        case 'asset': return sel.id
+        case 'cat': return `${CAT}${sel.cat}`
+        case 'col': return `${COL}${sel.id}`
+        case 'item': return `${ITEM}${sel.col}:${sel.id}`
+        case 'status': return STATUS
+        case 'tests': return sel.check == null ? TESTS : `${TESTS}:${sel.check}`
+    }
+}
+
+export function parseHash(raw: string): ParsedHash {
+    const none: ParsedHash = { kind: 'none', col: null, id: '', tools: null }
+    if (raw === '') return none
+    if (raw === STATUS) return { kind: 'status', col: null, id: '', tools: null }
+    if (raw === TESTS) return { kind: 'tests', col: null, id: '', tools: null }
+    // a check id carries colons of its own (`test:rvlib-shipkit`)
+    if (raw.startsWith(`${TESTS}:`)) {
+        const check = raw.slice(TESTS.length + 1)
+        return check === '' ? none : { kind: 'tests', col: null, id: check, tools: null }
+    }
+    if (raw.startsWith(ITEM)) {
+        const rest = raw.slice(ITEM.length)
+        const cut = rest.indexOf(':')
+        // an id carries colons of its own (`check:SK004`), so only the FIRST
+        // separator belongs to this format
+        if (cut <= 0) return none
+        const col = rest.slice(0, cut)
+        const id = rest.slice(cut + 1)
+        return id === '' ? none : { kind: 'item', col, id, tools: null }
+    }
+    if (raw.startsWith(COL)) {
+        const id = raw.slice(COL.length)
+        return id === '' ? none : { kind: 'col', col: null, id, tools: null }
+    }
+    if (raw.startsWith(CAT)) {
+        const cat = raw.slice(CAT.length)
+        return cat === '' ? none : { kind: 'cat', col: null, id: cat, tools: null }
+    }
+    const qi = raw.indexOf('?')
+    const id = qi === -1 ? raw : raw.slice(0, qi)
+    if (id === '') return none
+    const tools = qi === -1 ? null : new URLSearchParams(raw.slice(qi + 1)).get('tools')
+    return { kind: 'asset', col: null, id, tools: tools == null ? null : tools === '' ? [] : tools.split(',') }
+}
+
+/** the selection an address names, the inverse of hashFor. The media tool
+ *  set is not a selection: it rides in `ParsedHash.tools` */
+export function selOf(p: ParsedHash): HashSel | null {
+    switch (p.kind) {
+        case 'none': return null
+        case 'asset': return { t: 'asset', id: p.id }
+        case 'cat': return { t: 'cat', cat: p.id }
+        case 'col': return { t: 'col', id: p.id }
+        case 'item': return { t: 'item', col: p.col!, id: p.id }
+        case 'status': return { t: 'status' }
+        case 'tests': return { t: 'tests', check: p.id === '' ? null : p.id }
+    }
+}
+
+/** the one address of what a selection opens. A runs tab this build does
+ *  not name opens the runs tab, so its address is the runs tab's: a stale or
+ *  hand typed tab never stays in the url while another tab shows */
+export function canonicalSel(sel: HashSel): HashSel {
+    if (sel.t !== 'item' || sel.col !== RUNS_ID) return sel
+    const id = runsTabId(runsTab(sel.id))
+    return id === sel.id ? sel : { ...sel, id }
+}
+
+/** the hash as the page reads it: no `#`, percent escapes undone */
+export function currentHash(): string {
+    const raw = location.hash.slice(1)
+    try {
+        return decodeURIComponent(raw)
+    } catch {
+        return raw
+    }
+}

package/src/serve/hub-app/header-bar.tsx

@@ -0,0 +1,117 @@
+// The header over every page, and the live strip under it. The header is the
+// repo name, one link per core page, and on the right the two runs that are
+// not one check with what is running now. The strip is the one run chart
+// (timeline-chart.tsx) over a rolling window that ends now: folded, a thin
+// bar of the last two minutes; unfolded, the full chart over ten, zoomable.
+// Each fold has ONE height whatever runs, so a run never moves the page.
+import { observer } from 'mobx-react-lite'
+import { RUNS_ID } from '../../collections/collection-types.ts'
+import { Help } from './help.tsx'
+import { openWikis, WIKIS } from './wikis-view.tsx'
+import type { HubSt } from './hub-st.ts'
+import { byWords, TimelineChart } from './timeline-chart.tsx'
+
+export type CorePage = { id: string; label: string; on: boolean; go: () => void }
+
+/** the pages reached for most, in the order they are reached for. A page this
+ *  repo does not have is not a link */
+export function corePages(app: HubSt): CorePage[] {
+    const has = (col: string): boolean => app.cols.colMeta.some((c) => c.id === col)
+    const sel = app.sel
+    const onCol = (col: string): boolean => (sel?.t === 'col' && sel.id === col) || (sel?.t === 'item' && sel.col === col)
+    const out: CorePage[] = []
+    if (has('checks')) out.push({ id: 'checks', label: 'checks', on: onCol('checks'), go: () => app.showCol('checks') })
+    // a page, never a resource: every hub keeps a run record, so it is
+    // always here
+    out.push({ id: 'runs', label: 'runs', on: onCol('runs'), go: () => app.cols.select('runs', RUNS_ID) })
+    if (has('asks')) out.push({ id: 'asks', label: 'asks', on: onCol('asks'), go: () => app.showCol('asks') })
+    const firstCat = app.media.assets[0]?.cat
+    if (firstCat != null) out.push({ id: 'media', label: 'media', on: sel?.t === 'asset' || sel?.t === 'cat', go: () => app.showCat(firstCat) })
+    if (has(WIKIS)) out.push({ id: WIKIS, label: 'wikis', on: onCol(WIKIS), go: () => openWikis(app) })
+    return out
+}
+
+/** what is running, in one line: the hub's own run first, since it says the
+ *  most, else the newest run the record has in flight */
+const RunState = observer(({ app }: { app: HubSt }) => {
+    const own = app.checks.strip
+    const run = app.live.view?.runs[0]
+    const text = own !== '' ? own : run != null ? `${run.label} · ${run.done} of ${run.total}${run.reds > 0 ? ` · ${run.reds} red so far` : ''}` : 'idle'
+    const going = app.checks.busy || run != null
+    return (
+        <span className={`hstate${going ? ' on' : ''}`} title={text}>
+            {going ? <span className="spin" /> : null}
+            <span className="htext">{text}</span>
+        </span>
+    )
+})
+
+export const HeaderBar = observer(({ app }: { app: HubSt }) => {
+    const u = app.checks
+    return (
+        <header className="hdr">
+            <span className="hname">{app.name !== '' ? app.name : 'hub'}</span>
+            <nav className="hnav">
+                {corePages(app).map((p) => (
+                    <button key={p.id} className={p.on ? 'on' : ''} onClick={p.go}>{p.label}</button>
+                ))}
+            </nav>
+            <span className="sp" />
+            <RunState app={app} />
+            <button className="primary" disabled={u.busy} onClick={() => void u.run()}>run the health pass</button>
+            <button disabled={u.busy} onClick={() => void u.run(undefined, { gate: true, label: 'the gate' })}>run the gate</button>
+        </header>
+    )
+})
+
+/** the key that folds and unfolds the strip, printed on its chevron */
+export const LIVE_KEY = 'l'
+
+/** the strip's own row, in px: the one height the folded strip has */
+export const LIVE_ROW_H = 30
+
+/** what the strip is, in the (?) beside its chevron */
+export const LIVE_HELP = "every check shipkit runs, whoever started it: this hub, an agent in a terminal, the daily pass, here and in the other repos. Folded, the last two minutes: a bar grows at the right while its check runs and slides left once it ends, in its verdict colour. Unfolded, the whole record, opened on the last ten minutes: 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 follows now: the right edge is the present and the view slides with it. 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. A lane at the bottom is another repo with something running; a click opens its hub when it serves. The count is the checks in flight against the runner's cap"
+
+const Chevron = ({ open }: { open: boolean }) => (
+    <svg className={open ? 'cvt open' : 'cvt'} viewBox="0 0 24 24" width="11" height="11" aria-hidden="true">
+        <path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+)
+
+export const LiveStrip = observer(({ app }: { app: HubSt }) => {
+    const l = app.live
+    const v = l.view
+    const run = v?.runs[0]
+    const hidden = l.chart.layout?.hidden ?? 0
+    const waits = v == null ? '' : [
+        v.queued > 0 ? `${v.queued} queued for a free slot` : '',
+        ...v.blocked.map((w) => `${w.id} waits on ${w.deps.join(', ')}`),
+    ].filter((x) => x !== '').join('\n')
+    const who = run == null ? 'nothing running' : `${run.label}`
+    const chart = (
+        <TimelineChart view={l.chart} compact={!l.open} repos={v?.repos ?? []} follow zoomable={l.open}
+            onBar={(b) => app.cols.select('checks', `check:${b.id}`)}
+            onRepo={(r) => void l.openRepo(r.repo)} />
+    )
+    return (
+        <div className={`live${l.open ? ' open' : ''}${run == null ? ' idle' : ''}`} style={l.open ? { height: LIVE_ROW_H + l.held.h } : undefined}>
+            <div className="lrow">
+                <button className="lfold" onClick={() => l.toggle()} title={`${l.open ? 'fold' : 'unfold'} the live timeline (${LIVE_KEY})`}>
+                    <Chevron open={l.open} /><span className="sk">{LIVE_KEY}</span>
+                </button>
+                <Help text={LIVE_HELP} />
+                <span className="lwho" title={run == null ? '' : `${run.label}, started from the ${byWords(run.by)}${v != null && v.runs.length > 1 ? `\n${v.runs.length - 1} more in flight here` : ''}`}>
+                    {who}{run == null ? null : <i>{byWords(run.by)}</i>}{v != null && v.runs.length > 1 ? <b>+{v.runs.length - 1}</b> : null}
+                </span>
+                {l.open ? <span className="sp" /> : <div className="lchart">{chart}</div>}
+                {l.note !== '' ? <span className="lnote">{l.note}</span> : null}
+                {hidden > 0 ? <span className="lmore" title="check runs that did not fit in the folded strip: unfold it to see them">+{hidden}</span> : null}
+                <span className="lbusy" title={waits === '' ? 'checks in flight in this repo, against the runner cap' : waits}>
+                    in flight <span className="dnum">{v?.busy ?? 0}</span> / cap <span className="dnum">{v?.cap ?? 0}</span>
+                </span>
+            </div>
+            {l.open ? <div className="lopen">{chart}</div> : null}
+        </div>
+    )
+})