rvlib-shipkit 1.2.0 → 1.3.0

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

@@ -1,37 +1,43 @@
 // THE page (Bun.serve HTML import — no vite, no build step), one single page
-// app for every page the home serves ('/', '/planned', '/r/<repo>/') and for a
+// app for every page the home serves ('/', '/planned', '/activity', '/r/<repo>/') and for a
 // hub serving on its own at '/'. mobx+react per build/app-state-tree: HomeSt
 // is the single root (window.app), each repo a RepoSt under it, services own
-// state, components read and call. A repo's page is ONE tree of every repo
-// resource, by path or by type, coloured by state in the label itself, over
-// one severity filter persisted at ?f=needs · ?f=red. A row opens its item
-// view, an asset row opens the atelier.
+// state, components read and call. A repo's page is its sections over ONE
+// tree of every repo resource (sidebar.tsx), by path or by type, coloured by
+// state in the label itself, over 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 { observer } from 'mobx-react-lite'
-import { StrictMode, useEffect, useRef } from 'react'
+import { StrictMode, useEffect, useLayoutEffect, useRef } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ColCard, ColGrid, StatusCard } from './col-card.tsx'
 import { WIKIS, WikisView } from './wikis-view.tsx'
 import { ComfyOverlay, ComfyView } from './comfy-view.tsx'
 import type { Filter, RepoSt } from './repo-st.ts'
-import { HomeSt } from './home-st.ts'
+import { HomeSt, PLACE_PATH } from './home-st.ts'
 import { TimelineView } from './timeline-view.tsx'
-import { HeaderBar, LIVE_KEY, LiveStrip } from './header-bar.tsx'
+import { HeaderBar, notUp } from './header-bar.tsx'
 import { FOLLOW_KEY } from './timeline-chart.tsx'
 import { CheckCard } from './check-view.tsx'
 import { TestCard } from './test-view.tsx'
 import { TestsPage } from './tests-view.tsx'
 import { AssetStage, CatGrid, InfoChips, MediaTopbar, ToolsBar, VariantsBar } from './media-view.tsx'
-import { TYPE_MARK } from './tree-build.ts'
-import { TreeRowView } from './tree-row.tsx'
-import { Help } from './help.tsx'
+import { Sidebar } from './sidebar.tsx'
+import { AdminPage } from './admin-view.tsx'
+import { ReadmeView } from './readme-view.tsx'
 import { ProjectList } from './project-list.tsx'
-import { Group, Panel, Separator, type Layout } from 'react-resizable-panels'
+import { Group, Panel, Separator, usePanelRef, type Layout } from 'react-resizable-panels'
 import { LIST, SIDEBAR } from './layout-st.ts'
-import { HomeStrip, NotUp, Overview } from './home-strip.tsx'
+import { ArchivedView, HomeStrip, NotUp, Overview } from './home-strip.tsx'
 import { PlannedView } from './planned-view.tsx'
+import { ActivityView } from './activity-view.tsx'
+import { Palette } from './palette-view.tsx'
 import { SCREEN_WAIT_MS } from './screen-cache.ts'
-import { pageKey } from './keys.ts'
+import { isSearchKey, pageKey, sectionKey } from './keys.ts'
+import { repoSections } from './repo-sections.tsx'
+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 })
@@ -39,112 +45,6 @@ const home = new HomeSt({ home: document.body.dataset.home != null })
 ;(window as unknown as { app: HomeSt }).app = home
 home.boot()
 
-// ── the tree: every resource of the repo, one row deep in its path ──────
-// the row itself is tree-row.tsx, so a test renders it headless
-
-const Tree = observer(({ app }: { app: RepoSt }) => {
-    const t = app.tree
-    return (
-        // roving focus: the arrows belong to the tree only while it HAS the
-        // focus, so the atelier keeps its own keys
-        <div className="tree" tabIndex={0} onKeyDown={(e) => { if (t.key(e.key)) e.preventDefault() }}>
-            {t.rows.map((r) => <TreeRowView key={r.key} app={app} row={r} />)}
-            {!app.cols.loaded && !app.cols.cached ? <div className="tempty twait"><span className="spin" />reading the repo…</div> : null}
-            {app.cols.loaded && t.rows.length === 0 ? <div className="tempty">{app.filter === 'red' ? 'no reds — nothing is blocked ✨' : app.filter === 'needs' ? 'nothing needs you ✨' : 'no resources yet'}</div> : null}
-        </div>
-    )
-})
-
-/** what every glyph in the type slot means, behind one `(?)` in the header */
-const TypeLegend = () => (
-    <Help text={
-        <span className="legend">
-            {Object.entries(TYPE_MARK).map(([kind, m]) => (
-                <span key={kind} className="lrow"><i className={`ty ${m.hue}`}>{m.glyph}</i>{m.word}</span>
-            ))}
-        </span>
-    } />
-)
-
-const TreeTabs = observer(({ app }: { app: RepoSt }) => (
-    <span className="seg">
-        {(['path', 'type'] as const).map((t) => (
-            <button key={t} className={app.tree.tab === t ? 'on' : ''} onClick={() => app.tree.setTab(t)}>by {t}</button>
-        ))}
-    </span>
-))
-
-// segmented severity filter — all · needs (yellow+red) · red, the address
-// rides at /?f=… so a filtered view is shareable
-// the shortcut letter rides INSIDE its own button, so the binding is
-// discoverable without a legend
-const FILTER_KEY = { all: 'a', needs: 'n', red: 'r' } as const
-const SegFilter = observer(({ app }: { app: RepoSt }) => (
-    <span className="seg">
-        {(['all', 'needs', 'red'] as const).map((f) => (
-            <button key={f} className={app.filter === f ? 'on' : ''} onClick={() => app.setFilter(f)}>
-                {f}<span className="sk">{FILTER_KEY[f]}</span>
-            </button>
-        ))}
-    </span>
-))
-
-const Sidebar = observer(({ app }: { app: RepoSt }) => (
-    <aside>
-        <div className="shead">
-            resources
-            <SegFilter app={app} />
-        </div>
-        <div className="ssearch">
-            <input ref={(el) => { app.searchEl = el }} placeholder="filter… (/ to focus, ⌘K to jump)" value={app.query}
-                onChange={(e) => app.setQuery(e.target.value)}
-                onKeyDown={(e) => { if (e.key === 'Escape') app.setQuery('') }} />
-        </div>
-        <div className="stabs">
-            <TreeTabs app={app} />
-            <span className="sp" />
-            <TypeLegend />
-            <span className="cnt">{app.tree.visible.length}</span>
-        </div>
-        {/* its line is held while the repo is read, so the tree never drops under it */}
-        {app.tree.whenLine === '' && app.cols.loaded ? null : <div className="swhen">{app.tree.whenLine === '' ? '\u00a0' : app.tree.whenLine}</div>}
-        {app.media.dead != null ? <div className="tempty"><span className="warnline">media API down: {app.media.dead}</span></div> : null}
-        <Tree app={app} />
-    </aside>
-))
-
-// ── the one picker, cmd+k: home and planned, the shown repo's targets, then
-// every other repo ──────────────────────────────────────────────────────
-const Palette = observer(({ app }: { app: HomeSt }) => {
-    const p = app.palette
-    if (!p.open) return null
-    return (
-        <div className="palov" onClick={() => p.close()}>
-            <div className="pal" onClick={(e) => e.stopPropagation()}>
-                <input autoFocus placeholder="jump to…" value={p.query}
-                    onChange={(e) => p.setQuery(e.target.value)}
-                    onKeyDown={(e) => {
-                        if (e.key === 'ArrowDown') { e.preventDefault(); p.move(1) }
-                        else if (e.key === 'ArrowUp') { e.preventDefault(); p.move(-1) }
-                        else if (e.key === 'Enter') p.run()
-                        else if (e.key === 'Escape') p.close()
-                    }} />
-                <div className="prows">
-                    {p.results.map((jp, n) => (
-                        <div key={jp.id} className={`prow${n === p.idx ? ' on' : ''}`}
-                            onMouseEnter={() => p.setIdx(n)}
-                            onClick={() => p.run(jp)}>
-                            <span className="plabel">{jp.label}</span>
-                            <span className="pchip">{jp.section}</span>
-                        </div>
-                    ))}
-                    {p.results.length === 0 ? <div className="prow none">no match</div> : null}
-                </div>
-            </div>
-        </div>
-    )
-})
-
 // remark box on the ASSET view too: remarks land in .shipkit/assets/notes.md
 // and come back as `remarks` (exchange both ways, media included)
 const AssetRemarks = observer(({ app }: { app: RepoSt }) => {
@@ -186,6 +86,7 @@ const Main = observer(({ app }: { app: RepoSt }) => {
     )
     if (app.sel?.t === 'col') return <main>{errs}<ColGrid app={app} id={app.sel.id} /></main>
     if (app.sel?.t === 'tests') return <main>{errs}<div className="stagewrap"><TestsPage app={app} check={app.sel.check} /></div></main>
+    if (app.sel?.t === 'admin') return <main>{errs}<div className="stagewrap"><AdminPage app={app} /></div></main>
     if (app.sel?.t === 'status') return <main>{errs}<div className="stagewrap"><StatusCard app={app} /></div></main>
     if (app.sel?.t === 'cat') return <main>{errs}<CatGrid app={app} /></main>
     if (app.sel?.t === 'asset') return (
@@ -207,10 +108,10 @@ const Main = observer(({ app }: { app: RepoSt }) => {
     return (
         <main>
             {errs}
-            <div className="stagewrap"><div className="ph">
-                {allClear ? (app.filter === 'red' ? 'no reds — nothing is blocked ✨' : 'all clear — nothing needs you ✨')
-                    : 'Pick a row on the left.'}
-            </div></div>
+            <div className="stagewrap">
+                {allClear ? <div className="ph">{app.filter === 'red' ? 'no reds — nothing is blocked ✨' : 'all clear — nothing needs you ✨'}</div>
+                    : <ReadmeView app={app} />}
+            </div>
         </main>
     )
 })
@@ -254,16 +155,6 @@ const Body = observer(({ app }: { app: RepoSt }) => {
     )
 })
 
-/** 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
- *  the machine says the hub is not up */
-const notUp = (app: RepoSt): boolean => {
-    const m = app.home.machine
-    if (m == null || app.started) return false
-    if (!app.cols.cached) return true
-    return m.fresh && m.worker(app.key)?.status !== 'up'
-}
-
 /** one repo's page. Every repo visited keeps its region mounted, hidden while
  *  another one shows, so its scroll, its frames and its component state are
  *  there when it comes back; a hidden repo polls nothing, so it repaints
@@ -274,8 +165,8 @@ const RepoView = observer(({ app }: { app: RepoSt }) => {
         <div className="repo" hidden={!on}>
             {notUp(app) ? <NotUp app={app.home} /> : (
                 <>
-                    <HeaderBar app={app} />
-                    <LiveStrip app={app} />
+                    {/* on the home the strip carries the repo's bar */}
+                    {app.home.machine == null ? <HeaderBar app={app} /> : null}
                     <Body app={app} />
                     {on ? <ComfyOverlay app={app} /> : null}
                 </>
@@ -291,9 +182,10 @@ function onKey(e: KeyboardEvent): void {
     if (pk != null) {
         e.preventDefault()
         if (pk.t === 'picker') home.palette.toggle()
-        else if (pk.t === 'home' || pk.t === 'planned') {
+        else if (pk.t === 'dock') home.dock.cycle()
+        else if (pk.t === 'home' || pk.t === 'planned' || pk.t === 'activity') {
             home.palette.close()
-            if (home.machine != null) home.navigate(pk.t === 'home' ? '/' : '/planned')
+            if (home.machine != null) home.navigate(PLACE_PATH[pk.t === 'home' ? 'overview' : pk.t])
         } else {
             const p = home.projects.list[pk.n - 1]
             home.palette.close()
@@ -312,20 +204,25 @@ function onKey(e: KeyboardEvent): void {
         e.preventDefault()
         return
     }
-    if (e.key === '/') {
-        e.preventDefault()
-        app.searchEl?.focus()
+    const sk = sectionKey(e)
+    if (sk != null) {
+        const s = repoSections(app).find((x) => x.id === sk)
+        if (s != null) {
+            e.preventDefault()
+            s.go()
+        }
         return
     }
-    if (e.metaKey || e.ctrlKey || e.altKey) return
-    if (e.key === LIVE_KEY) {
+    if (isSearchKey(e)) {
         e.preventDefault()
-        app.live.toggle()
+        app.searchEl?.focus()
         return
     }
-    if (e.key === FOLLOW_KEY && !app.live.chart.follow) {
+    if (e.metaKey || e.ctrlKey || e.altKey) return
+    if (e.key === FOLLOW_KEY && (!app.live.chart.follow || !home.dock.chart.follow)) {
         e.preventDefault()
         app.live.chart.attach()
+        home.dock.chart.attach()
         return
     }
     const f = FILTER_BY_KEY[e.key.toLowerCase()]
@@ -335,33 +232,72 @@ function onKey(e: KeyboardEvent): void {
     }
 }
 
+/** a drag of a separator ended: the height of the panel below it, in px */
+const belowPx = (el: HTMLElement | null, layout: Layout, id: string): number | null => {
+    const pct = layout[id]
+    const h = el?.getBoundingClientRect().height
+    return pct == null || h == null || h === 0 ? null : (pct / 100) * h
+}
+
 const App = observer(() => {
     useEffect(() => {
         document.addEventListener('keydown', onKey)
         return () => document.removeEventListener('keydown', onKey)
     }, [])
     const l = home.layout
+    const d = home.dock
     const el = useRef<HTMLDivElement | null>(null)
+    const vel = useRef<HTMLDivElement | null>(null)
+    const dockRef = usePanelRef()
+    // 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
+    // eased (dock-anim.ts), so the boundary slides rather than jumps
+    const px = d.px
+    useLayoutEffect(() => {
+        const p = dockRef.current
+        if (p != null && Math.abs(p.getSize().inPixels - px) >= 1) animateDock(vel.current, () => p.resize(px))
+    }, [px, dockRef])
     return (
-        // two panels: the project list, its width dragged by the separator
-        // and kept per browser, then the page. The list and the strip stay
-        // mounted across pages; only the region under the strip changes
+        // the page over the dock: the project list, its width dragged by the
+        // separator and kept per browser, then the page; under both, the
+        // dock, on every page. The list, the strip and the dock stay mounted
+        // across pages; only the region under the strip changes
         <>
-            <Group className="app" orientation="horizontal" elementRef={el}
+            <Group className="appv" orientation="vertical" elementRef={vel}
                 onLayoutChanged={(layout, meta) => {
-                    if (!meta.isUserInteraction) return
-                    const px = leftPx(el.current, layout, 'projects')
-                    if (px != null) l.setListWidth(px)
+                    if (!meta.isUserInteraction || d.size !== 'open') return
+                    const px = belowPx(vel.current, layout, 'dock')
+                    if (px == null) return
+                    // a drag past a bound lands on it: the panel's own bounds
+                    // stay 0 and the max, so the key can take it to any size
+                    d.setHeight(px)
+                    if (Math.abs(px - d.height) >= 1) dockRef.current?.resize(d.height)
                 }}>
-                <Panel id="projects" defaultSize={l.listWidth} minSize={LIST.min} maxSize={LIST.max} groupResizeBehavior="preserve-pixel-size" className="pjpanel" style={PANEL}>
-                    <ProjectList app={home} />
+                <Panel id="top" minSize={200} className="apptop" style={PANEL}>
+                    <Group className="app" orientation="horizontal" elementRef={el}
+                        onLayoutChanged={(layout, meta) => {
+                            if (!meta.isUserInteraction) 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}>
+                            <ProjectList app={home} />
+                        </Panel>
+                        <Separator className="rsep" />
+                        <Panel id="page" minSize={320} className="appcol" style={PANEL}>
+                            {home.machine == null ? null : <HomeStrip app={home} />}
+                            {home.page === 'overview' ? <Overview app={home} /> : null}
+                            {home.page === 'planned' ? <PlannedView app={home} /> : null}
+                            {home.page === 'activity' ? <ActivityView app={home} /> : null}
+                            {home.page === 'archived' ? <ArchivedView app={home} /> : null}
+                            {home.visited.map((r) => <RepoView key={r.key} app={r} />)}
+                        </Panel>
+                    </Group>
                 </Panel>
-                <Separator className="rsep" />
-                <Panel id="page" minSize={320} className="appcol" style={PANEL}>
-                    {home.machine == null ? null : <HomeStrip app={home} />}
-                    {home.page === 'overview' ? <Overview app={home} /> : null}
-                    {home.page === 'planned' ? <PlannedView app={home} /> : null}
-                    {home.visited.map((r) => <RepoView key={r.key} app={r} />)}
+                <Separator className={`rsep hsep${d.size === 'open' ? '' : ' fixed'}`} disabled={d.size !== 'open'} />
+                <Panel id="dock" panelRef={dockRef} defaultSize={d.px} minSize={0} maxSize={DOCK.max} groupResizeBehavior="preserve-pixel-size" className="pdock" style={PANEL}>
+                    <Dock app={home} />
                 </Panel>
             </Group>
             <Palette app={home} />

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

@@ -4,7 +4,11 @@
    action, and red/orange/green reserved for STATE. No rule outside this
    block writes a colour, and tests/hub-css-invariants.test.ts fails one
    that does. */
-:root{--bg:#0d0e10;--panel:#141619;--panel2:#1b1e22;--line:#282c31;--ink:#e2e4e7;--dim:#8d9299;
+: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) */
+ --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 */
  --red:#d2605c;--warn:#cf9a4e;--ok:#6faa86;--blue:#6f9bd1;
@@ -16,16 +20,23 @@
  --k1:#8ca8c7;--k2:#a892c9;--k3:#6fb0b8;--k4:#c792b4;--k5:#9198a1;--k6:#8f95cf;
  --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 */
+ --okbg:#15251c;--okline:#2f5a40;
  /* 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}
 *{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}
-/* the page is two panels (hub-app.tsx): the project list, then .appcol,
-   which stacks the strip, the header, the live strip and the body */
-.app{height:100vh}
+/* a link with no class of its own: the browser default is dark blue on this dark page */
+a,a:visited{color:var(--accent)}
+/* the page is the window's height, the dock under it (hub-app.tsx): over
+   the dock two panels, the project list, then .appcol, which stacks the
+   strip, the header and the body */
+.appv{height:100vh}
+.app{height:100%}
 /* a panel's class lands on the div inside the panel (react-resizable-panels) */
 .pjpanel,.appcol,.pside,.pmain{height:100%;min-width:0}
+.apptop,.pdock{height:100%;min-height:0}
 .pjpanel{display:flex}
 .appcol{display:flex;flex-direction:column}
 /* one region per repo visited, the shown one alone displayed */
@@ -37,7 +48,11 @@ body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans
 .pmain{display:flex;flex-direction:column}
 .pmain > main{flex:1}
 
-/* ── the header: repo name, the core pages, the two runs and the run state ── */
+/* ── a repo's bar: on the home the strip (home-strip.css .hstrip), on a hub
+   of its own the header (.hdr). Its name, what runs now and the two runs,
+   then its processes, its trouble and its editor icons. One line at any
+   width: the container queries shrink the labels to their icons, then the
+   run state to its spinner ── */
 /* the repo's processes (serve.processes): a dot, its id, a link once up */
 .hprocs{display:inline-flex;gap:var(--s1);align-items:center}
 .hproc{display:inline-flex;align-items:center;gap:var(--s0)}
@@ -45,45 +60,51 @@ body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans
 .hproc a{color:var(--accent);text-decoration:none;font-size:12px}
 .pdot{display:inline-block;width:7px;height:7px;border-radius:4px;margin-right:var(--s1);background:var(--line)}
 .pdot.up{background:var(--ok)}.pdot.starting,.pdot.stopping{background:var(--warn)}.pdot.crashed{background:var(--red)}
-.hdr{display:flex;gap:var(--s2);align-items:center;height:36px;flex:none;padding:0 var(--s3);border-bottom:1px solid var(--line);background:var(--panel)}
+.hdr{display:flex;gap:var(--s2);align-items:center;height:36px;flex:none;padding:0 var(--s3);border-bottom:1px solid var(--line);background:var(--bg-top)}
 .hdr .sp{flex:1}
 .hname{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-right:var(--s2);white-space:nowrap}
-.hnav{display:flex;gap:var(--s1);overflow:hidden;align-items:center}
-.hnav button{border-color:transparent;color:var(--dim);border-radius:0;border-bottom:1px solid transparent;white-space:nowrap}
-.hnav button:hover{color:var(--ink);border-color:transparent;border-bottom-color:var(--line)}
-.hnav button.on{color:var(--accent);border-bottom-color:var(--accent)}
+.hdr,.hstrip{container-type:inline-size;white-space:nowrap}
+.hrun{display:inline-flex;align-items:center;gap:var(--s1);flex:none;margin-left:var(--s2)}
+.hbtn{display:inline-flex;align-items:center;gap:var(--s1);height:22px;padding:0 var(--s2);font-size:11.5px;white-space:nowrap;flex:none}
+.hbtn .hico{width:13px;height:13px}
+/* the editor icons: bare, dim, lit on hover, as the activity page's Fork icon */
+.hicon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:22px;padding:0;border:0;background:none;color:var(--dim)}
+.hicon:hover{color:var(--accent)}
+.hicon .hico{width:15px;height:15px}
 /* the run state holds its width whatever it says, so a run never moves the buttons beside it */
 .hstatus{max-width:420px;flex:0 1 auto;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .hstatus.red{color:var(--red)}
 .hstatus.warn{color:var(--warn)}
-.hstate{display:inline-flex;gap:var(--s1);align-items:center;width:260px;min-width:260px;flex:none;justify-content:flex-start;font-size:11.5px;color:var(--dim);overflow:hidden}
+/* its words sit against the run buttons, cut with an ellipsis */
+.hstate{display:inline-flex;gap:var(--s1);align-items:center;width:200px;min-width:200px;flex:none;justify-content:flex-end;font-size:11.5px;color:var(--dim);overflow:hidden}
 .hstate.on{color:var(--ink)}
-.hstate .htext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.hstate .spin.idle,.hnav .spin.idle{visibility:hidden;animation:none}
+.hstate .htext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.hstate .spin.idle{visibility:hidden;animation:none}
+/* after .hstate, so a narrow bar wins over its width */
+@container (max-width:600px){.hbtn .lbl{display:none}.hbtn{padding:0 var(--s1)}}
+@container (max-width:520px){.hstate{width:120px;min-width:120px}}
+@container (max-width:420px){.hstate .htext{display:none}.hstate{width:16px;min-width:16px}}
 
-/* ── the live strip: the one run chart. Folded, one thin row of ONE height
-   whatever runs; unfolded, the chart at the height its lanes hold, set
-   inline from a held value that grows at once and shrinks only after a
-   while, so it never jumps every second. Its (?) and the chart tooltip float
-   in a portal (floating.tsx), so no box of the strip clips them ── */
-.live{display:flex;flex-direction:column;height:30px;flex:none;border-bottom:1px solid var(--line);background:var(--bg);font-size:11px;color:var(--dim)}
+/* a row of a (?) legend: one glyph or word, then its meaning */
 .lrow{display:flex;gap:var(--s2);align-items:center;height:29px;flex:none;padding:0 var(--s3)}
-.lrow .sp{flex:1}
-.lfold{display:inline-flex;gap:var(--s1);align-items:center;border-color:transparent;color:var(--dim);padding:var(--s0) var(--s1)}
-.lfold .sk{font-size:9px;opacity:.55}
-.lwho{width:180px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
-.live.idle .lwho{color:var(--dim)}
-.lwho i{font-style:normal;color:var(--dim);margin-left:var(--s1)}
-.lwho b{font-weight:500;color:var(--accent);margin-left:var(--s1)}
-.lchart{flex:1;min-width:0;height:21px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
-.lopen{flex:1;min-height:0;overflow-y:auto;padding:0 var(--s3);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
-.lnote,.lmore{flex:none;color:var(--warn);white-space:nowrap}
-.lbusy{flex:none;white-space:nowrap}
 
-/* ── sidebar ── */
-aside{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;min-height:0}
-.shead{position:sticky;top:0;background:var(--panel);padding:var(--s3);border-bottom:1px solid var(--line);
- font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);z-index:2;display:flex;justify-content:space-between;align-items:center}
+/* ── the left pane: the sections, the filter, then the tree, the one part
+   that scrolls ── */
+aside{border-right:1px solid var(--line);background:var(--panel);min-height:0;display:flex;flex-direction:column;overflow:hidden}
+aside > *{flex:none}
+aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
+/* a repo's sections: the project list's lines (project-list.css .pjpl), a
+   little shorter, the current one lit and marked in the accent */
+.rsecs{display:flex;flex-direction:column;padding:var(--s1) 0;border-bottom:1px solid var(--line)}
+.rsec{display:flex;align-items:center;gap:var(--s2);width:100%;height:26px;padding:0 var(--s3);background:transparent;border:0;border-radius:0;text-align:left;color:var(--dim);font-size:13px;cursor:pointer}
+.rsec:hover{background:var(--panel2);color:var(--ink);border-color:transparent}
+.rsec.cur{background:var(--sel);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
+.rsec .hico{flex:none;width:16px;height:16px}
+.rsecl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rsecn{flex:none;min-width:16px;height:16px;padding:0 var(--s1);border-radius:8px;font-size:10px;font-weight:700;line-height:16px;text-align:center;color:var(--bg)}
+.rsecn.nred{background:var(--red)}
+.rsecn.nwarn{background:var(--warn)}
+.rsec:hover .pjkey,.rsec.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}
@@ -94,10 +115,16 @@ aside{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto
 .seg button.on{color:var(--accent);border-bottom-color:var(--accent)}
 .seg button .sk{margin-left:var(--s1);font-size:9px;opacity:.55}
 .swhen{padding:0 var(--s3) var(--s2);font-size:11px;color:var(--dim)}
-.ssearch{padding:var(--s2) var(--s3)}
+/* 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)}
+.sfield{position:relative;flex:1 1 96px;min-width:0;display:flex}
 .ssearch input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);
- padding:var(--s1) var(--s2);font-size:12.5px;outline:none}
+ padding:var(--s0) var(--s4) var(--s0) var(--s2);font-size:12px;outline:none}
+.ssearch input::placeholder{color:var(--dim);opacity:.6;font-size:11.5px}
 .ssearch input:focus{border-color:var(--accent)}
+/* its key, the way the project list prints its keys (.pjkey) */
+.skey{position:absolute;right:var(--s2);top:50%;transform:translateY(-50%);pointer-events:none;font:10px/1 ui-monospace,Menlo,monospace;color:var(--dim);opacity:.6;background:none;border:0;padding:0}
+.sfield input:focus + .skey{opacity:0}
 /* ── the resource tree: ONE row shape, a fixed grid. The indent rides in
    the FIRST column and the label eats the slack, so every right side slot
    lines up down the whole column whatever the depth. Colour is on the
@@ -390,7 +417,6 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .tlb.bad,.tlb.red{fill:var(--red)}
 .tlb.rep{fill:var(--line)}
 .tlb.run{fill:var(--accent);animation:pulse 1.6s ease-in-out infinite}
-.tlb.repo{fill:var(--k6)}
 .tlband.run{stroke:var(--accent)}
 .tlconc{fill:var(--hair)}
 .tlconc.over{fill:var(--warn)}
@@ -439,6 +465,8 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
    per test check (the tests page), the failing files with their failure line */
 .rtime{grid-template-columns:minmax(0,1fr) 88px 72px 128px 72px 40px 88px}
 .rcheckt{grid-template-columns:152px 88px 48px 56px minmax(0,1fr) 72px}
+/* every test file: file, check, duration, status, age */
+.rall{grid-template-columns:minmax(0,1fr) 152px 88px 52px 72px}
 .rhead .tleft{text-align:left}
 .tshare{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:var(--s1);align-items:center}
 .ttrack{display:block;height:6px;border-radius:1px;overflow:hidden;background:var(--panel2)}
@@ -678,6 +706,9 @@ a.mint:hover{text-decoration:underline}
 .prow.on{background:var(--panel2)}
 .prow.none{color:var(--dim);cursor:default}
 .prow .plabel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* the entry's icon: a place's button icon, a repo's own (project-list.tsx Face) */
+.prow .pface{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--dim)}
+.prow .pface img,.prow .pface .pgi{width:16px;height:16px;border-radius:4px;object-fit:contain}
 .prow .pchip{font-size:10px;color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:var(--s0) var(--s1);text-transform:uppercase;letter-spacing:.08em;flex:none}
 
@@ -689,3 +720,12 @@ a.mint:hover{text-decoration:underline}
 pre{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:var(--s4);overflow-x:auto;
  font:12.5px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap}
 .ok{color:var(--ok)}.warn{color:var(--warn)}.fail{color:var(--red)}.dim{color:var(--dim)}
+
+/* ── the admin page: one row per control, its sentence under its name ── */
+.adrow{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--line)}
+.adtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s0);font-size:13px}
+.adtext .dim{font-size:12px}
+.adctl{flex:none;display:flex;align-items:center}
+.adflag{display:inline-flex;align-items:center;gap:var(--s1);font-size:12px;color:var(--dim)}
+.adflag input{width:auto;margin:0}
+.adconfirm{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px}

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

@@ -1,12 +1,32 @@
-// the few line icons of the home (the overview's section headers, the two
-// places on top of the project list): one 20 unit path each, stroked in the text colour, so
-// the page's tokens colour them and nothing else does.
+// the few line icons of the home (the overview's section headers, the places
+// on top of the project list, a repo page's sections and its top bar): one 20
+// unit path each, stroked in the text colour, so the page's tokens colour them
+// and nothing else does.
 export const ICON = {
     shipkit: 'M3 7.5 10 4l7 3.5v5L10 16l-7-3.5zM3 7.5 10 11l7-3.5M10 11v5',
     process: 'M2 10h3.5l2-5 5 10 2-5H18',
     monitor: 'M3 4h14v9H3zM7 16.5h6M10 13v3.5',
+    archived: 'M2.5 4h15v3.5h-15zM4 7.5V16h12V7.5M8 10.5h4',
     home: 'M3 9.5 10 3.5l7 6M5 8v8.5h10V8M8.5 16.5v-4.5h3v4.5',
     planned: 'M5.5 3h9M5.5 17h9M6.5 3c0 4 7 4 7 7s-7 3-7 7M13.5 3c0 4-7 4-7 7s7 3 7 7',
+    browser: 'M10 2.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 1 0 0-15M2.5 10h15M10 2.5c-3 3-3 12 0 15M10 2.5c3 3 3 12 0 15',
+    window: 'M2.5 4h15v12h-15zM2.5 7.5h15M5 5.75h.01M7 5.75h.01',
+    activity: 'M6 3v14M6 6.5a2 2 0 1 0 0 .01M6 13.5a2 2 0 1 0 0 .01M10 6.5h7M10 13.5h7M10 10h5',
+    fork: 'M6 5v10M6 3a2 2 0 1 0 0 .01M6 17a2 2 0 1 0 0 .01M14 5a2 2 0 1 0 0 .01M14 7c0 4.5-8 3.5-8 7',
+    search: 'M8.5 3a5.5 5.5 0 1 0 0 11a5.5 5.5 0 1 0 0-11M12.5 12.5 17 17',
+    // a repo page's sections, then its two runs and its editor
+    checks: 'M4 10.5 7.5 14 16 5.5',
+    runs: 'M3 5h8M3 10h12M3 15h6',
+    asks: 'M3 4h14v9H8l-4 3.5V13H3z',
+    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',
+    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',
+    gate: 'M10 2.5 16 5v4.5c0 4-2.7 6.5-6 8c-3.3-1.5-6-4-6-8V5zM7.5 10l2 2 3.5-3.5',
+    // 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',
 } as const
 
 export const Icon = ({ d }: { d: string }) => (

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

@@ -9,6 +9,10 @@
   <link rel="stylesheet" href="./prose-hits.css" />
   <link rel="stylesheet" href="./home-strip.css" />
   <link rel="stylesheet" href="./planned.css" />
+  <link rel="stylesheet" href="./activity.css" />
+  <link rel="stylesheet" href="./readme.css" />
+  <link rel="stylesheet" href="./dock.css" />
+  <link rel="stylesheet" href="./controls.css" />
 </head>
 <body>
   <div id="root"></div>