rvlib-shipkit 2.2.0 → 2.4.0

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

@@ -4,7 +4,8 @@
 // then the status as small pills that fold into +N rather than wrap. The
 // state is dock-st.ts; the height is the page's panel (hub-app.tsx).
 import { observer } from 'mobx-react-lite'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type CSSProperties } from 'react'
+import { idVars } from './projects-svc.ts'
 import { Tip } from './floating.tsx'
 import { Icon, ICON } from './icons.tsx'
 import type { HomeSt } from './home-st.ts'
@@ -57,8 +58,8 @@ const GroupLabel = observer(({ app, g }: { app: HomeSt; g: PlacedGroup }) => {
     return (
         <button className="dgroup" onClick={() => app.dock.openRepo(g.key)}
             title={`${g.key}: open the repo${g.hidden > 0 ? `\n${g.hidden} check run(s) did not fit in its lanes` : ''}`}>
-            {p?.icon != null ? <img src={p.icon} alt="" width={12} height={12} draggable={false} /> : <i className="dgico" style={{ background: id.colorDark }} />}
-            <span style={{ color: id.colorDark }}>{g.key}</span>
+            {p?.icon != null ? <img src={p.icon} alt="" width={12} height={12} draggable={false} /> : <i className="dgico idb" style={idVars(id) as CSSProperties} />}
+            <span className="idc" style={idVars(id) as CSSProperties}>{g.key}</span>
             {/* slim folds its lanes on purpose: the count is news only open */}
             {g.hidden > 0 && app.dock.size === 'open' ? <b>+{g.hidden}</b> : null}
         </button>
@@ -72,7 +73,7 @@ const PillFace = observer(({ app, p }: { app: HomeSt; p: DockPill }) => {
         <span className={`pchip ${p.tone}`}>
             {p.repo == null ? null : pj?.icon != null
                 ? <img src={pj.icon} alt="" width={12} height={12} draggable={false} />
-                : <i className="dgico" style={{ background: app.projects.identityOf(p.repo).colorDark }} />}
+                : <i className="dgico idb" style={idVars(app.projects.identityOf(p.repo)) as CSSProperties} />}
             {p.mark == null ? null : <b className={`pcmark ${p.markTone ?? 'dim'}`}>{p.mark}</b>}
             <span className="pctext">{p.text}</span>
             {p.age == null ? null : <span className="pcage">{p.age}</span>}

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

@@ -35,18 +35,28 @@ 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; q?: string }
+    /** 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'
+    /** a review address only: its view and list filters, as `view=1&subject=place` */
+    q?: string
 }
 
 const ITEM = 'item:'
@@ -62,6 +72,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 +93,13 @@ export function hashFor(sel: HashSel | null): string | null {
         case 'git': return GIT
         case 'when': return WHEN
         case 'checks': return `${CHECKS}${sel.from}`
+        // page:review:<id>?view=1&subject=place, the query only when it says something
+        case 'review': return `${sel.id == null ? REVIEW : `${REVIEW}:${sel.id}`}${sel.q ? `?${sel.q}` : ''}`
+        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 +114,20 @@ 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}:`) || raw.startsWith(`${REVIEW}?`)) {
+        const qi = raw.indexOf('?')
+        const path = qi === -1 ? raw : raw.slice(0, qi)
+        const q = qi === -1 ? '' : raw.slice(qi + 1)
+        return { kind: 'review', col: null, id: path.slice(REVIEW.length + 1), tools: null, ...(q ? { q } : {}) }
+    }
+    // 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 +181,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, ...(p.q ? { q: p.q } : {}) }
+        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()
@@ -151,9 +159,15 @@ export class HomeSt {
         return r
     }
 
+    /** the page is the embed page: one repo's page in another tool's frame (embed.ts) */
+    get embedded(): boolean {
+        return this.base !== undefined
+    }
+
     boot(): void {
         this.machine?.boot()
-        this.dock.boot()
+        // the embed page shows one repo's page alone: no dock, so no request for the house's runs
+        if (this.base === undefined) this.dock.boot()
         this.disposers.push(reaction(() => this.title, (t) => { document.title = t }, { fireImmediately: true }))
         // back, forward, a pasted link and a hand edited hash all arrive
         // here; fromUrl is idempotent, so the two events firing together

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,10 @@
  --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;
+ /* a wiki page's refs (wikis-view.tsx): read on demand, loaded with the page */
+ --ref-lazy:#e8984a;--ref-eager:#6fa8f0;
  --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 +29,27 @@
  /* 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;
+ --ref-lazy:#b8600c;--ref-eager:#1f5fc8;
+ --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 +68,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 +128,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 +235,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 +245,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}}
@@ -239,7 +274,8 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
  background:conic-gradient(var(--chk1) 90deg,var(--chk2) 0 180deg,var(--chk1) 0 270deg,var(--chk2) 0) 0/34px 34px}
 .stage img.roll{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 20px var(--shadow));z-index:5;position:relative}
 .stage .ph,.stagewrap .ph{color:var(--dim)}
-.stagewrap{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:var(--s4)}
+/* every page card of a repo sits in this column, read from the left, never centred */
+.stagewrap{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:var(--s4)}
 .stageaud{display:flex;flex-direction:column;align-items:center;gap:var(--s3);font-size:48px;padding:var(--s4)}
 .stageaud audio{width:min(480px,80vw)}
 
@@ -343,7 +379,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}
@@ -671,6 +707,39 @@ a.tok{color:var(--accent)}
 .gvframe{flex:1;min-height:0;position:relative;display:flex;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
 .gvwait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--s2);font-size:12px;color:var(--dim)}
 .graphview iframe{position:relative;flex:1;min-height:0;width:100%;border:0;background:transparent}
+/* the graph and its preview panel (wikis-view.tsx) */
+.gvbody{flex:1;min-height:0}
+.gvbody .gvframe{height:100%}
+/* the wiki's search bar, its hits dropped under it over the graph */
+.wsearch{position:relative;flex:0 1 360px;min-width:160px;display:flex}
+.wsearch input{flex:1;min-width:0;height:22px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:0 var(--s3);font:inherit;font-size:12px}
+.wsearch input:focus{outline:none;border-color:var(--accent)}
+.wslist{position:absolute;top:calc(100% + 4px);left:0;z-index:30;width:min(560px,80vw);max-height:60vh;overflow-y:auto;padding:var(--s1) 0;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px var(--shadow)}
+.wshit{padding:var(--s1) var(--s3);cursor:pointer}
+.wshit.on,.wshit:hover{background:var(--sel)}
+.wshead{display:flex;align-items:baseline;gap:var(--s2);min-width:0}
+.wshead b{flex:none;font-size:12.5px}
+.wspath{min-width:0;color:var(--dim);font:11px/1.4 ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.wssnip{color:var(--dim);font-size:11.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.wsnone{padding:var(--s1) var(--s3);color:var(--dim);font-size:12px}
+/* the page open beside the graph */
+.wprev{height:100%;display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:3px}
+.wphead{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);min-width:0}
+.wptitle{flex:0 1 auto;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.wphead .wspath{flex:1}
+.wpplace{flex:none}
+.wpplace button{padding:0 var(--s1)}
+.wpplace .hico{width:14px;height:14px}
+.wpbtn{flex:none;display:inline-flex;align-items:center;gap:var(--s1);height:22px;padding:0 var(--s2);border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:11.5px;text-decoration:none;background:transparent;cursor:pointer}
+.wpbtn:hover{color:var(--ink);border-color:var(--accent)}
+.wpbtn .hico{width:13px;height:13px}
+.wpclose{flex:none;padding:0 var(--s2);font-size:14px;line-height:1.2}
+/* the refs of a page: on demand (→, a link, a path) orange, loaded with it (@) blue and bold */
+.wpbody a[data-ref=lazy]{color:var(--ref-lazy)}
+.wpbody a[data-ref=lazy] code{color:var(--ref-lazy)}
+.wpbody a[data-ref=eager]{color:var(--ref-eager);font-weight:700}
+.wpbody{flex:1;min-height:0;overflow-y:auto;padding:var(--s2) var(--s4) var(--s4)}
+.wpbody a[data-wiki]{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;cursor:pointer}
 
 /* ── comfy item view (comfy-ts's own panel fills the stage) ── */
 .comfyview{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}

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,18 @@ 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',
+    // where the wiki preview sits: a frame with its panel's edge
+    paneLeft: 'M3 4h14v12H3zM8 4v12M4.5 7h2M4.5 9.5h2',
+    paneRight: 'M3 4h14v12H3zM12 4v12M13.5 7h2M13.5 9.5h2',
+    paneBottom: 'M3 4h14v12H3zM3 11h14M6 13.5h8',
+    copy: 'M7 7h9v10H7zM4 13V3h9',
+    editor: 'M13 3l4 3v8l-4 3-7-6 7-5zM3 7.5l3 2.5-3 2.5',
+    // 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>