/* eslint-disable */ const { useState, useEffect, useMemo, useRef } = React; // ---------- API helpers ------------------------------------------------------ async function api(path, opts = {}) { const r = await fetch(path, { headers: { "content-type": "application/json" }, ...opts }); const text = await r.text(); let body = null; try { body = text ? JSON.parse(text) : null; } catch { body = { raw: text }; } if (!r.ok) throw Object.assign(new Error(body?.error || r.statusText), { status: r.status, body }); return body; } async function uploadToR2(file, keyPrefix) { const safeName = file.name.replace(/[^A-Za-z0-9._-]/g, "_"); const key = `${keyPrefix}/${Date.now()}_${safeName}`; const { url, public_url } = await api("/api/upload/presign", { method: "POST", body: JSON.stringify({ key, contentType: file.type || "application/octet-stream" }), }); const put = await fetch(url, { method: "PUT", headers: { "content-type": file.type || "application/octet-stream" }, body: file }); if (!put.ok) throw new Error(`R2 PUT failed: ${put.status} ${put.statusText}`); return { key, public_url }; } const STEP_TONE = { prompt_drafted: "warn", prompt_approved: "info", ready_to_generate: "info", still_generated: "info", video_generated: "info", audio_generated: "info", images_generated: "info", delivered_to_slack: "accent", manually_posted: "ok", failed: "err", canceled: "ghost", }; function relTime(iso) { if (!iso) return "—"; const d = new Date(iso); const sec = Math.round((Date.now() - d.getTime()) / 1000); if (sec < 60) return `${sec}s`; if (sec < 3600) return `${Math.floor(sec/60)}m`; if (sec < 86400) return `${Math.floor(sec/3600)}h`; return `${Math.floor(sec/86400)}d`; } const fmtMoney = (n) => n == null ? "$0.00" : `$${Number(n).toFixed(2)}`; const fmtClock = () => { const d = new Date(); return `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}:${String(d.getSeconds()).padStart(2,"0")}`; }; // ---------- pod rail (top header) ------------------------------------------- function PodRail({ queue, costToday, alerts }) { const [clock, setClock] = useState(fmtClock()); useEffect(() => { const id = setInterval(() => setClock(fmtClock()), 1000); return () => clearInterval(id); }, []); const liveCount = (queue?.in_progress || 0) + (queue?.ready_to_run || 0); return (
S
SHIYAA
AI INFLUENCER · v0.1
Status {liveCount ? `${liveCount} live` : "idle"}
Pending {queue?.pending_approval ?? 0}
Hold 4h {queue?.waiting_for_4h ?? 0}
Failed {queue?.failed ?? 0}
Today {fmtMoney(costToday)}
{alerts > 0 ? ⚠ {alerts} alert{alerts === 1 ? "" : "s"} : ALL CLEAR}
IST {clock}
); } // ---------- sidebar --------------------------------------------------------- function Sidebar({ influencers, selectedId, onSelect, queue }) { return ( ); } // ---------- KPI strip -------------------------------------------------------- function KpiStrip({ queue, costs }) { const today = (costs?.today || []).reduce((s, r) => s + (r.total || 0), 0); const week = (costs?.week || []).reduce((s, r) => s + (r.total || 0), 0); return (
PENDING APPROVAL
{queue?.pending_approval ?? 0}
awaiting Slack click
HOLD · 4H
{queue?.waiting_for_4h ?? 0}
approved, gated
READY · TICK
{queue?.ready_to_run ?? 0}
5-min orchestrator
IN PROGRESS
{queue?.in_progress ?? 0}
claimed
DELIVERED
{queue?.delivered ?? 0}
awaiting Mark Posted
5 ? "warn" : ""}`}>
COST · TODAY
{fmtMoney(today)}
7d {fmtMoney(week)}
FAILED
{queue?.failed ?? 0}
resume from Slack
); } // ---------- influencer create ---------------------------------------------- function CreatePersonaCard({ onCreated }) { const [open, setOpen] = useState(false); const [busy, setBusy] = useState(false); const [step, setStep] = useState("idle"); const [logLines, setLogLines] = useState([]); const [files, setFiles] = useState([]); const log = (line, lv = "info") => setLogLines(L => [...L, { ts: new Date().toLocaleTimeString(), line, lv }]); const [form, setForm] = useState({ name: "", niche: "tamil traditional fashion", language: "ta", theme: "", tone: "warm, conversational, culturally rooted", target_audience: "Tamil women 22-35 in India", age_range_lower: 22, age_range_upper: 28, visual_identity: { hair: "long, dark brown, wavy", skin: "warm brown", wardrobe: "earthy traditional with modern accents", setting: "indoor warm tones, occasional outdoor daylight" } }); const setF = (k, v) => setForm(f => ({ ...f, [k]: v })); const setVI = (k, v) => setForm(f => ({ ...f, visual_identity: { ...f.visual_identity, [k]: v } })); async function submit(e) { e?.preventDefault(); setBusy(true); setStep("create"); setLogLines([]); try { log("creating influencer row…"); const { id } = await api("/api/influencer/create", { method: "POST", body: JSON.stringify(form) }); log(`✓ influencer_id = ${id}`, "ok"); if (files.length > 0) { if (files.length !== 6) throw new Error(`expected exactly 6 photos, got ${files.length}`); setStep("upload"); const sorted = [...files].sort((a, b) => a.name.localeCompare(b.name)); for (let i = 0; i < sorted.length; i++) { const f = sorted[i]; const ext = (f.name.split(".").pop() || "png").toLowerCase(); const slot = String(i + 1).padStart(2, "0"); const key = `influencers/${id}/reference/${slot}.${ext}`; log(`[${i+1}/6] ${f.name} → ${key}`); const presign = await api("/api/upload/presign", { method: "POST", body: JSON.stringify({ key, contentType: f.type || "image/jpeg" }) }); const put = await fetch(presign.url, { method: "PUT", headers: { "content-type": f.type || "image/jpeg" }, body: f }); if (!put.ok) throw new Error(`R2 PUT slot ${slot} failed: ${put.status}`); } log("✓ 6 photos uploaded", "ok"); } else { log("(skipping photo upload — operator will upload separately)", "warn"); } setStep("init"); log("calling /webhook/initialize-influencer…"); const init = await api("/api/webhook/initialize-influencer", { method: "POST", body: JSON.stringify({ influencer_id: id, language: form.language, theme: form.theme }), }); log("✓ initialize: " + JSON.stringify(init), "ok"); setStep("done"); onCreated && onCreated(id); } catch (e) { log("✗ " + (e.message || String(e)), "err"); setStep("error"); } finally { setBusy(false); } } return (
CONJURE A PERSONA one-time per influencer · INSERT row → 6 photos to R2 → init webhook
{open && (
setF("name", e.target.value)} placeholder="Maya" required />
setF("niche", e.target.value)} required />
setF("theme", e.target.value)} placeholder="tamil traditional saree fashion with modern fusion" required />
setF("age_range_lower", parseInt(e.target.value, 10))} />
setF("age_range_upper", parseInt(e.target.value, 10))} />
setF("tone", e.target.value)} required />
setF("target_audience", e.target.value)} required />
setVI("hair", e.target.value)} />
setVI("skin", e.target.value)} />
setVI("wardrobe", e.target.value)} />
setVI("setting", e.target.value)} />
{step === "done" && DONE} {step === "error" && FAILED — see log}
{logLines.length > 0 && (
{logLines.map((l, i) =>
{l.ts}{l.line}
)}
)}
)}
); } // ---------- influencer grid ------------------------------------------------- function InfluencersGrid({ influencers, selectedId, onSelect }) { if (!influencers.length) { return

no personas yet — conjure one above

; } return (
{influencers.map(i => ( ))}
); } // ---------- schedule video -------------------------------------------------- function ScheduleVideoCard({ influencers, selectedId, onSelect, onScheduled }) { const [mode, setMode] = useState("i2v"); const [voice, setVoice] = useState(false); const [duration, setDuration] = useState(5); const [idea, setIdea] = useState(""); const [refVideoFile, setRefVideoFile] = useState(null); const [busy, setBusy] = useState(false); const [result, setResult] = useState(null); const [error, setError] = useState(null); const selected = influencers.find(i => i.id === selectedId); async function submit(e) { e?.preventDefault(); setError(null); setResult(null); if (!selectedId) { setError("pick an influencer in the grid above"); return; } setBusy(true); try { let reference_video_url = undefined; if (mode === "v2v") { if (!refVideoFile) throw new Error("v2v selected — upload a source video"); const { public_url } = await uploadToR2(refVideoFile, `influencers/${selectedId}/source-videos`); reference_video_url = public_url; } const body = { influencer_id: selectedId, voice, duration: Number(duration), idea: idea || undefined }; if (reference_video_url) body.reference_video_url = reference_video_url; const r = await api("/api/webhook/schedule-video-post", { method: "POST", body: JSON.stringify(body) }); setResult(r); onScheduled && onScheduled(); } catch (e) { setError(e.message || String(e)); } finally { setBusy(false); } } return (
SCHEDULE A VIDEO {selected ? `· ${selected.name}` : "· no persona selected"}
setDuration(e.target.value)} />