rvlib-shipkit 1.3.0 → 1.5.0

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

@@ -1,32 +1,35 @@
 // 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
+// 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 MachineBar, a reserved line the strip brings with it,
-// drawn last in the page column (its flex order).
+// 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'
-import type { MachineSt, OpenHow } from './machine-st.ts'
+import type { MachineSt } 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'
+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(' · ')
@@ -64,81 +67,81 @@ export const ResourceChip = observer(({ m, r }: { m: MachineSt; r: ResourceView
 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>
-))
+/** 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 (
+        <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), 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 }) => {
+ *  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 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 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="gphost">
-                    {r.url == null ? null : r.core ? <span>{r.host}</span> : (
-                        <a href={r.url} title={`open ${r.url} ${via}`} onClick={(e) => {
+        <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)
+                            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>
-                <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>}
-        </>
+                    </>
+                )}
+            </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>
     )
 })
 
-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) => {
@@ -154,35 +157,33 @@ const ProcessRepo = observer(({ app, name, icon }: { app: HomeSt; name: string;
 /** 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 */
+ *  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) }
-    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" />
+                    <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}
-                    <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>
+                    <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 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>
+                    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} span={5 + btns} />)}
+                            {g.rows.map((r, i) => <ProcessLine key={r.id} m={m} r={r} repoIcon={icon} head={i === 0 ? head : null} cols={cols} />)}
                         </tbody>
                     )
                 })}
@@ -191,7 +192,10 @@ const ProcessTable = observer(({ app, m }: { app: HomeSt; m: MachineSt }) => {
     )
 })
 
-/** 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
@@ -205,14 +209,18 @@ const Monitor = observer(({ m }: { m: MachineSt }) => {
                             <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.error != null ? <p className="hnote">{x.error}</p> : null}
-                            {x.html == null ? <p className="twait"><span className="spin" /></p> : <div dangerouslySetInnerHTML={{ __html: body }} />}
+                            {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>
     )
 })
@@ -244,17 +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 }) => (
-    <>
-        {(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}
-    </>
-))
+/** 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
@@ -267,32 +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>
-            <MachineBar app={app} />
+            <FloatCards cards={[...(live == null ? [] : hubCards(live)), ...machineCards(m)]} />
         </>
     )
 })
 
-/** 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 }) => {
@@ -319,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>}
@@ -358,7 +426,13 @@ export const ArchivedView = observer(({ app }: { app: HomeSt }) => {
 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>
+    // the table waits for pm's first word and for the list's order, so its
+    // 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
+    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,15 +2,17 @@
 // 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'
 import { StrictMode, useEffect, useLayoutEffect, useRef } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ColCard, ColGrid, StatusCard } from './col-card.tsx'
+import { AskTable, CheckTable } from './col-tables-view.tsx'
 import { WIKIS, WikisView } from './wikis-view.tsx'
 import { ComfyOverlay, ComfyView } from './comfy-view.tsx'
 import type { Filter, RepoSt } from './repo-st.ts'
@@ -23,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'
@@ -34,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'
@@ -84,9 +90,19 @@ const Main = observer(({ app }: { app: RepoSt }) => {
                                 : <div className="stagewrap"><ColCard app={app} col={app.sel.col} id={app.sel.id} /></div>}
         </main>
     )
-    if (app.sel?.t === 'col') return <main>{errs}<ColGrid app={app} id={app.sel.id} /></main>
+    if (app.sel?.t === 'col') return (
+        <main>
+            {errs}
+            {app.sel.id === 'checks' ? <CheckTable app={app} id={app.sel.id} /> : app.sel.id === 'asks' ? <AskTable app={app} id={app.sel.id} /> : <ColGrid app={app} id={app.sel.id} />}
+        </main>
+    )
     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

@@ -1,7 +1,7 @@
 // Wire types the hub app reads — mirrors of the server shapes
 // (studio-server.ts, collection-types.ts). Kept structural on purpose: the
 // page renders what the API sends, the file is the truth.
-import type { ResourceType, SuiteFacts, TestFacts, TestRun } from '../../collections/collection-types.ts'
+import type { AskFacts, ResourceType, SuiteFacts, TestFacts, TestRun } from '../../collections/collection-types.ts'
 
 export type SideAsset = {
     id: string
@@ -62,7 +62,7 @@ export type Artifact = { copy?: string; url?: string; steps?: string[] }
  *  The list lives where the providers that emit it live, so a kind can never
  *  be known on one side of the wire only. Type only, so nothing server side
  *  reaches the bundle */
-export type { ResourceType, SuiteFacts, TestFacts, TestRun }
+export type { AskFacts, ResourceType, SuiteFacts, TestFacts, TestRun }
 
 export type CheckStatus = 'pass' | 'warn' | 'fail' | 'skip'
 
@@ -73,8 +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) */
@@ -86,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
@@ -137,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
@@ -154,7 +158,7 @@ export type CheckEvent = {
     replayed: boolean
     blocking: boolean | null
     advisory: boolean
-    lines: { kind: string; text: string }[]
+    lines: Line[]
 }
 /** the colour of the tree label: red broken · warn taste pending · ok
  *  passing on a check that ran · idle the neutral default · quiet archived or out of play */
@@ -186,6 +190,8 @@ export type Resource = {
     check?: CheckFacts
     /** test files only: where it runs and what it last cost */
     test?: TestFacts
+    /** asks only: kind, dates, what it blocks, its probe */
+    ask?: AskFacts
 }
 export type ColMeta = { id: string; title: string; media: string }
 export type Col = ColMeta & { instances: Resource[] }