rvlib-shipkit 1.1.1 → 1.3.0

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

@@ -1,14 +1,73 @@
-// the project gutter's state: every repo on this disk that shares the house
-// wiki, polled from /api/projects.json while the gutter is mounted. The
+// the project list's state: every repo on this disk that shares the house
+// wiki, polled from /api/projects.json while the list is mounted. The
 // server measures at most once per 5s whatever the number of tabs, so this
 // poll is cheap.
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
-import type { ProjectRow as Project, Release } from '../project-gutter-route.ts'
-import type { HubSt } from './hub-st.ts'
+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 */
+export const IDENTITY_SAVE_MS = 400
+
+/** where this browser keeps the last project list, painted at once on the
+ *  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[] {
+    try {
+        const v = JSON.parse(globalThis.localStorage?.getItem(LIST_KEY) ?? '[]') as unknown
+        return Array.isArray(v) && v.every((p) => typeof (p as Project)?.name === 'string') ? (v as Project[]) : []
+    } catch {
+        return []
+    }
+}
+
+/** keeps the list for the next load; false when storage refused it */
+export function saveList(list: Project[]): boolean {
+    try {
+        globalThis.localStorage?.setItem(LIST_KEY, JSON.stringify(list))
+        return true
+    } catch {
+        return false
+    }
+}
 
 /** one of six kind hues, hashed from the name, so an initial keeps its
  *  colour from one load to the next */
@@ -51,6 +110,20 @@ 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 */
+export type HubDot = 'starting' | 'crashed' | null
+
 /** what the icon face shows, and nothing more: at most ONE badge (the open
  *  asks, the only fact that needs a human's hands), dim while VS Code does
  *  not have the folder open, and a pulsing edge while Claude sessions run */
@@ -99,22 +172,149 @@ export function cardModel(p: Project, now: number): CardModel {
     }
 }
 
+/** a page of the home that is no repo's */
+export type Place = 'overview' | 'planned' | 'activity'
+
 export class ProjectsSvc {
-    list: Project[] = []
-    /** why the last poll or open failed, shown in the gutter's tooltip */
+    /** the last list this browser saw until the first poll answers, so the
+     *  list paints at once and nothing moves when the daemon answers */
+    list: Project[] = loadList()
+    /** why the last poll or open failed, shown on the list's head */
     error = ''
-    /** the icon under the pointer and the middle of its row, for the card */
-    hover: { name: string; y: number } | null = null
+    /** 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 */
+    hover: string | null = null
     /** 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, 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
+     *  of its own opens the home on it. Default: the folder in VS Code */
+    onSelect: (name: string) => void = (name) => void this.open(name)
+    /** 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 */
+    warnOf: (name: string) => string | null = () => null
     private gen = 0
+    /** a colour write waiting for the picker to rest, per repo: a poll keeps
+     *  the colour shown for that repo meanwhile */
+    private identitySaves = new Map<string, ReturnType<typeof setTimeout>>()
     /** bumped by every reorder, so a poll that left before it cannot put
      *  the old order back */
     private orderGen = 0
 
-    constructor(private st: HubSt) {
-        makeAutoObservable<this, 'st' | 'gen' | 'orderGen'>(this, { st: false, gen: false, orderGen: false, list: observableRef })
+    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, onPicker: false, pickerOpen: false, onArchived: false, dotOf: false, warnOf: false })
+    }
+
+    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 {
+        if (this.selected != null) return p.name === this.selected
+        return this.onPlace == null && p.current
+    }
+
+    select(name: string): void {
+        this.selected = name
+        this.onSelect(name)
+    }
+
+
+    /** a click selects once it is sure no second click follows */
+    click(name: string): void {
+        this.select(name)
+    }
+
+    /** a double click also opens the folder in VS Code (its first click already selected) */
+    doubleClick(name: string): void {
+        void this.open(name)
+    }
+
+    /** a repo's colours: what its config declares, else the ones SK024 would
+     *  derive from its name, so every repo reads in a colour of its own */
+    identityOf(name: string): Identity {
+        return this.list.find((p) => p.name === name)?.identity ?? identityOfName(name)
+    }
+
+    /** one colour set by hand: shown at once, written into the repo's
+     *  repo.config.ts once the picker rests, so a drag across the colour
+     *  field is one write, not one per frame */
+    setIdentity(name: string, patch: Partial<Identity>): void {
+        const next = { ...this.identityOf(name), ...patch }
+        this.list = this.list.map((p) => (p.name === name ? { ...p, identity: next } : p))
+        const t = this.identitySaves.get(name)
+        if (t != null) clearTimeout(t)
+        const h: ReturnType<typeof setTimeout> = setTimeout(() => void this.saveIdentity(name, next, h), IDENTITY_SAVE_MS)
+        this.identitySaves.set(name, h)
+    }
+
+    private async saveIdentity(name: string, id: Identity, h: ReturnType<typeof setTimeout>): Promise<void> {
+        try {
+            const r = await fetch('/api/projects/identity', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name, ...id }) })
+            if (!r.ok) throw new Error(await r.text())
+            const j = (await r.json()) as { identity: Identity }
+            runInAction(() => {
+                if (this.identitySaves.get(name) === h) this.list = this.list.map((p) => (p.name === name ? { ...p, identity: j.identity } : p))
+                this.error = ''
+            })
+        } catch (e) {
+            runInAction(() => { this.error = `colours of ${name}: ${(e as Error).message}` })
+        } finally {
+            // a later pick rests on its own timer, which keeps the guard
+            if (this.identitySaves.get(name) === h) this.identitySaves.delete(name)
+        }
     }
 
     get dragFrom(): number {
@@ -127,16 +327,12 @@ export class ProjectsSvc {
         return this.gap
     }
 
-    hoverIn(name: string, y: number): void {
-        if (this.drag == null) this.hover = { name, y }
+    hoverIn(name: string): void {
+        if (this.drag == null) this.hover = name
     }
 
     hoverOut(name: string): void {
-        if (this.hover?.name === name) this.hover = null
-    }
-
-    get hovered(): Project | null {
-        return this.hover == null ? null : this.list.find((p) => p.name === this.hover!.name) ?? null
+        if (this.hover === name) this.hover = null
     }
 
     dragStart(name: string): void {
@@ -162,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 */
@@ -187,6 +404,7 @@ export class ProjectsSvc {
         const gen = ++this.gen
         const tick = async (): Promise<void> => {
             await this.load()
+            this.keep()
             if (gen === this.gen) timer = setTimeout(() => void tick(), PROJECTS_POLL_MS)
         }
         let timer: ReturnType<typeof setTimeout> | null = null
@@ -197,17 +415,29 @@ export class ProjectsSvc {
         }
     }
 
+    /** the list as it is now, kept for the next load. Only a change is
+     *  written: the poll repeats the same rows every five seconds */
+    private kept = ''
+    private keep(): void {
+        if (!this.fresh) return
+        const s = JSON.stringify(this.list)
+        if (s !== this.kept && saveList(this.list)) this.kept = s
+    }
+
     async load(): Promise<void> {
         const order = this.orderGen
         try {
             const r = await fetch('/api/projects.json')
             if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
-            const j = (await r.json()) as { projects: Project[] }
+            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
-                this.list = j.projects
+                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
             })
         } catch (e) {
             runInAction(() => { this.error = `projects: ${(e as Error).message}` })

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

@@ -5,7 +5,7 @@
 // the same reasons a switch is.
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { ProseGroup, ProseView } from '../../prose/prose-view.ts'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 
 export type TierFilter = 'all' | 'blocking' | 'soft'
 export type ListKind = 'allow' | 'ban'
@@ -29,7 +29,7 @@ export class ProseHitsSt {
     full = new Set<string>()
     form: { kind: ListKind; word: string; to: string; reason: string } = { kind: 'allow', word: '', to: '', reason: '' }
 
-    constructor(private st: HubSt) {
+    constructor(private st: RepoSt) {
         // .ref: the view is swapped whole on every load, never edited in place
         makeAutoObservable<this, 'st'>(this, { st: false, view: observableRef })
     }
@@ -37,7 +37,7 @@ export class ProseHitsSt {
     async load(): Promise<void> {
         runInAction(() => { this.loading = true })
         try {
-            const r = await fetch('/api/prose.json')
+            const r = await fetch(this.st.url('/api/prose.json'))
             if (!r.ok) throw new Error(await r.text())
             const v = (await r.json()) as ProseView
             runInAction(() => { this.view = v; this.error = '' })

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

@@ -9,7 +9,7 @@ import type { ProseGroup, ProseViewHit } from '../../prose/prose-view.ts'
 import type { ProseWords } from '../../prose/ste.ts'
 import { editorHref } from './check-words.ts'
 import { Help } from './help.tsx'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import { GROUP_CAP, HIT_CAP, ProseHitsSt, type ListKind, type TierFilter } from './prose-hits-st.ts'
 
 /** blocking tiers read red, the soft tier reads as a warning */
@@ -47,7 +47,7 @@ const HitLine = ({ root, h, shape }: { root: string; h: ProseViewHit; shape: boo
     )
 }
 
-const Group = observer(({ app, s, g }: { app: HubSt; s: ProseHitsSt; g: ProseGroup }) => {
+const Group = observer(({ app, s, g }: { app: RepoSt; s: ProseHitsSt; g: ProseGroup }) => {
     const open = s.open.has(g.key)
     const t = TIER_WORD[g.tier] ?? { word: g.tier, tone: '' }
     const shown = s.full.has(g.key) ? g.hits : g.hits.slice(0, HIT_CAP)
@@ -77,7 +77,7 @@ const Group = observer(({ app, s, g }: { app: HubSt; s: ProseHitsSt; g: ProseGro
     )
 })
 
-const Hits = observer(({ app, s }: { app: HubSt; s: ProseHitsSt }) => {
+const Hits = observer(({ app, s }: { app: RepoSt; s: ProseHitsSt }) => {
     const v = s.view
     if (v == null) return <div className="dim">{s.error !== '' ? s.error : 'reading the hits…'}</div>
     if (!v.scoped) return <div className="dim">this repo declares no prose scope, so the check reads no file: add `prose: {'{'} include: [...] {'}'}` to repo.config.ts</div>
@@ -130,7 +130,7 @@ const ListRows = ({ s, words }: { s: ProseHitsSt; words: ProseWords }) => {
     )
 }
 
-const Lists = observer(({ app, s }: { app: HubSt; s: ProseHitsSt }) => {
+const Lists = observer(({ app, s }: { app: RepoSt; s: ProseHitsSt }) => {
     const f = s.form
     const g = app.checks.gate
     return (
@@ -154,7 +154,7 @@ const Lists = observer(({ app, s }: { app: HubSt; s: ProseHitsSt }) => {
 })
 
 /** the two sections over one state, the part a test renders headless */
-export const ProseSections = observer(({ app, s }: { app: HubSt; s: ProseHitsSt }) => (
+export const ProseSections = observer(({ app, s }: { app: RepoSt; s: ProseHitsSt }) => (
     <>
         <section className="csec">
             <div className="cstitle">hits<Help text="every hit of the last read, grouped by the word or the rule that fired, the noisiest first. A file:line opens the editor on that line" /></div>
@@ -169,7 +169,7 @@ export const ProseSections = observer(({ app, s }: { app: HubSt; s: ProseHitsSt
 
 /** mounted by the check page for SK014 only: the state lives while the page
  *  is open, and reads the hits once on the way in */
-export const ProseHits = observer(({ app }: { app: HubSt }) => {
+export const ProseHits = observer(({ app }: { app: RepoSt }) => {
     const s = useMemo(() => new ProseHitsSt(app), [app])
     useEffect(() => { void s.load() }, [s])
     return <ProseSections app={app} s={s} />

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>
+))