rvlib-shipkit 1.1.1 → 1.3.0

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

@@ -0,0 +1,113 @@
+/* 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);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;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 bottom line: its height is reserved whether or not it says anything,
+   so the daemon or pm going down never moves the page. The strip renders it,
+   its order puts it last in the page column (hub.css .appcol) */
+.hbar{order:1;display:flex;align-items:center;gap:var(--s3);height:22px;flex:none;padding:0 var(--s3);border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;font-size:12px}
+.hdown{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--errink)}
+.hdown b{color:var(--red);margin-right:var(--s2)}
+.hdot{display:inline-block;width:8px;height:8px;border-radius:4px;margin-right:var(--s1);background:var(--line)}
+.hdot.up{background:var(--ok)}.hdot.starting,.hdot.stopping{background:var(--warn)}.hdot.crashed{background:var(--red)}
+.hres{display:inline-flex;align-items:center;padding:var(--s0) var(--s2);font-size:12px}
+.hres.down{color:var(--dim)}
+.hproc{display:inline-flex}
+/* a process log on hover, placed by floating-ui (floating.tsx); the pointer
+   can move into it to scroll */
+.hpop{z-index:20;margin:0;padding:var(--s2);width:min(80ch,80vw);max-height:40vh;overflow:auto;
+ background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:0 6px 20px var(--shadow);font:11px/1.45 ui-monospace,Menlo,monospace;color:var(--dim);white-space:pre-wrap}
+/* 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(--s1) var(--s2);border:1px solid var(--line);border-radius:3px;font-size:12px;line-height:1.5;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}
+.hwidget table{border-collapse:collapse}
+.hwidget td{padding:0 var(--s3) 0 0;white-space:nowrap;vertical-align:middle}
+.hbad{color:var(--errink)}
+.hwait{flex:1;min-height:0;padding:var(--s4);color:var(--dim);font-size:13px;overflow:auto}
+.hwait p{margin:0 0 var(--s2)}
+.hlog{margin:var(--s2) 0 0;padding:var(--s2);background:var(--panel);border:1px solid var(--line);border-radius:3px;
+ font:11px/1.45 ui-monospace,Menlo,monospace;color:var(--dim);white-space:pre-wrap;max-height:60vh;overflow:auto}
+.hall{flex:1;min-height:0;overflow:auto;padding:var(--s4)}
+/* the sections one under the other: the monitor, then the processes */
+.hstack{display:flex;flex-direction:column;gap:var(--s4)}
+.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.restart{width:64px}.c-gpb.stop{width:58px}.c-gpb.open{width:58px}
+.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}
+.gpb button{padding:0 var(--s2);font-size:12px}
+.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;justify-content:flex-end;align-items:center;gap:var(--s1)}
+.gphead button.hsm{padding:0 var(--s1);font-size:11px}
+.gpnote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+@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) and open stay, 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,.gphead button.hsm{display:none}.gptable .c-name{width:64px}.c-gpname{width:auto}.c-gpb.stop,.c-gpb.open{width:50px}}
+.hopen{margin-left:var(--s2)}
+.hopen button{display:inline-flex;align-items:center;padding:var(--s0) var(--s1)}
+.hopen .hico{color:inherit}
+.hsec{min-width:0}
+.hsec h2{display:flex;align-items:center;gap:var(--s2);height:28px;margin:0 0 var(--s2);padding-bottom:var(--s1);border-bottom:1px solid var(--line);
+ font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
+.hsec h2 .sp{flex:1}
+.hsec h2 button{letter-spacing:0;text-transform:none}
+.hico{flex:none;color:var(--accent)}
+.hrow .sp{flex:1}
+.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s1) 0;border-bottom:1px solid var(--line)}
+.hrow .hlog{flex-basis:100%}
+.hlink{display:inline-flex;align-items:center;color:inherit;text-decoration:none;font-size:13px}
+.hlink:hover{text-decoration:underline}
+.hdim{font-size:12px;color:var(--dim)}
+.hnote{font-size:12px;color:var(--warn)}
+/* a filled bar any widget can draw: <span class="wbar" style="--p:51%"><i></i></span>,
+   green below 70%, `mid` from 70%, `hi` from 90% (the widget picks the class) */
+.wbar{display:inline-block;vertical-align:middle;width:56px;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)}

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

@@ -0,0 +1,376 @@
+// 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 { 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, 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' }
+
+export const Dot = ({ s }: { s: WorkerView['status'] }) => <i className={`hdot ${s}`} />
+
+/** a link to a page of the home: a plain click shows it in place, any other
+ *  click keeps the browser's own behaviour */
+export const HomeLink = ({ app, to, className, title, children }: { app: HomeSt; to: string; className?: string; title?: string; children: ReactNode }) => (
+    <a className={className} href={to} title={title} onClick={(e) => {
+        if (!plainClick(e)) return
+        e.preventDefault()
+        app.navigate(to)
+    }}>{children}</a>
+)
+
+const Log = ({ lines }: { lines: string[] }) => (lines.length === 0 ? null : <pre className="hlog">{lines.join('\n')}</pre>)
+
+/** one switch per global process; its log floats under it on hover */
+export const ResourceChip = observer(({ m, r }: { m: MachineSt; r: ResourceView }) => {
+    const on = r.status === 'up' || r.status === 'starting'
+    const title = [r.description, r.where != null ? `on ${r.where}` : null, r.note].filter((x) => x != null).join(' · ')
+    const log = r.tail.length > 0 ? `${title !== '' ? `${title}\n\n` : ''}${r.tail.join('\n')}` : null
+    return (
+        <Tip className="hproc" tipClass="hpop" placement="bottom-start" interactive content={log} data-log={log == null ? undefined : 'yes'}>
+            <button className={`hres ${r.status}`} title={log != null ? undefined : title}
+                disabled={r.status === 'stopping' || (on && !r.canStop)}
+                onClick={() => void m.processAct(r.id, on ? 'stop' : 'start')}>
+                <Dot s={r.status} />{r.label}
+            </button>
+        </Tip>
+    )
+})
+
+/** 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 (
+        <>
+            <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>
+    )
+})
+
+/** every house repo's widgets: the html the daemon last rendered, each under its title */
+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">
+            <div className="hmon">
+                {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>
+    )
+})
+
+/** the two colours of a repo, a picker each: the page draws the dark one */
+export const IdentitySwatches = observer(({ app, name }: { app: HomeSt; name: string }) => {
+    const id = app.projects.identityOf(name)
+    return (
+        <span className="hswatch">
+            <input type="color" aria-label="colour on a dark background" title={`${name} on a dark background (this page): ${id.colorDark}, written to repo.config.ts identity.colorDark`}
+                value={id.colorDark} onChange={(e) => app.projects.setIdentity(name, { colorDark: e.currentTarget.value })} />
+            <input type="color" aria-label="colour on a light background" title={`${name} on a light background: ${id.colorLight}, written to repo.config.ts identity.colorLight`}
+                value={id.colorLight} onChange={(e) => app.projects.setIdentity(name, { colorLight: e.currentTarget.value })} />
+        </span>
+    )
+})
+
+/** the shown repo in the strip: its icon, its name in its colour */
+const ShownRepo = observer(({ app, name }: { app: HomeSt; name: string }) => {
+    const p = app.projects.list.find((x) => x.name === name)
+    const id = app.projects.identityOf(name)
+    return (
+        <span className="hrepo">
+            {/* the icon's box is there before the project list is, so the name never moves */}
+            {p?.icon != null ? <img src={p.icon} alt="" width={18} height={18} /> : <i className="hrico" />}
+            <b className="hrname" style={{ color: id.colorDark }}>{name}</b>
+            <IdentitySwatches app={app} name={name} />
+        </span>
+    )
+})
+
+/** what is wrong with the machine itself, one chip each. Nothing when all is
+ *  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) => (
+            <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.error !== '' ? <span className="herr" title={m.error}>{m.error}</span> : null}
+    </>
+))
+
+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 (
+        <>
+            <div className="hstrip">
+                {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} />
+        </>
+    )
+})
+
+/** 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
+    return (
+        <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>
+    )
+})
+
+/** why the shown repo's hub does not answer, and what to do about it */
+export const NotUp = observer(({ app }: { app: HomeSt }) => {
+    const m = app.machine
+    const name = m?.repo
+    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">
+            {w.blocked != null ? <p>{w.blocked}</p> : <p><Dot s={w.status} />{name}'s hub is {STATUS_WORD[w.status]}{w.note != null ? `: ${w.note}` : ''}</p>}
+            {w.blocked == null && (w.status === 'down' || w.status === 'crashed') ? <button className="primary" onClick={() => void m.hub(name, 'restart')}>start it</button> : null}
+            {w.blocked != null && mod?.status !== 'running' ? <button className="primary" onClick={() => void m.modernize(name)}>{w.blocked === NOT_INSTALLED ? 'bun install' : 'modernize'}</button> : null}
+            {mod == null ? null : <><p>modernize: {mod.status}{mod.code != null ? `, exit ${mod.code}` : ''}</p><Log lines={mod.tail} /></>}
+            <Log lines={w.tail} />
+        </div>
+    )
+})
+
+/** 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>
+    return (
+        <div className="hall">
+            <div className="hstack">
+                <Monitor m={m} />
+                <section className="hsec">
+                    <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>
+                {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

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>home</title>
+  <link rel="stylesheet" href="./hub.css" />
+  <link rel="stylesheet" href="./project-list.css" />
+  <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>
+  <script type="module" src="./hub-app.tsx"></script>
+</body>
+</html>