rvlib-shipkit 1.1.0 → 1.2.0

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

@@ -1,6 +1,7 @@
 // The header over every page, and the live strip under it. The header is the
-// repo name, one link per core page, and on the right the two runs that are
-// not one check with what is running now. The strip is the one run chart
+// repo name (on the home the strip above names it), one link per core page,
+// and on the right the repo's own controls and the two runs that are not one
+// check with what is running now. The strip is the one run chart
 // (timeline-chart.tsx) over a rolling window that ends now: folded, a thin
 // bar of the last two minutes; unfolded, the full chart over ten, zoomable.
 // Each fold has ONE height whatever runs, so a run never moves the page.
@@ -8,14 +9,15 @@ import { observer } from 'mobx-react-lite'
 import { RUNS_ID } from '../../collections/collection-types.ts'
 import { Help } from './help.tsx'
 import { openWikis, WIKIS } from './wikis-view.tsx'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import { byWords, TimelineChart } from './timeline-chart.tsx'
+import { RepoControls } from './home-strip.tsx'
 
 export type CorePage = { id: string; label: string; on: boolean; go: () => void }
 
 /** the pages reached for most, in the order they are reached for. A page this
  *  repo does not have is not a link */
-export function corePages(app: HubSt): CorePage[] {
+export function corePages(app: RepoSt): CorePage[] {
     const has = (col: string): boolean => app.cols.colMeta.some((c) => c.id === col)
     const sel = app.sel
     const onCol = (col: string): boolean => (sel?.t === 'col' && sel.id === col) || (sel?.t === 'item' && sel.col === col)
@@ -25,7 +27,7 @@ export function corePages(app: HubSt): CorePage[] {
     // always here
     out.push({ id: 'runs', label: 'runs', on: onCol('runs'), go: () => app.cols.select('runs', RUNS_ID) })
     if (has('asks')) out.push({ id: 'asks', label: 'asks', on: onCol('asks'), go: () => app.showCol('asks') })
-    const firstCat = app.media.assets[0]?.cat
+    const firstCat = app.media.assets[0]?.cat ?? app.cols.cachedCat ?? undefined
     if (firstCat != null) out.push({ id: 'media', label: 'media', on: sel?.t === 'asset' || sel?.t === 'cat', go: () => app.showCat(firstCat) })
     if (has(WIKIS)) out.push({ id: WIKIS, label: 'wikis', on: onCol(WIKIS), go: () => openWikis(app) })
     return out
@@ -33,14 +35,15 @@ export function corePages(app: HubSt): CorePage[] {
 
 /** 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 */
-const RunState = observer(({ app }: { app: HubSt }) => {
+const RunState = observer(({ app }: { app: RepoSt }) => {
     const own = app.checks.strip
     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
     return (
         <span className={`hstate${going ? ' on' : ''}`} title={text}>
-            {going ? <span className="spin" /> : null}
+            {/* the spinner's slot is always there, so the text never moves */}
+            <span className={`spin${going ? '' : ' idle'}`} />
             <span className="htext">{text}</span>
         </span>
     )
@@ -48,7 +51,7 @@ const RunState = observer(({ app }: { app: HubSt }) => {
 
 /** what is wrong with the hub itself, one chip per problem. Nothing when all
  *  is well: the header states trouble, never health */
-const HubStatus = observer(({ app }: { app: HubSt }) => (
+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>
@@ -56,17 +59,22 @@ const HubStatus = observer(({ app }: { app: HubSt }) => (
     </>
 ))
 
-export const HeaderBar = observer(({ app }: { app: HubSt }) => {
+export const HeaderBar = observer(({ app }: { app: RepoSt }) => {
     const u = app.checks
     return (
         <header className="hdr">
-            <span className="hname">{app.name !== '' ? app.name : 'hub'}</span>
+            {/* on the home the strip names the repo, in its colour */}
+            {app.home.machine != null ? null : <span className="hname" style={app.name === '' ? undefined : { color: app.home.projects.identityOf(app.name).colorDark }}>{app.name !== '' ? app.name : 'hub'}</span>}
             <nav className="hnav">
+                {/* the spinner's slot stays once the repo is read, so the links never move */}
+                <span className={`spin${app.cols.loaded ? ' idle' : ''}`} title={app.cols.loaded ? undefined : app.cols.cached ? 'showing what this browser kept, reading the repo' : 'reading the repo'} />
                 {corePages(app).map((p) => (
                     <button key={p.id} className={p.on ? 'on' : ''} onClick={p.go}>{p.label}</button>
                 ))}
             </nav>
             <span className="sp" />
+            <RepoControls app={app.home} name={app.key} />
+            <ProcessChips app={app} />
             <HubStatus app={app} />
             <RunState app={app} />
             <button className="primary" disabled={u.busy} onClick={() => void u.run()}>run the health pass</button>
@@ -75,6 +83,30 @@ export const HeaderBar = observer(({ app }: { app: HubSt }) => {
     )
 })
 
+/** 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>
+    )
+})
+
 /** the key that folds and unfolds the strip, printed on its chevron */
 export const LIVE_KEY = 'l'
 
@@ -82,7 +114,7 @@ export const LIVE_KEY = 'l'
 export const LIVE_ROW_H = 30
 
 /** what the strip is, in the (?) beside its chevron */
-export const LIVE_HELP = "every check shipkit runs, whoever started it: this hub, an agent in a terminal, the daily pass, here and in the other repos. Folded, the last two minutes: a bar grows at the right while its check runs and slides left once it ends, in its verdict colour. Unfolded, the whole record, opened on the last ten minutes: the run bands, the time axis, and over the lanes how many checks ran at once, with the cap dashed and the stretches past it in orange. It follows now: the right edge is the present and the view slides with it. The wheel zooms and a drag pans; leaving the right edge stops the view where it is so a bar can be read, and ● live, the k key or panning back to the right edge follows now again. While a tooltip is open the view stands still. fit shows every run on record. A lane at the bottom is another repo with something running; a click opens its hub when it serves. The count is the checks in flight against the runner's cap"
+export const LIVE_HELP = "every check shipkit runs, whoever started it: this hub, an agent in a terminal, the plan, here and in the other repos. Folded, the last two minutes: a bar grows at the right while its check runs and slides left once it ends, in its verdict colour. Unfolded, the whole record, opened on the last ten minutes: the run bands, the time axis, and over the lanes how many checks ran at once, with the cap dashed and the stretches past it in orange. It follows now: the right edge is the present and the view slides with it. The wheel zooms and a drag pans; leaving the right edge stops the view where it is so a bar can be read, and ● live, the k key or panning back to the right edge follows now again. While a tooltip is open the view stands still. fit shows every run on record. A lane at the bottom is another repo with something running; a click opens its hub when it serves. The count is the checks in flight against the runner's cap"
 
 const Chevron = ({ open }: { open: boolean }) => (
     <svg className={open ? 'cvt open' : 'cvt'} viewBox="0 0 24 24" width="11" height="11" aria-hidden="true">
@@ -90,7 +122,7 @@ const Chevron = ({ open }: { open: boolean }) => (
     </svg>
 )
 
-export const LiveStrip = observer(({ app }: { app: HubSt }) => {
+export const LiveStrip = observer(({ app }: { app: RepoSt }) => {
     const l = app.live
     const v = l.view
     const run = v?.runs[0]

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

@@ -5,14 +5,14 @@
 // every check has its own page (checks-svc.ts owns the run itself). This card
 // exists so the whole text of a run stays reachable.
 import { makeAutoObservable, runInAction } from 'mobx'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 
 export class HealthSvc {
     statusMd: string | null = null
     /** the lines of the run in flight, newest last */
     live: string[] = []
 
-    constructor(private st: HubSt) {
+    constructor(private st: RepoSt) {
         makeAutoObservable<this, 'st'>(this, { st: false })
     }
 
@@ -25,7 +25,7 @@ export class HealthSvc {
 
     async load(): Promise<void> {
         try {
-            const s = (await (await fetch('/api/status.json')).json()) as { statusMd: string | null }
+            const s = (await (await fetch(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}` })

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

@@ -1,10 +1,12 @@
 // THE help affordance, once, for every surface of the hub: a small `(?)` that
-// shows one sentence the moment it is hovered or focused. CSS does the
-// showing (.hlp in hub.css), so there is no library, no delay and no state.
+// shows one sentence when it is hovered or focused, placed by floating-ui
+// (floating.tsx) above it, or wherever it fits.
 //
 // A term lives in TERMS rather than in the component that shows it, so the
 // same word is explained the same way wherever it appears.
 
+import { Tip } from './floating.tsx'
+
 export const TERMS: Record<string, string> = {
     always: 'it runs on every gate and every health pass',
     release: 'it runs on the release path only: the full gate and the health pass run it, the quick gate does not',
@@ -23,8 +25,9 @@ export const TERMS: Record<string, string> = {
 
 /** one sentence, either given here or named by its term. `text` takes a node
  *  so a legend can ride in the same bubble as a sentence */
-export const Help = ({ text, term }: { text?: React.ReactNode; term?: string }): React.ReactElement => (
-    <span className="hlp" tabIndex={0} role="note">
-        ?<span className="hbub">{text ?? (term != null ? TERMS[term] ?? term : '')}</span>
-    </span>
-)
+export const Help = ({ text, term }: { text?: React.ReactNode; term?: string }): React.ReactElement => {
+    const c = text ?? (term != null ? TERMS[term] ?? term : '')
+    // the sentence also rides inside the glyph, out of sight, so a screen
+    // reader and a search of the page find it without a hover
+    return <Tip className="hlp" tabIndex={0} tipClass="hbub" content={c}>?<span className="vh">{c}</span></Tip>
+}

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

@@ -0,0 +1,241 @@
+// HomeSt: THE root of the page (build/app-state-tree), exposed as window.app.
+// One tree for every page the home serves, '/', '/planned' and '/r/<repo>/':
+// the machine, the project list, the plan, and one RepoSt per repo visited, built on
+// the first visit and kept for the life of the page (same name, same
+// instance), so a repo you come back to shows what it showed. Only the shown
+// repo polls. Every other repo whose hub is up is read ahead in the
+// background, one at a time, so its first visit has its data at once. A hub serving on its own is the same tree with no machine and
+// one repo at base ''.
+//
+// the one constraint a reader breaks first: the url and the tree move
+// together, and only `show` moves the page. A list click, a link, back,
+// forward and a hand edited address all land there.
+import { makeAutoObservable, observableShallow, reaction, type IReactionDisposer } from 'mobx'
+import { currentHash } from './hash-route.ts'
+import { MachineSt, type MachineOpts } from './machine-st.ts'
+import { LayoutSt } from './layout-st.ts'
+import { PaletteSt } from './palette-st.ts'
+import { PlannedSt } from './planned-st.ts'
+import { ProjectsSvc } from './projects-svc.ts'
+import { parseFilter, RepoSt } from './repo-st.ts'
+
+/** the longest one repo's read ahead holds the next one back */
+export const PREFETCH_WAIT_MS = 10_000
+
+/** what the page shows: the machine overview, the plan, or one repo */
+export type Page = 'overview' | 'planned' | 'repo'
+
+/** where a repo's hub answers on the home */
+export const repoBase = (name: string): string => `/r/${encodeURIComponent(name)}`
+/** the page of a repo on the home */
+export const repoPage = (name: string): string => `${repoBase(name)}/`
+
+/** the page an address on the home names */
+export function routeOf(pathname: string): { page: Page; repo: string | null } {
+    const m = /^\/r\/([^/]+)/.exec(pathname)
+    if (m != null) return { page: 'repo', repo: decodeURIComponent(m[1]!) }
+    if (/^\/planned\/?$/.test(pathname)) return { page: 'planned', repo: null }
+    return { page: 'overview', repo: null }
+}
+
+/** a plain left click: anything else keeps the browser's own behaviour
+ *  (a new tab, a new window, a download) */
+export const plainClick = (e: { button: number; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }): boolean =>
+    e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey
+
+export type HomeOpts = MachineOpts & {
+    /** true on the home's web; false on a hub serving on its own */
+    home: boolean
+}
+
+export class HomeSt {
+    /** the machine, on the home; null on a hub of its own */
+    machine: MachineSt | null
+    /** the list of every repo on this disk */
+    projects: ProjectsSvc
+    /** the plan, polled while it is the page */
+    planned: PlannedSt
+    /** the one picker, cmd+k */
+    palette: PaletteSt
+    /** the widths of the project list and a repo's sidebar */
+    layout: LayoutSt
+    page: Page
+    /** the key of the shown repo: its name on the home, '' for the one repo
+     *  of a hub of its own. null on the overview and the plan */
+    selected: string | null = null
+    /** every repo visited, by key, kept for the life of the page */
+    repos = new Map<string, RepoSt>()
+    private disposers: IReactionDisposer[] = []
+    /** a read ahead is going: one repo at a time, never two loops */
+    private prefetching = false
+    private readonly onUrl = (): void => this.fromUrl()
+
+    constructor(o: HomeOpts) {
+        this.projects = new ProjectsSvc()
+        this.planned = new PlannedSt(this)
+        this.palette = new PaletteSt(this)
+        this.layout = new LayoutSt()
+        this.machine = o.home ? new MachineSt(this, o) : null
+        this.page = o.home ? 'overview' : 'repo'
+        makeAutoObservable<this, 'disposers' | 'onUrl' | 'prefetching'>(this, { machine: false, projects: false, planned: false, palette: false, layout: false, repos: observableShallow, disposers: false, onUrl: false, prefetching: false })
+        const m = this.machine
+        if (m != null) {
+            this.projects.onSelect = (name) => this.select(name)
+            this.projects.onPlace = (p) => this.navigate(p === 'overview' ? '/' : '/planned')
+            this.projects.dotOf = (name) => m.dotOf(name)
+            this.projects.warnOf = (name) => m.warnOf(name)
+        } else {
+            this.projects.onSelect = (name) => void this.openInHome(name)
+            const own = this.repo('')
+            own.markSeen()
+            this.selected = own.key
+        }
+    }
+
+    /** the repo on screen, or null */
+    get shown(): RepoSt | null {
+        return this.page !== 'repo' || this.selected == null ? null : this.repos.get(this.selected) ?? null
+    }
+
+    /** every repo shown once, in visit order: each keeps its own mounted
+     *  region. A repo only read ahead has no region yet */
+    get visited(): RepoSt[] {
+        return [...this.repos.values()].filter((r) => r.seen)
+    }
+
+    get title(): string {
+        if (this.page === 'overview') return 'home'
+        if (this.page === 'planned') return 'planned'
+        const r = this.shown
+        return r == null || r.name === '' ? 'hub' : `${r.name} · hub`
+    }
+
+    /** the repo of this key, built on its first visit and never again */
+    repo(key: string): RepoSt {
+        let r = this.repos.get(key)
+        if (r == null) {
+            r = new RepoSt(this, key, this.machine == null ? '' : repoBase(key))
+            this.repos.set(key, r)
+            // what this browser kept of it paints before its hub answers
+            void r.cols.restore()
+        }
+        return r
+    }
+
+    boot(): void {
+        this.machine?.boot()
+        this.disposers.push(reaction(() => this.title, (t) => { document.title = t }, { fireImmediately: true }))
+        // back, forward, a pasted link and a hand edited hash all arrive
+        // here; fromUrl is idempotent, so the two events firing together
+        // for one move cost nothing
+        window.addEventListener('popstate', this.onUrl)
+        window.addEventListener('hashchange', this.onUrl)
+        this.fromUrl()
+    }
+
+    dispose(): void {
+        for (const d of this.disposers) d()
+        this.disposers = []
+        window.removeEventListener('popstate', this.onUrl)
+        window.removeEventListener('hashchange', this.onUrl)
+        this.machine?.stop()
+        this.planned.stop()
+        for (const r of this.repos.values()) r.dispose()
+    }
+
+    /** a list click, a repo row: that repo, in place, as a history entry */
+    select(name: string): void {
+        this.show('repo', name, 'push')
+    }
+
+    /** a link to a page of the home: the same page, in place */
+    navigate(path: string): void {
+        const u = new URL(path, 'http://home.invalid')
+        const r = routeOf(u.pathname)
+        if (r.page === 'planned') this.planned.query = u.searchParams.get('q') ?? ''
+        this.show(r.page, r.repo, 'push')
+    }
+
+    /** the url decides the page: the first load, back, forward and a hand
+     *  edited address all land here */
+    fromUrl(): void {
+        if (this.machine == null) {
+            this.shown?.applyHash()
+            return
+        }
+        const r = routeOf(location.pathname)
+        // an address from before repo pages had their own path (`/#<repo>`)
+        const legacy = r.page === 'overview' ? currentHash() : ''
+        if (legacy !== '') return this.show('repo', legacy, 'replace')
+        if (r.page === 'planned') this.planned.query = new URLSearchParams(location.search).get('q') ?? ''
+        if (r.page === 'repo') this.repo(r.repo!).filter = parseFilter(location.search)
+        this.show(r.page, r.repo, 'none')
+        this.shown?.applyHash()
+    }
+
+    /** the one place the page changes. A repo left behind pauses and keeps
+     *  everything; the one shown resumes once its hub answers */
+    private show(page: Page, repo: string | null, how: 'push' | 'replace' | 'none'): void {
+        const prev = this.shown
+        const next = page === 'repo' && repo != null ? this.repo(repo) : null
+        // the page already shown is never a second history entry
+        if (how === 'push' && page === this.page && next === prev && page !== 'planned') how = 'none'
+        if (prev != null && prev !== next) prev.pause()
+        next?.markSeen()
+        this.page = page
+        this.selected = next?.key ?? null
+        this.projects.selected = this.selected
+        this.projects.place = page === 'repo' ? null : page
+        if (how !== 'none') {
+            const to = next != null ? `${repoPage(next.key)}${next.search}${next.hash}` : page === 'planned' ? this.planned.address : '/'
+            if (how === 'push') history.pushState(null, '', to)
+            else history.replaceState(null, '', to)
+        }
+        if (page === 'planned') this.planned.start()
+        else this.planned.stop()
+        if (next != null && next !== prev && this.machine?.data != null) void this.machine.hub(next.key, 'ensure')
+        this.wake()
+    }
+
+    /** the shown repo polls once its hub answers, or at once on a hub of its
+     *  own. One that started keeps going when its hub goes away, and says so */
+    wake(): void {
+        const r = this.shown
+        if (r == null) return
+        if (this.machine == null || r.started || (this.machine.fresh && this.machine.worker(r.key)?.status === 'up')) r.resume()
+    }
+
+    /** read ahead the first screen of every repo whose hub is up, in list
+     *  order, one at a time, once the repo shown has its own. A repo read
+     *  once is not read again: it polls when it shows */
+    async prefetch(): Promise<void> {
+        const m = this.machine
+        if (m?.data == null || !m.fresh || this.prefetching) return
+        const shown = this.shown
+        if (shown != null && !shown.cols.loaded) return
+        this.prefetching = true
+        try {
+            for (const p of this.projects.list) {
+                // a repo shown meanwhile has its own first screen to read:
+                // it goes first, and the next machine poll resumes this loop
+                const now = this.shown
+                if (now != null && !now.cols.loaded) return
+                if (m.worker(p.name)?.status !== 'up') continue
+                const r = this.repo(p.name)
+                if (r.started) continue
+                // a hub that hangs holds the loop back this long, never forever
+                await Promise.race([r.prefetch(), new Promise((ok) => setTimeout(ok, PREFETCH_WAIT_MS))])
+            }
+        } finally {
+            this.prefetching = false
+        }
+    }
+
+    /** a list click on a hub serving on its own: that repo's page on the
+     *  home when one serves, else the folder in VS Code */
+    async openInHome(name: string): Promise<void> {
+        const home = await fetch('/api/home-url').then((r) => r.json() as Promise<{ port: number; up: boolean }>).catch(() => null)
+        if (home?.up !== true) return this.projects.open(name)
+        window.location.href = `${window.location.protocol}//${window.location.hostname}:${home.port}${repoPage(name)}`
+    }
+}

package/src/serve/hub-app/home-strip.css

@@ -0,0 +1,70 @@
+/* the home's strip over a hub page, and the overview. hub.css owns every
+   token and the base controls: no colour is written here. */
+.hstrip{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--s2);height:32px;flex:none;padding:0 var(--s3);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}
+.hstrip .sp{flex:1}
+.hplace{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
+.hrepo{display:inline-flex;align-items:center;gap:var(--s2);min-width:0}
+.hrepo img,.hrico{flex:none;width:18px;height:18px;border-radius:4px;object-fit:contain}
+.hrname{font-size:13px;font-weight:650;letter-spacing:.04em}
+.hswatch{display:inline-flex;gap:2px}
+.hswatch input{width:16px;height:16px;padding:0;border:1px solid var(--line);border-radius:3px;background:none;cursor:pointer}
+.hswatch input::-webkit-color-swatch-wrapper{padding:0}
+.hswatch input::-webkit-color-swatch{border:none;border-radius:2px}
+.halert{display:inline-flex;align-items:center;font-size:12px;color:var(--errink)}
+.hctl{display:inline-flex;align-items:center;gap:var(--s2)}
+.hstat,.hflag{display:inline-flex;align-items:center;gap:var(--s1);font-size:12px;color:var(--dim)}
+.herr{font-size:12px;color:var(--errink);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.hdown{padding:var(--s2) var(--s3);font-size:13px;color:var(--errink);border-bottom:1px solid var(--red)}
+.hdown b{color:var(--red);margin-right:var(--s2)}
+.hdot{display:inline-block;width:8px;height:8px;border-radius:4px;margin-right:var(--s1);background:var(--line)}
+.hdot.up{background:var(--ok)}.hdot.starting,.hdot.stopping{background:var(--warn)}.hdot.crashed{background:var(--red)}
+.hres{display:inline-flex;align-items:center;padding:var(--s0) var(--s2);font-size:12px}
+.hres.down{color:var(--dim)}
+.hproc{display:inline-flex}
+/* a process log on hover, placed by floating-ui (floating.tsx); the pointer
+   can move into it to scroll */
+.hpop{z-index:20;margin:0;padding:var(--s2);width:min(80ch,80vw);max-height:40vh;overflow:auto;
+ background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:0 6px 20px var(--shadow);font:11px/1.45 ui-monospace,Menlo,monospace;color:var(--dim);white-space:pre-wrap}
+.hmon{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:var(--s3)}
+.hwidget{padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:3px;font-size:12px;overflow:auto}
+.hwidget h3{margin:0 0 var(--s2);font-size:12px;font-weight:650}
+.hwidget table{border-collapse:collapse}
+.hwidget td{padding:0 var(--s3) 0 0;white-space:nowrap;vertical-align:middle}
+.hbad{color:var(--errink)}
+.hwait{flex:1;min-height:0;padding:var(--s4);color:var(--dim);font-size:13px;overflow:auto}
+.hwait p{margin:0 0 var(--s2)}
+.hlog{margin:var(--s2) 0 0;padding:var(--s2);background:var(--panel);border:1px solid var(--line);border-radius:3px;
+ font:11px/1.45 ui-monospace,Menlo,monospace;color:var(--dim);white-space:pre-wrap;max-height:60vh;overflow:auto}
+.hall{flex:1;min-height:0;overflow:auto;padding:var(--s4)}
+/* the sections one under the other: shipkit, the process cards, the monitor */
+.hstack{display:flex;flex-direction:column;gap:var(--s4)}
+/* one card per global process, as many columns as fit, never a horizontal scroll */
+.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--s3)}
+.hcard{display:flex;flex-direction:column;gap:var(--s1);min-width:0;padding:var(--s2) var(--s3);background:var(--panel);border:1px solid var(--line);border-radius:4px;font-size:12px}
+.hchead{display:flex;align-items:center;gap:var(--s2)}
+.hcstate{font-size:12px;color:var(--dim)}
+.hcstate.up{color:var(--ok)}.hcstate.crashed{color:var(--red)}.hcstate.starting,.hcstate.stopping{color:var(--warn)}
+.hcfile{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.hcurl{color:var(--accent);text-decoration:none;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.hcurl:hover{text-decoration:underline}
+.hcbtns{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s1)}
+.hsec{min-width:0}
+.hsec h2{display:flex;align-items:center;gap:var(--s2);height:28px;margin:0 0 var(--s2);padding-bottom:var(--s1);border-bottom:1px solid var(--line);
+ font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
+.hsec h2 .sp{flex:1}
+.hsec h2 button{letter-spacing:0;text-transform:none}
+.hico{flex:none;color:var(--accent)}
+.hrow .sp{flex:1}
+.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s1) 0;border-bottom:1px solid var(--line)}
+.hrow .hlog{flex-basis:100%}
+.hlink{display:inline-flex;align-items:center;color:inherit;text-decoration:none;font-size:13px}
+.hlink:hover{text-decoration:underline}
+.hdim{font-size:12px;color:var(--dim)}
+.hnote{font-size:12px;color:var(--warn)}
+/* a filled bar any widget can draw: <span class="wbar" style="--p:51%"><i></i></span>,
+   green below 70%, `mid` from 70%, `hi` from 90% (the widget picks the class) */
+.wbar{display:inline-block;vertical-align:middle;width:84px;height:7px;margin-right:var(--s2);border-radius:4px;background:var(--line);overflow:hidden}
+.wbar > i{display:block;height:100%;width:var(--p,0%);background:var(--ok)}
+.wbar.mid > i{background:var(--warn)}
+.wbar.hi > i{background:var(--red)}
+.hcard .hrow{border-bottom:0;padding:var(--s0) 0}