rvlib-shipkit 1.1.1 → 1.3.0

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

@@ -1,139 +1,53 @@
-// 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
+// THE page (Bun.serve HTML import — no vite, no build step), one single page
+// 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 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. mobx+react per build/app-state-tree: HubSt is the single root
-// (window.app), services own state, components read and call.
+// ?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, 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 { HubSt, type Filter } from './hub-st.ts'
+import type { Filter, RepoSt } from './repo-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 { ProjectGutter } from './project-gutter.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, usePanelRef, type Layout } from 'react-resizable-panels'
+import { LIST, SIDEBAR } from './layout-st.ts'
+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 { 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'
 
-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()
-
-// ── 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 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}
-        </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(() => (
-    <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(() => (
-    <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(() => (
-    <aside>
-        <div className="shead">
-            resources
-            <SegFilter />
-        </div>
-        <div className="ssearch">
-            <input id="treeq" placeholder="filter… (/ to focus, ⌘J 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 />
-            <span className="sp" />
-            <TypeLegend />
-            <span className="cnt">{app.tree.visible.length}</span>
-        </div>
-        {app.tree.whenLine === '' ? null : <div className="swhen">{app.tree.whenLine}</div>}
-        {app.media.dead != null ? <div className="tempty"><span className="warnline">media API down: {app.media.dead}</span></div> : null}
-        <Tree />
-    </aside>
-))
-
-// ── cmd+j palette: every jump target behind one input ────────────────────
-const Palette = observer(() => {
-    if (!app.palOpen) return null
-    return (
-        <div className="palov" onClick={() => app.palClose()}>
-            <div className="pal" onClick={(e) => e.stopPropagation()}>
-                <input autoFocus placeholder="jump to…" value={app.palQuery}
-                    onChange={(e) => app.setPalQuery(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()
-                    }} />
-                <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() }}>
-                            <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}
-                </div>
-            </div>
-        </div>
-    )
-})
+;(window as unknown as { app: HomeSt }).app = home
+home.boot()
 
 // 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 +65,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 (
@@ -172,6 +86,7 @@ const Main = observer(() => {
     )
     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 (
@@ -184,7 +99,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>
     )
@@ -193,78 +108,207 @@ const Main = observer(() => {
     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>
     )
 })
 
 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>
+    )
+})
+
+/** 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} /> : (
+                <>
+                    {/* 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}
+                </>
+            )}
+        </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 === 'dock') home.dock.cycle()
+        else if (pk.t === 'home' || pk.t === 'planned' || pk.t === 'activity') {
+            home.palette.close()
+            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()
+            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
+    }
+    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 (isSearchKey(e)) {
+        e.preventDefault()
+        app.searchEl?.focus()
+        return
+    }
+    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()]
+    if (f != null) {
+        e.preventDefault()
+        app.setFilter(f)
+    }
+}
+
+/** 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(() => {
-        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 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 (
-        // 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>
+        // 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="appv" orientation="vertical" elementRef={vel}
+                onLayoutChanged={(layout, meta) => {
+                    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="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 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} />
+        </>
     )
 })
 
+// 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 }