rvlib-shipkit 0.5.0 → 0.7.0

package/src/assets/server/studio-page.ts

@@ -48,6 +48,14 @@ select,input[type=number]{background:var(--bg);color:var(--ink);border:1px solid
 .progbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
 .vig.gen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dim);font-size:11px}
 .card .th .spin{position:absolute;top:8px;right:8px}
+.dot.miss{background:#e5484d;border-color:#e5484d}
+.dot.stale{background:#f5a524;border-color:#f5a524}
+.vig.aud{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:20px}
+.vig.aud audio{width:100%;height:24px}
+.stageaud{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:48px;padding:40px}
+.stageaud audio{width:min(480px,80%)}
+.card .aud{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:28px}
+.card .aud audio{width:92%;height:24px}
 .detnote{font-size:11px;color:var(--teal);line-height:1.25;max-width:150px}
 /* ── per-asset info surface (W2-2) ── */
 .info{display:none;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
@@ -145,6 +153,8 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
    <select id=n><option>1</option><option selected>3</option><option>6</option><option>9</option><option>12</option></select>
    <button id=go disabled>Generate</button>
    <div id=detnote class=detnote style="display:none">deterministic — rolls identical</div>
+   <button id=upload class=ghost style="display:none" title="add files as rolls (or drag-drop onto the strip)">upload</button>
+   <input type=file id=upfile multiple style="display:none">
    <button id=qclear class=ghost title="drop queued jobs">clear queue</button>
    <button id=qcancel class=ghost style="display:none" title="interrupt the current job (queued jobs stay)">stop current</button>
   </div>
@@ -216,18 +226,18 @@ window.addEventListener('hashchange',restoreFromHash)
 function toggleFold(c){openCats.has(c)?openCats.delete(c):openCats.add(c);lastSideSig=null;renderSide(assets)}
 function renderSide(list){
  assets=list;$('#count').textContent=list.length
- const sig=JSON.stringify(list.map(a=>[a.id,a.rolls,a.picked]))+'|'+cur+'|'+catMode+'|'+[...openCats].join(',')+'|'+pending.join(',')
+ const sig=JSON.stringify(list.map(a=>[a.id,a.rolls,a.picked,a.stale]))+'|'+cur+'|'+catMode+'|'+[...openCats].join(',')+'|'+pending.join(',')
  if(sig===lastSideSig&&$('#list').innerHTML!=='')return; lastSideSig=sig
  const cats=[...new Set(list.map(a=>a.cat))]
  $('#list').innerHTML=cats.map(c=>{
   const open=openCats.has(c)
   const head='<div class=gname><span><span class=fold onclick="toggleFold(\\''+jsq(c)+'\\')">'+(open?'▾':'▸')+'</span> '+
    '<span class=cn onclick="showCat(\\''+jsq(c)+'\\')" title="grid view">'+esc(c)+'</span>'+
-   '</span><span class=catgen>'+[1,2,3].map(n=>'<button onclick="genCat(\\''+jsq(c)+'\\','+n+')">+'+n+'</button>').join('')+'</span></div>'
+   '</span>'+(list.filter(a=>a.cat===c).every(a=>a.manual)?'':'<span class=catgen>'+[1,2,3].map(n=>'<button onclick="genCat(\\''+jsq(c)+'\\','+n+')">+'+n+'</button>').join('')+'</span>')+'</div>'
   if(!open)return head
   return head+list.filter(a=>a.cat===c).map(a=>
    '<div class="arow'+(a.id===cur?' sel':'')+'" data-id="'+esc(a.id)+'" onclick="selectAsset(\\''+jsq(a.id)+'\\')"><div class=lb><b>'+esc(a.label)+
-   '</b><span>'+a.rolls+' rolls</span></div>'+(pending.includes(a.id)?'<div class=spin></div>':'<div class="dot '+(a.picked?'done':(a.rolls?'some':''))+'"></div>')+'</div>').join('')
+   '</b><span>'+a.rolls+' rolls</span></div>'+(pending.includes(a.id)?'<div class=spin></div>':'<div class="dot '+(a.stale?'stale':(a.picked?'done':(a.rolls?'some':(a.manual?'miss':''))))+'"'+(a.manual&&!a.rolls?' title="manual asset — nothing uploaded yet"':'')+'></div>')+'</div>').join('')
  }).join('')
 }
 // ── per-asset info surface (W2-2): backend, workflow provenance, ship target,
@@ -265,18 +275,37 @@ async function selectAsset(id,writeHash=true){
  if(tab.indexOf('c:')===0&&!customs.some(c=>'c:'+c.id===tab))tab='asset' // new asset may not carry the open panel
  renderCustomTabs()
  $('#prompt').value=r.asset?r.asset.prompt:a.prompt
- $('#go').disabled=false;$('#saveprompt').disabled=false;$('#promptmsg').textContent=''
+ $('#saveprompt').disabled=false;$('#promptmsg').textContent=''
+ // manual kinds: nothing generates them — upload is the only roll source
+ const man=!!a.manual
+ $('#go').disabled=man;$('#go').style.display=man?'none':''
+ $('#upload').style.display=''
+ $('#upfile').accept=(a.media==='audio'?'.mp3,.wav,.ogg,.m4a':'.png,.webp')
  // deterministic canvas kinds: a slot machine with one outcome — cap rolls at 1
  const det=!!(r.info&&r.info.deterministic),n=$('#n')
- n.disabled=det;if(det)n.value='1';$('#detnote').style.display=det?'':'none'
+ n.disabled=det||man;if(det)n.value='1';n.style.display=man?'none':''
+ $('#detnote').textContent=man?'manual — upload files (drag-drop works)':'deterministic — rolls identical'
+ $('#detnote').style.display=(det||man)?'':'none'
  renderInfo(r.info)
  await renderRolls(true);loadTab()
 }
+const isAud=n=>['mp3','wav','ogg','m4a'].includes(String(n||'').split('.').pop())
 function setStage(src){
- const st=$('#stage');let img=st.querySelector('img.roll')
+ const st=$('#stage');st.querySelector('.stageaud')?.remove()
+ let img=st.querySelector('img.roll')
  if(!img){st.querySelector('.ph')?.remove();img=document.createElement('img');img.className='roll';st.appendChild(img);img.onload=positionOverlay}
  img.src=src
 }
+function setStageAud(n){
+ const st=$('#stage')
+ const curAud=st.querySelector('.stageaud')
+ if(curAud&&curAud.dataset.n===n)return // keep playback alive across heartbeats
+ st.querySelector('img.roll')?.remove();st.querySelector('.ph')?.remove();curAud?.remove()
+ const d=document.createElement('div');d.className='stageaud';d.dataset.n=n
+ d.innerHTML='🔊<audio controls src="'+imgUrl(cur,n)+'"></audio>'
+ st.appendChild(d);hideOverlay()
+}
+const showRoll=n=>isAud(n)?setStageAud(n):setStage(imgUrl(cur,n))
 async function renderRolls(reset){
  if(!cur)return
  const r=await j('/api/asset?id='+encodeURIComponent(cur))
@@ -286,25 +315,28 @@ async function renderRolls(reset){
  if(!reset&&sig===lastRollSig)return; lastRollSig=sig
  const strip=$('#strip')
  if(!rolls.length&&genHere){strip.innerHTML='<div class="vig gen"><div class=spin></div>generating…</div>';hideOverlay()
-  const gst=$('#stage');gst.querySelector('img.roll')?.remove()
+  const gst=$('#stage');gst.querySelector('img.roll')?.remove();gst.querySelector('.stageaud')?.remove()
   if(!gst.querySelector('.ph')){const ph=document.createElement('div');ph.className='ph';ph.textContent='generating…';gst.appendChild(ph)}
   active=null;return}
- if(!rolls.length){strip.innerHTML='<div class=ph>no rolls — hit Generate</div>';hideOverlay()
-  const st=$('#stage');st.querySelector('img.roll')?.remove()
+ if(!rolls.length){const a0=assets.find(x=>x.id===cur)
+  strip.innerHTML='<div class=ph>'+(a0&&a0.manual?'no files — upload (or drag-drop here)':'no rolls — hit Generate')+'</div>';hideOverlay()
+  const st=$('#stage');st.querySelector('img.roll')?.remove();st.querySelector('.stageaud')?.remove()
   if(!st.querySelector('.ph')){const ph=document.createElement('div');ph.className='ph';ph.textContent='no rolls yet';st.appendChild(ph)}
   active=null;return}
  if(reset||!rolls.some(x=>x.name===active))active=(rolls.find(x=>x.picked)||rolls[0]).name
- setStage(imgUrl(cur,active))
+ showRoll(active)
  if(hasGeom)await loadRect()
+ const btns='<div class=btns><button class=b-pick>pick</button><button class=b-alt>alt</button><button class=b-del>✕</button></div>'
  strip.innerHTML=rolls.map(x=>
-  '<div class="vig'+(x.name===active?' active':'')+(x.picked?' picked':'')+(x.alt?' alt':'')+'" data-n="'+x.name+'">'+
-  '<img src="'+imgUrl(cur,x.name)+'">'+(x.picked?'<span class=st>★</span>':'')+
-  '<div class=btns><button class=b-pick>pick</button><button class=b-alt>alt</button><button class=b-del>✕</button></div></div>').join('')
+  '<div class="vig'+(isAud(x.name)?' aud':'')+(x.name===active?' active':'')+(x.picked?' picked':'')+(x.alt?' alt':'')+'" data-n="'+x.name+'">'+
+  (isAud(x.name)?'🔊<audio controls src="'+imgUrl(cur,x.name)+'"></audio>':'<img src="'+imgUrl(cur,x.name)+'">')+(x.picked?'<span class=st>★</span>':'')+
+  btns+'</div>').join('')
   +(genHere?'<div class="vig gen"><div class=spin></div>generating…</div>':'')
  strip.querySelectorAll('.vig[data-n]').forEach(v=>{
   const n=v.dataset.n
-  v.onmouseenter=()=>setStage(imgUrl(cur,n))
-  v.onmouseleave=()=>setStage(imgUrl(cur,active))
+  // hover-preview stays image-only — recreating an <audio> mid-playback on hover would cut the sound
+  v.onmouseenter=()=>{if(!isAud(n))setStage(imgUrl(cur,n))}
+  v.onmouseleave=()=>showRoll(active) // setStageAud keepalive avoids audio recreate when unchanged
   v.onclick=()=>{active=n;lastRollSig=null;renderRolls(false);if(tab!=='asset')loadTab()} // meta + custom panels are per-roll
   v.querySelector('.b-pick').onclick=e=>{e.stopPropagation();pickRoll(n)}
   v.querySelector('.b-alt').onclick=e=>{e.stopPropagation();post('/api/alt',{id:cur,name:n}).then(()=>renderRolls(false))}
@@ -321,10 +353,24 @@ async function discard(n){
  if(active===n)active=null
  lastRollSig=null;lastSideSig=null;await renderRolls(true)
 }
-async function genCat(c,n){await post('/api/generate-cat',{cat:c,count:n});heartbeat()}
+async function genCat(c,n){const r=await post('/api/generate-cat',{cat:c,count:n});if(r&&r.error)$('#status').textContent=r.error;heartbeat()}
 $('#go').onclick=async()=>{if(!cur)return;await post('/api/generate',{id:cur,prompt:$('#prompt').value,count:+$('#n').value});heartbeat()}
 $('#qclear').onclick=()=>post('/api/queue/clear')
 $('#qcancel').onclick=()=>post('/api/interrupt')
+// ── upload: button, file input, drag-drop on the strip (manual kinds' only roll source) ──
+async function uploadFiles(files){
+ if(!cur||!files||!files.length)return
+ for(const f of files){
+  const fd=new FormData();fd.append('id',cur);fd.append('file',f)
+  const r=await fetch(R('/api/upload'),{method:'POST',body:fd}).then(x=>x.json()).catch(e=>({error:String(e)}))
+  if(r.error)$('#status').textContent='upload FAIL: '+r.error
+ }
+ lastRollSig=null;lastSideSig=null;await renderRolls(false)
+}
+$('#upload').onclick=()=>$('#upfile').click()
+$('#upfile').onchange=async e=>{await uploadFiles(e.target.files);e.target.value=''}
+$('#strip').addEventListener('dragover',e=>e.preventDefault())
+$('#strip').addEventListener('drop',e=>{e.preventDefault();uploadFiles(e.dataTransfer.files)})
 $('#saveprompt').onclick=async()=>{
  const r=await post('/api/prompt',{id:cur,prompt:$('#prompt').value})
  $('#promptmsg').textContent=r.error?('FAIL: '+r.error):'saved (overlay)'
@@ -492,9 +538,11 @@ async function fillCat(force){
   const fl=row.rect&&row.rect.flip
   const ovm=row.rect?('<div class=ovmini style="left:'+pc(fl?TEX-row.rect.x-row.rect.w:row.rect.x)+';top:'+pc(row.rect.y)+
    ';width:'+pc(row.rect.w)+';height:'+pc(row.rect.h)+'"></div>'):''
-  return '<div class=card><div class=th><img src="'+thumbUrl(row.id)+'"'+(fl?' style="transform:scaleX(-1)"':'')+'>'+ovm+(pending.includes(row.id)?'<div class=spin></div>':'')+'</div>'+
+  return '<div class=card>'+(isAud(row.name)
+   ?'<div class=aud>🔊<audio controls src="'+imgUrl(row.id,row.name)+'"></audio>'+(pending.includes(row.id)?'<div class=spin></div>':'')+'</div>'
+   :'<div class=th><img src="'+thumbUrl(row.id)+'"'+(fl?' style="transform:scaleX(-1)"':'')+'>'+ovm+(pending.includes(row.id)?'<div class=spin></div>':'')+'</div>')+
   '<div class=nm onclick="selectAsset(\\''+jsq(row.id)+'\\')">'+esc(row.label)+'</div>'+
-  (row.icon?'':('<div class=row><label>size <input type=number step=0.1 min=0.1 value="'+(row.rect?row.rect.size:1)+'"'+
+  ((row.icon||isAud(row.name))?'':('<div class=row><label>size <input type=number step=0.1 min=0.1 value="'+(row.rect?row.rect.size:1)+'"'+
    ' onchange="setSize(\\''+jsq(row.id)+'\\',\\''+jsq(row.name)+'\\',this.value)"></label>'+
    '<button class=ghost onclick="toggleFlip(\\''+jsq(row.id)+'\\',\\''+jsq(row.name)+'\\')">⇆ flip</button></div>'))+'</div>'
  }).join('')

package/src/assets/server/studio-server.ts

@@ -4,10 +4,11 @@
 //
 // ids/names are validated against the kit + the roll-file regex — no path
 // from the client ever reaches the filesystem unchecked.
-import { existsSync, unlinkSync } from 'fs'
+import { existsSync, mkdirSync, unlinkSync } from 'fs'
 import { join, relative } from 'path'
-import { findAsset, allAssets, missingPanelScripts, type CustomPanelSpec, type FoundAsset, type GeometryPanelSpec, type ResolvedKit, type ShipFn } from '../kit-config.ts'
+import { findAsset, allAssets, mediaOf, missingPanelScripts, MEDIA_EXTS, type CustomPanelSpec, type FoundAsset, type GeometryPanelSpec, type ResolvedKit, type ShipFn } from '../kit-config.ts'
 import { interrupt, randomSeed, type OnProgress } from '../gen/comfy-gen.ts'
+import { isStale, parentIdsOf, resolveParentContext, type ParentContext } from '../gen/derived.ts'
 import { generateRoll, type ComfyRuntime } from '../gen/generate-roll.ts'
 import { loadWorkflows, type Workflow } from '../gen/workflow-loader.ts'
 import { alphaHeight, toPng } from '../image-ops.ts'
@@ -20,15 +21,16 @@ export type StudioDeps = {
     kit: ResolvedKit
     root: string
     page: () => string
-    /** test seam — defaults to the comfy engine */
-    generateOne?: (found: FoundAsset, prompt: string, seed: number, destDir: string, onProgress?: OnProgress) => Promise<void>
+    /** test seam — defaults to the real engines. `context` = a derived
+     *  asset's resolved parent picks (queue resolves it at run time) */
+    generateOne?: (found: FoundAsset, prompt: string, seed: number, destDir: string, onProgress?: OnProgress, context?: ParentContext) => Promise<void>
 }
 
 export type Studio = { server: ReturnType<typeof Bun.serve>; queue: StudioQueue; stop: () => void }
 
 // what the studio detail view shows about an asset's plumbing (W2-2)
 export type AssetInfo = {
-    backend: 'canvas' | 'comfy'
+    backend: 'canvas' | 'comfy' | 'manual' | 'gemini'
     /** canvas rolls have no seed input — every roll is identical */
     deterministic: boolean
     /** comfy only: resolved workflow id + its .rv-comfy path (note = why unresolved) */
@@ -100,15 +102,36 @@ export async function studioRoutes(deps: StudioDeps): Promise<StudioRoutes> {
         if (kit.comfy == null || workflows == null) throw new Error('kit has no comfy config — only canvas kinds can generate')
         return { workflows, host: kit.comfy.host, heal: kit.comfy.heal }
     }
-    const generateOne = deps.generateOne ?? ((found, prompt, seed, destDir, onProgress) =>
-        generateRoll(found, { prompt, seed, destDir, onProgress }, resolveComfy))
+    const generateOne = deps.generateOne ?? ((found, prompt, seed, destDir, onProgress, context?: ParentContext) =>
+        generateRoll(found, { prompt, seed, destDir, onProgress, context }, resolveComfy))
 
     const queue = new StudioQueue(async (job, seed, onProgress) => {
         const found = findAsset(kit, job.assetId)
         if (found == null) throw new Error(`asset '${job.assetId}' not in the kit — job dropped`)
-        await generateOne(found, job.prompt, seed, dirOf(job.assetId), onProgress)
+        // derived assets: parents' picks resolved at RUN time (a pick made
+        // while the job queued is honored); a blocker names the parent
+        let context: ParentContext | undefined
+        if (parentIdsOf(found).length > 0) {
+            const r = await resolveParentContext(kit, workspace, found)
+            if ('missing' in r) throw new Error(`'${job.assetId}' blocked — parents not ready: ${r.missing.join(', ')}`)
+            context = r
+        }
+        await generateOne(found, job.prompt, seed, dirOf(job.assetId), onProgress, context)
     }, randomSeed)
 
+    // machine-clearable red clears itself: re-picking a PARENT auto-enqueues
+    // every now-stale child (1 roll each) — no button, no nag. Generation
+    // spend is gated on the intentful pick, never on passive page loads.
+    const regenStaleChildren = async (parentId: string): Promise<void> => {
+        for (const f of allAssets(kit)) {
+            if (!parentIdsOf(f).includes(parentId)) continue
+            if (!(await isStale(kit, workspace, f))) continue
+            if (queue.pendingIds().includes(f.asset.id)) continue // already queued — never double-spend
+            queue.enqueue([{ assetId: f.asset.id, prompt: await promptOf(f), count: 1 }])
+            console.log(`ok: ${f.asset.id} auto-regen queued (parent '${parentId}' re-picked)`)
+        }
+    }
+
     // ── session/live rect plumbing ─────────────────────────────────────────
     const rectPath = (id: string, roll: string): string => join(dirOf(id), `${roll}.rect.json`)
     const sessionRect = async (f: FoundAsset, roll: string): Promise<GroundRect> => {
@@ -161,7 +184,17 @@ export async function studioRoutes(deps: StudioDeps): Promise<StudioRoutes> {
     }
     const ship = async (f: FoundAsset, roll: string): Promise<{ shipped: string | null }> => {
         const fn = await resolveShipFn(f)
-        if (fn == null) return { shipped: null } // no hook: pick.json is the record
+        if (fn == null) {
+            // no hook: ship.dir is the zero-config path — copy the picked
+            // roll as <dir>/<assetId>.<ext>; without dir, pick.json is the record
+            const dir = f.kind.ship?.dir
+            if (dir == null) return { shipped: null }
+            const ext = roll.split('.').at(-1)!
+            const dest = join(root, dir, `${f.asset.id}.${ext}`)
+            mkdirSync(join(root, dir), { recursive: true })
+            await Bun.write(dest, Bun.file(join(dirOf(f.asset.id), roll)))
+            return { shipped: relative(root, dest) }
+        }
         const dir = dirOf(f.asset.id)
         const g = geometryOf(f)
         const dest = await fn({
@@ -196,7 +229,8 @@ export async function studioRoutes(deps: StudioDeps): Promise<StudioRoutes> {
                 return {
                     id: f.asset.id, cat: f.kind.category, label: f.asset.label ?? f.asset.id,
                     prompt: await promptOf(f), rolls: listRolls(dir).length, picked: pick.pick != null,
-                    icon: f.kind.mode === 'icon',
+                    icon: f.kind.mode === 'icon', media: mediaOf(f.kind), manual: f.kind.generate.backend === 'manual',
+                    derived: parentIdsOf(f).length > 0, stale: await isStale(kit, workspace, f),
                 }
             }))
             return json({ ...queue.state, queued: queue.queuedCount, pending: queue.pendingIds(), errors: queue.errors.slice(-5), assets })
@@ -274,18 +308,44 @@ export async function studioRoutes(deps: StudioDeps): Promise<StudioRoutes> {
         }
 
         if (req.method !== 'POST') return new Response('', { status: 404 })
+
+        if (pathname === '/api/upload') {
+            // multipart (not json) — handled before the json body() parse.
+            // Any kind accepts uploads (touched-up images welcome); manual
+            // kinds have no other roll source. Ext validated per kind media.
+            const fd = await req.formData().catch(() => null)
+            if (fd == null) return bad('multipart form expected (id + file)')
+            const f = findAsset(kit, String(fd.get('id') ?? ''))
+            if (f == null) return bad(`unknown asset '${String(fd.get('id') ?? '')}'`)
+            const file = fd.get('file')
+            if (!(file instanceof File)) return bad('file field missing')
+            const ext = (file.name.split('.').at(-1) ?? '').toLowerCase()
+            const allowed = MEDIA_EXTS[mediaOf(f.kind)]
+            if (!allowed.includes(ext)) return bad(`'${file.name}': .${ext} not allowed for ${mediaOf(f.kind)} (${allowed.join('/')})`)
+            // seed-style name like generated rolls — Date.now() collides for
+            // same-ms multi-uploads and silently overwrites
+            const name = `v${randomSeed()}.${ext}`
+            await Bun.write(join(dirOf(f.asset.id), name), await file.arrayBuffer())
+            return json({ ok: true, name })
+        }
+
         const b = await body()
 
         if (pathname === '/api/generate') {
             const f = findAsset(kit, String(b.id))
             if (f == null) return bad(`unknown asset '${String(b.id)}'`)
+            if (f.kind.generate.backend === 'manual') return bad(`'${f.asset.id}' is a manual asset — upload a file instead`)
             const count = Math.max(1, Math.min(24, Number(b.count) || 1))
             const prompt = typeof b.prompt === 'string' && b.prompt.trim() !== '' ? b.prompt : await promptOf(f)
             queue.enqueue([{ assetId: f.asset.id, prompt, count }])
             return json({ ok: true })
         }
         if (pathname === '/api/generate-cat') {
-            const hit = allAssets(kit).filter((f) => f.kind.category === b.cat)
+            // manual kinds excluded from batch gen — nothing generates them;
+            // an all-manual cat gets a truthful pointer, not "no assets"
+            const inCat = allAssets(kit).filter((f) => f.kind.category === b.cat)
+            const hit = inCat.filter((f) => f.kind.generate.backend !== 'manual')
+            if (hit.length === 0 && inCat.length > 0) return bad(`cat '${String(b.cat)}' has only manual assets — upload in the studio`)
             if (hit.length === 0) return bad(`no assets in cat '${String(b.cat)}'`)
             const count = Math.max(1, Math.min(6, Number(b.count) || 1))
             queue.enqueue(await Promise.all(hit.map(async (f) => ({ assetId: f.asset.id, prompt: await promptOf(f), count }))))
@@ -319,6 +379,7 @@ export async function studioRoutes(deps: StudioDeps): Promise<StudioRoutes> {
                     s.pick = name
                     s.shippedAt = res.shipped != null ? new Date().toISOString() : s.shippedAt
                 })
+                void regenStaleChildren(f.asset.id).catch((e: Error) => queue.pushError(`auto-regen after '${f.asset.id}' pick: ${e.message}`))
                 return json(res)
             } catch (e) {
                 queue.pushError(`ship ${String(b.id)}: ${(e as Error).message}`)
@@ -382,6 +443,7 @@ export async function studioRoutes(deps: StudioDeps): Promise<StudioRoutes> {
             const name = safeRoll(b.name)
             const f = findAsset(kit, String(b.id))
             if (name == null || f == null) return bad('bad id/name')
+            if (geometryOf(f) == null) return bad(`kind '${f.kind.id}' has no geometry panel`)
             const current = await sessionRect(f, name)
             const flipped = { ...current, flip: current.flip === true ? undefined : true } as unknown as Record<string, unknown>
             const res = await saveRect(f, name, flipped)

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

@@ -0,0 +1,156 @@
+// 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'
+import { observer } from 'mobx-react-lite'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+type HubTool = { path: string; label: string; desc: string }
+type AttentionLine = { text: string; href?: string }
+type AttentionSection = { title: string; tone: 'red' | 'warn'; lines: AttentionLine[]; href?: string }
+
+const RAIL_ICONS: Record<string, string> = { '/': '⚡', '/graph/wiki': '🕸', '/graph/agent': '🤖', '/assets/': '🖼', '/status': '📊' }
+
+class HubStore {
+    name = ''
+    tools: HubTool[] = []
+    sections: AttentionSection[] | null = null
+    statusMd: string | null = null
+    running = false
+    note = ''
+    error: string | null = null
+
+    constructor() {
+        makeAutoObservable(this)
+    }
+
+    get redCount(): number {
+        return (this.sections ?? []).filter((s) => s.tone === 'red').reduce((n, s) => n + s.lines.length, 0)
+    }
+
+    async load(): Promise<void> {
+        try {
+            const hub = (await (await fetch('/hub.json')).json()) as { name: string; tools: HubTool[] }
+            const att = (await (await fetch('/api/attention.json')).json()) as { sections: AttentionSection[] }
+            runInAction(() => {
+                this.name = hub.name
+                this.tools = hub.tools
+                this.sections = att.sections
+            })
+            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 })
+        }
+    }
+
+    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 })
+    }
+}
+
+const store = new HubStore()
+void store.load()
+
+const Rail = observer(() => {
+    const items = [{ path: '/', label: 'attention', desc: 'everything red' }, ...store.tools.filter((t) => t.path !== '/')]
+    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>
+                )
+            })}
+        </nav>
+    )
+})
+
+const Attention = observer(() => {
+    const live = (store.sections ?? []).filter((s) => s.lines.length > 0)
+    return (
+        <div className="wrap">
+            <div className="crumb">shipkit hub · attention</div>
+            <h1>{store.name}<small>everything that needs you, one page</small></h1>
+            {store.sections == null ? <div className="sub">loading…</div>
+                : live.length === 0 ? <div className="clear">✅ all clear — nothing needs you</div>
+                : live.map((s) => (
+                    <section key={s.title} className={s.tone}>
+                        <h2>{s.href != null ? <a href={s.href}>{s.title}</a> : s.title}<em>{s.lines.length}</em></h2>
+                        {s.lines.map((l, i) => (
+                            <div key={i} className="line">{l.href != null ? <a href={l.href}>{l.text}</a> : l.text}</div>
+                        ))}
+                    </section>
+                ))}
+            <div className="sub">refreshes on reload · checks refresh via <a href="/status">status → run check</a></div>
+        </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 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>
+        </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>
+        <App />
+    </StrictMode>,
+)

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

@@ -0,0 +1,41 @@
+/* house palette — matches the studio/graph family. Plain CSS on purpose:
+   a published lib must not impose bunfig plugins (tailwind) on consumers. */
+: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}
+.app{display:flex;min-height:100vh}
+.wrap{max-width:900px;margin:0 auto;padding:34px 26px;flex:1}
+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}
+
+.skrail{position:sticky;top:0;align-self:flex-start;height:100vh;width:46px;display:flex;flex-direction:column;
+ align-items:center;padding-top:10px;gap:4px;background:#17140f;border-right:1px solid var(--line);flex:none}
+.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:var(--panel2);filter:none;opacity:1}
+.skrail a.on{background:var(--panel2);border-left-color:var(--accent);filter:none;opacity:1}
+.skrail a i{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
+
+.clear{margin-top:30px;font-size:17px;color:var(--teal)}
+section{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;
+ padding:14px 18px;margin-top:16px}
+section.red{border-left-color:var(--red)}
+h2{font-size:14px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
+h2 a{color:var(--ink);text-decoration:none}h2 a:hover{color:var(--gold)}
+h2 em{font-style:normal;font-size:12px;color:var(--dim);background:var(--panel2);border-radius:8px;padding:1px 8px}
+.line{font:12.5px/1.7 ui-monospace,Menlo,monospace;color:var(--dim);white-space:pre-wrap}
+.line a{color:var(--dim);text-decoration:underline dotted}.line a:hover{color:var(--gold)}
+section.red .line{color:#e8a0a0}
+.sub{margin-top:10px;font-size:12px;color:var(--dim)}
+.sub a{color:var(--dim)}
+
+.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)}
+.err{margin-top:26px;color:var(--red)}

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

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>shipkit hub</title>
+  <link rel="stylesheet" href="./hub.css" />
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./hub-app.tsx"></script>
+</body>
+</html>