rvlib-shipkit 1.4.0 → 1.6.0

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 })
         }
     }
 

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

@@ -20,6 +20,7 @@ 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'
+import { openSection, repoSections, sectionOfRepo } from './repo-sections.ts'
 
 /** the longest one repo's read ahead holds the next one back */
 export const PREFETCH_WAIT_MS = 10_000
@@ -169,8 +170,19 @@ export class HomeSt {
         for (const r of this.repos.values()) r.dispose()
     }
 
-    /** a list click, a repo row: that repo, in place, as a history entry */
+    /** a list click, a repo row: that repo, in place, as a history entry,
+     *  on the section the repo left showed. One already inside that section
+     *  keeps its own page there, and one that has no such section opens its
+     *  README. Written before the repo shows, so the one history entry
+     *  already names it */
     select(name: string): void {
+        const from = this.page === 'repo' ? this.shown : null
+        const to = this.repo(name)
+        const want = from == null || from === to ? null : sectionOfRepo(from)
+        if (want != null && sectionOfRepo(to) !== want) {
+            const known = to.cols.loaded || to.cols.cached
+            openSection(to, known && !repoSections(to).some((s) => s.id === want && s.opens) ? 'readme' : want)
+        }
         this.show('repo', name, 'push')
     }
 
@@ -178,7 +190,7 @@ export class HomeSt {
      *  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)
+        this.show('repo', repo, 'push')
     }
 
     /** a link to a page of the home: the same page, in place */

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

@@ -6,18 +6,42 @@
 .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;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)}
-.herr{font-size:12px;color:var(--errink);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/* 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)}
+/* trouble, as cards (float-cards.tsx), never taking room, so one coming or
+   going moves nothing: at the top right, in a zero height box right after
+   the bar, so just under it whatever its height. The words wrap, never cut */
+.htoasts{position:absolute;right:var(--s3);top:var(--s2);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}
+.hanchor{position:relative;height:0;flex:none;z-index:25}
+.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;line-height:1.45;color:var(--errink);white-space:normal;overflow-wrap:anywhere;pointer-events:auto}
+.htoast b{color:var(--red);margin-right:var(--s1)}
+.htoast.warn{border-color:var(--warn);color:var(--warn)}
+.htoast.warn b{color:var(--warn)}
+.htoast .hproc{vertical-align:middle}
+/* the bar's run: one small check… button, then a spinner while a run goes,
+   its words in a tooltip (header-bar.tsx) */
+.hcheck{height:22px;padding:0 var(--s2);font-size:11.5px;flex:none}
+.hbusy{display:inline-flex;align-items:center;justify-content:center;width:18px;min-width:18px;height:22px;flex:none;border-radius:3px;cursor:default;outline:none}
+.hbusy:focus-visible{box-shadow:0 0 0 1px var(--accent)}
+/* a popover opened on a click (floating.tsx Pop) */
+.fpop{z-index:40;width:max-content;max-width:min(44ch,90vw);padding:var(--s1);background:var(--panel2);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 20px var(--shadow);outline:none}
+.hmenu{display:flex;flex-direction:column;gap:var(--s0)}
+.fpopw{max-width:min(96ch,94vw)}
+.hmenu2{display:flex;align-items:stretch}
+.hmacts{flex:none;min-width:24ch;max-width:36ch}
+.hmabout{flex:1 1 auto;min-width:0;max-width:56ch;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:var(--s1);margin-left:var(--s1);padding:var(--s1) var(--s2);border-left:1px solid var(--line);user-select:text}
+.hmabout .md{overflow-wrap:anywhere}
+.hmabout .md>:first-child{margin-top:0}
+.hmlog{display:block;font-size:11px;color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere}
+@media (max-width:640px){.hmenu2{flex-direction:column}.hmabout{margin:var(--s1) 0 0;border-left:0;border-top:1px solid var(--line)}}
+.hmitem{display:flex;align-items:flex-start;gap:var(--s2);width:100%;padding:var(--s1) var(--s2);border:0;border-radius:3px;background:none;color:var(--ink);text-align:left;white-space:normal;cursor:pointer}
+.hmitem:hover:not(:disabled),.hmitem:focus-visible{background:var(--panel)}
+.hmitem:disabled{opacity:.45;cursor:default}
+.hmitem .hico{flex:none;width:14px;height:14px;margin-top:2px}
+.hmitem span{display:flex;flex-direction:column;gap:2px}
+.hmitem b{font-size:12.5px;font-weight:600}
+.hmitem small{font-size:11.5px;line-height:1.4;color:var(--dim)}
+.hmhead{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2) 0;font-size:12.5px}
+.hmhead span{color:var(--dim)}
+.hmnote{display:block;font-size:11.5px;line-height:1.4;color:var(--dim);overflow-wrap:anywhere}
 .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}
@@ -126,3 +150,10 @@
 .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)}
+
+/* a process card on the processes page: the menu's two panels at page width */
+.pdetail .hmacts{max-width:none}
+.pdetail .hmabout{max-width:none;max-height:none}
+.pdetail>.cstitle{margin:var(--s3) 0 var(--s1)}
+.pdetail>.cstitle:first-child{margin-top:0}
+.pdetail .hlog{margin-top:0}