rvlib-shipkit 1.2.0 → 1.3.0

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 overview, ⌘K the picker, ⌘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 === '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: '⌘J', planned: "⌘'", activity: '⌘L' } as const
+/** the picker's shortcut, on the second button, after home */
+export const PICKER_KEY = '⌘K'
+/** 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

@@ -10,6 +10,8 @@ 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 { 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,21 @@ 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
+
+/** how open opens a global process's url, kept per browser */
+export const OPEN_HOW_KEY = 'hub:open-how'
+export type OpenHow = 'browser' | 'app'
+
+function loadOpenHow(): OpenHow {
+    try {
+        return globalThis.localStorage?.getItem(OPEN_HOW_KEY) === 'app' ? 'app' : 'browser'
+    } catch {
+        return 'browser'
+    }
+}
+
 type Kept = { data: HomeAnswer | null; pm: PmAnswer | null; widgets: WidgetsAnswer | null }
 
 function loadKept(): Kept | null {
@@ -48,11 +65,19 @@ 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 */
+    openHow: OpenHow = loadOpenHow()
     /** why the daemon did not answer the last poll, or '' while it does */
     down = ''
     /** 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 +88,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 +111,13 @@ 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[] {
+        return processGroups(this.pm, this.st.projects.list.map((p) => p.name), { daemonVersion: this.data?.version ?? null })
+    }
+
     resource(id: string): ResourceView | null {
         return this.pm?.resources.find((r) => r.id === id) ?? null
     }
@@ -110,10 +143,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 */
@@ -249,6 +284,34 @@ export class MachineSt {
         return this.post('/api/pm/resource', { id, act, action })
     }
 
+    /** the url of a global process, the way this browser picked (started
+     *  first when it is down) */
+    openProcess(id: string): Promise<boolean> {
+        return this.processAct(id, this.openHow === 'app' ? 'app' : 'open')
+    }
+
+    /** 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)
+    }
+
+    setOpenHow(how: OpenHow): void {
+        this.openHow = how
+        try {
+            globalThis.localStorage?.setItem(OPEN_HOW_KEY, how)
+        } catch { /* private window or blocked site data: the pick lasts the tab */ }
+    }
+
     /** restart the daemon or the web through pm */
     restartChild(id: Role): Promise<boolean> {
         return this.post('/api/pm/child', { id, act: 'restart' })

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,5 +1,5 @@
 // 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
+// home's places (home, planned, activity) 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.
@@ -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:planned', label: 'planned', section: 'place', face: { place: 'planned' }, run: () => st.navigate('/planned') },
+            { id: 'place:activity', label: 'activity', section: 'place', face: { place: 'activity' }, run: () => st.navigate('/activity') },
+            { 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,
+     *  planned and activity, 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+k (palette-st.ts): home, planned, activity 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>
+    )
+})

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

@@ -0,0 +1,65 @@
+// a row of small boxes that stays one row at any width: the ones that do not
+// fit fold into a `+N` box at its end, whose hover lists them. An invisible
+// copy of every box, out of the flow, gives their widths, so what shows is
+// decided before the paint and never wraps. Each box's hover is its title.
+import { observer, useLocalObservable } from 'mobx-react-lite'
+import { useLayoutEffect, useRef, type ReactNode } from 'react'
+import { Tip } from './floating.tsx'
+
+export type PillItem = { key: string; node: ReactNode; title: string }
+
+/** how many boxes of these widths fit in `avail`, a `+N` box of `plusW`
+ *  taking its room as soon as one does not */
+export function fitCount(widths: number[], avail: number, plusW: number, gap: number): number {
+    const all = widths.reduce((a, w) => a + w, 0) + gap * Math.max(0, widths.length - 1)
+    if (all <= avail) return widths.length
+    let used = plusW
+    for (let i = 0; i < widths.length; i++) {
+        used += widths[i]! + gap
+        if (used > avail) return i
+    }
+    return widths.length
+}
+
+const lines = (text: string): ReactNode => text.split('\n').map((l, i) => <div key={i}>{l}</div>)
+
+export const PillRow = observer(({ items, className }: { items: PillItem[]; className?: string }) => {
+    const st = useLocalObservable(() => ({ n: Number.POSITIVE_INFINITY, set(v: number) { this.n = v } }))
+    const box = useRef<HTMLDivElement | null>(null)
+    const probe = useRef<HTMLDivElement | null>(null)
+    const measure = (): void => {
+        const b = box.current
+        const p = probe.current
+        if (b == null || p == null) return
+        const kids = [...p.children] as HTMLElement[]
+        const plus = kids.pop()
+        if (plus == null) return
+        const gap = Number.parseFloat(getComputedStyle(b).columnGap) || 0
+        st.set(fitCount(kids.map((k) => k.getBoundingClientRect().width), b.clientWidth, plus.getBoundingClientRect().width, gap))
+    }
+    // after every render: the boxes' words change with the clock
+    useLayoutEffect(measure)
+    useLayoutEffect(() => {
+        const b = box.current
+        if (b == null || typeof ResizeObserver === 'undefined') return
+        const ro = new ResizeObserver(() => measure())
+        ro.observe(b)
+        return () => ro.disconnect()
+    }, [])
+    const n = Math.min(st.n, items.length)
+    const hidden = items.slice(n)
+    return (
+        <div ref={box} className={`pchips${className == null ? '' : ` ${className}`}`}>
+            {items.slice(0, n).map((it) => <Tip key={it.key} className="pchipw" content={lines(it.title)}>{it.node}</Tip>)}
+            {hidden.length === 0 ? null : (
+                <Tip className="pchipw" content={hidden.map((h) => <div key={h.key}>{lines(h.title)}</div>)}>
+                    <span className="pchip dim">+{hidden.length}</span>
+                </Tip>
+            )}
+            <div ref={probe} className="pchips pchipprobe" aria-hidden="true">
+                {items.map((it) => <span key={it.key} className="pchipw">{it.node}</span>)}
+                <span className="pchip dim">+{items.length}</span>
+            </div>
+        </div>
+    )
+})