rvlib-shipkit 1.5.0 → 1.6.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

@@ -181,7 +181,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')
     }

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 */
@@ -156,8 +152,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)))
@@ -225,19 +226,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 +235,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/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'
@@ -93,7 +93,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 +195,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 +240,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()

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/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' }
@@ -28,6 +30,8 @@ export function pageKey(e: KeyLike): PageKey | null {
 export const PLACE_KEY = { overview: '⌘K', planned: "⌘'", activity: '⌘L' } as const
 /** the picker's shortcut, on the first button, before home */
 export const PICKER_KEY = '⌘J'
+/** the 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/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)}