rvlib-shipkit 0.38.0 → 1.0.0

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

@@ -0,0 +1,164 @@
+// The words a check page says about a declaration, and the link it puts on a
+// file. Pure, so the sentences are pinned by tests rather than read off a
+// screenshot.
+import { CACHED, RAN } from '../../core/outcome-words.ts'
+import { parseDuration } from '../../core/wire.ts'
+import type { WhenAt } from './hub-types.ts'
+import { spanWords } from './next-run.ts'
+
+/** the cache population a check declared, and where it runs, as the page
+ *  receives them */
+export type CachePop = { inputs?: string[]; ttl?: string; never?: string; reads?: boolean; when?: WhenAt }
+
+/** `a`, `a and b`, `a, b and c` */
+const list = (xs: string[]): string => (xs.length < 2 ? xs.join('') : `${xs.slice(0, -1).join(', ')} and ${xs.at(-1)!}`)
+
+/** how often a check that remembers nothing runs: every time the thing
+ *  it runs in runs */
+const CADENCE: Record<WhenAt, string> = {
+    always: 'on every run',
+    release: 'on every release run',
+    health: 'on every daily pass',
+    off: 'nowhere, it is off',
+}
+
+/** the value a page shows for the `remembered` row, the paths behind it when
+ *  it is keyed on files, and the sentence for the row's help. The value is a
+ *  RHYTHM a reader scans, and the declaration it comes from is in the help */
+export type RememberedFact = { v: string; inputs: string[]; help: string }
+
+export function rememberedFact(u: CachePop): RememberedFact {
+    const inputs = u.inputs ?? []
+    if (inputs.includes('.'))
+        return { v: 'until any file changes', inputs: [], help: `keyed on the whole repo tree: the answer is ${CACHED} until a file in the repo changes, then it runs again` }
+    if (inputs.length > 0)
+        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 != null && u.ttl !== '') {
+        let every = u.ttl
+        try { every = spanWords(parseDuration(u.ttl)) } catch { /* an unparsable ttl is shown as written */ }
+        return {
+            v: `for ${every}`,
+            inputs: [],
+            help: `the answer is kept for ${u.ttl} (\`ttl\`), and every run inside that window uses it. A failing answer is kept for an hour at most, so a fix shows up soon`,
+        }
+    }
+    const cadence = CADENCE[u.when ?? 'always']
+    if (u.never != null)
+        return { v: 'never', inputs: [], help: `never cached, so it runs ${cadence}${u.never === '' ? '' : `: ${u.never}`}` }
+    return { v: 'never', inputs: [], help: `nothing declared, so it runs ${cadence}. \`inputs\`, \`ttl\` or \`never\` in the check says otherwise` }
+}
+
+/** the four places a check runs, named by what they do. The config keeps its
+ *  own words (`always`, `release`, `health`, `off`), and these are only what
+ *  the select under `run when` shows */
+export const WHEN_OPTION: Record<WhenAt, string> = {
+    always: 'always',
+    release: 'before a release',
+    health: 'health pass only',
+    off: 'never',
+}
+
+/** what a check IS: three FACTS, each a short value a reader scans, with the
+ *  sentence that explains it in the row's own `(?)`. Where it runs is the
+ *  switch's own row, and what it runs is the command line above the grid */
+export type WhatFacts = { from: 'shipkit' | 'repo'; build: boolean; blocking: boolean | null }
+
+export type WhatFact = { k: string; v: string; help: string; tone?: 'red' | 'warn' }
+
+export function whatFacts(u: WhatFacts): WhatFact[] {
+    return [
+        {
+            k: 'from',
+            v: u.from === 'shipkit' ? 'shipkit' : 'this repo',
+            help: u.from === 'shipkit' ? 'the toolkit ships this check, and every repo that installs it gets the same one' : 'this repo declared it, in a file of its own that nothing outside the repo knows about',
+        },
+        {
+            k: 'kind',
+            v: u.build ? 'build step' : 'check',
+            help: u.build
+                ? 'it builds rather than reports, which is why the health pass leaves it out and the gate runs it'
+                : 'it reports on this repo or on the world rather than building anything, so both the gate and the health pass can ask it',
+        },
+        u.blocking === true
+            ? { k: 'on failure', v: 'blocks', tone: 'red', help: 'its failure stops the gate, and stops you' }
+            : u.blocking === false
+                ? { k: 'on failure', v: 'warns', tone: 'warn', help: 'it reports the WORLD rather than this repo, so a failure prints as a warning and never blocks' }
+                : { k: 'on failure', v: 'undeclared', tone: 'red', help: 'it never declared whether it blocks, which the runner treats as fatal rather than guessing' },
+    ]
+}
+
+/** a check row in two parts: the id as a small tag, then the title. A check
+ *  whose title IS its id (a floor slot) has no tag, the id is its name */
+export function checkName(checkId: string, label: string): { tag: string | null; title: string } {
+    if (label.startsWith(`${checkId} `)) {
+        const title = label.slice(checkId.length + 1).trim()
+        if (title !== '') return { tag: checkId, title }
+    }
+    return { tag: null, title: label === '' ? checkId : label }
+}
+
+/** a path as a reader wants it: short, with the full one for the tooltip */
+export type ShortPath = { short: string; full: string }
+
+const HOME = /^\/(?:Users|home)\/[^/]+\//
+
+/** repo relative when it sits in the repo, `~/` when it sits in a home. What
+ *  this returns still resolves from the repo root, so a command stays runnable */
+export function repoPath(p: string, root: string): ShortPath {
+    const r = root.replace(/\/+$/, '')
+    if (r !== '' && p.startsWith(`${r}/`)) return { short: p.slice(r.length + 1), full: p }
+    return { short: p.replace(HOME, '~/'), full: p }
+}
+
+/** a docs page: repo relative when it is in the repo, else relative to the
+ *  wiki it belongs to (`meta/rv-conventions/package-json.md`) */
+export function docPath(p: string, root: string): ShortPath {
+    const outside = p.startsWith('/') || p.startsWith('~/')
+    const r = root.replace(/\/+$/, '')
+    if (!outside || (r !== '' && p.startsWith(`${r}/`))) return repoPath(p, root)
+    const at = p.indexOf('/wiki/')
+    return at < 0 ? repoPath(p, root) : { short: p.slice(at + '/wiki/'.length), full: p }
+}
+
+/** WHAT IT RUNS. A subprocess check is its argv, each token short and never
+ *  split, plus the package.json script a floor slot resolved to. A check whose
+ *  body is a function runs inside the gate, and its source file says what */
+export type Command =
+    | { kind: 'argv'; tokens: ShortPath[]; copy: string; script: { name: string; body: string } | null }
+    | { kind: 'in-process'; file: string | null }
+
+const quoted = (t: string): string => (/^[\w@%+=:,./~-]+$/.test(t) ? t : `'${t.replace(/'/g, `'\\''`)}'`)
+
+export function commandOf(u: { cmd: string[] | null; file: string | null; script?: { name: string; body: string } | null }, root: string): Command {
+    if (u.cmd == null || u.cmd.length === 0) return { kind: 'in-process', file: u.file }
+    const tokens = u.cmd.map((t) => {
+        const s = t.startsWith('/') ? repoPath(t, root) : { short: t, full: t }
+        return { short: quoted(s.short), full: s.full }
+    })
+    return { kind: 'argv', tokens, copy: tokens.map((t) => t.short).join(' '), script: u.script ?? null }
+}
+
+/** how the last run got its answer: it RAN, with a verdict when it did not
+ *  pass, or its answer came back from the cache. Null when nothing is on
+ *  record in this checkout */
+export type LastRun = { word: string; verdict: string | null; tone: 'red' | 'warn' | 'quiet' | 'idle' }
+
+export function lastRun(u: { status: 'pass' | 'warn' | 'fail' | 'skip' | null; replayed: boolean; advisory: boolean }): LastRun | null {
+    if (u.status == null) return null
+    if (u.replayed) return { word: CACHED, verdict: null, tone: 'quiet' }
+    if (u.status === 'fail') return { word: RAN, verdict: u.advisory ? 'failed, does not block' : 'failed', tone: u.advisory ? 'warn' : 'red' }
+    if (u.status === 'warn') return { word: RAN, verdict: 'warned', tone: 'warn' }
+    if (u.status === 'skip') return { word: RAN, verdict: 'skipped', tone: 'quiet' }
+    return { word: RAN, verdict: null, tone: 'idle' }
+}
+
+/** his editor, on the file itself. The root comes from the server, because
+ *  only it knows where this repo sits on disk */
+export function editorHref(root: string, file: string | null | undefined): string | null {
+    if (file == null || file === '') return null
+    if (file.startsWith('/')) return `vscode://file${file}`
+    if (root === '') return null
+    return `vscode://file${root.startsWith('/') ? root : `/${root}`}/${file}`.replace(/([^:])\/\//g, '$1/')
+}

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

@@ -0,0 +1,280 @@
+// Gate checks, as the page sees them: what a RUNNING gate has already
+// reported, laid over the rows the server last sent.
+//
+// The server is the truth (collections/checks.ts reads the inventory, the
+// store and the run record), and this service holds one thing only: the
+// results of a run happening RIGHT NOW, so a row recolours the moment its
+// check finishes instead of on the next ten second poll. Everything here is
+// 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 { 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'
+
+/** the colour rule, the SAME one the server applies, because a row must not
+ *  change meaning between a live result and the poll that confirms it */
+const stateOf = (e: CheckEvent): ResourceState => {
+    if (e.status === 'fail') return e.advisory ? 'warn' : 'red'
+    if (e.status === 'warn') return 'warn'
+    if (e.status === 'skip') return 'quiet'
+    return e.replayed ? 'quiet' : 'ok'
+}
+
+/** what a page keeps from a streaming run: enough to read what happened,
+ *  bounded so a runaway check cannot grow it forever */
+const MAX_LIVE_LINES = 400
+
+export class ChecksSvc {
+    /** check id → what it just reported, for the run in flight */
+    live = new Map<string, CheckEvent>()
+    /** checks still to report, so a row can say it is waiting rather than
+     *  showing the verdict of a run that is being replaced */
+    running = new Set<string>()
+    /** the run that is going, and what it was narrowed to */
+    runningAll = false
+    note = ''
+    /** the header's run state: how far this page's run has got, and how it ended */
+    progress: RunProgress = idleRun()
+    /** the wire lines of the run in flight, so a check page streams while it
+     *  runs rather than showing nothing until the poll after it ends. They
+     *  stay after the run: they ARE the last output until the next one */
+    liveLines: string[] = []
+    private clearTimer: ReturnType<typeof setTimeout> | null = null
+    /** 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 */
+    gate: GateBlock | null = null
+    gateNote = ''
+    gateBusy = false
+    /** the reason box, per check id: a check is only turned off WITH a reason */
+    reasons = new Map<string, string>()
+    /** checks whose select says never while the reason is still being typed:
+     *  off is written only once it has one */
+    pendingOff = new Set<string>()
+    /** the slow suite form under the test check */
+    suite: SlowSuite = { file: '', catches: '', whyNotFast: '' }
+
+    constructor(private st: HubSt) {
+        makeAutoObservable<this, 'st' | 'clearTimer'>(this, { st: false, clearTimer: false })
+    }
+
+    get busy(): boolean {
+        return this.progress.phase === 'running'
+    }
+
+    /** the one line the header shows, empty when this page runs nothing */
+    get strip(): string {
+        return stripText(this.progress)
+    }
+
+    /** this check is expected to report in the run that is going */
+    isRunning(checkId: string): boolean {
+        return this.running.has(checkId)
+    }
+
+    reasonFor(id: string): string {
+        return this.reasons.get(id) ?? ''
+    }
+    setReason(id: string, v: string): void {
+        this.reasons.set(id, v)
+    }
+    setSuite(f: keyof SlowSuite, v: string): void {
+        this.suite = { ...this.suite, [f]: v }
+    }
+
+    /** the block, read before anything is written: every write hands its hash
+     *  back, which is what makes a concurrent edit a refusal rather than a
+     *  silent overwrite */
+    async loadGate(): Promise<void> {
+        try {
+            const r = await fetch('/api/checks/when')
+            if (!r.ok) throw new Error(await r.text())
+            const b = (await r.json()) as GateBlock
+            runInAction(() => { this.gate = b })
+        } catch (e) {
+            runInAction(() => { this.gateNote = `the repo config could not be read: ${(e as Error).message}` })
+        }
+    }
+
+    /** ONE write path for the switch, the slow suite form and the prose word
+     *  lists alike: it edits repo.config.ts in place and leaves it dirty to be
+     *  reviewed. Resolves true when the server took the edit */
+    async writeGate(edit: Record<string, unknown>, said: string): Promise<boolean> {
+        if (this.gateBusy) return false
+        let took = false
+        runInAction(() => { this.gateBusy = true; this.gateNote = 'writing repo.config.ts…' })
+        try {
+            // 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 }) })
+            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()
+        } catch (e) {
+            runInAction(() => { this.gateNote = `refused: ${(e as Error).message}` })
+            // whatever the file really says now, so the next try is not
+            // refused for a hash the page has already outgrown
+            await this.loadGate()
+        }
+        runInAction(() => { this.gateBusy = false })
+        return took
+    }
+
+    /** what the select shows: never while a reason is being typed, else
+     *  where the check runs today */
+    whenShown(u: { checkId: string; when: WhenAt }): WhenAt {
+        return this.pendingOff.has(u.checkId) ? 'off' : u.when
+    }
+
+    /** the select moved. Every place but never writes at once, and never
+     *  waits for its reason */
+    chooseWhen(checkId: string, at: WhenAt): void {
+        if (at === 'off') {
+            this.pendingOff.add(checkId)
+            this.gateNote = 'never needs a reason: type it, then turn it off'
+            return
+        }
+        this.pendingOff.delete(checkId)
+        void this.setWhen(checkId, at)
+    }
+
+    async setWhen(checkId: string, at: WhenAt): Promise<void> {
+        const reason = this.reasonFor(checkId).trim()
+        if (at === 'off' && reason === '') {
+            runInAction(() => { this.gateNote = 'never needs a reason: a check nobody can explain is a silenced gate' })
+            return
+        }
+        await this.writeGate({ when: { [checkId]: at === 'off' ? `off:${reason}` : at } }, `${checkId} is set to ${WHEN_OPTION[at]} — repo.config.ts is edited and waiting for your commit`)
+        runInAction(() => { this.pendingOff.delete(checkId) })
+    }
+
+    /** back to whatever the check itself declares, by dropping the entry */
+    async clearWhen(checkId: string): Promise<void> {
+        await this.writeGate({ when: { [checkId]: null } }, `${checkId} is back to what it declares itself — repo.config.ts is edited and waiting for your commit`)
+    }
+
+    async addSlow(): Promise<void> {
+        const s = this.suite
+        await this.writeGate({ slow: [{ ...s }] }, `${s.file} is a slow suite now — the quick tier leaves it out, the full tier keeps it`)
+        runInAction(() => { this.suite = { file: '', catches: '', whyNotFast: '' } })
+    }
+    async removeSlow(file: string): Promise<void> {
+        await this.writeGate({ slowRemove: [file] }, `${file} is back in the quick tier`)
+    }
+
+    private pushLine(text: string): void {
+        this.liveLines.push(text)
+        // one runaway check must not grow the page without a bound
+        if (this.liveLines.length > MAX_LIVE_LINES) this.liveLines.shift()
+    }
+
+    apply(e: CheckEvent): void {
+        this.live.set(e.id, e)
+        // the wait set is keyed by the id `--only` takes, which is the id the
+        // stream sends back: a row stops pulsing the moment ITS check lands
+        this.running.delete(e.id)
+    }
+
+    /** the resource list with the live results over it */
+    overlay(rs: Resource[]): Resource[] {
+        if (this.live.size === 0) return rs
+        return rs.map((r) => {
+            const u = r.check
+            if (u == null) return r
+            const e = this.live.get(u.checkId)
+            if (e == null) return r
+            return {
+                ...r,
+                state: stateOf(e),
+                severity: e.status === 'fail' ? (e.advisory ? 'yellow' : 'red') : e.status === 'warn' ? 'yellow' : undefined,
+                check: { ...u, status: e.status, replayed: e.replayed, lastMs: e.replayed ? null : Math.round(e.ms), lastAt: Date.now(), advisory: e.advisory },
+                md: e.lines.length === 0 ? r.md : `\`\`\`\n${e.lines.map((l) => (l.kind === 'fix-fail' || l.kind === 'fix-warn' ? `      fix: ${l.text}` : l.kind === 'fail' ? `FAIL: ${l.text}` : l.kind === 'warn' ? `WARN ${l.text}` : l.kind === 'skip' ? `skip: ${l.text}` : `ok: ${l.text}`)).join('\n')}\n\`\`\``,
+            }
+        })
+    }
+
+    /** every check this run will hear from, so a row can pulse from the first
+     *  second and the header can say "12 of 70" rather than "12" */
+    private expected(only: string[] | undefined, gate: boolean): string[] {
+        if (only != null) return only
+        const checks = this.st.cols.fetched.map((r) => r.check).filter((u) => u != null)
+        return checks.filter((u) => gate || !u.build).map((u) => u.checkId)
+    }
+
+    /** run the whole health pass, the whole gate, or a named set of checks.
+     *  The stream is NDJSON, one event per line: wire lines feed the raw
+     *  card, check events colour the rows and move the header state. The page never
+     *  shells anything, and there is no second run mechanism. */
+    async run(only?: string[], o: { gate?: boolean; label?: string } = {}): Promise<void> {
+        if (this.busy) return
+        const gate = o.gate === true
+        const waiting = this.expected(only, gate)
+        const label = o.label ?? (only == null ? (gate ? 'the gate' : 'the health pass') : only.length === 1 ? only[0]! : `${only.length} checks`)
+        if (this.clearTimer != null) clearTimeout(this.clearTimer)
+        runInAction(() => {
+            this.live.clear()
+            this.liveLines = []
+            this.running = new Set(waiting)
+            this.runningAll = only == null
+            this.progress = startRun(label, waiting.length)
+            this.note = `running ${label}…`
+        })
+        try {
+            const r = await fetch('/api/check/run', { method: 'POST', body: JSON.stringify({ ...(only == null ? {} : { only }), ...(gate ? { gate } : {}) }) })
+            const rd = r.body!.getReader()
+            const dec = new TextDecoder()
+            let buf = ''
+            for (;;) {
+                const { done, value } = await rd.read()
+                if (done) break
+                buf += dec.decode(value, { stream: true })
+                const lines = buf.split('\n')
+                // the tail is whatever arrived half written; it completes on
+                // the next chunk
+                buf = lines.pop() ?? ''
+                for (const l of lines) {
+                    if (l === '') continue
+                    let e: { t?: string; text?: string; code?: number } & Partial<CheckEvent>
+                    try { e = JSON.parse(l) as typeof e } catch { continue }
+                    runInAction(() => { this.progress = applyRunEvent(this.progress, e as Record<string, unknown>) })
+                    if (e.t === 'line' && e.text != null) {
+                        runInAction(() => this.pushLine(e.text!))
+                        this.st.health.appendLine(e.text)
+                    } else if (e.t === 'check') {
+                        runInAction(() => this.apply(e as unknown as CheckEvent))
+                    } else if (e.t === 'done') {
+                        runInAction(() => { this.note = e.code === 0 ? 'done, green' : `done, exit ${e.code ?? '?'}` })
+                    }
+                }
+            }
+        } catch (e) {
+            runInAction(() => { this.note = `stream broke: ${(e as Error).message}` })
+            this.st.health.appendLine(`FAIL: stream broke: ${(e as Error).message}`)
+        }
+        runInAction(() => {
+            this.running.clear()
+            this.runningAll = false
+            // a stream that died mid way still ends the run: the header must
+            // never sit there claiming something is running
+            if (this.progress.phase === 'running') this.progress = { ...this.progress, phase: 'done' }
+        })
+        // the header state clears itself, because the rows ARE the answer once the
+        // run is over and a banner that stays is a banner nobody reads
+        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()
+        void this.st.health.load()
+        void this.st.timeline.load()
+        // 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/clock-svc.ts

@@ -0,0 +1,33 @@
+// THE clock: one observable second, for every age on the page.
+//
+// An age rendered once is frozen text, and a component that owns its own
+// timer is one timer per age. This is one interval on the root store, and
+// only the small components that READ `now` repaint when it moves. Nothing
+// else on the page observes it.
+import { makeAutoObservable, runInAction } from 'mobx'
+
+export class ClockSvc {
+    now = Date.now()
+    /** the live interval, or null. A second start is a no-op rather than a
+     *  second timer, because boot runs under StrictMode twice in dev */
+    running: ReturnType<typeof setInterval> | null = null
+
+    constructor() {
+        makeAutoObservable(this)
+    }
+
+    tick(at = Date.now()): void {
+        this.now = at
+    }
+
+    start(everyMs = 1_000): void {
+        if (this.running != null) return
+        this.running = setInterval(() => runInAction(() => this.tick()), everyMs)
+    }
+
+    stop(): void {
+        if (this.running == null) return
+        clearInterval(this.running)
+        this.running = null
+    }
+}

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

@@ -1,25 +1,25 @@
 // Collection views: the per-collection card grid (ColGrid), the item card
-// (asks · creds · posts), the graph item view (GraphView — embeds the
-// /graph/* page itself), and the health/status card with the streaming
+// (asks · creds · posts), and the health/status card with the streaming
 // check runner. Every verb posts to /api/act/* and lands in a git-tracked
 // truth file; the truth chip names the file the item IS (on disagreement
 // the file wins).
 import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import type { HubSt } from './hub-st.ts'
-import type { ColInstance } from './hub-types.ts'
+import type { Resource } from './hub-types.ts'
 import { renderMd } from './md.ts'
 
-// creds carry no truth file — name/service/state parse out of the instance
-const credOf = (i: ColInstance): { name: string; service: string | null; missing: boolean } => ({
-    name: i.id.replace(/^cred:/, ''),
-    service: i.text.includes(' — ') ? i.text.split(' — ').slice(1).join(' — ') : null,
-    missing: i.severity != null,
-})
+// creds carry no truth file: the name is the id, the words after it are the
+// service and what its probe last said, and the slot says present or missing
+const credOf = (i: Resource): { name: string; service: string | null; missing: boolean; state: Resource['state'] } => {
+    const name = i.id.replace(/^cred:/, '')
+    const rest = i.text.startsWith(name) ? i.text.slice(name.length).trim() : i.text
+    return { name, service: rest !== '' ? rest : null, missing: i.slot === 'missing', state: i.state }
+}
 
 const CredHead = ({ cred }: { cred: ReturnType<typeof credOf> }) => (
     <>
-        <span className="credname">{cred.name}</span>
+        <span className={`credname tl ${cred.state}`}>{cred.name}</span>
         <span className={`stchip ${cred.missing ? 'miss' : 'ok'}`}>{cred.missing ? 'missing' : 'present'}</span>
     </>
 )
@@ -37,9 +37,8 @@ export const ColCard = observer(({ app, col, id }: { app: HubSt; col: string; id
         const cred = credOf(i)
         return (
             <div className="colcard">
-                <div className="back" onClick={() => app.showCol(col)}>← {c.colTitle(col)}</div>
                 <h3>
-                    <span className={`cdot ${i.severity ?? ''}`} /> <CredHead cred={cred} />
+                    <CredHead cred={cred} />
                     {i.artifact?.url != null ? <a className="mint" href={i.artifact.url} target="_blank" rel="noreferrer">mint ↗</a> : null}
                 </h3>
                 {cred.service != null ? <div className="creddesc">{cred.service}</div> : null}
@@ -58,9 +57,8 @@ export const ColCard = observer(({ app, col, id }: { app: HubSt; col: string; id
     }
     return (
         <div className="colcard">
-            <div className="back" onClick={() => app.showCol(col)}>← {c.colTitle(col)}</div>
             <h3>
-                <span className={`cdot ${i.severity ?? ''}`} /> {i.text}
+                <span className={`tl ${i.state}`}>{i.text}</span>
                 {i.file != null ? <span className="truth">{i.file}</span> : null}
             </h3>
             {i.md != null ? <div className="md" dangerouslySetInnerHTML={{ __html: renderMd(i.md) }} /> : null}
@@ -120,7 +118,7 @@ export const ColGrid = observer(({ app, id }: { app: HubSt; id: string }) => {
                             const cred = credOf(i)
                             return (
                                 <div key={i.id} className="cgcard" onClick={() => c.select(col.id, i.id)}>
-                                    <div className="cgtop"><span className={`cdot ${i.severity ?? ''}`} /><CredHead cred={cred} /></div>
+                                    <div className="cgtop"><CredHead cred={cred} /></div>
                                     {cred.service != null ? <div className="creddesc">{cred.service}</div> : null}
                                     {i.md != null ? <div className="md clamp" dangerouslySetInnerHTML={{ __html: renderMd(i.md) }} /> : null}
                                     {i.artifact?.url != null ? (
@@ -131,7 +129,7 @@ export const ColGrid = observer(({ app, id }: { app: HubSt; id: string }) => {
                         }
                         return (
                             <div key={i.id} className="cgcard" onClick={() => c.select(col.id, i.id)}>
-                                <div className="cgtop"><span className={`cdot ${i.severity ?? ''}`} /><b>{i.text}</b></div>
+                                <div className="cgtop"><b className={`tl ${i.state}`}>{i.text}</b></div>
                                 {/* a link click opens its tab — it must not ALSO yank into the item view */}
                                 {i.md != null ? <div className="md clamp" onClick={(e) => { if ((e.target as HTMLElement).tagName === 'A') e.stopPropagation() }} dangerouslySetInnerHTML={{ __html: renderMd(i.md) }} /> : null}
                                 {i.file != null ? <span className="truth">{i.file}</span> : null}
@@ -146,23 +144,6 @@ export const ColGrid = observer(({ app, id }: { app: HubSt; id: string }) => {
 })
 
 // graph item view — the graph ITSELF fills the stage, lint line as a slim header
-export const GraphView = observer(({ app, id }: { app: HubSt; id: string }) => {
-    const c = app.cols
-    const i = c.find('graphs', id)
-    if (i == null) return <div className="stagewrap"><div className="ph">graph vanished — the truth moved on</div></div>
-    if (i.href == null) return <div className="stagewrap"><div className="ph">this graph carries no page to embed</div></div>
-    return (
-        <div className="graphview">
-            <div className="gvhead">
-                <span className="back" onClick={() => app.showCol('graphs')}>← {c.colTitle('graphs')}</span>
-                <span className={`cdot ${i.severity ?? ''}`} />
-                <span className="gvtext">{i.text}</span>
-            </div>
-            <iframe src={i.href} title={i.text} />
-        </div>
-    )
-})
-
 const wireClass = (l: string): string => {
     const t = l.trimStart()
     if (t.startsWith('FAIL') || t.startsWith('✗')) return 'fail'
@@ -172,19 +153,22 @@ const wireClass = (l: string): string => {
     return ''
 }
 
+// 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 }) => {
     const h = app.health
+    const body = h.live.length > 0
+        ? h.live.join('\n')
+        : h.statusMd ?? 'no STATUS.md yet — hit "run the health pass" (or run: shipkit check)'
     return (
         <div className="wrap">
-            <h1>{app.name}<small>STATUS.md</small></h1>
+            <h1>{app.name}<small>{h.live.length > 0 ? 'this run' : 'STATUS.md'}</small></h1>
             <div className="hbar">
-                <button disabled={h.running} onClick={() => void h.runCheck()}>run check</button>
-                <span className="note">{h.note !== '' ? h.note : <>shells <code>shipkit check</code>, wire lines stream in below</>}</span>
+                <button disabled={h.running} onClick={() => void h.runHealthPass()}>run the health pass</button>
+                <span className="note">{h.note !== '' ? h.note : <>runs every check but the build steps, in the hub's own process, and each row colours as its check finishes</>}</span>
             </div>
             <pre>
-                {(h.statusMd ?? 'no STATUS.md yet — hit "run check" (or run: shipkit check)')
-                    .split('\n')
-                    .map((l, i) => <span key={i} className={wireClass(l)}>{l}{'\n'}</span>)}
+                {body.split('\n').map((l, i) => <span key={i} className={wireClass(l)}>{l}{'\n'}</span>)}
             </pre>
         </div>
     )