rvlib-shipkit 0.11.0 → 0.13.0

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

@@ -1,245 +1,266 @@
-// The hub's React app (Bun.serve HTML import — no vite, no build step).
-// Two views routed by pathname: / = attention dashboard (everything red),
-// /status = STATUS.md + streamed check runs. The rail lists every mounted
-// tool (from /hub.json) — legacy pages (graphs, studio) get the same rail
-// injected server-side until they migrate.
-import { makeAutoObservable, runInAction } from 'mobx'
+// THE page (Bun.serve HTML import — no vite, no build step). One surface
+// per repo (his rules 2026-07-23): media atelier + asks + creds + posts +
+// health + graphs as foldable sections, one severity filter persisted at
+// /?f=needs · /?f=red (legacy /?needs=1 reads as needs). 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.
+import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
-import { StrictMode } from 'react'
+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 { AssetStage, CatGrid, Drawer, InfoChips, MediaTopbar, RollStrip } from './media-view.tsx'
+import type { SideAsset } from './hub-types.ts'
 
-type HubTool = { path: string; label: string; desc: string }
-type NeedItem = {
-    collection: string
-    id: string
-    text: string
-    severity?: 'red' | 'yellow'
-    href?: string
-    artifact?: { copy?: string; url?: string; steps?: string[] }
-    verbs?: string[]
-    candidates?: { id: string; label: string; hint?: string }[]
-}
+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()
 
-const RAIL_ICONS: Record<string, string> = { '/': '⚡', '/graph/wiki': '🕸', '/graph/agent': '🤖', '/assets/': '🖼', '/status': '📊' }
-
-class HubStore {
-    name = ''
-    tools: HubTool[] = []
-    needs: NeedItem[] | null = null
-    redsOnly = false
-    statusMd: string | null = null
-    running = false
-    note = ''
-    error: string | null = null
-
-    constructor() {
-        makeAutoObservable(this)
-    }
-
-    get redCount(): number {
-        return (this.needs ?? []).filter((n) => n.severity === 'red').length
-    }
-
-    get visible(): NeedItem[] {
-        const all = this.needs ?? []
-        const sorted = [...all].sort((a, b) => (a.severity === b.severity ? 0 : a.severity === 'red' ? -1 : 1))
-        return this.redsOnly ? sorted.filter((n) => n.severity === 'red') : sorted
-    }
-
-    async load(): Promise<void> {
-        try {
-            const hub = (await (await fetch('/hub.json')).json()) as { name: string; tools: HubTool[] }
-            const nd = (await (await fetch('/api/needs.json')).json()) as { needs: NeedItem[] }
-            runInAction(() => {
-                this.name = hub.name
-                this.tools = hub.tools
-                this.needs = nd.needs
-            })
-            if (location.pathname === '/status') {
-                const s = (await (await fetch('/api/status.json')).json()) as { statusMd: string | null }
-                runInAction(() => { this.statusMd = s.statusMd })
-            }
-        } catch (e) {
-            runInAction(() => { this.error = (e as Error).message })
-        }
-    }
-
-    /** per-tile act errors — feedback lands WHERE he clicked, never only in
-     *  a scrolled-away bar */
-    actErr: Record<string, string> = {}
-    busy = false
+// ── 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>
+))
 
-    /** POST an act-in-place verb, then refetch */
-    async act(id: string, path: string, body: Record<string, string>): Promise<void> {
-        runInAction(() => { this.busy = true; delete this.actErr[id] })
-        try {
-            const r = await fetch(`/api/act/${path}`, { method: 'POST', body: JSON.stringify(body) })
-            if (!r.ok) throw new Error(await r.text())
-            runInAction(() => { this.note = 'done' })
-            await this.load()
-        } catch (e) {
-            runInAction(() => { this.actErr[id] = (e as Error).message })
-        }
-        runInAction(() => { this.busy = false })
-    }
+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
+    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>
+                )
+            })}
+        </>
+    )
+})
 
-    tileErr(id: string, msg: string): void {
-        runInAction(() => { this.actErr[id] = msg })
-    }
+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 (his order 2026-07-23:
+                // 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>
+                )
+            })}
+        </>
+    )
+})
 
-    async runCheck(): Promise<void> {
-        this.running = true
-        this.note = 'running…'
-        let text = ''
-        try {
-            const r = await fetch('/status/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() // red counts moved — refresh the dashboard data
-        } catch (e) {
-            runInAction(() => {
-                this.statusMd = `${text}\nFAIL stream broke: ${(e as Error).message}`
-                this.note = 'stream broke'
-            })
-        }
-        runInAction(() => { this.running = false })
-    }
-}
+// segmented severity filter — all · needs (yellow+red) · red, the address
+// rides at /?f=… so a filtered view is shareable
+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>
+        ))}
+    </span>
+))
 
-const store = new HubStore()
-void store.load()
+const Sidebar = observer(() => (
+    <aside>
+        <div className="shead">
+            {app.name !== '' ? app.name : 'hub'}
+            <SegFilter />
+        </div>
+        <div className="ssearch">
+            <input placeholder="filter… (⌘J to jump)" value={app.query}
+                onChange={(e) => app.setQuery(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Escape') app.setQuery('') }} />
+        </div>
+        <MediaSection />
+        <ColSections />
+    </aside>
+))
 
+// ── the icon rail: quick jump to a section header (his order 2026-07-23:
+// 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 items = [{ path: '/', label: 'attention', desc: 'everything red' }, ...store.tools.filter((t) => t.path !== '/')]
+    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">
-            {items.map((t) => {
-                const on = location.pathname === t.path || (t.path !== '/' && location.pathname.startsWith(t.path))
-                return (
-                    <a key={t.path} className={on ? 'on' : ''} href={t.path} title={`${t.label} — ${t.desc}`}>
-                        {RAIL_ICONS[t.path] ?? '·'}
-                        {t.path === '/' && store.redCount > 0 ? <i /> : null}
-                    </a>
-                )
-            })}
+            {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>
     )
 })
 
-const copy = (s: string): void =>
-    void navigator.clipboard.writeText(s).then(
-        () => runInAction(() => { store.note = 'copied' }),
-        () => runInAction(() => { store.note = 'copy failed (clipboard needs a secure context)' }),
-    )
-
-/** one act-in-place tile per need — the artifact is IN HAND (copy buttons,
- *  mint links, proof inputs), never a pointer to a flow */
-const NeedTile = observer(({ n }: { n: NeedItem }) => {
-    const askFile = n.collection === 'asks' ? n.id.replace(/^ask:/, '') : null
-    const post = n.collection === 'posts' ? n.id.match(/^post:([^/]+)\/(.+?):(pick|topost|invalid)$/) : null
-    const pickedFile = n.collection === 'posts' ? n.candidates?.[0]?.id : null
+// ── cmd+j palette: every jump target behind one input ────────────────────
+const Palette = observer(() => {
+    if (!app.palOpen) return null
     return (
-        <div className={`tile ${n.severity ?? ''}`}>
-            <div className="tline">
-                <span className="chip">{n.collection}</span>
-                {n.href != null ? <a href={n.href}>{n.text}</a> : <span>{n.text}</span>}
-            </div>
-            {n.artifact?.copy != null ? (
-                <div className="tact">
-                    <button onClick={() => copy(n.artifact!.copy!)}>copy {n.collection === 'creds' ? 'command' : n.collection === 'posts' ? 'post' : 'brief'}</button>
-                    <code>{n.artifact.copy.length > 120 ? `${n.artifact.copy.slice(0, 120)}…` : n.artifact.copy}</code>
-                </div>
-            ) : null}
-            {n.artifact?.url != null ? <div className="tact"><a href={n.artifact.url} target="_blank" rel="noreferrer">mint ↗</a></div> : null}
-            {n.artifact?.steps != null ? <details className="tact"><summary>steps</summary>{n.artifact.steps.map((s, i) => <div key={i}>{i + 1}. {s}</div>)}</details> : null}
-            {post?.[3] === 'pick' ? (
-                // the CORE taste interaction: candidates comparable at a
-                // glance, never a blind collapse
-                <div className="tact picks">
-                    {n.candidates?.map((c) => (
-                        <div key={c.id} className="cand">
-                            <div className="candhead">
-                                <span className="chip">{c.label}</span>
-                                <button disabled={store.busy} onClick={() => void store.act(n.id, 'post-pick', { channel: post[1]!, file: c.id })}>pick</button>
-                            </div>
-                            <div className="hint">{c.hint}</div>
+        <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>
-            ) : null}
-            {post?.[3] === 'topost' && pickedFile != null ? (
-                <form className="tact" onSubmit={(e) => { e.preventDefault(); const url = new FormData(e.currentTarget).get('url') as string; if (url === '') store.tileErr(n.id, 'paste the posted URL first — the proof is the point'); else void store.act(n.id, 'post-posted', { channel: post[1]!, file: pickedFile, url }) }}>
-                    <input name="url" placeholder="posted URL = proof" />
-                    <button type="submit" disabled={store.busy}>posted ✓</button>
-                </form>
-            ) : null}
-            {askFile != null ? (
-                <form className="tact" onSubmit={(e) => { e.preventDefault(); const url = new FormData(e.currentTarget).get('url') as string; void (url !== '' ? store.act(n.id, 'ask-proof', { file: askFile, url }) : store.act(n.id, 'ask-done', { file: askFile })) }}>
-                    <input name="url" placeholder="proof URL (optional)" />
-                    <button type="submit" disabled={store.busy}>done ✓</button>
-                </form>
-            ) : null}
-            {store.actErr[n.id] != null ? <div className="tileerr">✗ {store.actErr[n.id]}</div> : null}
+            </div>
         </div>
     )
 })
 
-const Attention = observer(() => (
-    <div className="wrap">
-        <div className="crumb">shipkit hub · needs</div>
-        <h1>{store.name}<small>everything that needs you, artifact in hand</small></h1>
-        {store.needs == null ? <div className="sub">loading…</div>
-            : store.needs.length === 0 ? <div className="clear">✅ all clear — nothing needs you</div>
-            : <>
-                <div className="bar">
-                    <label><input type="checkbox" checked={store.redsOnly} onChange={(e) => runInAction(() => { store.redsOnly = e.target.checked })} /> reds only</label>
-                    <span className="note">{store.redCount} red · {(store.needs.length - store.redCount)} yellow{store.note !== '' ? ` · ${store.note}` : ''}</span>
-                </div>
-                {store.visible.map((n) => <NeedTile key={n.id} n={n} />)}
-            </>}
-        <div className="sub">refreshes on reload · checks refresh via <a href="/status">status → run check</a></div>
-    </div>
-))
+// remark box on the ASSET view too — his words land in .rv-assets/notes.md
+// and come back as `remarks` (exchange both ways, media included)
+const AssetRemarks = observer(() => {
+    const m = app.media
+    const c = app.cols
+    if (m.curId == null) return null
+    const remarks = c.mediaRemarks(m.curId)
+    return (
+        <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}
+                    onChange={(e) => runInAction(() => { c.remarkDraft = e.target.value })} />
+                <button className="ghost" onClick={() => void c.remark({ kind: 'media', id: m.curId })}>remark</button>
+            </div>
+            {c.actErr !== '' ? <div className="err">✗ {c.actErr}</div> : null}
+        </div>
+    )
+})
 
-const wireClass = (l: string): string => {
-    const t = l.trimStart()
-    if (t.startsWith('FAIL') || t.startsWith('✗')) return 'fail'
-    if (t.startsWith('WARN') || t.startsWith('⚠')) return 'warn'
-    if (t.startsWith('ok') || t.startsWith('✓')) return 'ok'
-    if (t.startsWith('skip') || t.startsWith('fix:') || t.startsWith('#')) return 'dim'
-    return ''
-}
+const Main = observer(() => {
+    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 (
+        <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>}
+        </main>
+    )
+    if (app.sel?.t === 'col') return <main>{errs}<ColGrid app={app} id={app.sel.id} /></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 (
+        <main>
+            {errs}
+            <MediaTopbar app={app} />
+            <InfoChips app={app} />
+            <AssetStage app={app} />
+            <RollStrip app={app} />
+            <AssetRemarks />
+            <Drawer 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>
+    )
+    // 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)
+    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.'}
+            </div></div>
+        </main>
+    )
+})
 
-const Status = observer(() => (
-    <div className="wrap">
-        <div className="crumb">shipkit hub · status</div>
-        <h1>{store.name}<small>STATUS.md</small></h1>
-        <div className="bar">
-            <button disabled={store.running} onClick={() => void store.runCheck()}>run check</button>
-            <span className="note">{store.note !== '' ? store.note : <>shells <code>shipkit check</code>, wire lines stream in below</>}</span>
+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
+            if (app.sel?.t !== 'asset') return
+            if (app.media.key(e.key)) e.preventDefault()
+        }
+        document.addEventListener('keydown', onKey)
+        return () => document.removeEventListener('keydown', onKey)
+    }, [])
+    return (
+        <div className="app">
+            <Rail />
+            <Sidebar />
+            <Main />
+            <Palette />
         </div>
-        <pre>
-            {(store.statusMd ?? 'no STATUS.md yet — hit "run check" (or run: shipkit check)')
-                .split('\n')
-                .map((l, i) => <span key={i} className={wireClass(l)}>{l}{'\n'}</span>)}
-        </pre>
-    </div>
-))
-
-const App = observer(() => (
-    <div className="app">
-        <Rail />
-        {store.error != null ? <div className="wrap err">hub api unreachable: {store.error}</div>
-            : location.pathname === '/status' ? <Status /> : <Attention />}
-    </div>
-))
+    )
+})
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>