rvlib-shipkit 1.3.0 → 1.4.0

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

@@ -5,21 +5,21 @@
 // (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
+// 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).
+// down is said in MachineToasts, floating over the page column's bottom
+// right corner, taking no room.
 import { observer } from 'mobx-react-lite'
 import type { ReactNode } from 'react'
 import type { 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'
@@ -64,81 +64,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 +154,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 +189,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 +206,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>
     )
 })
@@ -248,10 +253,11 @@ const ShownRepo = observer(({ app, name }: { app: HomeSt; name: string }) => {
  *  well: the strip states trouble, never health */
 const MachineAlerts = observer(({ m }: { m: MachineSt }) => (
     <>
-        {(m.pm?.children ?? []).filter((c) => c.status === 'crashed' || c.status === 'down').map((c) => (
+        {/* pm silent, its last answer is kept for the table and says nothing here */}
+        {(m.pmDown !== '' ? [] : m.pm?.children ?? []).filter((c) => c.status === 'crashed' || c.status === 'down').map((c) => (
             <span key={c.id} className="halert" title={c.note ?? c.tail.at(-1) ?? ''}><Dot s={c.status} />{c.id} {STATUS_WORD[c.status]}</span>
         ))}
-        {(m.pm?.resources ?? []).filter((r) => r.status === 'crashed').map((r) => <ResourceChip key={r.id} m={m} r={r} />)}
+        {(m.pmDown !== '' ? [] : m.pm?.resources ?? []).filter((r) => r.status === 'crashed').map((r) => <ResourceChip key={r.id} m={m} r={r} />)}
         {m.error !== '' ? <span className="herr" title={m.error}>{m.error}</span> : null}
     </>
 ))
@@ -273,22 +279,23 @@ export const HomeStrip = observer(({ app }: { app: HomeSt }) => {
                 <MachineAlerts m={m} />
                 {live == null ? null : <RepoOpeners app={live} />}
             </div>
-            <MachineBar app={app} />
+            <MachineToasts 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 }) => {
+/** the daemon or pm not answering, as toasts floating over the bottom right
+ *  corner of the page column, just above the dock. They take no room, so
+ *  one coming or going moves nothing, and nothing is drawn while all is
+ *  well. Only a failed probe sets down or pmDown: before the first answer
+ *  there is none */
+export const MachineToasts = observer(({ app }: { app: HomeSt }) => {
     const m = app.machine
-    if (m == null) return null
+    if (m == null || (m.down === '' && m.pmDown === '')) 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 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>
     )
 })
@@ -358,7 +365,10 @@ 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
+    const p = app.projects
+    if (m.data == null || (m.pm == null && m.pmDown === '') || (p.list.length === 0 && !p.fresh && p.error === '')) return <div className="hwait"><p className="twait"><span className="spin" />{m.down !== '' ? 'the daemon does not answer yet' : 'loading…'}</p></div>
     return (
         <div className="hall">
             <div className="hstack">

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

@@ -11,6 +11,7 @@ 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'
@@ -84,7 +85,12 @@ 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 === 'status') return <main>{errs}<div className="stagewrap"><StatusCard app={app} /></div></main>

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,6 +73,7 @@ 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 { Line } from '../../core/wire.ts'
 import type { CheckFrom } from '../../check.ts'
 export type { CheckFrom, WhenAt, WhenSource }
 
@@ -154,7 +155,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 +187,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[] }

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

@@ -38,7 +38,8 @@ 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}
-.appcol{display:flex;flex-direction:column}
+/* 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}
 .repo[hidden]{display:none}
@@ -628,6 +629,27 @@ a.tok{color:var(--accent)}
 .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)}
 .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 */
+.ctpage{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s4);font-size:12.5px;container-type:inline-size}
+.cttable{font-variant-numeric:tabular-nums}
+.cttable td{padding:var(--s0) var(--s2);vertical-align:baseline}
+.ctgrp td{padding:var(--s2) var(--s2) var(--s1);color:var(--dim);font-size:11.5px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
+.ctgrp:hover td{color:var(--ink)}
+.ctgrp.g-fail td{color:var(--red)}
+.ctgrp.g-warn td{color:var(--warn)}
+.ctcaret{display:inline-block;width:14px}
+.ctrow{cursor:pointer}
+.ctrow:hover{background:var(--panel2)}
+.ctdot{font-size:10px}
+.ctid,.ctkind{font:11.5px ui-monospace,Menlo,monospace}
+.ctfind{font:11.5px ui-monospace,Menlo,monospace;color:var(--dim)}
+.ctdur{text-align:right;font:11.5px ui-monospace,Menlo,monospace}
+.ctbudget,.ctplan,.ctblocks{color:var(--dim)}
+.ctprobe{font-size:11.5px}
+.cttable .c-dot{width:22px}.cttable .c-id{width:140px}.cttable .c-title{width:16%}.cttable .c-age{width:72px}.cttable .c-dur{width:152px}.cttable .c-plan{width:88px}
+.cttable .c-kind{width:92px}.cttable .c-blocks{width:32%}.cttable .c-probe{width:84px}
+@container (max-width:760px){.cttable .c-title{width:0}.cttable .cttitle{display:none}.cttable .c-plan{width:0}.cttable .ctplan{display:none}}
 .cgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}
 .cgcard{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:var(--s2) var(--s3);cursor:pointer;min-width:0}
 .cgcard:hover{border-color:var(--accent)}
@@ -694,7 +716,7 @@ a.mint{color:var(--accent);font-size:12px;text-decoration:none}
 a.mint:hover{text-decoration:underline}
 .colcard h3 .stchip,.colcard h3 a.mint{margin-left:var(--s2)}
 
-/* ── the cmd+k picker ── */
+/* ── the cmd+j picker ── */
 .palov{position:fixed;inset:0;background:var(--scrim);z-index:100;display:flex;justify-content:center;align-items:flex-start;
  padding-top:14vh}
 .pal{width:min(560px,90vw);background:var(--panel);border:1px solid var(--line);border-radius:3px;

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

@@ -27,6 +27,10 @@ export const ICON = {
     // the VS Code mark, its ribbon drawn as one outline
     vscode: 'M14 2.5l3.5 1.7v11.6L14 17.5zM14 2.5 4.5 12.3 2.5 11V9l2-1.3L14 17.5M14 6.8 10.2 10l3.8 3.2',
     sort: 'M6 3.5v13M3 13.5l3 3 3-3M14 16.5v-13M11 6.5l3-3 3 3',
+    // a process's own switches on the overview
+    play: 'M6.5 4.5v11l9-5.5z',
+    stop: 'M5.5 5.5h9v9h-9z',
+    restart: 'M15.5 10a5.5 5.5 0 1 1-1.6-3.9M14.2 3v3.3h-3.3',
 } as const
 
 export const Icon = ({ d }: { d: string }) => (

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

@@ -1,6 +1,6 @@
 // the page's command keys, read the same on every layout: ⌘1 to ⌘9 select the
 // nth repo of the project list, then the home row under the right hand: ⌘J
-// the overview, ⌘K the picker, ⌘L the activity, ⌘' the plan. ⌘B cycles the
+// the picker, ⌘K the overview, ⌘L the activity, ⌘' the plan. ⌘B cycles the
 // dock at the bottom of the page (dock-st.ts): the line, slim, open.
 // A digit and the quote are read from the physical key (`code`), so an
 // AZERTY keyboard, where the key under 1 types `&`, selects the same repo. Ctrl stands in for
@@ -17,17 +17,17 @@ export function pageKey(e: KeyLike): PageKey | null {
     if (e.shiftKey) return null
     if (e.code === 'Quote' || e.key === "'") return { t: 'planned' }
     const k = e.key.toLowerCase()
-    if (k === 'j') return { t: 'home' }
-    if (k === 'k') return { t: 'picker' }
+    if (k === 'j') return { t: 'picker' }
+    if (k === 'k') return { t: 'home' }
     if (k === 'l') return { t: 'activity' }
     if (k === 'b') return { t: 'dock' }
     return null
 }
 
 /** the shortcut each place of the home carries on its button */
-export const PLACE_KEY = { overview: '⌘J', planned: "⌘'", activity: '⌘L' } as const
-/** the picker's shortcut, on the second button, after home */
-export const PICKER_KEY = '⌘K'
+export const PLACE_KEY = { overview: '⌘K', planned: "⌘'", activity: '⌘L' } as const
+/** the picker's shortcut, on the first button, before home */
+export const PICKER_KEY = '⌘J'
 /** the dock's shortcut, on the dock's own header */
 export const DOCK_KEY = '⌘B'
 

package/src/serve/hub-app/machine-st.ts

@@ -8,7 +8,7 @@
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { HomeAnswer, WidgetsAnswer } from '../../home/home-routes.ts'
 import type { WorkerView } from '../../home/hubs.ts'
-import type { ResourceView } from '../../home/resources.ts'
+import type { OpenHow, ResourceView } from '../../home/resources.ts'
 import type { PmAnswer, Role } from '../../home/pm.ts'
 import { processGroups, type ProcessGroup } from '../../home/process-rows.ts'
 import { ClockSvc } from './clock-svc.ts'
@@ -27,18 +27,6 @@ export const MACHINE_KEY = 'hub:machine'
 /** how long a copied pid says so */
 export const COPIED_MS = 1_200
 
-/** how open opens a global process's url, kept per browser */
-export const OPEN_HOW_KEY = 'hub:open-how'
-export type OpenHow = 'browser' | 'app'
-
-function loadOpenHow(): OpenHow {
-    try {
-        return globalThis.localStorage?.getItem(OPEN_HOW_KEY) === 'app' ? 'app' : 'browser'
-    } catch {
-        return 'browser'
-    }
-}
-
 type Kept = { data: HomeAnswer | null; pm: PmAnswer | null; widgets: WidgetsAnswer | null }
 
 function loadKept(): Kept | null {
@@ -51,7 +39,12 @@ function loadKept(): Kept | null {
 }
 
 /** the poll failed because nothing behind the page answers, not on an error of an answer */
-class DownError extends Error {}
+/** the web (no answer at all) or the daemon behind it (the web says so) */
+class DownError extends Error {
+    constructor(msg: string, readonly who: 'web' | 'daemon') {
+        super(msg)
+    }
+}
 
 export type MachineOpts = { reload?: () => void; timeoutMs?: number }
 
@@ -67,9 +60,10 @@ export class MachineSt {
     error = ''
     /** where open sends a global process's url: the default browser, or a
      *  shipkit app window */
-    openHow: OpenHow = loadOpenHow()
     /** why the daemon did not answer the last poll, or '' while it does */
     down = ''
+    /** which one did not answer: the web itself, or the daemon behind it */
+    downWho: 'web' | 'daemon' = 'daemon'
     /** the daemon answered once since the load: until then data, pm and
      *  widgets are what this browser kept, shown but never acted on */
     fresh = false
@@ -115,7 +109,8 @@ export class MachineSt {
      *  the project list's order, one row per process (process-rows.ts, what
      *  `shipkit global-processes` prints) */
     get processGroups(): ProcessGroup[] {
-        return processGroups(this.pm, this.st.projects.list.map((p) => p.name), { daemonVersion: this.data?.version ?? null })
+        const silent = { ...(this.down === '' ? {} : { [this.downWho]: this.down }), ...(this.pmDown === '' ? {} : { pm: this.pmDown }) }
+        return processGroups(this.pm, this.st.projects.list.map((p) => p.name), { daemonVersion: this.data?.version ?? null, silent })
     }
 
     resource(id: string): ResourceView | null {
@@ -162,10 +157,8 @@ export class MachineSt {
                 this.pmDown = ''
             })
         } catch (e) {
-            runInAction(() => {
-                this.pm = null
-                this.pmDown = (e as Error).message
-            })
+            // the last answer stays, its rows unknown (processGroups): the table keeps its lines
+            runInAction(() => { this.pmDown = (e as Error).message })
         }
     }
 
@@ -197,9 +190,9 @@ export class MachineSt {
             try {
                 r = await fetch('/api/home.json', { signal: AbortSignal.timeout(this.o.timeoutMs ?? MACHINE_TIMEOUT_MS) })
             } catch (e) {
-                throw new DownError(`the home does not answer: ${(e as Error).message}`)
+                throw new DownError(`the home does not answer: ${(e as Error).message}`, 'web')
             }
-            if (r.headers.get('x-shipkit-daemon') === 'down') throw new DownError(await r.text())
+            if (r.headers.get('x-shipkit-daemon') === 'down') throw new DownError(await r.text(), 'daemon')
             if (!r.ok) throw new Error(`/api/home.json answered ${r.status}: ${await r.text()}`)
             const j = (await r.json()) as HomeAnswer
             const back = this.wasDown
@@ -222,7 +215,10 @@ export class MachineSt {
             const msg = (e as Error).message
             if (e instanceof DownError) {
                 this.wasDown = true
-                runInAction(() => { this.down = msg })
+                runInAction(() => {
+                    this.down = msg
+                    this.downWho = e.who
+                })
             } else {
                 this.pollError = true
                 runInAction(() => {
@@ -278,16 +274,16 @@ export class MachineSt {
     }
 
     /** a global process: start, stop, restart, take over the copy started
-     *  elsewhere, open its url in the default browser or as an app window
-     *  (started first when it is down), or run one of its actions */
-    processAct(id: string, act: 'start' | 'stop' | 'restart' | 'takeover' | 'open' | 'app' | 'action', action?: string): Promise<boolean> {
+     *  elsewhere, open its url (started first when it is down), or run one
+     *  of its actions */
+    processAct(id: string, act: 'start' | 'stop' | 'restart' | 'takeover' | 'open' | 'chrome' | 'app' | 'action', action?: string): Promise<boolean> {
         return this.post('/api/pm/resource', { id, act, action })
     }
 
-    /** the url of a global process, the way this browser picked (started
-     *  first when it is down) */
-    openProcess(id: string): Promise<boolean> {
-        return this.processAct(id, this.openHow === 'app' ? 'app' : 'open')
+    /** the url of a global process in the default browser, in Chrome, or as
+     *  its own app (started first when it is down) */
+    openProcess(id: string, how: OpenHow): Promise<boolean> {
+        return this.processAct(id, how === 'browser' ? 'open' : how)
     }
 
     /** a process's pid to the clipboard, and the "copied" flash on it; a
@@ -305,13 +301,6 @@ export class MachineSt {
         this.copiedTimer = setTimeout(() => runInAction(() => { this.copiedPid = null }), COPIED_MS)
     }
 
-    setOpenHow(how: OpenHow): void {
-        this.openHow = how
-        try {
-            globalThis.localStorage?.setItem(OPEN_HOW_KEY, how)
-        } catch { /* private window or blocked site data: the pick lasts the tab */ }
-    }
-
     /** restart the daemon or the web through pm */
     restartChild(id: Role): Promise<boolean> {
         return this.post('/api/pm/child', { id, act: 'restart' })