rvlib-shipkit 1.4.0 → 1.6.0

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

@@ -21,11 +21,14 @@
 .pjarow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .pjarow img{flex:none;border-radius:3px;object-fit:contain}
 .pjaini{flex:none;width:14px;height:14px;border-radius:3px;background:var(--panel2)}
-/* the foot's two buttons: sort names the order the list is in, archived
+/* the foot: sort (its title names the order), the step keys hint, archived
    carries its count and stays lit while its rows show */
 .pgsort,.pjarbtn{flex:none;display:inline-flex;align-items:center;gap:var(--s1);height:22px;padding:0 var(--s1);background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--dim);font-size:11px;cursor:pointer}
 .pgsort{flex:0 1 auto;min-width:0}
+/* the step keys, a hint: the repo above or below */
+.pjstep{flex:none;display:inline-flex;gap:var(--s0);margin-left:auto;color:var(--dim);font-size:11px}
+.pjstep kbd{padding:0 var(--s1);border:1px solid var(--line);border-radius:3px;font:inherit}
 .pgsortl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .pgsort .hico,.pjarbtn .hico{flex:none;width:14px;height:14px}
 .pgsort:hover,.pjarbtn:hover{color:var(--ink);border-color:var(--accent)}

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

@@ -24,7 +24,7 @@ import { useEffect, type CSSProperties } from 'react'
 import { middleware, OPEN_MS } from './floating.tsx'
 import { Icon, ICON } from './icons.tsx'
 import { plainClick } from './home-st.ts'
-import { PICKER_KEY, PLACE_KEY } from './keys.ts'
+import { PICKER_KEY, PLACE_KEY, STEP_KEYS } from './keys.ts'
 import { cardModel, faceOf, hueOf, SORTS, 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 */
@@ -195,6 +195,9 @@ export const ProjectList = observer(({ app }: { app: ListHost }) => {
             ) : null}
             <div className="pjfoot">
                 <SortButton s={s} />
+                <span className="pjstep" title={`${STEP_KEYS[0]} and ${STEP_KEYS[1]} open the repo above or below, from any page`}>
+                    {STEP_KEYS.map((k) => <kbd key={k}>{k}</kbd>)}
+                </span>
                 {s.archived.length === 0 || s.onArchived == null ? null : (
                     <button className={`pjarbtn${s.archivedOpen ? ' on' : ''}`} aria-pressed={s.archivedOpen}
                         title={`${s.archivedOpen ? 'hide' : 'show'} the ${s.archived.length} archived repos: nothing runs there, a row opens the archived page`}
@@ -213,7 +216,7 @@ const orderWords = (s: ProjectsSvc): string => {
     return m === 'manual' ? 'manual order' : SORTS.find((x) => x.id === m)!.label
 }
 
-/** the sort button: it names the order the list is in and opens the menu,
+/** the sort button: its title names the order the list is in, it opens the menu,
  *  and sorts nothing itself */
 const SortButton = observer(({ s }: { s: ProjectsSvc }) => {
     const f = useFloating({
@@ -231,7 +234,7 @@ const SortButton = observer(({ s }: { s: ProjectsSvc }) => {
         <>
             <button ref={f.refs.setReference} className="pgsort" title={`the list is in ${orderWords(s)}: pick a sort`}
                 {...getReferenceProps({ onClick: () => s.toggleSortMenu() })}>
-                <Icon d={ICON.sort} /><span className="pgsortl">{orderWords(s)}</span>
+                <Icon d={ICON.sort} /><span className="pgsortl">sort</span>
             </button>
             {s.sortMenuOpen ? (
                 <FloatingPortal>

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

@@ -5,6 +5,11 @@
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { ArchivedRow, ProjectRow as Project, Release } from '../project-gutter-route.ts'
 import { identityOfName, type Identity } from '../../core/identity-color.ts'
+import { ownTrouble, reach } from './reach.ts'
+
+/** the list never says the page's server is gone, even where no machine
+ *  card is (a hub on its own): that hub's trouble card says it */
+const SAID_ELSEWHERE = true
 
 export type { ArchivedRow, ProjectRow as Project, Release } from '../project-gutter-route.ts'
 
@@ -250,12 +255,12 @@ export class ProjectsSvc {
      *  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 }) })
+            const r = await reach('/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}` })
+            runInAction(() => { this.error = ownTrouble(e, SAID_ELSEWHERE, (m) => `${on ? 'archive' : 'unarchive'} ${name}: ${m}`) })
         }
     }
 
@@ -272,6 +277,16 @@ export class ProjectsSvc {
     }
 
 
+    /** the repo above (-1) or below (+1) the selected one, round the ends;
+     *  with none selected, down starts at the top and up at the bottom */
+    step(by: -1 | 1): void {
+        const n = this.list.length
+        if (n === 0) return
+        const at = this.list.findIndex((p) => this.isCurrent(p))
+        const next = at === -1 ? (by === 1 ? 0 : n - 1) : (at + by + n) % n
+        this.select(this.list[next]!.name)
+    }
+
     /** a click selects once it is sure no second click follows */
     click(name: string): void {
         this.select(name)
@@ -302,7 +317,7 @@ export class ProjectsSvc {
 
     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 }) })
+            const r = await reach('/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(() => {
@@ -310,7 +325,7 @@ export class ProjectsSvc {
                 this.error = ''
             })
         } catch (e) {
-            runInAction(() => { this.error = `colours of ${name}: ${(e as Error).message}` })
+            runInAction(() => { this.error = ownTrouble(e, SAID_ELSEWHERE, (m) => `colours of ${name}: ${m}`) })
         } finally {
             // a later pick rests on its own timer, which keeps the guard
             if (this.identitySaves.get(name) === h) this.identitySaves.delete(name)
@@ -390,11 +405,11 @@ export class ProjectsSvc {
         const by = new Map(this.list.map((p) => [p.name, p]))
         this.list = names.map((n) => by.get(n)).filter((p): p is Project => p != null)
         try {
-            const r = await fetch('/api/projects/order', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ names }) })
+            const r = await reach('/api/projects/order', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ names }) })
             if (!r.ok) throw new Error(await r.text())
             runInAction(() => { this.error = '' })
         } catch (e) {
-            runInAction(() => { this.error = `reorder: ${(e as Error).message}` })
+            runInAction(() => { this.error = ownTrouble(e, SAID_ELSEWHERE, (m) => `reorder: ${m}`) })
         }
     }
 
@@ -427,7 +442,7 @@ export class ProjectsSvc {
     async load(): Promise<void> {
         const order = this.orderGen
         try {
-            const r = await fetch('/api/projects.json')
+            const r = await reach('/api/projects.json')
             if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
             const j = (await r.json()) as { projects: Project[]; archived?: ArchivedRow[] }
             runInAction(() => {
@@ -440,17 +455,17 @@ export class ProjectsSvc {
                 this.fresh = true
             })
         } catch (e) {
-            runInAction(() => { this.error = `projects: ${(e as Error).message}` })
+            runInAction(() => { this.error = ownTrouble(e, SAID_ELSEWHERE, (m) => `projects: ${m}`) })
         }
     }
 
     async open(name: string): Promise<void> {
         try {
-            const r = await fetch('/api/projects/open', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name }) })
+            const r = await reach('/api/projects/open', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name }) })
             if (!r.ok) throw new Error(await r.text())
             runInAction(() => { this.error = '' })
         } catch (e) {
-            runInAction(() => { this.error = `open ${name}: ${(e as Error).message}` })
+            runInAction(() => { this.error = ownTrouble(e, SAID_ELSEWHERE, (m) => `open ${name}: ${m}`) })
         }
     }
 }

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

@@ -6,6 +6,7 @@
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { ProseGroup, ProseView } from '../../prose/prose-view.ts'
 import type { RepoSt } from './repo-st.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 export type TierFilter = 'all' | 'blocking' | 'soft'
 export type ListKind = 'allow' | 'ban'
@@ -37,12 +38,12 @@ export class ProseHitsSt {
     async load(): Promise<void> {
         runInAction(() => { this.loading = true })
         try {
-            const r = await fetch(this.st.url('/api/prose.json'))
+            const r = await reach(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 = '' })
         } catch (e) {
-            runInAction(() => { this.error = `the hits could not be read: ${(e as Error).message}` })
+            runInAction(() => { this.error = ownTrouble(e, this.st.home.machine, (m) => `the hits could not be read: ${m}`) })
         }
         runInAction(() => { this.loading = false })
     }

package/src/serve/hub-app/reach.ts

@@ -0,0 +1,36 @@
+// the one reading of "nothing behind the page answers": the web itself (a
+// fetch that never gets an answer), or the daemon or pm behind it (the web's
+// tagged 502, serve-web.ts). On the home that is one fact about the machine,
+// said once, by the card under the strip (MachineSt). Every other surface
+// that fails for it stays silent and keeps what it last read.
+
+export type Who = 'web' | 'daemon' | 'pm'
+
+export class Unreachable extends Error {
+    constructor(msg: string, readonly who: Who) {
+        super(msg)
+    }
+}
+
+/** fetch, with the machine not answering thrown as Unreachable. Any other
+ *  answer comes back as it is, an error status included */
+export async function reach(input: string, init?: RequestInit): Promise<Response> {
+    let r: Response
+    try {
+        r = await fetch(input, init)
+    } catch (e) {
+        throw new Unreachable((e as Error).message, 'web')
+    }
+    if (r.headers.get('x-shipkit-daemon') === 'down') throw new Unreachable(await r.text(), 'daemon')
+    if (r.headers.get('x-shipkit-pm') === 'down') throw new Unreachable(await r.text(), 'pm')
+    return r
+}
+
+/** the words a surface shows for its failed request, or '' when the failure
+ *  is the machine's: the machine card says that. `machine` is whether the
+ *  page has one: a hub serving on its own has none, so a server it cannot
+ *  reach is its own trouble there */
+export function ownTrouble(e: unknown, machine: unknown, words: (msg: string) => string = (m) => m): string {
+    if (e instanceof Unreachable && (e.who !== 'web' || machine != null)) return ''
+    return words((e as Error).message)
+}

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

@@ -2,6 +2,7 @@
 // empty page shows, so an edited README appears without a reload
 import { makeAutoObservable, runInAction } from 'mobx'
 import type { RepoSt } from './repo-st.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 export class ReadmeSvc {
     /** the file name at the root, null when the repo has none */
@@ -19,7 +20,7 @@ export class ReadmeSvc {
 
     async load(): Promise<void> {
         try {
-            const r = await fetch(this.st.url('/api/readme.json'))
+            const r = await reach(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(() => {
@@ -30,7 +31,7 @@ export class ReadmeSvc {
             })
         } catch (e) {
             runInAction(() => {
-                this.error = `README fetch broke: ${(e as Error).message}`
+                this.error = ownTrouble(e, this.st.home.machine, (m) => `README fetch broke: ${m}`) || null
                 this.loaded = true
             })
         }

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

@@ -0,0 +1,131 @@
+// A repo page's sections: the pages reached for most, the top rows of the
+// left pane's tree (tree-row.tsx draws them 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). Every repo draws the same rows, so
+// the list reads the same from repo to repo: a section this repo has nothing
+// in is a greyed row, and only opens a page that can say it is empty (the
+// processes page). Plan, git and admin come from the machine, so a hub of its
+// own has none of the three. The counts read the severity filter, like everything under them,
+// and come from what the page already holds (the kept screen on a reload), so
+// none arrives late and moves the tree.
+import { RUNS_ID } from '../../collections/collection-types.ts'
+import type { CheckOwner, HashSel } from './hash-route.ts'
+import { sectionLabel, type SectionId } from './keys.ts'
+import type { RepoSt } from './repo-st.ts'
+import { passesFilter } from './tree-build.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
+    /** this repo has nothing there: the row is greyed */
+    empty: boolean
+    /** its click opens a page: false for an empty section with no empty page */
+    opens: boolean
+    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 })
+
+/** the section a page belongs to: a collection, one of its items, its own
+ *  page. null for a page no section owns (the table of every check). A check
+ *  lives under whose it is, which only the resource knows: `ownerOf` reads it */
+export function sectionOfSel(sel: HashSel | null, ownerOf: (checkItemId: string) => CheckOwner | null = () => null): SectionId | null {
+    if (sel == null) return 'readme'
+    switch (sel.t) {
+        case 'readme': return 'readme'
+        case 'processes': return 'processes'
+        case 'plan': return 'plan'
+        case 'git': return 'git'
+        case 'when': return 'when'
+        case 'checks': return sel.from
+        case 'admin': return 'admin'
+        case 'tests': return 'tests'
+        case 'asset': case 'cat': return 'media'
+        case 'status': return null
+        case 'col': case 'item': {
+            const col = sel.t === 'col' ? sel.id : sel.col
+            if (col === RUNS_ID) return 'runs'
+            if (col === WIKIS) return 'wikis'
+            if (col === 'contracts') return 'contracts'
+            if (col === 'creds') return 'secrets'
+            if (col === 'checks') return sel.t === 'item' ? ownerOf(sel.id) : null
+            return col === 'asks' || col === 'tests' || col === 'reflections' ? col : null
+        }
+    }
+}
+
+/** the section a repo's current page belongs to, a check read off its
+ *  resource for whose it is */
+export const sectionOfRepo = (app: RepoSt): SectionId | null =>
+    sectionOfSel(app.sel, (id) => app.cols.find('checks', id)?.check?.from ?? null)
+
+/** open a section's own page, through the calls a click makes */
+export function openSection(app: RepoSt, id: SectionId): void {
+    switch (id) {
+        case 'readme': return app.showReadme()
+        case 'contracts': return app.showCol('contracts')
+        case 'shipkit': case 'repo': return app.showChecks(id)
+        case 'secrets': return app.showCol('creds')
+        case 'runs': return app.cols.select('runs', RUNS_ID)
+        case 'processes': return app.showProcesses(null)
+        case 'plan': return app.showPlan()
+        case 'git': return app.showGit()
+        case 'when': return app.showWhen()
+        case 'reflections': return app.showCol('reflections')
+        case 'asks': return app.showCol('asks')
+        case 'tests': return app.showTests(null)
+        case 'media': {
+            const cat = app.media.assets[0]?.cat ?? app.cols.cachedCat ?? undefined
+            if (cat != null) app.showCat(cat)
+            return
+        }
+        case 'wikis': return openWikis(app)
+        case 'admin': return app.showAdmin()
+    }
+}
+
+/** the sections whose page says it is empty, so an empty row still opens it */
+const EMPTY_PAGES = new Set<SectionId>(['processes'])
+
+export function repoSections(app: RepoSt): RepoSection[] {
+    const has = (col: string): boolean => app.cols.colMeta.some((c) => c.id === col)
+    const cur = sectionOfRepo(app)
+    const res = app.cols.resources.filter((r) => passesFilter(r, app.filter))
+    const reds = (col: string): number => res.filter((r) => r.collection === col && r.state === 'red').length
+    const none = { count: null, tone: null }
+    const line = (id: SectionId, title: string, count: Pick<RepoSection, 'count' | 'tone'>, empty: string | null = null): RepoSection => {
+        const opens = empty == null || EMPTY_PAGES.has(id)
+        return { id, label: sectionLabel(id), title: empty ?? title, ...(empty == null ? count : none), empty: empty != null, opens, on: opens && cur === id, go: opens ? () => openSection(app, id) : () => {} }
+    }
+    const out: RepoSection[] = [line('readme', 'the README, what the repo is', none)]
+    const ownReds = (from: CheckOwner): number => res.filter((r) => r.check?.from === from && r.state === 'red').length
+    const unless = (on: boolean, why: string): string | null => (on ? null : why)
+    out.push(line('contracts', 'what a release venue asks of this repo, and what it still lacks', counted(reds('contracts'), 'red'), unless(has('contracts'), 'no contract: no release venue applies to this repo')))
+    const noChecks = unless(has('checks'), 'no checks yet: its hub has not answered')
+    out.push(line('shipkit', 'the checks shipkit ships to every repo, one page each', counted(ownReds('shipkit'), 'red'), noChecks))
+    out.push(line('repo', 'the checks this repo declares itself, one page each', counted(ownReds('repo'), 'red'), noChecks))
+    out.push(line('secrets', 'the credentials this repo needs, present or missing', counted(reds('creds'), 'red'), unless(has('creds'), 'no secrets: this repo needs no credential')))
+    out.push(line('when', 'what runs when: every check on every context (commit, ci, full, release, health, save, clock), with the legend', none, noChecks))
+    // a page, never a resource: every hub keeps a run record
+    out.push(line('runs', 'every run on record, the slowest checks and the longest runs', none))
+    // the plan and git come from the machine, so a hub of its own has neither
+    if (app.home.machine != null) out.push(line('plan', 'what the machine runs here on its own time, and when', none))
+    const procs = app.globalProcesses
+    out.push(line('processes', 'the processes this repo declares: start, stop, open, their description and their log', counted(procs.filter((r) => r.dot === 'crashed').length, 'red'),
+        unless(procs.length > 0, 'no process: this repo declares no global process (a <id>.shipkit.ts file with globalProcess adds one)')))
+    if (app.home.machine != null) out.push(line('git', 'the branch, its upstream, what is not committed, the last commits', none))
+    const open = res.filter((r) => r.collection === 'asks' && r.type === 'ask' && r.slot !== 'done').length
+    out.push(line('asks', 'what waits on a human', counted(open, 'warn'), unless(has('asks'), 'no asks: nothing has ever waited on a human here')))
+    out.push(line('reflections', 'friction this repo logged against the wiki, waiting to be folded in', counted(res.filter((r) => r.type === 'reflection').length, 'warn'), unless(has('reflections'), 'no reflections: this repo logged no friction')))
+    out.push(line('tests', 'every test file, slowest first, then each test check', counted(reds('tests'), 'red'), unless(has('tests'), 'no tests: this repo has no test file')))
+    out.push(line('media', 'the assets, in the atelier', none, unless((app.media.assets[0]?.cat ?? app.cols.cachedCat) != null, 'no media: this repo has no asset kit')))
+    out.push(line('wikis', 'every wiki this repo mounts, as a link graph', none, unless(has(WIKIS), 'no wiki: this repo mounts none')))
+    if (app.home.machine != null) out.push(line('admin', 'reload the hub, keep the repo active, archive it', none))
+    return out
+}

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

@@ -8,7 +8,7 @@
 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 { canonicalSel, currentHash, hashFor, parseHash, selOf, type CheckOwner, type HashSel } from './hash-route.ts'
 import { ComfySvc } from './comfy-svc.ts'
 import { HealthSvc } from './health-svc.ts'
 import { ReadmeSvc } from './readme-svc.ts'
@@ -17,10 +17,11 @@ import { MediaSvc } from './media-svc.ts'
 import { TimelineSvc } from './timeline-svc.ts'
 import { TreeSvc } from './tree-svc.ts'
 import { ChecksSvc } from './checks-svc.ts'
-import { ProcessesSvc } from './processes-svc.ts'
+import { GitSt } from './git-st.ts'
+import type { ProcessRow } from '../../home/process-rows.ts'
 import { TestsSvc } from './tests-svc.ts'
 import { AdminSvc } from './admin-svc.ts'
-import { repoSections } from './repo-sections.tsx'
+import { repoSections } from './repo-sections.ts'
 import { sectionKeyLabel } from './keys.ts'
 import type { Resource } from './hub-types.ts'
 import type { HomeSt } from './home-st.ts'
@@ -59,7 +60,8 @@ export class RepoSt {
     timeline: TimelineSvc
     /** the runs in flight, whoever started them (live-svc.ts) */
     live: LiveSvc
-    processes: ProcessesSvc
+    /** the git page's one repo read (git-st.ts) */
+    git: GitSt
     /** the pages behind the test groups of the tree (tests-svc.ts) */
     tests: TestsSvc
     /** the admin page: archive behind its confirmation, reload, keep active */
@@ -98,10 +100,10 @@ export class RepoSt {
         this.comfy = new ComfySvc(this)
         this.timeline = new TimelineSvc(this)
         this.live = new LiveSvc(this)
-        this.processes = new ProcessesSvc(this)
+        this.git = new GitSt(this)
         this.tests = new TestsSvc(this)
         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 })
+        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, git: false, tests: false, admin: false, searchEl: false, beat: false })
     }
 
     /** an absolute hub path ('/api/…', '/media/…', '/hub.json') as this
@@ -150,7 +152,6 @@ export class RepoSt {
         const steps: (() => Promise<unknown>)[] = [
             () => this.cols.poll(),
             () => this.readOnce(),
-            () => this.processes.load(),
             () => this.media.heartbeat(),
             () => this.live.poll(),
             () => this.timeline.load(),
@@ -171,7 +172,6 @@ export class RepoSt {
             this.applyHash()
         }
         this.clock.start()
-        this.processes.start()
         this.media.start()
         this.cols.start()
         this.live.start()
@@ -182,7 +182,6 @@ export class RepoSt {
         if (!this.polling) return
         this.polling = false
         this.clock.stop()
-        this.processes.stop()
         this.media.stop()
         this.cols.stop()
         this.live.stop()
@@ -228,9 +227,9 @@ export class RepoSt {
             out.push({ id: `asset:${a.id}`, label: a.label, section: a.cat, run: () => this.selectAsset(a.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 s of secs.filter((x) => x.opens)) 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) {
-            if (!secs.some((s) => s.id === col.id)) out.push({ id: `col:${col.id}`, label: col.title, section: 'section', run: () => this.showCol(col.id) })
+            if (!secs.some((s) => s.id === col.id && s.opens)) 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) })
         }
@@ -257,10 +256,27 @@ export class RepoSt {
         void this.tests.load(check)
     }
 
+    /** a walk with the tree's arrows is under way, and whether the current
+     *  history entry is its own: a held arrow opens ~30 pages a second, and
+     *  the browser throws past 100 pushState calls per 10 seconds */
+    private walking = false
+    private walked = false
+    /** open pages as one walk: the first step is a history entry, every next
+     *  one rewrites it, so back returns to where the walk started */
+    walk(open: () => void): void {
+        this.walking = true
+        try {
+            open()
+        } finally {
+            this.walking = false
+        }
+    }
+
     /** the ONE place a selection is written, so the url always describes what
      *  is on screen. A new page is a history entry, so back returns to the
-     *  page before it. The same address is never pushed twice: applyHash
-     *  lands here too, with the hash already naming this selection */
+     *  page before it, except inside a walk (walk). The same address is never
+     *  pushed twice: applyHash lands here too, with the hash already naming
+     *  this selection */
     setSel(sel: Sel): void {
         this.sel = sel
         const h = hashFor(sel)
@@ -270,12 +286,15 @@ export class RepoSt {
         // the tool set rides after the asset id (media-svc syncHash), so an
         // address is the same page whatever tools it carries
         if (cur.kind === next.kind && cur.col === next.col && cur.id === next.id) return
-        history.pushState(null, '', `#${h}`)
+        if (this.walking && this.walked) history.replaceState(null, '', `#${h}`)
+        else history.pushState(null, '', `#${h}`)
+        this.walked = this.walking
     }
     /** one tree row, opened: an asset goes to the atelier, everything else to
      *  its own item card. A gate check has a page of its own now, so nothing
      *  lands on the raw wall of text unless it is asked for by name */
     openResource(r: Resource): void {
+        if (r.type === 'process') return this.showProcesses(r.id.replace(/^process:/, ''))
         const assetId = r.id.replace(/^media:/, '')
         if (r.collection === 'media' && this.media.assets.some((a) => a.id === assetId)) {
             this.selectAsset(assetId)
@@ -290,6 +309,37 @@ export class RepoSt {
         this.setSel({ t: 'admin' })
     }
 
+    /** the repo's README, the page a repo opens on */
+    showReadme(): void {
+        this.setSel({ t: 'readme' })
+    }
+
+    /** the global processes this repo declares, as pm runs them. None on a
+     *  hub of its own, since only the home talks to pm */
+    get globalProcesses(): ProcessRow[] {
+        return this.home.machine?.processGroups.find((g) => g.core !== true && g.repo === this.key)?.rows ?? []
+    }
+    /** what the machine plans to run here */
+    showPlan(): void {
+        this.setSel({ t: 'plan' })
+    }
+    /** what runs when: every check on every context */
+    showWhen(): void {
+        this.setSel({ t: 'when' })
+    }
+    /** the checks one owner ships, as the checks table */
+    showChecks(from: CheckOwner): void {
+        this.setSel({ t: 'checks', from })
+    }
+    /** the repo's git */
+    showGit(): void {
+        this.setSel({ t: 'git' })
+    }
+    /** the processes page, `id` the card to scroll to and light */
+    showProcesses(id: string | null): void {
+        this.setSel({ t: 'processes', id })
+    }
+
     /** collection view — one card per instance */
     showCol(id: string): void {
         this.setSel({ t: 'col', id })
@@ -304,6 +354,12 @@ export class RepoSt {
             case 'status': return this.showStatus()
             case 'tests': return this.showTests(sel.check)
             case 'admin': return this.showAdmin()
+            case 'readme': return this.showReadme()
+            case 'processes': return this.showProcesses(sel.id)
+            case 'plan': return this.showPlan()
+            case 'git': return this.showGit()
+            case 'when': return this.showWhen()
+            case 'checks': return this.showChecks(sel.from)
         }
     }
     /** the url decides the page: a reload, back, forward and a pasted link

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

@@ -1,47 +1,31 @@
-// 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.
+// A repo page's left pane: the filter with its severity group on one line,
+// then ONE tree whose top rows are the repo's sections (tree-svc.ts) and
+// whose rows under them are every resource of the repo. Only the tree
+// scrolls, so the filter stays 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 { isTreeWalk, SEARCH_KEY } from './keys.ts'
 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
+    const empty = app.cols.loaded && app.filter !== 'all' && app.query.trim() === '' && t.visible.length === 0
     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() }}>
+        // the page's key handler drives it (hub-app.tsx), so the arrows need
+        // no focus here; the atelier consumes its own keys before that
+        <div className="tree">
             {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}
+            {empty ? <div className="tempty">{app.filter === 'red' ? 'no reds — nothing is blocked ✨' : 'nothing needs you ✨'}</div> : null}
+            {t.hidden > 0 ? (
+                <div className="tempty thidden" role="button" title="show every row (a)" onClick={() => app.setFilter('all')}>
+                    {t.hidden} {t.hidden === 1 ? 'row' : 'rows'} hidden by <b>{app.filter}</b> · show all <kbd className="pjkey">a</kbd>
+                </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
@@ -58,24 +42,15 @@ const SegFilter = observer(({ app }: { app: RepoSt }) => (
 
 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}
+                <input ref={(el) => { app.searchEl = el }} placeholder="filter" aria-label="filter the tree by name or path" value={app.query}
                     onChange={(e) => app.setQuery(e.target.value)}
-                    onKeyDown={(e) => { if (e.key === 'Escape') app.setQuery('') }} />
+                    onKeyDown={(e) => { if (e.key === 'Escape') app.setQuery(''); else if (isTreeWalk(e.key) && app.tree.key(e.key)) e.preventDefault() }} />
                 <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} />