rvlib-shipkit 1.3.0 → 1.5.0

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

@@ -22,6 +22,7 @@ import { serverNow } from './live-svc.ts'
 import { ROWS, type RowSize } from './timeline-geometry.ts'
 import { ageWords } from './time-ago.tsx'
 import type { HomeSt } from './home-st.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 export type DockSize = 'line' | 'slim' | 'open'
 
@@ -296,7 +297,7 @@ export class DockSt {
         if (this.inFlight) return
         this.inFlight = true
         try {
-            const r = await fetch('/api/house-runs.json')
+            const r = await reach('/api/house-runs.json')
             if (!r.ok) throw new Error(await r.text())
             const v = (await r.json()) as HouseView
             runInAction(() => {
@@ -306,7 +307,7 @@ export class DockSt {
                 this.error = ''
             })
         } catch (e) {
-            runInAction(() => { this.error = `the runs could not be read: ${(e as Error).message}` })
+            runInAction(() => { this.error = ownTrouble(e, this.home.machine, (m) => `the runs could not be read: ${m}`) })
         } finally {
             this.inFlight = false
         }

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

@@ -4,6 +4,9 @@
 // then the status as small pills that fold into +N rather than wrap. The
 // state is dock-st.ts; the height is the page's panel (hub-app.tsx).
 import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
+import { Tip } from './floating.tsx'
+import { Icon, ICON } from './icons.tsx'
 import type { HomeSt } from './home-st.ts'
 import { CycleButton } from './cycle-button.tsx'
 import { DOCK_KEY } from './keys.ts'
@@ -15,6 +18,38 @@ import type { PlacedGroup } from './timeline-geometry.ts'
 /** what the dock is, on its size button's hover */
 export const DOCK_HELP = `every check shipkit runs in every repo, whoever started it: a page, an agent in a terminal, the plan. The line, the pills alone; slim, the last two minutes, one group of lanes per repo; open, the last ten, zoomed by the wheel and panned by a drag, its height dragged at the top edge`
 
+const COPIED_MS = 1500
+
+/** the page's own address, to paste somewhere: the app window has no url bar */
+export const CopyUrl = () => {
+    const [href, setHref] = useState(() => globalThis.location?.href ?? '')
+    const [said, setSaid] = useState<string | null>(null)
+    // the router moves the address with pushState and replaceState, which no
+    // event reports: read it when the pointer or the focus arrives
+    const sync = () => setHref(location.href)
+    useEffect(() => {
+        if (said == null) return
+        const t = setTimeout(() => setSaid(null), COPIED_MS)
+        return () => clearTimeout(t)
+    }, [said])
+    const click = async () => {
+        try {
+            if (globalThis.navigator?.clipboard == null) throw new Error('this page has no clipboard')
+            await navigator.clipboard.writeText(location.href)
+            setSaid('copied')
+        } catch (e) {
+            setSaid(`could not copy: ${(e as Error).message}`)
+        }
+    }
+    return (
+        <Tip className="dcopy" instant placement="top-end" content={<><div>{said ?? 'click to copy this page\'s url'}</div><code>{href}</code></>}>
+            <button className={`ghost dcopyb${said === 'copied' ? ' ok' : ''}`} aria-label="copy this page's url" onMouseEnter={sync} onFocus={sync} onClick={() => void click()}>
+                <Icon d={ICON.link} />
+            </button>
+        </Tip>
+    )
+}
+
 /** a group's label: the repo's icon and its name in its colour */
 const GroupLabel = observer(({ app, g }: { app: HomeSt; g: PlacedGroup }) => {
     const p = app.projects.list.find((x) => x.name === g.key)
@@ -55,6 +90,7 @@ export const Dock = observer(({ app }: { app: HomeSt }) => {
                 <CycleButton options={DOCK_SIZES} value={d.size} onChange={(s) => d.setSize(s)} shortcut={DOCK_KEY} title={DOCK_HELP} />
                 <PillRow items={d.pills.map((p) => ({ key: p.key, title: p.title, node: <PillFace app={app} p={p} /> }))} />
                 {d.error !== '' ? <span className="warnline">{d.error}</span> : null}
+                <CopyUrl />
             </div>
             {d.size === 'line' ? null : <div className="dbody">
                 {v == null ? null : groups.length === 0

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

@@ -6,6 +6,12 @@
 .dhead{display:flex;gap:var(--s2);align-items:center;height:22px;flex:none;padding:0 var(--s3)}
 /* the status pills take the room left, and fold rather than wrap */
 .dhead .pchips{flex:1}
+/* the page's url to the clipboard, at the bottom right corner */
+.dcopy{flex:none;display:flex;margin-left:auto}
+.dcopyb{display:flex;align-items:center;padding:0 var(--s0);color:var(--dim)}
+.dcopyb:hover{color:var(--ink)}
+.dcopyb.ok{color:var(--ok)}
+.dcopyb .hico{width:13px;height:13px;color:inherit}
 .dbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 var(--s3) var(--s1);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
 .dempty{padding:var(--s1) 0;color:var(--dim)}
 .dock .tlax.compact{height:auto;padding-top:0}
@@ -31,5 +37,5 @@
 .dockanim>[data-panel]{transition:flex-grow 180ms ease-out}
 @media (prefers-reduced-motion:reduce){.dockanim>[data-panel]{transition:none}}
 /* the runs page's record chart: its (?) in its top left corner */
-.rchart{position:relative;flex:none;overflow:hidden;margin-bottom:var(--s2)}
+.rchart{position:relative;flex:none;overflow:hidden;margin-top:var(--s3)}
 .rchelp{position:absolute;top:0;left:0;z-index:4}

package/src/serve/hub-app/float-cards.tsx

@@ -0,0 +1,30 @@
+// THE way the page says trouble: cards floating at the top right, just under
+// the bar, taking no layout room, so one coming or going moves nothing, and
+// nothing drawn while all is well. A bar never carries trouble text. Styles:
+// home-strip.css .htoasts.
+import type { ReactNode } from 'react'
+
+export type Card = {
+    key: string
+    tone: 'red' | 'warn'
+    /** a bold lead word or two ("web crashed"), before the words */
+    head?: ReactNode
+    body?: ReactNode
+}
+
+/** the cards, in a zero height box placed right after the bar, so they
+ *  float just under it whatever the bar's height */
+export const FloatCards = ({ cards }: { cards: Card[] }) => {
+    if (cards.length === 0) return null
+    return (
+        <div className="hanchor">
+            <div className="htoasts">
+                {cards.map((c) => (
+                    <div key={c.key} className={c.tone === 'warn' ? 'htoast warn' : 'htoast'} role="alert">
+                        {c.head == null ? null : <><b>{c.head}</b> </>}{c.body}
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}

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

@@ -3,8 +3,9 @@
 // (flip to stay in the window, shift off its edges, an offset from the
 // trigger), a portal lifts it out of every box that clips, and hover opens
 // it after a short delay, so a pointer passing by never flickers one open.
-// Nothing here is positioned by hand.
-import { autoUpdate, flip, FloatingPortal, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, type Placement } from '@floating-ui/react'
+// A popover (Pop) opens on a click instead, and Escape or a click outside
+// closes it. Nothing here is positioned by hand.
+import { autoUpdate, flip, FloatingFocusManager, FloatingPortal, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, type Placement } from '@floating-ui/react'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import type { HTMLAttributes, ReactNode } from 'react'
 
@@ -25,13 +26,15 @@ type TipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
     fallbacks?: Placement[]
     /** the pointer can move into it (a log to scroll): it stays open on the way */
     interactive?: boolean
+    /** opens the moment the pointer arrives, for a trigger whose only words are its tip */
+    instant?: boolean
 }
 
 /** a trigger and what floats over it on hover or focus */
-export const Tip = observer(({ content, children, tipClass = 'ftip', placement = 'top', fallbacks, interactive = false, ...rest }: TipProps) => {
+export const Tip = observer(({ content, children, tipClass = 'ftip', placement = 'top', fallbacks, interactive = false, instant = false, ...rest }: TipProps) => {
     const st = useLocalObservable(() => ({ open: false, set(v: boolean) { this.open = v } }))
     const f = useFloating({ open: st.open, onOpenChange: (v) => st.set(v), placement, strategy: 'fixed', middleware: middleware(6, fallbacks), whileElementsMounted: autoUpdate })
-    const hover = useHover(f.context, { delay: { open: OPEN_MS, close: interactive ? 100 : 0 }, handleClose: interactive ? safePolygon() : null })
+    const hover = useHover(f.context, { delay: { open: instant ? 0 : OPEN_MS, close: interactive ? 100 : 0 }, handleClose: interactive ? safePolygon() : null })
     const focus = useFocus(f.context)
     const dismiss = useDismiss(f.context)
     const role = useRole(f.context, { role: 'tooltip' })
@@ -47,3 +50,37 @@ export const Tip = observer(({ content, children, tipClass = 'ftip', placement =
         </>
     )
 })
+
+type PopProps = {
+    /** what the trigger button shows */
+    label: ReactNode
+    className?: string
+    'aria-label'?: string
+    popClass?: string
+    placement?: Placement
+    /** what floats, given the way to close it (an entry that acts closes it) */
+    children: (close: () => void) => ReactNode
+}
+
+/** a button that opens what floats under it on a click; focus moves into
+ *  it, and Escape or a click outside closes it */
+export const Pop = observer(({ label, className, popClass = 'fpop', placement = 'bottom-start', children, ...rest }: PopProps) => {
+    const st = useLocalObservable(() => ({ open: false, set(v: boolean) { this.open = v } }))
+    const f = useFloating({ open: st.open, onOpenChange: (v) => st.set(v), placement, strategy: 'fixed', middleware: middleware(4), whileElementsMounted: autoUpdate })
+    const click = useClick(f.context)
+    const dismiss = useDismiss(f.context)
+    const role = useRole(f.context, { role: 'dialog' })
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role])
+    return (
+        <>
+            <button type="button" ref={f.refs.setReference} className={className} {...getReferenceProps(rest)}>{label}</button>
+            {st.open ? (
+                <FloatingPortal>
+                    <FloatingFocusManager context={f.context} modal={false}>
+                        <div ref={f.refs.setFloating} className={popClass} style={f.floatingStyles} {...getFloatingProps()}>{children(() => st.set(false))}</div>
+                    </FloatingFocusManager>
+                </FloatingPortal>
+            ) : null}
+        </>
+    )
+})

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

@@ -0,0 +1,42 @@
+// A repo's git page state: one repo's git, read from the daemon while the
+// page is shown (`/api/home/git.json`), a week of commits and HEAD's last
+// one past that. The activity page reads every repo for a window; this reads
+// one, whatever that window is.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { ActivityRow } from '../../home/activity-shape.ts'
+import type { RepoSt } from './repo-st.ts'
+import { ownTrouble, reach } from './reach.ts'
+
+export const GIT_POLL_MS = 30_000
+
+export class GitSt {
+    row: ActivityRow | null = null
+    error = ''
+    private timer: ReturnType<typeof setInterval> | null = null
+
+    constructor(private st: RepoSt) {
+        makeAutoObservable<this, 'st' | 'timer'>(this, { st: false, timer: false, row: observableRef })
+    }
+
+    async load(): Promise<void> {
+        try {
+            const r = await reach(`/api/home/git.json?repo=${encodeURIComponent(this.st.key)}`, { signal: AbortSignal.timeout(30_000) })
+            if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
+            const j = (await r.json()) as ActivityRow
+            runInAction(() => { this.row = j; this.error = '' })
+        } catch (e) {
+            runInAction(() => { this.error = ownTrouble(e, this.st.home.machine, (m) => `read git: ${m}`) })
+        }
+    }
+
+    /** reads while the page is shown */
+    start(): void {
+        if (this.timer != null) return
+        void this.load()
+        this.timer = setInterval(() => void this.load(), GIT_POLL_MS)
+    }
+    stop(): void {
+        if (this.timer != null) clearInterval(this.timer)
+        this.timer = null
+    }
+}

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

@@ -0,0 +1,61 @@
+// A repo's git page: its branch against its upstream, what is not committed,
+// and its commits of the last week (HEAD's last one when the week holds
+// none), with the ways out to VS Code and Fork. Every repo at once: the
+// activity page (⌘L).
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
+import { isMainBranch, upstreamWords } from '../../home/activity-shape.ts'
+import { Commit } from './activity-view.tsx'
+import { Icon, ICON } from './icons.tsx'
+import type { RepoSt } from './repo-st.ts'
+
+const KIND_WORD = { staged: 'staged', modified: 'modified', untracked: 'new' } as const
+
+export const GitPage = observer(({ app }: { app: RepoSt }) => {
+    const g = app.git
+    useEffect(() => {
+        g.start()
+        return () => g.stop()
+    }, [g])
+    const r = g.row
+    const m = app.home.machine
+    const now = app.clock.now
+    const branch = r == null ? '' : r.branch ?? (r.detached == null ? '' : `detached ${r.detached}`)
+    return (
+        <div className="colcard checkcard">
+            <div className="chead">
+                <span className="tid">git</span>
+                <h3 className="ctitle">{app.name}</h3>
+                <span className="sp" />
+                {m == null ? null : <button className="hicon" title="open in VS Code" aria-label={`open ${app.key} in VS Code`} onClick={() => m.openInCode(app.key)}><Icon d={ICON.vscode} /></button>}
+                <button className="hicon" title="open in Fork" aria-label={`open ${app.key} in Fork`} onClick={() => void app.home.activity.openFork(app.key)}><Icon d={ICON.fork} /></button>
+            </div>
+            <div className="usays">its branch, what is not committed, and its commits of the last week. Every repo at once: the activity page (⌘L)</div>
+            {g.error !== '' ? <div className="warnline">{g.error}</div> : null}
+            {r == null ? (g.error === '' ? <div className="dim twait"><span className="spin" />reading git…</div> : null) : r.error != null ? <div className="tl red">git failed: {r.error}</div> : (
+                <>
+                    <div className="cfacts">
+                        <div className="cf"><div className="ck">branch</div><div className={`cv tl ${isMainBranch(r.branch) ? 'ok' : 'warn'}`}>{branch}</div></div>
+                        <div className="cf"><div className="ck">upstream</div><div className="cv">{upstreamWords(r)}</div></div>
+                    </div>
+                    <section className="csec">
+                        <div className="cstitle">not committed ({r.files.length})</div>
+                        {r.files.length === 0 ? <div className="dim">nothing: the tree is clean</div> : (
+                            <table className="gitfiles"><tbody>{r.files.map((f) => <tr key={f.path}><td className={`gitkind ${f.kind}`}>{KIND_WORD[f.kind]}</td><td className="gitpath">{f.path}</td></tr>)}</tbody></table>
+                        )}
+                    </section>
+                    <section className="csec">
+                        <div className="cstitle">commits, last week ({r.commits.length})</div>
+                        <table className="gitcommits">
+                            <tbody>
+                                {r.commits.map((c) => <tr key={c.sha}><Commit c={c} now={now} old={false} /></tr>)}
+                                {r.last != null ? <tr><Commit c={r.last} now={now} old /></tr> : null}
+                                {r.commits.length === 0 && r.last == null ? <tr><td className="dim">no commit yet</td></tr> : null}
+                            </tbody>
+                        </table>
+                    </section>
+                </>
+            )}
+        </div>
+    )
+})

package/src/serve/hub-app/hash-route.ts

@@ -22,9 +22,25 @@ export type HashSel =
     | { t: 'tests'; check: string | null }
     /** what administers the repo: archive, reload its hub, keep it active */
     | { t: 'admin' }
+    /** the repo's README, what a repo shows with nothing else named */
+    | { t: 'readme' }
+    /** the global processes the repo declares, one card each, `id` the one
+     *  a tree row opened (scrolled to and lit), null for none */
+    | { t: 'processes'; id: string | null }
+    /** what the machine plans to run in this repo, and when */
+    | { t: 'plan' }
+    /** the repo's git: branch, upstream, uncommitted files, recent commits */
+    | { t: 'git' }
+    /** what runs when: every check on every context, with the legend */
+    | { t: 'when' }
+    /** the checks one owner ships: shipkit's, or the repo's own */
+    | { t: 'checks'; from: CheckOwner }
+
+/** whose a gate check is */
+export type CheckOwner = 'shipkit' | 'repo'
 
 export type ParsedHash = {
-    kind: 'asset' | 'cat' | 'col' | 'item' | 'status' | 'tests' | 'admin' | 'none'
+    kind: 'asset' | 'cat' | 'col' | 'item' | 'status' | 'tests' | 'admin' | 'readme' | 'processes' | 'plan' | 'git' | 'when' | 'checks' | 'none'
     /** the collection, for an item. null for everything else */
     col: string | null
     id: string
@@ -40,6 +56,12 @@ const CAT = 'cat-'
 const STATUS = 'page:status'
 const TESTS = 'page:tests'
 const ADMIN = 'page:admin'
+const README = 'page:readme'
+const PROCESSES = 'page:processes'
+const PLAN = 'page:plan'
+const GIT = 'page:git'
+const WHEN = 'page:when'
+const CHECKS = 'page:checks:'
 
 /** what this selection puts in the url. null only for no selection at all,
  *  and then the hash is left alone rather than wiped */
@@ -53,6 +75,12 @@ export function hashFor(sel: HashSel | null): string | null {
         case 'status': return STATUS
         case 'tests': return sel.check == null ? TESTS : `${TESTS}:${sel.check}`
         case 'admin': return ADMIN
+        case 'readme': return README
+        case 'processes': return sel.id == null ? PROCESSES : `${PROCESSES}:${sel.id}`
+        case 'plan': return PLAN
+        case 'git': return GIT
+        case 'when': return WHEN
+        case 'checks': return `${CHECKS}${sel.from}`
     }
 }
 
@@ -62,6 +90,16 @@ export function parseHash(raw: string): ParsedHash {
     if (raw === STATUS) return { kind: 'status', col: null, id: '', tools: null }
     if (raw === TESTS) return { kind: 'tests', col: null, id: '', tools: null }
     if (raw === ADMIN) return { kind: 'admin', col: null, id: '', tools: null }
+    if (raw === README) return { kind: 'readme', col: null, id: '', tools: null }
+    if (raw === PROCESSES) return { kind: 'processes', col: null, id: '', tools: null }
+    if (raw === PLAN) return { kind: 'plan', col: null, id: '', tools: null }
+    if (raw === GIT) return { kind: 'git', col: null, id: '', tools: null }
+    if (raw === WHEN) return { kind: 'when', col: null, id: '', tools: null }
+    if (raw === `${CHECKS}shipkit` || raw === `${CHECKS}repo`) return { kind: 'checks', col: null, id: raw.slice(CHECKS.length), tools: null }
+    if (raw.startsWith(`${PROCESSES}:`)) {
+        const id = raw.slice(PROCESSES.length + 1)
+        return id === '' ? none : { kind: 'processes', col: null, id, tools: null }
+    }
     // a check id carries colons of its own (`test:rvlib-shipkit`)
     if (raw.startsWith(`${TESTS}:`)) {
         const check = raw.slice(TESTS.length + 1)
@@ -104,6 +142,12 @@ export function selOf(p: ParsedHash): HashSel | null {
         case 'status': return { t: 'status' }
         case 'tests': return { t: 'tests', check: p.id === '' ? null : p.id }
         case 'admin': return { t: 'admin' }
+        case 'readme': return { t: 'readme' }
+        case 'processes': return { t: 'processes', id: p.id === '' ? null : p.id }
+        case 'plan': return { t: 'plan' }
+        case 'git': return { t: 'git' }
+        case 'when': return { t: 'when' }
+        case 'checks': return { t: 'checks', from: p.id as CheckOwner }
     }
 }
 

package/src/serve/hub-app/header-bar.tsx

@@ -1,13 +1,18 @@
-// A repo's pieces of the top bar, beside its icon and its name: what runs now
-// and the two runs that are not one check (RepoRun), then on the right its
-// processes, the hub's own trouble and modernize while it is behind
-// (RepoTools), and at the far right end the editor icons (RepoOpeners). On
-// the home they ride in the home strip (home-strip.tsx); a hub of its own
+// A repo's pieces of the top bar. On the right: modernize while it is behind
+// and the hub's own processes (RepoTools), then a spinner while something
+// runs, its words on hover, and one check… button that opens the two runs
+// that are not one check (RepoRun), then at the far right end the editor
+// icons (RepoOpeners). The home strip puts the repo's global processes right
+// after its name (home-strip.tsx). The bar carries no trouble text:
+// the hub's own trouble is a card floating under it (hubCards, float-cards.tsx).
+// On the home they ride in the home strip (home-strip.tsx); a hub of its own
 // draws them in its own header, with its name. The repo's sections are the
-// left pane's (repo-sections.tsx). What runs, drawn, is the dock at the
-// bottom of the page (dock-view.tsx).
+// top rows of the left pane's tree (repo-sections.ts). What runs, drawn, is
+// the dock at the bottom of the page (dock-view.tsx).
 import { observer } from 'mobx-react-lite'
 import { Icon, ICON } from './icons.tsx'
+import { Pop, Tip } from './floating.tsx'
+import { FloatCards, type Card } from './float-cards.tsx'
 import type { RepoSt } from './repo-st.ts'
 
 /** the repo's hub has not answered on the home: its reason and its fix show
@@ -17,56 +22,64 @@ export const notUp = (app: RepoSt): boolean => {
     const m = app.home.machine
     if (m == null || app.started) return false
     if (!app.cols.cached) return true
-    return m.fresh && m.worker(app.key)?.status !== 'up'
+    // the daemon silent: the hub's state is unknown, not down, so its last screen stays
+    return m.fresh && m.down === '' && m.worker(app.key)?.status !== 'up'
 }
 
-/** what is running, in one line: the hub's own run first, since it says the
- *  most, else the newest run the record has in flight. Cut to its width, the
- *  whole line on hover */
-const RunState = observer(({ app }: { app: RepoSt }) => {
+/** what is running, in words: the hub's own run first, since it says the
+ *  most, else the newest run the record has in flight. Null while idle */
+export const runWords = (app: RepoSt): string | null => {
     const own = app.checks.strip
+    if (own !== '') return own
     const run = app.live.view?.runs[0]
-    const text = own !== '' ? own : run != null ? `${run.label} · ${run.done} of ${run.total}${run.reds > 0 ? ` · ${run.reds} red so far` : ''}` : 'idle'
-    const going = app.checks.busy || run != null
+    if (run != null) return `${run.label} · ${run.done} of ${run.total}${run.reds > 0 ? ` · ${run.reds} red so far` : ''}`
+    return app.checks.busy ? 'running' : null
+}
+
+/** a spinner while something runs, its words in a tooltip that opens at
+ *  once; nothing at all while idle */
+const RunState = observer(({ app }: { app: RepoSt }) => {
+    const text = runWords(app)
+    if (text == null) return null
     return (
-        <span className={`hstate${going ? ' on' : ''}`} title={text}>
-            {/* the spinner's slot is always there, so the text never moves */}
-            <span className={`spin${going ? '' : ' idle'}`} />
-            <span className="htext">{text}</span>
-        </span>
+        <Tip className="hbusy" instant placement="bottom" tabIndex={0} role="status" aria-label={`running: ${text}`} content={text}>
+            <span className="spin" />
+        </Tip>
     )
 })
 
 export const HEALTH_TITLE = 'run the health pass: every check but the build steps, as shipkit check runs them (creds, probes, rules, contracts)'
 export const GATE_TITLE = 'run the gate: every check shipkit ci runs, the build steps included (lint, typecheck, tests)'
 
-/** the run state, then the two runs, compact: below a width their labels
- *  give way to their icons, so the bar never wraps */
-export const RepoRun = observer(({ app }: { app: RepoSt }) => {
+/** the two runs, each with what it does; an entry closes the menu as it starts */
+export const CheckMenu = observer(({ app, close }: { app: RepoSt; close: () => void }) => {
     const u = app.checks
     return (
-        <span className="hrun">
-            <RunState app={app} />
-            <button className="primary hbtn" disabled={u.busy} title={HEALTH_TITLE} aria-label="health pass" onClick={() => void u.run()}>
-                <Icon d={ICON.health} /><span className="lbl">health pass</span>
+        <div className="hmenu">
+            <button className="hmitem" disabled={u.busy} onClick={() => { close(); void u.run() }}>
+                <Icon d={ICON.health} /><span><b>health pass</b><small>{HEALTH_TITLE}</small></span>
             </button>
-            <button className="hbtn" disabled={u.busy} title={GATE_TITLE} aria-label="gate" onClick={() => void u.run(undefined, { gate: true, label: 'the gate' })}>
-                <Icon d={ICON.gate} /><span className="lbl">gate</span>
+            <button className="hmitem" disabled={u.busy} onClick={() => { close(); void u.run(undefined, { gate: true, label: 'the gate' }) }}>
+                <Icon d={ICON.gate} /><span><b>gate</b><small>{GATE_TITLE}</small></span>
             </button>
-        </span>
+        </div>
     )
 })
 
-/** what is wrong with the hub itself, one chip per problem. Nothing when all
- *  is well: the bar states trouble, never health */
-const HubStatus = observer(({ app }: { app: RepoSt }) => (
-    <>
-        {app.cols.hubStatus.map((p) => (
-            <span key={p.id} className={`hstatus ${p.severity === 'red' ? 'red' : 'warn'}`} title={p.text}>{p.text}</span>
-        ))}
-    </>
+/** the spinner while a run goes, then one small check… button with the two
+ *  runs behind it. The bar ends on the right, so the spinner comes and goes
+ *  to the button's left and the button never moves */
+export const RepoRun = observer(({ app }: { app: RepoSt }) => (
+    <span className="hrun">
+        <RunState app={app} />
+        <Pop className="ghost hcheck" aria-label="run a check" label="check…" placement="bottom-end">{(close) => <CheckMenu app={app} close={close} />}</Pop>
+    </span>
 ))
 
+/** what is wrong with the hub itself, one card per problem */
+export const hubCards = (app: RepoSt): Card[] =>
+    app.cols.hubStatus.map((p) => ({ key: `hub:${p.id}`, tone: p.severity === 'red' ? 'red' : 'warn', body: p.text }))
+
 /** modernize, while the repo runs an older shipkit than the home */
 const Modernize = observer(({ app }: { app: RepoSt }) => {
     const m = app.home.machine
@@ -88,48 +101,25 @@ export const RepoOpeners = observer(({ app }: { app: RepoSt }) => {
     )
 })
 
-/** the right side of the bar for a repo, before the machine's trouble and
- *  the openers, which close it */
+/** the right side of the bar for a repo, before the openers, which close it */
 export const RepoTools = observer(({ app }: { app: RepoSt }) => (
     <>
-        <ProcessChips app={app} />
-        <HubStatus app={app} />
         <Modernize app={app} />
     </>
 ))
 
 /** the bar of a hub of its own: its name, then the same pieces the home
- *  strip carries for a repo */
+ *  strip carries for a repo, and its trouble floating under it */
 export const HeaderBar = observer(({ app }: { app: RepoSt }) => (
-    <header className="hdr">
-        <span className="hname" style={app.name === '' ? undefined : { color: app.home.projects.identityOf(app.name).colorDark }}>{app.name !== '' ? app.name : 'hub'}</span>
-        <RepoRun app={app} />
-        <span className="sp" />
-        <RepoTools app={app} />
-        <RepoOpeners app={app} />
-    </header>
+    <>
+        <header className="hdr">
+            <span className="hname" style={app.name === '' ? undefined : { color: app.home.projects.identityOf(app.name).colorDark }}>{app.name !== '' ? app.name : 'hub'}</span>
+            <span className="sp" />
+            <RepoTools app={app} />
+            <RepoRun app={app} />
+            <RepoOpeners app={app} />
+        </header>
+        <FloatCards cards={hubCards(app)} />
+    </>
 ))
 
-/** one switch per process the repo declares (serve.processes): its dot, its
- *  id, a click starts or stops it, and a link once it serves */
-export const ProcessChips = observer(({ app }: { app: RepoSt }) => {
-    const s = app.processes
-    if (s.list.length === 0) return null
-    return (
-        <span className="hprocs">
-            {s.list.map((p) => {
-                const on = p.status === 'up' || p.status === 'starting'
-                const title = [p.cmd, p.note, p.external ? 'started outside the hub' : null, p.tail.at(-1)].filter((x) => x != null && x !== '').join('\n')
-                return (
-                    <span key={p.id} className="hproc">
-                        <button className={`ghost ${p.status}`} title={title} disabled={p.status === 'stopping' || (on && p.external)}
-                            onClick={() => void s.act(p.id, on ? 'stop' : 'start')}>
-                            <i className={`pdot ${p.status}`} />{p.id}
-                        </button>
-                        {p.url != null && p.status === 'up' ? <a href={p.url} target="_blank" rel="noreferrer" title={p.url}>↗</a> : null}
-                    </span>
-                )
-            })}
-        </span>
-    )
-})

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

@@ -6,6 +6,7 @@
 // exists so the whole text of a run stays reachable.
 import { makeAutoObservable, runInAction } from 'mobx'
 import type { RepoSt } from './repo-st.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 export class HealthSvc {
     statusMd: string | null = null
@@ -25,10 +26,10 @@ export class HealthSvc {
 
     async load(): Promise<void> {
         try {
-            const s = (await (await fetch(this.st.url('/api/status.json'))).json()) as { statusMd: string | null }
+            const s = (await (await reach(this.st.url('/api/status.json'))).json()) as { statusMd: string | null }
             runInAction(() => { this.statusMd = s.statusMd })
         } catch (e) {
-            runInAction(() => { this.statusMd = `FAIL status fetch broke: ${(e as Error).message}` })
+            runInAction(() => { this.statusMd = ownTrouble(e, this.st.home.machine, (m) => `FAIL status fetch broke: ${m}`) || this.statusMd })
         }
     }