rvlib-shipkit 0.38.1 → 1.0.1

package/src/serve/hub-app/health-svc.ts

@@ -1,17 +1,28 @@
-// Health service — STATUS.md + the streaming check runner (the health
-// section's card in THE page).
+// Health service — the RAW view of the last run: STATUS.md as it sits on
+// disk, plus the wire lines of a run happening now, streamed in.
+//
+// It is one node on the tree and nothing routes here by accident any more:
+// every check has its own page (checks-svc.ts owns the run itself). This card
+// exists so the whole text of a run stays reachable.
 import { makeAutoObservable, runInAction } from 'mobx'
 import type { HubSt } from './hub-st.ts'
 
 export class HealthSvc {
     statusMd: string | null = null
-    running = false
-    note = ''
+    /** the lines of the run in flight, newest last */
+    live: string[] = []
 
     constructor(private st: HubSt) {
         makeAutoObservable<this, 'st'>(this, { st: false })
     }
 
+    get running(): boolean {
+        return this.st.checks.busy
+    }
+    get note(): string {
+        return this.st.checks.note
+    }
+
     async load(): Promise<void> {
         try {
             const s = (await (await fetch('/api/status.json')).json()) as { statusMd: string | null }
@@ -21,29 +32,13 @@ export class HealthSvc {
         }
     }
 
-    async runCheck(): Promise<void> {
-        this.running = true
-        this.note = 'running…'
-        let text = ''
-        try {
-            const r = await fetch('/api/check/run', { method: 'POST' })
-            const rd = r.body!.getReader()
-            const dec = new TextDecoder()
-            for (;;) {
-                const { done, value } = await rd.read()
-                if (done) break
-                text += dec.decode(value, { stream: true })
-                runInAction(() => { this.statusMd = text })
-            }
-            runInAction(() => { this.note = 'done — STATUS.md refreshed on disk' })
-            void this.load()
-            void this.st.cols.poll()
-        } catch (e) {
-            runInAction(() => {
-                this.statusMd = `${text}\nFAIL stream broke: ${(e as Error).message}`
-                this.note = 'stream broke'
-            })
-        }
-        runInAction(() => { this.running = false })
+    appendLine(l: string): void {
+        runInAction(() => { this.live = [...this.live, l] })
+    }
+
+    /** the whole health pass, through the one in-process runner */
+    async runHealthPass(): Promise<void> {
+        runInAction(() => { this.live = [] })
+        await this.st.checks.run()
     }
 }

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

@@ -0,0 +1,29 @@
+// THE help affordance, once, for every surface of the hub: a small `(?)` that
+// shows one sentence the moment it is hovered or focused. CSS does the
+// showing (.hlp in hub.css), so there is no library, no delay and no state.
+//
+// A term lives in TERMS rather than in the component that shows it, so the
+// same word is explained the same way wherever it appears.
+
+export const TERMS: Record<string, string> = {
+    always: 'it runs on every gate and every health pass',
+    release: 'it runs on the release path only: the full gate and the health pass run it, the quick gate does not',
+    health: 'it runs in the health pass (`shipkit check`) only, never on a gate and never on a commit',
+    off: 'it does not run at all, and the reason it was turned off rides in the repo config',
+    default: 'nobody declared where this check runs, so it takes the default',
+    advisory: 'it can fail without stopping anything: the gate reports it and goes on',
+    blocking: 'its failure stops the gate, and stops you',
+    ceiling: 'the time it is killed at: a check creeping toward its ceiling is visible before it trips',
+    cached: 'it did not run: the answer came from the cache, because nothing it depends on moved since it last ran',
+    ran: 'it ran and was timed, so the number is what it costs today',
+    slowest: 'the worst run on record, reds included',
+    average: 'the mean of the runs that really ran, cached ones left out',
+}
+
+/** one sentence, either given here or named by its term. `text` takes a node
+ *  so a legend can ride in the same bubble as a sentence */
+export const Help = ({ text, term }: { text?: React.ReactNode; term?: string }): React.ReactElement => (
+    <span className="hlp" tabIndex={0} role="note">
+        ?<span className="hbub">{text ?? (term != null ? TERMS[term] ?? term : '')}</span>
+    </span>
+)

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

@@ -1,104 +1,79 @@
 // THE page (Bun.serve HTML import — no vite, no build step). One surface
-// per repo: media atelier + asks + creds + posts + health + graphs as
-// foldable sections, one severity filter persisted at /?f=needs · /?f=red.
-// Section title = collection view (grid of cards), row = item view. mobx+react per
-// build/app-state-tree: HubSt is the single root (window.app), services
-// own state, components read and call.
+// 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.
 import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { StrictMode, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
-import { ColCard, ColGrid, GraphView, StatusCard } from './col-card.tsx'
-import { HubSt } from './hub-st.ts'
+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 { TimelineView } from './timeline-view.tsx'
+import { HeaderBar, LIVE_KEY, LiveStrip } 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 { SideAsset } from './hub-types.ts'
+import { TYPE_MARK } from './tree-build.ts'
+import { TreeRowView } from './tree-row.tsx'
+import { Help } from './help.tsx'
+import { ProjectGutter } from './project-gutter.tsx'
 
 const app = new HubSt()
 // the root as a global — app code, console debugging (build/app-state-tree)
 ;(window as unknown as { app: HubSt }).app = app
 app.boot()
 
-// ── sidebar: media categories + one foldable section per collection ──────
-const AssetRow = observer(({ a }: { a: SideAsset }) => (
-    <div className={`arow${a.id === app.media.curId ? ' sel' : ''}`} onClick={() => app.selectAsset(a.id)}>
-        <div className="lb"><b>{a.label}</b><span>{a.rolls} rolls</span></div>
-        {app.media.pending.includes(a.id)
-            ? <div className="spin" />
-            : <div className={`dot ${a.stale ? 'stale' : a.picked ? 'done' : a.rolls > 0 ? 'some' : a.manual ? 'miss' : ''}`}
-                title={a.manual && a.rolls === 0 ? 'manual asset — nothing uploaded yet' : undefined} />}
-    </div>
-))
+// ── 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 MediaSection = observer(() => {
-    const m = app.media
-    if (m.dead != null) return <div className="gname"><span className="warnline">media API down: {m.dead}</span></div>
-    if (m.assets.length === 0) return null // kit-less repo — no media section, same page
+const Tree = observer(() => {
+    const t = app.tree
     return (
-        <>
-            {m.cats.map((c) => {
-                // a live search must SHOW its matches — folds yield while it runs
-                const open = m.openCats.has(c) || app.query.trim() !== ''
-                const inCat = m.visibleAssets.filter((a) => a.cat === c)
-                return (
-                    <div key={c}>
-                        <div className="gname" id={`sec-cat-${c}`}>
-                            <span>
-                                <span className="fold" onClick={() => m.toggleFold(c)}>{open ? '▾' : '▸'}</span>{' '}
-                                <span className="cn" title="grid view" onClick={() => app.showCat(c)}>{c}</span>
-                            </span>
-                            {inCat.every((a) => a.manual) ? null : (
-                                <span className="catgen">{[1, 2, 3].map((n) => <button key={n} onClick={() => void m.genCat(c, n)}>+{n}</button>)}</span>
-                            )}
-                        </div>
-                        {open ? inCat.map((a) => <AssetRow key={a.id} a={a} />) : null}
-                    </div>
-                )
-            })}
-        </>
+        // 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>
     )
 })
 
-const ColSections = observer(() => {
-    const c = app.cols
-    return (
-        <>
-            {c.sidebarCols.map((col) => {
-                const items = c.visibleInstances(col)
-                // every section header ALWAYS renders, 0 items included — a
-                // quiet section must stay reachable (done asks, present secrets)
-                const open = c.isOpen(col)
-                const health = col.id === 'health'
-                return (
-                    <div key={col.id}>
-                        <div className="gname" id={`sec-${col.id}`}>
-                            <span>
-                                <span className="fold" onClick={() => c.toggleFold(col)}>{open ? '▾' : '▸'}</span>{' '}
-                                <span className="cn" onClick={() => (health ? app.showStatus() : app.showCol(col.id))}
-                                    title={health ? 'STATUS.md + run check' : 'collection view'}>{col.title}</span>
-                            </span>
-                            <span className="cnt">{items.length}</span>
-                        </div>
-                        {open ? items.map((i) => (
-                            // a health line's action IS the runner — an echo card would be a dead end
-                            <div key={i.id} className={`arow${app.sel?.t === 'item' && app.sel.id === i.id ? ' sel' : ''}`}
-                                onClick={() => (health ? app.showStatus() : c.select(col.id, i.id))}>
-                                <div className="lb"><b>{i.text}</b>{i.file != null ? <span>{i.file}</span> : null}</div>
-                                <div className={`cdot ${i.severity ?? ''}`} />
-                            </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}</button>
+            <button key={f} className={app.filter === f ? 'on' : ''} onClick={() => app.setFilter(f)}>
+                {f}<span className="sk">{FILTER_KEY[f]}</span>
+            </button>
         ))}
     </span>
 ))
@@ -106,43 +81,26 @@ const SegFilter = observer(() => (
 const Sidebar = observer(() => (
     <aside>
         <div className="shead">
-            {app.name !== '' ? app.name : 'hub'}
+            resources
             <SegFilter />
         </div>
         <div className="ssearch">
-            <input placeholder="filter… (⌘J to jump)" value={app.query}
+            <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>
-        <MediaSection />
-        <ColSections />
+        <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>
 ))
 
-// ── the icon rail: quick jump to a section header (scroll + unfold,
-// NEVER a navigation) — red dot = the section holds a red ──
-const RAIL_ICON: Record<string, string> = { asks: '🙋', creds: '🔑', posts: '📣', health: '📊', graphs: '🕸' }
-const Rail = observer(() => {
-    const c = app.cols
-    const m = app.media
-    // unfold flips state; the scroll waits for react to paint the rows
-    const jump = (id: string): void => { setTimeout(() => document.getElementById(id)?.scrollIntoView({ block: 'start' }), 0) }
-    return (
-        <nav className="skrail">
-            {m.assets.length > 0 ? (
-                <span className="ric" title="assets" onClick={() => { m.openAllCats(); if (m.cats[0] != null) jump(`sec-cat-${m.cats[0]}`) }}>
-                    🖼{c.mediaHasRed ? <i /> : null}
-                </span>
-            ) : null}
-            {c.sidebarCols.map((col) => (
-                <span key={col.id} className="ric" title={col.title} onClick={() => { c.openSection(col); jump(`sec-${col.id}`) }}>
-                    {RAIL_ICON[col.id] ?? '•'}{c.hasRed(col) ? <i /> : null}
-                </span>
-            ))}
-        </nav>
-    )
-})
-
 // ── cmd+j palette: every jump target behind one input ────────────────────
 const Palette = observer(() => {
     if (!app.palOpen) return null
@@ -173,7 +131,7 @@ const Palette = observer(() => {
     )
 })
 
-// remark box on the ASSET view too: remarks land in .rv-assets/notes.md
+// 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 m = app.media
@@ -184,7 +142,7 @@ const AssetRemarks = observer(() => {
         <div className="assetrem">
             {remarks.length > 0 ? <div className="rem">{remarks.join('\n')}</div> : null}
             <div className="row">
-                <input placeholder="remark → lands in .rv-assets/notes.md, agents read it" value={c.remarkDraft}
+                <input placeholder="remark → lands in .shipkit/assets/notes.md, agents read it" value={c.remarkDraft}
                     onChange={(e) => runInAction(() => { c.remarkDraft = e.target.value })} />
                 <button className="ghost" onClick={() => void c.remark({ kind: 'media', id: m.curId })}>remark</button>
             </div>
@@ -199,12 +157,21 @@ const Main = observer(() => {
     if (app.sel?.t === 'item') return (
         <main>
             {errs}
-            {app.sel.col === 'graphs'
-                ? <GraphView app={app} id={app.sel.id} />
-                : <div className="stagewrap"><ColCard app={app} col={app.sel.col} id={app.sel.id} /></div>}
+            {app.sel.col === WIKIS
+                ? <WikisView app={app} id={app.sel.id} />
+                : app.sel.col === 'comfy'
+                    ? <ComfyView app={app} id={app.sel.id} />
+                    : app.sel.col === 'checks'
+                        ? <div className="stagewrap"><CheckCard app={app} id={app.sel.id} /></div>
+                        : app.sel.col === 'tests'
+                            ? <div className="stagewrap"><TestCard app={app} id={app.sel.id} /></div>
+                            : app.sel.col === 'runs'
+                                ? <div className="stagewrap"><TimelineView app={app} /></div>
+                                : <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 === 'tests') return <main>{errs}<div className="stagewrap"><TestsPage app={app} check={app.sel.check} /></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 (
@@ -218,22 +185,24 @@ const Main = observer(() => {
                 <VariantsBar app={app} />
             </div>
             <AssetRemarks />
-            <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>
+            <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>
     )
     // a filtered view with zero hits is the WIN state — say so, never point at a void
-    const allClear = app.filter !== 'all' && m.visibleAssets.length === 0 && app.cols.sidebarCols.every((col) => app.cols.visibleInstances(col).length === 0)
+    const allClear = app.filter !== 'all' && app.tree.visible.length === 0
     return (
         <main>
             {errs}
             <div className="stagewrap"><div className="ph">
                 {allClear ? (app.filter === 'red' ? 'no reds — nothing is blocked ✨' : 'all clear — nothing needs you ✨')
-                    : m.assets.length > 0 ? 'Pick an asset or an item on the left.' : 'Pick an item on the left.'}
+                    : 'Pick a row on the left.'}
             </div></div>
         </main>
     )
 })
 
+const FILTER_BY_KEY: Record<string, Filter | undefined> = { a: 'all', n: 'needs', r: 'red' }
+
 const App = observer(() => {
     useEffect(() => {
         const onKey = (e: KeyboardEvent): void => {
@@ -246,18 +215,52 @@ const App = observer(() => {
             const t = e.target as HTMLElement
             if (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT') return
             if (app.palOpen) return // the palette input owns its keys
-            if (app.sel?.t !== 'asset') return
-            if (app.media.key(e.key)) e.preventDefault()
+            // 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)
     }, [])
     return (
+        // a flex ROW: a column mounted before `.appcol` sits left of the
+        // header and everything under it
         <div className="app">
-            <Rail />
-            <Sidebar />
-            <Main />
+            <ProjectGutter app={app} />
+            <div className="appcol">
+                <HeaderBar app={app} />
+                <LiveStrip app={app} />
+                <div className="appbody">
+                    <Sidebar />
+                    <Main />
+                </div>
+            </div>
             <Palette />
+            <ComfyOverlay app={app} />
         </div>
     )
 })