rvlib-shipkit 1.2.0 → 1.3.0

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

@@ -0,0 +1,168 @@
+// the activity page's state: what every house repo committed in a window and
+// what it holds uncommitted, as the daemon reads it from local git. It asks
+// again every ACTIVITY_POLL_MS, only while the page is shown AND the tab is
+// visible, so a page left in the background costs the daemon nothing. The
+// window and the commit cap are remembered per viewer.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import { clampCap, DEFAULT_CAP, DEFAULT_MINUTES, idleRow, WINDOW_MINUTES, type ActivityAnswer, type ActivityRow } from '../../home/activity-shape.ts'
+
+// the words the page and `shipkit cross-repo-activity` share live beside the shapes
+export { ageShort, CAP_MAX, CAP_MIN, clampCap, DEFAULT_CAP, dirtWords, filesWords, upstreamWords, windowWords } from '../../home/activity-shape.ts'
+import type { HomeSt } from './home-st.ts'
+
+export const ACTIVITY_POLL_MS = 60_000
+const MINUTES_KEY = 'home:activity:minutes'
+const CAP_KEY = 'home:activity:cap'
+
+/** busy rows in the daemon's (rail) order, then the quiet ones below them */
+export function splitRows(rows: ActivityRow[]): { busy: ActivityRow[]; idle: ActivityRow[] } {
+    return { busy: rows.filter((r) => !idleRow(r)), idle: rows.filter(idleRow) }
+}
+
+function kept(key: string): string | null {
+    try {
+        return globalThis.localStorage?.getItem(key) ?? null
+    } catch {
+        return null
+    }
+}
+function keptMinutes(): number {
+    const n = Number(kept(MINUTES_KEY))
+    return (WINDOW_MINUTES as readonly number[]).includes(n) ? n : DEFAULT_MINUTES
+}
+function keep(key: string, n: number): void {
+    try { globalThis.localStorage?.setItem(key, String(n)) } catch { /* private window: the pick lasts the tab */ }
+}
+
+export class ActivitySt {
+    data: ActivityAnswer | null = null
+    error = ''
+    minutes: number = keptMinutes()
+    /** the most commits a repo shows before a click shows the rest */
+    cap: number = clampCap(kept(CAP_KEY) ?? DEFAULT_CAP)
+    /** repos whose commits all show, past the cap */
+    expanded = new Set<string>()
+    /** repos whose failing and warning checks show under their row */
+    checksOpen = new Set<string>()
+    /** a read is in flight */
+    loading = false
+    /** when the next read goes, epoch ms */
+    nextAt = 0
+    /** the page's clock, one tick a second while shown */
+    now = Date.now()
+    private timer: ReturnType<typeof setInterval> | null = null
+    private gen = 0
+    /** a tab coming back reads only when its countdown is already due */
+    private readonly onVisible = (): void => {
+        if (this.timer != null) this.tick()
+    }
+
+    constructor(private st: HomeSt) {
+        makeAutoObservable<this, 'st' | 'timer' | 'gen' | 'onVisible'>(this, { st: false, timer: false, gen: false, onVisible: false, data: observableRef })
+    }
+
+    get rows() {
+        return splitRows(this.data?.rows ?? [])
+    }
+
+    /** the answer shown is for another window than the one picked: it dims until the new one lands */
+    get stale(): boolean {
+        return this.data != null && this.data.minutes !== this.minutes
+    }
+
+    /** whole seconds to the next read */
+    get countdown(): number {
+        return Math.max(0, Math.ceil((this.nextAt - this.now) / 1000))
+    }
+
+    setMinutes(m: number): void {
+        this.minutes = m
+        keep(MINUTES_KEY, m)
+        void this.poll()
+    }
+
+    /** a typed cap, clamped to CAP_MIN..CAP_MAX */
+    setCap(v: unknown): void {
+        this.cap = clampCap(v)
+        keep(CAP_KEY, this.cap)
+    }
+
+    toggle(name: string): void {
+        if (this.expanded.has(name)) this.expanded.delete(name)
+        else this.expanded.add(name)
+    }
+
+    /** a click on the status dot: its checks show under the row, or hide */
+    toggleChecks(name: string): void {
+        if (this.checksOpen.has(name)) this.checksOpen.delete(name)
+        else this.checksOpen.add(name)
+    }
+
+    openCheck(repo: string, check: string): void {
+        this.st.openCheck(repo, check)
+    }
+
+    /** the repo in Fork, the git client: the daemon opens it by name */
+    async openFork(name: string): Promise<void> {
+        try {
+            const r = await fetch('/api/projects/fork', { 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} in Fork: ${(e as Error).message}` })
+        }
+    }
+
+    openRepo(name: string): void {
+        this.st.select(name)
+    }
+
+    /** the refresh button: a new git pass now, whatever the countdown says */
+    refresh(): void {
+        if (!this.loading) void this.poll(true)
+    }
+
+    /** one read. The daemon shares an answer younger than its ttl between
+     *  readers and never serves an older one; only `fresh` forces a pass */
+    async poll(fresh = false): Promise<void> {
+        const id = ++this.gen
+        runInAction(() => { this.loading = true; this.nextAt = Date.now() + ACTIVITY_POLL_MS })
+        try {
+            const r = await fetch(`/api/home/activity.json?m=${this.minutes}${fresh ? '&fresh=1' : ''}`, { signal: AbortSignal.timeout(30_000) })
+            if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
+            const j = (await r.json()) as ActivityAnswer
+            runInAction(() => { if (id === this.gen) { this.data = j; this.error = '' } })
+        } catch (e) {
+            runInAction(() => { if (id === this.gen) this.error = (e as Error).message })
+        } finally {
+            // the countdown starts when the answer lands, so reads never overlap
+            runInAction(() => { if (id === this.gen) { this.loading = false; this.nextAt = Date.now() + ACTIVITY_POLL_MS } })
+        }
+    }
+
+    /** one tick a second: the countdown moves, and a due read goes, unless
+     *  the tab is hidden (the daemon reads git only for a viewer) */
+    private tick(): void {
+        this.now = Date.now()
+        if (this.loading || this.now < this.nextAt) return
+        if (typeof document !== 'undefined' && document.visibilityState === 'hidden') return
+        void this.poll()
+    }
+
+    /** reads while the page is shown */
+    start(): void {
+        if (this.timer != null) return
+        void this.poll()
+        this.timer = setInterval(() => this.tick(), 1_000)
+        document.addEventListener('visibilitychange', this.onVisible)
+    }
+
+    stop(): void {
+        if (this.timer == null) return
+        clearInterval(this.timer)
+        this.timer = null
+        this.gen++
+        this.loading = false
+        document.removeEventListener('visibilitychange', this.onVisible)
+    }
+}

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

@@ -0,0 +1,218 @@
+// `/activity`: what every house repo committed in the window and what it holds
+// uncommitted, as ONE table with a row group per repo, so a glance says which
+// agents did what. Each commit carries its own state (↑ orange unpushed, ✓
+// green pushed), uncommitted work is a red line above the commits, the branch
+// is green on main and orange elsewhere. On top: the window, the commit cap
+// (a number, 1 to 15), then when the next read goes. Repos with nothing in the
+// window sit below the busy ones, each with its last commit in grey.
+import { observer } from 'mobx-react-lite'
+import type { ReactNode } from 'react'
+import { idleRow, isMainBranch, WINDOW_MINUTES, type ActivityCommit, type ActivityRow, type StatusCheck } from '../../home/activity-shape.ts'
+import { ageShort, CAP_MAX, CAP_MIN, dirtWords, filesWords, upstreamWords, windowWords } from './activity-st.ts'
+import { Tip } from './floating.tsx'
+import { Icon, ICON } from './icons.tsx'
+import type { HomeSt } from './home-st.ts'
+import { checkAddress, plainClick, repoPage } from './home-st.ts'
+import { stampWords } from './time-ago.tsx'
+
+/** the repo's icon and name; a plain click selects it in place */
+const RepoName = observer(({ app, name }: { app: HomeSt; name: string }) => {
+    const icon = app.projects.list.find((p) => p.name === name)?.icon ?? null
+    return (
+        <a className="acrepo" href={repoPage(name)} onClick={(e) => {
+            if (!plainClick(e)) return
+            e.preventDefault()
+            app.activity.openRepo(name)
+        }}>
+            {icon == null ? null : <img src={icon} alt="" width={14} height={14} draggable={false} />}
+            <span>{name}</span>
+        </a>
+    )
+})
+
+/** a bar of exclusive buttons */
+const Bar = <T extends number>({ label, values, value, words, set }: { label: string; values: readonly T[]; value: number; words: (v: T) => string; set: (v: T) => void }) => (
+    <div className="acwin" role="radiogroup" aria-label={label}>
+        {values.map((v) => (
+            <button key={v} role="radio" aria-checked={value === v} className={value === v ? 'on' : ''} onClick={() => set(v)}>{words(v)}</button>
+        ))}
+    </div>
+)
+
+/** when the next read goes; it spins while one runs */
+const Next = observer(({ app }: { app: HomeSt }) => {
+    const st = app.activity
+    return (
+        <button type="button" className="acnext acpill" disabled={st.loading} onClick={() => st.refresh()}
+            title="read every repo now · the page reads them again every minute while it is shown">
+            <span className={`acring${st.loading ? ' on' : ''}`}>↻</span>
+            {st.loading ? '' : ` ${st.countdown}s`}
+        </button>
+    )
+})
+
+/** one commit's cells; `old` is the last one, from before the window */
+const Commit = ({ c, now, old }: { c: ActivityCommit; now: number; old: boolean }) => (
+    <>
+        <td className="acsha">{c.sha}</td>
+        <td className="acwhen" title={stampWords(c.at)}>{ageShort(c.at, now)}</td>
+        <td className={`actitle ${c.pushed ? 'pushed' : 'unpushed'}${old ? ' old' : ''}`} title={`${old ? 'the last commit, before the window. ' : ''}${c.pushed ? 'pushed' : 'not pushed'}: ${c.title}`}>
+            <span className="acmark">{c.pushed ? '✓' : '↑'}</span>
+            {c.branch == null ? null : <span className="acside">{c.branch}</span>}
+            {c.title}
+        </td>
+        <td className="acwho">{c.author}</td>
+    </>
+)
+
+/** the checks behind a red or orange dot, failing first. An answer from
+ *  a daemon that sends no `failing` still names them, by id */
+export const failingOf = (r: ActivityRow): StatusCheck[] => {
+    if (r.failing != null) return r.failing
+    const c = r.status
+    if (c == null) return []
+    const one = (id: string, status: 'fail' | 'warn'): StatusCheck => ({ id, title: id, status, at: c.since[id] ?? null, line: '' })
+    return [...c.reds.map((id) => one(id, 'fail')), ...c.warns.map((id) => one(id, 'warn'))]
+}
+
+/** each failing and warning check: its id (a link to its page), its title,
+ *  how old that outcome is, and the first line it printed about it */
+export const CheckList = observer(({ app, r }: { app: HomeSt; r: ActivityRow }) => {
+    const now = app.activity.now
+    return (
+        <ul className="acchecks">
+            {failingOf(r).map((c) => (
+                <li key={c.id} className={c.status === 'fail' ? 'fail' : 'warn'}>
+                    <span className="acchkhead">
+                        <span className="acchkmark">{c.status === 'fail' ? '✗' : '!'}</span>
+                        <a className="acchkid" href={checkAddress(r.name, c.id)} onClick={(e) => {
+                            if (!plainClick(e)) return
+                            e.preventDefault()
+                            app.activity.openCheck(r.name, c.id)
+                        }}>{c.id}</a>
+                        {c.title !== c.id ? <span className="acchktitle">{c.title}</span> : null}
+                        {c.at == null ? null : <span className="acdim" title={stampWords(c.at)}>{ageShort(c.at, now)}</span>}
+                    </span>
+                    {c.line === '' ? null : <span className="acchkline">{c.line}</span>}
+                </li>
+            ))}
+        </ul>
+    )
+})
+
+/** the repo's checks as its own run record last saw them, only the ids it
+ *  declares today: one dot, red, orange or green, with the count behind it.
+ *  Hovering it floats the failing and warning checks; a click lists them
+ *  under the row, so they read without hover too */
+const Status = observer(({ app, r, span }: { app: HomeSt; r: ActivityRow; span: number }) => {
+    const c = r.status
+    if (c == null) return (
+        <td rowSpan={span} className="acstatus acdim">
+            <Tip content="no shipkit run recorded in this repo yet" placement="right">·</Tip>
+        </td>
+    )
+    const n = c.state === 'red' ? c.reds.length : c.state === 'orange' ? c.warns.length : 0
+    const tone = c.state === 'red' ? 'red' : c.state === 'orange' ? 'warn' : 'ok'
+    if (c.reds.length + c.warns.length === 0) return (
+        <td rowSpan={span} className={`acstatus t-${tone}`}>
+            <Tip content="every check passed on its last run" placement="right">●</Tip>
+        </td>
+    )
+    const open = app.activity.checksOpen.has(r.name)
+    return (
+        <td rowSpan={span} className={`acstatus t-${tone}`}>
+            <Tip content={<CheckList app={app} r={r} />} tipClass="acchktip" interactive placement="right-start" fallbacks={['bottom-start', 'left-start']}>
+                <button type="button" className={`acdot t-${tone}`} aria-expanded={open} aria-label={`${r.name}: ${c.reds.length} failing, ${c.warns.length} warning, click to ${open ? 'hide' : 'list'} them`}
+                    onClick={() => app.activity.toggleChecks(r.name)}>
+                    ●{n > 0 ? ` ${n}` : ''}
+                </button>
+            </Tip>
+        </td>
+    )
+})
+
+const Group = observer(({ app, r, now }: { app: HomeSt; r: ActivityRow; now: number }) => {
+    const st = app.activity
+    const open = st.expanded.has(r.name)
+    const capped = open ? r.commits : r.commits.slice(0, st.cap)
+    const more = r.commits.length - capped.length
+    const folds = more > 0 || (open && r.commits.length > st.cap)
+    const dirt = r.error == null ? dirtWords(r) : ''
+    const lines = (dirt !== '' || r.error != null ? 1 : 0) + capped.length + (r.last != null ? 1 : 0) + (folds ? 1 : 0)
+    const span = Math.max(1, lines)
+    const branch = r.branch ?? (r.detached == null ? '' : `detached ${r.detached}`)
+    const head = (
+        <>
+            <td rowSpan={span} className="acname"><RepoName app={app} name={r.name} /></td>
+            <Status app={app} r={r} span={span} />
+            <td rowSpan={span} className={`acbranch ${isMainBranch(r.branch) ? 't-ok' : 't-warn'}`} title={`${branch}: ${upstreamWords(r)}`}>{branch}</td>
+            {/* the lead in to the commit list, on its first line */}
+            <td rowSpan={span} className="acforkcell">
+                <button type="button" className="acfork" title="open in Fork" aria-label={`open ${r.name} in Fork`} onClick={() => void st.openFork(r.name)}><Icon d={ICON.fork} /></button>
+            </td>
+        </>
+    )
+    const rows: ReactNode[] = []
+    if (r.error != null) rows.push(<td key="e" colSpan={4} className="acerr" title={r.error}>git failed: {r.error}</td>)
+    else if (dirt !== '') rows.push(
+        <td key="d" colSpan={4} className="acdirty">
+            <Tip className="acdirt" tipClass="acfiles" placement="bottom-start" content={<pre>{filesWords(r)}</pre>}>{dirt}</Tip>
+        </td>,
+    )
+    for (const c of capped) rows.push(<Commit c={c} now={now} old={false} />)
+    // nothing newer in the window: HEAD's last commit, grey
+    if (r.last != null) rows.push(<Commit c={r.last} now={now} old />)
+    if (folds) rows.push(<td key="m" colSpan={4}><button className="acmore" onClick={() => st.toggle(r.name)}>{open ? 'show fewer' : `${more} more`}</button></td>)
+    if (rows.length === 0) rows.push(<td key="n" colSpan={4} className="acdim">no commit yet</td>)
+    return (
+        <tbody className={`acgrp${idleRow(r) ? ' quiet' : ''}`}>
+            {rows.map((cells, i) => <tr key={i}>{i === 0 ? head : null}{cells}</tr>)}
+            {st.checksOpen.has(r.name) && failingOf(r).length > 0 ? <tr className="acchkrow"><td colSpan={8}><CheckList app={app} r={r} /></td></tr> : null}
+        </tbody>
+    )
+})
+
+export const ActivityView = observer(({ app }: { app: HomeSt }) => {
+    const st = app.activity
+    const d = st.data
+    const now = d?.now ?? st.now
+    const { busy, idle } = st.rows
+    return (
+        <div className="hall activity">
+            <div className="actop">
+                <Bar label="how far back" values={WINDOW_MINUTES} value={st.minutes} words={windowWords} set={(m) => st.setMinutes(m)} />
+                <label className="accap" title={`the most commits a repo shows, ${CAP_MIN} to ${CAP_MAX}`}>
+                    {/* uncontrolled while typed, so an emptied box can take a new number; it reads back the clamped cap on blur */}
+                    <input type="number" min={CAP_MIN} max={CAP_MAX} step={1} defaultValue={st.cap} aria-label="commits per repo"
+                        onChange={(e) => { if (e.currentTarget.value !== '') st.setCap(e.currentTarget.value) }}
+                        onBlur={(e) => { e.currentTarget.value = String(st.cap) }} />
+                    <span className="acdim">commits</span>
+                </label>
+                <Next app={app} />
+                {d == null ? <span className="acdim">reading every repo…</span> : (
+                    <>
+                        <span className="acpill">{busy.length} busy</span>
+                        <span className="acpill">{idle.length} quiet</span>
+                        <span className="acpill">read in {d.ms}ms</span>
+                    </>
+                )}
+            </div>
+            {st.error !== '' ? <div className="hnote">{st.error}</div> : null}
+            {d != null && busy.length === 0 ? <div className="acdim">nothing committed or uncommitted in the last {windowWords(st.minutes)}</div> : null}
+            {busy.length + idle.length === 0 ? null : (
+                <table className={`actable${st.stale ? ' stale' : ''}`}>
+                    <colgroup>
+                        <col className="c-name" /><col className="c-status" /><col className="c-branch" />
+                        <col className="c-fork" /><col className="c-sha" /><col className="c-when" /><col /><col className="c-who" />
+                    </colgroup>
+                    <thead>
+                        <tr><th>repo</th><th>status</th><th>branch</th><th colSpan={5}>commits, newest first</th></tr>
+                    </thead>
+                    {busy.map((r) => <Group key={r.name} app={app} r={r} now={now} />)}
+                    {idle.map((r) => <Group key={r.name} app={app} r={r} now={now} />)}
+                </table>
+            )}
+            <p className="hdim">in the console: shipkit activity</p>
+        </div>
+    )
+})

package/src/serve/hub-app/activity.css

@@ -0,0 +1,78 @@
+/* the activity page (activity-view.tsx): one table, a row group per repo. The
+   table is fixed width so a long title ellipses instead of scrolling the page
+   sideways; the file list floats on hover. State colours only: a branch green
+   on main, orange elsewhere; a commit orange until pushed; dirt red. */
+.activity{font-size:13px;container-type:inline-size}
+.actop{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3)}
+.acwin{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
+.acwin button{border:0;border-radius:0;padding:var(--s0) var(--s2);background:none;color:var(--dim);font-size:12px}
+.acwin button:hover{color:var(--ink);background:var(--panel2)}
+.acwin button.on{color:var(--accent);background:var(--sel)}
+.accap{display:inline-flex;align-items:center;gap:var(--s1);font-size:12px}
+.accap input{width:44px;height:22px;box-sizing:border-box;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:var(--s0) var(--s1);font:inherit;font-variant-numeric:tabular-nums}
+.accap input:focus{outline:none;border-color:var(--accent)}
+.acnext{display:inline-flex;align-items:center;min-width:40px;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
+/* the counts beside the controls, and the refresh button, as small rounded chips */
+.acpill{display:inline-flex;align-items:center;gap:var(--s1);padding:0 var(--s2);border:1px solid var(--line);border-radius:999px;background:var(--hi3);color:var(--dim);font-size:11.5px;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
+button.acpill{cursor:pointer;font:inherit;font-size:11.5px}
+button.acpill:hover:not(:disabled){color:var(--ink);border-color:var(--accent)}
+button.acpill:disabled{cursor:default}
+.acring{display:inline-block}
+.acring.on{color:var(--accent);animation:acspin 1s linear infinite}
+@keyframes acspin{to{transform:rotate(360deg)}}
+.acdim{color:var(--dim)}
+.actable{width:100%;table-layout:fixed;border-collapse:collapse}
+.actable.stale{opacity:.5}
+.actable th{text-align:left;font-weight:400;color:var(--dim);font-size:11.5px;padding:var(--s1) var(--s2);border-bottom:1px solid var(--line)}
+.actable td{padding:var(--s0) var(--s2);vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.acgrp{border-bottom:1px solid var(--line)}
+.acgrp tr:first-child td{padding-top:var(--s1)}
+.acgrp tr:last-child td{padding-bottom:var(--s1)}
+.acgrp:hover{background:var(--panel)}
+.actable{--acname-w:170px}.actable,.acchktip{--acmark-w:10px}.c-name{width:var(--acname-w)}.c-status{width:52px}.c-branch{width:150px}
+.c-sha{width:72px}.c-when{width:56px}.c-who{width:90px}
+.acrepo{display:inline-flex;align-items:center;gap:var(--s1);max-width:100%;color:var(--ink);text-decoration:none}
+.acrepo span{overflow:hidden;text-overflow:ellipsis}
+.acrepo img{flex:none;border-radius:3px;object-fit:contain}
+.acrepo:hover span{text-decoration:underline}
+.t-ok{color:var(--ok)}.t-warn{color:var(--warn)}.t-red{color:var(--red)}
+.acstatus{white-space:nowrap;font-variant-numeric:tabular-nums;cursor:default}
+/* the status dot is a button: hover floats its checks, a click lists them under the row */
+.acdot{border:0;background:none;padding:0 var(--s1);margin:0 calc(-1 * var(--s1));font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;border-radius:3px}
+.acdot:hover,.acdot[aria-expanded="true"]{background:var(--panel2)}
+.acchktip{z-index:40;max-width:560px;max-height:60vh;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 10px var(--shadow);padding:var(--s1) var(--s2);color:var(--ink);font-size:12px}
+.acchecks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1);white-space:normal}
+.acchecks li{display:flex;flex-direction:column;min-width:0}
+.acchkhead{display:flex;align-items:baseline;gap:var(--s2);min-width:0}
+.acchkmark{flex:none;width:var(--acmark-w)}
+.acchecks .fail .acchkmark,.acchecks .fail .acchkid{color:var(--red)}
+.acchecks .warn .acchkmark,.acchecks .warn .acchkid{color:var(--warn)}
+.acchkid{flex:none;font:11.5px ui-monospace,Menlo,monospace;text-decoration:none}
+.acchkid:hover{text-decoration:underline}
+.acchktitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.acchkline{margin-left:calc(var(--acmark-w) + var(--s2));color:var(--dim);font:11.5px/1.4 ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
+.acchkrow td{padding:var(--s1) var(--s2) var(--s2) calc(var(--acname-w) + var(--s2));white-space:normal}
+.acdirty,.acdirt,.acerr{color:var(--red)}
+.acdirt{cursor:help}
+.acsha{font:11.5px ui-monospace,Menlo,monospace;color:var(--dim)}
+.acwhen{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right}
+.acmark{display:inline-block;width:14px;font-size:11px}
+.pushed .acmark{color:var(--ok)}
+.unpushed{color:var(--warn)}
+/* the last commit, from before the window: grey, its marker kept */
+.actitle.old,.unpushed.old{color:var(--dim)}
+.acside{display:inline-block;margin-right:var(--s1);padding:0 var(--s1);border:1px solid var(--line);border-radius:3px;color:var(--dim);font-size:11px}
+.acwho{color:var(--dim)}
+.acmore{border:0;background:none;padding:0;color:var(--accent);font-size:12px}
+.acmore:hover{text-decoration:underline}
+.acfiles{z-index:40;max-width:480px;max-height:60vh;overflow:hidden;background:var(--panel2);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 10px var(--shadow);padding:var(--s1) var(--s2);color:var(--ink);pointer-events:none}
+.acfiles pre{margin:0;font:11.5px/1.4 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
+/* narrow: the sha and the author go, the title keeps its room */
+@container (max-width:680px){.c-sha,.acsha,.c-who,.acwho{display:none}.actable{--acname-w:120px}.c-branch{width:100px}.acchkrow td{padding-left:var(--s2)}}
+/* the open in Fork button leads the commit list, quiet until its row is hovered */
+.c-fork{width:22px}
+.actable td.acforkcell{padding-right:0;overflow:visible}
+.acfork{display:inline-flex;align-items:center;vertical-align:-2px;padding:0;border:0;background:none;color:var(--dim);cursor:pointer;opacity:.5}
+.acfork .hico{width:13px;height:13px}
+.acgrp:hover .acfork{opacity:1}
+.acfork:hover{color:var(--accent)}

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

@@ -0,0 +1,41 @@
+// A repo's admin page, as state: what administers the repo rather than works
+// in it. Archive asks first (the confirmation is this state, so it survives a
+// re-render and a test drives it headless), reload and keep active go to the
+// machine by the repo's key. On a hub of its own there is no machine, and no
+// admin page.
+import { makeAutoObservable } from 'mobx'
+import type { RepoSt } from './repo-st.ts'
+
+export class AdminSvc {
+    /** the archive button was pressed: its confirmation shows in its place */
+    confirming = false
+
+    constructor(private st: RepoSt) {
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    askArchive(): void {
+        this.confirming = true
+    }
+    cancel(): void {
+        this.confirming = false
+    }
+    /** archived, the repo leaves the project list and its page shows the
+     *  archived note with its way back */
+    archive(): void {
+        this.confirming = false
+        void this.st.home.projects.setArchived(this.st.key, true)
+    }
+
+    /** its hub, stopped in the daemon and loaded again with its config read fresh */
+    reload(): Promise<boolean> {
+        return this.st.home.machine?.hub(this.st.key, 'restart') ?? Promise.resolve(false)
+    }
+
+    get active(): boolean {
+        return this.st.home.machine?.isActive(this.st.key) === true
+    }
+    setActive(on: boolean): Promise<boolean> {
+        return this.st.home.machine?.setActive(this.st.key, on) ?? Promise.resolve(false)
+    }
+}

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

@@ -0,0 +1,42 @@
+// THE ADMIN PAGE of a repo (`#page:admin`): what administers the repo rather
+// than works in it, one row per control, each with the one sentence that says
+// what it does. State in admin-svc.ts. Only on the home: a hub of its own has
+// no machine to administer it.
+import { observer } from 'mobx-react-lite'
+import type { ReactNode } from 'react'
+import type { RepoSt } from './repo-st.ts'
+
+const Row = ({ title, says, children }: { title: string; says: string; children: ReactNode }) => (
+    <div className="adrow">
+        <div className="adtext">
+            <b>{title}</b>
+            <span className="dim">{says}</span>
+        </div>
+        <div className="adctl">{children}</div>
+    </div>
+)
+
+export const AdminPage = observer(({ app }: { app: RepoSt }) => {
+    const a = app.admin
+    const w = app.home.machine?.worker(app.key)
+    const name = app.name
+    return (
+        <div className="colcard checkcard">
+            <div className="chead">
+                <span className="tid">admin</span>
+                <h3 className="ctitle">{name}</h3>
+            </div>
+            <Row title="reload the hub" says={`stops ${name}'s hub in the daemon and loads it again, its repo.config.ts read fresh and its processes started again. The daemon already does it on its own when repo.config.ts changes: this is for a hub that is stuck.${w == null ? '' : ` Its hub is ${w.status} now.`}`}>
+                <button className="ghost" onClick={() => void a.reload()}>reload</button>
+            </Row>
+            <Row title="keep active" says="an active repo runs the checks the plan holds for it and gets its red pings. It is active on its own while an agent works in it or VS Code has it open: this keeps it active without either.">
+                <label className="adflag"><input type="checkbox" checked={a.active} onChange={(e) => void a.setActive(e.currentTarget.checked)} />active</label>
+            </Row>
+            <Row title="archive" says="it leaves the project list for the archived page, and nothing runs there: no hub, no watch, no plan rows, no processes, no widgets. Written to repo.config.ts as archived: true, and undone from the archived page.">
+                {a.confirming
+                    ? <span className="adconfirm"><span>archive {name}?</span><button className="primary" onClick={() => a.archive()}>archive it</button><button className="ghost" onClick={() => a.cancel()}>cancel</button></span>
+                    : <button className="ghost" onClick={() => a.askArchive()}>archive</button>}
+            </Row>
+        </div>
+    )
+})

package/src/serve/hub-app/chart-view.ts

@@ -1,12 +1,12 @@
 // The view state of THE run chart: its zoom, the width it has on screen and
 // what is under the pointer, over the geometry (timeline-geometry.ts) and the
-// drawing (timeline-chart.tsx). The live strip owns it, and nothing else in
-// the hub draws a run. What differs is the source: folded, a rolling window
-// that ends now; unfolded, the whole record opened on its last minutes.
+// drawing (timeline-chart.tsx). What differs is the source: the dock's, a
+// rolling window that ends now with one group of lanes per repo; a repo's
+// runs page's, its whole record opened on its last minutes.
 import { makeAutoObservable, observableRef } from 'mobx'
 import type { TimelineInvocation } from '../../ledger/run-timeline.ts'
 import {
-    anchorScroll, buildAxis, fitScale, fitWindow, layoutTimeline, maxZoom, PAD_PX, windowAxis, ZOOM_MIN, zoomStep, type Axis, type Layout, type Span,
+    anchorScroll, buildAxis, fitScale, fitWindow, layoutGroups, layoutTimeline, maxZoom, PAD_PX, windowAxis, ZOOM_MIN, zoomStep, type Axis, type ChartGroup, type Layout, type Span,
 } from './timeline-geometry.ts'
 
 /** what a chart draws. `windowMs` null = the whole record, with idle
@@ -23,6 +23,11 @@ export type ChartSource = {
     /** the span the view opens on: at its home zoom this much time, ending
      *  now, fills the width. Absent = home is zoom 1, the whole source */
     homeSpanMs?: number
+    /** one group of lanes per key, over a rolling window only. `invocations`
+     *  then holds every group's, and `laneCap` bounds each group */
+    groups?: ChartGroup[]
+    /** the fewest lanes a group takes, so its label fits beside them */
+    minLanes?: number
 }
 
 /** what the tooltip says, and the viewport point it is fixed at */
@@ -117,7 +122,9 @@ export class ChartView {
     get layout(): Layout | null {
         const s = this.src
         if (s == null || this.viewW === 0) return null
-        return layoutTimeline(s.invocations, this.now, this.scale, { from: this.from ?? undefined, laneCap: s.laneCap, cap: s.cap })
+        const from = this.from
+        if (s.groups != null && from != null) return layoutGroups(s.groups, this.now, this.scale, { from, laneCap: s.laneCap, minLanes: s.minLanes, cap: s.cap })
+        return layoutTimeline(s.invocations, this.now, this.scale, { from: from ?? undefined, laneCap: s.laneCap, cap: s.cap })
     }
 
     private axisAt(scale: number): Axis {

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

@@ -35,6 +35,8 @@ export function rememberedFact(u: CachePop): RememberedFact {
         return { v: 'until a file it reads changes', inputs, help: `keyed on ${list(inputs)}: the answer is ${CACHED} until a change under ${inputs.length > 1 ? 'them' : 'it'}, then it runs again` }
     if (u.reads === true && inputs.length === 0 && (u.ttl == null || u.ttl === '') && u.never == null)
         return { v: 'until a file it read changes', inputs: [], help: `keyed on what its last run read: the answer is ${CACHED} until one of those files, existence probes or listings changes, then it runs again. \`shipkit keys --why\` names them` }
+    if (u.ttl === 'forever')
+        return { v: 'until its declaration changes', inputs: [], help: 'a decided fact (`ttl: \'forever\'`): a clean answer is kept until the value it checks is declared differently, and it runs only while no answer exists for that value' }
     if (u.ttl != null && u.ttl !== '') {
         let every = u.ttl
         try { every = spanWords(parseDuration(u.ttl)) } catch { /* an unparsable ttl is shown as written */ }

package/src/serve/hub-app/controls.css

@@ -0,0 +1,32 @@
+/* small controls any page can use. Colours are hub.css tokens, spacing its
+   scale (tests/hub-css-invariants.test.ts reads this sheet too) */
+
+/* the cycling button (cycle-button.tsx): the current label, one dot per
+   option with the current one in the ink colour, then its shortcut */
+.cycle{flex:none;display:inline-flex;align-items:center;gap:var(--s1);height:18px;padding:0 var(--s1);background:var(--panel2);border:1px solid var(--line);border-radius:9px;
+ color:var(--ink);font-size:10px;line-height:1;cursor:pointer}
+.cycle:hover{border-color:var(--accent)}
+.cyclbl{min-width:26px;text-align:center}
+.cycdots{display:inline-flex;align-items:center;gap:var(--s0)}
+.cycdot{width:4px;height:4px;border-radius:2px;background:var(--dim);opacity:.5}
+.cycdot.on{background:var(--ink);opacity:1}
+.cyckey{font:9px/1 ui-monospace,Menlo,monospace;color:var(--dim);background:none;border:0;padding:0}
+
+/* a row of pills (pill-row.tsx): one row always, the rest folded into +N.
+   The probe is an invisible copy that only gives the widths */
+.pchips{position:relative;display:flex;align-items:center;gap:var(--s1);min-width:0;overflow:hidden;white-space:nowrap}
+.pchipw{flex:none;display:inline-flex}
+.pchipprobe{position:absolute;left:0;top:0;width:max-content;overflow:visible;visibility:hidden;pointer-events:none}
+.pchip{display:inline-flex;align-items:center;gap:var(--s1);height:16px;padding:0 var(--s1);border:1px solid var(--line);border-radius:8px;
+ background:var(--panel2);color:var(--dim);font-size:10px;line-height:1}
+.pchip.accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
+.pchip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
+.pchip img,.pchip .dgico{flex:none;border-radius:2px}
+.pcmark{font-weight:700}
+.pcmark.ok{color:var(--ok)}
+.pcmark.red{color:var(--red)}
+.pcmark.warn{color:var(--warn)}
+.pcmark.dim{color:var(--dim)}
+.pctext{color:var(--ink);opacity:.8}
+.pchip.accent .pctext,.pchip.warn .pctext{color:inherit;opacity:1}
+.pcage{color:var(--dim);opacity:.75}