rvlib-shipkit 1.2.0 → 1.3.0

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

@@ -1,23 +1,32 @@
-// the home's strip over every page it serves: one quiet line. On a repo page
-// the shown repo (its icon, its name in its own colour, the two swatches that
-// set those colours); on the overview and the plan, the page's name. On the
-// right, only machine wide trouble, and only while it lasts (pm or the daemon
-// down, a child or a global process crashed). The places themselves are the
-// two buttons at the top of the project list (⌘J, ⌘P) and the first two
-// entries of the picker.
-// What belongs to one repo (its hub state, restart, the active flag, VS
-// Code, modernize) is RepoControls, in that repo's own header. NotUp stands
-// in for the hub page while its hub cannot answer, with the fix. Every link
-// of the home is a page of the same app: a plain click moves it in place.
+// the home's strip over every page it serves: one line that never wraps. On a
+// repo page the shown repo (its icon, its name in its own colour, the two
+// swatches that set those colours), what it runs now and its two runs, then
+// on the right its processes, its hub's trouble and its editor icons
+// (header-bar.tsx); on the overview and the plan, the page's name. At the
+// far right, only machine wide trouble, and only while it lasts (pm or the
+// daemon down, a child or a global process crashed). The places themselves
+// are the place buttons at the top of the project list (⌘J, ⌘L, ⌘', the
+// picker's ⌘K between the first two) and the first three entries of the
+// picker. What administers one repo (reload its hub, keep it active, archive
+// it) is its admin page (admin-view.tsx). NotUp stands in for the hub page
+// while its hub cannot answer, with the fix. Every link of the home is a
+// page of the same app: a plain click moves it in place. The daemon or pm
+// down is said in MachineBar, a reserved line the strip brings with it,
+// drawn last in the page column (its flex order).
 import { observer } from 'mobx-react-lite'
 import type { ReactNode } from 'react'
-import type { ResourceView } from '../../home/resources.ts'
+import type { ProcessIcon, ResourceView } from '../../home/resources.ts'
 import type { WorkerView } from '../../home/hubs.ts'
 import { NOT_INSTALLED } from '../../home/home-words.ts'
-import type { MachineSt } from './machine-st.ts'
-import { plainClick, type HomeSt } from './home-st.ts'
+import { splitWidgetHead } from '../../home/widget-text.ts'
+import type { MachineSt, OpenHow } from './machine-st.ts'
+import type { Role } from '../../home/pm.ts'
+import { processIcon, stateWords, type ProcessRow } from '../../home/process-rows.ts'
+import { plainClick, repoPage, type HomeSt } from './home-st.ts'
+import { stampWords } from './time-ago.tsx'
 import { Icon, ICON } from './icons.tsx'
 import { Tip } from './floating.tsx'
+import { notUp, RepoOpeners, RepoRun, RepoTools } from './header-bar.tsx'
 
 const STATUS_WORD: Record<WorkerView['status'], string> = { up: 'up', starting: 'starting', crashed: 'crashed', down: 'down', stopping: 'stopping' }
 
@@ -51,40 +60,134 @@ export const ResourceChip = observer(({ m, r }: { m: MachineSt; r: ResourceView
     )
 })
 
-/** a global process on the overview, as one card: its switch (its log
- *  floats on hover), its state in words, the repo and file that declare it,
- *  its url, then its buttons: restart, take over when a copy started
- *  elsewhere runs, open in the browser, open as an app window (app: true
- *  only), its declared actions */
-const ProcessCard = observer(({ m, r }: { m: MachineSt; r: ResourceView }) => {
-    const up = r.status === 'up'
+/** what a card or a group header wears: an emoji, an image, or an empty box of the same size */
+const Mark = ({ i }: { i: ProcessIcon | null }) =>
+    i == null ? <i className="hpico" /> : 'text' in i ? <span className="hpico">{i.text}</span> : <img className="hpico" src={i.src} alt="" width={16} height={16} />
+
+/** a global process's state in words, on the one clock: `up 2h`, `crashed 3m ago` */
+const StateWords = observer(({ m, r }: { m: MachineSt; r: ProcessRow }) => (
+    <span title={r.since == null ? undefined : `since ${stampWords(r.since)}`}>{stateWords(r, m.clock.now)}</span>
+))
+
+/** the button columns a table holds: a kind no line needs takes none */
+type BtnCols = { act: string | null; take: boolean }
+
+/** one process as one line, like a commit on the activity page: its dot,
+ *  icon and label (cut to its column, whole with its log on hover), its url
+ *  as a link, its version, its pid (a click copies it), its state, then one
+ *  cell per kind of button, so every start sits under every start: its
+ *  declared actions, take over, restart, start (stop while it runs), open.
+ *  One of shipkit's own wears a core tag and has its stop disabled: it is
+ *  always on, restarted through pm (pm itself by launchd). A running line is
+ *  tinted green, a crashed one red */
+const ProcessLine = observer(({ m, r, repoIcon, head, cols, span }: { m: MachineSt; r: ProcessRow; repoIcon: string | null; head: ReactNode; cols: BtnCols; span: number }) => {
+    const on = r.status === 'up' || r.status === 'starting'
+    const about = [r.label, ...(r.core ? [r.description] : [`${r.repo}/${r.file}`, r.description, r.where != null ? `on ${r.where}` : null])].filter((x) => x != null).join(' · ')
+    const log = r.tail.length > 0 ? `${about}\n\n${r.tail.join('\n')}` : null
+    const via = m.openHow === 'app' ? 'as a shipkit app window' : 'in the default browser'
+    const note = r.takeOver?.ok === false ? `cannot take over: ${r.takeOver.why}` : r.note
+    const stopTitle = r.core ? `always on: ${r.id === 'pm' ? 'pm is the LaunchAgent com.shipkit.pm, launchd starts it again when it dies' : `restart ${r.label} instead`}`
+        : on && !r.canStop ? `${r.label} was started outside pm, so pm cannot stop it` : on ? `stop ${r.label}` : `start ${r.label}`
+    const copied = r.pid != null && m.copiedPid === r.pid
     return (
-        <section className="hcard">
-            <div className="hchead">
-                <ResourceChip m={m} r={r} />
-                <span className={`hcstate ${r.status}`}>{STATUS_WORD[r.status]}</span>
-            </div>
-            <div className="hdim hcfile">{r.repo}/{r.file}</div>
-            {r.url != null ? (
-                <a className="hcurl" href={r.url} title={`open ${r.url} in the default browser`} onClick={(e) => {
-                    // the default browser, through pm, never inside the shipkit window
-                    e.preventDefault()
-                    void m.processAct(r.id, 'open')
-                }}>{r.url.replace(/^https?:\/\//, '')}</a>
-            ) : null}
-            {r.description != null || r.where != null ? <div className="hdim">{[r.description, r.where != null ? `on ${r.where}` : null].filter((x) => x != null).join(' · ')}</div> : null}
-            <div className="hcbtns">
-                {up && r.canStop ? <button className="ghost" onClick={() => void m.processAct(r.id, 'restart')} title={`stop ${r.label} and start it again`}>restart</button> : null}
-                {r.takeOver?.ok === true ? <button className="ghost" onClick={() => void m.processAct(r.id, 'takeover')} title={`stop the copy of ${r.label} started elsewhere (the process group listening on its port) and start one pm supervises, in one go`}>take over</button> : null}
-                {r.url != null ? <button className="ghost" onClick={() => void m.processAct(r.id, 'open')} title={up ? `open ${r.url} in the default browser` : `start ${r.label}, then open ${r.url} in the default browser`}>{up ? 'open' : 'start and open'}</button> : null}
-                {r.app && r.url != null ? <button className="ghost" onClick={() => void m.processAct(r.id, 'app')} title={up ? `open ${r.url} as a shipkit app window` : `start ${r.label}, then open ${r.url} as a shipkit app window`}>open as app</button> : null}
-                {r.actions.map((a) => (
-                    <button key={a.id} className="ghost" disabled={r.running != null} onClick={() => void m.processAct(r.id, 'action', a.id)}>{r.running === a.id ? <span className="spin" /> : null}{a.label}</button>
-                ))}
-            </div>
-            {r.takeOver?.ok === false ? <div className="hnote">cannot take over: {r.takeOver.why}</div> : null}
-            {r.note != null ? <div className="hnote">{r.note}</div> : null}
-        </section>
+        <>
+            <tr className={`gpline ${r.dot}`}>
+                {head}
+                <td className="gpname">
+                    <Tip className="gplabel" tipClass="hpop" placement="bottom-start" interactive content={log} data-log={log == null ? undefined : 'yes'}>
+                        <i className={`hdot ${r.dot}`} /><Mark i={processIcon(r, repoIcon)} /><span title={log != null ? undefined : about}>{r.label}</span>
+                        {r.core ? <b className="gptag" title="built into shipkit: always on">core</b> : null}
+                    </Tip>
+                </td>
+                <td className="gphost">
+                    {r.url == null ? null : r.core ? <span>{r.host}</span> : (
+                        <a href={r.url} title={`open ${r.url} ${via}`} onClick={(e) => {
+                            if (!plainClick(e)) return
+                            e.preventDefault()
+                            void m.openProcess(r.id)
+                        }}>{r.host}</a>
+                    )}
+                </td>
+                <td className="gpver">{r.version ?? ''}</td>
+                <td className="gppid">{r.pid == null ? null : <button className={copied ? 'gpcopy on' : 'gpcopy'} title={`copy pid ${r.pid}`} onClick={() => void m.copyPid(r.pid!)}>{copied ? 'copied' : r.pid}</button>}</td>
+                <td className={`gpstate ${r.dot}`}><StateWords m={m} r={r} /></td>
+                {cols.act == null ? null : <td className="gpb act">{r.actions.map((a) => (
+                    <button key={a.id} className="ghost hsm" disabled={r.running != null} onClick={() => void m.processAct(r.id, 'action', a.id)}>{r.running === a.id ? <span className="spin" /> : null}{a.label}</button>
+                ))}</td>}
+                {!cols.take ? null : <td className="gpb take">{r.takeOver?.ok === true ? <button className="ghost hsm" onClick={() => void m.processAct(r.id, 'takeover')} title={`stop the copy of ${r.label} started elsewhere (the process group listening on its port) and start one pm supervises, in one go`}>take over</button> : null}</td>}
+                <td className="gpb restart">{r.canRestart ? <button className="ghost hsm" onClick={() => void (r.core ? m.restartChild(r.id as Role) : m.processAct(r.id, 'restart'))} title={r.core ? `stop the ${r.label} and start it again, through pm` : `stop ${r.label} and start it again`}>restart</button> : null}</td>
+                <td className="gpb stop"><button className={on || r.core ? 'ghost' : 'primary'} disabled={r.core || r.status === 'stopping' || r.status === 'unknown' || (on && !r.canStop)}
+                    title={stopTitle} onClick={() => void m.processAct(r.id, on ? 'stop' : 'start')}>{on || r.core ? 'stop' : 'start'}</button></td>
+                <td className="gpb open">{r.url != null && !r.core ? <button className="ghost" onClick={() => void m.openProcess(r.id)} title={r.status === 'up' ? `open ${r.url} ${via}` : `start ${r.label}, then open ${r.url} ${via}`}>open</button> : null}</td>
+            </tr>
+            {note == null ? null : <tr className={`gpline ${r.dot}`}><td colSpan={span} className="gpnote hnote" title={note}>{note}</td></tr>}
+        </>
+    )
+})
+
+const OPENERS: { how: OpenHow; d: string; title: string }[] = [
+    { how: 'browser', d: ICON.browser, title: 'open opens the default browser' },
+    { how: 'app', d: ICON.window, title: 'open opens a shipkit app window' },
+]
+
+/** how every open button and url of the table opens, kept per browser */
+const OpenHowPick = observer(({ m }: { m: MachineSt }) => (
+    <span className="seg hopen" role="group" aria-label="how open opens">
+        {OPENERS.map((o) => (
+            <button key={o.how} className={m.openHow === o.how ? 'on' : undefined} aria-pressed={m.openHow === o.how} title={o.title} onClick={() => m.setOpenHow(o.how)}><Icon d={o.d} /></button>
+        ))}
+    </span>
+))
+
+/** the repo's icon and plain name, as on the activity page; a plain click shows it in place */
+const ProcessRepo = observer(({ app, name, icon }: { app: HomeSt; name: string; icon: string | null }) => (
+    <a className="acrepo" href={repoPage(name)} onClick={(e) => {
+        if (!plainClick(e)) return
+        e.preventDefault()
+        app.select(name)
+    }}>
+        {icon == null ? null : <img src={icon} alt="" width={14} height={14} draggable={false} />}
+        <span>{name}</span>
+    </a>
+))
+
+/** the processes as one table in the activity page's style: shipkit's own
+ *  first, then a row group per declaring repo in the project list's order,
+ *  its name in the first column, at the top of its group, then one line per
+ *  process. The header row ends with the new window button and the open
+ *  choice */
+const ProcessTable = observer(({ app, m }: { app: HomeSt; m: MachineSt }) => {
+    const groups = m.processGroups
+    const rows = groups.flatMap((g) => g.rows)
+    // wide enough for the longest set of declared actions, in the button font
+    const act = Math.max(0, ...rows.map((r) => r.actions.reduce((n, a) => n + a.label.length + 3, 0)))
+    const cols: BtnCols = { act: act === 0 ? null : `${act}ch`, take: rows.some((r) => r.takeOver?.ok === true) }
+    const btns = 3 + (cols.act == null ? 0 : 1) + (cols.take ? 1 : 0)
+    return (
+        <div className="gpwrap">
+            <table className="actable gptable">
+                <colgroup>
+                    <col className="c-name" /><col className="c-gpname" /><col className="c-gphost" /><col className="c-gpver" /><col className="c-gppid" /><col className="c-gpstate" />
+                    {cols.act == null ? null : <col className="c-gpb act" style={{ width: cols.act }} />}
+                    {cols.take ? <col className="c-gpb take" /> : null}
+                    <col className="c-gpb restart" /><col className="c-gpb stop" /><col className="c-gpb open" />
+                </colgroup>
+                <thead><tr>
+                    <th>repo</th><th>process</th><th className="gphost">url</th><th className="gpver">version</th><th className="gppid">pid</th><th className="gpstate">state</th>
+                    <th colSpan={btns} className="gphead"><div><button className="ghost hsm" title="open one more window on this page" onClick={() => m.newWindow()}>new window</button><OpenHowPick m={m} /></div></th>
+                </tr></thead>
+                {groups.map((g) => {
+                    const icon = g.core ? null : app.projects.list.find((p) => p.name === g.repo)?.icon ?? null
+                    const lines = g.rows.length + g.rows.filter((r) => r.note != null || r.takeOver?.ok === false).length
+                    const head = <td rowSpan={lines} className="acname">{g.core ? <span className="acrepo gpcore"><Icon d={ICON.shipkit} /><span>{g.repo}</span></span> : <ProcessRepo app={app} name={g.repo} icon={icon} />}</td>
+                    return (
+                        <tbody key={g.core ? ':core' : g.repo} className="acgrp">
+                            {g.rows.map((r, i) => <ProcessLine key={r.id} m={m} r={r} repoIcon={icon} head={i === 0 ? head : null} cols={cols} span={5 + btns} />)}
+                        </tbody>
+                    )
+                })}
+            </table>
+        </div>
     )
 })
 
@@ -94,15 +197,20 @@ const Monitor = observer(({ m }: { m: MachineSt }) => {
     if (w == null || (w.widgets.length === 0 && w.errors.length === 0)) return null
     return (
         <section className="hsec">
-            <h2><Icon d={ICON.monitor} />monitor</h2>
             <div className="hmon">
-                {w.widgets.map((x) => (
-                    <section key={`${x.repo}/${x.id}`} className="hwidget" title={`${x.repo}/${x.file}`}>
-                        <h3>{x.title}<span className="hdim"> · {x.repo}</span></h3>
-                        {x.error != null ? <p className="hnote">{x.error}</p> : null}
-                        {x.html == null ? <p className="twait"><span className="spin" /></p> : <div dangerouslySetInnerHTML={{ __html: x.html }} />}
-                    </section>
-                ))}
+                {w.widgets.map((x) => {
+                    const { head, body } = splitWidgetHead(x.html ?? '')
+                    return (
+                        <section key={`${x.repo}/${x.id}`} className="hwidget" title={`${x.repo}/${x.file}`}>
+                            <h3>
+                                {x.title}
+                                {head == null ? null : <span className="hdim"> · <span dangerouslySetInnerHTML={{ __html: head }} /></span>}
+                            </h3>
+                            {x.error != null ? <p className="hnote">{x.error}</p> : null}
+                            {x.html == null ? <p className="twait"><span className="spin" /></p> : <div dangerouslySetInnerHTML={{ __html: body }} />}
+                        </section>
+                    )
+                })}
             </div>
             {w.errors.map((e) => <p key={e} className="hnote">{e}</p>)}
         </section>
@@ -152,36 +260,48 @@ export const HomeStrip = observer(({ app }: { app: HomeSt }) => {
     const m = app.machine
     if (m == null) return null
     const name = m.repo
+    // the repo's own pieces only while its hub answers: NotUp says why not
+    const shown = name == null ? null : app.shown
+    const live = shown != null && !notUp(shown) ? shown : null
     return (
         <>
-            {m.down !== '' ? <div className="hdown" role="alert"><b>daemon down</b> {m.down}</div> : null}
-            {m.pmDown !== '' ? <div className="hdown" role="alert"><b>pm down</b> {m.pmDown}</div> : null}
             <div className="hstrip">
-                {name == null ? <span className="hplace">{app.page === 'planned' ? 'planned' : 'overview'}</span> : <ShownRepo app={app} name={name} />}
+                {name == null ? <span className="hplace">{app.page === 'overview' ? 'overview' : app.page}</span> : <ShownRepo app={app} name={name} />}
+                {live == null ? null : <RepoRun app={live} />}
                 <span className="sp" />
+                {live == null ? null : <RepoTools app={live} />}
                 <MachineAlerts m={m} />
+                {live == null ? null : <RepoOpeners app={live} />}
             </div>
+            <MachineBar app={app} />
         </>
     )
 })
 
-/** one repo's own controls on the home, in that repo's header: its hub
- *  state, restart, the active flag, VS Code, and modernize when it is behind */
-export const RepoControls = observer(({ app, name }: { app: HomeSt; name: string }) => {
+/** the daemon or pm not answering, on one line at the bottom of the window.
+ *  The line is always there, empty while all is well, so an alert never
+ *  moves the page. Only a failed probe sets down or pmDown: before the first
+ *  answer the line stays empty */
+export const MachineBar = observer(({ app }: { app: HomeSt }) => {
     const m = app.machine
     if (m == null) return null
-    const w = m.worker(name)
-    const behind = m.data?.behind[name]
     return (
-        <span className="hctl">
-            {w == null || w.status === 'up' ? null : <span className="hstat"><Dot s={w.status} />{STATUS_WORD[w.status]}</span>}
-            <button className="ghost" onClick={() => void m.hub(name, 'restart')} title="load this repo's hub again, its config read fresh">restart</button>
-            <label className="hflag" title="an active repo runs the checks the plan holds for it, and gets its pings, even with no agent in it">
-                <input type="checkbox" checked={m.isActive(name)} onChange={(e) => void m.setActive(name, e.currentTarget.checked)} />active
-            </label>
-            <button className="ghost" onClick={() => m.openInCode(name)} title="open the folder in VS Code (or double click its icon)">VS Code</button>
-            {behind == null ? null : <button className="primary" onClick={() => void m.modernize(name)} title={`this repo runs shipkit ${behind}, the home runs ${m.data?.version}`}>modernize {behind} → {m.data?.version}</button>}
-        </span>
+        <div className="hbar">
+            {m.down !== '' ? <span className="hdown" role="alert" title={m.down}><b>daemon down</b> {m.down}</span> : null}
+            {m.pmDown !== '' ? <span className="hdown" role="alert" title={m.pmDown}><b>pm down</b> {m.pmDown}</span> : null}
+        </div>
+    )
+})
+
+/** archive the repo or bring it back: `archived` in its repo.config.ts, and
+ *  only that key. Archived, it stays listed and nothing runs there */
+export const ArchiveButton = observer(({ app, name }: { app: HomeSt; name: string }) => {
+    const on = app.projects.isArchived(name)
+    return (
+        <button className="ghost" onClick={() => void app.projects.setArchived(name, !on)}
+            title={on ? 'bring it back: it returns to the project list, and its hub, watch, plan rows, processes and widgets run again' : 'archive it: it leaves the project list for the archived page, and nothing runs there (no hub, no watch, no plan rows, no processes, no widgets). Written to repo.config.ts archived'}>
+            {on ? 'unarchive' : 'archive'}
+        </button>
     )
 })
 
@@ -192,6 +312,13 @@ export const NotUp = observer(({ app }: { app: HomeSt }) => {
     if (m == null || name == null) return null
     const w = m.shown
     const mod = m.data?.modernize[name]
+    if (app.projects.isArchived(name))
+        return (
+            <div className="hwait">
+                <p>{name} is archived: nothing runs there, and only the <HomeLink app={app} to="/archived">archived page</HomeLink> lists it.</p>
+                <ArchiveButton app={app} name={name} />
+            </div>
+        )
     if (w == null) return <div className="hwait"><p className="twait"><span className="spin" />{m.down !== '' ? `waiting for the daemon to load ${name}…` : `looking for ${name}…`}</p></div>
     return (
         <div className="hwait">
@@ -204,41 +331,45 @@ export const NotUp = observer(({ app }: { app: HomeSt }) => {
     )
 })
 
-/** the overview at `/`: shipkit's own processes, a card per global process,
- *  then the widgets. The repos are the project list's, not a section here */
+/** the archived page at `/archived`: the one place an archived repo is
+ *  listed, each with its way back */
+export const ArchivedView = observer(({ app }: { app: HomeSt }) => {
+    const list = app.projects.archived
+    return (
+        <div className="hall">
+            <section className="hsec">
+                <h2><Icon d={ICON.archived} />archived</h2>
+                {list.length === 0 ? <p className="hdim">no archived repo: a repo is archived from its admin page, or `archived: true` in its repo.config.ts</p> : null}
+                {list.map((p) => (
+                    <div key={p.name} className="hrow">
+                        <span className="hlink">{p.icon != null ? <img className="hpico" src={p.icon} alt="" width={16} height={16} /> : <i className="hpico" />}{p.name}</span>
+                        <span className="sp" />
+                        <button className="ghost" onClick={() => void app.projects.setArchived(p.name, false)} title={`bring ${p.name} back: it returns to the project list, and its hub loads again`}>unarchive</button>
+                    </div>
+                ))}
+            </section>
+        </div>
+    )
+})
+
+/** the overview at `/`: the monitor widgets, then one processes table,
+ *  shipkit's own (pm, the daemon, the web) its first group. The repos are
+ *  the project list's, not a section here */
 export const Overview = observer(({ app }: { app: HomeSt }) => {
     const m = app.machine
     if (m == null) return null
     if (m.data == null) return <div className="hwait"><p className="twait"><span className="spin" />{m.down !== '' ? 'the daemon does not answer yet' : 'loading…'}</p></div>
-    const procs = m.pm?.resources ?? []
     return (
         <div className="hall">
             <div className="hstack">
+                <Monitor m={m} />
                 <section className="hsec">
-                    <h2><Icon d={ICON.shipkit} />shipkit<span className="sp" /><button className="ghost" title="open one more window on this page" onClick={() => m.newWindow()}>new window</button></h2>
-                    {m.pm == null ? <p className="hdim">pm does not answer, so its children and the global processes are unknown</p> : (
-                        <div className="hcards"><section className="hcard">
-                            <div className="hrow"><span className="hlink"><Dot s="up" />pm</span><span className="hdim">pid {m.pm.pid} · shipkit {m.pm.version}</span></div>
-                            {m.pm.children.map((c) => (
-                                <div key={c.id} className="hrow">
-                                    <span className="hlink"><Dot s={c.status} />{c.id}</span>
-                                    <span className="hdim">{STATUS_WORD[c.status]}{c.pid != null ? ` · pid ${c.pid}` : ''}{c.restarts > 0 ? ` · ${c.restarts} restart(s)` : ''}</span>
-                                    {c.note != null ? <span className="hnote">{c.note}</span> : null}
-                                    <span className="sp" />
-                                    <button className="ghost" onClick={() => void m.restartChild(c.id as 'daemon' | 'web')} title={`stop the ${c.id} and start it again, through pm`}>restart</button>
-                                    {c.status === 'crashed' ? <Log lines={c.tail} /> : null}
-                                </div>
-                            ))}
-                        </section></div>
-                    )}
-                </section>
-                <section className="hsec">
-                    <h2><Icon d={ICON.process} />global processes</h2>
-                    {procs.length === 0 ? <p className="hdim">{m.pm == null ? 'unknown while pm does not answer' : 'none declared: a repo declares one in a <name>.shipkit.ts file, as export default globalProcess({...})'}</p> : null}
-                    <div className="hcards">{procs.map((r) => <ProcessCard key={r.id} m={m} r={r} />)}</div>
+                    <ProcessTable app={app} m={m} />
+                    {m.pm != null && m.pm.resources.length === 0 ? <p className="hdim">no global process declared: a repo declares one in a &lt;name&gt;.shipkit.ts file, as export default globalProcess(&#123;...&#125;)</p> : null}
                     {(m.pm?.unitErrors ?? []).map((e) => <p key={e} className="hnote">{e}</p>)}
                 </section>
-                <Monitor m={m} />
+                {app.projects.archived.length === 0 ? null : <p className="hdim"><HomeLink app={app} to="/archived">{app.projects.archived.length} archived repo{app.projects.archived.length === 1 ? '' : 's'}</HomeLink>, listed nowhere else</p>}
+                <p className="hdim">in the console: shipkit overview</p>
             </div>
         </div>
     )

package/src/serve/hub-app/home.html

@@ -9,6 +9,10 @@
   <link rel="stylesheet" href="./prose-hits.css" />
   <link rel="stylesheet" href="./home-strip.css" />
   <link rel="stylesheet" href="./planned.css" />
+  <link rel="stylesheet" href="./activity.css" />
+  <link rel="stylesheet" href="./readme.css" />
+  <link rel="stylesheet" href="./dock.css" />
+  <link rel="stylesheet" href="./controls.css" />
 </head>
 <body data-home>
   <div id="root"></div>