rvlib-shipkit 1.2.0 → 1.4.0

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

@@ -1,40 +1,28 @@
-// The header over every page, and the live strip under it. The header is the
-// 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.
+// 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
+// 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).
 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 { Icon, ICON } from './icons.tsx'
 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: 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)
-    const out: CorePage[] = []
-    if (has('checks')) out.push({ id: 'checks', label: 'checks', on: onCol('checks'), go: () => app.showCol('checks') })
-    // a page, never a resource: every hub keeps a run record, so it is
-    // 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 ?? 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
+/** the repo's hub has not answered on the home: its reason and its fix show
+ *  instead of the page. A screen this browser kept shows meanwhile, until
+ *  the machine says the hub is not up */
+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'
 }
 
 /** 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 */
+ *  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 }) => {
     const own = app.checks.strip
     const run = app.live.view?.runs[0]
@@ -49,8 +37,28 @@ const RunState = observer(({ app }: { app: RepoSt }) => {
     )
 })
 
+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 }) => {
+    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>
+            </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>
+        </span>
+    )
+})
+
 /** what is wrong with the hub itself, one chip per problem. Nothing when all
- *  is well: the header states trouble, never health */
+ *  is well: the bar states trouble, never health */
 const HubStatus = observer(({ app }: { app: RepoSt }) => (
     <>
         {app.cols.hubStatus.map((p) => (
@@ -59,30 +67,49 @@ const HubStatus = observer(({ app }: { app: RepoSt }) => (
     </>
 ))
 
-export const HeaderBar = observer(({ app }: { app: RepoSt }) => {
-    const u = app.checks
+/** modernize, while the repo runs an older shipkit than the home */
+const Modernize = observer(({ app }: { app: RepoSt }) => {
+    const m = app.home.machine
+    const behind = m?.data?.behind[app.key]
+    if (m == null || behind == null) return null
+    return <button className="primary hbtn" onClick={() => void m.modernize(app.key)} title={`this repo runs shipkit ${behind}, the home runs ${m.data?.version}`}>modernize {behind} → {m.data?.version}</button>
+})
+
+/** the repo in its editor and in its git client, one icon each, at the far
+ *  right end of the bar. Only on the home: the machine opens them */
+export const RepoOpeners = observer(({ app }: { app: RepoSt }) => {
+    const m = app.home.machine
+    if (m == null) return null
     return (
-        <header className="hdr">
-            {/* 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>
-            <button disabled={u.busy} onClick={() => void u.run(undefined, { gate: true, label: 'the gate' })}>run the gate</button>
-        </header>
+        <>
+            <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>
+        </>
     )
 })
 
+/** the right side of the bar for a repo, before the machine's trouble and
+ *  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 */
+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>
+))
+
 /** 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 }) => {
@@ -106,55 +133,3 @@ export const ProcessChips = observer(({ app }: { app: RepoSt }) => {
         </span>
     )
 })
-
-/** the key that folds and unfolds the strip, printed on its chevron */
-export const LIVE_KEY = 'l'
-
-/** the strip's own row, in px: the one height the folded strip has */
-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 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">
-        <path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-)
-
-export const LiveStrip = observer(({ app }: { app: RepoSt }) => {
-    const l = app.live
-    const v = l.view
-    const run = v?.runs[0]
-    const hidden = l.chart.layout?.hidden ?? 0
-    const waits = v == null ? '' : [
-        v.queued > 0 ? `${v.queued} queued for a free slot` : '',
-        ...v.blocked.map((w) => `${w.id} waits on ${w.deps.join(', ')}`),
-    ].filter((x) => x !== '').join('\n')
-    const who = run == null ? 'nothing running' : `${run.label}`
-    const chart = (
-        <TimelineChart view={l.chart} compact={!l.open} repos={v?.repos ?? []} follow zoomable={l.open}
-            onBar={(b) => app.cols.select('checks', `check:${b.id}`)}
-            onRepo={(r) => void l.openRepo(r.repo)} />
-    )
-    return (
-        <div className={`live${l.open ? ' open' : ''}${run == null ? ' idle' : ''}`} style={l.open ? { height: LIVE_ROW_H + l.held.h } : undefined}>
-            <div className="lrow">
-                <button className="lfold" onClick={() => l.toggle()} title={`${l.open ? 'fold' : 'unfold'} the live timeline (${LIVE_KEY})`}>
-                    <Chevron open={l.open} /><span className="sk">{LIVE_KEY}</span>
-                </button>
-                <Help text={LIVE_HELP} />
-                <span className="lwho" title={run == null ? '' : `${run.label}, started from the ${byWords(run.by)}${v != null && v.runs.length > 1 ? `\n${v.runs.length - 1} more in flight here` : ''}`}>
-                    {who}{run == null ? null : <i>{byWords(run.by)}</i>}{v != null && v.runs.length > 1 ? <b>+{v.runs.length - 1}</b> : null}
-                </span>
-                {l.open ? <span className="sp" /> : <div className="lchart">{chart}</div>}
-                {l.note !== '' ? <span className="lnote">{l.note}</span> : null}
-                {hidden > 0 ? <span className="lmore" title="check runs that did not fit in the folded strip: unfold it to see them">+{hidden}</span> : null}
-                <span className="lbusy" title={waits === '' ? 'checks in flight in this repo, against the runner cap' : waits}>
-                    in flight <span className="dnum">{v?.busy ?? 0}</span> / cap <span className="dnum">{v?.cap ?? 0}</span>
-                </span>
-            </div>
-            {l.open ? <div className="lopen">{chart}</div> : null}
-        </div>
-    )
-})

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

@@ -1,6 +1,6 @@
 // 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
+// One tree for every page the home serves, '/', '/planned', '/activity' and
+// '/r/<repo>/': the machine, the project list, the plan, the activity, 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
@@ -11,30 +11,41 @@
 // 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 { currentHash, hashFor } from './hash-route.ts'
 import { MachineSt, type MachineOpts } from './machine-st.ts'
 import { LayoutSt } from './layout-st.ts'
+import { DockSt } from './dock-st.ts'
 import { PaletteSt } from './palette-st.ts'
 import { PlannedSt } from './planned-st.ts'
+import { ActivitySt } from './activity-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'
+/** what the page shows: the machine overview, the plan, the activity, or one repo */
+export type Page = 'overview' | 'planned' | 'activity' | 'archived' | 'repo'
+
+/** the address of each page of the home that is no repo's */
+export const PLACE_PATH = { overview: '/', planned: '/planned', activity: '/activity', archived: '/archived' } as const
 
 /** 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)}/`
 
+/** where a check's own page answers on the home */
+export const checkAddress = (repo: string, check: string): string =>
+    `${repoPage(repo)}#${hashFor({ t: 'item', col: 'checks', id: `check:${check}` })}`
+
 /** 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 }
+    if (/^\/activity\/?$/.test(pathname)) return { page: 'activity', repo: null }
+    if (/^\/archived\/?$/.test(pathname)) return { page: 'archived', repo: null }
     return { page: 'overview', repo: null }
 }
 
@@ -55,13 +66,18 @@ export class HomeSt {
     projects: ProjectsSvc
     /** the plan, polled while it is the page */
     planned: PlannedSt
-    /** the one picker, cmd+k */
+    /** what every repo committed and holds, polled while it is the page */
+    activity: ActivitySt
+    /** the one picker, cmd+j */
     palette: PaletteSt
     /** the widths of the project list and a repo's sidebar */
     layout: LayoutSt
+    /** the run chart docked under the whole page */
+    dock: DockSt
     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 */
+    /** the key of the repo picked last: its name on the home, '' for the one
+     *  repo of a hub of its own. A global page keeps it (only `shown` says
+     *  whether it is on screen); null until a repo is picked */
     selected: string | null = null
     /** every repo visited, by key, kept for the life of the page */
     repos = new Map<string, RepoSt>()
@@ -73,15 +89,20 @@ export class HomeSt {
     constructor(o: HomeOpts) {
         this.projects = new ProjectsSvc()
         this.planned = new PlannedSt(this)
+        this.activity = new ActivitySt(this)
         this.palette = new PaletteSt(this)
         this.layout = new LayoutSt()
+        this.dock = new DockSt(this)
         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 })
+        makeAutoObservable<this, 'disposers' | 'onUrl' | 'prefetching'>(this, { machine: false, projects: false, planned: false, activity: false, palette: false, layout: false, dock: 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.onPlace = (p) => this.navigate(PLACE_PATH[p])
+            this.projects.onPicker = () => this.palette.toggle()
+            this.projects.pickerOpen = () => this.palette.open
+            this.projects.onArchived = () => this.navigate(PLACE_PATH.archived)
             this.projects.dotOf = (name) => m.dotOf(name)
             this.projects.warnOf = (name) => m.warnOf(name)
         } else {
@@ -106,6 +127,8 @@ export class HomeSt {
     get title(): string {
         if (this.page === 'overview') return 'home'
         if (this.page === 'planned') return 'planned'
+        if (this.page === 'activity') return 'activity'
+        if (this.page === 'archived') return 'archived'
         const r = this.shown
         return r == null || r.name === '' ? 'hub' : `${r.name} · hub`
     }
@@ -124,6 +147,7 @@ export class HomeSt {
 
     boot(): void {
         this.machine?.boot()
+        this.dock.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
@@ -140,6 +164,8 @@ export class HomeSt {
         window.removeEventListener('hashchange', this.onUrl)
         this.machine?.stop()
         this.planned.stop()
+        this.activity.stop()
+        this.dock.dispose()
         for (const r of this.repos.values()) r.dispose()
     }
 
@@ -148,6 +174,13 @@ export class HomeSt {
         this.show('repo', name, 'push')
     }
 
+    /** a check: its own page in its repo, in place. The selection is written
+     *  before the repo is shown, so the one history entry already names it */
+    openCheck(repo: string, check: string): void {
+        this.repo(repo).cols.select('checks', `check:${check}`)
+        this.select(repo)
+    }
+
     /** 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')
@@ -183,16 +216,20 @@ export class HomeSt {
         if (prev != null && prev !== next) prev.pause()
         next?.markSeen()
         this.page = page
-        this.selected = next?.key ?? null
+        // a global page is no repo's: the repo picked last stays selected
+        if (next != null) this.selected = next.key
         this.projects.selected = this.selected
-        this.projects.place = page === 'repo' ? null : page
+        this.projects.away = next == null
+        this.projects.place = page === 'repo' || page === 'archived' ? null : page
         if (how !== 'none') {
-            const to = next != null ? `${repoPage(next.key)}${next.search}${next.hash}` : page === 'planned' ? this.planned.address : '/'
+            const to = next != null ? `${repoPage(next.key)}${next.search}${next.hash}` : page === 'planned' ? this.planned.address : page === 'activity' || page === 'archived' ? PLACE_PATH[page] : '/'
             if (how === 'push') history.pushState(null, '', to)
             else history.replaceState(null, '', to)
         }
         if (page === 'planned') this.planned.start()
         else this.planned.stop()
+        if (page === 'activity') this.activity.start()
+        else this.activity.stop()
         if (next != null && next !== prev && this.machine?.data != null) void this.machine.hub(next.key, 'ensure')
         this.wake()
     }

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

@@ -1,21 +1,23 @@
 /* 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{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);background:var(--bg-top);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{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;flex:0 1 auto}
 .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}
+.hrname{font-size:13px;font-weight:650;letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .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)}
+/* the daemon or pm down: toasts over the bottom right corner of the page
+   column (hub.css .appcol is their box), just above the dock, never taking
+   room, so one coming or going moves nothing */
+.htoasts{position:absolute;right:var(--s3);bottom:var(--s3);z-index:25;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1);max-width:min(60ch,calc(100% - 2 * var(--s3)));pointer-events:none}
+.htoast{max-width:100%;padding:var(--s1) var(--s2);background:var(--panel);border:1px solid var(--red);border-radius:4px;box-shadow:0 6px 20px var(--shadow);font-size:12px;color:var(--errink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
+.htoast 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}
@@ -25,29 +27,86 @@
    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}
+/* each widget card exactly as wide as what it holds; a widget's leading
+   <header> joins the title line, dim */
+.hmon{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s2)}
+.hwidget{flex:0 1 auto;max-width:100%;padding:var(--s0) var(--s2);border:1px solid var(--line);border-radius:3px;font-size:12px;line-height:1.4;overflow:auto}
+.hwidget h3{margin:0;font-size:12px;font-weight:650;white-space:nowrap}
+.hwidget h3 .hdim{font-weight:400}
+/* meters in two columns: <table class="wmeters">, label · bar · value, twice a row */
+.wmeters td{padding-right:var(--s1)}
+.wmeters td:nth-child(3n){padding-right:var(--s3)}
+.wmeters td:last-child{padding-right:0}
+.wmeters .wbar{margin-right:0}
+/* a meter's value: small, its digits one width so a column never jitters */
+.wmeters .wv{font-size:11px;font-variant-numeric:tabular-nums}
 .hwidget table{border-collapse:collapse}
 .hwidget td{padding:0 var(--s3) 0 0;white-space:nowrap;vertical-align:middle}
+/* a widget error: in its card where the html goes, or one mark after the cards */
+.hwerr{font-size:12px;color:var(--warn);white-space:nowrap;cursor:help}
+.hwerr .gpwarn{margin:0 var(--s1) 0 0}
 .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 */
+/* the sections one under the other: the monitor, then the processes */
 .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)}
+.hpico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;font-size:13px;line-height:1;font-style:normal;object-fit:contain}
+/* the processes: the activity page's table (activity.css actable, acgrp,
+   acname, acrepo), a line per process tinted by its state, the group's name
+   at the top of its group, the label cut to its narrow column, then one
+   column per kind of button so they align across lines. The container query
+   drops the url, the version and the pid first, so a phone never scrolls
+   sideways */
+.gpwrap{container-type:inline-size;font-size:13px}
+.c-gpname{width:180px}.c-gpver{width:56px}.c-gppid{width:64px}.c-gpstate{width:110px}
+.c-gpb.take{width:78px}.c-gpb.stop,.c-gpb.restart{width:24px}
+.gptable td{vertical-align:middle}
+.gptable td.acname{vertical-align:top}
+.gpcore{color:var(--ink)}
+.gptag{flex:none;padding:0 var(--s1);border:1px solid var(--line);border-radius:3px;font-size:9px;font-weight:600;line-height:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
+.gpver{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
+.gppid{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
+.gpcopy{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
+.gpcopy:hover{color:var(--ink);text-decoration:underline dotted}
+.gpcopy.on{color:var(--ok)}
+.gpline.up td:not(.acname){background:var(--okbg)}
+.gpline.crashed td:not(.acname){background:var(--errbg)}
+.gplabel{display:flex;align-items:center;gap:var(--s1);min-width:0;cursor:default}
+.gplabel .hdot{flex:none;margin-right:0}
+.gplabel span{overflow:hidden;text-overflow:ellipsis}
+.hdot.unknown{background:var(--line)}
+.gphost a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-size:12px}
+.gphost span{color:var(--dim);font-size:12px}
+.gpstate{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
+.gpstate.up{color:var(--ok)}.gpstate.crashed{color:var(--red)}.gpstate.starting{color:var(--warn)}
+.gptable td.gpb{padding-left:0;padding-right:var(--s1);text-align:right;overflow:visible}
+.gptable td.gpb.stop,.gptable td.gpb.restart{padding:0;text-align:center}
+/* a small icon button: a process's start or stop, its restart, the open before its url */
+.gpi{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:3px;background:none;color:var(--dim);cursor:pointer;vertical-align:middle}
+.gpi .hico{width:14px;height:14px;color:inherit}
+.gpi:hover:not(:disabled){color:var(--ink);background:var(--panel2)}
+.gpi.go{color:var(--ok)}
+.gpi:disabled{opacity:.35;cursor:default}
+.gphost .gpi{margin-right:var(--s1)}
+/* the app button while its app builds: a spinner, never faded */
+.gpi[aria-busy]:disabled{opacity:1;cursor:progress}
+.gpb button.hsm{padding:0 var(--s1);font-size:11px}
+.gpb.act{white-space:nowrap}
+.gpb.act button + button{margin-left:var(--s1)}
+.gphead div{display:flex;align-items:center;gap:var(--s1)}
+.gphead .sp{flex:1}
+.gphead button.hsm{padding:0 var(--s1);font-size:11px}
+/* what a process has to say (its note, a refused take over): a mark after
+   its state words, the words on hover, never a line of its own */
+.gpwarn{display:inline-block;vertical-align:middle;width:6px;height:6px;margin-left:var(--s1);border-radius:1px;background:var(--warn)}
+.gpstate span[title]{cursor:help}
+@container (max-width:620px){.c-gphost,.gphost,.c-gpver,.gpver,.c-gppid,.gppid{display:none}.gptable .c-name{width:96px}.c-gpname{width:110px}.c-gpstate{width:88px}}
+/* a phone: the state words go too, the dot and the tint still say it, and
+   only start (stop) stays, the label taking what is left */
+@container (max-width:440px){.c-gpstate,.gpstate,.c-gpb.act,.gpb.act,.c-gpb.take,.gpb.take,.c-gpb.restart,.gpb.restart{display:none}.gptable .c-name{width:64px}.c-gpname{width:auto}}
 .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}
@@ -63,8 +122,7 @@
 .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{display:inline-block;vertical-align:middle;width:40px;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}