rvlib-shipkit 1.1.0 → 1.2.0

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

@@ -1,17 +1,20 @@
-// THE page (Bun.serve HTML import — no vite, no build step). One surface
-// per repo: 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. mobx+react per build/app-state-tree: HubSt is the single root
-// (window.app), services own state, components read and call.
+// 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
+// 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.
 import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
-import { StrictMode, useEffect } from 'react'
+import { StrictMode, useEffect, 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 { HubSt, type Filter } from './hub-st.ts'
+import type { Filter, RepoSt } from './repo-st.ts'
+import { HomeSt } from './home-st.ts'
 import { TimelineView } from './timeline-view.tsx'
 import { HeaderBar, LIVE_KEY, LiveStrip } from './header-bar.tsx'
 import { FOLLOW_KEY } from './timeline-chart.tsx'
@@ -22,24 +25,32 @@ import { AssetStage, CatGrid, InfoChips, MediaTopbar, ToolsBar, VariantsBar } fr
 import { TYPE_MARK } from './tree-build.ts'
 import { TreeRowView } from './tree-row.tsx'
 import { Help } from './help.tsx'
-import { ProjectGutter } from './project-gutter.tsx'
+import { ProjectList } from './project-list.tsx'
+import { Group, Panel, Separator, type Layout } from 'react-resizable-panels'
+import { LIST, SIDEBAR } from './layout-st.ts'
+import { HomeStrip, NotUp, Overview } from './home-strip.tsx'
+import { PlannedView } from './planned-view.tsx'
+import { SCREEN_WAIT_MS } from './screen-cache.ts'
+import { pageKey } from './keys.ts'
 
-const app = new HubSt()
+// 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 })
 // the root as a global — app code, console debugging (build/app-state-tree)
-;(window as unknown as { app: HubSt }).app = app
-app.boot()
+;(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(() => {
+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} />)}
-            {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}
+            {!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>
     )
 })
@@ -55,7 +66,7 @@ const TypeLegend = () => (
     } />
 )
 
-const TreeTabs = observer(() => (
+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>
@@ -68,7 +79,7 @@ const TreeTabs = observer(() => (
 // 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(() => (
+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)}>
@@ -78,53 +89,56 @@ const SegFilter = observer(() => (
     </span>
 ))
 
-const Sidebar = observer(() => (
+const Sidebar = observer(({ app }: { app: RepoSt }) => (
     <aside>
         <div className="shead">
             resources
-            <SegFilter />
+            <SegFilter app={app} />
         </div>
         <div className="ssearch">
-            <input id="treeq" placeholder="filter… (/ to focus, ⌘J to jump)" value={app.query}
+            <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 />
+            <TreeTabs app={app} />
             <span className="sp" />
             <TypeLegend />
             <span className="cnt">{app.tree.visible.length}</span>
         </div>
-        {app.tree.whenLine === '' ? null : <div className="swhen">{app.tree.whenLine}</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 />
+        <Tree app={app} />
     </aside>
 ))
 
-// ── cmd+j palette: every jump target behind one input ────────────────────
-const Palette = observer(() => {
-    if (!app.palOpen) return null
+// ── 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={() => app.palClose()}>
+        <div className="palov" onClick={() => p.close()}>
             <div className="pal" onClick={(e) => e.stopPropagation()}>
-                <input autoFocus placeholder="jump to…" value={app.palQuery}
-                    onChange={(e) => app.setPalQuery(e.target.value)}
+                <input autoFocus placeholder="jump to…" value={p.query}
+                    onChange={(e) => p.setQuery(e.target.value)}
                     onKeyDown={(e) => {
-                        if (e.key === 'ArrowDown') { e.preventDefault(); app.palMove(1) }
-                        else if (e.key === 'ArrowUp') { e.preventDefault(); app.palMove(-1) }
-                        else if (e.key === 'Enter') app.palRun()
-                        else if (e.key === 'Escape') app.palClose()
+                        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">
-                    {app.palResults.map((jp, n) => (
-                        <div key={jp.id} className={`prow${n === app.palIdx ? ' on' : ''}`}
-                            onMouseEnter={() => app.setPalIdx(n)}
-                            onClick={() => { app.palClose(); jp.run() }}>
+                    {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>
                     ))}
-                    {app.palResults.length === 0 ? <div className="prow none">no match</div> : null}
+                    {p.results.length === 0 ? <div className="prow none">no match</div> : null}
                 </div>
             </div>
         </div>
@@ -133,7 +147,7 @@ const Palette = observer(() => {
 
 // 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(() => {
+const AssetRemarks = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const c = app.cols
     if (m.curId == null) return null
@@ -151,7 +165,7 @@ const AssetRemarks = observer(() => {
     )
 })
 
-const Main = observer(() => {
+const Main = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const errs = m.errors.length > 0 ? <div className="errs">{m.errors.join('\n')}</div> : null
     if (app.sel?.t === 'item') return (
@@ -184,7 +198,7 @@ const Main = observer(() => {
                 <AssetStage app={app} />
                 <VariantsBar app={app} />
             </div>
-            <AssetRemarks />
+            <AssetRemarks app={app} />
             <div className="help"><kbd>←</kbd><kbd>→</kbd> roll · <kbd>Enter</kbd> pick · <kbd>⇧A</kbd> alt · <kbd>X</kbd> discard — picks ship via the kit's ship hook when present · category title = grid view</div>
         </main>
     )
@@ -203,68 +217,162 @@ const Main = observer(() => {
 
 const FILTER_BY_KEY: Record<string, Filter | undefined> = { a: 'all', n: 'needs', r: 'red' }
 
+/** a panel never scrolls itself: its content scrolls where it means to (the
+ *  list's rows, the tree, the page), and a panel's own scrollbar is a dark
+ *  band in WebKit, the macOS app's engine, which draws classic scrollbars.
+ *  overflow is the one inline style the library lets a panel set */
+const PANEL = { overflow: 'hidden' } as const
+
+/** a drag of a separator ended: the width of the panel on its left, in px,
+ *  from the group's layout (a percentage of the group's width) */
+const leftPx = (el: HTMLElement | null, layout: Layout, id: string): number | null => {
+    const pct = layout[id]
+    const w = el?.getBoundingClientRect().width
+    return pct == null || w == null || w === 0 ? null : (pct / 100) * w
+}
+
+/** a repo's sidebar and its main area, the sidebar's width dragged by the
+ *  separator between them and kept per browser */
+const Body = observer(({ app }: { app: RepoSt }) => {
+    const l = app.home.layout
+    const el = useRef<HTMLDivElement | null>(null)
+    return (
+        <Group className="appbody" orientation="horizontal" elementRef={el}
+            onLayoutChanged={(layout, meta) => {
+                if (!meta.isUserInteraction) return
+                const px = leftPx(el.current, layout, 'sidebar')
+                if (px != null) l.setSidebarWidth(px)
+            }}>
+            <Panel id="sidebar" defaultSize={l.sidebarWidth} minSize={SIDEBAR.min} maxSize={SIDEBAR.max} groupResizeBehavior="preserve-pixel-size" className="pside" style={PANEL}>
+                <Sidebar app={app} />
+            </Panel>
+            <Separator className="rsep" />
+            <Panel id="main" minSize={320} className="pmain" style={PANEL}>
+                <Main app={app} />
+            </Panel>
+        </Group>
+    )
+})
+
+/** 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
+ *  nothing */
+const RepoView = observer(({ app }: { app: RepoSt }) => {
+    const on = app.isShown
+    return (
+        <div className="repo" hidden={!on}>
+            {notUp(app) ? <NotUp app={app.home} /> : (
+                <>
+                    <HeaderBar app={app} />
+                    <LiveStrip app={app} />
+                    <Body app={app} />
+                    {on ? <ComfyOverlay app={app} /> : null}
+                </>
+            )}
+        </div>
+    )
+})
+
+/** the keys of the page: they act on the repo shown, and on nothing else */
+function onKey(e: KeyboardEvent): void {
+    // the command keys beat the focus check: they work from anywhere, any page
+    const pk = pageKey(e)
+    if (pk != null) {
+        e.preventDefault()
+        if (pk.t === 'picker') home.palette.toggle()
+        else if (pk.t === 'home' || pk.t === 'planned') {
+            home.palette.close()
+            if (home.machine != null) home.navigate(pk.t === 'home' ? '/' : '/planned')
+        } else {
+            const p = home.projects.list[pk.n - 1]
+            home.palette.close()
+            if (p != null) home.projects.click(p.name)
+        }
+        return
+    }
+    if (home.palette.open) return // the picker's input owns its keys
+    const app = home.shown
+    if (app == null) return
+    const t = e.target as HTMLElement
+    if (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT') return
+    // the atelier owns its roll keys while an asset is open, and
+    // says so by consuming them
+    if (app.sel?.t === 'asset' && app.media.key(e.key)) {
+        e.preventDefault()
+        return
+    }
+    if (e.key === '/') {
+        e.preventDefault()
+        app.searchEl?.focus()
+        return
+    }
+    if (e.metaKey || e.ctrlKey || e.altKey) return
+    if (e.key === LIVE_KEY) {
+        e.preventDefault()
+        app.live.toggle()
+        return
+    }
+    if (e.key === FOLLOW_KEY && !app.live.chart.follow) {
+        e.preventDefault()
+        app.live.chart.attach()
+        return
+    }
+    const f = FILTER_BY_KEY[e.key.toLowerCase()]
+    if (f != null) {
+        e.preventDefault()
+        app.setFilter(f)
+    }
+}
+
 const App = observer(() => {
     useEffect(() => {
-        const onKey = (e: KeyboardEvent): void => {
-            // ⌘J/^J beats the focus check — the palette must open from anywhere
-            if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === 'j') {
-                e.preventDefault()
-                app.palToggle()
-                return
-            }
-            const t = e.target as HTMLElement
-            if (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT') return
-            if (app.palOpen) return // the palette input owns its keys
-            // the atelier owns its roll keys while an asset is open, and
-            // says so by consuming them
-            if (app.sel?.t === 'asset' && app.media.key(e.key)) {
-                e.preventDefault()
-                return
-            }
-            if (e.key === '/') {
-                e.preventDefault()
-                document.getElementById('treeq')?.focus()
-                return
-            }
-            if (e.metaKey || e.ctrlKey || e.altKey) return
-            if (e.key === LIVE_KEY) {
-                e.preventDefault()
-                app.live.toggle()
-                return
-            }
-            if (e.key === FOLLOW_KEY && !app.live.chart.follow) {
-                e.preventDefault()
-                app.live.chart.attach()
-                return
-            }
-            const f = FILTER_BY_KEY[e.key.toLowerCase()]
-            if (f != null) {
-                e.preventDefault()
-                app.setFilter(f)
-            }
-        }
         document.addEventListener('keydown', onKey)
         return () => document.removeEventListener('keydown', onKey)
     }, [])
+    const l = home.layout
+    const el = useRef<HTMLDivElement | null>(null)
     return (
-        // a flex ROW: a column mounted before `.appcol` sits left of the
-        // header and everything under it
-        <div className="app">
-            <ProjectGutter app={app} />
-            <div className="appcol">
-                <HeaderBar app={app} />
-                <LiveStrip app={app} />
-                <div className="appbody">
-                    <Sidebar />
-                    <Main />
-                </div>
-            </div>
-            <Palette />
-            <ComfyOverlay app={app} />
-        </div>
+        // 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
+        <>
+            <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.visited.map((r) => <RepoView key={r.key} app={r} />)}
+                </Panel>
+            </Group>
+            <Palette app={home} />
+        </>
     )
 })
 
+// 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 />

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

@@ -126,9 +126,6 @@ export type CheckFacts = {
  *  (serve/hub-problems.ts): the header shows it, never the tree */
 export type HubProblem = { id: string; text: string; severity: 'red' | 'yellow' }
 
-/** the hub's daily health pass timer, as the resources feed sends it
- *  (serve/health-schedule.ts). null = this hub runs no timer */
-export type Schedule = { everyMs: number; lastPassAt: number | null; nextAt: number; running: boolean }
 
 /** one declared slow suite, with the case test-speed doctrine demands */
 export type SlowSuite = { file: string; catches: string; whyNotFast: string }

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

@@ -21,18 +21,34 @@
  --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 a flex ROW: a column mounted before .appcol sits left of the
-   header and everything under it, and .appcol stacks the header, the live
-   strip and the body */
-.app{display:flex;height:100vh}
-.appcol{flex:1;min-width:0;display:flex;flex-direction:column}
-.appbody{flex:1;min-height:0;display:grid;grid-template-columns:330px 1fr}
+/* 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 panel's class lands on the div inside the panel (react-resizable-panels) */
+.pjpanel,.appcol,.pside,.pmain{height:100%;min-width:0}
+.pjpanel{display:flex}
+.appcol{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}
+.appbody{flex:1;min-height:0}
+.pside{display:flex;flex-direction:column}
+.pside > aside{flex:1}
+.pmain{display:flex;flex-direction:column}
+.pmain > main{flex:1}
 
 /* ── the header: repo name, the core pages, the two runs and the run state ── */
+/* 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)}
+.hproc button{padding:var(--s0) var(--s2);font-size:12px}
+.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 .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}
+.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)}
@@ -40,17 +56,17 @@ body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans
 .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-end;font-size:11.5px;color:var(--dim);overflow:hidden}
+.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}
 .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}
 
 /* ── 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. The strip clips nothing itself, so
-   its (?) opens below it over the page; the chart box clips the chart ── */
+   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)}
-.live .hbub{top:calc(100% + 6px);bottom:auto;z-index:30}
 .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)}
@@ -135,10 +151,11 @@ aside{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto
 .tnote b{font-weight:600;color:var(--red)}
 .stabs{display:flex;gap:var(--s2);align-items:center;padding:var(--s1) var(--s3);border-bottom:1px solid var(--line)}
 .stabs .sp{flex:1}
-.stabs .cnt{font-size:11px;color:var(--dim)}
+.stabs .cnt{min-width:4ch;text-align:right;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
 .catgen{display:inline-flex;gap:var(--s1)}
 .catgen button{padding:var(--s0) var(--s2);font-size:11px;font-weight:700}
 .tempty{padding:var(--s2) var(--s3);font-size:12px;color:var(--dim);white-space:pre-wrap}
+.twait{display:flex;align-items:center;gap:var(--s2)}
 .warnline{color:var(--red)}
 .fold{cursor:pointer;color:var(--dim);font-size:15px;display:inline-block;width:22px;text-align:center;
  padding:var(--s0);border-radius:3px;user-select:none}
@@ -388,9 +405,9 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .tlgap.live text{fill:var(--ink)}
 .tlgap text{font-size:10px;pointer-events:none}
 .tlnow{stroke:var(--accent)}
-/* fixed to the viewport, placed from the pointer: every box of the strip
-   clips its overflow, and a tooltip inside them is cut to a sliver */
-.tlaxtip{position:fixed;z-index:30;display:flex;flex-direction:column;gap:0;padding:var(--s1) var(--s2);pointer-events:none;
+/* placed by floating-ui under the pointer, in a portal: every box of the
+   strip clips its overflow, and a tooltip inside them is cut to a sliver */
+.tlaxtip{z-index:30;display:flex;flex-direction:column;gap:0;padding:var(--s1) var(--s2);pointer-events:none;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 12px var(--shadow);font-size:11px;white-space:nowrap}
 .tlaxtip .dim{color:var(--dim)}
 /* the runs page: one tab bar, then one list. Every line on a grid of fixed
@@ -542,17 +559,18 @@ a.tok{color:var(--accent)}
    height, so a streaming run never jumps the card it sits in */
 .wlog{margin:0;min-height:120px;max-height:320px;overflow-y:auto;background:var(--panel2);border:1px solid var(--line);
  border-radius:3px;padding:var(--s2);font:11.5px/1.5 ui-monospace,Menlo,monospace;color:var(--ink);white-space:pre-wrap}
-/* THE HELP: a `(?)` that says its one sentence at once, on hover and on
-   focus. No delay, no library, no state */
+/* THE HELP: a `(?)` that says its one sentence on hover and on focus, the
+   bubble placed by floating-ui (floating.tsx) */
 .hlp{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;flex:none;
  border:1px solid var(--line);border-radius:50%;color:var(--dim);font-size:9px;line-height:1;cursor:help;
- position:relative;outline:none;user-select:none}
+ outline:none;user-select:none}
 .hlp:hover,.hlp:focus{color:var(--accent);border-color:var(--accent)}
-.hbub{display:none;position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);width:max-content;
+/* out of sight, still read by a screen reader and found by a page search */
+.vh{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
+.hbub,.ftip{z-index:40;width:max-content;
  max-width:260px;background:var(--panel2);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 10px var(--shadow);
  padding:var(--s1) var(--s2);font:11.5px/1.4 system-ui,sans-serif;text-transform:none;letter-spacing:0;
- color:var(--ink);white-space:normal;z-index:9}
-.hlp:hover .hbub,.hlp:focus .hbub{display:block}
+ color:var(--ink);white-space:normal;pointer-events:none}
 /* the type legend: every glyph of the tree with its word, in one bubble */
 .legend{display:flex;flex-direction:column;gap:var(--s1)}
 .legend .lrow{display:flex;gap:var(--s2);align-items:baseline;white-space:normal}
@@ -596,7 +614,9 @@ a.tok{color:var(--accent)}
 .graphview{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
 .gvhead{display:flex;gap:var(--s2);align-items:center;font-size:13px;min-width:0}
 .gvhead .gvtext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.graphview iframe{flex:1;min-height:0;width:100%;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
+.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}
 
 /* ── 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)}
@@ -646,7 +666,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)}
 
-/* ── cmd+j palette ── */
+/* ── the cmd+k 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;

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

@@ -0,0 +1,14 @@
+// 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.
+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',
+    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',
+} as const
+
+export const Icon = ({ d }: { d: string }) => (
+    <svg className="hico" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
+)

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

@@ -5,8 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>hub</title>
   <link rel="stylesheet" href="./hub.css" />
-  <link rel="stylesheet" href="./project-gutter.css" />
+  <link rel="stylesheet" href="./project-list.css" />
   <link rel="stylesheet" href="./prose-hits.css" />
+  <link rel="stylesheet" href="./home-strip.css" />
+  <link rel="stylesheet" href="./planned.css" />
 </head>
 <body>
   <div id="root"></div>

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

@@ -0,0 +1,25 @@
+// the page's command keys, read the same on every layout: ⌘1 to ⌘9 select the
+// nth repo of the project list, ⌘J shows the overview, ⌘P the plan, ⌘K opens
+// the picker.
+// A digit is read from the physical key (`code`), so an AZERTY keyboard,
+// where the key under 1 types `&`, selects the same repo. Ctrl stands in for
+// ⌘ off a Mac. The macOS app binds none of these to a menu item, so they
+// reach the page (tests/home-strip.test.tsx reads ShipkitGui.swift).
+export type PageKey = { t: 'repo'; n: number } | { t: 'home' } | { t: 'planned' } | { t: 'picker' }
+
+type KeyLike = { key: string; code: string; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }
+
+export function pageKey(e: KeyLike): PageKey | null {
+    if (!(e.metaKey || e.ctrlKey) || e.altKey) return null
+    const digit = /^Digit([1-9])$/.exec(e.code)
+    if (digit != null) return { t: 'repo', n: Number(digit[1]) }
+    if (e.shiftKey) return null
+    const k = e.key.toLowerCase()
+    if (k === 'j') return { t: 'home' }
+    if (k === 'p') return { t: 'planned' }
+    if (k === 'k') return { t: 'picker' }
+    return null
+}
+
+/** the shortcut each place of the home carries on its button */
+export const PLACE_KEY = { overview: '⌘J', planned: '⌘P' } as const