rvlib-shipkit 1.4.0 → 1.5.0

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

@@ -1,45 +1,42 @@
 // ONE GATE CHECK, on its own page, as ONE compact block: the id as a tag, the
 // title, the sentence it wrote about itself, the exact command it runs, then
 // one grid of facts, each a dim label and a short value whose explanation is
-// the row's `(?)`. No box holds a single field. Navigation is the tree on the
+// the row's `(?)`, then where it runs: one line per context. No box holds a single field. Navigation is the tree on the
 // left, so there is no back link.
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef } from 'react'
 import { CACHED } from '../../core/outcome-words.ts'
+import { cellMeaning, MATRIX_AXES, RUNS_LEGEND } from '../../core/runs-matrix.ts'
 import { durationTone, fmtMs } from './dur.ts'
 import { Help, TERMS } from './help.tsx'
 import type { RepoSt } from './repo-st.ts'
-import type { SlowSuite, CheckFacts, RecentRun, WhenAt } from './hub-types.ts'
+import type { SlowSuite, CheckFacts, RecentRun } from './hub-types.ts'
 import { renderMd, renderMdInline } from './md.ts'
 import { nextRun } from './next-run.ts'
 import { ProseHits } from './prose-hits-view.tsx'
 import { stampWords, TimeAgo, TimeAhead } from './time-ago.tsx'
-import { checkName, commandOf, docPath, editorHref, lastRun, rememberedFact, repoPath, whatFacts, WHEN_OPTION, type ShortPath } from './check-words.ts'
+import { checkName, commandOf, docPath, editorHref, lastRun, rememberedFact, repoPath, whatFacts, type ShortPath } from './check-words.ts'
 
 /** which declaration is answering, so the switch never looks like it wrote
  *  something it did not. The CHIP is the short one, its help is the sentence */
 const SOURCE_CHIP: Record<CheckFacts['whenSource'], string> = {
-    when: 'repo.config.ts',
+    off: 'repo.config.ts',
+    when: 'when (retired)',
+    ruleExempt: 'ruleExempt (retired)',
     'check-file': 'the check file',
-    ruleExempt: 'ruleExempt',
-    optIn: 'optIn',
-    'gate-export': 'gate = false',
     defaults: 'defaults',
-    default: 'default',
+    default: 'derived',
 }
 
 const SOURCE_WORD: Record<CheckFacts['whenSource'], string> = {
-    when: 'set in the `when` block of `repo.config.ts`, which this switch writes',
-    'check-file': 'declared by the check file itself, and the `when` block overrides it',
-    ruleExempt: 'from the older `ruleExempt`, which reads as off',
-    optIn: 'from the older `optIn` key, which reads as health',
-    'gate-export': 'from `export const gate = false` in its own file',
+    off: 'turned off in the `off` block of `repo.config.ts`, which this switch writes',
+    when: 'turned off by the retired `when` key, which `shipkit ci` ports to `off` (SK029)',
+    ruleExempt: 'turned off by the retired `ruleExempt` key, which `shipkit ci` ports to `off` (SK029)',
+    'check-file': 'declared by the check file itself: every context it runs in, no default',
     defaults: 'from the `defaults` block, which removes the floor slot entirely',
-    default: 'nobody declared where this check runs, so it takes the default',
+    default: 'a row with no file of its own: the code that derives it writes every context',
 }
 
-const WHEN_VALUES: WhenAt[] = ['always', 'release', 'health', 'off']
-
 const VERDICT_WORD: Record<'pass' | 'warn' | 'fail' | 'skip', string> = {
     pass: 'passed', warn: 'warned', fail: 'failed', skip: 'skipped',
 }
@@ -126,44 +123,67 @@ export const CommandLine = ({ app, u }: { app: RepoSt; u: CheckFacts }) => {
     )
 }
 
-// ── the switch ───────────────────────────────────────────────────────────
+// ── where it runs ────────────────────────────────────────────────────────
+
+/** every context, one line each: the value the check declared and what it
+ *  means in the legend's words. The cache closes it, the off switch ends it */
+const WhereItRuns = observer(({ app, u }: { app: RepoSt; u: CheckFacts }) => {
+    const r = u.runs
+    return (
+        <Section title="where it runs" help="every context a check declares, with no default. The when page of this repo shows every check at once, and `sk when` prints the same">
+            {r.off != null
+                ? <div className="wline">runs nowhere: {r.off}</div>
+                : <div className="cruns">
+                    {MATRIX_AXES.map((k) => {
+                        const c = r.cells[k]
+                        const a = RUNS_LEGEND.find((x) => x.axis === k)!
+                        return (
+                            <div key={k} className={`crun${c.on ? ' on' : ''}`}>
+                                <span className="ck" title={`${k}: ${a.context.replace(/`/g, '')}. From ${c.source}`}>{a.short}</span>
+                                <span className="crv">{c.on ? c.text : 'no'}</span>
+                                <span className="crm">{cellMeaning(k, c.text)}</span>
+                            </div>
+                        )
+                    })}
+                    <div className="crun cache">
+                        <span className="ck" title={`cache: how an answer is kept. ${r.cache}`}>cache</span>
+                        <span className="crv">{r.cache.split(/[\s:]/)[0]}</span>
+                        <span className="crm">{cellMeaning('cache', r.cache)}</span>
+                    </div>
+                </div>}
+            {r.derivedWhy == null ? null : <div className="note">no file declares this row: {r.derivedWhy}</div>}
+            <div className="cfacts"><OffSwitch app={app} u={u} /></div>
+        </Section>
+    )
+})
 
-/** RUN WHEN, one select named by effect. It writes `repo.config.ts` itself,
- *  through the managed block, and leaves the file dirty: a change of place is
- *  a change its owner reviews in a git client, never a commit made on their
- *  behalf. Choosing never asks for the reason before it writes. */
-const RunWhen = observer(({ app, u }: { app: RepoSt; u: CheckFacts }) => {
+// ── the off switch ───────────────────────────────────────────────────────
+
+/** the one thing this repo says about a check: that it is OFF here, with the
+ *  reason. It writes `repo.config.ts` through the managed block and leaves the
+ *  file dirty for its owner to review */
+const OffSwitch = observer(({ app, u }: { app: RepoSt; u: CheckFacts }) => {
     const s = app.checks
     const g = s.gate
-    const shown = s.whenShown(u)
     const reason = s.reasonFor(u.checkId)
+    const off = u.runs.off
     return (
-        <Row k="run when" help="where this check runs. Changing it writes repo.config.ts and leaves the file for you to commit">
+        <Row k="off in this repo" wide help="where this check runs is its own declaration; the one thing this repo says is that it is OFF here, with why. The switch writes the `off` block of repo.config.ts and leaves the file for you to commit">
             <span className="cwhen">
-                <select className="wsel" value={shown} disabled={s.gateBusy} onChange={(e) => s.chooseWhen(u.checkId, e.target.value as WhenAt)}>
-                    {WHEN_VALUES.map((v) => <option key={v} value={v}>{WHEN_OPTION[v]}</option>)}
-                </select>
-                <Help text={
-                    <span className="legend">
-                        {WHEN_VALUES.map((v) => <span key={v} className="lrow"><b>{WHEN_OPTION[v]}</b> ({v}): {TERMS[v]}</span>)}
-                    </span>
-                } />
+                {off != null ? <span className="tl red">off: {off}</span> : <span className="dim">runs where it declares</span>}
                 <span className="stchip">{SOURCE_CHIP[u.whenSource]}</span>
                 <MdHelp text={SOURCE_WORD[u.whenSource]} />
-                {u.whenSource === 'when'
-                    ? <button className="wclear" disabled={s.gateBusy} onClick={() => void s.clearWhen(u.checkId)}>drop the entry</button>
-                    : null}
+                <a href="#" onClick={(e) => { e.preventDefault(); app.showWhen() }}>what runs when</a>
             </span>
-            {shown === 'off'
-                ? <span className="cblock">
-                    <input className="wreason" placeholder="why it is off (required, and it rides in the config)"
-                        value={reason} onChange={(e) => s.setReason(u.checkId, e.target.value)} />
-                    {u.when === 'off' && u.whenReason != null ? <span className="note">reason today: {u.whenReason}</span> : null}
-                    <button disabled={s.gateBusy || reason.trim() === ''} onClick={() => void s.setWhen(u.checkId, 'off')}>
-                        {u.when === 'off' ? 'change the reason' : 'turn it off'}
-                    </button>
-                </span>
-                : null}
+            {off != null && u.whenSource === 'off'
+                ? <span className="cblock"><button disabled={s.gateBusy} onClick={() => void s.turnOn(u.checkId)}>turn it back on</button></span>
+                : off == null
+                    ? <span className="cblock">
+                        <input className="wreason" placeholder="why this repo turns it off (required, it rides in the config)"
+                            value={reason} onChange={(e) => s.setReason(u.checkId, e.target.value)} />
+                        <button disabled={s.gateBusy || reason.trim() === ''} onClick={() => void s.setOff(u.checkId)}>turn it off here</button>
+                    </span>
+                    : null}
             {g != null && g.state === 'stale'
                 ? <span className="cblock warnline">the managed block in {g.path} was hand edited: reconcile it, then the switch works again</span>
                 : null}
@@ -321,7 +341,6 @@ export const CheckCard = observer(({ app, id }: { app: RepoSt; id: string }) =>
                 {whatFacts(u).map((f) => (
                     <Row key={f.k} k={f.k} help={f.help}>{f.tone == null ? f.v : <span className={`tl ${f.tone}`}>{f.v}</span>}</Row>
                 ))}
-                <RunWhen app={app} u={u} />
                 <Remembered u={u} />
                 {/* the help never depends on the second, so it reads the wall
                     clock and the row does not repaint on every tick */}
@@ -338,6 +357,7 @@ export const CheckCard = observer(({ app, id }: { app: RepoSt; id: string }) =>
                 {u.group == null ? null : <Row k="group" help="a label several checks share, so `--skip <group>` parks all of them at once">{u.group}</Row>}
                 <Timings u={u} />
             </div>
+            <WhereItRuns app={app} u={u} />
             {u.build && u.checkId === 'test' ? <SlowSuites app={app} /> : null}
             {u.checkId === 'SK014' ? <ProseHits app={app} /> : null}
             <LastOutput app={app} lines={u.lastLines} />

package/src/serve/hub-app/check-words.ts

@@ -49,17 +49,7 @@ export function rememberedFact(u: CachePop): RememberedFact {
     const cadence = CADENCE[u.when ?? 'always']
     if (u.never != null)
         return { v: 'never', inputs: [], help: `never cached, so it runs ${cadence}${u.never === '' ? '' : `: ${u.never}`}` }
-    return { v: 'never', inputs: [], help: `nothing declared, so it runs ${cadence}. \`inputs\`, \`ttl\` or \`never\` in the check says otherwise` }
-}
-
-/** the four places a check runs, named by what they do. The config keeps its
- *  own words (`always`, `release`, `health`, `off`), and these are only what
- *  the select under `run when` shows */
-export const WHEN_OPTION: Record<WhenAt, string> = {
-    always: 'always',
-    release: 'before a release',
-    health: 'health pass only',
-    off: 'never',
+    return { v: 'never', inputs: [], help: `nothing keys it, so it runs ${cadence}. A check file keys it with \`cache: { by: 'files' | 'reads' | 'ttl' | 'fact' }\`` }
 }
 
 /** what a check IS: three FACTS, each a short value a reader scans, with the

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-tables-view.tsx

@@ -3,22 +3,27 @@
 // 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 { 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>
@@ -73,17 +78,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>
     )

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
+    }
+}