rvlib-shipkit 1.5.0 → 1.7.0

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

@@ -89,6 +89,9 @@ aside > .tscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3
    The chevron column is the tree's own, so a section's rows line up under it */
 .tsec{display:grid;grid-template-columns:14px 16px minmax(0,1fr) auto auto;align-items:center;gap:var(--s2);height:26px;padding:0 var(--s1) 0 var(--s2);color:var(--dim);font-size:13px;cursor:pointer;white-space:nowrap}
 .tsec:hover{background:var(--panel2);color:var(--ink)}
+.tsec.empty{opacity:.4}
+.tsec.noop{cursor:default}
+.tsec.noop:hover{background:none;color:var(--dim)}
 .tsec.on{box-shadow:inset 2px 0 0 var(--accent)}
 .tsec.cur{background:var(--sel);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
 .tsec .hico{width:16px;height:16px}
@@ -631,19 +634,21 @@ a.tok{color:var(--accent)}
  padding:var(--s1) var(--s2);font-size:12.5px;outline:none}
 .wform input:focus{border-color:var(--accent)}
 
-/* ── collection view (one card per instance) ── */
-.colgrid{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s4)}
-.cghead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
+/* ── a collection's page: its title and count, then its table ── */
+.cghead{font-size:15px;font-weight:600;color:var(--ink);
  display:flex;gap:var(--s2);align-items:baseline;margin:0 0 var(--s3)}
 .ctlead{font-size:11px;color:var(--dim);margin:calc(-1 * var(--s1)) 0 var(--s2)}
-.cghead .cnt{font-size:11px;color:var(--dim);letter-spacing:0;text-transform:none}
-/* the checks and asks pages: one dense table each (col-tables-view.tsx), on
+.cghead .cnt{font-size:12px;font-weight:400;color:var(--dim)}
+/* the checks, asks and secrets pages: one dense table each (col-tables-view.tsx), on
    the activity table (.actable), a group header per state that folds */
 .ctpage{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s4);font-size:12.5px;container-type:inline-size}
+/* the table sits on the panel surface, the way every card section does, so
+   its lines read against something lighter than the page */
+.ctbox{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:var(--s1) 0}
 .cttable{font-variant-numeric:tabular-nums}
 .cttable td{padding:var(--s0) var(--s2);vertical-align:baseline}
-.ctgrp td{padding:var(--s2) var(--s2) var(--s1);color:var(--dim);font-size:11.5px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
-.ctgrp:hover td{color:var(--ink)}
+.ctgrp td{padding:var(--s2) var(--s2) var(--s1);color:var(--ink);font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
+.ctgrp:hover td{color:var(--accent)}
 .ctgrp.g-fail td{color:var(--red)}
 .ctgrp.g-warn td{color:var(--warn)}
 .ctcaret{display:inline-block;width:14px}
@@ -656,17 +661,8 @@ a.tok{color:var(--accent)}
 .ctbudget,.ctplan,.ctblocks{color:var(--dim)}
 .ctprobe{font-size:11.5px}
 .cttable .c-dot{width:22px}.cttable .c-id{width:140px}.cttable .c-title{width:16%}.cttable .c-age{width:72px}.cttable .c-dur{width:152px}.cttable .c-plan{width:88px}
-.cttable .c-kind{width:92px}.cttable .c-blocks{width:32%}.cttable .c-probe{width:84px}
+.cttable .c-name{width:30%}.cttable .c-file{width:34%}.cttable .c-kind{width:92px}.cttable .c-blocks{width:32%}.cttable .c-probe{width:84px}
 @container (max-width:760px){.cttable .c-title{width:0}.cttable .cttitle{display:none}.cttable .c-plan{width:0}.cttable .ctplan{display:none}}
-.cgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}
-.cgcard{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:var(--s2) var(--s3);cursor:pointer;min-width:0}
-.cgcard:hover{border-color:var(--accent)}
-.cgcard .cgtop{display:flex;gap:var(--s2);align-items:center;min-width:0}
-.cgcard .cgtop b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cgcard .truth{display:block;font:11px ui-monospace,Menlo,monospace;color:var(--dim);margin-top:var(--s1);
- white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cgcard .cgrem{color:var(--ok);border-left:2px solid var(--ok);padding-left:var(--s2);font-size:12px;margin-top:var(--s1);
- white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 
 /* ── graph item view (the graph itself fills the stage) ── */
 .graphview{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
@@ -709,13 +705,10 @@ a.tok{color:var(--accent)}
  overflow-x:auto;font:11px/1.5 ui-monospace,Menlo,monospace;white-space:pre}
 .md pre code{background:none;border:0;padding:0}
 .md a{color:var(--accent)}
-.md.clamp{max-height:180px;overflow:hidden;margin-top:var(--s1);
- -webkit-mask-image:linear-gradient(var(--solid) 65%,transparent);mask-image:linear-gradient(var(--solid) 65%,transparent)}
 
 /* ── secret (cred) cards ── */
 .credname{font:600 13px ui-monospace,Menlo,monospace}
 .creddesc{font-size:12px;color:var(--dim);margin-top:var(--s1)}
-.credrow{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2)}
 .stchip{font-size:10px;border-radius:5px;padding:var(--s0) var(--s2);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;flex:none;font-weight:600}
 .stchip.ok{color:var(--ok);border-color:var(--ok)}
@@ -759,6 +752,17 @@ pre{background:var(--panel);border:1px solid var(--line);border-radius:3px;paddi
 .adctl{flex:none;display:flex;align-items:center}
 .adflag{display:inline-flex;align-items:center;gap:var(--s1);font-size:12px;color:var(--dim)}
 .adflag input{width:auto;margin:0}
+.adid{display:flex;align-items:flex-start;gap:var(--s4)}
+.adicon{flex:none;width:128px;display:flex;flex-direction:column;gap:var(--s1);font-size:12px}
+.adicon img{display:block;width:128px;height:128px}
+.adicon img[hidden]{display:none}
+.adpick{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s1);font-size:12px;cursor:pointer}
+.colcard .adpick input{flex:none;min-width:0;width:28px;height:28px;padding:0;margin:0;border:1px solid var(--line);border-radius:4px;background:none;cursor:pointer}
+.adpick input::-webkit-color-swatch-wrapper{padding:0}
+.adpick input::-webkit-color-swatch{border:none;border-radius:3px}
+.adsample{padding:var(--s0) var(--s2);border-radius:4px;font-weight:600;font-size:13px}
+.adsample.dark{background:var(--bg)}
+.adsample.light{background:var(--tag)}
 .adconfirm{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px}
 /* a repo's plan page: one line per planned check */
 .plntable{width:100%;border-collapse:collapse;font-size:12.5px}

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

@@ -12,6 +12,7 @@ export const ICON = {
     reflections: 'M4 3.5h12v9H9l-4 3.5v-3.5H4zM7.5 7h5M7.5 9.5h3',
     monitor: 'M3 4h14v9H3zM7 16.5h6M10 13v3.5',
     archived: 'M2.5 4h15v3.5h-15zM4 7.5V16h12V7.5M8 10.5h4',
+    insights: 'M3 16.5h14M5 16.5V11M9 16.5V5M13 16.5V8.5M17 16.5V12',
     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',

package/src/serve/hub-app/index.html

@@ -11,6 +11,7 @@
   <link rel="stylesheet" href="./planned.css" />
   <link rel="stylesheet" href="./when.css" />
   <link rel="stylesheet" href="./activity.css" />
+  <link rel="stylesheet" href="./insights.css" />
   <link rel="stylesheet" href="./readme.css" />
   <link rel="stylesheet" href="./dock.css" />
   <link rel="stylesheet" href="./controls.css" />

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

@@ -0,0 +1,111 @@
+// the insights page's state: the daemon's boxes for one scope, the tag that
+// filters which boxes show, and one query that filters every box's rows. It
+// reads once when the page shows and on the refresh button, never on a clock:
+// manifests change far slower than anyone reads them. The scope and the tag
+// are remembered per viewer.
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import { rowMatches, SCOPES, tagsOf, type InsightBox, type InsightRow, type InsightsAnswer, type Scope } from '../../home/insights-shape.ts'
+import type { HomeSt } from './home-st.ts'
+import { ownTrouble, reach } from './reach.ts'
+
+/** the rows a box shows before its "show all" */
+export const BOX_ROWS = 25
+const SCOPE_KEY = 'home:insights:scope'
+const TAG_KEY = 'home:insights:tag'
+
+function kept(key: string): string | null {
+    try {
+        return globalThis.localStorage?.getItem(key) ?? null
+    } catch {
+        return null
+    }
+}
+function keep(key: string, v: string): void {
+    try { globalThis.localStorage?.setItem(key, v) } catch { /* private window: the pick lasts the tab */ }
+}
+
+export class InsightsSt {
+    data: InsightsAnswer | null = null
+    error = ''
+    loading = false
+    scope: Scope = (SCOPES as readonly string[]).includes(kept(SCOPE_KEY) ?? '') ? (kept(SCOPE_KEY) as Scope) : 'house'
+    /** the tag whose boxes show, null for every box */
+    tag: string | null = kept(TAG_KEY) || null
+    query = ''
+    /** boxes showing every row, past BOX_ROWS */
+    full = new Set<string>()
+    /** `box/key` of each row whose uses show under it */
+    open = new Set<string>()
+    private gen = 0
+
+    constructor(private st: HomeSt) {
+        makeAutoObservable<this, 'st' | 'gen'>(this, { st: false, gen: false, data: observableRef })
+    }
+
+    get tags(): string[] {
+        return tagsOf(this.data?.boxes ?? [])
+    }
+
+    /** the boxes the tag lets through, each with the rows the query lets through */
+    get boxes(): { box: InsightBox; rows: InsightRow[] }[] {
+        return (this.data?.boxes ?? [])
+            .filter((b) => this.tag == null || !this.tags.includes(this.tag) || b.tags.includes(this.tag))
+            .map((box) => ({ box, rows: box.rows.filter((r) => rowMatches(box, r, this.query)) }))
+    }
+
+    setScope(s: Scope): void {
+        if (s === this.scope) return
+        this.scope = s
+        keep(SCOPE_KEY, s)
+        void this.load()
+    }
+
+    setTag(t: string | null): void {
+        this.tag = t
+        keep(TAG_KEY, t ?? '')
+    }
+
+    setQuery(q: string): void {
+        this.query = q
+    }
+
+    toggleFull(box: string): void {
+        if (this.full.has(box)) this.full.delete(box)
+        else this.full.add(box)
+    }
+
+    toggleRow(box: string, key: string): void {
+        const k = `${box}/${key}`
+        if (this.open.has(k)) this.open.delete(k)
+        else this.open.add(k)
+    }
+
+    openRepo(name: string): void {
+        this.st.select(name)
+    }
+
+    /** the refresh button: the daemon reads every manifest again */
+    refresh(): void {
+        if (!this.loading) void this.load(true)
+    }
+
+    async load(fresh = false): Promise<void> {
+        const id = ++this.gen
+        this.loading = true
+        try {
+            const r = await reach(`/api/home/insights.json?scope=${this.scope}${fresh ? '&fresh=1' : ''}`, { signal: AbortSignal.timeout(60_000) })
+            if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
+            const j = (await r.json()) as InsightsAnswer
+            runInAction(() => { if (id === this.gen) { this.data = j; this.error = '' } })
+        } catch (e) {
+            runInAction(() => { if (id === this.gen) this.error = ownTrouble(e, this.st.machine) })
+        } finally {
+            runInAction(() => { if (id === this.gen) this.loading = false })
+        }
+    }
+
+    /** reads when the page shows */
+    start(): void {
+        void this.load()
+    }
+}

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

@@ -0,0 +1,112 @@
+// `/insights`: boxes about every repo of a scope, each carrying tags. On top:
+// the scope (house repos or all of ~/dev), the tag row that filters the boxes,
+// one query that filters every box's rows, and the refresh. A box lists its
+// rows by how many repos use each key; a click on a row shows every use, the
+// house repos as links to their page.
+import { observer } from 'mobx-react-lite'
+import { placeWords, type InsightBox, type InsightRow, type Scope } from '../../home/insights-shape.ts'
+import type { HomeSt } from './home-st.ts'
+import { plainClick, repoPage } from './home-st.ts'
+import { BOX_ROWS } from './insights-st.ts'
+
+const SCOPE_WORDS: Record<Scope, { label: string; title: string }> = {
+    house: { label: 'house', title: 'the repos on the project list' },
+    dev: { label: '~/dev', title: 'every folder of ~/dev with a package.json or a .git, wired or not' },
+}
+
+/** the values a row shows inline before "+n" */
+const VALUES_SHOWN = 3
+
+const Row = observer(({ app, box, r }: { app: HomeSt; box: InsightBox; r: InsightRow }) => {
+    const st = app.insights
+    const open = st.open.has(`${box.id}/${r.key}`)
+    const house = new Set(app.projects.list.map((p) => p.name))
+    return (
+        <>
+            <tr className={`inrow${open ? ' open' : ''}`} onClick={() => st.toggleRow(box.id, r.key)} title={`${r.uses.length} use${r.uses.length === 1 ? '' : 's'}: click to list them`}>
+                <td className="inkey">{r.key}</td>
+                <td className="incount">{r.repos}</td>
+                <td className="invals">
+                    {r.values.slice(0, VALUES_SHOWN).map((v) => <code key={v}>{v}</code>)}
+                    {r.values.length > VALUES_SHOWN ? <span className="acdim"> +{r.values.length - VALUES_SHOWN}</span> : null}
+                </td>
+            </tr>
+            {!open ? null : r.uses.map((u, i) => (
+                <tr key={i} className="inuse">
+                    <td className="inplace">
+                        {house.has(u.repo) ? (
+                            <a href={repoPage(u.repo)} onClick={(e) => {
+                                if (!plainClick(e)) return
+                                e.preventDefault()
+                                st.openRepo(u.repo)
+                            }}>{placeWords(u)}</a>
+                        ) : placeWords(u)}
+                    </td>
+                    <td colSpan={2} className="invals"><code>{u.value}</code>{u.dev ? <span className="acdim"> dev</span> : null}</td>
+                </tr>
+            ))}
+        </>
+    )
+})
+
+const Box = observer(({ app, box, rows }: { app: HomeSt; box: InsightBox; rows: InsightRow[] }) => {
+    const st = app.insights
+    const full = st.full.has(box.id)
+    const shown = full ? rows : rows.slice(0, BOX_ROWS)
+    return (
+        <section className="inbox">
+            <h3>
+                <span>{box.title}</span>
+                {box.tags.map((t) => <button key={t} className={`intag${st.tag === t ? ' on' : ''}`} onClick={() => st.setTag(st.tag === t ? null : t)}>{t}</button>)}
+                <span className="sp" />
+                <span className="acdim">{rows.length === box.rows.length ? rows.length : `${rows.length} of ${box.rows.length}`}</span>
+            </h3>
+            <p className="acdim">{box.hint}</p>
+            {rows.length === 0 ? <p className="acdim">no {box.noun} matches</p> : (
+                <table className="intable">
+                    <colgroup><col /><col className="c-count" /><col /></colgroup>
+                    <thead><tr><th>{box.noun}</th><th>repos</th><th>values</th></tr></thead>
+                    <tbody>{shown.map((r) => <Row key={r.key} app={app} box={box} r={r} />)}</tbody>
+                </table>
+            )}
+            {rows.length > BOX_ROWS ? <button className="ghost hsm inmore" onClick={() => st.toggleFull(box.id)}>{full ? `show the first ${BOX_ROWS}` : `show all ${rows.length}`}</button> : null}
+        </section>
+    )
+})
+
+export const InsightsView = observer(({ app }: { app: HomeSt }) => {
+    const st = app.insights
+    const d = st.data
+    return (
+        <div className="hall activity insights">
+            <div className="actop">
+                <div className="acwin" role="radiogroup" aria-label="which repos">
+                    {(Object.keys(SCOPE_WORDS) as Scope[]).map((s) => (
+                        <button key={s} role="radio" aria-checked={st.scope === s} className={st.scope === s ? 'on' : ''} title={SCOPE_WORDS[s].title} onClick={() => st.setScope(s)}>{SCOPE_WORDS[s].label}</button>
+                    ))}
+                </div>
+                <div className="acwin" role="radiogroup" aria-label="which boxes">
+                    <button role="radio" aria-checked={st.tag == null} className={st.tag == null ? 'on' : ''} onClick={() => st.setTag(null)}>all</button>
+                    {st.tags.map((t) => <button key={t} role="radio" aria-checked={st.tag === t} className={st.tag === t ? 'on' : ''} onClick={() => st.setTag(t)}>{t}</button>)}
+                </div>
+                <input className="inquery" type="search" placeholder="filter: a package, a script…" aria-label="filter every box" value={st.query} onChange={(e) => st.setQuery(e.currentTarget.value)} />
+                <button type="button" className="acpill" disabled={st.loading} onClick={() => st.refresh()} title="read every package.json again now · an answer is kept 5 minutes">
+                    <span className={`acring${st.loading ? ' on' : ''}`}>↻</span>
+                </button>
+                {d == null ? <span className="acdim">reading every package.json…</span> : (
+                    <>
+                        <span className="acpill">{d.repos} repos</span>
+                        <span className="acpill">{d.files} package.json</span>
+                        <span className="acpill">read in {d.ms}ms</span>
+                    </>
+                )}
+            </div>
+            {st.error !== '' ? <div className="hnote">{st.error}</div> : null}
+            {d != null && d.errors.length > 0 ? <div className="hnote" title={d.errors.join('\n')}>{d.errors.length} package.json would not parse</div> : null}
+            <div className={`ingrid${d != null && d.scope !== st.scope ? ' stale' : ''}`}>
+                {st.boxes.map(({ box, rows }) => <Box key={box.id} app={app} box={box} rows={rows} />)}
+            </div>
+            <p className="hdim">in the console: shipkit insights</p>
+        </div>
+    )
+})

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

@@ -0,0 +1,24 @@
+/* the insights page (insights-view.tsx): the activity page's top bar, then a
+   grid of boxes. A row opens in place to list its uses. */
+.ingrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:var(--s3);align-items:start}
+.ingrid.stale{opacity:.5}
+.inbox{border:1px solid var(--line);border-radius:4px;padding:var(--s2) var(--s3);min-width:0}
+.inbox h3{display:flex;align-items:center;gap:var(--s2);margin:0;font-size:13px;font-weight:650}
+.inbox > p{margin:var(--s0) 0 var(--s2);font-size:12px}
+.intag{border:1px solid var(--line);border-radius:999px;padding:0 var(--s2);background:none;color:var(--dim);font-size:11px;font-weight:400;line-height:18px;cursor:pointer}
+.intag:hover,.intag.on{color:var(--accent);border-color:var(--accent)}
+.inquery{height:22px;min-width:200px;box-sizing:border-box;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:0 var(--s2);font:inherit;font-size:12px}
+.inquery:focus{outline:none;border-color:var(--accent)}
+.intable{width:100%;table-layout:fixed;border-collapse:collapse}
+.intable col.c-count{width:56px}
+.intable th{text-align:left;font-weight:400;color:var(--dim);font-size:11.5px;padding:var(--s0) var(--s1);border-bottom:1px solid var(--line)}
+.intable td{padding:0 var(--s1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
+.inrow{cursor:pointer}
+.inrow:hover td,.inrow.open td{background:var(--panel2)}
+.inkey{font-weight:600}
+.incount{font-variant-numeric:tabular-nums;text-align:right;padding-right:var(--s3) !important}
+.invals code{margin-right:var(--s1);font-size:11.5px;color:var(--dim)}
+.inuse td{font-size:12px}
+.inuse .inplace{padding-left:var(--s3)}
+.inuse .inplace a{color:var(--accent);text-decoration:none}
+.inmore{margin-top:var(--s1)}

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

@@ -1,12 +1,12 @@
 // the page's command keys, read the same on every layout: ⌘1 to ⌘9 select the
-// nth repo of the project list, then the home row under the right hand: ⌘J
+// nth repo of the project list, ⌘↑ and ⌘↓ the repo above or below, 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: 'activity' } | { t: 'picker' } | { t: 'dock' }
+export type PageKey = { t: 'repo'; n: number } | { t: 'step'; by: -1 | 1 } | { t: 'home' } | { t: 'planned' } | { t: 'activity' } | { t: 'picker' } | { t: 'dock' }
 
 type KeyLike = { key: string; code: string; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }
 
@@ -15,6 +15,8 @@ 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.key === 'ArrowUp') return { t: 'step', by: -1 }
+    if (e.key === 'ArrowDown') return { t: 'step', by: 1 }
     if (e.code === 'Quote' || e.key === "'") return { t: 'planned' }
     const k = e.key.toLowerCase()
     if (k === 'j') return { t: 'picker' }
@@ -25,9 +27,11 @@ export function pageKey(e: KeyLike): PageKey | null {
 }
 
 /** the shortcut each place of the home carries on its button */
-export const PLACE_KEY = { overview: '⌘K', planned: "⌘'", activity: '⌘L' } as const
+export const PLACE_KEY: Record<'overview' | 'planned' | 'activity', string> & Partial<Record<string, string>> = { overview: '⌘K', planned: "⌘'", activity: '⌘L' }
 /** the picker's shortcut, on the first button, before home */
 export const PICKER_KEY = '⌘J'
+/** the repo above and below, hinted at the project list's foot */
+export const STEP_KEYS = ['⌘↑', '⌘↓'] as const
 /** the dock's shortcut, on the dock's own header */
 export const DOCK_KEY = '⌘B'
 
@@ -35,6 +39,10 @@ export const DOCK_KEY = '⌘B'
  *  badge at the input's right prints this */
 export const SEARCH_KEY = '/'
 
+/** in the filter, up and down walk the tree rows the filter keeps; left
+ *  and right stay the text caret's */
+export const isTreeWalk = (key: string): boolean => key === 'ArrowUp' || key === 'ArrowDown'
+
 export function isSearchKey(e: Pick<KeyLike, 'key' | 'metaKey' | 'ctrlKey' | 'altKey'>): boolean {
     return e.key === SEARCH_KEY && !e.metaKey && !e.ctrlKey && !e.altKey
 }

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

@@ -7,6 +7,7 @@
 // of this (HomeSt.machine is null).
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { HomeAnswer, WidgetsAnswer } from '../../home/home-routes.ts'
+import type { WidgetView } from '../../home/widgets.ts'
 import type { WorkerView } from '../../home/hubs.ts'
 import type { OpenHow, ResourceView } from '../../home/resources.ts'
 import type { PmAnswer, Role } from '../../home/pm.ts'
@@ -51,6 +52,8 @@ export class MachineSt {
     pm: PmAnswer | null = null
     /** every house repo's widgets, as the daemon last rendered them */
     widgets: WidgetsAnswer | null = null
+    /** `repo/id` of each widget a refresh is rendering */
+    refreshing = new Set<string>()
     /** why pm did not answer the last poll, or '' while it does */
     pmDown = ''
     /** the last action that failed */
@@ -261,6 +264,26 @@ export class MachineSt {
         }
     }
 
+    /** one widget rendered now by the daemon, with force (its cache or
+     *  backoff skipped), its new view swapped in */
+    async refreshWidget(repo: string, id: string): Promise<void> {
+        const k = `${repo}/${id}`
+        if (this.refreshing.has(k)) return
+        this.refreshing.add(k)
+        try {
+            const r = await reach('/api/home/widgets/refresh', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ repo, id }) })
+            if (!r.ok) throw new Error(await r.text())
+            const v = (await r.json()) as WidgetView
+            runInAction(() => {
+                if (this.widgets != null) this.widgets = { ...this.widgets, widgets: this.widgets.widgets.map((w) => (w.repo === repo && w.id === id ? v : w)) }
+            })
+        } catch (e) {
+            runInAction(() => { this.error = ownTrouble(e, this) })
+        } finally {
+            runInAction(() => { this.refreshing.delete(k) })
+        }
+    }
+
     hub(name: string, act: 'ensure' | 'restart'): Promise<boolean> {
         return this.post('/api/home/hub', { name, act })
     }

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

@@ -1,5 +1,5 @@
 // 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
+// home's places (home, activity, planned, insights, archived) 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+j away.
@@ -27,6 +27,7 @@ export class PaletteSt {
             { 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:insights', label: 'insights', section: 'place', face: { place: 'insights' }, run: () => st.navigate('/insights') },
             { id: 'place:archived', label: 'archived', section: 'place', face: { place: 'archived' }, run: () => st.navigate('/archived') },
         ]
     }

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

@@ -1,22 +1,24 @@
-// The processes page of a repo: one card per global process it declares,
-// each the process menu's two panels (actions, then its description as
-// markdown) and its log under them. pm runs them, so the page reads the
-// machine, never the hub. The card a tree row opened is scrolled to and lit.
+// The processes page of a repo: the overview's process table, this repo's
+// lines alone, never a card per process. The process a tree row opened gets
+// its description and its log under the table. pm runs them, so the page
+// reads the machine, never the hub.
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef } from 'react'
-import { Log, ProcessMenu } from './home-strip.tsx'
+import { Log, ProcessMenu, ProcessTable } from './home-strip.tsx'
 import type { RepoSt } from './repo-st.ts'
 import type { ProcessRow } from '../../home/process-rows.ts'
 
 const noop = (): void => {}
 
-const ProcessCard = observer(({ app, r, lit }: { app: RepoSt; r: ProcessRow; lit: boolean }) => {
+/** the opened process: its menu (actions, then its description) and its log */
+const ProcessDetail = observer(({ app, r }: { app: RepoSt; r: ProcessRow }) => {
     const el = useRef<HTMLElement>(null)
-    useEffect(() => { if (lit) el.current?.scrollIntoView({ block: 'nearest' }) }, [lit])
+    useEffect(() => { el.current?.scrollIntoView({ block: 'nearest' }) }, [r.id])
     const m = app.home.machine
     if (m == null) return null
     return (
-        <section ref={el} className={`csec pcard${lit ? ' lit' : ''}`} id={`process-${r.id}`}>
+        <section ref={el} className="csec pdetail" id={`process-${r.id}`}>
+            <div className="cstitle">{r.label}</div>
             <ProcessMenu m={m} r={r} close={noop} lastLog={r.tail.length === 0} />
             {r.tail.length === 0 ? null : <><div className="cstitle">log</div><Log lines={r.tail} /></>}
         </section>
@@ -25,6 +27,8 @@ const ProcessCard = observer(({ app, r, lit }: { app: RepoSt; r: ProcessRow; lit
 
 export const ProcessesPage = observer(({ app, id }: { app: RepoSt; id: string | null }) => {
     const rows = app.globalProcesses
+    const m = app.home.machine
+    const lit = rows.find((r) => r.id === id) ?? null
     return (
         <div className="colcard checkcard">
             <div className="chead">
@@ -32,7 +36,10 @@ export const ProcessesPage = observer(({ app, id }: { app: RepoSt; id: string |
                 <h3 className="ctitle">{app.name}</h3>
             </div>
             <div className="usays">the processes this repo declares in its <code>.shipkit.ts</code> files. pm runs them, so they run whether or not the hub answers</div>
-            {rows.length === 0 ? <div className="dim">this repo declares no global process</div> : rows.map((r) => <ProcessCard key={r.id} app={app} r={r} lit={r.id === id} />)}
+            {rows.length === 0 || m == null
+                ? <div className="dim">this repo declares no global process</div>
+                : <section className="csec"><ProcessTable app={app.home} m={m} repo={app.key} /></section>}
+            {lit == null ? null : <ProcessDetail app={app} r={lit} />}
         </div>
     )
 })

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

@@ -21,11 +21,14 @@
 .pjarow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .pjarow img{flex:none;border-radius:3px;object-fit:contain}
 .pjaini{flex:none;width:14px;height:14px;border-radius:3px;background:var(--panel2)}
-/* the foot's two buttons: sort names the order the list is in, archived
+/* the foot: sort (its title names the order), the step keys hint, archived
    carries its count and stays lit while its rows show */
 .pgsort,.pjarbtn{flex:none;display:inline-flex;align-items:center;gap:var(--s1);height:22px;padding:0 var(--s1);background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--dim);font-size:11px;cursor:pointer}
 .pgsort{flex:0 1 auto;min-width:0}
+/* the step keys, a hint: the repo above or below */
+.pjstep{flex:none;display:inline-flex;gap:var(--s0);margin-left:auto;color:var(--dim);font-size:11px}
+.pjstep kbd{padding:0 var(--s1);border:1px solid var(--line);border-radius:3px;font:inherit}
 .pgsortl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .pgsort .hico,.pjarbtn .hico{flex:none;width:14px;height:14px}
 .pgsort:hover,.pjarbtn:hover{color:var(--ink);border-color:var(--accent)}

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

@@ -24,7 +24,7 @@ import { useEffect, type CSSProperties } from 'react'
 import { middleware, OPEN_MS } from './floating.tsx'
 import { Icon, ICON } from './icons.tsx'
 import { plainClick } from './home-st.ts'
-import { PICKER_KEY, PLACE_KEY } from './keys.ts'
+import { PICKER_KEY, PLACE_KEY, STEP_KEYS } from './keys.ts'
 import { cardModel, faceOf, hueOf, SORTS, type Place, type Project, type ProjectsSvc } from './projects-svc.ts'
 
 /** what the list needs of its page: the hub and the home both carry one */
@@ -37,6 +37,7 @@ const PLACES: { id: Place | 'picker'; label: string; title: string }[] = [
     { id: 'overview', label: 'overview', title: 'the overview: shipkit, every global process and every repo on this machine' },
     { id: 'activity', label: 'activity', title: 'what every repo committed lately, what it holds uncommitted, its branch and whether it is pushed' },
     { id: 'planned', label: 'planned', title: 'every check the machine runs on its own: now, next, late, and why' },
+    { id: 'insights', label: 'insights', title: 'boxes about every repo: the packages they use and by how many, version drift, script names' },
 ]
 
 /** the icon's size on a row, in px, as attributes and in the sheet */
@@ -165,10 +166,10 @@ export const ProjectList = observer(({ app }: { app: ListHost }) => {
                         const on = id === 'picker' ? s.pickerOpen() : s.place === id
                         const key = id === 'picker' ? PICKER_KEY : PLACE_KEY[id]
                         return (
-                            <button key={id} className={`pjpl${on ? ' cur' : ''}`} aria-label={pl.label} title={`${pl.title} (${key})`} onClick={run}>
+                            <button key={id} className={`pjpl${on ? ' cur' : ''}`} aria-label={pl.label} title={key == null ? pl.title : `${pl.title} (${key})`} onClick={run}>
                                 <Icon d={ICON[id === 'picker' ? 'search' : id === 'overview' ? 'home' : id]} />
                                 <span className="pjname">{pl.label}</span>
-                                <kbd className="pjkey">{key}</kbd>
+                                {key == null ? null : <kbd className="pjkey">{key}</kbd>}
                             </button>
                         )
                     })}
@@ -195,6 +196,9 @@ export const ProjectList = observer(({ app }: { app: ListHost }) => {
             ) : null}
             <div className="pjfoot">
                 <SortButton s={s} />
+                <span className="pjstep" title={`${STEP_KEYS[0]} and ${STEP_KEYS[1]} open the repo above or below, from any page`}>
+                    {STEP_KEYS.map((k) => <kbd key={k}>{k}</kbd>)}
+                </span>
                 {s.archived.length === 0 || s.onArchived == null ? null : (
                     <button className={`pjarbtn${s.archivedOpen ? ' on' : ''}`} aria-pressed={s.archivedOpen}
                         title={`${s.archivedOpen ? 'hide' : 'show'} the ${s.archived.length} archived repos: nothing runs there, a row opens the archived page`}
@@ -213,7 +217,7 @@ const orderWords = (s: ProjectsSvc): string => {
     return m === 'manual' ? 'manual order' : SORTS.find((x) => x.id === m)!.label
 }
 
-/** the sort button: it names the order the list is in and opens the menu,
+/** the sort button: its title names the order the list is in, it opens the menu,
  *  and sorts nothing itself */
 const SortButton = observer(({ s }: { s: ProjectsSvc }) => {
     const f = useFloating({
@@ -231,7 +235,7 @@ const SortButton = observer(({ s }: { s: ProjectsSvc }) => {
         <>
             <button ref={f.refs.setReference} className="pgsort" title={`the list is in ${orderWords(s)}: pick a sort`}
                 {...getReferenceProps({ onClick: () => s.toggleSortMenu() })}>
-                <Icon d={ICON.sort} /><span className="pgsortl">{orderWords(s)}</span>
+                <Icon d={ICON.sort} /><span className="pgsortl">sort</span>
             </button>
             {s.sortMenuOpen ? (
                 <FloatingPortal>

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

@@ -178,7 +178,7 @@ export function cardModel(p: Project, now: number): CardModel {
 }
 
 /** a page of the home that is no repo's */
-export type Place = 'overview' | 'planned' | 'activity'
+export type Place = 'overview' | 'planned' | 'activity' | 'insights'
 
 export class ProjectsSvc {
     /** the last list this browser saw until the first poll answers, so the
@@ -277,6 +277,16 @@ export class ProjectsSvc {
     }
 
 
+    /** the repo above (-1) or below (+1) the selected one, round the ends;
+     *  with none selected, down starts at the top and up at the bottom */
+    step(by: -1 | 1): void {
+        const n = this.list.length
+        if (n === 0) return
+        const at = this.list.findIndex((p) => this.isCurrent(p))
+        const next = at === -1 ? (by === 1 ? 0 : n - 1) : (at + by + n) % n
+        this.select(this.list[next]!.name)
+    }
+
     /** a click selects once it is sure no second click follows */
     click(name: string): void {
         this.select(name)