rvlib-shipkit 1.1.1 → 1.3.0

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

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

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

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

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

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

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

@@ -0,0 +1,266 @@
+// the project list: one row per repo that shares this page's house wiki,
+// down the left of the page, a small icon and the repo's name on one line,
+// the shown repo's row marked in its identity colour. Its width is the
+// panel the page gives it (hub-app.tsx, react-resizable-panels). A row says
+// three things and no more (faceOf): the open asks as its one badge, a dim
+// icon while VS Code does not have the folder open, a thin edge breathing
+// while Claude sessions run in it; on the home, a dot while its hub starts
+// or crashed and a mark while a global process it uses is off. Everything
+// else is the hover card, placed by floating-ui beside the row. A click
+// selects the repo in place (so does ⌘1 to ⌘9 for the first nine rows, the
+// hint at each row's end), a double click opens the folder in VS Code, a
+// drag reorders the list. The foot holds two buttons: sort opens a menu of
+// labeled sorts (a pick sorts once, the button names the order the list is
+// in), archived shows or hides the archived repos just above the foot
+// (names only, no ⌘ number, a row opens the archived page, nothing loads),
+// the foot never moving. On the home a section of four lines on top, in the
+// repo rows' style, opens the overview, the picker, the activity and the
+// plan, each with its shortcut at the line's end, the page shown lit. It
+// renders from the first paint with the list this browser kept, so a load
+// moves nothing.
+import { autoUpdate, FloatingPortal, useDismiss, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react'
+import { observer } from 'mobx-react-lite'
+import { useEffect, type CSSProperties } from 'react'
+import { middleware, OPEN_MS } from './floating.tsx'
+import { Icon, ICON } from './icons.tsx'
+import { plainClick } from './home-st.ts'
+import { PICKER_KEY, PLACE_KEY } 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 */
+export type ListHost = { projects: ProjectsSvc }
+
+/** the lines on top of the list, in their order: the overview, the picker,
+ *  then the places, their shortcuts ⌘J ⌘K ⌘L ⌘' top to bottom */
+const PLACES: { id: Place | 'picker'; label: string; title: string }[] = [
+    { id: 'overview', label: 'overview', title: 'the overview: shipkit, every global process and every repo on this machine' },
+    { id: 'picker', label: 'jump to…', title: 'jump to a page, a repo or one of its resources' },
+    { id: 'activity', label: 'activity', title: 'what every repo committed lately, what it holds uncommitted, its branch and whether it is pushed' },
+    { id: 'planned', label: 'planned', title: 'every check the machine runs on its own: now, next, late, and why' },
+]
+
+/** the icon's size on a row, in px, as attributes and in the sheet */
+export const ROW_ICON = 18
+
+export const Row = observer(({ app, p, i }: { app: ListHost; p: Project; i: number }) => {
+    const s = app.projects
+    const gap = s.shownGap
+    const face = faceOf(p)
+    const open = s.hover === p.name
+    const f = useFloating({
+        open,
+        onOpenChange: (v) => (v ? s.hoverIn(p.name) : s.hoverOut(p.name)),
+        placement: 'right-start',
+        strategy: 'fixed',
+        middleware: middleware(8),
+        whileElementsMounted: autoUpdate,
+    })
+    const hover = useHover(f.context, { delay: { open: OPEN_MS, close: 0 }, enabled: s.drag == null })
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover])
+    // the drop line rides on a row edge, so showing it moves nothing
+    const edge = gap === i ? ' dropb' : gap === i + 1 && i === s.list.length - 1 ? ' dropa' : ''
+    const cur = s.isCurrent(p)
+    const cls = `pjrow${cur ? ' cur' : ''}${cur && s.away ? ' away' : ''}${face.dim ? ' dim' : ''}${s.drag === p.name ? ' dragging' : ''}${edge}`
+    const dot = s.dotOf(p.name)
+    const warn = s.warnOf(p.name)
+    // the shown repo's row is marked in its own colour
+    const mark = cur ? ({ '--pjc': s.identityOf(p.name).colorDark } as CSSProperties) : undefined
+    return (
+        <>
+            <button ref={f.refs.setReference} className={cls} aria-label={p.name} style={mark} draggable
+                {...getReferenceProps({
+                    onClick: () => s.click(p.name),
+                    onDoubleClick: () => s.doubleClick(p.name),
+                    onDragStart: (e) => {
+                        e.dataTransfer.effectAllowed = 'move'
+                        e.dataTransfer.setData('text/plain', p.name)
+                        s.dragStart(p.name)
+                    },
+                    onDragOver: (e) => {
+                        if (s.drag == null) return
+                        e.preventDefault()
+                        const r = e.currentTarget.getBoundingClientRect()
+                        s.dragOver(i, e.clientY - r.top, r.height)
+                    },
+                    onDrop: (e) => {
+                        e.preventDefault()
+                        s.drop()
+                    },
+                    onDragEnd: () => s.dragEnd(),
+                })}>
+                <Face p={p} px={ROW_ICON} />
+                <span className="pjname">{p.name}</span>
+                {face.badge != null ? <b className="pga">{face.badge}</b> : null}
+                {face.busy ? <i className="pgs" /> : null}
+                {dot != null ? <i className={`pgd ${dot}`} /> : null}
+                {warn != null ? <i className="pgw" title={warn} /> : null}
+                {i < 9 ? <kbd className="pjkey">⌘{i + 1}</kbd> : null}
+            </button>
+            {open ? (
+                <FloatingPortal>
+                    <div ref={f.refs.setFloating} className="pgcard" role="tooltip" style={f.floatingStyles} {...getFloatingProps()}>
+                        <Card p={p} now={Date.now()} />
+                    </div>
+                </FloatingPortal>
+            ) : null}
+        </>
+    )
+})
+
+// the img carries its size as attributes too: an icon file is 512px, and
+// without them a sheet that fails to apply draws it at that size
+export const Face = ({ p, px }: { p: Project; px: number }) => (p.icon != null
+    ? <img src={p.icon} alt="" width={px} height={px} draggable={false} />
+    : <span className={`pgi h${hueOf(p.name)}`}>{(p.name.match(/[a-zA-Z]/)?.[0] ?? p.name.charAt(0)).toUpperCase()}</span>)
+
+/** the card for one repo: header, what needs a human, then the fact rows,
+ *  in the label and value shape the check page's WHAT widget uses */
+export const Card = ({ p, now }: { p: Project; now: number }) => {
+    const m = cardModel(p, now)
+    return (
+        <>
+            <div className="pgch">
+                <span className="pgcface"><Face p={p} px={20} /></span>
+                <b className="pgcname">{m.head.name}{m.head.current ? <span className="pgcthis"> this hub</span> : null}</b>
+                {m.head.version == null ? null : <span className="pgcver">v{m.head.version.replace(/^v/, '')}</span>}
+            </div>
+            {m.head.branch == null ? null : <div className="pgcline">{m.head.branch}</div>}
+            {m.head.description == null ? null : <div className="pgcdesc">{m.head.description}</div>}
+            {m.needs == null ? null : (
+                <div className="pgcneeds">
+                    {m.needs.asks == null ? null : (
+                        <div className="pgcneed">
+                            <span className="pgcask">{m.needs.asks.count} ask{m.needs.asks.count === 1 ? '' : 's'}: {m.needs.asks.titles.join(' · ')}</span>
+                            {m.needs.asks.more > 0 ? <span className="pgcmore">+{m.needs.asks.more}</span> : null}
+                        </div>
+                    )}
+                    {m.needs.gate == null ? null : <div className="pgcneed red">{m.needs.gate}</div>}
+                </div>
+            )}
+            {m.facts.length === 0 ? null : (
+                <div className="pgcfacts">
+                    {m.facts.map((f) => (
+                        <div key={f.k} className="wfact">
+                            <span className="wk">{f.k}</span>
+                            <span className={`wv${f.tone == null ? '' : ` ${f.tone}`}`}>{f.v}</span>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </>
+    )
+}
+
+export const ProjectList = observer(({ app }: { app: ListHost }) => {
+    useEffect(() => app.projects.start(), [app])
+    const s = app.projects
+    return (
+        <nav className="pjlist" aria-label="projects">
+            {s.onPlace == null && s.onPicker == null && s.error === '' ? null : (
+                <div className="pjhead">
+                    {PLACES.map((pl) => {
+                        const id = pl.id
+                        const run = id === 'picker' ? s.onPicker : s.onPlace == null ? null : () => s.onPlace?.(id)
+                        if (run == null) return null
+                        const on = id === 'picker' ? s.pickerOpen() : s.place === id
+                        const key = id === 'picker' ? PICKER_KEY : PLACE_KEY[id]
+                        return (
+                            <button key={id} className={`pjpl${on ? ' cur' : ''}`} aria-label={pl.label} title={`${pl.title} (${key})`} onClick={run}>
+                                <Icon d={ICON[id === 'picker' ? 'search' : id === 'overview' ? 'home' : id]} />
+                                <span className="pjname">{pl.label}</span>
+                                <kbd className="pjkey">{key}</kbd>
+                            </button>
+                        )
+                    })}
+                    {s.error !== '' ? <span className="pgerr" title={s.error}>! {s.error}</span> : null}
+                </div>
+            )}
+            <div className="pjrows">
+                {s.list.length === 0 && s.error === '' ? <span className="pjwait"><span className="spin" />reading the repos…</span> : null}
+                {s.list.map((p, i) => <Row key={p.name} app={app} p={p} i={i} />)}
+            </div>
+            {s.archivedOpen && s.archived.length > 0 && s.onArchived != null ? (
+                <div className="pjarch">
+                    {s.archived.map((p) => (
+                        <a key={p.name} className="pjarow" href="/archived" title={`${p.name} is archived: nothing runs there`} onClick={(e) => {
+                            if (!plainClick(e)) return
+                            e.preventDefault()
+                            s.onArchived?.()
+                        }}>
+                            {p.icon != null ? <img src={p.icon} alt="" width={14} height={14} draggable={false} /> : <i className="pjaini" />}
+                            <span>{p.name}</span>
+                        </a>
+                    ))}
+                </div>
+            ) : null}
+            <div className="pjfoot">
+                <SortButton s={s} />
+                {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`}
+                        onClick={() => s.toggleArchivedOpen()}>
+                        <Icon d={ICON.archived} /><span>{s.archived.length}</span>
+                    </button>
+                )}
+            </div>
+        </nav>
+    )
+})
+
+/** the words for the order the list is in */
+const orderWords = (s: ProjectsSvc): string => {
+    const m = s.sortMode
+    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,
+ *  and sorts nothing itself */
+const SortButton = observer(({ s }: { s: ProjectsSvc }) => {
+    const f = useFloating({
+        open: s.sortMenuOpen,
+        onOpenChange: (v) => s.setSortMenu(v),
+        placement: 'top-start',
+        strategy: 'fixed',
+        middleware: middleware(6),
+        whileElementsMounted: autoUpdate,
+    })
+    const dismiss = useDismiss(f.context)
+    const role = useRole(f.context, { role: 'menu' })
+    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role])
+    return (
+        <>
+            <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>
+            </button>
+            {s.sortMenuOpen ? (
+                <FloatingPortal>
+                    <div ref={f.refs.setFloating} className="pgmenu" style={f.floatingStyles} {...getFloatingProps()}>
+                        <SortMenu s={s} />
+                    </div>
+                </FloatingPortal>
+            ) : null}
+        </>
+    )
+})
+
+/** the menu's lines: one per sort, the order the list is in checked. The
+ *  manual order is a state a drag makes, never a pick */
+export const SortMenu = observer(({ s }: { s: ProjectsSvc }) => {
+    const cur = s.sortMode
+    return (
+        <>
+            <div className="pgmhead">sort the list once by</div>
+            {SORTS.map((m) => (
+                <button key={m.id} role="menuitemradio" aria-checked={cur === m.id} className={`pgmi${cur === m.id ? ' on' : ''}`}
+                    title={m.title} onClick={() => s.sortBy(m.id)}>
+                    <span className="pgmck">{cur === m.id ? '✓' : ''}</span>{m.label}
+                </button>
+            ))}
+            <button role="menuitemradio" aria-checked={cur === 'manual'} className={`pgmi manual${cur === 'manual' ? ' on' : ''}`} disabled
+                title="a drag of a row makes the manual order, and every sort ends in it">
+                <span className="pgmck">{cur === 'manual' ? '✓' : ''}</span>manual order<small>drag a row</small>
+            </button>
+        </>
+    )
+})