rvlib-shipkit 1.1.0 → 1.2.0

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

@@ -0,0 +1,171 @@
+// the planned page's state: the machine's one plan as the daemon answers it,
+// as ONE list ordered by time (now, late, 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 { LastStatus } from '../../plan/cadence.ts'
+import type { PlanReason, PlanRow } from '../../plan/planner.ts'
+import type { HomeSt } from './home-st.ts'
+
+export const PLANNED_POLL_MS = 1_000
+
+export type Section = 'now' | 'late' | 'next'
+
+/** the section a row sits in; null for a check with no time of its own */
+export function sectionOf(r: PlanRow): Section | null {
+    if (r.state === 'running' || r.state === 'due') return 'now'
+    if (r.state === 'late') return 'late'
+    if (r.state === 'next') return 'next'
+    return null
+}
+
+/** a row matches a text filter when its project or check holds every word
+ *  of it, in any case */
+export function matches(r: PlanRow, query: string): boolean {
+    const words = query.toLowerCase().split(/\s+/).filter((w) => w !== '')
+    const hay = `${r.repo} ${r.check}`.toLowerCase()
+    return words.every((w) => hay.includes(w))
+}
+
+/** the one list: running first, then due, the late ones most late first,
+ *  then the next ones soonest first. Each row carries its section */
+export function timeline(rows: PlanRow[], query = ''): { section: Section; row: PlanRow }[] {
+    const rank = (r: PlanRow): number => (r.state === 'running' ? 0 : r.state === 'due' ? 1 : r.state === 'late' ? 2 : 3)
+    return rows
+        .filter((r) => sectionOf(r) != null && matches(r, query))
+        .sort((a, b) => rank(a) - rank(b) || (a.dueAt ?? Infinity) - (b.dueAt ?? Infinity) || a.repo.localeCompare(b.repo) || a.check.localeCompare(b.check))
+        .map((row) => ({ section: sectionOf(row)!, row }))
+}
+
+const MIN = 60_000
+const HOUR = 60 * MIN
+const DAY = 24 * HOUR
+
+/** a span in its largest unit: `<1m`, `25m`, `2h`, `3d` */
+export function spanShort(ms: number): string {
+    if (ms < MIN) return '<1m'
+    if (ms < HOUR) return `${Math.round(ms / MIN)}m`
+    if (ms < DAY) return `${Math.round(ms / HOUR)}h`
+    return `${Math.round(ms / DAY)}d`
+}
+
+/** when the row runs, relative to now: `now`, `in 4m`, `late 2h` */
+export function whenWords(r: PlanRow, now: number): string {
+    if (r.dueAt == null || r.state === 'running' || r.state === 'due') return 'now'
+    const d = r.dueAt - now
+    if (r.state === 'late') return `late ${spanShort(Math.max(0, -d))}`
+    return d > 0 ? `in ${spanShort(d)}` : 'now'
+}
+
+export type Mark = 'running' | 'failed' | 'late' | 'due' | 'next'
+
+/** the one mark a row shows and its few words: running wins, then a failed
+ *  last result, then late with why it waits */
+export function markOf(r: PlanRow): { mark: Mark; words: string } {
+    if (r.state === 'running') return { mark: 'running', words: 'running' }
+    if (r.last?.status === 'fail') return { mark: 'failed', words: 'last failed' }
+    if (r.state === 'late') return { mark: 'late', words: 'waits: repo inactive' }
+    if (r.state === 'due') return { mark: 'due', words: 'due' }
+    return { mark: 'next', words: '' }
+}
+
+/** why it is due or planned, in words */
+export const REASON_WORDS: Record<PlanReason, string> = {
+    changed: 'files changed',
+    scheduled: 'scheduled',
+    late: 'overdue',
+    asked: 'asked by hand',
+}
+
+export const reasonWords = (r: PlanRow): string => (r.reason == null ? '' : REASON_WORDS[r.reason])
+
+/** the tone of a last result: red failing, warn warning, ok passing */
+export const LAST_TONE: Record<LastStatus, 'red' | 'warn' | 'ok' | 'dim'> = { fail: 'red', warn: 'warn', pass: 'ok', skip: 'dim' }
+
+/** a title worth showing beside the id: a title that repeats the id loses it */
+export function titleWords(title: string | null, check: string): string | null {
+    const t = title?.startsWith(check) === true ? title.slice(check.length).replace(/^[\s:·]+/, '') : title
+    return t == null || t === '' ? null : t
+}
+
+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 = ''
+    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)
+    }
+
+    /** 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)
+    }
+
+    /** the check: its own page in its repo. The selection is written before
+     *  the repo is shown, so the one history entry already names the check */
+    openCheck(repo: string, check: string): void {
+        this.st.repo(repo).cols.select('checks', `check:${check}`)
+        this.st.select(repo)
+    }
+
+    /** 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,109 @@
+// `/planned`: every check the machine runs on its own time, in ONE list
+// ordered by time under three small labels (now, late, next). 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 { hashFor } from './hash-route.ts'
+import type { HomeSt } from './home-st.ts'
+import { 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'
+
+/** where a check's own page answers on the home */
+export const checkAddress = (repo: string, check: string): string =>
+    `${repoPage(repo)}#${hashFor({ t: 'item', col: 'checks', id: `check:${check}` })}`
+
+/** 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?.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>
+        </div>
+    )
+})

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

@@ -0,0 +1,39 @@
+/* the planned page (planned-view.tsx): one quiet list, one font size. Each
+   row is a grid on the same three columns (when, project · check, mark), so
+   the columns line up without a header. The card on hover takes the pointer,
+   unlike .ftip, because it holds the run button. */
+.planned{font-size:13px}
+.plfind{display:block;width:240px;max-width:100%;box-sizing:border-box;margin-bottom:var(--s3);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:var(--s1) var(--s2);font:inherit}
+.plfind:focus{outline:none;border-color:var(--accent)}
+.pllist{max-width:560px}
+.plsec{margin-top:var(--s3);padding:var(--s1) var(--s2);color:var(--dim);text-transform:lowercase}
+.plsec:first-child{margin-top:0}
+.plr{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;column-gap:var(--s3);padding:var(--s0) var(--s2);border-radius:3px;white-space:nowrap}
+.plr:hover{background:var(--panel)}
+.plwhen{color:var(--dim);font-variant-numeric:tabular-nums}
+.m-late .plwhen{color:var(--warn)}
+.m-running .plwhen{color:var(--accent)}
+.plwhat{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.plrepo,.plcheck{color:inherit;text-decoration:none}
+.plrepo span{color:var(--pc)}
+.plrepo:hover span,.plcheck:hover{text-decoration:underline}
+.plface{width:14px;height:14px;margin-right:var(--s1);vertical-align:-2px;border-radius:3px;object-fit:contain}
+.pldim{color:var(--dim)}
+.plmark{display:flex;align-items:center;gap:var(--s1);color:var(--dim)}
+.plmark .spin{width:9px;height:9px;border-width:1.5px}
+.plsym{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;box-sizing:border-box}
+.s-next{border:1px solid var(--dim)}
+.s-due{background:var(--ink)}
+.s-late{background:var(--warn)}
+.s-failed{width:auto;height:auto;border-radius:0;font-style:normal;color:var(--red)}
+.s-failed::before{content:'✕'}
+.m-failed .plmark{color:var(--red)}
+.plcard{z-index:40;width:max-content;max-width:360px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 10px var(--shadow);padding:var(--s2) var(--s3);font-size:13px;color:var(--ink)}
+.plcardin{display:flex;flex-direction:column;gap:var(--s1)}
+.plct{margin-bottom:var(--s1)}
+.plkv{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--s2)}
+.plkv > span:first-child{color:var(--dim)}
+.plkv > span:last-child{white-space:pre-wrap;overflow-wrap:anywhere}
+.plerr{color:var(--red)}
+.l-ok{color:var(--ok)}.l-warn{color:var(--warn)}.l-red{color:var(--red)}.l-dim{color:var(--dim)}
+.plgo{align-self:flex-start;margin-top:var(--s1);padding:0 var(--s2);font:inherit;line-height:22px}

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

@@ -0,0 +1,63 @@
+// the repo's declared processes (serve.processes) as the hub supervises them,
+// polled while its repo is the one shown. A repo that declares none never
+// polls again after the first answer.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { ProcessView } from '../repo-processes.ts'
+import type { RepoSt } from './repo-st.ts'
+
+export const PROCESSES_POLL_MS = 2_000
+
+export class ProcessesSvc {
+    list: ProcessView[] = []
+    error = ''
+    private timer: ReturnType<typeof setTimeout> | null = null
+    /** bumped by stop, so a chain that left before it dies at its next await */
+    private gen = 0
+    private polling = false
+
+    constructor(private st: RepoSt) {
+        makeAutoObservable<this, 'st' | 'timer' | 'gen' | 'polling'>(this, { st: false, timer: false, gen: false, polling: false, list: observableRef })
+    }
+
+    start(): void {
+        if (this.polling) return
+        this.polling = true
+        const gen = ++this.gen
+        const tick = async (): Promise<void> => {
+            await this.load()
+            if (gen === this.gen && this.list.length > 0) this.timer = setTimeout(() => void tick(), PROCESSES_POLL_MS)
+        }
+        void tick()
+    }
+
+    stop(): void {
+        this.polling = false
+        this.gen++
+        if (this.timer != null) clearTimeout(this.timer)
+        this.timer = null
+    }
+
+    async load(): Promise<void> {
+        try {
+            const r = await fetch(this.st.url('/api/processes.json'))
+            if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
+            const j = (await r.json()) as { processes: ProcessView[] }
+            runInAction(() => {
+                this.list = j.processes
+                this.error = ''
+            })
+        } catch (e) {
+            runInAction(() => { this.error = `processes: ${(e as Error).message}` })
+        }
+    }
+
+    async act(id: string, act: 'start' | 'stop' | 'restart'): Promise<void> {
+        try {
+            const r = await fetch(this.st.url('/api/processes/act'), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, act }) })
+            if (!r.ok) throw new Error(await r.text())
+            await this.load()
+        } catch (e) {
+            runInAction(() => { this.error = `${act} ${id}: ${(e as Error).message}` })
+        }
+    }
+}

package/src/serve/hub-app/project-list.css

@@ -0,0 +1,97 @@
+/* the project list, the page's left panel. Its classes are pj*: another
+   sheet of the page already styles .plist (prose-hits.css). It fills its
+   panel (hub-app.tsx, react-resizable-panels), whose width is the only one:
+   this sheet sizes the rows and never the list. Colours are hub.css tokens only, spacing is its scale:
+   tests/hub-css-invariants.test.ts reads this sheet too. Every icon is 18px
+   here AND as attributes on the img (ROW_ICON), so a sheet that fails to
+   apply still draws a row, never a 512px icon. */
+.pjlist{flex:1;width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg);min-width:0}
+.pjhead{flex:none;display:flex;align-items:center;gap:var(--s1);height:36px;padding:0 var(--s2);border-bottom:1px solid var(--line)}
+.pjhead .sp{flex:1}
+/* the rows scroll, the head does not, and no scrollbar draws a band beside
+   them: WebKit (the macOS app) ignores scrollbar-width, hence the pseudo */
+.pjrows{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--s1) 0;scrollbar-width:none}
+.pjrows::-webkit-scrollbar{display:none}
+.pjwait{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);font-size:12px;color:var(--dim)}
+.pjrow{position:relative;display:flex;align-items:center;gap:var(--s2);width:100%;height:28px;padding:0 var(--s3);
+ background:transparent;border:0;border-radius:0;text-align:left;color:var(--dim);font-size:13px;cursor:pointer}
+.pjrow:hover{background:var(--panel2);color:var(--ink)}
+/* the shown repo: its row lit, marked on the left in its identity colour */
+.pjrow.cur{background:var(--sel);color:var(--pjc,var(--ink));box-shadow:inset 3px 0 0 var(--pjc,var(--accent));font-weight:600}
+.pjrow img,.pjrow .pgi{flex:none;width:18px;height:18px;border-radius:4px;object-fit:contain;pointer-events:none}
+.pjname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* the initial on a hue hashed from the name (projects-svc hueOf) */
+.pgi{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;user-select:none;
+ color:var(--c);background:color-mix(in srgb,var(--c) 22%,var(--panel2))}
+.pgi.h1{--c:var(--k1)}
+.pgi.h2{--c:var(--k2)}
+.pgi.h3{--c:var(--k3)}
+.pgi.h4{--c:var(--k4)}
+.pgi.h5{--c:var(--k5)}
+.pgi.h6{--c:var(--k6)}
+/* the row says three things and no more (projects-svc faceOf) */
+/* closed in VS Code: the icon and the name dim, the badge does not */
+.pjrow.dim img,.pjrow.dim .pgi,.pjrow.dim .pjname{opacity:.5}
+/* ⌘1 to ⌘9 select the first nine rows (keys.ts): the hint sits at the row's end */
+.pjkey{flex:none;font:10px/1 ui-monospace,Menlo,monospace;color:var(--dim);opacity:.6;background:none;border:0;padding:0}
+.pjrow:hover .pjkey,.pjrow.cur .pjkey{opacity:1}
+/* the one badge: open asks, at the end of the row */
+.pga{flex:none;min-width:16px;height:16px;padding:0 var(--s1);border-radius:8px;
+ font-size:10px;font-weight:700;line-height:16px;text-align:center;color:var(--bg);background:var(--warn)}
+/* Claude sessions running: a thin edge on the left that breathes */
+.pgs{position:absolute;left:0;top:5px;bottom:5px;width:2px;border-radius:1px;background:var(--accent);pointer-events:none;animation:pgpulse 2.4s ease-in-out infinite}
+/* the home only: the repo's hub state (starting, crashed) */
+.pgd{flex:none;width:6px;height:6px;border-radius:3px;pointer-events:none}
+.pgd.up{background:var(--ok)}.pgd.starting{background:var(--warn)}.pgd.crashed{background:var(--red)}
+/* the home only: a global process this repo uses is off */
+.pgw{flex:none;width:6px;height:6px;border-radius:1px;background:var(--warn)}
+@keyframes pgpulse{0%,100%{opacity:1}50%{opacity:.25}}
+@media (prefers-reduced-motion:reduce){.pgs{animation:none}}
+/* the hover card: beside its row, placed by floating-ui (floating.tsx), one
+   at a time, never interactive. Header, then what needs a human, then the
+   label and value rows of the check page (.wfact .wk .wv from hub.css) */
+.pgcard{z-index:20;width:300px;padding:var(--s3);pointer-events:none;
+ background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 20px var(--shadow);font-size:12px;line-height:1.45;color:var(--ink)}
+.pgch{display:flex;align-items:center;gap:var(--s2);min-width:0}
+.pgcface{flex:none;display:flex}
+.pgcface img,.pgcface .pgi{width:20px;height:20px;border-radius:4px;font-size:11px}
+.pgcname{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pgcthis{font-weight:400;font-size:11px;color:var(--dim)}
+.pgcver{flex:none;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
+.pgcline{margin-top:var(--s1);color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pgcdesc{margin-top:var(--s1);color:var(--dim);font-size:11px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
+/* NEEDS YOU: a warn toned bullet, set apart from the facts */
+.pgcneeds{margin-top:var(--s2);padding:var(--s1) var(--s2);border-left:2px solid var(--warn);background:var(--panel2);border-radius:0 3px 3px 0}
+.pgcneed{display:flex;gap:var(--s1);min-width:0;color:var(--warn)}
+.pgcneed.red{color:var(--red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pgcask{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pgcmore{flex:none}
+.pgcfacts{margin-top:var(--s2)}
+.pgcfacts .wk{flex-basis:64px;white-space:nowrap}
+.pgcfacts .wv{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
+.pgcfacts .wv.warn{color:var(--warn)}
+.pgerr{font-size:12px;font-weight:700;color:var(--red);cursor:help}
+/* the home only: the overview and the plan, one button each, the page shown
+   marked, its shortcut small in the bottom right corner */
+.pgplace{position:relative;flex:none;width:40px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;
+ background:transparent;border:1px solid var(--line);border-radius:4px;color:var(--dim);cursor:pointer}
+.pgplace:hover{color:var(--ink);background:var(--panel2)}
+.pgplace.on{color:var(--accent);background:var(--sel);border-color:var(--accent)}
+.pgplace .hico{flex:none;color:inherit;margin-right:var(--s2)}
+.pgplace kbd{position:absolute;right:var(--s0);bottom:0;font:8px/1 ui-monospace,Menlo,monospace;color:var(--dim);background:none;border:0;padding:0}
+/* the one time sort by last activity */
+.pgsort{flex:none;width:28px;height:20px;padding:0;background:transparent;border:1px solid var(--line);border-radius:3px;
+ color:var(--dim);font-size:12px;line-height:18px;cursor:pointer}
+.pgsort:hover{color:var(--ink);border-color:var(--accent)}
+/* a drag: the row being moved fades, and the gap it would land in is a line
+   drawn on a row edge */
+.pjrow.dragging{opacity:.4}
+.pjrow.dropb::before,.pjrow.dropa::after{content:'';position:absolute;left:var(--s2);right:var(--s2);height:2px;border-radius:1px;background:var(--accent);pointer-events:none}
+.pjrow.dropb::before{top:-1px}
+.pjrow.dropa::after{bottom:-1px}
+/* the separators of the page's panels: a 1px divider in the line colour, the
+   panels touching it, and a wider hit area that draws nothing (6px each side).
+   The accent shows only on hover and while dragging */
+.rsep{position:relative;flex:none;width:1px;background:var(--line)}
+.rsep::before{content:'';position:absolute;top:0;bottom:0;left:-6px;right:-6px;cursor:col-resize;background:transparent;z-index:6}
+.rsep:hover,.rsep[data-separator="hover"],.rsep[data-separator="active"]{background:var(--accent)}

package/src/serve/hub-app/project-list.tsx

@@ -0,0 +1,167 @@
+// the project list: one row per repo that shares this page's house wiki,
+// down the left of the page, a small icon and the repo's name on one line,
+// the shown repo's row marked in its identity colour. Its width is the
+// panel the page gives it (hub-app.tsx, react-resizable-panels). A row says
+// three things and no more (faceOf): the open asks as its one badge, a dim
+// icon while VS Code does not have the folder open, a thin edge breathing
+// while Claude sessions run in it; on the home, a dot while its hub starts
+// or crashed and a mark while a global process it uses is off. Everything
+// else is the hover card, placed by floating-ui beside the row. A click
+// selects the repo in place (so does ⌘1 to ⌘9 for the first nine rows, the
+// hint at each row's end), a double click opens the folder in VS Code, a
+// drag reorders the list, the button on top sorts it once by last activity,
+// and on the home two buttons open the overview and the plan, each with its
+// shortcut in its corner. It renders from
+// the first paint with the list this browser kept, so a load moves nothing.
+import { autoUpdate, FloatingPortal, useFloating, useHover, useInteractions } from '@floating-ui/react'
+import { observer } from 'mobx-react-lite'
+import { useEffect, type CSSProperties } from 'react'
+import { middleware, OPEN_MS } from './floating.tsx'
+import { Icon, ICON } from './icons.tsx'
+import { PLACE_KEY } from './keys.ts'
+import { cardModel, faceOf, hueOf, type Place, type Project, type ProjectsSvc } from './projects-svc.ts'
+
+/** what the list needs of its page: the hub and the home both carry one */
+export type ListHost = { projects: ProjectsSvc }
+
+/** the two places of the home, at the top of the list */
+const PLACES: { id: Place; label: string; title: string }[] = [
+    { id: 'overview', label: 'home', title: 'the overview: shipkit, every global process and every repo on this machine' },
+    { id: 'planned', label: 'planned', title: 'every check the machine runs on its own: now, next, late, and why' },
+]
+
+/** the icon's size on a row, in px, as attributes and in the sheet */
+export const ROW_ICON = 18
+
+export const Row = observer(({ app, p, i }: { app: ListHost; p: Project; i: number }) => {
+    const s = app.projects
+    const gap = s.shownGap
+    const face = faceOf(p)
+    const open = s.hover === p.name
+    const f = useFloating({
+        open,
+        onOpenChange: (v) => (v ? s.hoverIn(p.name) : s.hoverOut(p.name)),
+        placement: 'right-start',
+        strategy: 'fixed',
+        middleware: middleware(8),
+        whileElementsMounted: autoUpdate,
+    })
+    const hover = useHover(f.context, { delay: { open: OPEN_MS, close: 0 }, enabled: s.drag == null })
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover])
+    // the drop line rides on a row edge, so showing it moves nothing
+    const edge = gap === i ? ' dropb' : gap === i + 1 && i === s.list.length - 1 ? ' dropa' : ''
+    const cur = s.isCurrent(p)
+    const cls = `pjrow${cur ? ' cur' : ''}${face.dim ? ' dim' : ''}${s.drag === p.name ? ' dragging' : ''}${edge}`
+    const dot = s.dotOf(p.name)
+    const warn = s.warnOf(p.name)
+    // the shown repo's row is marked in its own colour
+    const mark = cur ? ({ '--pjc': s.identityOf(p.name).colorDark } as CSSProperties) : undefined
+    return (
+        <>
+            <button ref={f.refs.setReference} className={cls} aria-label={p.name} style={mark} draggable
+                {...getReferenceProps({
+                    onClick: () => s.click(p.name),
+                    onDoubleClick: () => s.doubleClick(p.name),
+                    onDragStart: (e) => {
+                        e.dataTransfer.effectAllowed = 'move'
+                        e.dataTransfer.setData('text/plain', p.name)
+                        s.dragStart(p.name)
+                    },
+                    onDragOver: (e) => {
+                        if (s.drag == null) return
+                        e.preventDefault()
+                        const r = e.currentTarget.getBoundingClientRect()
+                        s.dragOver(i, e.clientY - r.top, r.height)
+                    },
+                    onDrop: (e) => {
+                        e.preventDefault()
+                        s.drop()
+                    },
+                    onDragEnd: () => s.dragEnd(),
+                })}>
+                <Face p={p} px={ROW_ICON} />
+                <span className="pjname">{p.name}</span>
+                {face.badge != null ? <b className="pga">{face.badge}</b> : null}
+                {face.busy ? <i className="pgs" /> : null}
+                {dot != null ? <i className={`pgd ${dot}`} /> : null}
+                {warn != null ? <i className="pgw" title={warn} /> : null}
+                {i < 9 ? <kbd className="pjkey">⌘{i + 1}</kbd> : null}
+            </button>
+            {open ? (
+                <FloatingPortal>
+                    <div ref={f.refs.setFloating} className="pgcard" role="tooltip" style={f.floatingStyles} {...getFloatingProps()}>
+                        <Card p={p} now={Date.now()} />
+                    </div>
+                </FloatingPortal>
+            ) : null}
+        </>
+    )
+})
+
+// the img carries its size as attributes too: an icon file is 512px, and
+// without them a sheet that fails to apply draws it at that size
+const Face = ({ p, px }: { p: Project; px: number }) => (p.icon != null
+    ? <img src={p.icon} alt="" width={px} height={px} draggable={false} />
+    : <span className={`pgi h${hueOf(p.name)}`}>{(p.name.match(/[a-zA-Z]/)?.[0] ?? p.name.charAt(0)).toUpperCase()}</span>)
+
+/** the card for one repo: header, what needs a human, then the fact rows,
+ *  in the label and value shape the check page's WHAT widget uses */
+export const Card = ({ p, now }: { p: Project; now: number }) => {
+    const m = cardModel(p, now)
+    return (
+        <>
+            <div className="pgch">
+                <span className="pgcface"><Face p={p} px={20} /></span>
+                <b className="pgcname">{m.head.name}{m.head.current ? <span className="pgcthis"> this hub</span> : null}</b>
+                {m.head.version == null ? null : <span className="pgcver">v{m.head.version.replace(/^v/, '')}</span>}
+            </div>
+            {m.head.branch == null ? null : <div className="pgcline">{m.head.branch}</div>}
+            {m.head.description == null ? null : <div className="pgcdesc">{m.head.description}</div>}
+            {m.needs == null ? null : (
+                <div className="pgcneeds">
+                    {m.needs.asks == null ? null : (
+                        <div className="pgcneed">
+                            <span className="pgcask">{m.needs.asks.count} ask{m.needs.asks.count === 1 ? '' : 's'}: {m.needs.asks.titles.join(' · ')}</span>
+                            {m.needs.asks.more > 0 ? <span className="pgcmore">+{m.needs.asks.more}</span> : null}
+                        </div>
+                    )}
+                    {m.needs.gate == null ? null : <div className="pgcneed red">{m.needs.gate}</div>}
+                </div>
+            )}
+            {m.facts.length === 0 ? null : (
+                <div className="pgcfacts">
+                    {m.facts.map((f) => (
+                        <div key={f.k} className="wfact">
+                            <span className="wk">{f.k}</span>
+                            <span className={`wv${f.tone == null ? '' : ` ${f.tone}`}`}>{f.v}</span>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </>
+    )
+}
+
+export const ProjectList = observer(({ app }: { app: ListHost }) => {
+    useEffect(() => app.projects.start(), [app])
+    const s = app.projects
+    return (
+        <nav className="pjlist" aria-label="projects">
+            <div className="pjhead">
+                {s.onPlace == null ? null : PLACES.map((pl) => (
+                    <button key={pl.id} className={`pgplace${s.place === pl.id ? ' on' : ''}`} aria-label={pl.label} title={`${pl.title} (${PLACE_KEY[pl.id]})`} onClick={() => s.onPlace?.(pl.id)}>
+                        <Icon d={ICON[pl.id === 'overview' ? 'home' : 'planned']} />
+                        <kbd>{PLACE_KEY[pl.id]}</kbd>
+                    </button>
+                ))}
+                <span className="sp" />
+                {s.error !== '' ? <span className="pgerr" title={s.error}>!</span> : null}
+                <button className="pgsort" title="sort by last activity, once: the result is the new manual order" onClick={() => s.sortByActivity()}>⇅</button>
+            </div>
+            <div className="pjrows">
+                {s.list.length === 0 && s.error === '' ? <span className="pjwait"><span className="spin" />reading the repos…</span> : null}
+                {s.list.map((p, i) => <Row key={p.name} app={app} p={p} i={i} />)}
+            </div>
+        </nav>
+    )
+})