rvlib-shipkit 1.1.1 → 1.3.0

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

@@ -5,8 +5,8 @@
 import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState, type DragEvent, type ReactNode } from 'react'
-import type { HubSt } from './hub-st.ts'
-import { isAud, rollUrl, thumbUrl } from './media-svc.ts'
+import type { RepoSt } from './repo-st.ts'
+import { isAud, type MediaSvc } from './media-svc.ts'
 import { GeometryLayer, Rectbar, measureBox, type Box } from './geometry-view.tsx'
 import type { CatRow, CustomPanelRef } from './hub-types.ts'
 
@@ -14,7 +14,7 @@ const TEX = 1024
 const MIX_UNIT = 24
 const MIX_GROUND = 44
 
-export const MediaTopbar = observer(({ app }: { app: HubSt }) => {
+export const MediaTopbar = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const fileRef = useRef<HTMLInputElement>(null)
     const taRef = useRef<HTMLTextAreaElement>(null)
@@ -71,7 +71,7 @@ export const MediaTopbar = observer(({ app }: { app: HubSt }) => {
     )
 })
 
-export const InfoChips = observer(({ app }: { app: HubSt }) => {
+export const InfoChips = observer(({ app }: { app: RepoSt }) => {
     const info = app.media.detail?.info
     if (info == null) return null
     const chips: { k: string; v: ReactNode; warn?: boolean }[] = [{ k: 'backend', v: info.backend }]
@@ -91,7 +91,7 @@ export const InfoChips = observer(({ app }: { app: HubSt }) => {
     )
 })
 
-export const AssetStage = observer(({ app }: { app: HubSt }) => {
+export const AssetStage = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const stageRef = useRef<HTMLDivElement>(null)
     const imgRef = useRef<HTMLImageElement>(null)
@@ -116,9 +116,9 @@ export const AssetStage = observer(({ app }: { app: HubSt }) => {
     else if (isAud(shown)) content = (
         // key = the roll identity: heartbeats re-render but never recreate
         // the element, so playback survives; the src carries no cache-bust
-        <div className="stageaud" key={`${m.curId}/${shown}`}>🔊<audio controls src={rollUrl(m.curId!, shown)} /></div>
+        <div className="stageaud" key={`${m.curId}/${shown}`}>🔊<audio controls src={m.rollUrl(m.curId!, shown)} /></div>
     )
-    else content = <img className="roll" src={rollUrl(m.curId!, shown)} ref={imgRef} onLoad={remeasure} />
+    else content = <img className="roll" src={m.rollUrl(m.curId!, shown)} ref={imgRef} onLoad={remeasure} />
     const imgShown = shown != null && !isAud(shown)
     const measured = imgShown && box != null
     return (
@@ -137,7 +137,7 @@ export const AssetStage = observer(({ app }: { app: HubSt }) => {
     )
 })
 
-export const ToolsBar = observer(({ app }: { app: HubSt }) => {
+export const ToolsBar = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const d = m.detail
     if (d == null || m.curId == null) return null
@@ -177,7 +177,7 @@ export const ToolsBar = observer(({ app }: { app: HubSt }) => {
 
 // variants live in a THIN resizable side bar — the stage keeps the room.
 // closed = a slim rail with the count; the drag handle resizes; drop = upload
-export const VariantsBar = observer(({ app }: { app: HubSt }) => {
+export const VariantsBar = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const rolls = m.detail?.rolls ?? []
     const genHere = m.curId != null && m.pending.includes(m.curId)
@@ -213,7 +213,7 @@ export const VariantsBar = observer(({ app }: { app: HubSt }) => {
                         onMouseEnter={() => { if (!isAud(x.name)) runInAction(() => { m.hover = x.name }) }}
                         onMouseLeave={() => runInAction(() => { m.hover = null })}
                         onClick={() => m.setActive(x.name)}>
-                        {isAud(x.name) ? <>🔊<audio controls src={rollUrl(m.curId!, x.name)} /></> : <img src={rollUrl(m.curId!, x.name)} />}
+                        {isAud(x.name) ? <>🔊<audio controls src={m.rollUrl(m.curId!, x.name)} /></> : <img src={m.rollUrl(m.curId!, x.name)} />}
                         {x.picked ? <span className="st">★</span> : null}
                         <div className="btns">
                             <button className="b-pick" onClick={(e) => { e.stopPropagation(); void m.pick(x.name) }}>pick</button>
@@ -228,7 +228,7 @@ export const VariantsBar = observer(({ app }: { app: HubSt }) => {
 })
 
 // ── category grid + size-true lineup ─────────────────────────────────────
-const MixLineup = observer(({ rows }: { rows: CatRow[] }) => {
+const MixLineup = observer(({ m, rows }: { m: MediaSvc; rows: CatRow[] }) => {
     const items = rows.filter((r) => !r.icon && r.rect != null).sort((a, b) => a.rect!.size - b.rect!.size || a.label.localeCompare(b.label))
     const boxH = 420
     const baseY = boxH - MIX_GROUND
@@ -241,7 +241,7 @@ const MixLineup = observer(({ rows }: { rows: CatRow[] }) => {
         cx += slot / 2
         const fx = rect.flip === true ? TEX - rect.x - rect.w : rect.x
         sprites.push(
-            <img key={it.id} className="mixsprite" src={thumbUrl(it.id)} style={{
+            <img key={it.id} className="mixsprite" src={m.thumbUrl(it.id)} style={{
                 width: TEX * ts, height: TEX * ts,
                 left: cx - (fx + rect.w / 2) * ts, top: baseY - (rect.y + rect.h / 2) * ts,
                 transform: rect.flip === true ? 'scaleX(-1)' : undefined, zIndex: Math.round(cx),
@@ -262,7 +262,7 @@ const MixLineup = observer(({ rows }: { rows: CatRow[] }) => {
     )
 })
 
-export const CatGrid = observer(({ app }: { app: HubSt }) => {
+export const CatGrid = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const cat = m.catMode
     if (cat == null) return null
@@ -288,9 +288,9 @@ export const CatGrid = observer(({ app }: { app: HubSt }) => {
                         // inner controls stopPropagation
                         <div className="card" key={row.id} onClick={() => app.selectAsset(row.id)}>
                             {isAud(row.name)
-                                ? <div className="aud">🔊<audio controls src={rollUrl(row.id, row.name)} onClick={(e) => e.stopPropagation()} />{m.pending.includes(row.id) ? <div className="spin" /> : null}</div>
+                                ? <div className="aud">🔊<audio controls src={m.rollUrl(row.id, row.name)} onClick={(e) => e.stopPropagation()} />{m.pending.includes(row.id) ? <div className="spin" /> : null}</div>
                                 : <div className="th">
-                                    <img src={thumbUrl(row.id)} style={fl ? { transform: 'scaleX(-1)' } : undefined} />
+                                    <img src={m.thumbUrl(row.id)} style={fl ? { transform: 'scaleX(-1)' } : undefined} />
                                     {row.rect != null ? <div className="ovmini" style={{
                                         left: pc(fl ? TEX - row.rect.x - row.rect.w : row.rect.x), top: pc(row.rect.y),
                                         width: pc(row.rect.w), height: pc(row.rect.h),
@@ -314,13 +314,13 @@ export const CatGrid = observer(({ app }: { app: HubSt }) => {
                     )
                 })}
             </div>
-            <MixLineup rows={m.catRows} />
+            <MixLineup m={m} rows={m.catRows} />
         </div>
     )
 })
 
 // ── dock: the active tools' panels, side by side under the stage ─────────
-const PanelHost = observer(({ app, c }: { app: HubSt; c: CustomPanelRef }) => {
+const PanelHost = observer(({ app, c }: { app: RepoSt; c: CustomPanelRef }) => {
     const m = app.media
     const ref = useRef<HTMLDivElement>(null)
     const key = `${m.curId}|${m.active}|${c.id}`
@@ -337,7 +337,7 @@ const PanelHost = observer(({ app, c }: { app: HubSt; c: CustomPanelRef }) => {
         void (async () => {
             try {
                 // repo-defined editor module, served by the media API
-                mod = (await import(`/media/${c.url}`)) as Record<string, unknown>
+                mod = (await import(app.url(`/media/${c.url}`))) as Record<string, unknown>
                 if (typeof mod.mount !== 'function') throw new Error(`${c.url} must export mount(el, api)`)
                 if (!dead) await (mod.mount as (el: HTMLElement, api: unknown) => unknown)(host, api)
             } catch (e) {
@@ -357,7 +357,7 @@ const PanelHost = observer(({ app, c }: { app: HubSt; c: CustomPanelRef }) => {
 // floating panels sit ON the canvas (drag by the title bar), so toggling
 // them never reflows the stage — canvas size/position survive tab switches
 const FloatPanel = observer(({ app, id, title, dx, dy, anchor, children }: {
-    app: HubSt; id: string; title: string; dx: number; dy: number; anchor?: 'tl' | 'bl'; children: ReactNode
+    app: RepoSt; id: string; title: string; dx: number; dy: number; anchor?: 'tl' | 'bl'; children: ReactNode
 }) => {
     const m = app.media
     const ref = useRef<HTMLDivElement>(null)
@@ -408,7 +408,7 @@ const FloatPanel = observer(({ app, id, title, dx, dy, anchor, children }: {
     )
 })
 
-export const FloatPanels = observer(({ app }: { app: HubSt }) => {
+export const FloatPanels = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const customs = (m.detail?.asset.custom ?? []).filter((c) => m.tools.has(`c:${c.id}`))
     const showJson = m.tools.has('json')

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

@@ -1,8 +1,9 @@
-// WHEN A CHECK RUNS NEXT, as a true statement. Nothing runs a check on a clock
-// except the hub's daily health pass (serve/health-schedule.ts), so the answer
-// is read off where the check runs (`when`), what it remembers, and that one
-// timer. Pure, so every case is pinned by a test rather than a screenshot.
-import type { Schedule, CheckFacts } from './hub-types.ts'
+// WHEN A CHECK RUNS NEXT, as a true statement. Nothing runs a check nobody
+// asked for but the plan (plan/planner.ts), so the answer is where the check
+// runs (`when`) and its row of that plan. Pure, so every case is pinned by a
+// test rather than a screenshot.
+import type { PlanRow } from '../../plan/planner.ts'
+import type { CheckFacts } from './hub-types.ts'
 
 export type NextRun = {
     /** the value the page shows */
@@ -37,32 +38,25 @@ export function spanWords(ms: number): string {
     return `${Math.round(ms / 1000)}s`
 }
 
-export type NextRunFacts = Pick<CheckFacts, 'when' | 'whenReason'> & { keepsUntil?: number | null }
+export type NextRunFacts = Pick<CheckFacts, 'when' | 'whenReason'>
 
-export function nextRun(u: NextRunFacts, s: Schedule | null, now: number): NextRun {
-    if (u.when === 'always')
-        return { words: 'next shipkit ci', at: null, help: 'it runs on every `shipkit ci` and in every health pass. A cached answer is used when nothing it depends on moved' }
-    if (u.when === 'release')
-        return { words: 'before a release', at: null, help: '`shipkit ci --full` and the release path run it, and so does the health pass. The quick gate you run while working does not' }
+/** a plan row in a few words: why it is due, or what makes it due */
+export function planWords(row: PlanRow, now: number): { words: string; at: number | null } {
+    if (row.state === 'running') return { words: 'running now', at: row.dueAt }
+    if (row.state === 'due') return { words: row.reason === 'asked' ? 'due now, asked' : row.reason === 'changed' ? 'due now, a save moved it' : 'due now', at: row.dueAt }
+    if (row.state === 'late') return { words: 'waits for the repo to be active', at: row.dueAt }
+    if (row.state === 'next' && row.dueAt != null) return { words: `in ${aheadWords(row.dueAt - now)}`, at: row.dueAt }
+    return { words: 'on the next save that moves what it reads', at: null }
+}
+
+export function nextRun(u: NextRunFacts, row: PlanRow | null, now: number): NextRun {
     if (u.when === 'off')
         return { words: u.whenReason != null && u.whenReason !== '' ? `never: ${u.whenReason}` : 'never', at: null, help: 'it is off: nothing runs it until the switch below puts it somewhere' }
-    if (s == null)
-        return { words: 'next health pass', at: null, help: 'this hub runs no daily timer, so it runs when `shipkit check` runs or when you press run the health pass' }
-    if (s.running) return { words: 'running now', at: now, help: 'the daily health pass is running right now' }
-    const pass = Math.max(now, s.nextAt)
-    const keeps = u.keepsUntil ?? null
-    if (keeps != null && keeps > pass) {
-        const k = Math.ceil((keeps - pass) / s.everyMs)
-        const at = pass + k * s.everyMs
-        return {
-            words: `in ${aheadWords(at - now)}`,
-            at,
-            help: `the health pass runs every ${spanWords(s.everyMs)}, and uses this check's cached answer until it runs out. The first pass after that runs it again`,
-        }
-    }
-    return {
-        words: pass <= now ? 'due now' : `in ${aheadWords(pass - now)}`,
-        at: pass,
-        help: `the next health pass: the hub runs it every ${spanWords(s.everyMs)} while it serves, and at startup when the last one is older than that`,
-    }
+    if (u.when === 'release')
+        return { words: 'before a release', at: null, help: '`shipkit ci --full` and the release path run it. The plan and the quick gate you run while working do not' }
+    if (row == null)
+        return { words: u.when === 'always' ? 'next shipkit ci' : 'next shipkit check', at: null, help: 'no plan covers it here, so it runs when a terminal or a button runs it' }
+    const w = planWords(row, now)
+    const inactive = row.state === 'late' || !row.active ? ` While the repo is inactive: ${row.inactive}.` : ''
+    return { words: w.words, at: w.at, help: `planned by: ${row.rule}.${inactive}${row.error != null ? ` Error: ${row.error}.` : ''} A shipkit ci or check from a terminal runs it too` }
 }

package/src/serve/hub-app/palette-st.ts

@@ -0,0 +1,92 @@
+// the one picker of the page (cmd+k, keys.ts), a node of the root: the
+// home's places (home, planned, activity) first, then the shown repo's own jump
+// targets, then every other house repo as a place to go. Another repo's
+// resources are never listed: a jump to a repo selects it in place, and its
+// own targets are one more cmd+k away.
+import { makeAutoObservable } from 'mobx'
+import type { HomeSt } from './home-st.ts'
+import type { Jump } from './repo-st.ts'
+
+/** how many rows the picker shows */
+export const PAL_ROWS = 12
+
+export class PaletteSt {
+    open = false
+    query = ''
+    idx = 0
+
+    constructor(private st: HomeSt) {
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    /** the home's places, first in the list: a hub of its own has none */
+    get places(): Jump[] {
+        const st = this.st
+        if (st.machine == null) return []
+        return [
+            { id: 'place:home', label: 'home', section: 'place', face: { place: 'home' }, run: () => st.navigate('/') },
+            { id: 'place:planned', label: 'planned', section: 'place', face: { place: 'planned' }, run: () => st.navigate('/planned') },
+            { id: 'place:activity', label: 'activity', section: 'place', face: { place: 'activity' }, run: () => st.navigate('/activity') },
+            { id: 'place:archived', label: 'archived', section: 'place', face: { place: 'archived' }, run: () => st.navigate('/archived') },
+        ]
+    }
+
+    /** every house repo but the one on screen, as a place to go: on a
+     *  global page that is every repo */
+    get others(): Jump[] {
+        const st = this.st
+        if (st.machine == null) return []
+        const on = st.shown?.key
+        return st.projects.list.filter((p) => p.name !== on).map((p) => ({ id: `repo:${p.name}`, label: p.name, section: 'repo', face: { repo: p.name }, run: () => st.select(p.name) }))
+    }
+
+    get jumps(): Jump[] {
+        return [...this.places, ...(this.st.shown?.jumps ?? []), ...this.others]
+    }
+
+    /** ranked: prefix matches first, then substring. With no query, home,
+     *  planned and activity, then the shown repo's first targets, then every other repo,
+     *  so a jump elsewhere is always in reach */
+    get results(): Jump[] {
+        const q = this.query.trim().toLowerCase()
+        if (q === '') {
+            const own = this.st.shown?.jumps ?? []
+            const places = this.places
+            const others = this.others
+            return [...places, ...own.slice(0, Math.max(4, PAL_ROWS - places.length - others.length)), ...others]
+        }
+        const pre: Jump[] = []
+        const sub: Jump[] = []
+        for (const j of this.jumps) {
+            const l = j.label.toLowerCase()
+            if (l.startsWith(q)) pre.push(j)
+            else if (l.includes(q)) sub.push(j)
+        }
+        return [...pre, ...sub].slice(0, PAL_ROWS * 2)
+    }
+
+    toggle(): void {
+        this.open = !this.open
+        this.query = ''
+        this.idx = 0
+    }
+    close(): void {
+        this.open = false
+    }
+    setQuery(v: string): void {
+        this.query = v
+        this.idx = 0
+    }
+    setIdx(n: number): void {
+        this.idx = n
+    }
+    move(d: number): void {
+        const n = this.results.length
+        if (n > 0) this.idx = (this.idx + d + n) % n
+    }
+    run(j: Jump | undefined = this.results[this.idx]): void {
+        if (j == null) return
+        this.open = false
+        j.run()
+    }
+}

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

@@ -0,0 +1,47 @@
+// the one picker, cmd+k (palette-st.ts): home, planned, activity and
+// archived, the shown repo's targets, then every other repo. A place wears
+// its button's icon, a repo its own icon, as the project list shows them.
+import { observer } from 'mobx-react-lite'
+import type { HomeSt } from './home-st.ts'
+import { Icon, ICON } from './icons.tsx'
+import { Face } from './project-list.tsx'
+import type { JumpFace } from './repo-st.ts'
+
+/** the icon a picker entry wears; an empty slot keeps the labels aligned */
+const PalFace = observer(({ app, face }: { app: HomeSt; face: JumpFace | undefined }) => {
+    if (face != null && 'place' in face) return <span className="pface"><Icon d={ICON[face.place]} /></span>
+    const p = face == null ? null : app.projects.list.find((x) => x.name === face.repo) ?? null
+    return <span className="pface">{p == null ? null : <Face p={p} px={16} />}</span>
+})
+
+export const Palette = observer(({ app }: { app: HomeSt }) => {
+    const p = app.palette
+    if (!p.open) return null
+    return (
+        <div className="palov" onClick={() => p.close()}>
+            <div className="pal" onClick={(e) => e.stopPropagation()}>
+                <input autoFocus placeholder="jump to…" value={p.query}
+                    onChange={(e) => p.setQuery(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'ArrowDown') { e.preventDefault(); p.move(1) }
+                        else if (e.key === 'ArrowUp') { e.preventDefault(); p.move(-1) }
+                        else if (e.key === 'Enter') p.run()
+                        else if (e.key === 'Escape') p.close()
+                    }} />
+                <div className="prows">
+                    {p.results.map((jp, n) => (
+                        <div key={jp.id} className={`prow${n === p.idx ? ' on' : ''}`}
+                            onMouseEnter={() => p.setIdx(n)}
+                            onClick={() => p.run(jp)}>
+                            <PalFace app={app} face={jp.face} />
+                            <span className="plabel">{jp.label}</span>
+                            <span className="pchip">{jp.section}</span>
+                            {jp.key == null ? null : <kbd className="pjkey">{jp.key}</kbd>}
+                        </div>
+                    ))}
+                    {p.results.length === 0 ? <div className="prow none">no match</div> : null}
+                </div>
+            </div>
+        </div>
+    )
+})

package/src/serve/hub-app/pill-row.tsx

@@ -0,0 +1,65 @@
+// a row of small boxes that stays one row at any width: the ones that do not
+// fit fold into a `+N` box at its end, whose hover lists them. An invisible
+// copy of every box, out of the flow, gives their widths, so what shows is
+// decided before the paint and never wraps. Each box's hover is its title.
+import { observer, useLocalObservable } from 'mobx-react-lite'
+import { useLayoutEffect, useRef, type ReactNode } from 'react'
+import { Tip } from './floating.tsx'
+
+export type PillItem = { key: string; node: ReactNode; title: string }
+
+/** how many boxes of these widths fit in `avail`, a `+N` box of `plusW`
+ *  taking its room as soon as one does not */
+export function fitCount(widths: number[], avail: number, plusW: number, gap: number): number {
+    const all = widths.reduce((a, w) => a + w, 0) + gap * Math.max(0, widths.length - 1)
+    if (all <= avail) return widths.length
+    let used = plusW
+    for (let i = 0; i < widths.length; i++) {
+        used += widths[i]! + gap
+        if (used > avail) return i
+    }
+    return widths.length
+}
+
+const lines = (text: string): ReactNode => text.split('\n').map((l, i) => <div key={i}>{l}</div>)
+
+export const PillRow = observer(({ items, className }: { items: PillItem[]; className?: string }) => {
+    const st = useLocalObservable(() => ({ n: Number.POSITIVE_INFINITY, set(v: number) { this.n = v } }))
+    const box = useRef<HTMLDivElement | null>(null)
+    const probe = useRef<HTMLDivElement | null>(null)
+    const measure = (): void => {
+        const b = box.current
+        const p = probe.current
+        if (b == null || p == null) return
+        const kids = [...p.children] as HTMLElement[]
+        const plus = kids.pop()
+        if (plus == null) return
+        const gap = Number.parseFloat(getComputedStyle(b).columnGap) || 0
+        st.set(fitCount(kids.map((k) => k.getBoundingClientRect().width), b.clientWidth, plus.getBoundingClientRect().width, gap))
+    }
+    // after every render: the boxes' words change with the clock
+    useLayoutEffect(measure)
+    useLayoutEffect(() => {
+        const b = box.current
+        if (b == null || typeof ResizeObserver === 'undefined') return
+        const ro = new ResizeObserver(() => measure())
+        ro.observe(b)
+        return () => ro.disconnect()
+    }, [])
+    const n = Math.min(st.n, items.length)
+    const hidden = items.slice(n)
+    return (
+        <div ref={box} className={`pchips${className == null ? '' : ` ${className}`}`}>
+            {items.slice(0, n).map((it) => <Tip key={it.key} className="pchipw" content={lines(it.title)}>{it.node}</Tip>)}
+            {hidden.length === 0 ? null : (
+                <Tip className="pchipw" content={hidden.map((h) => <div key={h.key}>{lines(h.title)}</div>)}>
+                    <span className="pchip dim">+{hidden.length}</span>
+                </Tip>
+            )}
+            <div ref={probe} className="pchips pchipprobe" aria-hidden="true">
+                {items.map((it) => <span key={it.key} className="pchipw">{it.node}</span>)}
+                <span className="pchip dim">+{items.length}</span>
+            </div>
+        </div>
+    )
+})

package/src/serve/hub-app/planned-st.ts

@@ -0,0 +1,107 @@
+// the planned page's state: the machine's one plan as the daemon answers it,
+// as ONE list ordered by time (now, next), filtered by a text that
+// matches the project or the check. A check that only waits for a save has no
+// time, so it is not listed. The order and every word a row says are pure
+// functions, so a test pins them rather than a screenshot.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { PlannedAnswer } from '../../home/home-routes.ts'
+import type { PlanRow } from '../../plan/planner.ts'
+import { sectionOf, timeline, titleWords, waitingRows, waitingWords } from '../../plan/plan-timeline.ts'
+import type { HomeSt } from './home-st.ts'
+
+export const PLANNED_POLL_MS = 1_000
+
+export * from '../../plan/plan-timeline.ts'
+
+export class PlannedSt {
+    data: PlannedAnswer | null = null
+    error = ''
+    /** the text filter, the `?q=` of /planned: every word must be in the project or the check */
+    query = ''
+    /** the checks waiting for their repo to be active, listed under their line */
+    waitingOpen = false
+    private timer: ReturnType<typeof setInterval> | null = null
+
+    constructor(private st: HomeSt) {
+        makeAutoObservable<this, 'st' | 'timer'>(this, { st: false, timer: false, data: observableRef })
+    }
+
+    get rows() {
+        return timeline(this.data?.rows ?? [], this.query)
+    }
+
+    /** the checks waiting for their repo to be active, the filter applied */
+    get waiting(): PlanRow[] {
+        return waitingRows(this.data?.rows ?? [], this.query)
+    }
+
+    /** their one line, or '' */
+    get waitingLine(): string {
+        return waitingWords(this.data?.rows ?? [], this.query)
+    }
+
+    toggleWaiting(): void {
+        this.waitingOpen = !this.waitingOpen
+    }
+
+    /** how many checks have a time of their own, filter aside */
+    get timed(): number {
+        return (this.data?.rows ?? []).filter((r) => sectionOf(r) != null).length
+    }
+
+    /** the address of the plan with this filter */
+    get address(): string {
+        const q = this.query.trim()
+        return q === '' ? '/planned' : `/planned?q=${encodeURIComponent(q)}`
+    }
+
+    /** a keystroke in the filter: the url follows, in place */
+    setQuery(q: string): void {
+        this.query = q
+        if (this.st.page === 'planned') window.history.replaceState(null, '', this.address)
+    }
+
+    /** the project name: that repo, in place */
+    openRepo(repo: string): void {
+        this.st.select(repo)
+    }
+
+    openCheck(repo: string, check: string): void {
+        this.st.openCheck(repo, check)
+    }
+
+    /** the check's title as its repo's hub names it, once that hub was read */
+    titleOf(repo: string, check: string): string | null {
+        const t = this.st.repos.get(repo)?.cols.find('checks', `check:${check}`)?.title ?? null
+        return titleWords(t, check)
+    }
+
+    async poll(): Promise<void> {
+        try {
+            const r = await fetch('/api/home/planned.json', { signal: AbortSignal.timeout(8_000) })
+            if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
+            const j = (await r.json()) as PlannedAnswer
+            runInAction(() => { this.data = j; this.error = '' })
+        } catch (e) {
+            runInAction(() => { this.error = (e as Error).message })
+        }
+    }
+
+    async run(row: PlanRow): Promise<void> {
+        const r = await fetch('/api/home/planned/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ repo: row.repo, check: row.check }) })
+        if (!r.ok) runInAction(() => { this.error = `run ${row.check}: ${r.status} ${r.statusText}` })
+        await this.poll()
+    }
+
+    /** polls while the plan is the page shown */
+    start(): void {
+        if (this.timer != null) return
+        void this.poll()
+        this.timer = setInterval(() => void this.poll(), PLANNED_POLL_MS)
+    }
+
+    stop(): void {
+        if (this.timer != null) clearInterval(this.timer)
+        this.timer = null
+    }
+}

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

@@ -0,0 +1,114 @@
+// `/planned`: every check the machine runs on its own time, in ONE list
+// ordered by time under two small labels (now, next), then one quiet line
+// counting the checks that wait for their repo to be active, which opens on a
+// click. A row says
+// when, which project and check, and one mark; everything else (the rule,
+// the reason, the last result, the inactive policy, an error, run now) is in
+// the card that floats over the row on hover. The project opens its repo in
+// place, the check opens its own page in that repo.
+import { observer } from 'mobx-react-lite'
+import type { CSSProperties, MouseEvent, ReactNode } from 'react'
+import type { PlanRow } from '../../plan/planner.ts'
+import { Tip } from './floating.tsx'
+import type { HomeSt } from './home-st.ts'
+import { checkAddress, plainClick, repoPage } from './home-st.ts'
+import { LAST_TONE, markOf, reasonWords, whenWords, type Section } from './planned-st.ts'
+import { ageWords, stampWords } from './time-ago.tsx'
+
+/** a link that works as one (a new tab on cmd+click) and moves in place on a plain click */
+const InPlace = ({ href, className, go, children }: { href: string; className: string; go: () => void; children: ReactNode }) => (
+    <a className={className} href={href} onClick={(e: MouseEvent) => {
+        if (!plainClick(e)) return
+        e.preventDefault()
+        go()
+    }}>{children}</a>
+)
+
+/** the repo's rail icon, or nothing */
+const Face = observer(({ app, repo }: { app: HomeSt; repo: string }) => {
+    const icon = app.projects.list.find((p) => p.name === repo)?.icon ?? null
+    return icon == null ? null : <img className="plface" src={icon} alt="" width={14} height={14} draggable={false} />
+})
+
+/** one line of the card: a dim label and its value */
+const Line = ({ k, children }: { k: string; children: ReactNode }) => (
+    <div className="plkv"><span>{k}</span><span>{children}</span></div>
+)
+
+const Card = observer(({ app, r, now }: { app: HomeSt; r: PlanRow; now: number }) => {
+    const st = app.planned
+    const title = st.titleOf(r.repo, r.check)
+    const running = r.state === 'running'
+    return (
+        <div className="plcardin">
+            <div className="plct">{r.repo} · {r.check}{title != null ? <span className="pldim"> {title}</span> : null}</div>
+            {r.error != null ? <div className="plerr">{r.error}</div> : null}
+            <Line k="when">{r.dueAt == null ? whenWords(r, now) : `${whenWords(r, now)}, ${stampWords(r.dueAt)}`}</Line>
+            {r.reason != null ? <Line k="why">{reasonWords(r)}</Line> : null}
+            <Line k="rule">{r.rule}</Line>
+            <Line k="inactive">{r.active ? r.inactive : `repo inactive: ${r.inactive}`}</Line>
+            <Line k="last">
+                {r.last == null ? 'never ran' : (
+                    <span className={`l-${LAST_TONE[r.last.status]}`}>
+                        {r.last.status}, {ageWords(r.last.at, now)}{r.last.streak > 1 ? `, ${r.last.streak} in a row` : ''}
+                    </span>
+                )}
+            </Line>
+            <button className="plgo" disabled={running} onClick={() => void st.run(r)}>{running ? 'running' : 'run now'}</button>
+        </div>
+    )
+})
+
+const Row = observer(({ app, r, now }: { app: HomeSt; r: PlanRow; now: number }) => {
+    const st = app.planned
+    const m = markOf(r)
+    const colour = { '--pc': app.projects.identityOf(r.repo).colorDark } as CSSProperties
+    return (
+        <Tip className={`plr m-${m.mark}`} content={<Card app={app} r={r} now={now} />} tipClass="plcard" placement="right-start" fallbacks={['bottom-end', 'top-end']} interactive>
+            <span className="plwhen">{whenWords(r, now)}</span>
+            <span className="plwhat">
+                <InPlace className="plrepo" href={repoPage(r.repo)} go={() => st.openRepo(r.repo)}>
+                    <Face app={app} repo={r.repo} />
+                    <span style={colour}>{r.repo}</span>
+                </InPlace>
+                <span className="pldim"> · </span>
+                <InPlace className="plcheck" href={checkAddress(r.repo, r.check)} go={() => st.openCheck(r.repo, r.check)}>{r.check}</InPlace>
+            </span>
+            <span className="plmark">
+                {m.mark === 'running' ? <i className="spin" /> : <i className={`plsym s-${m.mark}`} />}
+                {m.words !== '' ? <span>{m.words}</span> : null}
+            </span>
+        </Tip>
+    )
+})
+
+export const PlannedView = observer(({ app }: { app: HomeSt }) => {
+    const st = app.planned
+    const d = st.data
+    const now = d?.now ?? Date.now()
+    let prev: Section | null = null
+    return (
+        <div className="hall planned">
+            <input className="plfind" type="search" placeholder="filter" aria-label="filter by project or check" value={st.query} onChange={(e) => st.setQuery(e.currentTarget.value)} />
+            {st.error !== '' ? <div className="hnote">{st.error}</div> : null}
+            {(d?.held ?? []).map((h) => <div key={h} className="pldim">{h}</div>)}
+            {(d?.errors ?? []).map((e) => <div key={e.repo} className="hnote">{e.repo}: {e.error}</div>)}
+            <div className="pllist">
+                {st.rows.flatMap(({ section, row }) => {
+                    const item = <Row key={`${row.repo}\0${row.check}`} app={app} r={row} now={now} />
+                    if (section === prev) return [item]
+                    prev = section
+                    return [<div key={`s:${section}`} className="plsec">{section}</div>, item]
+                })}
+                {d == null ? <div className="pldim">loading…</div> : st.rows.length === 0 ? <div className="pldim">{st.timed === 0 ? 'nothing is planned' : 'nothing matches'}</div> : null}
+            </div>
+            {st.waitingLine !== '' ? (
+                <div className="plwait">
+                    <button className="plwaitline" aria-expanded={st.waitingOpen} onClick={() => st.toggleWaiting()}>{st.waitingOpen ? '▾' : '▸'} {st.waitingLine}</button>
+                    {st.waitingOpen ? <div className="pllist">{st.waiting.map((r) => <Row key={`${r.repo}\0${r.check}`} app={app} r={r} now={now} />)}</div> : null}
+                </div>
+            ) : null}
+            <p className="hdim">in the console: shipkit planned</p>
+        </div>
+    )
+})