rvlib-shipkit 0.11.0 → 0.14.0

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

@@ -0,0 +1,192 @@
+// 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
+// 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 { 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,
+})
+
+const CredHead = ({ cred }: { cred: ReturnType<typeof credOf> }) => (
+    <>
+        <span className="credname">{cred.name}</span>
+        <span className={`stchip ${cred.missing ? 'miss' : 'ok'}`}>{cred.missing ? 'missing' : 'present'}</span>
+    </>
+)
+
+export const ColCard = observer(({ app, col, id }: { app: HubSt; 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>
+    const askFile = col === 'asks' ? id.replace(/^ask:/, '') : null
+    const postM = col === 'posts' ? id.match(/^post:([^/]+)\/(.+?):(pick|topost|invalid|posted|rejected)$/) : null
+    const postFile = (i.file ?? '').split('/').pop() ?? ''
+    if (col === 'creds') {
+        // no remark box, no generic dump — a cred has no truth file; the
+        // copy block + steps only matter while it is MISSING
+        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} />
+                    {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}
+                {/* probe FAIL + fix: pointers ride the instance md — for an
+                    ask-covered cred (no verbs, no artifact) it is the ONLY detail */}
+                {i.md != null ? <div className="md" dangerouslySetInnerHTML={{ __html: renderMd(i.md) }} /> : null}
+                {cred.missing && i.artifact?.copy != null ? (
+                    <>
+                        <code>{i.artifact.copy}</code>
+                        <div className="row"><button onClick={() => void navigator.clipboard.writeText(i.artifact!.copy!)}>copy</button></div>
+                    </>
+                ) : null}
+                {cred.missing && i.artifact?.steps != null ? <div className="row"><div>{i.artifact.steps.map((s, n) => <span key={n}>{n + 1}. {s}<br /></span>)}</div></div> : null}
+            </div>
+        )
+    }
+    return (
+        <div className="colcard">
+            <div className="back" onClick={() => app.showCol(col)}>← {c.colTitle(col)}</div>
+            <h3>
+                <span className={`cdot ${i.severity ?? ''}`} /> {i.text}
+                {i.file != null ? <span className="truth">{i.file}</span> : null}
+            </h3>
+            {i.md != null ? <div className="md" dangerouslySetInnerHTML={{ __html: renderMd(i.md) }} /> : null}
+            {i.remarks != null && i.remarks.length > 0 ? <div className="rem">{i.remarks.join('\n')}</div> : null}
+            {i.artifact?.copy != null ? (
+                <>
+                    <code>{i.artifact.copy}</code>
+                    <div className="row"><button onClick={() => void navigator.clipboard.writeText(i.artifact!.copy!)}>copy</button></div>
+                </>
+            ) : null}
+            {i.artifact?.url != null ? <div className="row"><a href={i.artifact.url} target="_blank" rel="noreferrer">mint ↗</a></div> : null}
+            {i.artifact?.steps != null ? <div className="row"><div>{i.artifact.steps.map((s, n) => <span key={n}>{n + 1}. {s}<br /></span>)}</div></div> : null}
+            {postM?.[3] === 'pick' && i.candidates != null ? i.candidates.map((cd) => (
+                <div className="cand" key={cd.id}>
+                    <div className="row"><b>{cd.label}</b><button onClick={() => void c.postPick(postM[1]!, cd.id)}>pick</button></div>
+                    <div className="candhint">{cd.hint ?? ''}</div>
+                </div>
+            )) : null}
+            {postM?.[3] === 'topost' ? (
+                <div className="row">
+                    <input placeholder="posted URL = proof" value={c.proofDraft} onChange={(e) => runInAction(() => { c.proofDraft = e.target.value })} />
+                    <button onClick={() => void c.postPosted(postM[1]!, postFile)}>posted ✓</button>
+                </div>
+            ) : null}
+            {askFile != null && i.severity != null ? (
+                <div className="row">
+                    <input placeholder="proof URL (optional)" value={c.proofDraft} onChange={(e) => runInAction(() => { c.proofDraft = e.target.value })} />
+                    <button onClick={() => void c.askDone(askFile)}>done ✓</button>
+                </div>
+            ) : null}
+            {askFile != null || postM != null ? (
+                <div className="row">
+                    <input placeholder="remark → lands in the file, agents read it" value={c.remarkDraft}
+                        onChange={(e) => runInAction(() => { c.remarkDraft = e.target.value })} />
+                    <button className="ghost" onClick={() => void c.remark(askFile != null ? { kind: 'ask', file: askFile } : { kind: 'post', channel: postM![1], file: postFile })}>remark</button>
+                </div>
+            ) : null}
+            {c.actErr !== '' ? <div className="err">✗ {c.actErr}</div> : null}
+        </div>
+    )
+})
+
+// collection view — one card per visible instance, the stage-side twin of a
+// sidebar section (his rule 2026-07-23: every section gets both views)
+export const ColGrid = observer(({ app, id }: { app: HubSt; 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>
+    const items = c.visibleInstances(col)
+    return (
+        <div className="colgrid">
+            <div className="cghead">{col.title}<span className="cnt">{items.length}</span></div>
+            {items.length === 0 ? <div className="ph">{app.filter === 'red' ? 'no reds here' : app.filter === 'needs' ? 'nothing here needs you' : 'nothing here yet'}</div> : (
+                <div className="cgcards">
+                    {items.map((i) => {
+                        if (id === 'creds') {
+                            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>
+                                    {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 ? (
+                                        <div className="credrow"><a className="mint" href={i.artifact.url} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()}>mint ↗</a></div>
+                                    ) : null}
+                                </div>
+                            )
+                        }
+                        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>
+                                {/* 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}
+                                {i.remarks != null && i.remarks.length > 0 ? <div className="cgrem">{i.remarks[i.remarks.length - 1]}</div> : null}
+                            </div>
+                        )
+                    })}
+                </div>
+            )}
+        </div>
+    )
+})
+
+// graph item view — the graph ITSELF fills the stage (his order 2026-07-23:
+// "if I select a graph, I want to see it"), 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'
+    if (t.startsWith('WARN') || t.startsWith('⚠')) return 'warn'
+    if (t.startsWith('ok') || t.startsWith('✓')) return 'ok'
+    if (t.startsWith('skip') || t.startsWith('fix:') || t.startsWith('#')) return 'dim'
+    return ''
+}
+
+export const StatusCard = observer(({ app }: { app: HubSt }) => {
+    const h = app.health
+    return (
+        <div className="wrap">
+            <h1>{app.name}<small>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>
+            </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>)}
+            </pre>
+        </div>
+    )
+})

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

@@ -0,0 +1,136 @@
+// 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.
+import { makeAutoObservable, runInAction } from 'mobx'
+import type { HubSt } from './hub-st.ts'
+import type { Col, ColInstance } from './hub-types.ts'
+
+export class ColsSvc {
+    cols: Col[] = []
+    actErr = ''
+    remarkDraft = ''
+    proofDraft = ''
+    /** user fold choices win; default = open when the section holds needs */
+    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 })
+    }
+
+    start(): void {
+        void this.poll()
+        this.timer = setInterval(() => void this.poll(), 10_000)
+    }
+    dispose(): void {
+        if (this.timer != null) clearInterval(this.timer)
+    }
+
+    async poll(): Promise<void> {
+        try {
+            const r = await fetch('/api/collections.json')
+            if (!r.ok) throw new Error(await r.text())
+            const j = (await r.json()) as { collections: Col[] }
+            runInAction(() => { this.cols = j.collections })
+        } catch (e) {
+            runInAction(() => {
+                this.cols = [{ id: 'hub', title: 'hub', media: 'health', instances: [{ id: 'hub:collections-broken', text: `collections fetch broke: ${(e as Error).message}`, severity: 'red' }] }]
+            })
+        }
+    }
+
+    /** 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) */
+    get sidebarCols(): Col[] {
+        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 ?? []
+    }
+
+    needsItem = (i: ColInstance): 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
+        return this.foldOverride.get(c.id) ?? c.instances.some(this.needsItem)
+    }
+    toggleFold(c: Col): void {
+        // folds yield to a live search — toggling then would do nothing
+        // visibly and snap shut when the query clears
+        if (this.st.query.trim() !== '') return
+        this.foldOverride.set(c.id, !this.isOpen(c))
+    }
+    openSection(c: Col): void {
+        this.foldOverride.set(c.id, true)
+    }
+    /** rail red dot — the section holds at least one red item */
+    hasRed(c: Col): boolean {
+        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
+    }
+    visibleInstances(c: Col): ColInstance[] {
+        const f = this.st.filter
+        const base = f === 'all' ? c.instances
+            : c.instances.filter((i) => (f === 'red' ? i.severity === 'red' : this.needsItem(i)))
+        const q = this.st.query.trim().toLowerCase()
+        if (q === '') return base
+        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
+    }
+    colTitle(colId: string): string {
+        return this.cols.find((c) => c.id === colId)?.title ?? colId
+    }
+
+    select(colId: string, id: string): void {
+        this.st.sel = { t: 'item', col: colId, id }
+        this.actErr = ''
+        this.remarkDraft = ''
+        this.proofDraft = ''
+    }
+
+    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) })
+            if (!r.ok) throw new Error(await r.text())
+            await this.poll()
+            return true
+        } catch (e) {
+            runInAction(() => { this.actErr = (e as Error).message })
+            return false
+        }
+    }
+
+    askDone(file: string): Promise<boolean> {
+        const url = this.proofDraft.trim()
+        return url !== '' ? this.act('ask-proof', { file, url }) : this.act('ask-done', { file })
+    }
+    postPick(channel: string, file: string): Promise<boolean> {
+        return this.act('post-pick', { channel, file })
+    }
+    async postPosted(channel: string, file: string): Promise<boolean> {
+        const url = this.proofDraft.trim()
+        if (url === '') {
+            this.actErr = 'paste the posted URL first — the proof is the point'
+            return false
+        }
+        const ok = await this.act('post-posted', { channel, file, url })
+        if (ok) runInAction(() => { this.proofDraft = '' })
+        return ok
+    }
+    async remark(body: Record<string, unknown>): Promise<void> {
+        const text = this.remarkDraft.trim()
+        if (text === '') return
+        // draft survives a failed send — his words are never erased
+        const ok = await this.act('remark', { ...body, text })
+        if (ok) runInAction(() => { this.remarkDraft = '' })
+    }
+}

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

@@ -0,0 +1,155 @@
+// Geometry layer — the ground-rect oval + legs overlay on the stage image,
+// plus the rectbar. Ported 1:1 from the deleted vanilla studio SPA: same
+// drag math (move 1:1; resize anchored left-tip + center-y, legs scale),
+// same 250ms debounced save through MediaSvc. Pointer-capture drags mutate
+// the observable rect inside runInAction; the render derives every style
+// from (rect × measured image box).
+import { runInAction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+import { useRef } from 'react'
+import type { HubSt } from './hub-st.ts'
+import type { Leg } from './hub-types.ts'
+
+export type Box = { scale: number; x: number; y: number }
+
+/** vanilla imgBox(): where the letterboxed image actually sits in the stage */
+export function measureBox(stage: HTMLElement | null, img: HTMLImageElement | null): Box | null {
+    if (stage == null || img == null || !img.naturalWidth) return null
+    const b = img.getBoundingClientRect()
+    const st = stage.getBoundingClientRect()
+    const scale = Math.min(b.width / img.naturalWidth, b.height / img.naturalHeight)
+    const w = img.naturalWidth * scale
+    const h = img.naturalHeight * scale
+    return { scale, x: b.left - st.left + (b.width - w) / 2, y: b.top - st.top + (b.height - h) / 2 }
+}
+
+const LEG_TAGS = ['L·front', 'L·back', 'R·back', 'R·front']
+
+type DragStart = { px: number; py: number; x: number; y: number; w: number; legs: Leg[]; cy: number; mode: 'move' | 'resize' }
+
+const LegBox = observer(({ app, box, i, leg }: { app: HubSt; box: Box; i: number; leg: Leg }) => {
+    const m = app.media
+    const start = useRef<{ px: number; py: number; legs: Leg[]; mode: 'move' | 'resize' } | null>(null)
+    const px = (v: number): number => v * box.scale
+    const far = i < 2
+    const rect = m.rect!
+    return (
+        <>
+            <div
+                className={`leg ${far ? 'far' : 'near'}`}
+                style={{ color: far ? 'var(--blue)' : 'var(--red)', left: box.x + px(leg.x), top: box.y + px(leg.y), width: px(leg.w), height: px(leg.h) }}
+                onPointerDown={(e) => {
+                    if (rect.legs == null) return
+                    start.current = { px: e.clientX, py: e.clientY, legs: rect.legs.map((l) => ({ ...l })), mode: (e.target as HTMLElement).classList.contains('lh') ? 'resize' : 'move' }
+                    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+                    e.preventDefault()
+                    e.stopPropagation()
+                }}
+                onPointerMove={(e) => {
+                    const s = start.current
+                    if (s == null || rect.legs == null) return
+                    const dx = (e.clientX - s.px) / box.scale
+                    const dy = (e.clientY - s.py) / box.scale
+                    runInAction(() => {
+                        if (s.mode === 'move') {
+                            const o = s.legs[i]!
+                            rect.legs![i] = { ...o, x: o.x + dx, y: o.y + dy }
+                        } else {
+                            // one size for all 4 — every leg keeps its own FOOT planted
+                            const o = s.legs[i]!
+                            const w = Math.max(6, o.w + dx)
+                            const h = Math.max(6, o.h - dy)
+                            rect.legs = s.legs.map((l) => ({ x: l.x + (l.w - w) / 2, y: l.y + l.h - h, w, h }))
+                        }
+                    })
+                    m.saveRect()
+                }}
+                onPointerUp={() => { start.current = null; m.saveRect() }}
+            >
+                <div className="hip" />
+                <div className="foot" />
+                <div className="tag">{LEG_TAGS[i]}</div>
+                {i === 0 ? <div className="lh" /> : null}
+            </div>
+            <div
+                className={`pill${far ? '' : ' near'}`}
+                style={{ left: box.x + px(leg.x), top: box.y + px(leg.y), width: px(leg.w), height: px(leg.h), background: rect.legColor ?? '#c8a070' }}
+            />
+        </>
+    )
+})
+
+export const GeometryLayer = observer(({ app, box }: { app: HubSt; box: Box | null }) => {
+    const m = app.media
+    const start = useRef<DragStart | null>(null)
+    const rect = m.rect
+    if (!m.hasGeom || rect == null || box == null) return null
+    const px = (v: number): number => v * box.scale
+    return (
+        <>
+            <div className="plumb" style={{ display: 'block', left: box.x + px(rect.x) }} />
+            <div className="plumb" style={{ display: 'block', left: box.x + px(rect.x + rect.w) }} />
+            <div
+                id="ov"
+                style={{ display: 'block', left: box.x + px(rect.x), top: box.y + px(rect.y), width: px(rect.w), height: px(rect.h) }}
+                onPointerDown={(e) => {
+                    start.current = {
+                        px: e.clientX, py: e.clientY, x: rect.x, y: rect.y, w: rect.w,
+                        legs: (rect.legs ?? []).map((l) => ({ ...l })), cy: rect.y + rect.h / 2,
+                        mode: (e.target as HTMLElement).classList.contains('hdl') ? 'resize' : 'move',
+                    }
+                    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+                    e.preventDefault()
+                }}
+                onPointerMove={(e) => {
+                    const s = start.current
+                    if (s == null) return
+                    const dx = (e.clientX - s.px) / box.scale
+                    const dy = (e.clientY - s.py) / box.scale
+                    runInAction(() => {
+                        if (s.mode === 'move') {
+                            rect.x = Math.max(0, s.x + dx)
+                            rect.y = Math.max(0, s.y + dy)
+                            if (s.legs.length > 0) rect.legs = s.legs.map((l) => ({ ...l, x: l.x + (rect.x - s.x), y: l.y + (rect.y - s.y) }))
+                        } else {
+                            // anchored: left edge + center-y; legs scale around the same anchor
+                            rect.w = Math.max(20, s.w + dx)
+                            rect.h = rect.w * m.rectRatio
+                            rect.y = s.cy - rect.h / 2
+                            const f = rect.w / s.w
+                            if (s.legs.length > 0) rect.legs = s.legs.map((l) => ({ x: s.x + (l.x - s.x) * f, y: s.cy + (l.y - s.cy) * f, w: l.w * f, h: l.h * f }))
+                        }
+                    })
+                    m.saveRect()
+                }}
+                onPointerUp={() => { start.current = null; m.saveRect() }}
+            >
+                <div className="hdl" />
+                <div className="arrow" />
+                <div className="sz">{+rect.size.toFixed(2)}m</div>
+            </div>
+            {(rect.legs ?? []).map((l, i) => <LegBox key={i} app={app} box={box} i={i} leg={l} />)}
+        </>
+    )
+})
+
+export const Rectbar = observer(({ app }: { app: HubSt }) => {
+    const m = app.media
+    const rect = m.rect
+    if (!m.hasGeom || rect == null) return null
+    const cx = Math.round(rect.x + rect.w / 2)
+    const cy = Math.round(rect.y + rect.h / 2)
+    return (
+        <div id="rectbar" style={{ display: 'flex' }}>
+            <label>size <input type="number" step={0.1} min={0.1} value={rect.size}
+                onChange={(e) => { runInAction(() => { rect.size = Math.max(0.1, +e.target.value || rect.size) }); m.saveRect() }} /></label>
+            <button className="ghost" onClick={() => void m.legsDefault()}>legs</button>
+            <input type="color" title="leg color" value={/^#[0-9a-f]{6}$/i.test(rect.legColor ?? '') ? rect.legColor : '#c8a070'}
+                onChange={(e) => { runInAction(() => { rect.legColor = e.target.value }); m.saveRect() }} />
+            {rect.legs != null
+                ? <button className="ghost" title="remove legs" onClick={() => { if (confirm('remove all 4 legs?')) m.removeLegs() }}>✕</button>
+                : null}
+            <span className="ro">cx{cx} cy{cy} w{Math.round(rect.w)}px</span>
+        </div>
+    )
+})

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

@@ -0,0 +1,49 @@
+// Health service — STATUS.md + the streaming check runner (the health
+// section's card in THE page).
+import { makeAutoObservable, runInAction } from 'mobx'
+import type { HubSt } from './hub-st.ts'
+
+export class HealthSvc {
+    statusMd: string | null = null
+    running = false
+    note = ''
+
+    constructor(private st: HubSt) {
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    async load(): Promise<void> {
+        try {
+            const s = (await (await fetch('/api/status.json')).json()) as { statusMd: string | null }
+            runInAction(() => { this.statusMd = s.statusMd })
+        } catch (e) {
+            runInAction(() => { this.statusMd = `FAIL status fetch broke: ${(e as Error).message}` })
+        }
+    }
+
+    async runCheck(): Promise<void> {
+        this.running = true
+        this.note = 'running…'
+        let text = ''
+        try {
+            const r = await fetch('/api/check/run', { method: 'POST' })
+            const rd = r.body!.getReader()
+            const dec = new TextDecoder()
+            for (;;) {
+                const { done, value } = await rd.read()
+                if (done) break
+                text += dec.decode(value, { stream: true })
+                runInAction(() => { this.statusMd = text })
+            }
+            runInAction(() => { this.note = 'done — STATUS.md refreshed on disk' })
+            void this.load()
+            void this.st.cols.poll()
+        } catch (e) {
+            runInAction(() => {
+                this.statusMd = `${text}\nFAIL stream broke: ${(e as Error).message}`
+                this.note = 'stream broke'
+            })
+        }
+        runInAction(() => { this.running = false })
+    }
+}