rvlib-shipkit 1.2.0 → 1.4.0

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

@@ -1,12 +1,36 @@
-// the few line icons of the home (the overview's section headers, the two
-// places on top of the project list): one 20 unit path each, stroked in the text colour, so
-// the page's tokens colour them and nothing else does.
+// the few line icons of the home (the overview's section headers, the places
+// on top of the project list, a repo page's sections and its top bar): one 20
+// unit path each, stroked in the text colour, so the page's tokens colour them
+// and nothing else does.
 export const ICON = {
     shipkit: 'M3 7.5 10 4l7 3.5v5L10 16l-7-3.5zM3 7.5 10 11l7-3.5M10 11v5',
     process: 'M2 10h3.5l2-5 5 10 2-5H18',
     monitor: 'M3 4h14v9H3zM7 16.5h6M10 13v3.5',
+    archived: 'M2.5 4h15v3.5h-15zM4 7.5V16h12V7.5M8 10.5h4',
     home: 'M3 9.5 10 3.5l7 6M5 8v8.5h10V8M8.5 16.5v-4.5h3v4.5',
     planned: 'M5.5 3h9M5.5 17h9M6.5 3c0 4 7 4 7 7s-7 3-7 7M13.5 3c0 4-7 4-7 7s7 3 7 7',
+    browser: 'M10 2.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 1 0 0-15M2.5 10h15M10 2.5c-3 3-3 12 0 15M10 2.5c3 3 3 12 0 15',
+    window: 'M2.5 4h15v12h-15zM2.5 7.5h15M5 5.75h.01M7 5.75h.01',
+    activity: 'M6 3v14M6 6.5a2 2 0 1 0 0 .01M6 13.5a2 2 0 1 0 0 .01M10 6.5h7M10 13.5h7M10 10h5',
+    fork: 'M6 5v10M6 3a2 2 0 1 0 0 .01M6 17a2 2 0 1 0 0 .01M14 5a2 2 0 1 0 0 .01M14 7c0 4.5-8 3.5-8 7',
+    search: 'M8.5 3a5.5 5.5 0 1 0 0 11a5.5 5.5 0 1 0 0-11M12.5 12.5 17 17',
+    // a repo page's sections, then its two runs and its editor
+    checks: 'M4 10.5 7.5 14 16 5.5',
+    runs: 'M3 5h8M3 10h12M3 15h6',
+    asks: 'M3 4h14v9H8l-4 3.5V13H3z',
+    tests: 'M8 3h4M8.5 3v5L4 16.5h12L11.5 8V3M6.2 12.5h7.6',
+    media: 'M3 4h14v12H3zM3 13l4-4 4 4 2-2 4 4M13 7.5h.01',
+    wikis: 'M10 5.5C8.5 4 6 3.5 3 4v11c3-.5 5.5 0 7 1.5c1.5-1.5 4-2 7-1.5V4c-3-.5-5.5 0-7 1.5zM10 5.5v11',
+    admin: 'M4 5h12M4 10h12M4 15h12M7 3.5v3M13 8.5v3M9 13.5v3',
+    health: 'M2 10h3.5l2-5 5 10 2-5H18',
+    gate: 'M10 2.5 16 5v4.5c0 4-2.7 6.5-6 8c-3.3-1.5-6-4-6-8V5zM7.5 10l2 2 3.5-3.5',
+    // 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/index.html

@@ -9,6 +9,10 @@
   <link rel="stylesheet" href="./prose-hits.css" />
   <link rel="stylesheet" href="./home-strip.css" />
   <link rel="stylesheet" href="./planned.css" />
+  <link rel="stylesheet" href="./activity.css" />
+  <link rel="stylesheet" href="./readme.css" />
+  <link rel="stylesheet" href="./dock.css" />
+  <link rel="stylesheet" href="./controls.css" />
 </head>
 <body>
   <div id="root"></div>

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

@@ -1,11 +1,12 @@
 // the page's command keys, read the same on every layout: ⌘1 to ⌘9 select the
-// nth repo of the project list, ⌘J shows the overview, ⌘P the plan, ⌘K opens
-// the picker.
-// A digit is read from the physical key (`code`), so an AZERTY keyboard,
-// where the key under 1 types `&`, selects the same repo. Ctrl stands in for
+// nth repo of the project list, then the home row under the right hand: ⌘J
+// 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
 // ⌘ off a Mac. The macOS app binds none of these to a menu item, so they
 // reach the page (tests/home-strip.test.tsx reads ShipkitGui.swift).
-export type PageKey = { t: 'repo'; n: number } | { t: 'home' } | { t: 'planned' } | { t: 'picker' }
+export type PageKey = { t: 'repo'; n: number } | { t: 'home' } | { t: 'planned' } | { t: 'activity' } | { t: 'picker' } | { t: 'dock' }
 
 type KeyLike = { key: string; code: string; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }
 
@@ -14,12 +15,46 @@ export function pageKey(e: KeyLike): PageKey | null {
     const digit = /^Digit([1-9])$/.exec(e.code)
     if (digit != null) return { t: 'repo', n: Number(digit[1]) }
     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 === 'p') return { t: 'planned' }
-    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: '⌘P' } as const
+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'
+
+/** the tree's filter, on a repo page: a plain `/` focuses it, and its
+ *  badge at the input's right prints this */
+export const SEARCH_KEY = '/'
+
+export function isSearchKey(e: Pick<KeyLike, 'key' | 'metaKey' | 'ctrlKey' | 'altKey'>): boolean {
+    return e.key === SEARCH_KEY && !e.metaKey && !e.ctrlKey && !e.altKey
+}
+
+/** a repo page's sections, each on ⌥ and its letter. ⌥ because every other
+ *  layer is spoken for: the plain letters are the severity filter (a n r)
+ *  and the chart's follow key, ⌘ with these letters is copy, reload, select
+ *  all, new tab, minimize and close in the browser and the macOS app, and ⌥
+ *  plus a letter only types a character inside a text field, where the page
+ *  leaves the key alone. Read from the physical key (`code`): on a Mac ⌥C
+ *  types ç, and AZERTY moves the letters */
+export type SectionId = 'checks' | 'runs' | 'asks' | 'tests' | 'media' | 'wikis' | 'admin'
+export const SECTION_LETTER: Record<SectionId, string> = { checks: 'C', runs: 'R', asks: 'A', tests: 'T', media: 'M', wikis: 'W', admin: 'D' }
+/** the badge at the end of a section's line */
+export const sectionKeyLabel = (id: SectionId): string => `⌥${SECTION_LETTER[id]}`
+
+export function sectionKey(e: KeyLike): SectionId | null {
+    if (!e.altKey || e.metaKey || e.ctrlKey || e.shiftKey) return null
+    const m = /^Key([A-Z])$/.exec(e.code)
+    if (m == null) return null
+    const hit = Object.entries(SECTION_LETTER).find(([, l]) => l === m[1])
+    return hit == null ? null : (hit[0] as SectionId)
+}

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

@@ -1,11 +1,10 @@
-// The live strip under the header, as the page holds it: `/api/live.json`
-// read every second (the runs of the last ten minutes, the ones in flight,
-// here and in the other house repos), whether the strip is folded, and the
-// chart it draws. Folded, the chart is the thin rolling window of the last
-// two minutes; unfolded, the whole record (the recent runs of /api/live.json
-// over the older ones of /api/timeline.json), opened on its last ten minutes
-// and fit to all of it on demand. It is the hub's one run chart
-// (chart-view.ts, timeline-chart.tsx).
+// A repo's live runs, as the page holds them: `/api/live.json` read every
+// second while the repo shows (the runs of the last ten minutes and the ones
+// in flight), which the header's run state reads, and the chart of the runs
+// page over it: the whole record (the recent runs of /api/live.json over the
+// older ones of /api/timeline.json), opened on its last ten minutes and fit
+// to all of it on demand (chart-view.ts, timeline-chart.tsx). What runs in
+// every repo at once is the dock's (dock-st.ts).
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { LiveView } from '../../ledger/live-timeline.ts'
 import type { TimelineInvocation } from '../../ledger/run-timeline.ts'
@@ -15,16 +14,15 @@ import { chartHeight } from './timeline-geometry.ts'
 
 /** how often the page asks. A strip a second behind the runner is still live */
 export const LIVE_POLL_MS = 1_000
-/** the folded strip's window, and the span the unfolded one opens on */
-export const FOLDED_WINDOW_MS = 120_000
+/** the span the chart opens on */
 export const OPEN_WINDOW_MS = 600_000
-/** the most the unfolded chart grows to: past it the lanes scroll inside it */
+/** the most the chart grows to: past it the lanes scroll inside it */
 export const OPEN_MAX_H = 320
-/** how long the unfolded chart keeps a height its lanes no longer fill,
+/** how long the chart keeps a height its lanes no longer fill,
  *  so it grows at once and never shrinks under the eye every second */
 export const HEIGHT_HOLD_MS = 10_000
 
-/** the height the unfolded chart shows: up at once, down only once the
+/** the height the chart shows: up at once, down only once the
  *  lanes have wanted less for HEIGHT_HOLD_MS */
 export type HeldHeight = { h: number; lowSince: number | null }
 export function settleHeight(prev: HeldHeight, wanted: number, now: number, holdMs = HEIGHT_HOLD_MS): HeldHeight {
@@ -33,32 +31,20 @@ export function settleHeight(prev: HeldHeight, wanted: number, now: number, hold
     return now - prev.lowSince >= holdMs ? { h: wanted, lowSince: null } : prev
 }
 
-/** the whole record the unfolded chart draws: every run of the live view,
+/** the whole record the chart draws: every run of the live view,
  *  then the older runs of the record it does not carry, newest first */
 export function mergeRuns(recent: TimelineInvocation[], record: TimelineInvocation[]): TimelineInvocation[] {
     const seen = new Set(recent.map((i) => i.runId))
     return [...recent, ...record.filter((i) => !seen.has(i.runId))].sort((a, b) => b.started - a.started)
 }
-/** the lanes the folded strip has room for */
-export const FOLDED_LANES = 5
-
-/** where the fold is remembered. localStorage is per origin and every
- *  repo's hub has its own port, so this is per repo already */
-export const OPEN_KEY = 'hub:liveOpen'
-
-const readOpen = (): boolean => {
-    try { return globalThis.localStorage?.getItem(OPEN_KEY) === '1' } catch { return false }
-}
-
 /** the server clock now: the view's stamp plus what the page clock has
  *  counted since it arrived, since the page may be another machine */
-export const serverNow = (view: LiveView, receivedAt: number, clientNow: number): number => view.now + Math.max(0, clientNow - receivedAt)
+export const serverNow = (view: { now: number }, receivedAt: number, clientNow: number): number => view.now + Math.max(0, clientNow - receivedAt)
 
-/** what the chart draws: folded, the rolling two minutes; open, the whole
- *  record, opening on its last ten */
-export function liveSource(view: LiveView | null, now: number, open: boolean, record: TimelineInvocation[] = []): ChartSource | null {
+/** what the runs page's chart draws: the whole record, opening on its last
+ *  ten minutes */
+export function liveSource(view: LiveView | null, now: number, record: TimelineInvocation[] = []): ChartSource | null {
     if (view == null) return null
-    if (!open) return { invocations: view.invocations, now, windowMs: FOLDED_WINDOW_MS, laneCap: Math.max(1, FOLDED_LANES - view.repos.length), zoomable: false, cap: view.cap }
     return { invocations: mergeRuns(view.invocations, record), now, windowMs: null, zoomable: true, cap: view.cap, homeSpanMs: OPEN_WINDOW_MS }
 }
 
@@ -67,10 +53,7 @@ export class LiveSvc {
     /** the page clock when `view` arrived */
     receivedAt = 0
     error = ''
-    /** a short answer to a click (a repo whose hub is not serving) */
-    note = ''
-    open = readOpen()
-    /** the unfolded chart's height, held so it does not jump every second */
+    /** the chart's height, held so it does not jump every second */
     held: HeldHeight = { h: 0, lowSince: null }
     chart: ChartView
     private timer: ReturnType<typeof setInterval> | null = null
@@ -78,7 +61,7 @@ export class LiveSvc {
     private started = false
 
     constructor(private st: RepoSt) {
-        this.chart = new ChartView(null, () => liveSource(this.view, this.now, this.open, this.st.timeline.data?.invocations ?? []))
+        this.chart = new ChartView(null, () => liveSource(this.view, this.now, this.st.timeline.data?.invocations ?? []))
         makeAutoObservable<this, 'st' | 'timer' | 'inFlight' | 'started'>(this, { st: false, timer: false, inFlight: false, started: false, view: observableRef, chart: false })
     }
 
@@ -87,18 +70,9 @@ export class LiveSvc {
         return this.view == null ? this.st.clock.now : serverNow(this.view, this.receivedAt, this.st.clock.now)
     }
 
-    toggle(): void {
-        this.open = !this.open
-        try { globalThis.localStorage?.setItem(OPEN_KEY, this.open ? '1' : '0') } catch { /* private window: the fold lasts the tab */ }
-        // either fold starts live: the folded strip is a trail, nothing else
-        this.chart.attach()
-        this.opened()
-    }
-
-    /** unfolded: back to the last ten minutes, the older record fetched, and
-     *  a height from the lanes as they are */
+    /** back to the last ten minutes, the older record fetched, and a height
+     *  from the lanes as they are */
     private opened(): void {
-        if (!this.open) return
         this.chart.home()
         this.chart.attach()
         this.held = { h: 0, lowSince: null }
@@ -108,8 +82,10 @@ export class LiveSvc {
 
     /** the height the lanes want now, as the held rule lets it show */
     settle(now: number): void {
+        // no runs page on screen, no chart to size: the record is not laid out
+        if (this.chart.viewW === 0) return
         const l = this.chart.layout
-        const lanes = (l?.lanes ?? 0) + (this.view?.repos.length ?? 0)
+        const lanes = l?.lanes ?? 0
         this.held = settleHeight(this.held, Math.min(OPEN_MAX_H, chartHeight(lanes)), now)
     }
 
@@ -139,7 +115,7 @@ export class LiveSvc {
                 this.view = v
                 this.receivedAt = Date.now()
                 this.error = ''
-                if (this.open) this.settle(Date.now())
+                this.settle(Date.now())
             })
             // a run that ended, from a terminal as much as from a button,
             // wrote new numbers: the rows and the timeline read them now
@@ -158,20 +134,4 @@ export class LiveSvc {
     get running(): boolean {
         return (this.view?.runs.length ?? 0) > 0
     }
-
-    /** a repo lane was clicked: its hub, when it serves */
-    async openRepo(repo: string): Promise<void> {
-        try {
-            const r = (await (await fetch(this.st.url(`/api/repo-hub?repo=${encodeURIComponent(repo)}`))).json()) as { url: string | null }
-            if (r.url != null) window.open(r.url, '_blank')
-            else this.say(`${repo} has no hub serving`)
-        } catch (e) {
-            this.say(`${repo}: ${(e as Error).message}`)
-        }
-    }
-
-    private say(text: string): void {
-        runInAction(() => { this.note = text })
-        setTimeout(() => runInAction(() => { if (this.note === text) this.note = '' }), 4_000)
-    }
 }

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

@@ -8,8 +8,10 @@
 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'
 import type { HomeSt } from './home-st.ts'
 import type { HubDot } from './projects-svc.ts'
 
@@ -22,6 +24,9 @@ export const MACHINE_TIMEOUT_MS = 8_000
  *  on the next load (the overview) while the daemon and pm are asked again */
 export const MACHINE_KEY = 'hub:machine'
 
+/** how long a copied pid says so */
+export const COPIED_MS = 1_200
+
 type Kept = { data: HomeAnswer | null; pm: PmAnswer | null; widgets: WidgetsAnswer | null }
 
 function loadKept(): Kept | null {
@@ -34,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 }
 
@@ -48,11 +58,20 @@ export class MachineSt {
     pmDown = ''
     /** the last action that failed */
     error = ''
+    /** where open sends a global process's url: the default browser, or a
+     *  shipkit app window */
     /** 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
+    /** the one second the process ages move on, ticking while the machine polls */
+    clock: ClockSvc
+    /** the pid a click just copied, which says so for COPIED_MS */
+    copiedPid: number | null = null
+    private copiedTimer: ReturnType<typeof setTimeout> | null = null
     /** what was last kept, so an unchanged machine is not written again */
     private kept = ''
     private timer: ReturnType<typeof setInterval> | null = null
@@ -63,13 +82,14 @@ export class MachineSt {
     private pollError = false
 
     constructor(private st: HomeSt, private o: MachineOpts = {}) {
+        this.clock = new ClockSvc()
         const k = loadKept()
         if (k != null) {
             this.data = k.data
             this.pm = k.pm
             this.widgets = k.widgets
         }
-        makeAutoObservable<this, 'st' | 'timer' | 'wasDown' | 'polling' | 'widgetsPolling' | 'pollError' | 'o' | 'kept' | 'keep'>(this, { st: false, timer: false, wasDown: false, polling: false, widgetsPolling: false, pollError: false, o: false, kept: false, keep: false, data: observableRef, pm: observableRef, widgets: observableRef })
+        makeAutoObservable<this, 'st' | 'timer' | 'copiedTimer' | 'wasDown' | 'polling' | 'widgetsPolling' | 'pollError' | 'o' | 'kept' | 'keep'>(this, { st: false, clock: false, timer: false, copiedTimer: false, wasDown: false, polling: false, widgetsPolling: false, pollError: false, o: false, kept: false, keep: false, data: observableRef, pm: observableRef, widgets: observableRef })
     }
 
     /** the repo the page shows, null on the overview and the plan */
@@ -85,6 +105,14 @@ export class MachineSt {
         return this.worker(this.repo)
     }
 
+    /** the processes table: shipkit's own first, then one group per repo in
+     *  the project list's order, one row per process (process-rows.ts, what
+     *  `shipkit global-processes` prints) */
+    get processGroups(): ProcessGroup[] {
+        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 {
         return this.pm?.resources.find((r) => r.id === id) ?? null
     }
@@ -110,10 +138,12 @@ export class MachineSt {
             if (this.repo != null && this.data != null) void this.hub(this.repo, 'ensure')
         })
         this.timer = setInterval(() => void this.load(), MACHINE_POLL_MS)
+        this.clock.start()
     }
 
     stop(): void {
         if (this.timer != null) clearInterval(this.timer)
+        this.clock.stop()
     }
 
     /** pm is polled beside the daemon: either one down leaves the other shown */
@@ -127,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 })
         }
     }
 
@@ -162,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
@@ -187,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(() => {
@@ -243,12 +274,33 @@ 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 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
+     *  refusal (plain http, an unfocused page) is said in the strip */
+    async copyPid(pid: number): Promise<void> {
+        try {
+            if (globalThis.navigator?.clipboard == null) throw new Error('this page has no clipboard')
+            await navigator.clipboard.writeText(String(pid))
+        } catch (e) {
+            runInAction(() => { this.error = `could not copy pid ${pid}: ${(e as Error).message}` })
+            return
+        }
+        runInAction(() => { this.copiedPid = pid })
+        if (this.copiedTimer != null) clearTimeout(this.copiedTimer)
+        this.copiedTimer = setTimeout(() => runInAction(() => { this.copiedPid = null }), COPIED_MS)
+    }
+
     /** restart the daemon or the web through pm */
     restartChild(id: Role): Promise<boolean> {
         return this.post('/api/pm/child', { id, act: 'restart' })

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

@@ -8,13 +8,15 @@ import sanitizeHtml from 'sanitize-html'
 
 marked.use({ gfm: true, breaks: false, async: false })
 
+const CARD_TAGS = [
+    'h1', 'h2', 'h3', 'h4', 'p', 'ul', 'ol', 'li',
+    'table', 'thead', 'tbody', 'tr', 'th', 'td',
+    'code', 'pre', 'strong', 'em', 'b', 'i', 'a', 'br', 'blockquote', 'hr',
+]
+
 export const renderMd = (src: string): string =>
     sanitizeHtml(marked.parse(src) as string, {
-        allowedTags: [
-            'h1', 'h2', 'h3', 'h4', 'p', 'ul', 'ol', 'li',
-            'table', 'thead', 'tbody', 'tr', 'th', 'td',
-            'code', 'pre', 'strong', 'em', 'b', 'i', 'a', 'br', 'blockquote', 'hr',
-        ],
+        allowedTags: CARD_TAGS,
         allowedAttributes: { a: ['href', 'target', 'rel'] },
         allowedSchemes: ['http', 'https'],
         allowProtocolRelative: false,
@@ -37,3 +39,34 @@ export const renderMdInline = (src: string): string =>
             a: (tagName, attribs) => ({ tagName, attribs: { ...attribs, target: '_blank', rel: 'noreferrer' } }),
         },
     })
+
+/** where a README image loads from: an http(s) url as written, a path
+ *  relative to the repo root through `fileUrl`, anything else (data:, file:,
+ *  `//host`) nowhere */
+export const readmeImageSrc = (src: string, fileUrl: (rel: string) => string): string | null => {
+    const s = src.trim()
+    if (/^https?:\/\//i.test(s)) return s
+    if (s === '' || s.startsWith('//') || /^[a-z][a-z0-9+.-]*:/i.test(s)) return null
+    const rel = s.replace(/[?#].*$/, '').replace(/^(\.\/|\/)+/, '')
+    return rel === '' ? null : fileUrl(rel.split('/').map(encodeURIComponent).join('/'))
+}
+
+/** a whole README: the card allowlist plus images and the few tags READMEs
+ *  lean on. A relative image is rewritten to the repo's file route, an image
+ *  with no loadable source is dropped */
+export const renderReadme = (src: string, fileUrl: (rel: string) => string): string =>
+    sanitizeHtml(marked.parse(src) as string, {
+        allowedTags: [...CARD_TAGS, 'h5', 'h6', 'img', 'details', 'summary', 'kbd', 'sup', 'sub', 'del'],
+        allowedAttributes: { a: ['href', 'target', 'rel'], img: ['src', 'alt', 'title', 'width', 'height'] },
+        allowedSchemes: ['http', 'https'],
+        allowProtocolRelative: false,
+        transformTags: {
+            a: (tagName, attribs) => ({ tagName, attribs: { ...attribs, target: '_blank', rel: 'noreferrer' } }),
+            img: (tagName, attribs) => {
+                const { src: raw, ...rest } = attribs
+                const src = readmeImageSrc(raw ?? '', fileUrl)
+                return { tagName, attribs: src == null ? rest : { ...rest, src } }
+            },
+        },
+        exclusiveFilter: (frame) => frame.tag === 'img' && (frame.attribs.src ?? '') === '',
+    })

package/src/serve/hub-app/next-run.ts

@@ -44,7 +44,7 @@ export type NextRunFacts = Pick<CheckFacts, 'when' | 'whenReason'>
 export function planWords(row: PlanRow, now: number): { words: string; at: number | null } {
     if (row.state === 'running') return { words: 'running now', at: row.dueAt }
     if (row.state === 'due') return { words: row.reason === 'asked' ? 'due now, asked' : row.reason === 'changed' ? 'due now, a save moved it' : 'due now', at: row.dueAt }
-    if (row.state === 'late') return { words: 'late, waits for the repo to be active', at: row.dueAt }
+    if (row.state === 'late') return { words: 'waits for the repo to be active', at: row.dueAt }
     if (row.state === 'next' && row.dueAt != null) return { words: `in ${aheadWords(row.dueAt - now)}`, at: row.dueAt }
     return { words: 'on the next save that moves what it reads', at: null }
 }

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

@@ -1,8 +1,8 @@
-// the one picker of the page (cmd+k, keys.ts), a node of the root: the
-// home's places (home, planned) first, then the shown repo's own jump
+// the one picker of the page (cmd+j, keys.ts), a node of the root: the
+// home's places (home, activity, planned, in the list's order) first, then the shown repo's own jump
 // targets, then every other house repo as a place to go. Another repo's
 // resources are never listed: a jump to a repo selects it in place, and its
-// own targets are one more cmd+k away.
+// own targets are one more cmd+j away.
 import { makeAutoObservable } from 'mobx'
 import type { HomeSt } from './home-st.ts'
 import type { Jump } from './repo-st.ts'
@@ -24,24 +24,28 @@ export class PaletteSt {
         const st = this.st
         if (st.machine == null) return []
         return [
-            { id: 'place:home', label: 'home', section: 'place', run: () => st.navigate('/') },
-            { id: 'place:planned', label: 'planned', section: 'place', run: () => st.navigate('/planned') },
+            { id: 'place:home', label: 'home', section: 'place', face: { place: 'home' }, run: () => st.navigate('/') },
+            { id: 'place:activity', label: 'activity', section: 'place', face: { place: 'activity' }, run: () => st.navigate('/activity') },
+            { id: 'place:planned', label: 'planned', section: 'place', face: { place: 'planned' }, run: () => st.navigate('/planned') },
+            { id: 'place:archived', label: 'archived', section: 'place', face: { place: 'archived' }, run: () => st.navigate('/archived') },
         ]
     }
 
-    /** every other house repo, as a place to go */
+    /** every house repo but the one on screen, as a place to go: on a
+     *  global page that is every repo */
     get others(): Jump[] {
         const st = this.st
         if (st.machine == null) return []
-        return st.projects.list.filter((p) => p.name !== st.selected).map((p) => ({ id: `repo:${p.name}`, label: p.name, section: 'repo', run: () => st.select(p.name) }))
+        const on = st.shown?.key
+        return st.projects.list.filter((p) => p.name !== on).map((p) => ({ id: `repo:${p.name}`, label: p.name, section: 'repo', face: { repo: p.name }, run: () => st.select(p.name) }))
     }
 
     get jumps(): Jump[] {
         return [...this.places, ...(this.st.shown?.jumps ?? []), ...this.others]
     }
 
-    /** ranked: prefix matches first, then substring. With no query, home and
-     *  planned, then the shown repo's first targets, then every other repo,
+    /** ranked: prefix matches first, then substring. With no query, home,
+     *  activity and planned, then the shown repo's first targets, then every other repo,
      *  so a jump elsewhere is always in reach */
     get results(): Jump[] {
         const q = this.query.trim().toLowerCase()

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

@@ -0,0 +1,47 @@
+// the one picker, cmd+j (palette-st.ts): home, activity, planned and
+// archived, the shown repo's targets, then every other repo. A place wears
+// its button's icon, a repo its own icon, as the project list shows them.
+import { observer } from 'mobx-react-lite'
+import type { HomeSt } from './home-st.ts'
+import { Icon, ICON } from './icons.tsx'
+import { Face } from './project-list.tsx'
+import type { JumpFace } from './repo-st.ts'
+
+/** the icon a picker entry wears; an empty slot keeps the labels aligned */
+const PalFace = observer(({ app, face }: { app: HomeSt; face: JumpFace | undefined }) => {
+    if (face != null && 'place' in face) return <span className="pface"><Icon d={ICON[face.place]} /></span>
+    const p = face == null ? null : app.projects.list.find((x) => x.name === face.repo) ?? null
+    return <span className="pface">{p == null ? null : <Face p={p} px={16} />}</span>
+})
+
+export const Palette = observer(({ app }: { app: HomeSt }) => {
+    const p = app.palette
+    if (!p.open) return null
+    return (
+        <div className="palov" onClick={() => p.close()}>
+            <div className="pal" onClick={(e) => e.stopPropagation()}>
+                <input autoFocus placeholder="jump to…" value={p.query}
+                    onChange={(e) => p.setQuery(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'ArrowDown') { e.preventDefault(); p.move(1) }
+                        else if (e.key === 'ArrowUp') { e.preventDefault(); p.move(-1) }
+                        else if (e.key === 'Enter') p.run()
+                        else if (e.key === 'Escape') p.close()
+                    }} />
+                <div className="prows">
+                    {p.results.map((jp, n) => (
+                        <div key={jp.id} className={`prow${n === p.idx ? ' on' : ''}`}
+                            onMouseEnter={() => p.setIdx(n)}
+                            onClick={() => p.run(jp)}>
+                            <PalFace app={app} face={jp.face} />
+                            <span className="plabel">{jp.label}</span>
+                            <span className="pchip">{jp.section}</span>
+                            {jp.key == null ? null : <kbd className="pjkey">{jp.key}</kbd>}
+                        </div>
+                    ))}
+                    {p.results.length === 0 ? <div className="prow none">no match</div> : null}
+                </div>
+            </div>
+        </div>
+    )
+})