rvlib-shipkit 2.2.0 → 2.3.0

package/src/serve/hub-app/hash-route.ts

@@ -35,18 +35,26 @@ export type HashSel =
     | { t: 'when' }
     /** the checks one owner ships: shipkit's, or the repo's own */
     | { t: 'checks'; from: CheckOwner }
+    /** the review cards, `id` the open one, null for the first the list shows */
+    | { t: 'review'; id: string | null }
+    /** a trailer's cuts, played with their notes: a trailer folder and one of its cuts, null for the first; the note
+     *  open on it, and the notes filter when it is not the page's default (all) */
+    | { t: 'trailer'; trailer: string | null; cut: string | null; note?: string | null; filter?: 'open' | 'all' | null }
 
 /** whose a gate check is */
 export type CheckOwner = 'shipkit' | 'repo'
 
 export type ParsedHash = {
-    kind: 'asset' | 'cat' | 'col' | 'item' | 'status' | 'tests' | 'admin' | 'readme' | 'processes' | 'plan' | 'git' | 'when' | 'checks' | 'none'
+    kind: 'asset' | 'cat' | 'col' | 'item' | 'status' | 'tests' | 'admin' | 'readme' | 'processes' | 'plan' | 'git' | 'when' | 'checks' | 'review' | 'trailer' | 'none'
     /** the collection, for an item. null for everything else */
     col: string | null
     id: string
     /** the media tool set, when the address carried one. An empty array is a
      *  choice (every tool off), null is no statement at all */
     tools: string[] | null
+    /** a trailer address only: the note open, the notes filter */
+    note?: string
+    filter?: 'open' | 'all'
 }
 
 const ITEM = 'item:'
@@ -62,6 +70,8 @@ const PLAN = 'page:plan'
 const GIT = 'page:git'
 const WHEN = 'page:when'
 const CHECKS = 'page:checks:'
+const REVIEW = 'page:review'
+const TRAILER = 'page:trailer'
 
 /** what this selection puts in the url. null only for no selection at all,
  *  and then the hash is left alone rather than wiped */
@@ -81,6 +91,12 @@ export function hashFor(sel: HashSel | null): string | null {
         case 'git': return GIT
         case 'when': return WHEN
         case 'checks': return `${CHECKS}${sel.from}`
+        case 'review': return sel.id == null ? REVIEW : `${REVIEW}:${sel.id}`
+        case 'trailer': {
+            // page:trailer:<trailer>/<cut>/<note>?filter=all, each part only when it says something
+            const note = sel.trailer != null && sel.note ? `/${sel.cut ?? ''}/${sel.note}` : sel.cut == null ? '' : `/${sel.cut}`
+            return `${sel.trailer == null ? TRAILER : `${TRAILER}:${sel.trailer}${note}`}${sel.filter ? `?filter=${sel.filter}` : ''}`
+        }
     }
 }
 
@@ -95,6 +111,15 @@ export function parseHash(raw: string): ParsedHash {
     if (raw === PLAN) return { kind: 'plan', col: null, id: '', tools: null }
     if (raw === GIT) return { kind: 'git', col: null, id: '', tools: null }
     if (raw === WHEN) return { kind: 'when', col: null, id: '', tools: null }
+    if (raw === REVIEW || raw.startsWith(`${REVIEW}:`)) return { kind: 'review', col: null, id: raw.slice(REVIEW.length + 1), tools: null }
+    // the trailer folder rides in `col`, its cut in `id`
+    if (raw === TRAILER || raw.startsWith(`${TRAILER}:`) || raw.startsWith(`${TRAILER}?`)) {
+        const qi = raw.indexOf('?')
+        const path = qi === -1 ? raw : raw.slice(0, qi)
+        const [trailer = '', cut = '', note = ''] = path.slice(TRAILER.length + 1).split('/')
+        const f = qi === -1 ? null : new URLSearchParams(raw.slice(qi + 1)).get('filter')
+        return { kind: 'trailer', col: trailer === '' ? null : trailer, id: cut, tools: null, ...(note ? { note } : {}), ...(f === 'open' || f === 'all' ? { filter: f } : {}) }
+    }
     if (raw === `${CHECKS}shipkit` || raw === `${CHECKS}repo`) return { kind: 'checks', col: null, id: raw.slice(CHECKS.length), tools: null }
     if (raw.startsWith(`${PROCESSES}:`)) {
         const id = raw.slice(PROCESSES.length + 1)
@@ -148,6 +173,8 @@ export function selOf(p: ParsedHash): HashSel | null {
         case 'git': return { t: 'git' }
         case 'when': return { t: 'when' }
         case 'checks': return { t: 'checks', from: p.id as CheckOwner }
+        case 'review': return { t: 'review', id: p.id === '' ? null : p.id }
+        case 'trailer': return { t: 'trailer', trailer: p.col, cut: p.id === '' ? null : p.id, ...(p.note ? { note: p.note } : {}), ...(p.filter ? { filter: p.filter } : {}) }
     }
 }
 

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

@@ -14,6 +14,8 @@ import { Icon, ICON } from './icons.tsx'
 import { Pop, Tip } from './floating.tsx'
 import { FloatCards, type Card } from './float-cards.tsx'
 import type { RepoSt } from './repo-st.ts'
+import type { CSSProperties } from 'react'
+import { idVars } from './projects-svc.ts'
 
 /** the repo's hub has not answered on the home: its reason and its fix show
  *  instead of the page. A screen this browser kept shows meanwhile, until
@@ -113,7 +115,7 @@ export const RepoTools = observer(({ app }: { app: RepoSt }) => (
 export const HeaderBar = observer(({ app }: { app: RepoSt }) => (
     <>
         <header className="hdr">
-            <span className="hname" style={app.name === '' ? undefined : { color: app.home.projects.identityOf(app.name).colorDark }}>{app.name !== '' ? app.name : 'hub'}</span>
+            <span className={app.name === '' ? 'hname' : 'hname idc'} style={app.name === '' ? undefined : (idVars(app.home.projects.identityOf(app.name)) as CSSProperties)}>{app.name !== '' ? app.name : 'hub'}</span>
             <span className="sp" />
             <RepoTools app={app} />
             <RepoRun app={app} />

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

@@ -14,6 +14,7 @@ import { makeAutoObservable, observableShallow, reaction, type IReactionDisposer
 import { currentHash, hashFor } from './hash-route.ts'
 import { MachineSt, type MachineOpts } from './machine-st.ts'
 import { LayoutSt } from './layout-st.ts'
+import { ThemeSt } from './theme-st.ts'
 import { DockSt } from './dock-st.ts'
 import { PaletteSt } from './palette-st.ts'
 import { PlannedSt } from './planned-st.ts'
@@ -60,6 +61,8 @@ export const plainClick = (e: { button: number; metaKey: boolean; ctrlKey: boole
 export type HomeOpts = MachineOpts & {
     /** true on the home's web; false on a hub serving on its own */
     home: boolean
+    /** the one repo's base, read from where the page sits: the embed page under a proxy's prefix (embed.ts) */
+    base?: string
 }
 
 export class HomeSt {
@@ -78,6 +81,8 @@ export class HomeSt {
     layout: LayoutSt
     /** the run chart docked under the whole page */
     dock: DockSt
+    /** dark, light or the system's */
+    readonly theme = new ThemeSt()
     page: Page
     /** the key of the repo picked last: its name on the home, '' for the one
      *  repo of a hub of its own. A global page keeps it (only `shown` says
@@ -90,7 +95,10 @@ export class HomeSt {
     private prefetching = false
     private readonly onUrl = (): void => this.fromUrl()
 
+    private readonly base: string | undefined
+
     constructor(o: HomeOpts) {
+        this.base = o.base
         this.projects = new ProjectsSvc()
         this.planned = new PlannedSt(this)
         this.activity = new ActivitySt(this)
@@ -100,7 +108,7 @@ export class HomeSt {
         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, insights: false, palette: false, layout: false, dock: false, repos: observableShallow, disposers: false, onUrl: false, prefetching: false })
+        makeAutoObservable<this, 'disposers' | 'onUrl' | 'prefetching' | 'base'>(this, { base: false, machine: false, projects: false, planned: false, activity: false, insights: false, palette: false, layout: false, theme: 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)
@@ -143,7 +151,7 @@ export class HomeSt {
     repo(key: string): RepoSt {
         let r = this.repos.get(key)
         if (r == null) {
-            r = new RepoSt(this, key, this.machine == null ? '' : repoBase(key))
+            r = new RepoSt(this, key, this.base ?? (this.machine == null ? '' : repoBase(key)))
             this.repos.set(key, r)
             // what this browser kept of it paints before its hub answers
             void r.cols.restore()

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

@@ -15,7 +15,8 @@
 // while its hub cannot answer, with the fix. Every link of the home is a
 // page of the same app: a plain click moves it in place.
 import { observer } from 'mobx-react-lite'
-import type { ReactNode } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
+import { idVars } from './projects-svc.ts'
 import type { OpenHow, ProcessIcon, ResourceView } from '../../home/resources.ts'
 import type { WorkerView } from '../../home/hubs.ts'
 import { NOT_INSTALLED } from '../../home/home-words.ts'
@@ -238,7 +239,7 @@ const ShownRepo = observer(({ app, name }: { app: HomeSt; name: string }) => {
         <span className="hrepo">
             {/* 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>
+            <b className="hrname idc" style={idVars(id) as CSSProperties}>{name}</b>
         </span>
     )
 })

package/src/serve/hub-app/home.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 data-home>
   <div id="root"></div>

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