rvlib-shipkit 1.4.0 → 1.6.0

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

@@ -10,9 +10,9 @@
 import { makeAutoObservable, runInAction } from 'mobx'
 import type { RepoSt } from './repo-st.ts'
 import { applyRunEvent, idleRun, startRun, stripText, type RunProgress } from './run-strip.ts'
-import type { GateBlock, Resource, ResourceState, SlowSuite, CheckEvent, WhenAt } from './hub-types.ts'
-import { WHEN_OPTION } from './check-words.ts'
+import type { GateBlock, Resource, ResourceState, SlowSuite, CheckEvent } from './hub-types.ts'
 import { lineText } from '../../core/wire.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 /** the colour rule, the SAME one the server applies, because a row must not
  *  change meaning between a live result and the poll that confirms it */
@@ -55,9 +55,6 @@ export class ChecksSvc {
     gateBusy = false
     /** the reason box, per check id: a check is only turned off WITH a reason */
     reasons = new Map<string, string>()
-    /** checks whose select says never while the reason is still being typed:
-     *  off is written only once it has one */
-    pendingOff = new Set<string>()
     /** the slow suite form under the test check */
     suite: SlowSuite = { file: '', catches: '', whyNotFast: '' }
 
@@ -94,12 +91,12 @@ export class ChecksSvc {
      *  silent overwrite */
     async loadGate(): Promise<void> {
         try {
-            const r = await fetch(this.st.url('/api/checks/when'))
+            const r = await reach(this.st.url('/api/checks/when'))
             if (!r.ok) throw new Error(await r.text())
             const b = (await r.json()) as GateBlock
             runInAction(() => { this.gate = b })
         } catch (e) {
-            runInAction(() => { this.gateNote = `the repo config could not be read: ${(e as Error).message}` })
+            runInAction(() => { this.gateNote = ownTrouble(e, this.st.home.machine, (m) => `the repo config could not be read: ${m}`) })
         }
     }
 
@@ -114,7 +111,7 @@ export class ChecksSvc {
             // the hash of the file the page last read: without it a write
             // could land on top of an edit this page never saw
             if (this.gate == null) await this.loadGate()
-            const r = await fetch(this.st.url('/api/checks/when'), { method: 'POST', body: JSON.stringify({ ...edit, expect: this.gate?.hash }) })
+            const r = await reach(this.st.url('/api/checks/when'), { method: 'POST', body: JSON.stringify({ ...edit, expect: this.gate?.hash }) })
             if (!r.ok) throw new Error(await r.text())
             const b = (await r.json()) as GateBlock
             runInAction(() => { this.gate = b; this.gateNote = said })
@@ -123,7 +120,7 @@ export class ChecksSvc {
             // has read the config it just wrote
             await this.st.cols.poll(true)
         } catch (e) {
-            runInAction(() => { this.gateNote = `refused: ${(e as Error).message}` })
+            runInAction(() => { this.gateNote = ownTrouble(e, this.st.home.machine, (m) => `refused: ${m}`) })
             // whatever the file really says now, so the next try is not
             // refused for a hash the page has already outgrown
             await this.loadGate()
@@ -132,37 +129,19 @@ export class ChecksSvc {
         return took
     }
 
-    /** what the select shows: never while a reason is being typed, else
-     *  where the check runs today */
-    whenShown(u: { checkId: string; when: WhenAt }): WhenAt {
-        return this.pendingOff.has(u.checkId) ? 'off' : u.when
-    }
-
-    /** the select moved. Every place but never writes at once, and never
-     *  waits for its reason */
-    chooseWhen(checkId: string, at: WhenAt): void {
-        if (at === 'off') {
-            this.pendingOff.add(checkId)
-            this.gateNote = 'never needs a reason: type it, then turn it off'
-            return
-        }
-        this.pendingOff.delete(checkId)
-        void this.setWhen(checkId, at)
-    }
-
-    async setWhen(checkId: string, at: WhenAt): Promise<void> {
+    /** turn a check off in this repo, with the reason typed in its box */
+    async setOff(checkId: string): Promise<void> {
         const reason = this.reasonFor(checkId).trim()
-        if (at === 'off' && reason === '') {
-            runInAction(() => { this.gateNote = 'never needs a reason: a check nobody can explain is a silenced gate' })
+        if (reason === '') {
+            runInAction(() => { this.gateNote = 'off needs a reason: a check nobody can explain is a silenced gate' })
             return
         }
-        await this.writeGate({ when: { [checkId]: at === 'off' ? `off:${reason}` : at } }, `${checkId} is set to ${WHEN_OPTION[at]} — repo.config.ts is edited and waiting for your commit`)
-        runInAction(() => { this.pendingOff.delete(checkId) })
+        await this.writeGate({ off: { [checkId]: reason } }, `${checkId} is off in this repo — repo.config.ts is edited and waiting for your commit`)
     }
 
-    /** back to whatever the check itself declares, by dropping the entry */
-    async clearWhen(checkId: string): Promise<void> {
-        await this.writeGate({ when: { [checkId]: null } }, `${checkId} is back to what it declares itself — repo.config.ts is edited and waiting for your commit`)
+    /** turn it back on: it runs where it declares again */
+    async turnOn(checkId: string): Promise<void> {
+        await this.writeGate({ off: { [checkId]: null } }, `${checkId} runs where it declares again — repo.config.ts is edited and waiting for your commit`)
     }
 
     async addSlow(): Promise<void> {

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

@@ -1,5 +1,4 @@
-// Collection views: the per-collection card grid (ColGrid), the item card
-// (asks · creds · posts), and the health/status card with the streaming
+// Collection views: the item card (asks · creds · posts), and the health/status card with the streaming
 // check runner. Every verb posts to /api/act/* and lands in a git-tracked
 // truth file; the truth chip names the file the item IS (on disagreement
 // the file wins).
@@ -101,48 +100,6 @@ export const ColCard = observer(({ app, col, id }: { app: RepoSt; col: string; i
     )
 })
 
-// collection view — one card per visible instance, the stage-side twin of a
-// sidebar section (every section gets both views)
-export const ColGrid = observer(({ app, id }: { app: RepoSt; id: string }) => {
-    const c = app.cols
-    const col = c.sidebarCols.find((x) => x.id === id)
-    if (col == null) return <div className="stagewrap"><div className="ph">collection vanished — the truth moved on</div></div>
-    const items = c.visibleInstances(col)
-    return (
-        <div className="colgrid">
-            <div className="cghead">{col.title}<span className="cnt">{items.length}</span></div>
-            {items.length === 0 ? <div className="ph">{app.filter === 'red' ? 'no reds here' : app.filter === 'needs' ? 'nothing here needs you' : 'nothing here yet'}</div> : (
-                <div className="cgcards">
-                    {items.map((i) => {
-                        if (id === 'creds') {
-                            const cred = credOf(i)
-                            return (
-                                <div key={i.id} className="cgcard" onClick={() => c.select(col.id, i.id)}>
-                                    <div className="cgtop"><CredHead cred={cred} /></div>
-                                    {cred.service != null ? <div className="creddesc">{cred.service}</div> : null}
-                                    {i.md != null ? <div className="md clamp" dangerouslySetInnerHTML={{ __html: renderMd(i.md) }} /> : null}
-                                    {i.artifact?.url != null ? (
-                                        <div className="credrow"><a className="mint" href={i.artifact.url} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()}>mint ↗</a></div>
-                                    ) : null}
-                                </div>
-                            )
-                        }
-                        return (
-                            <div key={i.id} className="cgcard" onClick={() => c.select(col.id, i.id)}>
-                                <div className="cgtop"><b className={`tl ${i.state}`}>{i.text}</b></div>
-                                {/* a link click opens its tab — it must not ALSO yank into the item view */}
-                                {i.md != null ? <div className="md clamp" onClick={(e) => { if ((e.target as HTMLElement).tagName === 'A') e.stopPropagation() }} dangerouslySetInnerHTML={{ __html: renderMd(i.md) }} /> : null}
-                                {i.file != null ? <span className="truth">{i.file}</span> : null}
-                                {i.remarks != null && i.remarks.length > 0 ? <div className="cgrem">{i.remarks[i.remarks.length - 1]}</div> : null}
-                            </div>
-                        )
-                    })}
-                </div>
-            )}
-        </div>
-    )
-})
-
 // graph item view — the graph ITSELF fills the stage, lint line as a slim header
 const wireClass = (l: string): string => {
     const t = l.trimStart()

package/src/serve/hub-app/col-tables-view.tsx

@@ -3,27 +3,34 @@
 // lines. What needs attention comes first; the quiet groups (passing, off,
 // done) fold by default and each viewer's fold choice is kept. The filter
 // input and the severity keys narrow the lines, since both read
-// `visibleInstances`. Groups, order and words: col-tables.ts.
+// `visibleInstances`. The checks page opens on the line that counts where
+// its checks run. Groups, order and words: col-tables.ts.
 import { observer } from 'mobx-react-lite'
 import type { ReactNode } from 'react'
 import { checkName } from './check-words.ts'
-import { askGroups, checkGroups, dayMs, findingLine, planWord, type TableGroup } from './col-tables.ts'
+import { askGroups, checkGroups, itemGroups, secretGroups, dayMs, findingLine, planWord, type TableGroup } from './col-tables.ts'
 import { durationTone, fmtMs } from './dur.ts'
+import type { CheckOwner } from './hash-route.ts'
 import type { Resource } from './hub-types.ts'
+import { sectionLabel } from './keys.ts'
 import type { RepoSt } from './repo-st.ts'
 import { TimeAgo } from './time-ago.tsx'
 
 const emptyWords = (app: RepoSt): string => (app.filter === 'red' ? 'no reds here' : app.filter === 'needs' ? 'nothing here needs you' : app.query.trim() !== '' ? 'nothing matches the filter' : 'nothing here yet')
 
-/** the page frame: the collection's title and count, then the table */
-const Page = ({ title, n, cols, empty, children }: { title: string; n: number; cols: ReactNode; empty: string; children: ReactNode }) => (
+/** the page frame: the collection's title and count, a line under it when
+ *  the page has one, then the table */
+const Page = ({ title, n, lead, cols, empty, children }: { title: string; n: number; lead?: string; cols: ReactNode; empty: string; children: ReactNode }) => (
     <div className="ctpage">
         <div className="cghead">{title}<span className="cnt">{n}</span></div>
+        {lead == null || lead === '' ? null : <div className="ctlead">{lead}</div>}
         {n === 0 ? <div className="ph">{empty}</div> : (
-            <table className="actable cttable">
-                <colgroup>{cols}</colgroup>
-                {children}
-            </table>
+            <div className="ctbox">
+                <table className="actable cttable">
+                    <colgroup>{cols}</colgroup>
+                    {children}
+                </table>
+            </div>
         )}
     </div>
 )
@@ -73,17 +80,19 @@ const CheckRow = observer(({ app, r }: { app: RepoSt; r: Resource }) => {
     )
 })
 
-export const CheckTable = observer(({ app, id }: { app: RepoSt; id: string }) => {
+/** every check, or only the ones one owner ships (`from`) */
+export const CheckTable = observer(({ app, id, from }: { app: RepoSt; id: string; from?: CheckOwner }) => {
     const col = app.cols.sidebarCols.find((x) => x.id === id)
     if (col == null) return <div className="stagewrap"><div className="ph">collection vanished — the truth moved on</div></div>
-    const items = app.cols.visibleInstances(col)
+    const items = app.cols.visibleInstances(col).filter((r) => from == null || r.check?.from === from)
     const cols = (
         <>
             <col className="c-dot" /><col className="c-id" /><col className="c-title" /><col className="c-age" /><col className="c-dur" /><col /><col className="c-plan" />
         </>
     )
     return (
-        <Page title={col.title} n={items.length} cols={cols} empty={emptyWords(app)}>
+        // where the checks run, counted over every check whatever the filter
+        <Page title={from == null ? col.title : sectionLabel(from)} n={items.length} lead={app.tree.whenLine} cols={cols} empty={emptyWords(app)}>
             {checkGroups(items).map((g) => <Group key={g.key} app={app} col={col.id} g={g} span={7} row={(r) => <CheckRow key={r.id} app={app} r={r} />} />)}
         </Page>
     )
@@ -122,3 +131,67 @@ export const AskTable = observer(({ app, id }: { app: RepoSt; id: string }) => {
         </Page>
     )
 })
+
+const SECRET_TONE: Record<string, string> = { missing: 't-red', minor: 'acdim', present: 't-ok' }
+
+/** a secret's sentence without its own name in front, which the name column says */
+const secretSentence = (r: Resource): string => (r.text.startsWith(r.title) ? r.text.slice(r.title.length).replace(/^[\s,]+/, '') : r.text)
+
+const SecretRow = observer(({ app, r }: { app: RepoSt; r: Resource }) => {
+    const slot = r.slot ?? 'present'
+    const tone = SECRET_TONE[slot] ?? ''
+    return (
+        <tr className={`ctrow s-${slot}`} data-k={r.id} onClick={() => app.cols.select(r.collection, r.id)} title={r.text}>
+            <td className={`ctdot ${tone}`}>{slot === 'minor' ? '○' : '●'}</td>
+            <td className="ctid">{r.title}</td>
+            <td className={`ctkind ${tone}`}>{slot}</td>
+            <td className="ctfind">{secretSentence(r)}</td>
+        </tr>
+    )
+})
+
+/** the secrets page: one line per credential, never a card */
+export const SecretTable = observer(({ app, id }: { app: RepoSt; id: string }) => {
+    const col = app.cols.sidebarCols.find((x) => x.id === id)
+    if (col == null) return <div className="stagewrap"><div className="ph">collection vanished — the truth moved on</div></div>
+    const items = app.cols.visibleInstances(col)
+    const cols = (
+        <>
+            <col className="c-dot" /><col className="c-name" /><col className="c-kind" /><col />
+        </>
+    )
+    return (
+        <Page title={col.title} n={items.length} cols={cols} empty={emptyWords(app)}>
+            {secretGroups(items).map((g) => <Group key={g.key} app={app} col={col.id} g={g} span={4} row={(r) => <SecretRow key={r.id} app={app} r={r} />} />)}
+        </Page>
+    )
+})
+
+const ITEM_TONE: Record<string, string> = { red: 't-red', warn: 't-warn', ok: 't-ok', idle: '', quiet: 'acdim' }
+
+const ItemRow = observer(({ app, r }: { app: RepoSt; r: Resource }) => (
+    <tr className={`ctrow s-${r.state}`} data-k={r.id} onClick={() => app.cols.select(r.collection, r.id)} title={r.file ?? r.text}>
+        <td className={`ctdot ${ITEM_TONE[r.state] ?? ''}`}>●</td>
+        <td className={`cttext ${ITEM_TONE[r.state] ?? ''}`}>{r.text}</td>
+        <td className="ctkind">{r.slot ?? ''}</td>
+        <td className="ctfind">{r.file ?? ''}</td>
+    </tr>
+))
+
+/** every collection without a table of its own: one line per item, never a
+ *  card. What it says in full is its own page, one click away */
+export const ItemTable = observer(({ app, id }: { app: RepoSt; id: string }) => {
+    const col = app.cols.sidebarCols.find((x) => x.id === id)
+    if (col == null) return <div className="stagewrap"><div className="ph">collection vanished — the truth moved on</div></div>
+    const items = app.cols.visibleInstances(col)
+    const cols = (
+        <>
+            <col className="c-dot" /><col /><col className="c-kind" /><col className="c-file" />
+        </>
+    )
+    return (
+        <Page title={col.title} n={items.length} cols={cols} empty={emptyWords(app)}>
+            {itemGroups(items).map((g) => <Group key={g.key} app={app} col={col.id} g={g} span={4} row={(r) => <ItemRow key={r.id} app={app} r={r} />} />)}
+        </Page>
+    )
+})

package/src/serve/hub-app/col-tables.ts

@@ -113,3 +113,30 @@ export function askGroups(rows: readonly Resource[]): TableGroup<AskGroupKey>[]
     ]
     return groups.filter((g) => g.rows.length > 0)
 }
+
+export type SecretGroupKey = 'missing' | 'minor' | 'present'
+
+/** the secrets in the order a reader wants them: what is missing first, a
+ *  minor one nothing uses yet next, then what is present, each by name */
+export function secretGroups(rows: readonly Resource[]): TableGroup<SecretGroupKey>[] {
+    const by = (key: SecretGroupKey): Resource[] => rows.filter((r) => (r.slot ?? 'present') === key).sort((a, b) => a.title.localeCompare(b.title))
+    const groups: TableGroup<SecretGroupKey>[] = [
+        { key: 'missing', label: `${by('missing').length} missing`, rows: by('missing'), foldedByDefault: false },
+        { key: 'minor', label: `${by('minor').length} minor`, rows: by('minor'), foldedByDefault: false },
+        { key: 'present', label: `${by('present').length} present`, rows: by('present'), foldedByDefault: false },
+    ]
+    return groups.filter((g) => g.rows.length > 0)
+}
+
+export type ItemGroupKey = 'red' | 'warn' | 'rest'
+
+/** any other collection, one line per item: what is red first, then what
+ *  warns, then the rest, each by its words */
+export function itemGroups(rows: readonly Resource[]): TableGroup<ItemGroupKey>[] {
+    const keyOf = (r: Resource): ItemGroupKey => (r.state === 'red' ? 'red' : r.state === 'warn' ? 'warn' : 'rest')
+    const by = (key: ItemGroupKey): Resource[] => rows.filter((r) => keyOf(r) === key).sort((a, b) => a.text.localeCompare(b.text))
+    const word: Record<ItemGroupKey, string> = { red: 'red', warn: 'warning', rest: 'the rest' }
+    return (['red', 'warn', 'rest'] as const)
+        .map((key) => ({ key, label: `${by(key).length} ${word[key]}`, rows: by(key), foldedByDefault: false }))
+        .filter((g) => g.rows.length > 0)
+}

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

@@ -8,6 +8,7 @@ import type { RepoSt } from './repo-st.ts'
 import type { Col, ColMeta, HubProblem, Resource } from './hub-types.ts'
 import type { PlanRow } from '../../plan/planner.ts'
 import { readScreen, SCREEN_WRITE_MS, writeScreen } from './screen-cache.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 /** where a viewer's fold choices on the checks and asks tables are kept,
  *  one per browser and not per repo: `checks:pass` open is a habit */
@@ -132,7 +133,7 @@ export class ColsSvc {
      *  the server keeps warm */
     async poll(fresh = false): Promise<void> {
         try {
-            const r = await fetch(this.st.url(fresh ? '/api/resources.json?fresh=1' : '/api/resources.json'))
+            const r = await reach(this.st.url(fresh ? '/api/resources.json?fresh=1' : '/api/resources.json'))
             if (!r.ok) throw new Error(await r.text())
             const j = (await r.json()) as Answer
             runInAction(() => {
@@ -148,7 +149,7 @@ export class ColsSvc {
         } catch (e) {
             // a dead server must SAY so, in the header, never leave a tree
             // that reads like a healthy repo. The last rows stay, dated by it
-            runInAction(() => { this.fetchErr = `the page cannot reach this hub: ${(e as Error).message}` })
+            runInAction(() => { this.fetchErr = ownTrouble(e, this.st.home.machine, (m) => `the page cannot reach this hub: ${m}`) || null })
         }
     }
 
@@ -237,12 +238,12 @@ export class ColsSvc {
     private async act(path: string, body: Record<string, unknown>): Promise<boolean> {
         this.actErr = ''
         try {
-            const r = await fetch(this.st.url(`/api/act/${path}`), { method: 'POST', body: JSON.stringify(body) })
+            const r = await reach(this.st.url(`/api/act/${path}`), { method: 'POST', body: JSON.stringify(body) })
             if (!r.ok) throw new Error(await r.text())
             await this.poll(true)
             return true
         } catch (e) {
-            runInAction(() => { this.actErr = (e as Error).message })
+            runInAction(() => { this.actErr = ownTrouble(e, this.st.home.machine) })
             return false
         }
     }

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

@@ -22,6 +22,7 @@ import { serverNow } from './live-svc.ts'
 import { ROWS, type RowSize } from './timeline-geometry.ts'
 import { ageWords } from './time-ago.tsx'
 import type { HomeSt } from './home-st.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 export type DockSize = 'line' | 'slim' | 'open'
 
@@ -296,7 +297,7 @@ export class DockSt {
         if (this.inFlight) return
         this.inFlight = true
         try {
-            const r = await fetch('/api/house-runs.json')
+            const r = await reach('/api/house-runs.json')
             if (!r.ok) throw new Error(await r.text())
             const v = (await r.json()) as HouseView
             runInAction(() => {
@@ -306,7 +307,7 @@ export class DockSt {
                 this.error = ''
             })
         } catch (e) {
-            runInAction(() => { this.error = `the runs could not be read: ${(e as Error).message}` })
+            runInAction(() => { this.error = ownTrouble(e, this.home.machine, (m) => `the runs could not be read: ${m}`) })
         } finally {
             this.inFlight = false
         }

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

@@ -4,6 +4,9 @@
 // then the status as small pills that fold into +N rather than wrap. The
 // state is dock-st.ts; the height is the page's panel (hub-app.tsx).
 import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
+import { Tip } from './floating.tsx'
+import { Icon, ICON } from './icons.tsx'
 import type { HomeSt } from './home-st.ts'
 import { CycleButton } from './cycle-button.tsx'
 import { DOCK_KEY } from './keys.ts'
@@ -15,6 +18,38 @@ import type { PlacedGroup } from './timeline-geometry.ts'
 /** what the dock is, on its size button's hover */
 export const DOCK_HELP = `every check shipkit runs in every repo, whoever started it: a page, an agent in a terminal, the plan. The line, the pills alone; slim, the last two minutes, one group of lanes per repo; open, the last ten, zoomed by the wheel and panned by a drag, its height dragged at the top edge`
 
+const COPIED_MS = 1500
+
+/** the page's own address, to paste somewhere: the app window has no url bar */
+export const CopyUrl = () => {
+    const [href, setHref] = useState(() => globalThis.location?.href ?? '')
+    const [said, setSaid] = useState<string | null>(null)
+    // the router moves the address with pushState and replaceState, which no
+    // event reports: read it when the pointer or the focus arrives
+    const sync = () => setHref(location.href)
+    useEffect(() => {
+        if (said == null) return
+        const t = setTimeout(() => setSaid(null), COPIED_MS)
+        return () => clearTimeout(t)
+    }, [said])
+    const click = async () => {
+        try {
+            if (globalThis.navigator?.clipboard == null) throw new Error('this page has no clipboard')
+            await navigator.clipboard.writeText(location.href)
+            setSaid('copied')
+        } catch (e) {
+            setSaid(`could not copy: ${(e as Error).message}`)
+        }
+    }
+    return (
+        <Tip className="dcopy" instant placement="top-end" content={<><div>{said ?? 'click to copy this page\'s url'}</div><code>{href}</code></>}>
+            <button className={`ghost dcopyb${said === 'copied' ? ' ok' : ''}`} aria-label="copy this page's url" onMouseEnter={sync} onFocus={sync} onClick={() => void click()}>
+                <Icon d={ICON.link} />
+            </button>
+        </Tip>
+    )
+}
+
 /** a group's label: the repo's icon and its name in its colour */
 const GroupLabel = observer(({ app, g }: { app: HomeSt; g: PlacedGroup }) => {
     const p = app.projects.list.find((x) => x.name === g.key)
@@ -55,6 +90,7 @@ export const Dock = observer(({ app }: { app: HomeSt }) => {
                 <CycleButton options={DOCK_SIZES} value={d.size} onChange={(s) => d.setSize(s)} shortcut={DOCK_KEY} title={DOCK_HELP} />
                 <PillRow items={d.pills.map((p) => ({ key: p.key, title: p.title, node: <PillFace app={app} p={p} /> }))} />
                 {d.error !== '' ? <span className="warnline">{d.error}</span> : null}
+                <CopyUrl />
             </div>
             {d.size === 'line' ? null : <div className="dbody">
                 {v == null ? null : groups.length === 0

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

@@ -6,6 +6,12 @@
 .dhead{display:flex;gap:var(--s2);align-items:center;height:22px;flex:none;padding:0 var(--s3)}
 /* the status pills take the room left, and fold rather than wrap */
 .dhead .pchips{flex:1}
+/* the page's url to the clipboard, at the bottom right corner */
+.dcopy{flex:none;display:flex;margin-left:auto}
+.dcopyb{display:flex;align-items:center;padding:0 var(--s0);color:var(--dim)}
+.dcopyb:hover{color:var(--ink)}
+.dcopyb.ok{color:var(--ok)}
+.dcopyb .hico{width:13px;height:13px;color:inherit}
 .dbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 var(--s3) var(--s1);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
 .dempty{padding:var(--s1) 0;color:var(--dim)}
 .dock .tlax.compact{height:auto;padding-top:0}

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

@@ -0,0 +1,30 @@
+// THE way the page says trouble: cards floating at the top right, just under
+// the bar, taking no layout room, so one coming or going moves nothing, and
+// nothing drawn while all is well. A bar never carries trouble text. Styles:
+// home-strip.css .htoasts.
+import type { ReactNode } from 'react'
+
+export type Card = {
+    key: string
+    tone: 'red' | 'warn'
+    /** a bold lead word or two ("web crashed"), before the words */
+    head?: ReactNode
+    body?: ReactNode
+}
+
+/** the cards, in a zero height box placed right after the bar, so they
+ *  float just under it whatever the bar's height */
+export const FloatCards = ({ cards }: { cards: Card[] }) => {
+    if (cards.length === 0) return null
+    return (
+        <div className="hanchor">
+            <div className="htoasts">
+                {cards.map((c) => (
+                    <div key={c.key} className={c.tone === 'warn' ? 'htoast warn' : 'htoast'} role="alert">
+                        {c.head == null ? null : <><b>{c.head}</b> </>}{c.body}
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}

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

@@ -3,8 +3,9 @@
 // (flip to stay in the window, shift off its edges, an offset from the
 // trigger), a portal lifts it out of every box that clips, and hover opens
 // it after a short delay, so a pointer passing by never flickers one open.
-// Nothing here is positioned by hand.
-import { autoUpdate, flip, FloatingPortal, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, type Placement } from '@floating-ui/react'
+// A popover (Pop) opens on a click instead, and Escape or a click outside
+// closes it. Nothing here is positioned by hand.
+import { autoUpdate, flip, FloatingFocusManager, FloatingPortal, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, type Placement } from '@floating-ui/react'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import type { HTMLAttributes, ReactNode } from 'react'
 
@@ -25,13 +26,15 @@ type TipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
     fallbacks?: Placement[]
     /** the pointer can move into it (a log to scroll): it stays open on the way */
     interactive?: boolean
+    /** opens the moment the pointer arrives, for a trigger whose only words are its tip */
+    instant?: boolean
 }
 
 /** a trigger and what floats over it on hover or focus */
-export const Tip = observer(({ content, children, tipClass = 'ftip', placement = 'top', fallbacks, interactive = false, ...rest }: TipProps) => {
+export const Tip = observer(({ content, children, tipClass = 'ftip', placement = 'top', fallbacks, interactive = false, instant = false, ...rest }: TipProps) => {
     const st = useLocalObservable(() => ({ open: false, set(v: boolean) { this.open = v } }))
     const f = useFloating({ open: st.open, onOpenChange: (v) => st.set(v), placement, strategy: 'fixed', middleware: middleware(6, fallbacks), whileElementsMounted: autoUpdate })
-    const hover = useHover(f.context, { delay: { open: OPEN_MS, close: interactive ? 100 : 0 }, handleClose: interactive ? safePolygon() : null })
+    const hover = useHover(f.context, { delay: { open: instant ? 0 : OPEN_MS, close: interactive ? 100 : 0 }, handleClose: interactive ? safePolygon() : null })
     const focus = useFocus(f.context)
     const dismiss = useDismiss(f.context)
     const role = useRole(f.context, { role: 'tooltip' })
@@ -47,3 +50,37 @@ export const Tip = observer(({ content, children, tipClass = 'ftip', placement =
         </>
     )
 })
+
+type PopProps = {
+    /** what the trigger button shows */
+    label: ReactNode
+    className?: string
+    'aria-label'?: string
+    popClass?: string
+    placement?: Placement
+    /** what floats, given the way to close it (an entry that acts closes it) */
+    children: (close: () => void) => ReactNode
+}
+
+/** a button that opens what floats under it on a click; focus moves into
+ *  it, and Escape or a click outside closes it */
+export const Pop = observer(({ label, className, popClass = 'fpop', placement = 'bottom-start', children, ...rest }: PopProps) => {
+    const st = useLocalObservable(() => ({ open: false, set(v: boolean) { this.open = v } }))
+    const f = useFloating({ open: st.open, onOpenChange: (v) => st.set(v), placement, strategy: 'fixed', middleware: middleware(4), whileElementsMounted: autoUpdate })
+    const click = useClick(f.context)
+    const dismiss = useDismiss(f.context)
+    const role = useRole(f.context, { role: 'dialog' })
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role])
+    return (
+        <>
+            <button type="button" ref={f.refs.setReference} className={className} {...getReferenceProps(rest)}>{label}</button>
+            {st.open ? (
+                <FloatingPortal>
+                    <FloatingFocusManager context={f.context} modal={false}>
+                        <div ref={f.refs.setFloating} className={popClass} style={f.floatingStyles} {...getFloatingProps()}>{children(() => st.set(false))}</div>
+                    </FloatingFocusManager>
+                </FloatingPortal>
+            ) : null}
+        </>
+    )
+})

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

@@ -0,0 +1,42 @@
+// A repo's git page state: one repo's git, read from the daemon while the
+// page is shown (`/api/home/git.json`), a week of commits and HEAD's last
+// one past that. The activity page reads every repo for a window; this reads
+// one, whatever that window is.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { ActivityRow } from '../../home/activity-shape.ts'
+import type { RepoSt } from './repo-st.ts'
+import { ownTrouble, reach } from './reach.ts'
+
+export const GIT_POLL_MS = 30_000
+
+export class GitSt {
+    row: ActivityRow | null = null
+    error = ''
+    private timer: ReturnType<typeof setInterval> | null = null
+
+    constructor(private st: RepoSt) {
+        makeAutoObservable<this, 'st' | 'timer'>(this, { st: false, timer: false, row: observableRef })
+    }
+
+    async load(): Promise<void> {
+        try {
+            const r = await reach(`/api/home/git.json?repo=${encodeURIComponent(this.st.key)}`, { signal: AbortSignal.timeout(30_000) })
+            if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
+            const j = (await r.json()) as ActivityRow
+            runInAction(() => { this.row = j; this.error = '' })
+        } catch (e) {
+            runInAction(() => { this.error = ownTrouble(e, this.st.home.machine, (m) => `read git: ${m}`) })
+        }
+    }
+
+    /** reads while the page is shown */
+    start(): void {
+        if (this.timer != null) return
+        void this.load()
+        this.timer = setInterval(() => void this.load(), GIT_POLL_MS)
+    }
+    stop(): void {
+        if (this.timer != null) clearInterval(this.timer)
+        this.timer = null
+    }
+}