rvlib-shipkit 0.5.0 → 0.7.0

package/src/serve/hub-pages.ts

@@ -1,84 +1,45 @@
-// The hub's two no-build pages (served by serve-hub.ts): the landing page
-// whose links ARE the toolbox, and the /status page (STATUS.md + a
-// "run check" button streaming wire lines). Same style family as the
-// studio: one template string, vanilla JS, no build step, no CDN.
+// Shared hub-page plumbing. The hub UI itself is the Bun-native React app
+// in hub-app/ (HTML import, served by serve-hub.ts — build/webapp
+// doctrine). This module keeps what the LEGACY pages (graph pages, studio
+// SPA) still need until they migrate: the server-injected rail, and the
+// attention section types the collector + React app share.
 import type { HubTool } from './serve-hub.ts'
 
-const esc = (s: string): string => s.replace(/&/g, '&amp;').replace(/</g, '&lt;')
+const esc = (s: string): string => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;')
 
-const SHELL = `
-:root{--bg:#141210;--panel:#1e1a15;--panel2:#262019;--line:#332b22;--ink:#f3ebe0;--dim:#a89a88;
- --accent:#e88c28;--gold:#ffcf5c;--teal:#58c0b0;--red:#e05252}
-*{box-sizing:border-box}
-body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,sans-serif;min-height:100vh}
-.wrap{max-width:860px;margin:0 auto;padding:40px 24px}
-h1{font-size:20px;margin:0}
-h1 small{color:var(--dim);font-weight:400;font-size:13px;margin-left:10px}
-.crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
-.crumb a{color:var(--accent);text-decoration:none}.crumb a:hover{color:var(--gold)}
-`
+// ── the rail: thin fixed tab bar, injected into legacy hub-served pages ───
+const RAIL_ICONS: Record<string, string> = { '/': '⚡', '/graph/wiki': '🕸', '/graph/agent': '🤖', '/assets/': '🖼', '/status': '📊' }
 
-export function landingPage(o: { name: string; port: number; tools: HubTool[] }): string {
-    const cards = o.tools
-        .map((t) => `<a class=card href="${esc(t.path)}"><b>${esc(t.label)}</b><span>${esc(t.desc)}</span><code>${esc(t.path)}</code></a>`)
-        .join('\n')
-    return `<!doctype html><html><head><meta charset=utf-8>
-<meta name=viewport content="width=device-width,initial-scale=1"><title>${esc(o.name)} · shipkit</title>
-<style>${SHELL}
-.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:26px}
-.card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
- padding:16px;text-decoration:none;color:var(--ink)}
-.card:hover{border-color:var(--accent);background:var(--panel2)}
-.card b{font-size:15px}.card span{font-size:13px;color:var(--dim)}
-.card code{font:11px ui-monospace,Menlo,monospace;color:var(--teal)}
-</style></head><body><div class=wrap>
-<div class=crumb>shipkit hub</div>
-<h1>${esc(o.name)}<small>http://localhost:${o.port}</small></h1>
-<div class=cards>
-${cards}
-</div>
-</div></body></html>`
-}
+const RAIL_CSS = `
+.skrail{position:fixed;left:0;top:0;bottom:0;width:46px;z-index:9999;display:flex;flex-direction:column;
+ align-items:center;padding-top:10px;gap:4px;background:#17140f;border-right:1px solid #332b22}
+.skrail a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;
+ font-size:17px;text-decoration:none;border-left:2px solid transparent;filter:grayscale(35%);opacity:.75;position:relative}
+.skrail a:hover{background:#262019;filter:none;opacity:1}
+.skrail a.on{background:#262019;border-left-color:#e88c28;filter:none;opacity:1}
+.skrail a i{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:#e05252}
+body{padding-left:46px}`
 
-export function statusPage(o: { name: string; statusMd: string | null }): string {
-    const body = o.statusMd ?? 'no STATUS.md yet — hit "run check" (or run: shipkit check)'
-    return `<!doctype html><html><head><meta charset=utf-8>
-<meta name=viewport content="width=device-width,initial-scale=1"><title>${esc(o.name)} · status</title>
-<style>${SHELL}
-.bar{display:flex;align-items:center;gap:12px;margin:18px 0 12px}
-button{background:var(--accent);color:#1a1206;border:0;border-radius:9px;padding:8px 14px;font-weight:650;cursor:pointer}
-button:disabled{opacity:.45;cursor:default}
-#note{font-size:12px;color:var(--dim)}
-pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;overflow-x:auto;
- font:12.5px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap}
-.ok{color:var(--teal)}.warn{color:var(--gold)}.fail{color:var(--red)}.dim{color:var(--dim)}
-</style></head><body><div class=wrap>
-<div class=crumb><a href="/">shipkit hub</a> / status</div>
-<h1>${esc(o.name)}<small>STATUS.md</small></h1>
-<div class=bar><button id=run>run check</button><span id=note>shells <code>shipkit check</code>, wire lines stream in below</span></div>
-<pre id=out></pre>
-<script>
-const out=document.getElementById('out'),btn=document.getElementById('run'),note=document.getElementById('note')
-// wire-line coloring: ok/WARN/FAIL/skip prefixes → the house palette
-const esc=s=>s.replace(/&/g,'&amp;').replace(/</g,'&lt;')
-const cls=l=>{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 paint=text=>{out.innerHTML=text.split('\\n').map(l=>'<span class="'+cls(l)+'">'+esc(l)+'</span>').join('\\n')}
-paint(${JSON.stringify(body).replaceAll('<', '\\u003c')})
-btn.onclick=async()=>{
- btn.disabled=true;note.textContent='running…';let text=''
- try{
-  const r=await fetch('status/run',{method:'POST'})
-  const rd=r.body.getReader(),dec=new TextDecoder()
-  for(;;){const{done,value}=await rd.read();if(done)break;text+=dec.decode(value,{stream:true});paint(text)}
-  note.textContent='done — STATUS.md refreshed on disk'
- }catch(e){text+='\\nFAIL stream broke: '+e;paint(text);note.textContent='stream broke'}
- btn.disabled=false
-}
-</script>
-</div></body></html>`
+/** Inject the rail into a legacy hub-served HTML document (post-<body>,
+ *  fixed position — the page needs no layout knowledge). The React app
+ *  renders its own identical rail from /hub.json. */
+export function withRail(html: string, o: { tools: HubTool[]; active: string }): string {
+    const items = [{ path: '/', label: 'attention', desc: 'everything red' }, ...o.tools.filter((t) => t.path !== '/')]
+        .map((t) => {
+            const on = o.active === t.path || (t.path !== '/' && o.active.startsWith(t.path))
+            const dot = t.path === '/' ? '<i id=skdot style="display:none"></i>' : ''
+            return `<a class="${on ? 'on' : ''}" href="${esc(t.path)}" title="${esc(t.label)} — ${esc(t.desc)}">${RAIL_ICONS[t.path] ?? '·'}${dot}</a>`
+        })
+        .join('')
+    // the red dot fetches client-side: a passive page nav must never run the
+    // attention collector server-side (cost + heal side-effects)
+    const dotScript = `<script>fetch('/api/attention.json').then(r=>r.json()).then(j=>{const n=(j.sections||[]).filter(s=>s.tone==='red').reduce((a,s)=>a+s.lines.length,0);if(n>0)document.getElementById('skdot').style.display=''}).catch(()=>{})</script>`
+    return html.replace(/<body([^>]*)>/, `<body$1><style>${RAIL_CSS}</style><nav class=skrail>${items}</nav>${dotScript}`)
 }
+
+// ── attention data shapes (collector in run-serve, rendering in hub-app) ──
+export type AttentionLine = { text: string; href?: string }
+export type AttentionSection = { title: string; tone: 'red' | 'warn'; lines: AttentionLine[]; href?: string }
+
+export const attentionRedCount = (sections: AttentionSection[]): number =>
+    sections.filter((s) => s.tone === 'red').reduce((n, s) => n + s.lines.length, 0)

package/src/serve/run-serve.ts

@@ -5,14 +5,20 @@
 // kit.ts loads. Port: --port > serve.port > a deterministic house-range
 // default (4800-4979, hashed from the repo name — stable across launches;
 // pin serve.port when two repos collide).
-import { existsSync } from 'fs'
+import { existsSync, readdirSync, statSync } from 'fs'
 import { join } from 'path'
 import { fileURLToPath } from 'url'
-import { loadKit } from '../assets/kit-config.ts'
+import { loadKit, allAssets, type ResolvedKit } from '../assets/kit-config.ts'
+import { isStale } from '../assets/gen/derived.ts'
+import { assetDir, listRolls, readPick } from '../assets/roll-workspace.ts'
+import { healIdentity } from '../assets/run-assets.ts'
 import { page as studioPage } from '../assets/server/studio-page.ts'
 import { studioRoutes, type StudioRoutes } from '../assets/server/studio-server.ts'
-import { loadRepoConfig, type RepoConfig } from '../repo-config.ts'
+import { openAsks } from '../asks/asks-queue.ts'
+import { evaluateContracts } from '../contracts/contracts-engine.ts'
+import { activeContracts, contractsConfigFrom, loadRepoConfig, type RepoConfig } from '../repo-config.ts'
 import { scanMdGraph } from '../wiki/scan-md.ts'
+import type { AttentionSection } from './hub-pages.ts'
 import { serveHub, type HubDeps } from './serve-hub.ts'
 
 export type ServeIo = { print: (l: string) => void; printErr: (l: string) => void }
@@ -32,12 +38,15 @@ export async function resolveHubDeps(root: string, c: RepoConfig, io: ServeIo, o
         ? { title: `${c.name} agent/`, load: () => scanMdGraph({ root: agentRoot, index: c.serve?.agentIndex }) }
         : null
     let studio: StudioRoutes | null = null
+    let kit: ResolvedKit | null = null
     if (existsSync(join(root, '.rv-assets/kit.ts'))) {
         // a broken kit must not take the graphs and status down with it —
         // WARN + mount everything else
         try {
-            studio = await studioRoutes({ kit: await loadKit(root), root, page: studioPage })
+            kit = await loadKit(root)
+            studio = await studioRoutes({ kit, root, page: studioPage })
         } catch (e) {
+            kit = null
             io.print(`WARN assets studio not mounted: ${(e as Error).message}`)
         }
     }
@@ -50,6 +59,76 @@ export async function resolveHubDeps(root: string, c: RepoConfig, io: ServeIo, o
         agentGraph,
         studio,
         checkCmd: [process.execPath, cli, 'check'],
+        attention: attentionCollector(root, c, kit),
+    }
+}
+
+// ── the / dashboard's data: everything red, one collector per source, each
+//    failure-isolated (a broken source reports itself, never blanks the page)
+export function attentionCollector(root: string, c: RepoConfig, kit: ResolvedKit | null): () => Promise<AttentionSection[]> {
+    const guard = async (title: string, tone: 'red' | 'warn', body: () => Promise<AttentionSection['lines']>): Promise<AttentionSection> => {
+        try { return { title, tone, lines: await body() } } catch (e) { return { title, tone: 'red', lines: [{ text: `collector broke: ${(e as Error).message}` }] } }
+    }
+    return async () => {
+        const sections = await Promise.all([
+            guard('failing checks', 'red', async () => {
+                const p = join(root, 'STATUS.md')
+                if (!existsSync(p)) return []
+                // a cred FAIL whose ask already sits in the asks section is
+                // ONE action shown twice — the ask (his hands) wins
+                const askDir = join(root, c.asks?.dir ?? 'asks')
+                const askText = existsSync(askDir) ? openAsks(askDir).map((a) => a.title.toLowerCase()).join(' ') : ''
+                return (await Bun.file(p).text()).split('\n')
+                    .filter((l) => l.trimStart().startsWith('FAIL'))
+                    .filter((l) => {
+                        const cred = l.match(/cred rv\/([a-z0-9-]+)\/[a-z0-9-]+ missing/)?.[1]
+                        return cred == null || !askText.includes(cred)
+                    })
+                    .map((text) => ({ text, href: '/status' }))
+            }),
+            guard('asks — waiting on you', 'red', async () => {
+                const dir = join(root, c.asks?.dir ?? 'asks')
+                if (!existsSync(dir)) return [] // read path must not mint an asks/ dir
+                return openAsks(dir).map((a) => ({ text: `${a.title}${a.kind !== '' ? ` (${a.kind})` : ''}` }))
+            }),
+            guard('assets', 'red', async () => {
+                // self-heal first: identity re-renders itself on brand.ts
+                // drift; only pick-blocked (taste) surfaces below
+                const idn = await healIdentity(root)
+                const lines: AttentionSection['lines'] = []
+                if (idn.state === 'blocked') lines.push({ text: `identity — ${idn.detail ?? 'blocked'}`, href: '/assets/#identity-logo' })
+                if (kit == null) return lines
+                for (const f of allAssets(kit)) {
+                    const dir = assetDir(join(root, kit.workspace), f.asset.id)
+                    const rolls = listRolls(dir)
+                    const manual = f.kind.generate.backend === 'manual'
+                    if (manual && rolls.length === 0) lines.push({ text: `${f.asset.id} — manual, nothing uploaded`, href: `/assets/#${f.asset.id}` })
+                    else if (rolls.length > 0 && (await readPick(dir)).pick == null) lines.push({ text: `${f.asset.id} — ${rolls.length} roll(s), none picked`, href: `/assets/#${f.asset.id}` })
+                    else if (await isStale(kit, join(root, kit.workspace), f)) lines.push({ text: `${f.asset.id} — stale (a parent was re-picked)`, href: `/assets/#${f.asset.id}` })
+                }
+                return lines
+            }),
+            guard('contracts', 'red', async () => {
+                const r = await evaluateContracts(activeContracts(c), contractsConfigFrom(c, root))
+                return r.lines.filter((l) => l.kind === 'fail').map((l) => ({ text: l.text }))
+            }),
+            guard('contract warnings', 'warn', async () => {
+                const r = await evaluateContracts(activeContracts(c), contractsConfigFrom(c, root))
+                return r.lines.filter((l) => l.kind === 'warn').map((l) => ({ text: l.text }))
+            }),
+            guard('posts to write', 'warn', async () => {
+                const social = join(root, '.rv-social')
+                if (!existsSync(social)) return []
+                const lines: AttentionSection['lines'] = []
+                for (const ch of readdirSync(social)) {
+                    const d = join(social, ch)
+                    if (!statSync(d).isDirectory()) continue
+                    for (const f of readdirSync(d).filter((x) => x.endsWith('.md'))) lines.push({ text: `${ch}/${f}` })
+                }
+                return lines
+            }),
+        ])
+        return sections
     }
 }
 

package/src/serve/serve-hub.ts

@@ -9,7 +9,11 @@ import { join } from 'path'
 import { graphHtml } from 'rvlib-shipkit/src/wiki/graph-page.ts'
 import type { MdGraph } from 'rvlib-shipkit/src/wiki/md-graph.ts'
 import type { StudioRoutes } from '../assets/server/studio-server.ts'
-import { landingPage, statusPage } from './hub-pages.ts'
+import { withRail, type AttentionSection } from './hub-pages.ts'
+// the hub UI is a Bun-native React app (HTML import, no vite, no build) —
+// build/webapp doctrine; legacy pages (graphs, studio SPA) keep the
+// server-injected rail until they migrate
+import hubIndex from './hub-app/index.html'
 
 export type HubGraph = { title: string; load: () => MdGraph }
 export type HubTool = { path: string; label: string; desc: string }
@@ -25,6 +29,9 @@ export type HubDeps = {
     studio: StudioRoutes | null
     /** argv shelling the check run streamed by /status/run (test seam) */
     checkCmd: string[]
+    /** the / dashboard's data — everything red, gathered per request
+     *  (checks · asks · assets · contracts · posts; run-serve builds it) */
+    attention: () => Promise<AttentionSection[]>
 }
 export type Hub = { server: ReturnType<typeof Bun.serve>; tools: HubTool[]; stop: () => void }
 
@@ -40,24 +47,33 @@ export function hubTools(d: Pick<HubDeps, 'wikiGraph' | 'agentGraph' | 'studio'>
 
 export function serveHub(d: HubDeps): Hub {
     const tools = hubTools(d)
-    const html = (s: string): Response => new Response(s, { headers: { 'content-type': 'text/html; charset=utf-8' } })
+    // every HTML page carries the rail — one keystroke between surfaces;
+    // the red dot self-fetches client-side (no collector on passive navs)
+    const shell = (s: string, active: string): Response =>
+        new Response(withRail(s, { tools, active }), { headers: { 'content-type': 'text/html; charset=utf-8' } })
     const server: ReturnType<typeof Bun.serve> = Bun.serve({
         hostname: '127.0.0.1',
         port: d.port,
+        // / (attention dashboard) and /status are the React app — one HTML
+        // bundle, view picked by pathname client-side
+        routes: { '/': hubIndex, '/status': hubIndex },
         async fetch(req): Promise<Response> {
             const path = new URL(req.url).pathname
-            if (path === '/') return html(landingPage({ name: d.name, port: server.port ?? d.port, tools }))
             // identity probe: lets a second launch tell "same repo, another
             // window" from "a DIFFERENT repo hashed onto my port"
             if (path === '/hub.json') return Response.json({ hub: 'shipkit', name: d.name, tools })
-            if (path === '/graph/wiki') return html(graphHtml(d.wikiGraph.load(), { title: d.wikiGraph.title }))
-            if (path === '/graph/wiki/graph.json') return Response.json(d.wikiGraph.load())
-            if (d.agentGraph != null && path === '/graph/agent') return html(graphHtml(d.agentGraph.load(), { title: d.agentGraph.title }))
-            if (d.agentGraph != null && path === '/graph/agent/graph.json') return Response.json(d.agentGraph.load())
-            if (path === '/status') {
+            if (path === '/api/attention.json') {
+                const sections = await d.attention().catch((e: Error) => [{ title: 'attention collector broke', tone: 'red' as const, lines: [{ text: e.message }] }])
+                return Response.json({ sections })
+            }
+            if (path === '/api/status.json') {
                 const p = join(d.root, 'STATUS.md')
-                return html(statusPage({ name: d.name, statusMd: existsSync(p) ? await Bun.file(p).text() : null }))
+                return Response.json({ statusMd: existsSync(p) ? await Bun.file(p).text() : null })
             }
+            if (path === '/graph/wiki') return shell(graphHtml(d.wikiGraph.load(), { title: d.wikiGraph.title }), path)
+            if (path === '/graph/wiki/graph.json') return Response.json(d.wikiGraph.load())
+            if (d.agentGraph != null && path === '/graph/agent') return shell(graphHtml(d.agentGraph.load(), { title: d.agentGraph.title }), path)
+            if (d.agentGraph != null && path === '/graph/agent/graph.json') return Response.json(d.agentGraph.load())
             if (path === '/status/run' && req.method === 'POST') {
                 // stream wire lines as the check emits them; sh merges stderr
                 // so FAIL lines reach the page, not just the terminal
@@ -68,6 +84,11 @@ export function serveHub(d: HubDeps): Hub {
                 // the studio page fetches RELATIVE urls — it must live under
                 // the slash-terminated prefix for them to resolve
                 if (path === '/assets') return new Response(null, { status: 307, headers: { location: '/assets/' } })
+                if (path === '/assets/' && req.method === 'GET') {
+                    // the SPA document gets the rail too; API routes untouched
+                    const res = await d.studio.handle(req, '/')
+                    return shell(await res.text(), '/assets/')
+                }
                 if (path.startsWith('/assets/')) return d.studio.handle(req, path.slice('/assets'.length))
             }
             return new Response('not found', { status: 404 })

package/src/shipkit.ts

@@ -6,7 +6,8 @@ export type { RepoConfig, ServeConfig, FloorResolution, FloorSource } from './re
 export { serveHub, hubTools } from './serve/serve-hub.ts'
 export type { Hub, HubDeps, HubGraph, HubTool } from './serve/serve-hub.ts'
 export { runServe, resolveHubDeps, defaultHubPort } from './serve/run-serve.ts'
-export { landingPage, statusPage } from './serve/hub-pages.ts'
+export { withRail, attentionRedCount } from './serve/hub-pages.ts'
+export type { AttentionSection, AttentionLine } from './serve/hub-pages.ts'
 export { discoverChecks } from './core/discover-checks.ts'
 export type { DiscoveredCheck } from './core/discover-checks.ts'
 export { runTasks, selectTasks } from './core/task-runner.ts'
@@ -33,8 +34,8 @@ export type { Ask, CreateOpts } from './asks/asks-queue.ts'
 // assets surface (folded in from the standalone atelier lib; that npm
 // package is frozen). A repo's .rv-assets/kit.ts imports defineKit and
 // declares its kinds; `shipkit assets …` derives the rest.
-export { defineKit, defineKind, comfy, canvas, geometryPanel, gridPanel, customPanel, validateKit, missingPanelScripts, loadKit, findAsset, allAssets, categoriesOf } from './assets/kit-config.ts'
-export type { KitConfig, ResolvedKit, Kind, KindMeta, AssetSpec, GeneratorSpec, ComfyGen, CanvasGen, PanelSpec, GeometryPanelSpec, GridPanelSpec, CustomPanelSpec, FoundAsset, ShipContext, ShipFn } from './assets/kit-config.ts'
+export { defineKit, defineKind, comfy, canvas, manual, gemini, mediaOf, MEDIA_EXTS, geometryPanel, gridPanel, customPanel, validateKit, missingPanelScripts, loadKit, findAsset, allAssets, categoriesOf } from './assets/kit-config.ts'
+export type { KitConfig, ResolvedKit, Kind, KindMeta, Media, AssetSpec, GeneratorSpec, ComfyGen, CanvasGen, ManualGen, GeminiGen, PanelSpec, GeometryPanelSpec, GridPanelSpec, CustomPanelSpec, FoundAsset, ShipContext, ShipFn } from './assets/kit-config.ts'
 export { identityKinds, renderIdentity, renderIdentityFromMark, NO_PICK_FIX, FAVICON_SIZE, OG_W, OG_H, LOGO_SIZE } from './assets/kits/identity-kit.ts'
 export type { Brand } from './assets/kits/identity-kit.ts'
 export { serveStudio, studioRoutes } from './assets/server/studio-server.ts'
@@ -50,7 +51,7 @@ export { loadWorkflows, workflowFor } from './assets/gen/workflow-loader.ts'
 export type { Workflow, Sidekick, Binding, Graph } from './assets/gen/workflow-loader.ts'
 export { toPng, alphaHeight } from './assets/image-ops.ts'
 export { updateJson, readJson } from './assets/json-store.ts'
-export { assetDir, listRolls, isRollFile, readPick, updatePick, metaPath, pickPath, readPromptOverlay, updatePromptOverlay, promptPath } from './assets/roll-workspace.ts'
+export { assetDir, listRolls, isRollFile, isAudioRoll, readPick, updatePick, metaPath, pickPath, readPromptOverlay, updatePromptOverlay, promptPath } from './assets/roll-workspace.ts'
 export type { PickState, PromptOverlay } from './assets/roll-workspace.ts'
 export { scanMdGraph } from './wiki/scan-md.ts'
 export { lintMd } from './wiki/lint-md.ts'