rvlib-shipkit 2.1.1 → 2.3.0

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

@@ -7,7 +7,7 @@
 // (sidebar.tsx), coloured by state in the label itself, under one filter
 // input and one severity filter persisted at
 // ?f=needs · ?f=red. A row opens its item view, an asset row opens the atelier.
-import { runInAction } from 'mobx'
+import { reaction, runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { StrictMode, useEffect, useLayoutEffect, useRef } from 'react'
 import { createRoot } from 'react-dom/client'
@@ -17,6 +17,7 @@ import { WIKIS, WikisView } from './wikis-view.tsx'
 import { ComfyOverlay, ComfyView } from './comfy-view.tsx'
 import type { Filter, RepoSt } from './repo-st.ts'
 import { HomeSt, PLACE_PATH } from './home-st.ts'
+import { hashFor } from './hash-route.ts'
 import { TimelineView } from './timeline-view.tsx'
 import { HeaderBar, notUp } from './header-bar.tsx'
 import { FOLLOW_KEY } from './timeline-chart.tsx'
@@ -31,6 +32,8 @@ import { WhenPage } from './when-view.tsx'
 import { GitPage } from './git-view.tsx'
 import { AdminPage } from './admin-view.tsx'
 import { ReadmeView } from './readme-view.tsx'
+import { ReviewPage } from './review/review-page.tsx'
+import { TrailerPage } from './review/trailer-page.tsx'
 import { ProjectList } from './project-list.tsx'
 import { Group, Panel, Separator, usePanelRef, type Layout } from 'react-resizable-panels'
 import { LIST, SIDEBAR } from './layout-st.ts'
@@ -46,8 +49,11 @@ import { Dock } from './dock-view.tsx'
 import { DOCK } from './dock-st.ts'
 import { animateDock } from './dock-anim.ts'
 
-// home.html marks the home's page; index.html is a hub serving on its own
-const home = new HomeSt({ home: document.body.dataset.home != null })
+// home.html marks the home's page; index.html is a hub serving on its own; `<base>/embed/?page=review` is one repo's
+// review or trailer page alone, for another tool's frame (embed.ts), its base read from where it sits
+const embedAt = /^(.*)\/embed\/?$/.exec(location.pathname)
+const embed: 'review' | 'trailer' | null = embedAt == null ? null : new URLSearchParams(location.search).get('page') === 'trailer' ? 'trailer' : 'review'
+const home = new HomeSt(embedAt == null ? { home: document.body.dataset.home != null } : { home: false, base: embedAt[1] ?? '' })
 // the root as a global — app code, console debugging (build/app-state-tree)
 ;(window as unknown as { app: HomeSt }).app = home
 home.boot()
@@ -97,6 +103,8 @@ const Main = observer(({ app }: { app: RepoSt }) => {
             {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 === 'review') return <main>{errs}<ReviewPage app={app} /></main>
+    if (app.sel?.t === 'trailer') return <main>{errs}<TrailerPage app={app} /></main>
     if (app.sel?.t === 'tests') return <main>{errs}<div className="stagewrap"><TestsPage app={app} check={app.sel.check} /></div></main>
     if (app.sel?.t === 'admin') return <main>{errs}<div className="stagewrap"><AdminPage app={app} /></div></main>
     if (app.sel?.t === 'plan') return <main>{errs}<div className="stagewrap"><PlanPage app={app} /></div></main>
@@ -165,7 +173,7 @@ const Body = observer(({ app }: { app: RepoSt }) => {
                 <Sidebar app={app} />
             </Panel>
             <Separator className="rsep" />
-            <Panel id="main" minSize={320} className="pmain" style={PANEL}>
+            <Panel id="main" minSize={320} className="pmain" style={PANEL} onPointerDownCapture={() => app.tree.leave()}>
                 <Main app={app} />
             </Panel>
         </Group>
@@ -194,6 +202,13 @@ const RepoView = observer(({ app }: { app: RepoSt }) => {
 
 /** the keys of the page: they act on the repo shown, and on nothing else */
 function onKey(e: KeyboardEvent): void {
+    // the embed page has its page's own keys and nothing else
+    if (embed != null) {
+        const app = home.shown
+        const t = e.target as HTMLElement
+        if (app != null && t.tagName !== 'TEXTAREA' && t.tagName !== 'INPUT' && !e.metaKey && !e.ctrlKey && !e.altKey && app.pageKey(e)) e.preventDefault()
+        return
+    }
     // the command keys beat the focus check: they work from anywhere, any page
     const pk = pageKey(e)
     // in a text field ⌘↑ and ⌘↓ keep moving the caret to its ends
@@ -202,7 +217,8 @@ function onKey(e: KeyboardEvent): void {
         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') {
+        else if (pk.t === 'rail') home.layout.toggleRail()
+        else if (pk.t === 'home' || pk.t === 'planned' || pk.t === 'activity' || pk.t === 'insights') {
             home.palette.close()
             if (home.machine != null) home.navigate(PLACE_PATH[pk.t === 'home' ? 'overview' : pk.t])
         } else if (pk.t === 'step') {
@@ -226,6 +242,12 @@ function onKey(e: KeyboardEvent): void {
         e.preventDefault()
         return
     }
+    // so do the review and trailer pages (RepoSt.pageKey)
+    const plain = !e.metaKey && !e.ctrlKey && !e.altKey
+    if (plain && app.pageKey(e)) {
+        e.preventDefault()
+        return
+    }
     const sk = sectionKey(e)
     if (sk != null) {
         const s = repoSections(app).find((x) => x.id === sk)
@@ -280,6 +302,21 @@ const App = observer(() => {
     const el = useRef<HTMLDivElement | null>(null)
     const vel = useRef<HTMLDivElement | null>(null)
     const dockRef = usePanelRef()
+    const listRef = usePanelRef()
+    // ⌘B folds the list to its rail and back; a drag that already did it finds it there
+    const rail = l.listRail
+    const railW = l.railPx
+    useLayoutEffect(() => {
+        const p = listRef.current
+        if (p == null) return
+        if (p.isCollapsed() !== rail) {
+            if (rail) p.collapse()
+            else {
+                p.expand()
+                p.resize(l.listWidth)
+            }
+        } else if (rail && Math.abs(p.getSize().inPixels - railW) >= 1) p.resize(railW)
+    }, [rail, railW, listRef, l])
     // the dock's size moves the boundary, and only the boundary: its first
     // height is the panel's default, read before the first render. After the
     // render, so the panel already holds the bounds of its new size, and
@@ -309,10 +346,15 @@ const App = observer(() => {
                     <Group className="app" orientation="horizontal" elementRef={el}
                         onLayoutChanged={(layout, meta) => {
                             if (!meta.isUserInteraction) return
+                            // a drag below the list's min folds it to its rail, a drag out unfolds it
+                            const folded = listRef.current?.isCollapsed() === true
+                            l.setRail(folded)
+                            if (folded) return
                             const px = leftPx(el.current, layout, 'projects')
                             if (px != null) l.setListWidth(px)
                         }}>
-                        <Panel id="projects" defaultSize={l.listWidth} minSize={LIST.min} maxSize={LIST.max} groupResizeBehavior="preserve-pixel-size" className="pjpanel" style={PANEL}>
+                        <Panel id="projects" panelRef={listRef} defaultSize={rail ? railW : l.listWidth} minSize={LIST.min} maxSize={LIST.max} collapsible collapsedSize={railW}
+                            groupResizeBehavior="preserve-pixel-size" className="pjpanel" style={PANEL}>
                             <ProjectList app={home} />
                         </Panel>
                         <Separator className="rsep" />
@@ -337,12 +379,39 @@ const App = observer(() => {
     )
 })
 
+/** the embed page: the one page, no tree, no list, no dock. Its address and the frame's host follow each other: every
+ *  page move is posted to the parent, and the parent's `{ shipkit: 'go', hash }` moves the page; both only on this origin */
+const EmbedApp = observer(({ page }: { page: 'review' | 'trailer' }) => {
+    const app = home.shown
+    useEffect(() => {
+        document.addEventListener('keydown', onKey)
+        const onMessage = (e: MessageEvent): void => {
+            const m = e.data as { shipkit?: unknown; hash?: unknown } | null
+            if (e.source !== window.parent || e.origin !== location.origin || m?.shipkit !== 'go' || typeof m.hash !== 'string') return
+            location.hash = m.hash.replace(/^#?/, '#')
+        }
+        window.addEventListener('message', onMessage)
+        return () => {
+            document.removeEventListener('keydown', onKey)
+            window.removeEventListener('message', onMessage)
+        }
+    }, [])
+    useEffect(() => {
+        if (app == null) return
+        if (app.sel?.t !== page) app.go(page === 'review' ? { t: 'review', id: null } : { t: 'trailer', trailer: null, cut: null })
+        if (window.parent === window) return
+        return reaction(
+            () => (app.sel == null ? '' : (hashFor(app.sel) ?? '')),
+            (hash) => window.parent.postMessage({ shipkit: 'route', page, hash: `#${hash}` }, location.origin),
+            { fireImmediately: true },
+        )
+    }, [app, page])
+    if (app == null) return null
+    return <main className="embed" style={{ position: 'fixed', inset: 0 }}>{page === 'review' ? <ReviewPage app={app} /> : <TrailerPage app={app} />}</main>
+})
+
 // the shown repo's kept screen is read before the first paint, so a refresh
 // paints it at once; a slow or absent store costs at most SCREEN_WAIT_MS
 await Promise.race([home.shown?.cols.restore(), new Promise((ok) => setTimeout(ok, SCREEN_WAIT_MS))])
 
-createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-        <App />
-    </StrictMode>,
-)
+createRoot(document.getElementById('root')!).render(<StrictMode>{embed == null ? <App /> : <EmbedApp page={embed} />}</StrictMode>)

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

@@ -6,8 +6,8 @@
    that does. */
 :root{--bg:#0d0e10;--panel:#141619;
  /* the surfaces of the regions, each a small step from the page so the rail,
-    the header and the dock read apart at a glance (no light theme: the page
-    is dark only, and colorDark is what it draws) */
+    the header and the dock read apart at a glance; the light values are the
+    next block) */
  --bg-side:#131519;--bg-top:#171a1f;--bg-dock:#10151b;--panel2:#1b1e22;--line:#282c31;--ink:#e2e4e7;--dim:#8d9299;
  --accent:#6b8fb3;--sel:#1a2430;--chk1:#16181b;--chk2:#121417;
  /* state, and nothing else: red broken · orange taste pending · green measured passing */
@@ -18,6 +18,8 @@
  --ground:#1b2521;--groundline:#2a3630;--tag:#eef2f6;
  /* the KIND hues: a row's type, never its state (tree-build TYPE_MARK) */
  --k1:#8ca8c7;--k2:#a892c9;--k3:#6fb0b8;--k4:#c792b4;--k5:#9198a1;--k6:#8f95cf;
+ /* the review section's own hue: the one row of the tree meant to be seen first */
+ --review:#e879d4;
  --wash:rgba(107,143,179,.15);--wash2:rgba(107,143,179,.11);--hair:rgba(107,143,179,.5);
  --errbg:#2a1a1a;--errline:#4a2c2c;--errink:#e3bebe;
  /* a running thing's wash, the green twin of errbg and errline */
@@ -25,6 +27,26 @@
  /* the ONE spacing scale: every padding, margin and gap in this sheet is a
     value from it or 0, and tests/hub-css-invariants.test.ts fails the rest */
  --s0:2px;--s1:4px;--s2:8px;--s3:12px;--s4:16px}
+/* THE LIGHT TOKENS: the same names, read on a light page (theme-st.ts sets
+   <html data-theme>). Every token of the block above has its light value
+   here, and tests/hub-css-invariants.test.ts fails a missing one */
+:root[data-theme=light]{--bg:#f6f7f9;--panel:#ffffff;
+ --bg-side:#eef0f3;--bg-top:#f2f4f7;--bg-dock:#eceff3;--panel2:#e9ecf0;--line:#d6dbe1;--ink:#1c2026;--dim:#5d646d;
+ --accent:#3b6896;--sel:#dbe6f2;--chk1:#e9ecf0;--chk2:#f7f8fa;
+ --red:#c03f3a;--warn:#b0700f;--ok:#2d8754;--blue:#2b69b0;
+ --scrim:rgba(20,24,30,.35);--shadow:rgba(20,24,30,.16);--solid:#000;
+ --hi1:rgba(0,0,0,.2);--hi2:rgba(0,0,0,.11);--hi3:rgba(0,0,0,.045);
+ --ground:#e3ede6;--groundline:#c6d6cb;--tag:#eef2f6;
+ --k1:#3f6690;--k2:#7055a3;--k3:#2b7c86;--k4:#a34e80;--k5:#5d646d;--k6:#4f56a8;
+ --review:#c0279d;
+ --wash:rgba(59,104,150,.12);--wash2:rgba(59,104,150,.08);--hair:rgba(59,104,150,.45);
+ --errbg:#fbe9e8;--errline:#efc4c2;--errink:#8a2520;
+ --okbg:#e6f3eb;--okline:#9ccdaf}
+/* a repo's own colour, the one fit for the theme (projects-svc idVars) */
+.idc{color:var(--idd)}
+:root[data-theme=light] .idc{color:var(--idl)}
+.idb{background:var(--idd)}
+:root[data-theme=light] .idb{background:var(--idl)}
 *{box-sizing:border-box}html,body,#root{height:100%}
 body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans-serif;overflow:hidden}
 /* a link with no class of its own: the browser default is dark blue on this dark page */
@@ -43,7 +65,9 @@ a,a:visited{color:var(--accent)}
 .repo{flex:1;min-height:0;display:flex;flex-direction:column}
 .repo[hidden]{display:none}
 .appbody{flex:1;min-height:0}
-.pside{display:flex;flex-direction:column}
+.pside{display:flex;flex-direction:column;container-type:inline-size}
+/* a narrow sidebar keeps the names: the key hints and the filter's letters go first */
+@container (max-width:200px){.tsec .pjkey,.ssearch .seg .sk{display:none}.ssearch{padding:var(--s2)}}
 .pside > aside{flex:1}
 .pmain{display:flex;flex-direction:column}
 .pmain > main{flex:1}
@@ -101,14 +125,21 @@ aside > .tscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3
 .rsecn.nred{background:var(--red)}
 .rsecn.nwarn{background:var(--warn)}
 .tsec:hover .pjkey,.tsec.cur .pjkey{opacity:1}
-/* segmented severity filter — all · needs · red. A thin border and an
-   underline on the live one: no fill, no pill */
-.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;flex:none}
-.seg button{background:transparent;color:var(--dim);border:0;border-bottom:1px solid transparent;border-radius:0;
- padding:var(--s0) var(--s2);font-size:11px;font-weight:500;text-transform:lowercase;letter-spacing:0;cursor:pointer}
+/* review: its own hue on the icon, the label and the mark, empty or not, so the eye finds it */
+.tsec.s-review,.tsec.s-review:hover,.tsec.s-review.cur{color:var(--review)}
+.tsec.s-review.empty{opacity:.75}
+.tsec.s-review.cur{box-shadow:inset 3px 0 0 var(--review)}
+.tsec.s-review .rsecn.nwarn{background:var(--review)}
+/* THE SELECT SHAPE: every pick on the page, a native select or a segmented
+   bar of exclusive buttons (.seg), is one 22px pill with a 1px line border;
+   the live segment is the accent on the selection wash. Nothing else
+   draws a select: a new one takes .seg or a plain select */
+.seg{display:inline-flex;align-items:stretch;height:22px;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
+.seg button{display:inline-flex;align-items:center;background:transparent;color:var(--dim);border:0;border-radius:0;
+ padding:0 var(--s2);font-size:12px;font-weight:500;line-height:1;text-transform:lowercase;letter-spacing:0;cursor:pointer}
 .seg button+button{border-left:1px solid var(--line)}
-.seg button:hover{color:var(--ink)}
-.seg button.on{color:var(--accent);border-bottom-color:var(--accent)}
+.seg button:hover{color:var(--ink);background:var(--panel2)}
+.seg button.on{color:var(--accent);background:var(--sel)}
 .seg button .sk{margin-left:var(--s1);font-size:9px;opacity:.55}
 /* a narrow pane puts the severity filter under the input, never over it */
 .ssearch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
@@ -201,7 +232,6 @@ textarea{width:100%;min-height:64px;background:var(--bg);color:var(--ink);border
 .toolbar button{padding:var(--s1) var(--s3);font-size:12px}
 .toolbar .sp{flex:1}
 .toolbar .xn{display:flex;gap:var(--s0);align-items:center;font-size:12px;color:var(--dim)}
-.toolbar .xn select{padding:var(--s1);font-size:12px}
 /* BUTTONS: small, flat, one pixel border on the panel colour, a 12px
    lowercase label. The accent is a border and an ink colour on the primary
    action, never a fill, and nothing here is a big rounded rectangle */
@@ -212,7 +242,9 @@ button.primary{color:var(--accent);border-color:var(--accent)}
 button.ghost{color:var(--dim)}
 button.ghost:hover{color:var(--ink)}
 button:disabled{opacity:.4;cursor:default;border-color:var(--line);color:var(--dim)}
-select,input[type=number]{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:var(--s2)}
+select{height:22px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:0 var(--s2);font-size:12px;cursor:pointer}
+select:hover:not(:disabled){border-color:var(--accent)}
+input[type=number]{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:var(--s2)}
 .status{font-size:12px;color:var(--dim);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;flex:none}
 @keyframes rot{to{transform:rotate(360deg)}}
 @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@@ -343,7 +375,7 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 /* panel content inherits the hub's chunky default button — inside a card
    everything is DENSE, repo panel scripts get this for free */
 .fbody button{padding:var(--s0) var(--s2);font-size:11.5px;font-weight:600;border-radius:3px}
-.fbody input:not([type=color]),.fbody select{padding:var(--s0) var(--s1);font-size:11.5px}
+.fbody input:not([type=color]){padding:var(--s0) var(--s1);font-size:11.5px}
 .fbody label{font-size:11.5px}
 .fbody .jsonta{width:100%;min-height:160px}
 .vbar{flex:none;border-left:1px solid var(--line);background:var(--panel);display:flex;min-height:0;position:relative}

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

@@ -28,8 +28,11 @@ export const ICON = {
     secrets: 'M7 7a3 3 0 1 0 0 6a3 3 0 1 0 0-6M10 10h7.5M15 10v2.5M17.5 10v2',
     runs: 'M3 5h8M3 10h12M3 15h6',
     asks: 'M3 4h14v9H8l-4 3.5V13H3z',
+    // pkm-multi's rail marks: rate_review, a bubble with a pen, and movie, a clapper
+    review: 'M3 3.5h14v10H7.5L3 17zM7 10.5l4.5-4.5 1.5 1.5L8.5 12H7z',
     tests: 'M8 3h4M8.5 3v5L4 16.5h12L11.5 8V3M6.2 12.5h7.6',
     media: 'M3 4h14v12H3zM3 13l4-4 4 4 2-2 4 4M13 7.5h.01',
+    trailer: 'M2.5 4.5h15v11h-15zM2.5 8.5h15M6 4.5 7.5 8.5M10 4.5l1.5 4M14 4.5l1.5 4',
     wikis: 'M10 5.5C8.5 4 6 3.5 3 4v11c3-.5 5.5 0 7 1.5c1.5-1.5 4-2 7-1.5V4c-3-.5-5.5 0-7 1.5zM10 5.5v11',
     admin: 'M4 5h12M4 10h12M4 15h12M7 3.5v3M13 8.5v3M9 13.5v3',
     health: 'M2 10h3.5l2-5 5 10 2-5H18',
@@ -37,6 +40,12 @@ export const ICON = {
     // the VS Code mark, its ribbon drawn as one outline
     vscode: 'M14 2.5l3.5 1.7v11.6L14 17.5zM14 2.5 4.5 12.3 2.5 11V9l2-1.3L14 17.5M14 6.8 10.2 10l3.8 3.2',
     sort: 'M6 3.5v13M3 13.5l3 3 3-3M14 16.5v-13M11 6.5l3-3 3 3',
+    // the theme button: a sun, a moon, and a half filled disc for the system's
+    sun: 'M10 6.5a3.5 3.5 0 1 0 .01 0M10 2v2M10 16v2M2 10h2M16 10h2M4.3 4.3l1.4 1.4M14.3 14.3l1.4 1.4M4.3 15.7l1.4-1.4M14.3 5.7l1.4-1.4',
+    moon: 'M15.5 12.5A6.5 6.5 0 0 1 7.5 4.5a6.5 6.5 0 1 0 8 8z',
+    auto: 'M10 3a7 7 0 1 0 .01 0M10 3v14M10 5.5h4M10 8.5h6M10 11.5h6M10 14.5h4',
+    // the project list's fold: a panel with its rail marked
+    rail: 'M3 4h14v12H3zM7.5 4v12',
     // a process's own switches on the overview
     play: 'M6.5 4.5v11l9-5.5z',
     stop: 'M5.5 5.5h9v9h-9z',

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

@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="./readme.css" />
   <link rel="stylesheet" href="./dock.css" />
   <link rel="stylesheet" href="./controls.css" />
+  <link rel="stylesheet" href="./review.css" />
 </head>
 <body>
   <div id="root"></div>

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

@@ -80,16 +80,17 @@ export const InsightsView = observer(({ app }: { app: HomeSt }) => {
     return (
         <div className="hall activity insights">
             <div className="actop">
-                <div className="acwin" role="radiogroup" aria-label="which repos">
+                <div className="seg" 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">
+                <div className="seg" 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)} />
+                {/* focused as the page opens (⌘; then type a package name) */}
+                <input className="inquery" type="search" autoFocus 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>

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

@@ -1,12 +1,13 @@
 // the page's command keys, read the same on every layout: ⌘1 to ⌘9 select the
 // 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
+// the picker, ⌘K the overview, ⌘L the activity, ⌘; the insights, ⌘' the plan.
+// ⌘B folds the project list to its icon rail and back (layout-st.ts), ⌘⇧B
+// cycles the dock at the bottom of the page (dock-st.ts): the line, slim, open.
+// A digit, the semicolon 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: 'step'; by: -1 | 1 } | { 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: 'insights' } | { t: 'picker' } | { t: 'dock' } | { t: 'rail' }
 
 type KeyLike = { key: string; code: string; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }
 
@@ -14,26 +15,29 @@ export function pageKey(e: KeyLike): PageKey | null {
     if (!(e.metaKey || e.ctrlKey) || e.altKey) return 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.shiftKey) return e.code === 'KeyB' || e.key.toLowerCase() === 'b' ? { t: 'dock' } : 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' }
+    if (e.code === 'Semicolon' || e.key === ';') return { t: 'insights' }
     const k = e.key.toLowerCase()
     if (k === 'j') return { t: 'picker' }
     if (k === 'k') return { t: 'home' }
     if (k === 'l') return { t: 'activity' }
-    if (k === 'b') return { t: 'dock' }
+    if (k === 'b') return { t: 'rail' }
     return null
 }
 
 /** the shortcut each place of the home carries on its button */
-export const PLACE_KEY: Record<'overview' | 'planned' | 'activity', string> & Partial<Record<string, string>> = { overview: '⌘K', planned: "⌘'", activity: '⌘L' }
+export const PLACE_KEY: Record<'overview' | 'planned' | 'activity' | 'insights', string> & Partial<Record<string, string>> = { overview: '⌘K', planned: "⌘'", activity: '⌘L', insights: '⌘;' }
 /** 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'
+export const DOCK_KEY = '⌘⇧B'
+/** the project list between its full width and its icon rail */
+export const RAIL_KEY = '⌘B'
 
 /** the tree's filter, on a repo page: a plain `/` focuses it, and its
  *  badge at the input's right prints this */
@@ -54,8 +58,8 @@ export function isSearchKey(e: Pick<KeyLike, 'key' | 'metaKey' | 'ctrlKey' | 'al
  *  plus a letter only types a character inside a text field, where the page
  *  leaves the key alone. Read from the physical key (`code`): on a Mac ⌥C
  *  types ç, and AZERTY moves the letters */
-export type SectionId = 'readme' | 'contracts' | 'shipkit' | 'repo' | 'secrets' | 'when' | 'runs' | 'plan' | 'processes' | 'git' | 'asks' | 'reflections' | 'tests' | 'media' | 'wikis' | 'admin'
-export const SECTION_LETTER: Record<SectionId, string> = { readme: 'E', contracts: 'K', shipkit: 'S', repo: 'C', secrets: 'X', when: 'O', runs: 'R', plan: 'N', processes: 'P', git: 'G', asks: 'A', reflections: 'F', tests: 'T', media: 'M', wikis: 'W', admin: 'D' }
+export type SectionId = 'readme' | 'contracts' | 'shipkit' | 'repo' | 'secrets' | 'when' | 'runs' | 'plan' | 'processes' | 'git' | 'asks' | 'review' | 'reflections' | 'tests' | 'media' | 'trailer' | 'wikis' | 'admin'
+export const SECTION_LETTER: Record<SectionId, string> = { readme: 'E', review: 'V', trailer: 'L', contracts: 'K', shipkit: 'S', repo: 'C', secrets: 'X', when: 'O', runs: 'R', plan: 'N', processes: 'P', git: 'G', asks: 'A', reflections: 'F', tests: 'T', media: 'M', wikis: 'W', admin: 'D' }
 /** a section's words on its row, where the id alone would not say it */
 export const SECTION_LABEL: Partial<Record<SectionId, string>> = { shipkit: 'shipkit checks', repo: 'repo checks' }
 export const sectionLabel = (id: SectionId): string => SECTION_LABEL[id] ?? id

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

@@ -3,7 +3,9 @@
 // its separator (react-resizable-panels) and kept per browser in px, so the
 // next load renders at that width from its first paint. A stored value that
 // is not a number, or is out of bounds, reads as the default: no runtime
-// value can hand the page a list wider than LIST.max.
+// value can hand the page a list wider than LIST.max. The list also folds to
+// its icon rail: a drag below its min or ⌘B, kept per browser too, its icons
+// small, medium or large (RAIL_ICONS), the rail as wide as they need.
 import { makeAutoObservable } from 'mobx'
 
 export type Bounds = { key: string; min: number; max: number; def: number }
@@ -11,7 +13,26 @@ export type Bounds = { key: string; min: number; max: number; def: number }
 /** the project list: icon and name on one line */
 export const LIST: Bounds = { key: 'hub:list-width', min: 140, max: 360, def: 200 }
 /** a repo's sidebar: the resource tree */
-export const SIDEBAR: Bounds = { key: 'hub:sidebar-width', min: 220, max: 640, def: 330 }
+export const SIDEBAR: Bounds = { key: 'hub:sidebar-width', min: 150, max: 640, def: 330 }
+
+/** the rail's icon sizes, in px: the foot's button cycles them */
+export const RAIL_ICONS = { s: 18, m: 24, l: 32 } as const
+export type RailIcon = keyof typeof RAIL_ICONS
+/** the rail is its icon and this much on each side */
+const RAIL_PAD = 13
+/** the project list folded: its icons only, a row's name in its hover card */
+export const railPx = (size: RailIcon): number => RAIL_ICONS[size] + 2 * RAIL_PAD
+const RAIL_KEY = 'hub:list-rail'
+const RAIL_ICON_KEY = 'hub:rail-icon'
+
+function loadRailIcon(): RailIcon {
+    try {
+        const v = globalThis.localStorage?.getItem(RAIL_ICON_KEY) ?? ''
+        return v in RAIL_ICONS ? (v as RailIcon) : 'm'
+    } catch {
+        return 'm'
+    }
+}
 
 /** a width in its bounds, or the default for anything else */
 export const clampWidth = (v: unknown, b: Bounds): number => {
@@ -33,8 +54,20 @@ function saveWidth(b: Bounds, px: number): void {
     } catch { /* private window or blocked site data: the width lasts the tab */ }
 }
 
+function loadRail(): boolean {
+    try {
+        return globalThis.localStorage?.getItem(RAIL_KEY) === '1'
+    } catch {
+        return false
+    }
+}
+
 export class LayoutSt {
     listWidth = loadWidth(LIST)
+    /** the list shows its icons only */
+    listRail = loadRail()
+    /** the rail's icon size */
+    railIcon: RailIcon = loadRailIcon()
     sidebarWidth = loadWidth(SIDEBAR)
 
     constructor() {
@@ -47,6 +80,34 @@ export class LayoutSt {
         saveWidth(LIST, this.listWidth)
     }
 
+    /** the list folded to its icons, or back at its kept width */
+    setRail(on: boolean): void {
+        if (this.listRail === on) return
+        this.listRail = on
+        try {
+            globalThis.localStorage?.setItem(RAIL_KEY, on ? '1' : '0')
+        } catch { /* private window or blocked site data: the rail lasts the tab */ }
+    }
+
+    /** the rail's width, its icon and its margins */
+    get railPx(): number {
+        return railPx(this.railIcon)
+    }
+
+    /** the rail's size button: small, medium, large, then small again */
+    cycleRailIcon(): void {
+        const all = Object.keys(RAIL_ICONS) as RailIcon[]
+        this.railIcon = all[(all.indexOf(this.railIcon) + 1) % all.length]!
+        try {
+            globalThis.localStorage?.setItem(RAIL_ICON_KEY, this.railIcon)
+        } catch { /* private window or blocked site data: the size lasts the tab */ }
+    }
+
+    /** ⌘B */
+    toggleRail(): void {
+        this.setRail(!this.listRail)
+    }
+
     /** a drag of the sidebar's separator ended at this width */
     setSidebarWidth(px: number): void {
         this.sidebarWidth = clampWidth(Math.round(px), SIDEBAR)

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

@@ -8,6 +8,7 @@
 // place, the check opens its own page in that repo.
 import { observer } from 'mobx-react-lite'
 import type { CSSProperties, MouseEvent, ReactNode } from 'react'
+import { idVars } from './projects-svc.ts'
 import type { PlanRow } from '../../plan/planner.ts'
 import { Tip } from './floating.tsx'
 import type { HomeSt } from './home-st.ts'
@@ -62,14 +63,14 @@ const Card = observer(({ app, r, now }: { app: HomeSt; r: PlanRow; now: number }
 const Row = observer(({ app, r, now }: { app: HomeSt; r: PlanRow; now: number }) => {
     const st = app.planned
     const m = markOf(r)
-    const colour = { '--pc': app.projects.identityOf(r.repo).colorDark } as CSSProperties
+    const colour = idVars(app.projects.identityOf(r.repo)) as CSSProperties
     return (
         <Tip className={`plr m-${m.mark}`} content={<Card app={app} r={r} now={now} />} tipClass="plcard" placement="right-start" fallbacks={['bottom-end', 'top-end']} interactive>
             <span className="plwhen">{whenWords(r, now)}</span>
             <span className="plwhat">
                 <InPlace className="plrepo" href={repoPage(r.repo)} go={() => st.openRepo(r.repo)}>
                     <Face app={app} repo={r.repo} />
-                    <span style={colour}>{r.repo}</span>
+                    <span className="idc" style={colour}>{r.repo}</span>
                 </InPlace>
                 <span className="pldim"> · </span>
                 <InPlace className="plcheck" href={checkAddress(r.repo, r.check)} go={() => st.openCheck(r.repo, r.check)}>{r.check}</InPlace>

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

@@ -15,7 +15,6 @@
 .m-running .plwhen{color:var(--accent)}
 .plwhat{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .plrepo,.plcheck{color:inherit;text-decoration:none}
-.plrepo span{color:var(--pc)}
 .plrepo:hover span,.plcheck:hover{text-decoration:underline}
 .plface{width:14px;height:14px;margin-right:var(--s1);vertical-align:-2px;border-radius:3px;object-fit:contain}
 .pldim{color:var(--dim)}

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

@@ -22,16 +22,16 @@
 .pjaini{flex:none;width:14px;height:14px;border-radius:3px;background:var(--panel2)}
 /* 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;
+.pgsort,.pjarbtn,.pjfold{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)}
-.pjarbtn.on{color:var(--ink);background:var(--sel);border-color:var(--accent)}
+.pgsort .hico,.pjarbtn .hico,.pjfold .hico{flex:none;width:14px;height:14px}
+.pgsort:hover,.pjarbtn:hover,.pjfold:hover{color:var(--ink);border-color:var(--accent)}
+.pjarbtn.on,.pjfold[aria-pressed=true]{color:var(--ink);background:var(--sel);border-color:var(--accent)}
 .pjarbtn span{font-variant-numeric:tabular-nums}
 /* the sort menu: over the foot, placed by floating-ui (floating.tsx) */
 .pgmenu{z-index:30;min-width:180px;padding:var(--s1) 0;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 20px var(--shadow);font-size:12px}
@@ -50,6 +50,9 @@
 .pjrow:hover,.pjpl:hover{background:var(--panel2);color:var(--ink)}
 /* the shown repo: its row lit, marked on the left in its identity colour
    (a global page's line: in the accent) */
+/* the repo's colour for the theme: colorDark, or colorLight on a light page (projects-svc idVars) */
+.pjrow{--pjc:var(--idd)}
+:root[data-theme=light] .pjrow{--pjc:var(--idl)}
 .pjrow.cur,.pjpl.cur{background:var(--sel);color:var(--pjc,var(--ink));box-shadow:inset 3px 0 0 var(--pjc,var(--accent));font-weight:600}
 .pjpl .hico{flex:none;width:18px;height:18px;color:inherit}
 /* the selected repo while a global page is up: still marked, dimmer */
@@ -119,3 +122,18 @@
 .rsep{position:relative;flex:none;width:1px;background:var(--line)}
 .rsep::before{content:'';position:absolute;top:0;bottom:0;left:-6px;right:-6px;cursor:col-resize;background:transparent;z-index:6}
 .rsep:hover,.rsep[data-separator="hover"],.rsep[data-separator="active"]{background:var(--accent)}
+/* the rail: the list folded to its icons (layout-st RAIL_PX). The names, the
+   ⌘ hints and the step hint hide, every icon centres, the badge and the dots
+   ride the icon's corner, the foot stacks its buttons */
+.pjlist.rail .pjname,.pjlist.rail .pjkey,.pjlist.rail .pjstep,.pjlist.rail .pgsortl,.pjlist.rail .pjarow span,.pjlist.rail .pgerr{display:none}
+.pjlist.rail .pjrow,.pjlist.rail .pjpl,.pjlist.rail .pjarow{justify-content:center;padding:0}
+/* the rail's icon size (layout-st RAIL_ICONS, the foot's S M L button): the repo icons and the row under them grow */
+.pjlist.rail .pjrow{height:calc(var(--ri,18px) + 10px)}
+.pjlist.rail .pjrow img,.pjlist.rail .pjrow .pgi{width:var(--ri,18px);height:var(--ri,18px)}
+.pjlist.rail .pjrow .pgi{font-size:calc(var(--ri,18px) * .55)}
+.pjsize{font:600 10px/1 ui-monospace,Menlo,monospace}
+.pjlist.rail .pga{position:absolute;top:var(--s0);left:50%;margin-left:var(--s1);min-width:14px;height:14px;padding:0 var(--s0);border-radius:7px;font-size:9px;line-height:14px}
+.pjlist.rail .pgd,.pjlist.rail .pgw{position:absolute;bottom:var(--s1);left:50%;margin-left:var(--s1)}
+.pjlist.rail .pjfoot{flex-direction:column;height:auto;padding:var(--s1) 0}
+.pjlist.rail .pjfoot button{justify-content:center;width:28px;padding:0}
+.pjlist.rail .pjarbtn span{display:none}