rvlib-shipkit 1.5.0 → 1.7.0

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

@@ -1,17 +1,50 @@
 // A repo's admin page, as state: what administers the repo rather than works
-// in it. Archive asks first (the confirmation is this state, so it survives a
+// in it. Its identity colours, with the app icon they give it. Archive asks first (the confirmation is this state, so it survives a
 // re-render and a test drives it headless), reload and keep active go to the
 // machine by the repo's key. On a hub of its own there is no machine, and no
 // admin page.
-import { makeAutoObservable } from 'mobx'
+import { makeAutoObservable, runInAction } from 'mobx'
+import type { Identity } from '../../core/identity-color.ts'
 import type { RepoSt } from './repo-st.ts'
 
+/** how long a picker rests before the preview draws its colours */
+export const PREVIEW_REST_MS = 150
+
 export class AdminSvc {
     /** the archive button was pressed: its confirmation shows in its place */
     confirming = false
+    /** the colours the preview keeps while a picker moves, so a drag draws a
+     *  few icons, not one per frame; null follows the repo's colours */
+    held: Identity | null = null
+    /** the repo has no png mark, or it would not draw: the app wears the default icon */
+    noIcon = false
+    private rest: ReturnType<typeof setTimeout> | null = null
 
     constructor(private st: RepoSt) {
-        makeAutoObservable<this, 'st'>(this, { st: false })
+        makeAutoObservable<this, 'st' | 'rest'>(this, { st: false, rest: false })
+    }
+
+    /** by key: the project list and the icon route know a repo by its
+     *  folder, and its config can name it otherwise */
+    get identity(): Identity {
+        return this.st.home.projects.identityOf(this.st.key)
+    }
+    /** one colour, shown at once and saved to repo.config.ts once it rests */
+    setColour(patch: Partial<Identity>): void {
+        this.held ??= this.identity
+        this.st.home.projects.setIdentity(this.st.key, patch)
+        if (this.rest != null) clearTimeout(this.rest)
+        this.rest = setTimeout(() => runInAction(() => { this.held = null }), PREVIEW_REST_MS)
+    }
+    get previewSrc(): string {
+        const id = this.held ?? this.identity
+        return `/api/projects/app-icon/${encodeURIComponent(this.st.key)}?light=${encodeURIComponent(id.colorLight)}&dark=${encodeURIComponent(id.colorDark)}`
+    }
+    previewFailed(): void {
+        this.noIcon = true
+    }
+    previewLoaded(): void {
+        this.noIcon = false
     }
 
     askArchive(): void {

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

@@ -1,5 +1,6 @@
 // THE ADMIN PAGE of a repo (`#page:admin`): what administers the repo rather
-// than works in it, one row per control, each with the one sentence that says
+// than works in it. Its identity first (the colours, and the app icon they
+// draw, core/app-icon.ts), then one row per control, each with the one sentence that says
 // what it does. State in admin-svc.ts. Only on the home: a hub of its own has
 // no machine to administer it.
 import { observer } from 'mobx-react-lite'
@@ -16,6 +17,36 @@ const Row = ({ title, says, children }: { title: string; says: string; children:
     </div>
 )
 
+/** the repo's two colours, and what they look like: its app icon and its name on both pages */
+const IdentityBox = observer(({ app }: { app: RepoSt }) => {
+    const a = app.admin
+    const id = a.identity
+    const name = app.name
+    return (
+        <div className="adbox adid">
+            <div className="adicon">
+                <img src={a.previewSrc} alt={`${name} app icon`} width={128} height={128} hidden={a.noIcon}
+                    onLoad={() => a.previewLoaded()} onError={() => a.previewFailed()} />
+                {a.noIcon ? <span className="dim">no png mark (.shipkit/identity/icon.png, public/logo.png or public/favicon.png): its app wears the default icon</span> : null}
+            </div>
+            <div className="adtext">
+                <b>identity</b>
+                <span className="dim">the repo's two colours, written to repo.config.ts as identity. The app icon sets the mark on the one it stands out on most, and each app redraws it at its next open.</span>
+                <label className="adpick">
+                    <input type="color" value={id.colorDark} onChange={(e) => a.setColour({ colorDark: e.currentTarget.value })} />
+                    <span className="adsample dark" style={{ color: id.colorDark }}>{name}</span>
+                    <span className="dim">on a dark page, colorDark {id.colorDark}</span>
+                </label>
+                <label className="adpick">
+                    <input type="color" value={id.colorLight} onChange={(e) => a.setColour({ colorLight: e.currentTarget.value })} />
+                    <span className="adsample light" style={{ color: id.colorLight }}>{name}</span>
+                    <span className="dim">on a light page, colorLight {id.colorLight}</span>
+                </label>
+            </div>
+        </div>
+    )
+})
+
 export const AdminPage = observer(({ app }: { app: RepoSt }) => {
     const a = app.admin
     const w = app.home.machine?.worker(app.key)
@@ -26,6 +57,7 @@ export const AdminPage = observer(({ app }: { app: RepoSt }) => {
                 <span className="tid">admin</span>
                 <h3 className="ctitle">{name}</h3>
             </div>
+            <IdentityBox app={app} />
             <div className="adbox">
                 <Row title="reload the hub" says={`stops ${name}'s hub in the daemon and loads it again, its repo.config.ts read fresh and its processes started again. The daemon already does it on its own when repo.config.ts changes: this is for a hub that is stuck.${w == null ? '' : ` Its hub is ${w.status} now.`}`}>
                     <button className="ghost" onClick={() => void a.reload()}>reload</button>

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

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

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

@@ -8,7 +8,7 @@
 import { observer } from 'mobx-react-lite'
 import type { ReactNode } from 'react'
 import { checkName } from './check-words.ts'
-import { askGroups, checkGroups, dayMs, findingLine, planWord, type TableGroup } from './col-tables.ts'
+import { askGroups, checkGroups, itemGroups, secretGroups, dayMs, findingLine, planWord, type TableGroup } from './col-tables.ts'
 import { durationTone, fmtMs } from './dur.ts'
 import type { CheckOwner } from './hash-route.ts'
 import type { Resource } from './hub-types.ts'
@@ -25,10 +25,12 @@ const Page = ({ title, n, lead, cols, empty, children }: { title: string; n: num
         <div className="cghead">{title}<span className="cnt">{n}</span></div>
         {lead == null || lead === '' ? null : <div className="ctlead">{lead}</div>}
         {n === 0 ? <div className="ph">{empty}</div> : (
-            <table className="actable cttable">
-                <colgroup>{cols}</colgroup>
-                {children}
-            </table>
+            <div className="ctbox">
+                <table className="actable cttable">
+                    <colgroup>{cols}</colgroup>
+                    {children}
+                </table>
+            </div>
         )}
     </div>
 )
@@ -129,3 +131,67 @@ export const AskTable = observer(({ app, id }: { app: RepoSt; id: string }) => {
         </Page>
     )
 })
+
+const SECRET_TONE: Record<string, string> = { missing: 't-red', minor: 'acdim', present: 't-ok' }
+
+/** a secret's sentence without its own name in front, which the name column says */
+const secretSentence = (r: Resource): string => (r.text.startsWith(r.title) ? r.text.slice(r.title.length).replace(/^[\s,]+/, '') : r.text)
+
+const SecretRow = observer(({ app, r }: { app: RepoSt; r: Resource }) => {
+    const slot = r.slot ?? 'present'
+    const tone = SECRET_TONE[slot] ?? ''
+    return (
+        <tr className={`ctrow s-${slot}`} data-k={r.id} onClick={() => app.cols.select(r.collection, r.id)} title={r.text}>
+            <td className={`ctdot ${tone}`}>{slot === 'minor' ? '○' : '●'}</td>
+            <td className="ctid">{r.title}</td>
+            <td className={`ctkind ${tone}`}>{slot}</td>
+            <td className="ctfind">{secretSentence(r)}</td>
+        </tr>
+    )
+})
+
+/** the secrets page: one line per credential, never a card */
+export const SecretTable = observer(({ app, id }: { app: RepoSt; id: string }) => {
+    const col = app.cols.sidebarCols.find((x) => x.id === id)
+    if (col == null) return <div className="stagewrap"><div className="ph">collection vanished — the truth moved on</div></div>
+    const items = app.cols.visibleInstances(col)
+    const cols = (
+        <>
+            <col className="c-dot" /><col className="c-name" /><col className="c-kind" /><col />
+        </>
+    )
+    return (
+        <Page title={col.title} n={items.length} cols={cols} empty={emptyWords(app)}>
+            {secretGroups(items).map((g) => <Group key={g.key} app={app} col={col.id} g={g} span={4} row={(r) => <SecretRow key={r.id} app={app} r={r} />} />)}
+        </Page>
+    )
+})
+
+const ITEM_TONE: Record<string, string> = { red: 't-red', warn: 't-warn', ok: 't-ok', idle: '', quiet: 'acdim' }
+
+const ItemRow = observer(({ app, r }: { app: RepoSt; r: Resource }) => (
+    <tr className={`ctrow s-${r.state}`} data-k={r.id} onClick={() => app.cols.select(r.collection, r.id)} title={r.file ?? r.text}>
+        <td className={`ctdot ${ITEM_TONE[r.state] ?? ''}`}>●</td>
+        <td className={`cttext ${ITEM_TONE[r.state] ?? ''}`}>{r.text}</td>
+        <td className="ctkind">{r.slot ?? ''}</td>
+        <td className="ctfind">{r.file ?? ''}</td>
+    </tr>
+))
+
+/** every collection without a table of its own: one line per item, never a
+ *  card. What it says in full is its own page, one click away */
+export const ItemTable = observer(({ app, id }: { app: RepoSt; id: string }) => {
+    const col = app.cols.sidebarCols.find((x) => x.id === id)
+    if (col == null) return <div className="stagewrap"><div className="ph">collection vanished — the truth moved on</div></div>
+    const items = app.cols.visibleInstances(col)
+    const cols = (
+        <>
+            <col className="c-dot" /><col /><col className="c-kind" /><col className="c-file" />
+        </>
+    )
+    return (
+        <Page title={col.title} n={items.length} cols={cols} empty={emptyWords(app)}>
+            {itemGroups(items).map((g) => <Group key={g.key} app={app} col={col.id} g={g} span={4} row={(r) => <ItemRow key={r.id} app={app} r={r} />} />)}
+        </Page>
+    )
+})

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

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

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

@@ -18,6 +18,7 @@ import { DockSt } from './dock-st.ts'
 import { PaletteSt } from './palette-st.ts'
 import { PlannedSt } from './planned-st.ts'
 import { ActivitySt } from './activity-st.ts'
+import { InsightsSt } from './insights-st.ts'
 import { ProjectsSvc } from './projects-svc.ts'
 import { parseFilter, RepoSt } from './repo-st.ts'
 import { openSection, repoSections, sectionOfRepo } from './repo-sections.ts'
@@ -25,11 +26,11 @@ import { openSection, repoSections, sectionOfRepo } from './repo-sections.ts'
 /** the longest one repo's read ahead holds the next one back */
 export const PREFETCH_WAIT_MS = 10_000
 
-/** what the page shows: the machine overview, the plan, the activity, or one repo */
-export type Page = 'overview' | 'planned' | 'activity' | 'archived' | 'repo'
+/** what the page shows: the machine overview, the plan, the activity, the insights, the archived repos, or one repo */
+export type Page = 'overview' | 'planned' | 'activity' | 'insights' | 'archived' | 'repo'
 
 /** the address of each page of the home that is no repo's */
-export const PLACE_PATH = { overview: '/', planned: '/planned', activity: '/activity', archived: '/archived' } as const
+export const PLACE_PATH = { overview: '/', planned: '/planned', activity: '/activity', insights: '/insights', archived: '/archived' } as const
 
 /** where a repo's hub answers on the home */
 export const repoBase = (name: string): string => `/r/${encodeURIComponent(name)}`
@@ -46,6 +47,7 @@ export function routeOf(pathname: string): { page: Page; repo: string | null } {
     if (m != null) return { page: 'repo', repo: decodeURIComponent(m[1]!) }
     if (/^\/planned\/?$/.test(pathname)) return { page: 'planned', repo: null }
     if (/^\/activity\/?$/.test(pathname)) return { page: 'activity', repo: null }
+    if (/^\/insights\/?$/.test(pathname)) return { page: 'insights', repo: null }
     if (/^\/archived\/?$/.test(pathname)) return { page: 'archived', repo: null }
     return { page: 'overview', repo: null }
 }
@@ -69,6 +71,7 @@ export class HomeSt {
     planned: PlannedSt
     /** what every repo committed and holds, polled while it is the page */
     activity: ActivitySt
+    insights: InsightsSt
     /** the one picker, cmd+j */
     palette: PaletteSt
     /** the widths of the project list and a repo's sidebar */
@@ -91,12 +94,13 @@ export class HomeSt {
         this.projects = new ProjectsSvc()
         this.planned = new PlannedSt(this)
         this.activity = new ActivitySt(this)
+        this.insights = new InsightsSt(this)
         this.palette = new PaletteSt(this)
         this.layout = new LayoutSt()
         this.dock = new DockSt(this)
         this.machine = o.home ? new MachineSt(this, o) : null
         this.page = o.home ? 'overview' : 'repo'
-        makeAutoObservable<this, 'disposers' | 'onUrl' | 'prefetching'>(this, { machine: false, projects: false, planned: false, activity: false, palette: false, layout: false, dock: false, repos: observableShallow, disposers: false, onUrl: false, prefetching: false })
+        makeAutoObservable<this, 'disposers' | 'onUrl' | 'prefetching'>(this, { machine: false, projects: false, planned: false, activity: false, insights: false, palette: false, layout: false, dock: false, repos: observableShallow, disposers: false, onUrl: false, prefetching: false })
         const m = this.machine
         if (m != null) {
             this.projects.onSelect = (name) => this.select(name)
@@ -129,6 +133,7 @@ export class HomeSt {
         if (this.page === 'overview') return 'home'
         if (this.page === 'planned') return 'planned'
         if (this.page === 'activity') return 'activity'
+        if (this.page === 'insights') return 'insights'
         if (this.page === 'archived') return 'archived'
         const r = this.shown
         return r == null || r.name === '' ? 'hub' : `${r.name} · hub`
@@ -181,7 +186,7 @@ export class HomeSt {
         const want = from == null || from === to ? null : sectionOfRepo(from)
         if (want != null && sectionOfRepo(to) !== want) {
             const known = to.cols.loaded || to.cols.cached
-            openSection(to, known && !repoSections(to).some((s) => s.id === want) ? 'readme' : want)
+            openSection(to, known && !repoSections(to).some((s) => s.id === want && s.opens) ? 'readme' : want)
         }
         this.show('repo', name, 'push')
     }
@@ -222,6 +227,7 @@ export class HomeSt {
      *  everything; the one shown resumes once its hub answers */
     private show(page: Page, repo: string | null, how: 'push' | 'replace' | 'none'): void {
         const prev = this.shown
+        const prevPage = this.page
         const next = page === 'repo' && repo != null ? this.repo(repo) : null
         // the page already shown is never a second history entry
         if (how === 'push' && page === this.page && next === prev && page !== 'planned') how = 'none'
@@ -234,12 +240,13 @@ export class HomeSt {
         this.projects.away = next == null
         this.projects.place = page === 'repo' || page === 'archived' ? null : page
         if (how !== 'none') {
-            const to = next != null ? `${repoPage(next.key)}${next.search}${next.hash}` : page === 'planned' ? this.planned.address : page === 'activity' || page === 'archived' ? PLACE_PATH[page] : '/'
+            const to = next != null ? `${repoPage(next.key)}${next.search}${next.hash}` : page === 'planned' ? this.planned.address : page === 'activity' || page === 'insights' || page === 'archived' ? PLACE_PATH[page] : '/'
             if (how === 'push') history.pushState(null, '', to)
             else history.replaceState(null, '', to)
         }
         if (page === 'planned') this.planned.start()
         else this.planned.stop()
+        if (page === 'insights' && prevPage !== 'insights') this.insights.start()
         if (page === 'activity') this.activity.start()
         else this.activity.stop()
         if (next != null && next !== prev && this.machine?.data != null) void this.machine.hub(next.key, 'ensure')

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

@@ -6,10 +6,6 @@
 .hrepo{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;flex:0 1 auto}
 .hrepo img,.hrico{flex:none;width:18px;height:18px;border-radius:4px;object-fit:contain}
 .hrname{font-size:13px;font-weight:650;letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis}
-.hswatch{display:inline-flex;gap:2px}
-.hswatch input{width:16px;height:16px;padding:0;border:1px solid var(--line);border-radius:3px;background:none;cursor:pointer}
-.hswatch input::-webkit-color-swatch-wrapper{padding:0}
-.hswatch input::-webkit-color-swatch{border:none;border-radius:2px}
 /* trouble, as cards (float-cards.tsx), never taking room, so one coming or
    going moves nothing: at the top right, in a zero height box right after
    the bar, so just under it whatever its height. The words wrap, never cut */
@@ -61,6 +57,8 @@
 .hwidget{flex:0 1 auto;max-width:100%;padding:var(--s0) var(--s2);border:1px solid var(--line);border-radius:3px;font-size:12px;line-height:1.4;overflow:auto}
 .hwidget h3{margin:0;font-size:12px;font-weight:650;white-space:nowrap}
 .hwidget h3 .hdim{font-weight:400}
+.hwidget h3 .hwre{width:16px;height:16px;margin-left:var(--s1)}
+.hwidget h3 .hwre .hico{width:12px;height:12px}
 /* meters in two columns: <table class="wmeters">, label · bar · value, twice a row */
 .wmeters td{padding-right:var(--s1)}
 .wmeters td:nth-child(3n){padding-right:var(--s3)}
@@ -156,8 +154,8 @@
 .wbar.hi > i{background:var(--red)}
 
 /* a process card on the processes page: the menu's two panels at page width */
-.pcard .hmacts{max-width:none}
-.pcard .hmabout{max-width:none;max-height:none}
-.pcard>.cstitle{margin:var(--s3) 0 var(--s1)}
-.pcard .hlog{margin-top:0}
-.pcard.lit{border-color:var(--accent)}
+.pdetail .hmacts{max-width:none}
+.pdetail .hmabout{max-width:none;max-height:none}
+.pdetail>.cstitle{margin:var(--s3) 0 var(--s1)}
+.pdetail>.cstitle:first-child{margin-top:0}
+.pdetail .hlog{margin-top:0}

package/src/serve/hub-app/home-strip.tsx

@@ -157,9 +157,10 @@ const ProcessRepo = observer(({ app, name, icon }: { app: HomeSt; name: string;
 /** the processes as one table in the activity page's style: shipkit's own
  *  first, then a row group per declaring repo in the project list's order,
  *  its name in the first column, at the top of its group, then one line per
- *  process. The url's header carries the new window button */
-const ProcessTable = observer(({ app, m }: { app: HomeSt; m: MachineSt }) => {
-    const groups = m.processGroups
+ *  process. The url's header carries the new window button. `repo` keeps
+ *  that one repo's group, the table of its processes page */
+export const ProcessTable = observer(({ app, m, repo }: { app: HomeSt; m: MachineSt; repo?: string }) => {
+    const groups = repo == null ? m.processGroups : m.processGroups.filter((g) => g.core !== true && g.repo === repo)
     const rows = groups.flatMap((g) => g.rows)
     // wide enough for the longest set of declared actions, in the button font
     const act = Math.max(0, ...rows.map((r) => r.actions.reduce((n, a) => n + a.label.length + 3, 0)))
@@ -210,6 +211,10 @@ const Monitor = observer(({ m }: { m: MachineSt }) => {
                                 {x.title}
                                 {head == null ? null : <span className="hdim"> · <span dangerouslySetInnerHTML={{ __html: head }} /></span>}
                                 {x.error != null && x.html != null ? <i className="gpwarn" title={x.error} /> : null}
+                                <button className="gpi hwre" aria-label="refresh" disabled={m.refreshing.has(`${x.repo}/${x.id}`)} onClick={() => void m.refreshWidget(x.repo, x.id)}
+                                    title="render it again now, skipping any wait it keeps between samples">
+                                    {m.refreshing.has(`${x.repo}/${x.id}`) ? <span className="spin" /> : <Icon d={ICON.restart} />}
+                                </button>
                             </h3>
                             {x.html != null ? <div dangerouslySetInnerHTML={{ __html: body }} />
                                 : x.error != null ? <div className="hwerr">{x.error}</div>
@@ -225,19 +230,6 @@ const Monitor = observer(({ m }: { m: MachineSt }) => {
     )
 })
 
-/** the two colours of a repo, a picker each: the page draws the dark one */
-export const IdentitySwatches = observer(({ app, name }: { app: HomeSt; name: string }) => {
-    const id = app.projects.identityOf(name)
-    return (
-        <span className="hswatch">
-            <input type="color" aria-label="colour on a dark background" title={`${name} on a dark background (this page): ${id.colorDark}, written to repo.config.ts identity.colorDark`}
-                value={id.colorDark} onChange={(e) => app.projects.setIdentity(name, { colorDark: e.currentTarget.value })} />
-            <input type="color" aria-label="colour on a light background" title={`${name} on a light background: ${id.colorLight}, written to repo.config.ts identity.colorLight`}
-                value={id.colorLight} onChange={(e) => app.projects.setIdentity(name, { colorLight: e.currentTarget.value })} />
-        </span>
-    )
-})
-
 /** the shown repo in the strip: its icon, its name in its colour */
 const ShownRepo = observer(({ app, name }: { app: HomeSt; name: string }) => {
     const p = app.projects.list.find((x) => x.name === name)
@@ -247,7 +239,6 @@ const ShownRepo = observer(({ app, name }: { app: HomeSt; name: string }) => {
             {/* the icon's box is there before the project list is, so the name never moves */}
             {p?.icon != null ? <img src={p.icon} alt="" width={18} height={18} /> : <i className="hrico" />}
             <b className="hrname" style={{ color: id.colorDark }}>{name}</b>
-            <IdentitySwatches app={app} name={name} />
         </span>
     )
 })

package/src/serve/hub-app/home.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/hub-app.tsx

@@ -11,8 +11,8 @@ import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { StrictMode, useEffect, useLayoutEffect, useRef } from 'react'
 import { createRoot } from 'react-dom/client'
-import { ColCard, ColGrid, StatusCard } from './col-card.tsx'
-import { AskTable, CheckTable } from './col-tables-view.tsx'
+import { ColCard, StatusCard } from './col-card.tsx'
+import { AskTable, CheckTable, ItemTable, SecretTable } from './col-tables-view.tsx'
 import { WIKIS, WikisView } from './wikis-view.tsx'
 import { ComfyOverlay, ComfyView } from './comfy-view.tsx'
 import type { Filter, RepoSt } from './repo-st.ts'
@@ -37,6 +37,7 @@ import { LIST, SIDEBAR } from './layout-st.ts'
 import { ArchivedView, HomeStrip, NotUp, Overview } from './home-strip.tsx'
 import { PlannedView } from './planned-view.tsx'
 import { ActivityView } from './activity-view.tsx'
+import { InsightsView } from './insights-view.tsx'
 import { Palette } from './palette-view.tsx'
 import { SCREEN_WAIT_MS } from './screen-cache.ts'
 import { isSearchKey, pageKey, sectionKey } from './keys.ts'
@@ -93,7 +94,7 @@ const Main = observer(({ app }: { app: RepoSt }) => {
     if (app.sel?.t === 'col') return (
         <main>
             {errs}
-            {app.sel.id === 'checks' ? <CheckTable app={app} id={app.sel.id} /> : app.sel.id === 'asks' ? <AskTable app={app} id={app.sel.id} /> : <ColGrid app={app} id={app.sel.id} />}
+            {app.sel.id === 'checks' ? <CheckTable app={app} id={app.sel.id} /> : app.sel.id === 'asks' ? <AskTable app={app} id={app.sel.id} /> : app.sel.id === 'creds' ? <SecretTable app={app} id={app.sel.id} /> : <ItemTable app={app} id={app.sel.id} />}
         </main>
     )
     if (app.sel?.t === 'tests') return <main>{errs}<div className="stagewrap"><TestsPage app={app} check={app.sel.check} /></div></main>
@@ -195,13 +196,18 @@ const RepoView = observer(({ app }: { app: RepoSt }) => {
 function onKey(e: KeyboardEvent): void {
     // the command keys beat the focus check: they work from anywhere, any page
     const pk = pageKey(e)
-    if (pk != null) {
+    // in a text field ⌘↑ and ⌘↓ keep moving the caret to its ends
+    const typing = (e.target as HTMLElement).tagName === 'INPUT' || (e.target as HTMLElement).tagName === 'TEXTAREA'
+    if (pk != null && !(pk.t === 'step' && typing)) {
         e.preventDefault()
         if (pk.t === 'picker') home.palette.toggle()
         else if (pk.t === 'dock') home.dock.cycle()
         else if (pk.t === 'home' || pk.t === 'planned' || pk.t === 'activity') {
             home.palette.close()
             if (home.machine != null) home.navigate(PLACE_PATH[pk.t === 'home' ? 'overview' : pk.t])
+        } else if (pk.t === 'step') {
+            home.palette.close()
+            home.projects.step(pk.by)
         } else {
             const p = home.projects.list[pk.n - 1]
             home.palette.close()
@@ -235,6 +241,15 @@ function onKey(e: KeyboardEvent): void {
         return
     }
     if (e.metaKey || e.ctrlKey || e.altKey) return
+    // the tree's keys need no focus: the arrows move it from anywhere on the
+    // page, Enter and space only where no button or link claims them
+    // the atelier's ←/→ roll, so at its first or last roll they stop there
+    const rolls = app.sel?.t === 'asset' && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')
+    const own = !rolls && (e.key.startsWith('Arrow') || t.closest('button, a, select, [role="button"]') == null)
+    if (own && app.tree.key(e.key)) {
+        e.preventDefault()
+        return
+    }
     if (e.key === FOLLOW_KEY && (!app.live.chart.follow || !home.dock.chart.follow)) {
         e.preventDefault()
         app.live.chart.attach()
@@ -306,6 +321,7 @@ const App = observer(() => {
                             {home.page === 'overview' ? <Overview app={home} /> : null}
                             {home.page === 'planned' ? <PlannedView app={home} /> : null}
                             {home.page === 'activity' ? <ActivityView app={home} /> : null}
+                            {home.page === 'insights' ? <InsightsView app={home} /> : null}
                             {home.page === 'archived' ? <ArchivedView app={home} /> : null}
                             {home.visited.map((r) => <RepoView key={r.key} app={r} />)}
                         </Panel>