rvlib-shipkit 0.38.1 → 1.0.1

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

@@ -0,0 +1,226 @@
+// the project gutter's state: every repo on this disk that shares the house
+// wiki, polled from /api/projects.json while the gutter is mounted. The
+// server measures at most once per 5s whatever the number of tabs, so this
+// poll is cheap.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { ProjectRow as Project, Release } from '../project-gutter-route.ts'
+import type { HubSt } from './hub-st.ts'
+
+export type { ProjectRow as Project, Release } from '../project-gutter-route.ts'
+
+export const PROJECTS_POLL_MS = 5_000
+
+/** one of six kind hues, hashed from the name, so an initial keeps its
+ *  colour from one load to the next */
+export const hueOf = (name: string): number => {
+    let h = 0
+    for (const c of name) h = (h * 31 + c.charCodeAt(0)) >>> 0
+    return (h % 6) + 1
+}
+
+const plural = (n: number, one: string): string => `${n} ${one}${n === 1 ? '' : 's'}`
+
+/** an age in the card's short form: `just now`, `3h ago`, `5d ago` */
+export function shortAgo(at: number, now: number): string {
+    const hours = Math.floor((now - at) / 3_600_000)
+    if (hours < 1) return 'just now'
+    if (hours < 24) return `${hours}h ago`
+    return `${Math.floor(hours / 24)}d ago`
+}
+
+/** the gap a pointer over tile `index` points at: the gap above the tile in
+ *  its top half, the one below it in its bottom half. Gap g sits before the
+ *  tile at index g, gap n after the last one */
+export const dropGap = (index: number, offsetY: number, height: number): number => (offsetY < height / 2 ? index : index + 1)
+
+/** true when dropping `from` into `gap` would leave the order as it is */
+export const idleGap = (from: number, gap: number): boolean => gap === from || gap === from + 1
+
+/** the names with the one at `from` moved into `gap` */
+export function moveTo(names: string[], from: number, gap: number): string[] {
+    if (from < 0 || from >= names.length || idleGap(from, gap)) return names
+    const out = names.filter((_, i) => i !== from)
+    out.splice(gap > from ? gap - 1 : gap, 0, names[from]!)
+    return out
+}
+
+/** the names by last activity, newest first, the never active last, ties in
+ *  their current order */
+export const byActivity = (list: Project[]): string[] =>
+    list.map((p, i) => ({ p, i }))
+        .sort((a, b) => (b.p.activity ?? -Infinity) - (a.p.activity ?? -Infinity) || a.i - b.i)
+        .map(({ p }) => p.name)
+
+/** what the icon face shows, and nothing more: at most ONE badge (the open
+ *  asks, the only fact that needs a human's hands), dim while VS Code does
+ *  not have the folder open, and a pulsing edge while Claude sessions run */
+export type Face = { badge: number | null; dim: boolean; busy: boolean }
+export const faceOf = (p: Project): Face => ({
+    badge: p.asks > 0 ? p.asks : null,
+    dim: p.vscode === false,
+    busy: p.sessions != null && p.sessions > 0,
+})
+
+/** the hover card as data, in three parts: a header that says which repo
+ *  this is, a NEEDS YOU part that exists only when something waits on a
+ *  human, and label and value rows. Each part leaves out an unknown fact */
+export type CardModel = {
+    head: { name: string; current: boolean; icon: string | null; version: string | null; branch: string | null; description: string | null }
+    needs: { asks: { count: number; titles: string[]; more: number } | null; gate: string | null } | null
+    facts: { k: 'release' | 'live' | 'activity'; v: string; tone?: 'warn' }[]
+}
+
+/** how many ask titles and gate ids the card names before `+N` */
+export const CARD_NAMES = 3
+
+export function cardModel(p: Project, now: number): CardModel {
+    const branch = p.branch == null ? null : p.dirty != null && p.dirty > 0 ? `${p.branch} · ${p.dirty} uncommitted` : p.branch
+    const asks = p.asks > 0 ? { count: p.asks, titles: p.askTitles.slice(0, CARD_NAMES), more: Math.max(0, p.asks - CARD_NAMES) } : null
+    const reds = p.gate != null && p.gate !== 'green' ? p.gate.reds : []
+    const gate = reds.length === 0 ? null : `gate red: ${reds.slice(0, CARD_NAMES).join(', ')}${reds.length > CARD_NAMES ? ` +${reds.length - CARD_NAMES}` : ''}`
+    const facts: CardModel['facts'] = []
+    if (p.release === 'never') facts.push({ k: 'release', v: 'never released', tone: 'warn' })
+    else if (p.release != null) {
+        const parts = [p.release.tag]
+        if (p.release.at > 0) parts.push(shortAgo(p.release.at, now))
+        parts.push(`${plural(p.release.ahead, 'commit')} since`)
+        facts.push({ k: 'release', v: parts.join(' · ') })
+    }
+    if (p.live != null) facts.push({ k: 'live', v: p.live })
+    const act: string[] = []
+    if (p.sessions != null && p.sessions > 0) act.push(plural(p.sessions, 'agent'))
+    if (p.vscode != null) act.push(p.vscode ? 'VS Code open' : 'VS Code closed')
+    if (p.activity != null) act.push(shortAgo(p.activity, now))
+    if (act.length > 0) facts.push({ k: 'activity', v: act.join(' · ') })
+    return {
+        head: { name: p.name, current: p.current, icon: p.icon, version: p.version, branch, description: p.description },
+        needs: asks == null && gate == null ? null : { asks, gate },
+        facts,
+    }
+}
+
+export class ProjectsSvc {
+    list: Project[] = []
+    /** why the last poll or open failed, shown in the gutter's tooltip */
+    error = ''
+    /** the icon under the pointer and the middle of its row, for the card */
+    hover: { name: string; y: number } | null = null
+    /** the tile being dragged, and the gap it would land in */
+    drag: string | null = null
+    gap: number | null = null
+    private gen = 0
+    /** bumped by every reorder, so a poll that left before it cannot put
+     *  the old order back */
+    private orderGen = 0
+
+    constructor(private st: HubSt) {
+        makeAutoObservable<this, 'st' | 'gen' | 'orderGen'>(this, { st: false, gen: false, orderGen: false, list: observableRef })
+    }
+
+    get dragFrom(): number {
+        return this.list.findIndex((p) => p.name === this.drag)
+    }
+
+    /** the gap the drop line shows, or null when the drop would change nothing */
+    get shownGap(): number | null {
+        if (this.drag == null || this.gap == null || idleGap(this.dragFrom, this.gap)) return null
+        return this.gap
+    }
+
+    hoverIn(name: string, y: number): void {
+        if (this.drag == null) this.hover = { name, y }
+    }
+
+    hoverOut(name: string): void {
+        if (this.hover?.name === name) this.hover = null
+    }
+
+    get hovered(): Project | null {
+        return this.hover == null ? null : this.list.find((p) => p.name === this.hover!.name) ?? null
+    }
+
+    dragStart(name: string): void {
+        this.hover = null
+        this.drag = name
+        this.gap = null
+    }
+
+    dragOver(index: number, offsetY: number, height: number): void {
+        if (this.drag != null) this.gap = dropGap(index, offsetY, height)
+    }
+
+    dragEnd(): void {
+        this.drag = null
+        this.gap = null
+    }
+
+    drop(): void {
+        const from = this.dragFrom
+        const gap = this.gap
+        this.dragEnd()
+        if (from < 0 || gap == null || idleGap(from, gap)) return
+        void this.reorder(moveTo(this.list.map((p) => p.name), from, gap))
+    }
+
+    /** one reorder by last activity; from then on it is the manual order */
+    sortByActivity(): void {
+        void this.reorder(byActivity(this.list))
+    }
+
+    /** shows the new order at once, then saves it for every hub */
+    async reorder(names: string[]): Promise<void> {
+        this.orderGen++
+        const by = new Map(this.list.map((p) => [p.name, p]))
+        this.list = names.map((n) => by.get(n)).filter((p): p is Project => p != null)
+        try {
+            const r = await fetch('/api/projects/order', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ names }) })
+            if (!r.ok) throw new Error(await r.text())
+            runInAction(() => { this.error = '' })
+        } catch (e) {
+            runInAction(() => { this.error = `reorder: ${(e as Error).message}` })
+        }
+    }
+
+    /** polls until the returned stop runs. A stopped chain dies at its next
+     *  await, because the generation it carries is no longer current */
+    start(): () => void {
+        const gen = ++this.gen
+        const tick = async (): Promise<void> => {
+            await this.load()
+            if (gen === this.gen) timer = setTimeout(() => void tick(), PROJECTS_POLL_MS)
+        }
+        let timer: ReturnType<typeof setTimeout> | null = null
+        void tick()
+        return () => {
+            this.gen++
+            if (timer != null) clearTimeout(timer)
+        }
+    }
+
+    async load(): Promise<void> {
+        const order = this.orderGen
+        try {
+            const r = await fetch('/api/projects.json')
+            if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
+            const j = (await r.json()) as { projects: Project[] }
+            runInAction(() => {
+                // a reorder since this left, or a drag in flight: the next poll answers
+                if (order !== this.orderGen || this.drag != null) return
+                this.list = j.projects
+                this.error = ''
+            })
+        } catch (e) {
+            runInAction(() => { this.error = `projects: ${(e as Error).message}` })
+        }
+    }
+
+    async open(name: string): Promise<void> {
+        try {
+            const r = await fetch('/api/projects/open', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name }) })
+            if (!r.ok) throw new Error(await r.text())
+            runInAction(() => { this.error = '' })
+        } catch (e) {
+            runInAction(() => { this.error = `open ${name}: ${(e as Error).message}` })
+        }
+    }
+}

package/src/serve/hub-app/prose-hits-st.ts

@@ -0,0 +1,124 @@
+// The SK014 page's own state: the hits the server grouped, the filters over
+// them, and the word list form. Component scoped (it lives while the page is
+// open), and every write goes through the ONE config writer the run when
+// switch uses (checks-svc.ts writeGate), so a word list edit is refused for
+// the same reasons a switch is.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { ProseGroup, ProseView } from '../../prose/prose-view.ts'
+import type { HubSt } from './hub-st.ts'
+
+export type TierFilter = 'all' | 'blocking' | 'soft'
+export type ListKind = 'allow' | 'ban'
+
+/** how many groups the page draws before a "show every word" button */
+export const GROUP_CAP = 40
+/** how many hits one open group draws before its own "show all" */
+export const HIT_CAP = 60
+
+export class ProseHitsSt {
+    view: ProseView | null = null
+    error = ''
+    loading = false
+    word = ''
+    file = ''
+    tier: TierFilter = 'all'
+    allGroups = false
+    /** group keys the reader opened */
+    open = new Set<string>()
+    /** group keys whose every hit is drawn */
+    full = new Set<string>()
+    form: { kind: ListKind; word: string; to: string; reason: string } = { kind: 'allow', word: '', to: '', reason: '' }
+
+    constructor(private st: HubSt) {
+        // .ref: the view is swapped whole on every load, never edited in place
+        makeAutoObservable<this, 'st'>(this, { st: false, view: observableRef })
+    }
+
+    async load(): Promise<void> {
+        runInAction(() => { this.loading = true })
+        try {
+            const r = await fetch('/api/prose.json')
+            if (!r.ok) throw new Error(await r.text())
+            const v = (await r.json()) as ProseView
+            runInAction(() => { this.view = v; this.error = '' })
+        } catch (e) {
+            runInAction(() => { this.error = `the hits could not be read: ${(e as Error).message}` })
+        }
+        runInAction(() => { this.loading = false })
+    }
+
+    setWord(v: string): void { this.word = v }
+    setFile(v: string): void { this.file = v }
+    setTier(v: TierFilter): void { this.tier = v }
+    showAllGroups(): void { this.allGroups = true }
+    toggle(key: string): void {
+        if (this.open.has(key)) this.open.delete(key)
+        else this.open.add(key)
+    }
+    showAllHits(key: string): void { this.full.add(key) }
+    setForm<K extends keyof ProseHitsSt['form']>(k: K, v: ProseHitsSt['form'][K]): void {
+        this.form = { ...this.form, [k]: v }
+    }
+
+    /** the groups under the filters, each recounted over the hits it keeps,
+     *  so a file filter reorders the words by their noise IN that file */
+    get groups(): ProseGroup[] {
+        const v = this.view
+        if (v == null) return []
+        const w = this.word.trim().toLowerCase()
+        const f = this.file.trim().toLowerCase()
+        const out: ProseGroup[] = []
+        for (const g of v.groups) {
+            if (this.tier === 'blocking' && g.tier === 'soft') continue
+            if (this.tier === 'soft' && g.tier !== 'soft') continue
+            if (w !== '' && !(g.word ?? g.cls).includes(w) && !g.cls.includes(w)) continue
+            const hits = f === '' ? g.hits : g.hits.filter((h) => h.file.toLowerCase().includes(f))
+            if (hits.length === 0) continue
+            out.push(hits === g.hits ? g : { ...g, hits, count: hits.length })
+        }
+        return out.sort((a, b) => b.count - a.count || a.key.localeCompare(b.key))
+    }
+
+    get shownCount(): number {
+        return this.groups.reduce((n, g) => n + g.count, 0)
+    }
+
+    /** every file that carries a hit, for the file filter's suggestions */
+    get files(): string[] {
+        const s = new Set<string>()
+        for (const g of this.view?.groups ?? []) for (const h of g.hits) s.add(h.file)
+        return [...s].sort()
+    }
+
+    get busy(): boolean { return this.st.checks.gateBusy }
+
+    /** after any write: the config moved, so the hits are re-read and the
+     *  rule reruns, and its row recolours on the tree like any other run */
+    private async after(ok: boolean): Promise<void> {
+        if (!ok) return
+        await this.load()
+        void this.st.checks.run(['SK014'])
+    }
+
+    async allow(word: string, reason = ''): Promise<void> {
+        const ok = await this.st.checks.writeGate({ words: { allow: [{ word, reason }] } }, `'${word}' is allowed in this repo — repo.config.ts is edited and waiting for your commit`)
+        await this.after(ok)
+    }
+
+    async submit(): Promise<void> {
+        const f = this.form
+        if (f.word.trim() === '') return
+        const entry = f.kind === 'allow' ? { allow: [{ word: f.word, reason: f.reason }] } : { ban: [{ word: f.word, to: f.to, reason: f.reason }] }
+        const said = f.kind === 'allow'
+            ? `'${f.word.trim()}' is allowed in this repo — repo.config.ts is edited and waiting for your commit`
+            : `'${f.word.trim()}' is refused in this repo — repo.config.ts is edited and waiting for your commit`
+        const ok = await this.st.checks.writeGate({ words: entry }, said)
+        if (ok) runInAction(() => { this.form = { kind: this.form.kind, word: '', to: '', reason: '' } })
+        await this.after(ok)
+    }
+
+    async remove(word: string): Promise<void> {
+        const ok = await this.st.checks.writeGate({ words: { remove: [word] } }, `'${word}' is back to the house dictionary — repo.config.ts is edited and waiting for your commit`)
+        await this.after(ok)
+    }
+}

package/src/serve/hub-app/prose-hits-view.tsx

@@ -0,0 +1,176 @@
+// THE SK014 PAGE's own sections: what the prose check found, grouped by word
+// with the noisiest on top, each hit a file:line link into the editor and the
+// sentence around it with the word marked; then the repo's own word lists,
+// editable in place. The house dictionary stays the default, a list entry
+// overrides it for this repo only.
+import { observer } from 'mobx-react-lite'
+import { useEffect, useMemo } from 'react'
+import type { ProseGroup, ProseViewHit } from '../../prose/prose-view.ts'
+import type { ProseWords } from '../../prose/ste.ts'
+import { editorHref } from './check-words.ts'
+import { Help } from './help.tsx'
+import type { HubSt } from './hub-st.ts'
+import { GROUP_CAP, HIT_CAP, ProseHitsSt, type ListKind, type TierFilter } from './prose-hits-st.ts'
+
+/** blocking tiers read red, the soft tier reads as a warning */
+const TIER_WORD: Record<string, { word: string; tone: string }> = {
+    fix: { word: 'blocks, --fix rewrites it', tone: 'red' },
+    hard: { word: 'blocks', tone: 'red' },
+    soft: { word: 'soft', tone: 'warn' },
+}
+
+const TIERS: { v: TierFilter; label: string }[] = [
+    { v: 'all', label: 'every hit' },
+    { v: 'blocking', label: 'what blocks' },
+    { v: 'soft', label: 'soft only' },
+]
+
+/** the sentence around a hit, the hit itself marked */
+const Excerpt = ({ h }: { h: ProseViewHit }) => (
+    <span className="pexc">
+        {h.excerpt.slice(0, h.mark[0])}
+        <mark>{h.excerpt.slice(h.mark[0], h.mark[1])}</mark>
+        {h.excerpt.slice(h.mark[1])}
+    </span>
+)
+
+const HitLine = ({ root, h, shape }: { root: string; h: ProseViewHit; shape: boolean }) => {
+    const href = editorHref(root, h.file)
+    const at = `${h.file}:${h.line}`
+    return (
+        <div className="phit">
+            {href == null ? <code className="cpath">{at}</code> : <a href={`${href}:${h.line}`} title="open it in the editor"><code className="cpath">{at}</code></a>}
+            <Excerpt h={h} />
+            {/* a shape's reason names its own numbers (31 words, 8 sentences) */}
+            {shape ? <span className="dim pwhy">{h.why}</span> : null}
+        </div>
+    )
+}
+
+const Group = observer(({ app, s, g }: { app: HubSt; s: ProseHitsSt; g: ProseGroup }) => {
+    const open = s.open.has(g.key)
+    const t = TIER_WORD[g.tier] ?? { word: g.tier, tone: '' }
+    const shown = s.full.has(g.key) ? g.hits : g.hits.slice(0, HIT_CAP)
+    return (
+        <div className="pgroup">
+            <div className="phead">
+                <button className="ptoggle" onClick={() => s.toggle(g.key)} title={open ? 'hide the hits' : 'show the hits'}>{open ? '▾' : '▸'}</button>
+                <span className="pcount dnum">{g.count}</span>
+                <b className="pword">{g.word ?? g.cls}</b>
+                <span className="stchip">{g.cls}</span>
+                <span className={`tl ${t.tone}`}>{t.word}</span>
+                <span className="dim pwhy">{g.word == null ? null : g.hits[0]?.why}</span>
+                <span className="sp" />
+                {g.word == null
+                    ? null
+                    : <button disabled={s.busy} title="accept this word in this repo: every hit on it goes away" onClick={() => void s.allow(g.word!)}>allow it here</button>}
+            </div>
+            {open
+                ? <div className="phits">
+                    {shown.map((h, n) => <HitLine key={`${h.file}:${h.line}:${n}`} root={app.root} h={h} shape={g.word == null} />)}
+                    {shown.length < g.hits.length
+                        ? <button className="pmore" onClick={() => s.showAllHits(g.key)}>show the other {g.hits.length - shown.length}</button>
+                        : null}
+                </div>
+                : null}
+        </div>
+    )
+})
+
+const Hits = observer(({ app, s }: { app: HubSt; s: ProseHitsSt }) => {
+    const v = s.view
+    if (v == null) return <div className="dim">{s.error !== '' ? s.error : 'reading the hits…'}</div>
+    if (!v.scoped) return <div className="dim">this repo declares no prose scope, so the check reads no file: add `prose: {'{'} include: [...] {'}'}` to repo.config.ts</div>
+    const groups = s.groups
+    const drawn = s.allGroups ? groups : groups.slice(0, GROUP_CAP)
+    const blocking = v.byTier.fix + v.byTier.hard
+    return (
+        <>
+            <div className="wline">
+                {v.total} hit(s) in {v.files} file(s): <span className={blocking > 0 ? 'tl red' : 'dim'}>{blocking} block</span>, <span className="tl warn">{v.byTier.soft} soft</span>
+                {s.loading ? <span className="dim"> (reading again…)</span> : null}
+            </div>
+            <div className="pfilters">
+                <input placeholder="filter by word or rule" value={s.word} onChange={(e) => s.setWord(e.target.value)} />
+                <input placeholder="filter by file" list="prose-files" value={s.file} onChange={(e) => s.setFile(e.target.value)} />
+                <datalist id="prose-files">{s.files.map((f) => <option key={f} value={f} />)}</datalist>
+                <select className="wsel" value={s.tier} onChange={(e) => s.setTier(e.target.value as TierFilter)}>
+                    {TIERS.map((t) => <option key={t.v} value={t.v}>{t.label}</option>)}
+                </select>
+                {s.word !== '' || s.file !== '' || s.tier !== 'all' ? <span className="dim">{s.shownCount} shown</span> : null}
+            </div>
+            {groups.length === 0 ? <div className="dim">no hit matches the filters</div> : null}
+            {drawn.map((g) => <Group key={g.key} app={app} s={s} g={g} />)}
+            {drawn.length < groups.length
+                ? <button className="pmore" onClick={() => s.showAllGroups()}>show the other {groups.length - drawn.length} words and rules</button>
+                : null}
+        </>
+    )
+})
+
+const ListRows = ({ s, words }: { s: ProseHitsSt; words: ProseWords }) => {
+    const rows = [
+        ...(words.allow ?? []).map((a) => ({ kind: 'allow' as ListKind, word: a.word, to: undefined as string | undefined, reason: a.reason })),
+        ...(words.ban ?? []).map((b) => ({ kind: 'ban' as ListKind, word: b.word, to: b.to, reason: b.reason })),
+    ]
+    if (rows.length === 0) return <div className="dim">no entry: the house dictionary decides every word here</div>
+    return (
+        <div className="plist">
+            {rows.map((r) => (
+                <div key={`${r.kind}:${r.word}`} className="prow">
+                    <span className={`stchip ${r.kind === 'allow' ? 'ok' : 'miss'}`}>{r.kind}</span>
+                    <b>{r.word}</b>
+                    {r.to == null || r.to === '' ? null : <span>→ {r.to}</span>}
+                    {r.reason == null || r.reason === '' ? null : <span className="dim">{r.reason}</span>}
+                    <span className="sp" />
+                    <button disabled={s.busy} onClick={() => void s.remove(r.word)}>drop it</button>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+const Lists = observer(({ app, s }: { app: HubSt; s: ProseHitsSt }) => {
+    const f = s.form
+    const g = app.checks.gate
+    return (
+        <>
+            <ListRows s={s} words={s.view?.words ?? {}} />
+            <div className="pform">
+                <select className="wsel" value={f.kind} onChange={(e) => s.setForm('kind', e.target.value as ListKind)}>
+                    <option value="allow">allow</option>
+                    <option value="ban">ban</option>
+                </select>
+                <input placeholder={f.kind === 'allow' ? 'word or phrase this repo accepts' : 'word or phrase this repo refuses'} value={f.word} onChange={(e) => s.setForm('word', e.target.value)} />
+                {f.kind === 'ban' ? <input placeholder="write this instead" value={f.to} onChange={(e) => s.setForm('to', e.target.value)} /> : null}
+                <input placeholder="why (optional, it rides in the config)" value={f.reason} onChange={(e) => s.setForm('reason', e.target.value)} />
+                <button disabled={s.busy || f.word.trim() === ''} onClick={() => void s.submit()}>{f.kind === 'allow' ? 'allow it' : 'ban it'}</button>
+            </div>
+            {g?.wordsState === 'stale' ? <div className="warnline">the words block in {g.path} was hand edited: reconcile it, then the lists work again</div> : null}
+            {g != null && g.dirty ? <div className="note">{g.path} is edited and not committed, review it in your git client</div> : null}
+            {app.checks.gateNote === '' ? null : <div className="note">{app.checks.gateNote}</div>}
+        </>
+    )
+})
+
+/** the two sections over one state, the part a test renders headless */
+export const ProseSections = observer(({ app, s }: { app: HubSt; s: ProseHitsSt }) => (
+    <>
+        <section className="csec">
+            <div className="cstitle">hits<Help text="every hit of the last read, grouped by the word or the rule that fired, the noisiest first. A file:line opens the editor on that line" /></div>
+            <Hits app={app} s={s} />
+        </section>
+        <section className="csec">
+            <div className="cstitle">this repo's words<Help text="allow drops every hit on a word or phrase, ban refuses an extra one and names what to write instead. The house dictionary stays the default. An edit writes repo.config.ts, reruns the check and leaves the file for you to commit" /></div>
+            <Lists app={app} s={s} />
+        </section>
+    </>
+))
+
+/** mounted by the check page for SK014 only: the state lives while the page
+ *  is open, and reads the hits once on the way in */
+export const ProseHits = observer(({ app }: { app: HubSt }) => {
+    const s = useMemo(() => new ProseHitsSt(app), [app])
+    useEffect(() => { void s.load() }, [s])
+    return <ProseSections app={app} s={s} />
+})

package/src/serve/hub-app/prose-hits.css

@@ -0,0 +1,21 @@
+/* the SK014 page: word groups, their hits, the repo's word lists (prose-hits-view.tsx) */
+.pfilters{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
+.pfilters input,.pform input{background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);
+ padding:var(--s1) var(--s2);font:inherit;font-size:12.5px}
+.pfilters input:focus,.pform input:focus{border-color:var(--accent);outline:none}
+.pgroup{border-top:1px solid var(--line)}
+.phead{display:flex;gap:var(--s2);align-items:baseline;padding:var(--s1) 0;min-width:0}
+.phead .sp,.prow .sp{flex:1}
+.phead .pwhy{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.ptoggle{background:none;border:0;color:var(--dim);cursor:pointer;padding:0;font:inherit}
+.pcount{min-width:3.5em;text-align:right}
+.pword{font-weight:500}
+.phits{padding:0 0 var(--s2) var(--s4)}
+.phit{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline;padding:var(--s0) 0;font-size:12.5px}
+.phit a{text-decoration:none}
+.pexc{color:var(--dim);word-break:break-word}
+.pexc mark{background:var(--hi2);color:var(--ink);border-bottom:1px solid var(--red);padding:0 var(--s0)}
+.pmore{margin:var(--s1) 0}
+.plist{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s2)}
+.prow{display:flex;gap:var(--s2);align-items:baseline}
+.pform{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

package/src/serve/hub-app/run-strip.ts

@@ -0,0 +1,47 @@
+// The hub's own run, as a pure reducer over the run stream: the line the
+// header's run state shows. No mobx, no dom: ChecksSvc holds one RunProgress
+// and feeds it the same NDJSON events that colour the rows, so what the header
+// says and what the tree shows can never come from two readings of one run.
+import type { CheckEvent } from './hub-types.ts'
+
+export type RunPhase = 'idle' | 'running' | 'done'
+
+export type RunProgress = {
+    phase: RunPhase
+    /** what is running, in the words the button used */
+    label: string
+    /** how many checks this run expects. 0 = unknown, and the strip says so
+     *  by dropping the denominator rather than guessing one */
+    total: number
+    done: number
+    /** blocking failures: the only ones that stop anything */
+    reds: number
+    /** warnings and failures that cannot block */
+    warns: number
+    code: number | null
+}
+
+export const idleRun = (): RunProgress => ({ phase: 'idle', label: '', total: 0, done: 0, reds: 0, warns: 0, code: null })
+
+export const startRun = (label: string, total: number): RunProgress => ({ ...idleRun(), phase: 'running', label, total })
+
+/** one stream event, applied. Unknown events are no-ops on purpose: the
+ *  stream gains kinds over time and a strip is not a reason to fail a run */
+export function applyRunEvent(p: RunProgress, e: Record<string, unknown>): RunProgress {
+    if (e.t === 'done') return { ...p, phase: 'done', code: typeof e.code === 'number' ? e.code : null }
+    if (e.t !== 'check') return p
+    const u = e as unknown as CheckEvent
+    const red = u.status === 'fail' && u.advisory !== true
+    const warn = u.status === 'warn' || (u.status === 'fail' && u.advisory === true)
+    return { ...p, done: p.done + 1, reds: p.reds + (red ? 1 : 0), warns: p.warns + (warn ? 1 : 0) }
+}
+
+/** the one line, or nothing. Nothing is what an idle page shows */
+export function stripText(p: RunProgress): string {
+    if (p.phase === 'idle') return ''
+    const head = p.label === '' ? '' : `${p.label} · `
+    if (p.phase === 'done')
+        return `${head}${p.reds > 0 ? `done, ${p.reds} red` : p.code != null && p.code !== 0 ? `done, exit ${p.code}` : 'done, green'}`
+    const of = p.total > 0 ? ` of ${p.total}` : ''
+    return `${head}running ${p.done}${of}${p.reds > 0 ? ` · ${p.reds} red so far` : ''}`
+}

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

@@ -0,0 +1,24 @@
+// THE RUNS PAGE TABS, and the address each one has. Pure, so the router
+// (hash-route.ts) can name the canonical address of a tab without the page.
+import { RUNS_ID } from '../../collections/collection-types.ts'
+import { CACHED, RAN } from '../../core/outcome-words.ts'
+
+export type RunsTab = 'runs' | 'files' | 'slowest' | 'longest'
+
+/** the four lists, in tab order. `key` is what the address carries */
+export const RUNS_TABS: { key: RunsTab; label: string; help: string }[] = [
+    { key: 'runs', label: 'runs', help: `every run on record, newest first: shipkit ci, shipkit check, the hub's buttons, its save trigger and its daily health pass. One line per run: when, who started it, what ran, its wall time, how many checks ${RAN}, how many were ${CACHED} (answered from the cache, nothing ran), and its reds. Unfold a run for one line per check, named by its title with its id as the small tag, in a box that scrolls: its reds first, then what ${RAN}, slowest first, then what was ${CACHED}. Click a check for its page. Every run in time, and how many ran at once, is the live strip under the header: unfold it and press fit` },
+    { key: 'files', label: 'test files to fix', help: "bun test files, not checks: each file's last recorded run inside the check that ran it (test, test:<unit>), kept when a test in it failed or when it broke the quick tier budget per file. The same verdict colours the file in the tree under tests. Click a file for its page, the check tag for the check" },
+    { key: 'slowest', label: 'slowest checks', help: 'the checks that cost the most when they really run: the mean and the worst of the runs that ran. A check whose worst run passed half its ceiling is flagged, because the next slow machine trips it' },
+    { key: 'longest', label: 'longest runs', help: 'the invocations on record that took the longest, start to end, whatever ran them' },
+]
+
+/** the tab an item id asks for. The bare page id, and a tab this build does
+ *  not name, is the runs tab */
+export function runsTab(id: string | null | undefined): RunsTab {
+    const rest = id != null && id.startsWith(`${RUNS_ID}:`) ? id.slice(RUNS_ID.length + 1) : ''
+    return RUNS_TABS.find((t) => t.key === rest)?.key ?? 'runs'
+}
+
+/** the item id that opens one tab: the runs tab is the bare page id */
+export const runsTabId = (tab: RunsTab): string => (tab === 'runs' ? RUNS_ID : `${RUNS_ID}:${tab}`)