rvlib-shipkit 1.2.0 → 1.4.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 (the picker's ⌘J,
+// then ⌘K, ⌘L, ⌘') 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 MachineToasts, floating over the page column's bottom
+// right corner, taking no room.
 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 { splitWidgetHead } from '../../home/widget-text.ts'
 import type { MachineSt } from './machine-st.ts'
-import { plainClick, type HomeSt } from './home-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,60 +60,164 @@ 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 process's state in words, on the one clock (`up 2h`, `crashed 3m ago`,
+ *  `no answer`). What it has to say (its note, a refused take over) is a
+ *  mark after the words and the hover, never a line of its own, so the
+ *  table keeps its height whatever a process says */
+const StateCell = observer(({ m, r }: { m: MachineSt; r: ProcessRow }) => {
+    const say = [r.note, r.takeOver?.ok === false ? `cannot take over: ${r.takeOver.why}` : null].filter((x) => x != null)
+    const title = [r.since == null ? null : `since ${stampWords(r.since)}`, ...say].filter((x) => x != null).join('\n')
     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>
+        <td className={`gpstate ${r.dot}`}>
+            <span title={title === '' ? undefined : title}>{stateWords(r, m.clock.now)}</span>
+            {say.length > 0 ? <i className="gpwarn" /> : null}
+        </td>
+    )
+})
+
+/** 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), then
+ *  its two switches as small icons, start or stop (play while stopped, stop
+ *  while it runs) and restart, each in a column of its own so every play
+ *  sits under every play, then its url: open in Chrome, open as its own
+ *  app (a spinner while that app builds), then the url itself, a link to
+ *  the default browser. Each starts the process first when it is down. Then
+ *  its version, its pid (a click copies it), its state, and its
+ *  declared actions and take over. 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 }: { m: MachineSt; r: ProcessRow; repoIcon: string | null; head: ReactNode; cols: BtnCols }) => {
+    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 first = r.status === 'up' ? '' : `start ${r.label}, then `
+    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 stops = on || r.core
+    const copied = r.pid != null && m.copiedPid === r.pid
+    return (
+        <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="gpb stop"><button className={`gpi${stops ? '' : ' go'}`} aria-label={stops ? 'stop' : 'start'} disabled={r.core || r.status === 'stopping' || r.status === 'unknown' || (on && !r.canStop)}
+                title={stopTitle} onClick={() => void m.processAct(r.id, on ? 'stop' : 'start')}><Icon d={stops ? ICON.stop : ICON.play} /></button></td>
+            <td className="gpb restart">{r.canRestart ? <button className="gpi" aria-label="restart" 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`}><Icon d={ICON.restart} /></button> : null}</td>
+            <td className="gphost">
+                {r.url == null ? null : r.core ? <span>{r.host}</span> : (
+                    <>
+                        <button className="gpi" aria-label="open in Chrome" onClick={() => void m.openProcess(r.id, 'chrome')} title={`${first}open ${r.url} in Chrome`}><Icon d={ICON.browser} /></button>
+                        <button className="gpi" aria-label="open as an app" disabled={r.appBusy} aria-busy={r.appBusy || undefined} onClick={() => void m.openProcess(r.id, 'app')}
+                            title={r.appBusy ? `building the ${r.label} app, then opening it` : `${first}open ${r.url} as its own app, ${r.label} in the dock`}>{r.appBusy ? <span className="spin" /> : <Icon d={ICON.window} />}</button>
+                        <a href={r.url} title={`${first}open ${r.url} in the default browser`} onClick={(e) => {
+                            if (!plainClick(e)) return
+                            e.preventDefault()
+                            void m.openProcess(r.id, 'browser')
+                        }}>{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>
+            <StateCell m={m} r={r} />
+            {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>}
+        </tr>
+    )
+})
+
+/** 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 url's header carries the new window button */
+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) }
+    return (
+        <div className="gpwrap">
+            <table className="actable gptable">
+                <colgroup>
+                    <col className="c-name" /><col className="c-gpname" /><col className="c-gpb stop" /><col className="c-gpb restart" /><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}
+                </colgroup>
+                <thead><tr>
+                    <th>repo</th><th>process</th><th colSpan={2} />
+                    <th className="gphost gphead"><div><span>url</span><span className="sp" /><button className="ghost hsm" title="open one more window on this page" onClick={() => m.newWindow()}>new window</button></div></th>
+                    <th className="gpver">version</th><th className="gppid">pid</th><th className="gpstate">state</th>
+                    {cols.act == null ? null : <th />}{cols.take ? <th /> : null}
+                </tr></thead>
+                {groups.map((g) => {
+                    const icon = g.core ? null : app.projects.list.find((p) => p.name === g.repo)?.icon ?? null
+                    const head = <td rowSpan={g.rows.length} 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} />)}
+                        </tbody>
+                    )
+                })}
+            </table>
+        </div>
     )
 })
 
-/** every house repo's widgets: the html the daemon last rendered, each under its title */
+/** every house repo's widgets: the html the daemon last rendered, each under
+ *  its title. An error is a mark on the title, its words on hover, so a card
+ *  keeps its lines; a card with no html yet says it where the html goes. A
+ *  widget file that failed to load is one mark after the cards */
 const Monitor = observer(({ m }: { m: MachineSt }) => {
     const w = m.widgets
     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>}
+                                {x.error != null && x.html != null ? <i className="gpwarn" title={x.error} /> : null}
+                            </h3>
+                            {x.html != null ? <div dangerouslySetInnerHTML={{ __html: body }} />
+                                : x.error != null ? <div className="hwerr">{x.error}</div>
+                                : <p className="twait"><span className="spin" /></p>}
+                        </section>
+                    )
+                })}
+                {w.errors.length === 0 ? null : (
+                    <span className="hwerr" title={w.errors.join('\n')}><i className="gpwarn" />{w.errors.length} widget file{w.errors.length === 1 ? '' : 's'} failed</span>
+                )}
             </div>
-            {w.errors.map((e) => <p key={e} className="hnote">{e}</p>)}
         </section>
     )
 })
@@ -140,10 +253,11 @@ const ShownRepo = observer(({ app, name }: { app: HomeSt; name: string }) => {
  *  well: the strip states trouble, never health */
 const MachineAlerts = observer(({ m }: { m: MachineSt }) => (
     <>
-        {(m.pm?.children ?? []).filter((c) => c.status === 'crashed' || c.status === 'down').map((c) => (
+        {/* pm silent, its last answer is kept for the table and says nothing here */}
+        {(m.pmDown !== '' ? [] : m.pm?.children ?? []).filter((c) => c.status === 'crashed' || c.status === 'down').map((c) => (
             <span key={c.id} className="halert" title={c.note ?? c.tail.at(-1) ?? ''}><Dot s={c.status} />{c.id} {STATUS_WORD[c.status]}</span>
         ))}
-        {(m.pm?.resources ?? []).filter((r) => r.status === 'crashed').map((r) => <ResourceChip key={r.id} m={m} r={r} />)}
+        {(m.pmDown !== '' ? [] : m.pm?.resources ?? []).filter((r) => r.status === 'crashed').map((r) => <ResourceChip key={r.id} m={m} r={r} />)}
         {m.error !== '' ? <span className="herr" title={m.error}>{m.error}</span> : null}
     </>
 ))
@@ -152,36 +266,49 @@ 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>
+            <MachineToasts 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, as toasts floating over the bottom right
+ *  corner of the page column, just above the dock. They take no room, so
+ *  one coming or going moves nothing, and nothing is drawn while all is
+ *  well. Only a failed probe sets down or pmDown: before the first answer
+ *  there is none */
+export const MachineToasts = observer(({ app }: { app: HomeSt }) => {
     const m = app.machine
-    if (m == null) return null
-    const w = m.worker(name)
-    const behind = m.data?.behind[name]
+    if (m == null || (m.down === '' && m.pmDown === '')) return null
     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="htoasts">
+            {m.down !== '' ? <div className="htoast" role="alert" title={m.down}><b>daemon down</b> {m.down}</div> : null}
+            {m.pmDown !== '' ? <div className="htoast" role="alert" title={m.pmDown}><b>pm down</b> {m.pmDown}</div> : 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 +319,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 +338,48 @@ 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 ?? []
+    // the table waits for pm's first word and for the list's order, so its
+    // rows never arrive or reorder after it paints
+    const p = app.projects
+    if (m.data == null || (m.pm == null && m.pmDown === '') || (p.list.length === 0 && !p.fresh && p.error === '')) return <div className="hwait"><p className="twait"><span className="spin" />{m.down !== '' ? 'the daemon does not answer yet' : 'loading…'}</p></div>
     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>