rvlib-shipkit 0.11.0 → 0.13.0

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

@@ -0,0 +1,429 @@
+// Media (atelier) service — the studio state, per build/app-state-tree:
+// observable state + actions + computeds live HERE; components read and
+// call. Talks to the media API the hub mounts at /media/*. Kind/asset
+// structure is read-only (kit.ts is code-reviewed); this edits WORKSPACE
+// state: picks, alts, prompt overlays, meta sidecars, geometry rects.
+import { makeAutoObservable, runInAction } from 'mobx'
+import type { HubSt } from './hub-st.ts'
+import type { AssetDetail, CatRow, Rect, SideAsset } from './hub-types.ts'
+
+const MEDIA = '/media'
+// thumbs change in place when a pick changes → ~8s cache buckets; roll
+// files are immutable (one name = one file forever), so their URLs carry
+// no bust — an <audio> src that never changes never restarts playback
+const V = (): number => Date.now() >> 13
+export const rollUrl = (id: string, name: string): string => `${MEDIA}/img?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`
+export const thumbUrl = (id: string): string => `${MEDIA}/api/thumb?id=${encodeURIComponent(id)}&t=${V()}`
+export const isAud = (n: string): boolean => ['mp3', 'wav', 'ogg', 'm4a'].includes(String(n ?? '').split('.').pop() ?? '')
+
+const j = async (u: string): Promise<any> => {
+    const r = await fetch(MEDIA + u)
+    if (!r.ok) throw new Error(`${u}: ${r.status}`)
+    return r.json()
+}
+const post = async (u: string, b?: unknown): Promise<any> => {
+    const r = await fetch(MEDIA + u, { method: 'POST', body: JSON.stringify(b ?? {}) })
+    return r.json()
+}
+
+export class MediaSvc {
+    assets: SideAsset[] = []
+    pending: string[] = []
+    generating = false
+    genLine = ''
+    queued = 0
+    errors: string[] = []
+    progress: { value: number; max: number } | null = null
+    /** the media API vanished (mount failed) — shown loud, polling stops */
+    dead: string | null = null
+
+    detail: AssetDetail | null = null
+    active: string | null = null
+    /** strip hover preview (image rolls only — audio must not restart) */
+    hover: string | null = null
+    prompt = ''
+    promptMsg = ''
+    statusLine = ''
+    n = '3'
+
+    rect: Rect | null = null
+    rectRatio = 0.6
+
+    catRows: CatRow[] = []
+    allSize = ''
+    allMsg = ''
+
+    openCats = new Set<string>()
+    tab: string = 'asset'
+    drawerOpen = false
+    jsonText = ''
+    jsonMsg = ''
+
+    private hbTimer: ReturnType<typeof setInterval> | null = null
+    private rectTimer: ReturnType<typeof setTimeout> | null = null
+    private promptTimer: ReturnType<typeof setTimeout> | null = null
+    /** last text known saved for the CURRENT asset — an equal edit is not a save */
+    private savedPrompt = ''
+
+    constructor(private st: HubSt) {
+        makeAutoObservable<this, 'st' | 'hbTimer' | 'rectTimer' | 'promptTimer' | 'savedPrompt'>(
+            this, { st: false, hbTimer: false, rectTimer: false, promptTimer: false, savedPrompt: false })
+    }
+
+    start(): void {
+        void this.heartbeat()
+        this.hbTimer = setInterval(() => void this.heartbeat(), 1500)
+    }
+    dispose(): void {
+        if (this.hbTimer != null) clearInterval(this.hbTimer)
+        if (this.rectTimer != null) clearTimeout(this.rectTimer)
+        if (this.promptTimer != null) clearTimeout(this.promptTimer)
+    }
+
+    get curId(): string | null {
+        return this.st.sel?.t === 'asset' ? this.st.sel.id : null
+    }
+    get catMode(): string | null {
+        return this.st.sel?.t === 'cat' ? this.st.sel.cat : null
+    }
+    get cats(): string[] {
+        return [...new Set(this.visibleAssets.map((a) => a.cat))]
+    }
+    /** attention predicates — mirror the collection severities for media
+     *  (providers.ts: manual+empty = red; unpicked rolls / stale = yellow) */
+    needsAsset = (a: SideAsset): boolean => a.stale || (a.manual && a.rolls === 0) || (a.rolls > 0 && !a.picked)
+    redAsset = (a: SideAsset): boolean => a.manual && a.rolls === 0
+    get visibleAssets(): SideAsset[] {
+        const f = this.st.filter
+        const base = f === 'all' ? this.assets : this.assets.filter(f === 'red' ? this.redAsset : this.needsAsset)
+        const q = this.st.query.trim().toLowerCase()
+        if (q === '') return base
+        return base.filter((a) => a.label.toLowerCase().includes(q) || a.id.toLowerCase().includes(q))
+    }
+    get cur(): SideAsset | null {
+        return this.assets.find((a) => a.id === this.curId) ?? null
+    }
+    get deterministic(): boolean {
+        return this.detail?.info.deterministic === true
+    }
+    get hasGeom(): boolean {
+        return this.detail?.asset.geometry === true && this.cur?.icon !== true
+    }
+
+    async heartbeat(): Promise<void> {
+        if (this.dead != null) return
+        let s: any
+        try {
+            const r = await fetch(MEDIA + '/api/state')
+            if (r.status === 404) {
+                // the mount failed at boot — it will not come back without a
+                // restart; say so once, loudly, and stop wasting the wire
+                runInAction(() => { this.dead = 'not mounted — fix the kit, restart the serve task' })
+                if (this.hbTimer != null) clearInterval(this.hbTimer)
+                return
+            }
+            if (!r.ok) throw new Error(String(r.status))
+            s = await r.json()
+        } catch {
+            // transient (serve task restarting, network blip) — KEEP polling;
+            // only a boot-time 404 is permanent (collections self-heal, so must we)
+            return
+        }
+        runInAction(() => {
+            this.assets = s.assets
+            this.pending = s.pending ?? []
+            this.generating = s.generating
+            this.queued = s.queued ?? 0
+            this.progress = s.progress ?? null
+            this.errors = s.errors ?? []
+            const p = s.progress
+            this.genLine = s.generating
+                ? `generating ${s.current ?? '…'} ${s.done}/${s.total}${s.queued ? ` · ${s.queued} queued` : ''}${p?.max ? ` · step ${p.value}/${p.max}` : ''}`
+                : ''
+        })
+        if (this.curId != null) await this.refreshRolls()
+        if (this.catMode != null) await this.fillCat()
+        this.st.afterFirstBeat()
+    }
+
+    async select(id: string): Promise<void> {
+        this.active = null
+        this.rect = null
+        this.detail = null
+        this.statusLine = ''
+        const a = this.assets.find((x) => x.id === id)
+        if (a != null) this.openCats.add(a.cat)
+        const r = (await j(`/api/asset?id=${encodeURIComponent(id)}`)) as AssetDetail
+        if (this.curId !== id) return // selection changed mid-fetch — never clobber
+        runInAction(() => {
+            this.detail = r
+            this.prompt = r.asset.prompt
+            this.savedPrompt = r.asset.prompt
+            this.promptMsg = ''
+            if (this.deterministic) this.n = '1'
+            if (this.tab.startsWith('c:') && !r.asset.custom.some((c) => `c:${c.id}` === this.tab)) this.tab = 'asset'
+            this.pickActive(r)
+        })
+        if (this.hasGeom) await this.loadRect()
+        void this.loadTab()
+    }
+
+    private pickActive(r: AssetDetail): void {
+        if (this.active == null || !r.rolls.some((x) => x.name === this.active))
+            this.active = (r.rolls.find((x) => x.picked) ?? r.rolls[0])?.name ?? null
+    }
+
+    async refreshRolls(): Promise<void> {
+        const id = this.curId
+        if (id == null) return
+        const r = (await j(`/api/asset?id=${encodeURIComponent(id)}`)) as AssetDetail
+        if (this.curId !== id) return
+        runInAction(() => {
+            if (this.detail == null) this.detail = r
+            else this.detail.rolls = r.rolls
+            this.pickActive(r)
+        })
+    }
+
+    setActive(name: string): void {
+        this.active = name
+        if (this.hasGeom) void this.loadRect()
+        if (this.tab !== 'asset') void this.loadTab()
+    }
+
+    async generate(): Promise<void> {
+        if (this.curId == null) return
+        await post('/api/generate', { id: this.curId, prompt: this.prompt, count: +this.n })
+        void this.heartbeat()
+    }
+    async genCat(cat: string, count: number): Promise<void> {
+        const r = await post('/api/generate-cat', { cat, count })
+        if (r?.error != null) runInAction(() => { this.statusLine = r.error })
+        void this.heartbeat()
+    }
+    clearQueue(): void {
+        void post('/api/queue/clear')
+    }
+    stopCurrent(): void {
+        void post('/api/interrupt')
+    }
+
+    async pick(name: string): Promise<void> {
+        const res = await post('/api/pick', { id: this.curId, name })
+        runInAction(() => {
+            this.statusLine = res.error != null ? `ship FAILED: ${res.error}` : res.shipped != null ? `shipped → ${res.shipped}` : 'picked (pick.json)'
+            this.active = name
+        })
+        await this.refreshRolls()
+    }
+    async alt(name: string): Promise<void> {
+        await post('/api/alt', { id: this.curId, name })
+        await this.refreshRolls()
+    }
+    async discard(name: string): Promise<void> {
+        await post('/api/discard', { id: this.curId, name })
+        runInAction(() => {
+            if (this.active === name) this.active = null
+            // the ✕ sits on the hovered tile and its unmount fires no
+            // mouseleave — a latched hover would 404 the stage
+            if (this.hover === name) this.hover = null
+        })
+        await this.refreshRolls()
+    }
+
+    async upload(files: FileList | File[]): Promise<void> {
+        if (this.curId == null) return
+        for (const f of Array.from(files)) {
+            const fd = new FormData()
+            fd.append('id', this.curId)
+            fd.append('file', f)
+            const r = await fetch(`${MEDIA}/api/upload`, { method: 'POST', body: fd }).then((x) => x.json()).catch((e: Error) => ({ error: String(e) }))
+            if (r.error != null) runInAction(() => { this.statusLine = `upload FAIL: ${r.error}` })
+        }
+        await this.refreshRolls()
+    }
+
+    /** prompt AUTOSAVES — edit, pause, it lands in the overlay (the server
+     *  clears the overlay when the text equals the kit prompt). Guards: no
+     *  save before the detail is in, no save of an unchanged text, and the
+     *  asset id is captured at SCHEDULE time — a selection switch inside
+     *  the debounce window must never write onto the wrong asset. */
+    setPrompt(v: string): void {
+        this.prompt = v
+        if (this.detail == null) return // nothing selected/loaded — nowhere to save
+        const id = this.curId
+        if (id == null) return
+        if (this.promptTimer != null) clearTimeout(this.promptTimer)
+        this.promptTimer = setTimeout(() => {
+            this.promptTimer = null
+            if (this.curId !== id) return // selection moved on — drop, never cross-write
+            const text = this.prompt
+            if (text === this.savedPrompt) return // unchanged — not a save
+            void (async () => {
+                const r = await post('/api/prompt', { id, prompt: text })
+                runInAction(() => {
+                    if (this.curId !== id) return // selection moved while the POST flew — a late response must not corrupt the new asset's baseline
+                    if (r.error != null) {
+                        this.promptMsg = `save FAIL: ${r.error}`
+                        return
+                    }
+                    this.savedPrompt = text
+                    this.promptMsg = 'prompt saved'
+                })
+                setTimeout(() => runInAction(() => { if (this.promptMsg === 'prompt saved') this.promptMsg = '' }), 1500)
+            })()
+        }, 800)
+    }
+    copyPrompt(): void {
+        void navigator.clipboard.writeText(this.prompt)
+        this.promptMsg = 'copied'
+        setTimeout(() => runInAction(() => { this.promptMsg = '' }), 900)
+    }
+
+    toggleFold(cat: string): void {
+        if (this.st.query.trim() !== '') return // folds yield to a live search
+        this.openCats.has(cat) ? this.openCats.delete(cat) : this.openCats.add(cat)
+    }
+    /** rail 🖼 click — every category unfolds at once */
+    openAllCats(): void {
+        for (const a of this.assets) this.openCats.add(a.cat)
+    }
+
+    // ── geometry ──────────────────────────────────────────────────────────
+    async loadRect(): Promise<void> {
+        if (!this.hasGeom || this.curId == null || this.active == null) {
+            this.rect = null
+            return
+        }
+        const id = this.curId
+        const name = this.active
+        const r = await j(`/api/rect?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`).catch(() => null)
+        if (this.curId !== id || this.active !== name) return // roll switched mid-fetch
+        runInAction(() => {
+            this.rect = r?.rect ?? null
+            if (this.rect != null && this.rect.w > 0) this.rectRatio = this.rect.h / this.rect.w
+        })
+    }
+    /** 250ms trailing debounce → POST; server re-cleans + measures art.
+     *  (id, name, rect) are captured at SCHEDULE time — an arrow-key roll
+     *  switch inside the debounce window must never write the old roll's
+     *  rect onto the new one */
+    saveRect(): void {
+        const id = this.curId
+        const name = this.active
+        const rect = this.rect
+        if (id == null || name == null || rect == null) return
+        if (this.rectTimer != null) clearTimeout(this.rectTimer)
+        this.rectTimer = setTimeout(() => {
+            void (async () => {
+                const r = await post('/api/rect', { id, name, rect })
+                runInAction(() => {
+                    if (this.curId !== id || this.active !== name) return // selection moved on — never adopt a stale rect
+                    if (r.rect != null) this.rect = r.rect
+                    else if (r.error != null) this.statusLine = `rect FAIL: ${r.error}`
+                })
+            })()
+        }, 250)
+    }
+    async legsDefault(): Promise<void> {
+        if (this.curId == null || this.active == null) return
+        const r = await post('/api/legs-default', { id: this.curId, name: this.active })
+        if (r.rect != null) runInAction(() => { this.rect = r.rect })
+    }
+    removeLegs(): void {
+        if (this.rect?.legs == null) return
+        delete this.rect.legs
+        delete this.rect.legColor
+        this.saveRect()
+    }
+
+    // ── category grid ─────────────────────────────────────────────────────
+    async fillCat(): Promise<void> {
+        const mode = this.catMode
+        if (mode == null) return
+        const r = await j(`/api/catrects?cat=${encodeURIComponent(mode)}`)
+        if (this.catMode !== mode) return // navigated away mid-fetch
+        runInAction(() => { this.catRows = r.rows ?? [] })
+    }
+    async setSize(id: string, name: string, v: number): Promise<void> {
+        const row = this.catRows.find((r) => r.id === id)
+        if (row?.rect == null) return
+        const nv = Math.max(0.1, v || row.rect.size)
+        if (nv === row.rect.size) return // blur without a change is not a save
+        row.rect.size = nv
+        await post('/api/rect', { id, name, rect: row.rect })
+    }
+    async toggleFlip(id: string, name: string): Promise<void> {
+        await post('/api/flip', { id, name })
+        await this.fillCat()
+    }
+    async applyAllSize(): Promise<void> {
+        const v = Math.max(0.1, +this.allSize || 0)
+        if (!v) return
+        const rows = this.catRows.filter((r) => !r.icon && r.rect != null)
+        // one action for all mutations (post-await writes would land outside
+        // it — mobx strict mode), then the POSTs
+        runInAction(() => { for (const row of rows) row.rect!.size = v })
+        for (const row of rows) await post('/api/rect', { id: row.id, name: row.name, rect: row.rect })
+        runInAction(() => { this.allMsg = 'applied' })
+        setTimeout(() => runInAction(() => { this.allMsg = '' }), 1200)
+        await this.fillCat()
+    }
+
+    // ── drawer: asset json (read-only) · roll meta sidecar · custom panels ─
+    setTab(tab: string): void {
+        this.tab = tab
+        this.drawerOpen = true
+        void this.loadTab()
+    }
+    async loadTab(): Promise<void> {
+        this.jsonMsg = ''
+        if (this.tab.startsWith('c:')) return // panel host owns that surface
+        if (this.tab === 'asset') {
+            const text = this.detail != null ? JSON.stringify(this.detail.asset, null, 2) : ''
+            runInAction(() => { this.jsonText = text })
+        } else {
+            const r = this.curId != null && this.active != null ? await post('/api/meta', { id: this.curId, name: this.active }) : { text: '' }
+            runInAction(() => { this.jsonText = r.text ?? '' })
+        }
+    }
+    async saveMeta(): Promise<void> {
+        if (this.tab !== 'meta' || this.curId == null || this.active == null) return
+        const r = await post('/api/meta', { id: this.curId, name: this.active, text: this.jsonText })
+        runInAction(() => { this.jsonMsg = r.error != null ? `FAIL: ${r.error}` : 'saved' })
+    }
+    /** frozen per mount: a roll/asset switch remounts with a fresh api */
+    panelApi(c: { kind: string }): Record<string, unknown> {
+        const id = this.curId!
+        const name = this.active!
+        return {
+            assetId: id,
+            kindId: c.kind,
+            roll: name,
+            imgUrl: rollUrl(id, name),
+            getMeta: async () => {
+                const r = await post('/api/meta', { id, name })
+                if (r.error != null) throw new Error(r.error)
+                return r.text ? JSON.parse(r.text) : null
+            },
+            saveMeta: async (data: unknown) => {
+                const r = await post('/api/meta', { id, name, text: JSON.stringify(data) })
+                if (r.error != null) throw new Error(r.error)
+            },
+        }
+    }
+
+    // keyboard verbs (←/→ roll · Enter pick · A alt · X discard)
+    key(k: string): boolean {
+        const rolls = this.detail?.rolls ?? []
+        if (this.curId == null || rolls.length === 0) return false
+        const i = rolls.findIndex((x) => x.name === this.active)
+        if (k === 'ArrowRight' && i < rolls.length - 1) this.setActive(rolls[i + 1]!.name)
+        else if (k === 'ArrowLeft' && i > 0) this.setActive(rolls[i - 1]!.name)
+        else if (k === 'Enter' && this.active != null) void this.pick(this.active)
+        else if ((k === 'a' || k === 'A') && this.active != null) void this.alt(this.active)
+        else if ((k === 'x' || k === 'X') && this.active != null) void this.discard(this.active)
+        else return false
+        return true
+    }
+}