rvlib-shipkit 1.2.0 → 1.4.0

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

@@ -1,37 +1,44 @@
 // 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 { AskTable, CheckTable } from './col-tables-view.tsx'
 import { WIKIS, WikisView } from './wikis-view.tsx'
 import { ComfyOverlay, ComfyView } from './comfy-view.tsx'
 import type { Filter, RepoSt } from './repo-st.ts'
-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 +46,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 }) => {
@@ -184,8 +85,14 @@ const Main = observer(({ app }: { app: RepoSt }) => {
                                 : <div className="stagewrap"><ColCard app={app} col={app.sel.col} id={app.sel.id} /></div>}
         </main>
     )
-    if (app.sel?.t === 'col') return <main>{errs}<ColGrid app={app} id={app.sel.id} /></main>
+    if (app.sel?.t === 'col') return (
+        <main>
+            {errs}
+            {app.sel.id === 'checks' ? <CheckTable app={app} id={app.sel.id} /> : app.sel.id === 'asks' ? <AskTable app={app} id={app.sel.id} /> : <ColGrid app={app} id={app.sel.id} />}
+        </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 +114,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 +161,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 +171,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 +188,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 +210,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 +238,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-types.ts

@@ -1,7 +1,7 @@
 // Wire types the hub app reads — mirrors of the server shapes
 // (studio-server.ts, collection-types.ts). Kept structural on purpose: the
 // page renders what the API sends, the file is the truth.
-import type { ResourceType, SuiteFacts, TestFacts, TestRun } from '../../collections/collection-types.ts'
+import type { AskFacts, ResourceType, SuiteFacts, TestFacts, TestRun } from '../../collections/collection-types.ts'
 
 export type SideAsset = {
     id: string
@@ -62,7 +62,7 @@ export type Artifact = { copy?: string; url?: string; steps?: string[] }
  *  The list lives where the providers that emit it live, so a kind can never
  *  be known on one side of the wire only. Type only, so nothing server side
  *  reaches the bundle */
-export type { ResourceType, SuiteFacts, TestFacts, TestRun }
+export type { AskFacts, ResourceType, SuiteFacts, TestFacts, TestRun }
 
 export type CheckStatus = 'pass' | 'warn' | 'fail' | 'skip'
 
@@ -73,6 +73,7 @@ export type RecentRun = { at: number; ms: number; status: CheckStatus; replayed:
 // engine reaches the bundle: two declarations of one vocabulary is how a
 // switch ends up writing a word the other half does not know
 import type { WhenAt, WhenSource } from '../../core/when.ts'
+import type { Line } from '../../core/wire.ts'
 import type { CheckFrom } from '../../check.ts'
 export type { CheckFrom, WhenAt, WhenSource }
 
@@ -154,7 +155,7 @@ export type CheckEvent = {
     replayed: boolean
     blocking: boolean | null
     advisory: boolean
-    lines: { kind: string; text: string }[]
+    lines: Line[]
 }
 /** the colour of the tree label: red broken · warn taste pending · ok
  *  passing on a check that ran · idle the neutral default · quiet archived or out of play */
@@ -186,6 +187,8 @@ export type Resource = {
     check?: CheckFacts
     /** test files only: where it runs and what it last cost */
     test?: TestFacts
+    /** asks only: kind, dates, what it blocks, its probe */
+    ask?: AskFacts
 }
 export type ColMeta = { id: string; title: string; media: string }
 export type Col = ColMeta & { instances: Resource[] }

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,18 +20,26 @@
  --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}
+/* the box the machine toasts float in (home-strip.css .htoasts) */
+.appcol{position:relative;display:flex;flex-direction:column}
 /* one region per repo visited, the shown one alone displayed */
 .repo{flex:1;min-height:0;display:flex;flex-direction:column}
 .repo[hidden]{display:none}
@@ -37,7 +49,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 +61,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 +116,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 +418,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 +466,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)}
@@ -600,6 +629,27 @@ a.tok{color:var(--accent)}
 .cghead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  display:flex;gap:var(--s2);align-items:baseline;margin:0 0 var(--s3)}
 .cghead .cnt{font-size:11px;color:var(--dim);letter-spacing:0;text-transform:none}
+/* the checks and asks pages: one dense table each (col-tables-view.tsx), on
+   the activity table (.actable), a group header per state that folds */
+.ctpage{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s4);font-size:12.5px;container-type:inline-size}
+.cttable{font-variant-numeric:tabular-nums}
+.cttable td{padding:var(--s0) var(--s2);vertical-align:baseline}
+.ctgrp td{padding:var(--s2) var(--s2) var(--s1);color:var(--dim);font-size:11.5px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
+.ctgrp:hover td{color:var(--ink)}
+.ctgrp.g-fail td{color:var(--red)}
+.ctgrp.g-warn td{color:var(--warn)}
+.ctcaret{display:inline-block;width:14px}
+.ctrow{cursor:pointer}
+.ctrow:hover{background:var(--panel2)}
+.ctdot{font-size:10px}
+.ctid,.ctkind{font:11.5px ui-monospace,Menlo,monospace}
+.ctfind{font:11.5px ui-monospace,Menlo,monospace;color:var(--dim)}
+.ctdur{text-align:right;font:11.5px ui-monospace,Menlo,monospace}
+.ctbudget,.ctplan,.ctblocks{color:var(--dim)}
+.ctprobe{font-size:11.5px}
+.cttable .c-dot{width:22px}.cttable .c-id{width:140px}.cttable .c-title{width:16%}.cttable .c-age{width:72px}.cttable .c-dur{width:152px}.cttable .c-plan{width:88px}
+.cttable .c-kind{width:92px}.cttable .c-blocks{width:32%}.cttable .c-probe{width:84px}
+@container (max-width:760px){.cttable .c-title{width:0}.cttable .cttitle{display:none}.cttable .c-plan{width:0}.cttable .ctplan{display:none}}
 .cgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}
 .cgcard{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:var(--s2) var(--s3);cursor:pointer;min-width:0}
 .cgcard:hover{border-color:var(--accent)}
@@ -666,7 +716,7 @@ a.mint{color:var(--accent);font-size:12px;text-decoration:none}
 a.mint:hover{text-decoration:underline}
 .colcard h3 .stchip,.colcard h3 a.mint{margin-left:var(--s2)}
 
-/* ── the cmd+k picker ── */
+/* ── the cmd+j picker ── */
 .palov{position:fixed;inset:0;background:var(--scrim);z-index:100;display:flex;justify-content:center;align-items:flex-start;
  padding-top:14vh}
 .pal{width:min(560px,90vw);background:var(--panel);border:1px solid var(--line);border-radius:3px;
@@ -678,6 +728,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 +742,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}