rvlib-shipkit 1.2.0 → 1.4.0

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

@@ -3,10 +3,10 @@
 // server measures at most once per 5s whatever the number of tabs, so this
 // poll is cheap.
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
-import type { ProjectRow as Project, Release } from '../project-gutter-route.ts'
+import type { ArchivedRow, ProjectRow as Project, Release } from '../project-gutter-route.ts'
 import { identityOfName, type Identity } from '../../core/identity-color.ts'
 
-export type { ProjectRow as Project, Release } from '../project-gutter-route.ts'
+export type { ArchivedRow, ProjectRow as Project, Release } from '../project-gutter-route.ts'
 
 export const PROJECTS_POLL_MS = 5_000
 /** how long the colour picker rests before its colour is written */
@@ -16,6 +16,38 @@ export const IDENTITY_SAVE_MS = 400
  *  next load while the daemon is asked again */
 export const LIST_KEY = 'hub:projects'
 
+/** where this browser keeps whether the rail's archived rows show */
+export const ARCHIVED_OPEN_KEY = 'hub:archived-open'
+
+const keptOpen = (): boolean => {
+    try { return globalThis.localStorage?.getItem(ARCHIVED_OPEN_KEY) === '1' } catch { return false }
+}
+
+/** where this browser keeps the last sort it picked */
+export const SORT_KEY = 'hub:sort'
+
+/** a sort the foot's menu offers: each one reorders the list once, and the
+ *  result is the new manual order */
+export type SortMode = 'activity' | 'commit' | 'name' | 'asks'
+
+/** the menu's lines, in their order: a label naming the order, a title
+ *  saying how it breaks ties */
+export const SORTS: { id: SortMode; label: string; title: string }[] = [
+    { id: 'activity', label: 'last activity', title: 'newest first: the last commit, shipkit run or Claude session' },
+    { id: 'commit', label: 'last commit', title: 'newest commit on the checked out branch first' },
+    { id: 'name', label: 'name', title: 'A to Z' },
+    { id: 'asks', label: 'open asks', title: 'the repo waiting on the most asks first' },
+]
+
+const keptSort = (): SortMode | null => {
+    try {
+        const v = globalThis.localStorage?.getItem(SORT_KEY)
+        return SORTS.some((m) => m.id === v) ? (v as SortMode) : null
+    } catch {
+        return null
+    }
+}
+
 /** the project list this browser last saw, or [] when storage is absent,
  *  blocked or holds anything else */
 export function loadList(): Project[] {
@@ -78,6 +110,15 @@ export const byActivity = (list: Project[]): string[] =>
         .sort((a, b) => (b.p.activity ?? -Infinity) - (a.p.activity ?? -Infinity) || a.i - b.i)
         .map(({ p }) => p.name)
 
+/** the names in a sort's order, ties in their current order */
+export function sortNames(list: Project[], mode: SortMode): string[] {
+    if (mode === 'activity') return byActivity(list)
+    const cmp: (a: Project, b: Project) => number = mode === 'commit'
+        ? (a, b) => (b.commit ?? -Infinity) - (a.commit ?? -Infinity)
+        : mode === 'asks' ? (a, b) => b.asks - a.asks
+            : (a, b) => a.name.localeCompare(b.name)
+    return list.map((p, i) => ({ p, i })).sort((a, b) => cmp(a.p, b.p) || a.i - b.i).map(({ p }) => p.name)
+}
 
 /** the hub state dot the home draws on a tile, only when it needs a look:
  *  its hub starts or crashed. A hub that is up is the normal case and draws none */
@@ -132,7 +173,7 @@ export function cardModel(p: Project, now: number): CardModel {
 }
 
 /** a page of the home that is no repo's */
-export type Place = 'overview' | 'planned'
+export type Place = 'overview' | 'planned' | 'activity'
 
 export class ProjectsSvc {
     /** the last list this browser saw until the first poll answers, so the
@@ -140,6 +181,16 @@ export class ProjectsSvc {
     list: Project[] = loadList()
     /** why the last poll or open failed, shown on the list's head */
     error = ''
+    /** the repos whose repo.config.ts says `archived: true`: never in `list`,
+     *  only on the archived page */
+    archived: ArchivedRow[] = []
+    /** the archived button at the foot of the rail is on, its rows shown, per browser */
+    archivedOpen = keptOpen()
+    /** the sort menu at the foot of the rail is open */
+    sortMenuOpen = false
+    /** the last sort picked in this browser; `sortMode` says whether the list
+     *  is still in its order */
+    sortPicked: SortMode | null = keptSort()
     /** the daemon answered once: until then the list is the kept one */
     fresh = false
     /** the row under the pointer, whose hover card shows */
@@ -147,8 +198,9 @@ export class ProjectsSvc {
     /** the tile being dragged, and the gap it would land in */
     drag: string | null = null
     gap: number | null = null
-    /** the repo the home page shows; null on the overview, the plan, and a
-     *  hub of its own, whose repo is `current`. The list's api is always the
+    /** the repo the home page shows, or showed last while a global page is
+     *  up; null until one is picked, and on a hub of its own, whose repo is
+     *  `current`. The list's api is always the
      *  page origin's own: the home's machine wide one, or this hub's */
     selected: string | null = null
     /** what a single click does: the home shows that repo in place, a hub
@@ -157,8 +209,16 @@ export class ProjectsSvc {
     /** the two places at the top of the list, the overview and the plan:
      *  the home sets it, a hub of its own has none */
     onPlace: ((p: Place) => void) | null = null
+    /** the archived page, where an archived row of the rail leads: the home sets it */
+    onArchived: (() => void) | null = null
+    /** the picker's line after the overview: the home sets it */
+    onPicker: (() => void) | null = null
+    /** the picker is open, so its line is lit: the home sets it */
+    pickerOpen: () => boolean = () => false
     /** the place shown, marked at the top of the list; null on a repo page */
     place: Place | null = null
+    /** a global page is up: the selected repo's row stays marked, dimmer */
+    away = false
     /** the home's hub state per repo; a hub draws none */
     dotOf: (name: string) => HubDot = () => null
     /** one line when a machine resource the repo uses is off */
@@ -172,12 +232,38 @@ export class ProjectsSvc {
     private orderGen = 0
 
     constructor() {
-        makeAutoObservable<this, 'gen' | 'orderGen' | 'identitySaves' | 'saveIdentity' | 'kept' | 'keep'>(this, { gen: false, orderGen: false, identitySaves: false, saveIdentity: false, kept: false, keep: false, list: observableRef, onSelect: false, onPlace: false, dotOf: false, warnOf: false })
+        makeAutoObservable<this, 'gen' | 'orderGen' | 'identitySaves' | 'saveIdentity' | 'kept' | 'keep'>(this, { gen: false, orderGen: false, identitySaves: false, saveIdentity: false, kept: false, keep: false, list: observableRef, onSelect: false, onPlace: false, onPicker: false, pickerOpen: false, onArchived: false, dotOf: false, warnOf: false })
     }
 
-    /** the tile drawn as the current one */
+    toggleArchivedOpen(): void {
+        this.archivedOpen = !this.archivedOpen
+        try { globalThis.localStorage?.setItem(ARCHIVED_OPEN_KEY, this.archivedOpen ? '1' : '0') } catch { /* private window: the choice lasts the tab */ }
+    }
+
+    isArchived(name: string): boolean {
+        return this.archived.some((p) => p.name === name)
+    }
+
+    /** archive a repo or bring it back: written into its repo.config.ts
+     *  (`archived`, only that key), then the list is read again, so the repo
+     *  moves between the rail and the archived page, and the daemon stops or
+     *  loads its hub on its next tick */
+    async setArchived(name: string, on: boolean): Promise<void> {
+        try {
+            const r = await fetch('/api/projects/archived', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name, archived: on }) })
+            if (!r.ok) throw new Error(await r.text())
+            runInAction(() => { this.error = '' })
+            await this.load()
+        } catch (e) {
+            runInAction(() => { this.error = `${on ? 'archive' : 'unarchive'} ${name}: ${(e as Error).message}` })
+        }
+    }
+
+    /** the tile drawn as the current one. The home marks only a repo that
+     *  was picked (it sets `onPlace`); a hub of its own marks its own repo */
     isCurrent(p: Project): boolean {
-        return this.selected != null ? p.name === this.selected : p.current
+        if (this.selected != null) return p.name === this.selected
+        return this.onPlace == null && p.current
     }
 
     select(name: string): void {
@@ -272,9 +358,30 @@ export class ProjectsSvc {
         void this.reorder(moveTo(this.list.map((p) => p.name), from, gap))
     }
 
-    /** one reorder by last activity; from then on it is the manual order */
-    sortByActivity(): void {
-        void this.reorder(byActivity(this.list))
+    /** the sort the list is in now: the last one picked while the order
+     *  still matches it, else the manual order a drag made */
+    get sortMode(): SortMode | 'manual' {
+        const m = this.sortPicked
+        if (m == null) return 'manual'
+        const now = this.list.map((p) => p.name)
+        return sortNames(this.list, m).every((n, i) => n === now[i]) ? m : 'manual'
+    }
+
+    /** the button opens or closes the menu, and sorts nothing */
+    toggleSortMenu(): void {
+        this.sortMenuOpen = !this.sortMenuOpen
+    }
+    setSortMenu(open: boolean): void {
+        this.sortMenuOpen = open
+    }
+
+    /** a pick: one reorder in that sort's order, then the menu closes; from
+     *  then on it is the manual order */
+    sortBy(mode: SortMode): void {
+        this.sortMenuOpen = false
+        this.sortPicked = mode
+        try { globalThis.localStorage?.setItem(SORT_KEY, mode) } catch { /* private window: the pick lasts the tab */ }
+        void this.reorder(sortNames(this.list, mode))
     }
 
     /** shows the new order at once, then saves it for every hub */
@@ -322,12 +429,13 @@ export class ProjectsSvc {
         try {
             const r = await fetch('/api/projects.json')
             if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
-            const j = (await r.json()) as { projects: Project[] }
+            const j = (await r.json()) as { projects: Project[]; archived?: ArchivedRow[] }
             runInAction(() => {
                 // a reorder since this left, or a drag in flight: the next poll answers
                 if (order !== this.orderGen || this.drag != null) return
                 const mine = new Map(this.list.filter((p) => this.identitySaves.has(p.name)).map((p) => [p.name, p.identity]))
                 this.list = mine.size === 0 ? j.projects : j.projects.map((p) => (mine.has(p.name) ? { ...p, identity: mine.get(p.name)! } : p))
+                this.archived = j.archived ?? []
                 this.error = ''
                 this.fresh = true
             })

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

@@ -0,0 +1,38 @@
+// the repo's README, shown when no row is picked. Read again each time the
+// empty page shows, so an edited README appears without a reload
+import { makeAutoObservable, runInAction } from 'mobx'
+import type { RepoSt } from './repo-st.ts'
+
+export class ReadmeSvc {
+    /** the file name at the root, null when the repo has none */
+    file: string | null = null
+    md: string | null = null
+    error: string | null = null
+    loaded = false
+
+    constructor(private st: RepoSt) {
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    /** where a README image loads from: the hub's file route, under this repo */
+    fileUrl = (rel: string): string => this.st.url(`/api/readme-file/${rel}`)
+
+    async load(): Promise<void> {
+        try {
+            const r = await fetch(this.st.url('/api/readme.json'))
+            if (!r.ok) throw new Error(`http ${r.status}: ${await r.text()}`)
+            const j = (await r.json()) as { file: string | null; md: string | null }
+            runInAction(() => {
+                this.file = j.file
+                this.md = j.md
+                this.error = null
+                this.loaded = true
+            })
+        } catch (e) {
+            runInAction(() => {
+                this.error = `README fetch broke: ${(e as Error).message}`
+                this.loaded = true
+            })
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+// the page with no row picked: the repo's README, images included, or the
+// hint when the repo has none
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
+import { renderReadme } from './md.ts'
+import type { RepoSt } from './repo-st.ts'
+
+export const ReadmeView = observer(({ app }: { app: RepoSt }) => {
+    const r = app.readme
+    useEffect(() => { void r.load() }, [r])
+    if (r.error != null) return <div className="ph"><div className="errs">{r.error}</div>Pick a row on the left.</div>
+    if (r.md == null) return <div className="ph">{r.loaded ? 'Pick a row on the left.' : ''}</div>
+    return (
+        <div className="readme">
+            <div className="readme-head">{r.file} · pick a row on the left for the rest</div>
+            <div className="md readme-body" dangerouslySetInnerHTML={{ __html: renderReadme(r.md, r.fileUrl) }} />
+        </div>
+    )
+})

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

@@ -0,0 +1,11 @@
+/* the README on a repo page with no row picked: a readable column held to the left
+   (the pane centers its child, the auto right margin takes the slack), images at their width */
+.readme{width:100%;max-width:860px;margin:0 auto 0 var(--s3);padding:var(--s3) var(--s4)}
+.readme-head{color:var(--dim);font-size:11px;margin-bottom:var(--s2)}
+.readme-body{font-size:13.5px;line-height:1.6}
+.readme .readme-body h1{font-size:22px;margin:var(--s3) 0 var(--s2)}
+.readme .readme-body h2{font-size:17px;margin:var(--s3) 0 var(--s2);border-bottom:1px solid var(--line);padding-bottom:var(--s1)}
+.readme .readme-body h3{font-size:14px}
+.readme-body img{max-width:100%;height:auto;border-radius:4px}
+.readme-body pre{overflow-x:auto;padding:var(--s2);background:var(--hi3);border-radius:4px}
+.readme-body a{color:var(--blue)}

package/src/serve/hub-app/repo-sections.tsx

@@ -0,0 +1,61 @@
+// A repo page's sections: the pages reached for most, one line each at the top
+// of the left pane, over the tree, drawn the way the project list draws its
+// lines (an icon, a label, a count where it says something, its ⌥ shortcut at
+// the end, keys.ts), the current one lit. A page this repo does not have is
+// not a line. The lines come from what the page already holds (the kept
+// screen on a reload), so none arrives late and moves the tree.
+import { observer } from 'mobx-react-lite'
+import { RUNS_ID } from '../../collections/collection-types.ts'
+import { Icon, ICON } from './icons.tsx'
+import { sectionKeyLabel, type SectionId } from './keys.ts'
+import type { RepoSt } from './repo-st.ts'
+import { openWikis, WIKIS } from './wikis-view.tsx'
+
+export type RepoSection = {
+    id: SectionId
+    label: string
+    title: string
+    /** null when a number would say nothing */
+    count: number | null
+    tone: 'red' | 'warn' | null
+    on: boolean
+    go: () => void
+}
+
+const counted = (n: number, tone: 'red' | 'warn'): Pick<RepoSection, 'count' | 'tone'> => (n === 0 ? { count: null, tone: null } : { count: n, tone })
+
+export function repoSections(app: RepoSt): RepoSection[] {
+    const has = (col: string): boolean => app.cols.colMeta.some((c) => c.id === col)
+    const sel = app.sel
+    const onCol = (col: string): boolean => (sel?.t === 'col' && sel.id === col) || (sel?.t === 'item' && sel.col === col)
+    const res = app.cols.resources
+    const reds = (col: string): number => res.filter((r) => r.collection === col && r.state === 'red').length
+    const none = { count: null, tone: null }
+    const out: RepoSection[] = []
+    if (has('checks')) out.push({ id: 'checks', label: 'checks', title: 'every check the gate and the health pass run, one page each', ...counted(reds('checks'), 'red'), on: onCol('checks'), go: () => app.showCol('checks') })
+    // a page, never a resource: every hub keeps a run record
+    out.push({ id: 'runs', label: 'runs', title: 'every run on record, the slowest checks and the longest runs', ...none, on: onCol('runs'), go: () => app.cols.select('runs', RUNS_ID) })
+    if (has('asks')) {
+        const open = res.filter((r) => r.collection === 'asks' && r.type === 'ask' && r.slot !== 'done').length
+        out.push({ id: 'asks', label: 'asks', title: 'what waits on a human', ...counted(open, 'warn'), on: onCol('asks'), go: () => app.showCol('asks') })
+    }
+    if (has('tests')) out.push({ id: 'tests', label: 'tests', title: 'every test file, slowest first, then each test check', ...counted(reds('tests'), 'red'), on: sel?.t === 'tests' || onCol('tests'), go: () => app.showTests(null) })
+    const firstCat = app.media.assets[0]?.cat ?? app.cols.cachedCat ?? undefined
+    if (firstCat != null) out.push({ id: 'media', label: 'media', title: 'the assets, in the atelier', ...none, on: sel?.t === 'asset' || sel?.t === 'cat', go: () => app.showCat(firstCat) })
+    if (has(WIKIS)) out.push({ id: 'wikis', label: 'wikis', title: 'every wiki this repo mounts, as a link graph', ...none, on: onCol(WIKIS), go: () => openWikis(app) })
+    if (app.home.machine != null) out.push({ id: 'admin', label: 'admin', title: 'reload the hub, keep the repo active, archive it', ...none, on: sel?.t === 'admin', go: () => app.showAdmin() })
+    return out
+}
+
+export const Sections = observer(({ app }: { app: RepoSt }) => (
+    <nav className="rsecs" aria-label="sections">
+        {repoSections(app).map((s) => (
+            <button key={s.id} className={`rsec${s.on ? ' cur' : ''}`} aria-current={s.on ? 'page' : undefined} title={`${s.title} (${sectionKeyLabel(s.id)})`} onClick={s.go}>
+                <Icon d={ICON[s.id]} />
+                <span className="rsecl">{s.label}</span>
+                {s.count == null ? null : <b className={`rsecn n${s.tone}`}>{s.count}</b>}
+                <kbd className="pjkey">{sectionKeyLabel(s.id)}</kbd>
+            </button>
+        ))}
+    </nav>
+))

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

@@ -5,13 +5,13 @@
 // (hash-route.ts), and setSel is the one place both move together. A repo
 // that is not shown keeps all of it and polls nothing (resume, pause), and
 // only the shown one writes the url.
-import { RUNS_ID } from '../../collections/collection-types.ts'
 import { makeAutoObservable } from 'mobx'
 import { ClockSvc } from './clock-svc.ts'
 import { ColsSvc } from './cols-svc.ts'
 import { canonicalSel, currentHash, hashFor, parseHash, selOf, type HashSel } from './hash-route.ts'
 import { ComfySvc } from './comfy-svc.ts'
 import { HealthSvc } from './health-svc.ts'
+import { ReadmeSvc } from './readme-svc.ts'
 import { LiveSvc } from './live-svc.ts'
 import { MediaSvc } from './media-svc.ts'
 import { TimelineSvc } from './timeline-svc.ts'
@@ -19,13 +19,19 @@ import { TreeSvc } from './tree-svc.ts'
 import { ChecksSvc } from './checks-svc.ts'
 import { ProcessesSvc } from './processes-svc.ts'
 import { TestsSvc } from './tests-svc.ts'
+import { AdminSvc } from './admin-svc.ts'
+import { repoSections } from './repo-sections.tsx'
+import { sectionKeyLabel } from './keys.ts'
 import type { Resource } from './hub-types.ts'
 import type { HomeSt } from './home-st.ts'
 
 export type Sel = HashSel | null
 
-/** one picker target (cmd+k): run() fires the SAME action clicking would */
-export type Jump = { id: string; label: string; section: string; run: () => void }
+/** one picker target (cmd+j): run() fires the SAME action clicking would */
+/** what a picker entry wears: a repo's own icon, or a place's button icon */
+export type JumpFace = { repo: string } | { place: 'home' | 'planned' | 'activity' | 'archived' }
+/** `key`: the shortcut that does the same, printed at the entry's end */
+export type Jump = { id: string; label: string; section: string; run: () => void; face?: JumpFace; key?: string }
 
 /** all · needs (yellow+red) · red — one severity ladder for every section */
 export type Filter = 'all' | 'needs' | 'red'
@@ -47,6 +53,7 @@ export class RepoSt {
     cols: ColsSvc
     tree: TreeSvc
     health: HealthSvc
+    readme: ReadmeSvc
     checks: ChecksSvc
     comfy: ComfySvc
     timeline: TimelineSvc
@@ -55,6 +62,8 @@ export class RepoSt {
     processes: ProcessesSvc
     /** the pages behind the test groups of the tree (tests-svc.ts) */
     tests: TestsSvc
+    /** the admin page: archive behind its confirmation, reload, keep active */
+    admin: AdminSvc
     sel: Sel = null
     filter: Filter = 'all'
     /** sidebar search — live substring filter over asset + collection rows */
@@ -84,13 +93,15 @@ export class RepoSt {
         this.cols = new ColsSvc(this)
         this.tree = new TreeSvc(this)
         this.health = new HealthSvc(this)
+        this.readme = new ReadmeSvc(this)
         this.checks = new ChecksSvc(this)
         this.comfy = new ComfySvc(this)
         this.timeline = new TimelineSvc(this)
         this.live = new LiveSvc(this)
         this.processes = new ProcessesSvc(this)
         this.tests = new TestsSvc(this)
-        makeAutoObservable<this, 'beat' | 'onceRead'>(this, { onceRead: false, home: false, key: false, base: false, clock: false, media: false, cols: false, tree: false, health: false, checks: false, comfy: false, timeline: false, live: false, processes: false, tests: false, searchEl: false, beat: false })
+        this.admin = new AdminSvc(this)
+        makeAutoObservable<this, 'beat' | 'onceRead'>(this, { onceRead: false, home: false, key: false, base: false, clock: false, media: false, cols: false, tree: false, health: false, readme: false, checks: false, comfy: false, timeline: false, live: false, processes: false, tests: false, admin: false, searchEl: false, beat: false })
     }
 
     /** an absolute hub path ('/api/…', '/media/…', '/hub.json') as this
@@ -215,10 +226,11 @@ export class RepoSt {
             out.push({ id: `cat:${cat}`, label: cat, section: 'media', run: () => this.showCat(cat) })
         for (const a of this.media.assets)
             out.push({ id: `asset:${a.id}`, label: a.label, section: a.cat, run: () => this.selectAsset(a.id) })
-        // the runs page is a page, not a resource, so no collection lists it
-        out.push({ id: 'page:runs', label: 'runs', section: 'page', run: () => this.cols.select('runs', RUNS_ID) })
+        // the section lines, with their keys: the same list the left pane draws
+        const secs = repoSections(this)
+        for (const s of secs) out.push({ id: `section:${s.id}`, label: s.label, section: 'section', key: sectionKeyLabel(s.id), run: s.go })
         for (const col of this.cols.sidebarCols) {
-            out.push({ id: `col:${col.id}`, label: col.title, section: 'section', run: () => this.showCol(col.id) })
+            if (!secs.some((s) => s.id === col.id)) out.push({ id: `col:${col.id}`, label: col.title, section: 'section', run: () => this.showCol(col.id) })
             for (const i of col.instances)
                 out.push({ id: `item:${i.id}`, label: i.text, section: col.title, run: () => this.cols.select(col.id, i.id) })
         }
@@ -272,6 +284,12 @@ export class RepoSt {
         this.cols.select(r.collection, r.id)
     }
 
+    /** what administers the repo: reload its hub, keep it active, archive it */
+    showAdmin(): void {
+        this.admin.cancel()
+        this.setSel({ t: 'admin' })
+    }
+
     /** collection view — one card per instance */
     showCol(id: string): void {
         this.setSel({ t: 'col', id })
@@ -285,6 +303,7 @@ export class RepoSt {
             case 'item': return this.cols.select(sel.col, sel.id)
             case 'status': return this.showStatus()
             case 'tests': return this.showTests(sel.check)
+            case 'admin': return this.showAdmin()
         }
     }
     /** the url decides the page: a reload, back, forward and a pasted link

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

@@ -7,7 +7,7 @@ export type RunsTab = 'runs' | 'files' | 'slowest' | 'longest'
 
 /** the four lists, in tab order. `key` is what the address carries */
 export const RUNS_TABS: { key: RunsTab; label: string; help: string }[] = [
-    { key: 'runs', label: 'runs', help: `every run on record, newest first: shipkit ci, shipkit check, the hub's buttons, and the runs the plan starts. One line per run: when, who started it, what ran, its wall time, how many checks ${RAN}, how many were ${CACHED} (answered from the cache, nothing ran), and its reds. Unfold a run for one line per check, named by its title with its id as the small tag, in a box that scrolls: its reds first, then what ${RAN}, slowest first, then what was ${CACHED}. Click a check for its page. Every run in time, and how many ran at once, is the live strip under the header: unfold it and press fit` },
+    { key: 'runs', label: 'runs', help: `every run on record, newest first: shipkit ci, shipkit check, the hub's buttons, and the runs the plan starts. One line per run: when, who started it, what ran, its wall time, how many checks ${RAN}, how many were ${CACHED} (answered from the cache, nothing ran), and its reds. Unfold a run for one line per check, named by its title with its id as the small tag, in a box that scrolls: its reds first, then what ${RAN}, slowest first, then what was ${CACHED}. Click a check for its page. Every run in time, and how many ran at once, is the chart under this list: press fit for the whole record` },
     { key: 'files', label: 'test files to fix', help: "bun test files, not checks: each file's last recorded run inside the check that ran it (test, test:<unit>), kept when a test in it failed or when it broke the quick tier budget per file. The same verdict colours the file in the tree under tests. Click a file for its page, the check tag for the check" },
     { key: 'slowest', label: 'slowest checks', help: 'the checks that cost the most when they really run: the mean and the worst of the runs that ran. A check whose worst run passed half its ceiling is flagged, because the next slow machine trips it' },
     { key: 'longest', label: 'longest runs', help: 'the invocations on record that took the longest, start to end, whatever ran them' },

package/src/serve/hub-app/sidebar.tsx

@@ -0,0 +1,84 @@
+// A repo page's left pane: its sections (repo-sections.tsx), then the tree of
+// every resource of the repo, one row deep in its path, under its filter, its
+// two tabs and its severity filter. Only the tree scrolls, so the sections and
+// the filter stay in reach. The row itself is tree-row.tsx.
+import { observer } from 'mobx-react-lite'
+import { Help } from './help.tsx'
+import { SEARCH_KEY } from './keys.ts'
+import { Sections } from './repo-sections.tsx'
+import type { RepoSt } from './repo-st.ts'
+import { TYPE_MARK } from './tree-build.ts'
+import { TreeRowView } from './tree-row.tsx'
+
+const Tree = observer(({ app }: { app: RepoSt }) => {
+    const t = app.tree
+    return (
+        // roving focus: the arrows belong to the tree only while it HAS the
+        // focus, so the atelier keeps its own keys
+        <div className="tree" tabIndex={0} onKeyDown={(e) => { if (t.key(e.key)) e.preventDefault() }}>
+            {t.rows.map((r) => <TreeRowView key={r.key} app={app} row={r} />)}
+            {!app.cols.loaded && !app.cols.cached ? <div className="tempty twait"><span className="spin" />reading the repo…</div> : null}
+            {app.cols.loaded && t.rows.length === 0 ? <div className="tempty">{app.filter === 'red' ? 'no reds — nothing is blocked ✨' : app.filter === 'needs' ? 'nothing needs you ✨' : 'no resources yet'}</div> : null}
+        </div>
+    )
+})
+
+/** what every glyph in the type slot means, behind one `(?)` */
+const TypeLegend = () => (
+    <Help text={
+        <span className="legend">
+            {Object.entries(TYPE_MARK).map(([kind, m]) => (
+                <span key={kind} className="lrow"><i className={`ty ${m.hue}`}>{m.glyph}</i>{m.word}</span>
+            ))}
+        </span>
+    } />
+)
+
+const TreeTabs = observer(({ app }: { app: RepoSt }) => (
+    <span className="seg">
+        {(['path', 'type'] as const).map((t) => (
+            <button key={t} className={app.tree.tab === t ? 'on' : ''} onClick={() => app.tree.setTab(t)}>by {t}</button>
+        ))}
+    </span>
+))
+
+// segmented severity filter — all · needs (yellow+red) · red, the address
+// rides at /?f=… so a filtered view is shareable. The shortcut letter rides
+// INSIDE its own button, so the binding is discoverable without a legend
+const FILTER_KEY = { all: 'a', needs: 'n', red: 'r' } as const
+const SegFilter = observer(({ app }: { app: RepoSt }) => (
+    <span className="seg">
+        {(['all', 'needs', 'red'] as const).map((f) => (
+            <button key={f} className={app.filter === f ? 'on' : ''} onClick={() => app.setFilter(f)}>
+                {f}<span className="sk">{FILTER_KEY[f]}</span>
+            </button>
+        ))}
+    </span>
+))
+
+export const Sidebar = observer(({ app }: { app: RepoSt }) => (
+    <aside>
+        <Sections app={app} />
+        <div className="ssearch">
+            <span className="sfield">
+                <input ref={(el) => { app.searchEl = el }} placeholder="filter" aria-label="filter the tree" value={app.query}
+                    onChange={(e) => app.setQuery(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Escape') app.setQuery('') }} />
+                <kbd className="skey">{SEARCH_KEY}</kbd>
+            </span>
+            <SegFilter app={app} />
+        </div>
+        <div className="stabs">
+            <TreeTabs app={app} />
+            <span className="sp" />
+            <TypeLegend />
+            <span className="cnt">{app.tree.visible.length}</span>
+        </div>
+        {/* its line is held while the repo is read, so the tree never drops under it */}
+        {app.tree.whenLine === '' && app.cols.loaded ? null : <div className="swhen">{app.tree.whenLine === '' ? ' ' : app.tree.whenLine}</div>}
+        {app.media.dead != null ? <div className="tempty"><span className="warnline">media API down: {app.media.dead}</span></div> : null}
+        <div className="tscroll">
+            <Tree app={app} />
+        </div>
+    </aside>
+))

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

@@ -1,11 +1,12 @@
-// THE PAGES OF THE TEST GROUPS: `tests` itself, one line per test check, and
+// THE PAGES OF THE TEST GROUPS: `tests` itself, every test file of the repo
+// slowest first then one line per test check, and
 // each test check (`test`, `test:<unit>`), which answers one question: where
 // does its time go. The check's own facts (its sentence, its command, its
 // last wall time and its trend) are the check page's pieces, read from the
 // resource the tree already holds. The breakdown is the one fetch the page
 // makes (tests-svc.ts), shaped on the server (collections/test-time.ts).
 import { observer } from 'mobx-react-lite'
-import type { FailingFile, FileTime, LastRun, Phases, Shape, TestCheckRow, TestCheckView, TestsRootView } from '../../collections/test-time.ts'
+import type { FailingFile, FileTime, LastRun, Phases, Shape, TestCheckRow, TestCheckView, TestFileRow, TestsRootView } from '../../collections/test-time.ts'
 import { CommandLine, LastRunValue, Row, Says, Section, Timings } from './check-view.tsx'
 import { durationTone, fmtMs } from './dur.ts'
 import type { RepoSt } from './repo-st.ts'
@@ -217,16 +218,42 @@ const CheckRows = observer(({ app, rows }: { app: RepoSt; rows: TestCheckRow[] }
     </div>
 ))
 
+const STATUS_WORD = { pass: 'pass', fail: 'fail' } as const
+
+/** every file of every test check on one list, slowest first: the answer to
+ *  "which tests are slow", whatever check runs them */
+const AllFiles = observer(({ app, rows }: { app: RepoSt; rows: TestFileRow[] }) => (
+    <div className="rlist">
+        <div className="rhead rall">
+            <span className="tleft">file</span>
+            <span className="tleft">check</span>
+            <span>duration</span>
+            <span>status</span>
+            <span>when</span>
+        </div>
+        {rows.map((f) => (
+            <div key={f.file} className={`rline rall${f.status === 'fail' ? ' red' : ''}`} title={f.file} onClick={() => app.tests.openFile(f.file)}>
+                <span className="rwhat">{f.inUnit}</span>
+                <span className="rtag" title="the check that runs it">{f.check}</span>
+                <span className={`rnum ${fileTone(f)}`}>{f.ms == null ? <span className="dim">never ran</span> : fmtMs(f.ms)}</span>
+                <span className={`rnum ${f.status === 'fail' ? 'bad' : 'dim'}`}>{f.status == null ? '' : STATUS_WORD[f.status]}</span>
+                {f.at == null ? <span /> : <TimeAgo clock={app.clock} at={f.at} />}
+            </div>
+        ))}
+    </div>
+))
+
 export const TestsRootPage = observer(({ app }: { app: RepoSt }) => {
     const v: TestsRootView | null = app.tests.root()
     return (
         <div className="colcard checkcard">
             <div className="chead">
                 <span className="tid">tests</span>
-                <h3 className="ctitle">every test check</h3>
+                <h3 className="ctitle">every test</h3>
             </div>
-            <div className="usays">each test check's last run: its wall time, its files, how many fail, the slowest file. Click a check for where its time goes</div>
+            <div className="usays">every test file by its last recorded duration, then each test check's last run. Click a file for its page, a check for where its time goes</div>
             {v == null ? <Loading app={app} check={null} /> : <>
+                <Section title={`every test file (${v.files.length})`} help="every file of every test check, by its last recorded duration in the shared run, slowest first; the ones that never ran here last. Its tone is against its budget: over it reads red"><AllFiles app={app} rows={v.files} /></Section>
                 <Section title="test checks" help="one line per test check, slowest wall first"><CheckRows app={app} rows={v.checks} /></Section>
                 <Failing app={app} rows={v.failing} showCheck />
             </>}