rvlib-shipkit 1.4.0 → 1.5.0

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

@@ -1,21 +1,22 @@
 // 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
+// swatches that set those colours), its check… button and a spinner while
+// it runs, then on the right its processes and its editor icons
+// (header-bar.tsx); on the overview and the plan, the page's name. The strip
+// carries no trouble text: the shown hub's trouble and the machine's (the
+// daemon, pm or the web not answering, a child or a global process crashed, a
+// failed poll) are cards floating under it at the top right, only while they
+// last (float-cards.tsx). The machine not answering is said there and nowhere
+// else (reach.ts). 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.
+// page of the same app: a plain click moves it in place.
 import { observer } from 'mobx-react-lite'
 import type { ReactNode } from 'react'
-import type { ProcessIcon, ResourceView } from '../../home/resources.ts'
+import type { OpenHow, 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'
@@ -25,8 +26,10 @@ import { processIcon, stateWords, type ProcessRow } from '../../home/process-row
 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'
+import { Pop, Tip } from './floating.tsx'
+import { renderMd } from './md.ts'
+import { FloatCards, type Card } from './float-cards.tsx'
+import { hubCards, 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' }
 
@@ -42,9 +45,9 @@ export const HomeLink = ({ app, to, className, title, children }: { app: HomeSt;
     }}>{children}</a>
 )
 
-const Log = ({ lines }: { lines: string[] }) => (lines.length === 0 ? null : <pre className="hlog">{lines.join('\n')}</pre>)
+export 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 */
+/** a crashed global process's switch (start it again); 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(' · ')
@@ -249,18 +252,92 @@ const ShownRepo = observer(({ app, name }: { app: HomeSt; name: string }) => {
     )
 })
 
-/** 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 }) => (
-    <>
-        {/* 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.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}
-    </>
-))
+/** the machine not answering, as ONE card: the web (pm behind it is then
+ *  unknown, not down), the daemon, pm, or the daemon and pm together */
+const downCard = (m: MachineSt): Card[] => {
+    const web = m.down !== '' && m.downWho === 'web'
+    const pm = m.pmDown !== '' && !web
+    if (m.down === '' && !pm) return []
+    const head = m.down === '' ? 'pm down' : pm ? 'daemon and pm down' : `${m.downWho} down`
+    return [{ key: 'down', tone: 'red', head, body: m.down === '' ? m.pmDown : pm ? <>{m.down}<br />{m.pmDown}</> : m.down }]
+}
+
+/** what is wrong with the machine itself, one card each: the machine not
+ *  answering, a crashed child of pm, a crashed global process (its switch
+ *  starts it again), a failed poll. While pm is silent its last answer says
+ *  nothing here */
+const machineCards = (m: MachineSt): Card[] => {
+    const pm = m.pmDown !== '' ? null : m.pm
+    return [
+        ...downCard(m),
+        ...(pm?.children ?? []).filter((c) => c.status === 'crashed' || c.status === 'down').map((c): Card => ({ key: `child:${c.id}`, tone: 'red', head: `${c.id} ${STATUS_WORD[c.status]}`, body: c.note ?? c.tail.at(-1) ?? '' })),
+        ...(pm?.resources ?? []).filter((r) => r.status === 'crashed').map((r): Card => ({ key: `res:${r.id}`, tone: 'red', head: 'crashed', body: <ResourceChip m={m} r={r} /> })),
+        ...(m.error !== '' ? [{ key: 'poll', tone: 'red' as const, body: m.error }] : []),
+    ]
+}
+
+/** a global process's menu: start or stop, restart, its url opened three
+ *  ways (each starts it first when it is down), then its declared actions and
+ *  take over. Every entry is a click on purpose, never the chip itself */
+/** `lastLog: false` where the whole log is drawn under it, so its last line is not said twice */
+export const ProcessMenu = observer(({ m, r, close, lastLog = true }: { m: MachineSt; r: ProcessRow; close: () => void; lastLog?: boolean }) => {
+    const on = r.status === 'up' || r.status === 'starting'
+    const first = r.status === 'up' ? '' : ', starts it first'
+    const act = (a: Parameters<MachineSt['processAct']>[1], action?: string) => () => { close(); void m.processAct(r.id, a, action) }
+    const open = (how: OpenHow) => () => { close(); void m.openProcess(r.id, how) }
+    const log = lastLog ? r.lastLog : null
+    const about = r.description != null && r.description !== '' || r.note != null || log != null
+    return (
+        <div className="hmenu2">
+            <div className="hmenu hmacts">
+                <div className="hmhead"><i className={`pdot ${r.status}`} /><b>{r.label}</b><span>{r.status}</span></div>
+                {on ? (
+                    <button className="hmitem" disabled={r.status === 'stopping' || !r.canStop} onClick={act('stop')}>
+                        <Icon d={ICON.stop} /><span><b>stop</b>{r.canStop ? null : <small>started outside pm, so pm cannot stop it</small>}</span>
+                    </button>
+                ) : (
+                    <button className="hmitem" disabled={r.status === 'unknown'} onClick={act('start')}><Icon d={ICON.play} /><span><b>start</b></span></button>
+                )}
+                {r.canRestart ? <button className="hmitem" onClick={act('restart')}><Icon d={ICON.restart} /><span><b>restart</b></span></button> : null}
+                {r.url == null ? null : (
+                    <>
+                        <button className="hmitem" onClick={open('browser')}><Icon d={ICON.browser} /><span><b>open in a browser tab</b><small>{r.host}{first}</small></span></button>
+                        <button className="hmitem" onClick={open('chrome')}><Icon d={ICON.browser} /><span><b>open in Chrome</b><small>{r.host}{first}</small></span></button>
+                        <button className="hmitem" disabled={r.appBusy} onClick={open('app')}><Icon d={ICON.window} /><span><b>open as an app</b><small>{r.appBusy ? `building the ${r.label} app` : `${r.label} in the dock${first}`}</small></span></button>
+                    </>
+                )}
+                {r.actions.map((a) => <button key={a.id} className="hmitem" disabled={r.running != null} onClick={act('action', a.id)}><Icon d={ICON.process} /><span><b>{a.label}</b></span></button>)}
+                {r.takeOver?.ok === true ? <button className="hmitem" onClick={act('takeover')}><Icon d={ICON.restart} /><span><b>take over</b><small>stop the copy started elsewhere and start one pm supervises</small></span></button> : null}
+            </div>
+            {about ? (
+                <div className="hmabout">
+                    {r.description != null && r.description !== '' ? <div className="md" dangerouslySetInnerHTML={{ __html: renderMd(r.description) }} /> : null}
+                    {r.note != null ? <small className="hmnote">{r.note}</small> : null}
+                    {log != null ? <code className="hmlog" title="its last log line">{log}</code> : null}
+                </div>
+            ) : null}
+        </div>
+    )
+})
+
+/** the shown repo's global processes, one chip each, right after its name: its
+ *  dot and label, and a click opens its menu (ProcessMenu). pm runs them, so
+ *  they show whether the repo's hub answers or not */
+const RepoProcesses = observer(({ m, name }: { m: MachineSt; name: string }) => {
+    const rows = m.processGroups.find((g) => g.core !== true && g.repo === name)?.rows ?? []
+    if (rows.length === 0) return null
+    return (
+        <span className="hprocs hgprocs">
+            {rows.map((r) => (
+                <span key={r.id} className="hproc">
+                    <Pop className={`ghost ${r.status}`} popClass="fpop fpopw" aria-label={`${r.label}, ${r.status}: open its menu`} label={<><i className={`pdot ${r.status}`} />{r.label}</>}>
+                        {(close) => <ProcessMenu m={m} r={r} close={close} />}
+                    </Pop>
+                </span>
+            ))}
+        </span>
+    )
+})
 
 export const HomeStrip = observer(({ app }: { app: HomeSt }) => {
     const m = app.machine
@@ -273,33 +350,17 @@ export const HomeStrip = observer(({ app }: { app: HomeSt }) => {
         <>
             <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} />}
+                {name == null ? null : <RepoProcesses m={m} name={name} />}
                 <span className="sp" />
                 {live == null ? null : <RepoTools app={live} />}
-                <MachineAlerts m={m} />
+                {live == null ? null : <RepoRun app={live} />}
                 {live == null ? null : <RepoOpeners app={live} />}
             </div>
-            <MachineToasts app={app} />
+            <FloatCards cards={[...(live == null ? [] : hubCards(live)), ...machineCards(m)]} />
         </>
     )
 })
 
-/** 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 || (m.down === '' && m.pmDown === '')) return null
-    return (
-        <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 }) => {
@@ -326,7 +387,7 @@ export const NotUp = observer(({ app }: { app: HomeSt }) => {
                 <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>
+    if (w == null) return <div className="hwait"><p className="twait"><span className="spin" />{`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>}
@@ -366,9 +427,12 @@ export const Overview = observer(({ app }: { app: HomeSt }) => {
     const m = app.machine
     if (m == null) return null
     // the table waits for pm's first word and for the list's order, so its
-    // rows never arrive or reorder after it paints
+    // rows never arrive or reorder after it paints. The daemon silent, it
+    // draws whatever it last had: the down card says the rest
     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>
+    const nothing = m.data == null && m.pm == null && m.widgets == null
+    const first = m.data == null || (m.pm == null && m.pmDown === '') || (p.list.length === 0 && !p.fresh && p.error === '')
+    if (nothing || (m.down === '' && first)) return <div className="hwait"><p className="twait"><span className="spin" />loading…</p></div>
     return (
         <div className="hall">
             <div className="hstack">

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

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="./prose-hits.css" />
   <link rel="stylesheet" href="./home-strip.css" />
   <link rel="stylesheet" href="./planned.css" />
+  <link rel="stylesheet" href="./when.css" />
   <link rel="stylesheet" href="./activity.css" />
   <link rel="stylesheet" href="./readme.css" />
   <link rel="stylesheet" href="./dock.css" />

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

@@ -2,9 +2,10 @@
 // app for every page the home serves ('/', '/planned', '/activity', '/r/<repo>/') and for a
 // hub serving on its own at '/'. mobx+react per build/app-state-tree: HomeSt
 // is the single root (window.app), each repo a RepoSt under it, services own
-// state, components read and call. A repo's page is its sections over ONE
-// tree of every repo resource (sidebar.tsx), by path or by type, coloured by
-// state in the label itself, over one severity filter persisted at
+// state, components read and call. A repo's page is ONE tree whose top rows
+// are its sections and whose rows under them are every repo resource
+// (sidebar.tsx), coloured by state in the label itself, under one filter
+// input and one severity filter persisted at
 // ?f=needs · ?f=red. A row opens its item view, an asset row opens the atelier.
 import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
@@ -24,6 +25,10 @@ import { TestCard } from './test-view.tsx'
 import { TestsPage } from './tests-view.tsx'
 import { AssetStage, CatGrid, InfoChips, MediaTopbar, ToolsBar, VariantsBar } from './media-view.tsx'
 import { Sidebar } from './sidebar.tsx'
+import { ProcessesPage } from './processes-view.tsx'
+import { PlanPage } from './plan-view.tsx'
+import { WhenPage } from './when-view.tsx'
+import { GitPage } from './git-view.tsx'
 import { AdminPage } from './admin-view.tsx'
 import { ReadmeView } from './readme-view.tsx'
 import { ProjectList } from './project-list.tsx'
@@ -35,7 +40,7 @@ import { ActivityView } from './activity-view.tsx'
 import { Palette } from './palette-view.tsx'
 import { SCREEN_WAIT_MS } from './screen-cache.ts'
 import { isSearchKey, pageKey, sectionKey } from './keys.ts'
-import { repoSections } from './repo-sections.tsx'
+import { repoSections } from './repo-sections.ts'
 import { Dock } from './dock-view.tsx'
 import { DOCK } from './dock-st.ts'
 import { animateDock } from './dock-anim.ts'
@@ -93,6 +98,11 @@ const Main = observer(({ app }: { app: RepoSt }) => {
     )
     if (app.sel?.t === 'tests') return <main>{errs}<div className="stagewrap"><TestsPage app={app} check={app.sel.check} /></div></main>
     if (app.sel?.t === 'admin') return <main>{errs}<div className="stagewrap"><AdminPage app={app} /></div></main>
+    if (app.sel?.t === 'plan') return <main>{errs}<div className="stagewrap"><PlanPage app={app} /></div></main>
+    if (app.sel?.t === 'git') return <main>{errs}<div className="stagewrap"><GitPage app={app} /></div></main>
+    if (app.sel?.t === 'checks') return <main>{errs}<CheckTable app={app} id="checks" from={app.sel.from} /></main>
+    if (app.sel?.t === 'when') return <main>{errs}<div className="stagewrap"><WhenPage app={app} /></div></main>
+    if (app.sel?.t === 'processes') return <main>{errs}<div className="stagewrap"><ProcessesPage app={app} id={app.sel.id} /></div></main>
     if (app.sel?.t === 'status') return <main>{errs}<div className="stagewrap"><StatusCard app={app} /></div></main>
     if (app.sel?.t === 'cat') return <main>{errs}<CatGrid app={app} /></main>
     if (app.sel?.t === 'asset') return (

package/src/serve/hub-app/hub-types.ts

@@ -73,9 +73,10 @@ export type RecentRun = { at: number; ms: number; status: CheckStatus; replayed:
 // engine reaches the bundle: two declarations of one vocabulary is how a
 // switch ends up writing a word the other half does not know
 import type { WhenAt, WhenSource } from '../../core/when.ts'
+import type { RunsCells } from '../../core/runs-matrix.ts'
 import type { Line } from '../../core/wire.ts'
 import type { CheckFrom } from '../../check.ts'
-export type { CheckFrom, WhenAt, WhenSource }
+export type { CheckFrom, WhenAt, WhenSource, RunsCells }
 
 /** a gate check's declaration and its numbers (collections/collection-types.ts
  *  CheckFacts is the source; this is the wire mirror the page reads) */
@@ -87,6 +88,8 @@ export type CheckFacts = {
     /** the wire lines of its last run, rendered as inline markdown */
     lastLines: string[]
     gate: boolean
+    /** every context it runs in and how it caches */
+    runs: RunsCells
     /** a build step: the gate runs it, the health pass does not */
     build: boolean
     blocking: boolean | null
@@ -138,7 +141,7 @@ export type GateBlock = {
     path: string
     hash: string
     state: 'missing-file' | 'missing-block' | 'stale' | 'current'
-    when: Record<string, string>
+    off: Record<string, string>
     tests: { budgetMs?: number; slow?: SlowSuite[]; serial?: { file: string; why: string }[] }
     declaredOutside: boolean
     dirty: boolean

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

@@ -38,7 +38,6 @@ a,a:visited{color:var(--accent)}
 .pjpanel,.appcol,.pside,.pmain{height:100%;min-width:0}
 .apptop,.pdock{height:100%;min-height:0}
 .pjpanel{display:flex}
-/* the box the machine toasts float in (home-strip.css .htoasts) */
 .appcol{position:relative;display:flex;flex-direction:column}
 /* one region per repo visited, the shown one alone displayed */
 .repo{flex:1;min-height:0;display:flex;flex-direction:column}
@@ -50,10 +49,9 @@ a,a:visited{color:var(--accent)}
 .pmain > main{flex:1}
 
 /* ── a repo's bar: on the home the strip (home-strip.css .hstrip), on a hub
-   of its own the header (.hdr). Its name, what runs now and the two runs,
-   then its processes, its trouble and its editor icons. One line at any
-   width: the container queries shrink the labels to their icons, then the
-   run state to its spinner ── */
+   of its own the header (.hdr). Its name, its check… button and a spinner
+   while a run goes, then its processes and its editor icons, on one line.
+   Its trouble floats under it (home-strip.css .htoasts) ── */
 /* the repo's processes (serve.processes): a dot, its id, a link once up */
 .hprocs{display:inline-flex;gap:var(--s1);align-items:center}
 .hproc{display:inline-flex;align-items:center;gap:var(--s0)}
@@ -64,7 +62,7 @@ a,a:visited{color:var(--accent)}
 .hdr{display:flex;gap:var(--s2);align-items:center;height:36px;flex:none;padding:0 var(--s3);border-bottom:1px solid var(--line);background:var(--bg-top)}
 .hdr .sp{flex:1}
 .hname{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-right:var(--s2);white-space:nowrap}
-.hdr,.hstrip{container-type:inline-size;white-space:nowrap}
+.hdr,.hstrip{white-space:nowrap}
 .hrun{display:inline-flex;align-items:center;gap:var(--s1);flex:none;margin-left:var(--s2)}
 .hbtn{display:inline-flex;align-items:center;gap:var(--s1);height:22px;padding:0 var(--s2);font-size:11.5px;white-space:nowrap;flex:none}
 .hbtn .hico{width:13px;height:13px}
@@ -72,40 +70,34 @@ a,a:visited{color:var(--accent)}
 .hicon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:22px;padding:0;border:0;background:none;color:var(--dim)}
 .hicon:hover{color:var(--accent)}
 .hicon .hico{width:15px;height:15px}
-/* the run state holds its width whatever it says, so a run never moves the buttons beside it */
-.hstatus{max-width:420px;flex:0 1 auto;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.hstatus.red{color:var(--red)}
-.hstatus.warn{color:var(--warn)}
-/* its words sit against the run buttons, cut with an ellipsis */
-.hstate{display:inline-flex;gap:var(--s1);align-items:center;width:200px;min-width:200px;flex:none;justify-content:flex-end;font-size:11.5px;color:var(--dim);overflow:hidden}
-.hstate.on{color:var(--ink)}
-.hstate .htext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.hstate .spin.idle{visibility:hidden;animation:none}
-/* after .hstate, so a narrow bar wins over its width */
-@container (max-width:600px){.hbtn .lbl{display:none}.hbtn{padding:0 var(--s1)}}
-@container (max-width:520px){.hstate{width:120px;min-width:120px}}
-@container (max-width:420px){.hstate .htext{display:none}.hstate{width:16px;min-width:16px}}
 
 /* a row of a (?) legend: one glyph or word, then its meaning */
 .lrow{display:flex;gap:var(--s2);align-items:center;height:29px;flex:none;padding:0 var(--s3)}
 
-/* ── the left pane: the sections, the filter, then the tree, the one part
-   that scrolls ── */
+/* ── the left pane: the filter, then the tree, the one part that
+   scrolls ── */
 aside{border-right:1px solid var(--line);background:var(--panel);min-height:0;display:flex;flex-direction:column;overflow:hidden}
 aside > *{flex:none}
-aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
-/* a repo's sections: the project list's lines (project-list.css .pjpl), a
-   little shorter, the current one lit and marked in the accent */
-.rsecs{display:flex;flex-direction:column;padding:var(--s1) 0;border-bottom:1px solid var(--line)}
-.rsec{display:flex;align-items:center;gap:var(--s2);width:100%;height:26px;padding:0 var(--s3);background:transparent;border:0;border-radius:0;text-align:left;color:var(--dim);font-size:13px;cursor:pointer}
-.rsec:hover{background:var(--panel2);color:var(--ink);border-color:transparent}
-.rsec.cur{background:var(--sel);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
-.rsec .hico{flex:none;width:16px;height:16px}
-.rsecl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.rsecn{flex:none;min-width:16px;height:16px;padding:0 var(--s1);border-radius:8px;font-size:10px;font-weight:700;line-height:16px;text-align:center;color:var(--bg)}
+/* the tree is long, so it keeps a scroll indicator, a thin one with no track:
+   WebKit (the macOS app) ignores scrollbar-width and draws a wide dark band */
+aside > .tscroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
+aside > .tscroll::-webkit-scrollbar{width:6px}
+aside > .tscroll::-webkit-scrollbar-track{background:transparent}
+aside > .tscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
+/* a section, the tree's top row: the project list's lines (project-list.css
+   .pjpl), a little shorter, the current one lit and marked in the accent.
+   The chevron column is the tree's own, so a section's rows line up under it */
+.tsec{display:grid;grid-template-columns:14px 16px minmax(0,1fr) auto auto;align-items:center;gap:var(--s2);height:26px;padding:0 var(--s1) 0 var(--s2);color:var(--dim);font-size:13px;cursor:pointer;white-space:nowrap}
+.tsec:hover{background:var(--panel2);color:var(--ink)}
+.tsec.on{box-shadow:inset 2px 0 0 var(--accent)}
+.tsec.cur{background:var(--sel);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
+.tsec .hico{width:16px;height:16px}
+.tsec:hover .tw{color:var(--ink)}
+.rsecl{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.rsecn{min-width:16px;height:16px;padding:0 var(--s1);border-radius:8px;font-size:10px;font-weight:700;line-height:16px;text-align:center;color:var(--bg)}
 .rsecn.nred{background:var(--red)}
 .rsecn.nwarn{background:var(--warn)}
-.rsec:hover .pjkey,.rsec.cur .pjkey{opacity:1}
+.tsec:hover .pjkey,.tsec.cur .pjkey{opacity:1}
 /* segmented severity filter — all · needs · red. A thin border and an
    underline on the live one: no fill, no pill */
 .seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;flex:none}
@@ -115,9 +107,8 @@ aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
 .seg button:hover{color:var(--ink)}
 .seg button.on{color:var(--accent);border-bottom-color:var(--accent)}
 .seg button .sk{margin-left:var(--s1);font-size:9px;opacity:.55}
-.swhen{padding:0 var(--s3) var(--s2);font-size:11px;color:var(--dim)}
 /* a narrow pane puts the severity filter under the input, never over it */
-.ssearch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3)}
+.ssearch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
 .sfield{position:relative;flex:1 1 96px;min-width:0;display:flex}
 .ssearch input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);
  padding:var(--s0) var(--s4) var(--s0) var(--s2);font-size:12px;outline:none}
@@ -133,8 +124,8 @@ aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
    no prose, no dash separators ── */
 .tree{padding:var(--s1) 0 var(--s4);outline:none}
 .tree:focus-visible{box-shadow:inset 2px 0 0 var(--accent)}
-.trow{display:grid;grid-template-columns:calc(var(--d,0)*12px + 18px) 14px minmax(0,1fr) 58px 46px 14px;
- align-items:center;gap:var(--s1);padding:0 var(--s2);height:20px;line-height:20px;cursor:pointer;white-space:nowrap}
+.trow{display:grid;grid-template-columns:calc(var(--d,0)*10px + 14px) 14px minmax(0,1fr) 12px auto 14px;
+ align-items:center;gap:var(--s1);padding:0 var(--s1) 0 var(--s2);height:20px;line-height:20px;cursor:pointer;white-space:nowrap}
 .trow:hover{background:var(--panel2)}
 .trow.on{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent)}
 /* the fold marker: an 11px chevron with the whole first column as its hit
@@ -168,21 +159,20 @@ aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
 .tg.ok{color:var(--ok)}
 .tg.adv{color:var(--warn);opacity:.75}
 .tg.run{color:var(--accent);animation:pulse 1.1s ease-in-out infinite}
-/* right aligned, tabular figures, ONE unit (ms) and one tone table, so a
-   column of durations compares by eye (hub-app/dur.ts owns both) */
-.tdur{font:10.5px ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;text-align:right;color:var(--dim);overflow:hidden}
+/* the duration: a clock tinted by the tone table (hub-app/dur.ts), the
+   figure in its tooltip, so the label keeps the width */
+.tdur{display:flex;align-items:center;justify-content:center;color:var(--dim)}
+.tdur .hico{width:11px;height:11px;color:inherit}
 .tdur.fast,.dnum.fast{color:var(--ok)}
 .tdur.plain,.dnum.plain{color:var(--ink)}
 .tdur.slow,.dnum.slow{color:var(--warn)}
 .tdur.bad,.dnum.bad{color:var(--red)}
 .tnote{font-size:10px;text-align:right;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
 .tnote b{font-weight:600;color:var(--red)}
-.stabs{display:flex;gap:var(--s2);align-items:center;padding:var(--s1) var(--s3);border-bottom:1px solid var(--line)}
-.stabs .sp{flex:1}
-.stabs .cnt{min-width:4ch;text-align:right;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
 .catgen{display:inline-flex;gap:var(--s1)}
 .catgen button{padding:var(--s0) var(--s2);font-size:11px;font-weight:700}
 .tempty{padding:var(--s2) var(--s3);font-size:12px;color:var(--dim);white-space:pre-wrap}
+.thidden{cursor:pointer}.thidden:hover{color:var(--ink)}
 .twait{display:flex;align-items:center;gap:var(--s2)}
 .warnline{color:var(--red)}
 .fold{cursor:pointer;color:var(--dim);font-size:15px;display:inline-block;width:22px;text-align:center;
@@ -369,7 +359,15 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .assetrem .rem{color:var(--ok);border-left:2px solid var(--ok);padding-left:var(--s2);font-size:12.5px;margin:0 0 var(--s2);white-space:pre-wrap}
 
 /* ── collection item card + status card ── */
-.colcard{max-width:760px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:var(--s4);text-align:left}
+/* a repo page sits on the page background, never in a box of its own: its
+   header and its sentence are unboxed, and each group it holds (the facts,
+   a titled section, the command, the admin rows, the runs list) is one
+   lighter box, so a box always means "these belong together" */
+.colcard{max-width:760px;width:100%;padding:var(--s2) 0;text-align:left}
+.colcard>.cfacts,.colcard>.csec,.colcard>.ccmd,.colcard>.md:not(.usays),.colcard>.adbox,.tlcard>.rlist{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:var(--s2) var(--s3)}
+.colcard>.cfacts,.colcard>.ccmd,.colcard>.md:not(.usays),.colcard>.adbox{margin-top:var(--s3)}
+.ccmd>.cf:first-child,.cfacts>.cf:nth-child(-n+2){border-top:0}
+@media (max-width:900px){.cfacts>.cf:nth-child(2){border-top:1px solid var(--line)}}
 .colcard h3{margin:0 0 var(--s2);font-size:15px;display:flex;gap:var(--s2);align-items:baseline}
 .colcard h3 .sp{flex:1}
 .colcard .truth{margin-left:auto;font:11px ui-monospace,Menlo,monospace;color:var(--dim)}
@@ -560,6 +558,15 @@ a.tok{color:var(--accent)}
 .checkcard .dim{color:var(--dim)}
 /* what is not a fact: the output and the slow suites, titled, unboxed */
 .csec{margin-top:var(--s4)}
+/* where it runs: one line per context, the value then its meaning. A context
+   that never runs the check stays dim, so the lit lines read down the list */
+.cruns{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:var(--s3);row-gap:var(--s0);align-items:baseline}
+.crun{display:contents;color:var(--dim)}
+.crv{font:11px ui-monospace,Menlo,monospace;white-space:nowrap}
+.crun.on .crv{color:var(--ok)}
+.crun.cache .crv{color:var(--ink)}
+.crm{font-size:11.5px;color:var(--dim);opacity:.8}
+.crun:not(.on) .crm{opacity:.5}
 .cstitle{display:flex;gap:var(--s1);align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dim);margin-bottom:var(--s2)}
 .wline{margin-bottom:var(--s1);word-break:break-word}
@@ -628,6 +635,7 @@ a.tok{color:var(--accent)}
 .colgrid{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s4)}
 .cghead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  display:flex;gap:var(--s2);align-items:baseline;margin:0 0 var(--s3)}
+.ctlead{font-size:11px;color:var(--dim);margin:calc(-1 * var(--s1)) 0 var(--s2)}
 .cghead .cnt{font-size:11px;color:var(--dim);letter-spacing:0;text-transform:none}
 /* the checks and asks pages: one dense table each (col-tables-view.tsx), on
    the activity table (.actable), a group header per state that folds */
@@ -745,9 +753,23 @@ pre{background:var(--panel);border:1px solid var(--line);border-radius:3px;paddi
 
 /* ── the admin page: one row per control, its sentence under its name ── */
 .adrow{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--line)}
+.adrow:first-child{border-top:0}
 .adtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s0);font-size:13px}
 .adtext .dim{font-size:12px}
 .adctl{flex:none;display:flex;align-items:center}
 .adflag{display:inline-flex;align-items:center;gap:var(--s1);font-size:12px;color:var(--dim)}
 .adflag input{width:auto;margin:0}
 .adconfirm{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px}
+/* a repo's plan page: one line per planned check */
+.plntable{width:100%;border-collapse:collapse;font-size:12.5px}
+.plntable td{padding:var(--s1) var(--s2);border-top:1px solid var(--line);vertical-align:baseline}
+.plntable tr:first-child td{border-top:0}
+.plnwhen{white-space:nowrap;font-variant-numeric:tabular-nums}
+.plnrun{text-align:right;white-space:nowrap}
+/* a repo's git page */
+.gitfiles,.gitcommits{width:100%;border-collapse:collapse;font-size:12.5px}
+.gitfiles td,.gitcommits td{padding:2px var(--s2);vertical-align:baseline}
+.gitkind{width:1%;white-space:nowrap;color:var(--dim)}
+.gitkind.staged{color:var(--ok)}
+.gitkind.untracked{color:var(--warn)}
+.gitpath{font:12px ui-monospace,Menlo,monospace;overflow-wrap:anywhere}

package/src/serve/hub-app/icons.tsx

@@ -5,6 +5,11 @@
 export const ICON = {
     shipkit: 'M3 7.5 10 4l7 3.5v5L10 16l-7-3.5zM3 7.5 10 11l7-3.5M10 11v5',
     process: 'M2 10h3.5l2-5 5 10 2-5H18',
+    processes: 'M2 10h3.5l2-5 5 10 2-5H18',
+    when: 'M10 3a7 7 0 1 0 .01 0M10 6v4l2.5 2',
+    plan: 'M5.5 3h9M5.5 17h9M6.5 3c0 4 7 4 7 7s-7 3-7 7M13.5 3c0 4-7 4-7 7s7 3 7 7',
+    git: 'M6 5v10M6 3a2 2 0 1 0 0 .01M6 17a2 2 0 1 0 0 .01M14 5a2 2 0 1 0 0 .01M14 7c0 4.5-8 3.5-8 7',
+    reflections: 'M4 3.5h12v9H9l-4 3.5v-3.5H4zM7.5 7h5M7.5 9.5h3',
     monitor: 'M3 4h14v9H3zM7 16.5h6M10 13v3.5',
     archived: 'M2.5 4h15v3.5h-15zM4 7.5V16h12V7.5M8 10.5h4',
     home: 'M3 9.5 10 3.5l7 6M5 8v8.5h10V8M8.5 16.5v-4.5h3v4.5',
@@ -15,7 +20,11 @@ export const ICON = {
     fork: 'M6 5v10M6 3a2 2 0 1 0 0 .01M6 17a2 2 0 1 0 0 .01M14 5a2 2 0 1 0 0 .01M14 7c0 4.5-8 3.5-8 7',
     search: 'M8.5 3a5.5 5.5 0 1 0 0 11a5.5 5.5 0 1 0 0-11M12.5 12.5 17 17',
     // a repo page's sections, then its two runs and its editor
+    readme: 'M5 2.5h7l3 3v12H5zM12 2.5v3h3M7.5 9h5M7.5 12h5M7.5 15h3',
     checks: 'M4 10.5 7.5 14 16 5.5',
+    contracts: 'M5 2.5h10v15H5zM7.5 6h5M7.5 9h5M7.5 12h2.5',
+    repo: 'M2.5 5h5l1.5 1.5h8.5v9.5h-15z',
+    secrets: 'M7 7a3 3 0 1 0 0 6a3 3 0 1 0 0-6M10 10h7.5M15 10v2.5M17.5 10v2',
     runs: 'M3 5h8M3 10h12M3 15h6',
     asks: 'M3 4h14v9H8l-4 3.5V13H3z',
     tests: 'M8 3h4M8.5 3v5L4 16.5h12L11.5 8V3M6.2 12.5h7.6',
@@ -30,6 +39,8 @@ export const ICON = {
     // a process's own switches on the overview
     play: 'M6.5 4.5v11l9-5.5z',
     stop: 'M5.5 5.5h9v9h-9z',
+    link: 'M8.5 11.5a3.5 3.5 0 0 0 5 0l2.5-2.5a3.5 3.5 0 0 0-5-5l-1 1M11.5 8.5a3.5 3.5 0 0 0-5 0L4 11a3.5 3.5 0 0 0 5 5l1-1',
+    clock: 'M10 2.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 1 0 0-15M10 6v4l2.5 2',
     restart: 'M15.5 10a5.5 5.5 0 1 1-1.6-3.9M14.2 3v3.3h-3.3',
 } as const
 

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

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="./prose-hits.css" />
   <link rel="stylesheet" href="./home-strip.css" />
   <link rel="stylesheet" href="./planned.css" />
+  <link rel="stylesheet" href="./when.css" />
   <link rel="stylesheet" href="./activity.css" />
   <link rel="stylesheet" href="./readme.css" />
   <link rel="stylesheet" href="./dock.css" />

package/src/serve/hub-app/keys.ts

@@ -46,8 +46,11 @@ export function isSearchKey(e: Pick<KeyLike, 'key' | 'metaKey' | 'ctrlKey' | 'al
  *  plus a letter only types a character inside a text field, where the page
  *  leaves the key alone. Read from the physical key (`code`): on a Mac ⌥C
  *  types ç, and AZERTY moves the letters */
-export type SectionId = 'checks' | 'runs' | 'asks' | 'tests' | 'media' | 'wikis' | 'admin'
-export const SECTION_LETTER: Record<SectionId, string> = { checks: 'C', runs: 'R', asks: 'A', tests: 'T', media: 'M', wikis: 'W', admin: 'D' }
+export type SectionId = 'readme' | 'contracts' | 'shipkit' | 'repo' | 'secrets' | 'when' | 'runs' | 'plan' | 'processes' | 'git' | 'asks' | 'reflections' | 'tests' | 'media' | 'wikis' | 'admin'
+export const SECTION_LETTER: Record<SectionId, string> = { readme: 'E', contracts: 'K', shipkit: 'S', repo: 'C', secrets: 'X', when: 'O', runs: 'R', plan: 'N', processes: 'P', git: 'G', asks: 'A', reflections: 'F', tests: 'T', media: 'M', wikis: 'W', admin: 'D' }
+/** a section's words on its row, where the id alone would not say it */
+export const SECTION_LABEL: Partial<Record<SectionId, string>> = { shipkit: 'shipkit checks', repo: 'repo checks' }
+export const sectionLabel = (id: SectionId): string => SECTION_LABEL[id] ?? id
 /** the badge at the end of a section's line */
 export const sectionKeyLabel = (id: SectionId): string => `⌥${SECTION_LETTER[id]}`
 

package/src/serve/hub-app/live-svc.ts

@@ -11,6 +11,7 @@ import type { TimelineInvocation } from '../../ledger/run-timeline.ts'
 import { ChartView, type ChartSource } from './chart-view.ts'
 import type { RepoSt } from './repo-st.ts'
 import { chartHeight } from './timeline-geometry.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 /** how often the page asks. A strip a second behind the runner is still live */
 export const LIVE_POLL_MS = 1_000
@@ -107,7 +108,7 @@ export class LiveSvc {
         if (this.inFlight) return
         this.inFlight = true
         try {
-            const r = await fetch(this.st.url('/api/live.json'))
+            const r = await reach(this.st.url('/api/live.json'))
             if (!r.ok) throw new Error(await r.text())
             const v = (await r.json()) as LiveView
             const ended = this.running && v.runs.length === 0
@@ -125,7 +126,7 @@ export class LiveSvc {
                 if (this.st.timeline.data != null) void this.st.timeline.load(true)
             }
         } catch (e) {
-            runInAction(() => { this.error = `the live runs could not be read: ${(e as Error).message}` })
+            runInAction(() => { this.error = ownTrouble(e, this.st.home.machine, (m) => `the live runs could not be read: ${m}`) })
         } finally {
             this.inFlight = false
         }