{options.map(([k, l]) => (
))}
);
/* =================================================== */
function App() {
const [loaded, setLoaded] = useState(false);
const [tab, setTab] = useState("performance");
const [tax, setTax] = useState(DEFAULT_TAXONOMY);
const [modules, setModules] = useState([]);
const [assemblies, setAssemblies] = useState([]);
const [angles, setAngles] = useState([]);
const [cycles, setCycles] = useState([]);
const [metrics, setMetrics] = useState([]);
const [history, setHistory] = useState([]);
const [registry, setRegistry] = useState([]); // angles table — the 3-letter code registry
const [metaStatus, setMetaStatus] = useState(null); // /api/meta-status — token health
const [taxo, setTaxo] = useState(null); // /api/taxonomy — levers/hooks/formats/layouts/ctas
const [capture, setCapture] = useState(null); // null | { idea? } — the capture sheet (mic button)
const [ideasBump, setIdeasBump] = useState(0); // bumps when an idea saves → Ideate refetches
const [buildSeg, setBuildSeg] = useState("assemble");
const [perfSeg, setPerfSeg] = useState("overview");
const [toast, setToast] = useState(null);
const blobTimer = useRef(null);
const entTimer = useRef(null);
// Last state arrays pushed to the tables — reference compare marks dirty sets.
// null = never pushed, so a legacy-blob or seeded workspace migrates on first sync.
const lastPushed = useRef({ cycles: null, modules: null, assemblies: null, metrics: null, angles: null });
const holdBlobSave = useRef(false); // set when the blob was unreadable at load — skips the first auto-save
useEffect(() => {
const l = document.createElement("link");
l.rel = "stylesheet";
l.href = "https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=JetBrains+Mono:wght@600;700&display=swap";
document.head.appendChild(l);
}, []);
/* load — registry, then blob (tax/angles/history), then the normalized tables */
useEffect(() => {
(async () => {
// Angle-code registry (best-effort — the ad-name generator needs it)
let reg = [];
try { reg = (await apiGet('/api/list-angles')).angles || []; } catch (e) { /* offline */ }
setRegistry(reg);
// Meta token health (best-effort — drives the replace-token banner)
apiGet('/api/meta-status').then(setMetaStatus).catch(() => {});
// Live taxonomy for the capture form (best-effort; Sels stay empty offline)
apiGet('/api/taxonomy').then(setTaxo).catch(() => {});
// Flush any ideas queued while offline (capture must never lose a thought)
try {
const pending = JSON.parse(localStorage.getItem('mad:pendingIdeas') || '[]');
if (pending.length) {
const still = [];
for (const row of pending) {
try { await apiPost('/api/save-idea', row); } catch (e) { still.push(row); }
}
localStorage.setItem('mad:pendingIdeas', JSON.stringify(still));
}
} catch (e) {}
// Shared blob: taxonomy, angle bench, history (+ entities, pre-migration)
let blob = null, blobFailed = false;
try {
const d = await apiGet('/api/ops-state');
if (d && d.state && Object.keys(d.state).length > 0) blob = d.state;
} catch (e) { blobFailed = true; /* offline — cache fallback below */ }
// Normalized tables: source of truth for cycles/modules/assemblies/metrics
let rows = null;
try {
const [cy, mo, asm, me] = await Promise.all([
apiGet('/api/cycles'), apiGet('/api/modules'),
apiGet('/api/assemblies'), apiGet('/api/assembly-metrics'),
]);
rows = {
cycles: (cy.cycles || []).map(rowToCycle),
modules: (mo.modules || []).map(rowToModule),
assemblies: (asm.assemblies || []).map(rowToAssembly),
metrics: (me.metrics || []).map(rowToMetric),
};
} catch (e) { /* offline — cache fallback below */ }
// Offline fallback: last combined snapshot cached locally
let cache = null;
if (!blob || !rows) {
try { const v = localStorage.getItem(STORE_KEY); if (v) cache = JSON.parse(v); } catch (e) {}
}
const meta = blob || cache; // tax + angles + history live here
const mergedTax = { ...DEFAULT_TAXONOMY, ...(meta && meta.tax), attrs: (meta && meta.tax && meta.tax.attrs) || DEFAULT_TAXONOMY.attrs };
setTax(mergedTax);
// Workspace angles carry a registry code — auto-match by name where missing
const withCode = (a) => a.code ? a : { ...a, code: reg.find((r) => (r.name || "").toLowerCase() === (a.name || "").toLowerCase())?.code || "" };
const hasRows = rows && (rows.cycles.length || rows.modules.length || rows.assemblies.length || rows.metrics.length) > 0;
if (hasRows) {
// Tables are live — already pushed, nothing to migrate
const ang = ((meta && meta.angles) || []).map(withCode);
setAngles(ang); setHistory((meta && meta.history) || []);
setCycles(rows.cycles); setModules(rows.modules);
setAssemblies(rows.assemblies); setMetrics(rows.metrics);
lastPushed.current = { cycles: rows.cycles, modules: rows.modules, assemblies: rows.assemblies, metrics: rows.metrics, angles: ang };
// Blob unreadable but tables have data → don't overwrite the server
// blob with an empty bench on the automatic post-load save
if (blobFailed && !meta) holdBlobSave.current = true;
} else if (meta && ((meta.modules && meta.modules.length) || (meta.angles && meta.angles.length))) {
// Legacy blob workspace — hydrate from it; lastPushed stays null, so the
// first sync pass performs the one-time migration into the tables.
let mods = meta.modules || [];
let hist = meta.history || [];
let ang, cyc;
if (meta.angles && meta.cycles) {
ang = meta.angles; cyc = meta.cycles;
} else {
const mk = seedMarketing(mergedTax, mods);
mods = mods
.map((m) => (m.name && m.name.startsWith("AI will not replace") ? { ...m, angleId: mk.angles[1].id } : m))
.concat(mk.hookMods);
hist = [...hist, { ts: new Date().toISOString(), type: "system", detail: "Marketing layer added — Q1 FY27 angle, cycle plan and hook wave seeded" }];
ang = mk.angles; cyc = mk.cycles;
}
ang = ang.map(withCode);
setAngles(ang); setCycles(cyc); setModules(mods);
setAssemblies(meta.assemblies || []); setMetrics(meta.metrics || []);
setHistory([...hist, { ts: new Date().toISOString(), type: "system", detail: "Workspace migrated from shared blob to normalized tables" }]);
} else {
// First run: seed modules + marketing layer; first sync pushes it up
const seeded = SEED_MODULES.map((m) => ({
id: uid(), code: "X00", status: "Edited", link: "", source: "", notes: "", createdAt: new Date().toISOString(), ...m,
}));
const counts = {};
seeded.forEach((m) => {
const slot = DEFAULT_TAXONOMY.slots.find((s) => s.id === m.slotId);
counts[m.slotId] = (counts[m.slotId] || 0) + 1;
m.code = slot.code + String(counts[m.slotId]).padStart(2, "0");
});
const mk = seedMarketing(DEFAULT_TAXONOMY, seeded);
const mods = seeded
.map((m) => (m.name.startsWith("AI will not replace") ? { ...m, angleId: mk.angles[1].id } : m))
.concat(mk.hookMods);
setModules(mods); setAngles(mk.angles.map(withCode)); setCycles(mk.cycles);
setHistory([{ ts: new Date().toISOString(), type: "system", detail: "Workspace created — starter modules, Q1 FY27 angle and cycle plan seeded" }]);
}
setLoaded(true);
})();
}, []);
/* cache the combined snapshot locally — the offline read fallback */
const cacheAll = () => {
try { localStorage.setItem(STORE_KEY, JSON.stringify({ tax, angles, history, modules, assemblies, cycles, metrics })); } catch (e) {}
};
/* debounced save — blob channel: taxonomy, angle bench, history.
Until the entity sync has landed in the tables at least once (migration
or first seed), the blob keeps carrying the entities too, so a failed
table push can never strand data in one device's localStorage. */
useEffect(() => {
if (!loaded) return;
clearTimeout(blobTimer.current);
blobTimer.current = setTimeout(async () => {
cacheAll();
if (holdBlobSave.current) { holdBlobSave.current = false; return; }
const inTables = lastPushed.current.modules !== null;
try {
await apiPost('/api/ops-state', {
state: {
schemaVersion: 2, tax, angles, history,
...(inTables ? {} : { modules, assemblies, cycles, metrics }),
},
});
} catch (e) { setToast("Save failed — check connection"); }
}, 400);
}, [tax, angles, history, loaded]);
/* debounced sync — entity channel: bulk-upsert dirty tables.
Order matters: assemblies before metrics (FK). An angle edit re-pushes
dependent tables so the denormalized angle_code stays fresh. */
useEffect(() => {
if (!loaded) return;
clearTimeout(entTimer.current);
entTimer.current = setTimeout(async () => {
cacheAll();
const last = lastPushed.current;
const anglesChanged = last.angles !== angles;
try {
if (last.cycles !== cycles || anglesChanged) {
if (cycles.length) await apiPost('/api/cycles', cycles.map((c) => cycleToRow(c, angles)));
last.cycles = cycles;
}
if (last.modules !== modules || anglesChanged) {
if (modules.length) await apiPost('/api/modules', modules.map((m) => moduleToRow(m, angles)));
last.modules = modules;
}
if (last.assemblies !== assemblies || anglesChanged) {
if (assemblies.length) await apiPost('/api/assemblies', assemblies.map((a) => assemblyToRow(a, angles)));
last.assemblies = assemblies;
}
if (last.metrics !== metrics) {
if (metrics.length) await apiPost('/api/assembly-metrics', metrics.map(metricToRow));
last.metrics = metrics;
}
last.angles = angles;
} catch (e) { setToast("Sync failed — check connection"); }
}, 600);
}, [cycles, modules, assemblies, metrics, angles, loaded]);
const log = (type, detail) => setHistory((h) => [...h, { ts: new Date().toISOString(), type, detail }]);
const flash = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2200); };
/* re-pull metrics from the tables (after a Meta sync) without re-pushing them */
const refreshMetrics = async () => {
const d = await apiGet('/api/assembly-metrics');
const arr = (d.metrics || []).map(rowToMetric);
lastPushed.current.metrics = arr;
setMetrics(arr);
};
/* Periodic silent Meta sync — the numbers refresh themselves. Runs once when
the token is known-good, then every 20 min while the app is open. Idempotent
server-side; failures are swallowed (the manual Sync Meta button remains). */
useEffect(() => {
if (!loaded || !metaStatus || !metaStatus.configured || !metaStatus.valid) return;
let alive = true;
const run = async () => {
try { await apiPost('/api/meta-sync', {}); if (alive) await refreshMetrics(); } catch (e) {}
};
run();
const t = setInterval(run, 20 * 60 * 1000);
return () => { alive = false; clearInterval(t); };
}, [loaded, metaStatus && metaStatus.configured && metaStatus.valid]);
function nextCode(taxonomy, mods, slotId) {
const slot = taxonomy.slots.find((s) => s.id === slotId);
const n = mods.filter((m) => m.slotId === slotId).length + 1;
return (slot?.code || "X") + String(n).padStart(2, "0");
}
if (!loaded) return (
Loading your corner…
);
// ONE app, five destinations, the mic in the centre (the entry point).
// Old tabs live on inside their hubs: Angle → Performance, Library/Track →
// Build, More → the gear in the header. Nothing removed, everything homed.
const goTrack = () => { setTab("build"); setBuildSeg("track"); };
return (
{/* header — the wordmark whispers; the gear reaches settings/export */}
{/* Meta token banner — driven by the real expiry from /api/meta-status */}
{metaStatus && metaStatus.configured && metaStatus.warn && (
setCapture(null)}
onSaved={() => { setCapture(null); setIdeasBump((n) => n + 1); }}
/>
)}
{toast && (
);
}
/* ================= IDEATE ================= */
/* The creative creation system's front door: every idea, born by voice or
typed, classified to the taxonomy, filed to Supabase. The mic in the nav
opens CaptureSheet from anywhere; this tab is the library of results. */
const IDEA_STATUSES = ["idea", "queued", "shot", "edited", "live", "retired"];
function Ideate({ taxo, registry, bump, onOpen, onNew }) {
const [ideas, setIdeas] = useState(null);
const [q, setQ] = useState("");
const [filter, setFilter] = useState("all");
useEffect(() => {
let live = true;
apiGet("/api/list-ideas?limit=300&status=" + IDEA_STATUSES.join(","))
.then((d) => { if (live) setIdeas(d.ideas || []); })
.catch(() => { if (live) setIdeas([]); });
return () => { live = false; };
}, [bump]);
const shown = (ideas || []).filter((i) => {
if (filter !== "all" && i.status !== filter) return false;
if (q.trim()) {
const hay = [i.title, i.raw, i.hook_text, i.angle_code, i.notes].join(" ").toLowerCase();
if (!hay.includes(q.trim().toLowerCase())) return false;
}
return true;
});
return (
MADVERTISING
{metaStatus.valid
? `⚠ Meta access token expires in ${metaStatus.days_left} day${metaStatus.days_left === 1 ? "" : "s"} (${(metaStatus.expires_at || "").slice(0, 10)}) — generate a new token and update META_ACCESS_TOKEN in Cloudflare Pages → Settings → Variables.`
: "⚠ Meta access token is invalid or expired — update META_ACCESS_TOKEN in Cloudflare Pages → Settings → Variables."}
)}
{tab === "ideate" && setCapture({ idea })} onNew={() => setCapture({})} />}
{tab === "research" && nextCode(tax, modules, s)} log={log} flash={flash} />}
{buildSeg === "track" && }
)}
{tab === "performance" && (
{/* capture sheet — reachable from anywhere via the centre mic */}
{capture && (
{toast}
)}
{/* bottom nav — 4 quiet destinations, one gold action */}
{[
{ id: "ideate", label: "Ideate", icon: IcIdeate },
{ id: "research", label: "Research", icon: IcResearch },
{ id: "mic" },
{ id: "build", label: "Build", icon: IcBuild },
{ id: "performance", label: "Perform", icon: IcPerform },
].map((t) =>
t.id === "mic" ? (
) : (
)
)}
setQ(e.target.value)} placeholder="Search ideas…" />
+ Type one
{["all", ...IDEA_STATUSES].map((s) => (
))}
{ideas === null && Loading ideas…
}
{ideas !== null && shown.length === 0 && (
{shown.map((i) => (
onOpen(i)} style={{ cursor: "pointer", padding: 13 }}>
{i.angle_code} }
{i.status}
{i.hook_text &&
))}
{i.title || (i.raw || "").slice(0, 60) || "Untitled"}
{i.angle_code && “{i.hook_text}”
}
{Array.isArray(i.images) && i.images.length > 0 && (
{i.images.slice(0, 4).map((p) => (
}`})
))}
)}
e.stopPropagation()} style={{ background: C.surface, borderTop: `1px solid ${C.line2}`, borderRadius: "16px 16px 0 0", width: "100%", maxWidth: 720, maxHeight: "88vh", animation: "sheet 0.22s ease-out", overflow: "auto", padding: "16px 16px calc(16px + env(safe-area-inset-bottom, 0px))" }}>
Close
{/* voice — the primary affordance when capturing fresh */}
{!editing && (
)}
set("raw", e.target.value)} placeholder="Speak or type the idea…" />
{classifying ? "Classifying…" : "Classify with AI"}
set("angle", e.target.value)} placeholder="—" options={registry.map((r) => ({ value: r.code, label: `${r.code} — ${r.name}` }))} />
set("lever", e.target.value)} options={tx("levers")} />
set("hook", e.target.value)} options={tx("hooks")} />
set("format", e.target.value)} options={tx("formats")} />
set("layout", e.target.value)} options={tx("layouts")} />
set("cta", e.target.value)} options={tx("ctas")} />
set("hookText", e.target.value)} style={{ minHeight: 48 }} />
set("notes", e.target.value)} style={{ minHeight: 44 }} />
{saving ? "Saving…" : editing ? "Save changes" : "File to library"}
{editing ? "Edit idea" : "Capture an idea"}
{rec === "recording" ? "Recording — tap to stop" : rec === "processing" ? "Transcribing…" : "Tap to speak the idea"}
set("title", e.target.value)} placeholder="One short line" />
{IDEA_STATUSES.map((s) => (
))}
{f.images.map((p, i) => (
))}
COMPETITOR RESEARCH
Meta Ad Library. Long-running ads are the ones that work — study them, then pull the hook into Ideate.
set("q", e.target.value)} placeholder="fight training, MMA coaching, jiu jitsu…" onKeyDown={(e) => { if (e.key === "Enter") search(); }} />
Or search a specific advertiser
set("pageIds", e.target.value)} placeholder="1004040636131255" />
{results.map((r) => {
const isOpen = expanded[r.id];
const body = r.bodies[0] || "";
const long = body.length > 220;
return (
= 30 ? "gold" : r.days_running >= 7 ? "green" : "dim"}>
{r.days_running}d running{r.days_running >= 30 ? " · winner?" : ""}
)}
{r.titles[0] &&
);
})}
)}
{results && results.length === 0 && !note && (
{r.page_name}
{r.days_running != null && (
{r.titles[0]}
}
{body && (
{isOpen || !long ? body : body.slice(0, 220) + "…"}
{long && }
)}
{(r.platforms || []).map((p) => {p} )}
{r.captions[0] && {r.captions[0]}}
{r.snapshot_url && View creative ↗}
saveAsIdea(r)}>{saved[r.id] ? "✓ In Ideate" : "→ Save as idea"}
{/* active angle hero */}
{active ? (
no registry code — ad naming blocked }
{active.thesis && setAngleForm({ ...active })}>Edit angle
) : (
No active angle. Set one — it’s the message everything else tests.
)}
{angleForm && (
setAngleForm({ ...angleForm, thesis: e.target.value })} />
setAngleForm({ ...angleForm, why: e.target.value })} />
setAngleForm({ ...angleForm, status: e.target.value })} options={ANGLE_STATUSES} />
setAngleForm({ ...angleForm, code: e.target.value })} placeholder="No code — ad naming blocked"
options={registry.map((r) => ({ value: r.code, label: `${r.code} — ${r.name}` }))} />
Save angle
{angleForm.id && Delete }
setAngleForm(null)}>Cancel
)}
{/* other angles */}
setAngleForm({ ...blankAngle })}>+ Angle
{/* cycles */}
setCycleForm({ ...blankCycle })}>+ Cycle
{cycleForm && (
setCycleForm({ ...cycleForm, angleId: e.target.value })} options={angles.map((a) => ({ value: a.id, label: a.name }))} />
setCycleForm({ ...cycleForm, question: e.target.value })} />
setCycleForm({ ...cycleForm, status: e.target.value })} options={CYCLE_STATUSES} />
Save cycle
setCycleForm(null)}>Cancel
)}
{/* conversation log */}
{convo.length > 0 && (
)}
);
}
/* ================= LIBRARY ================= */
function Library({ tax, angles, modules, setModules, nextCode, log, flash }) {
const [filterSlot, setFilterSlot] = useState("");
const [editing, setEditing] = useState(null); // module object or "new"
const [queued, setQueued] = useState(null); // capture-tool ideas awaiting intake
const slots = [...tax.slots].sort((a, b) => a.order - b.order);
useEffect(() => {
(async () => {
try { setQueued((await apiGet('/api/list-ideas?status=queued')).ideas || []); }
catch (e) { setQueued([]); /* offline — intake hidden */ }
})();
}, []);
// A queued idea is importable until some module carries its idea_id
const importedIds = new Set(modules.map((m) => m.ideaId).filter(Boolean));
const importable = (queued || []).filter((i) => !importedIds.has(i.id));
const importIdea = (idea) => {
const matched = angles.find((a) => a.code && a.code === idea.angle_code);
setEditing({
id: null, slotId: slots[0]?.id,
name: idea.title || (idea.hook_text || idea.raw || "").slice(0, 80),
tags: {}, link: "", keyLine: idea.hook_text || "",
source: "Capture idea", status: "Queued", notes: idea.notes || "",
angleId: matched?.id || "", angleCode: idea.angle_code || "", ideaId: idea.id,
});
};
const blank = { id: null, slotId: slots[0]?.id, name: "", tags: {}, link: "", keyLine: "", source: "", status: MODULE_STATUSES[0], notes: "", angleId: "", angleCode: "", ideaId: null };
const save = (m) => {
if (!m.name.trim()) return flash("Give it a name first");
if (m.id) {
setModules((ms) => ms.map((x) => (x.id === m.id ? m : x)));
log("module", `Updated ${m.code} · ${m.name}`);
} else {
const created = { ...m, id: uid(), code: nextCode(m.slotId), createdAt: new Date().toISOString() };
setModules((ms) => [...ms, created]);
log("module", `Added ${created.code} · ${created.name}${created.ideaId ? " — imported from capture" : ""}`);
}
setEditing(null); flash("Module saved");
};
const shown = modules.filter((m) => !filterSlot || m.slotId === filterSlot);
return (
{active.name.toUpperCase()}
{active.code ? {active.thesis}
}
{active.why && Why this, why now: {active.why}
}
{(() => { const s = angleStats(active.id); return (
{s.n} creatives
Spend ${s.spend.toFixed(0)}
CPL {s.cpl != null ? "$" + s.cpl.toFixed(2) : "—"}
Leads {s.leads}
Avg CTR {s.ctr != null ? s.ctr.toFixed(2) + "%" : "—"}
Conv {s.conv}
); })()}
{angleForm.id ? "EDIT ANGLE" : "NEW ANGLE"}
setAngleForm({ ...angleForm, name: e.target.value })} placeholder="Build the Version of You That Wins" />
New angle without a code? Insert a row in the Supabase angles table first — codes are the registry, never hardcoded.
{others.map((a) => {
const s = angleStats(a.id);
return (
setAngleForm({ ...a })}>
{a.status}
{a.thesis &&
);
})}
{others.length === 0 && Never enter a new quarter without the next angle staged here. }
{a.name}
{a.thesis}
}
{s.n > 0 && {s.n} creatives · ${s.spend.toFixed(0)} spend · {s.ctr != null ? s.ctr.toFixed(2) + "% CTR" : "no metrics"}
}
{sortedCycles.map((c) => {
const ang = angles.find((a) => a.id === c.angleId);
return (
{c.status}
{ang &&
setClosing({ ...closing, answer: e.target.value })}
placeholder="e.g. 'Move well today' won hook rate by 2x on cold; video overlay beat static on CTR; competitors persona converted best." />
Record verdict & close
setClosing(null)}>Cancel
)}
);
})}
{c.name}
{ang.name} · {c.startDate || "?"} → {c.endDate || "?"}
}
{c.question && Q: {c.question}
}
{c.answer && Market said: {c.answer}
}
{c.status === "Planned" && { setCycles((cs) => cs.map((x) => (x.id === c.id ? { ...x, status: "Active" } : x))); log("cycle", `${c.name} activated`); }}>Activate }
{c.status === "Active" && setClosing({ cycleId: c.id, answer: "" })}>Close cycle }
setCycleForm({ ...c })}>Edit
{closing?.cycleId === c.id && (
{cycleForm.id ? "EDIT CYCLE" : "NEW CYCLE"}
setCycleForm({ ...cycleForm, name: e.target.value })} placeholder="FY27 Q2 · Cycle 1 — October" />
setCycleForm({ ...cycleForm, startDate: e.target.value })} />
setCycleForm({ ...cycleForm, endDate: e.target.value })} />
{convo.map((c) => (
))}
{c.name}
{c.answer}
{importable.map((i) => (
importIdea(i)}>Import
))}
{i.title || (i.hook_text || i.raw || "").slice(0, 60) || "Untitled idea"}
{[i.angle_code, i.lever, i.format_hint].filter(Boolean).join(" · ") || "unclassified"}
Importing links the module to its idea (idea_id) — the idea stays queued in capture until it's shot.
{shown.map((m) => {
const slot = slots.find((s) => s.id === m.slotId);
return (
setEditing({ ...m })} style={{ cursor: "pointer" }}>
{m.status}
{m.keyLine &&
{slot?.name}
{m.angleId && angles.find((a) => a.id === m.angleId) && {angles.find((a) => a.id === m.angleId).name} }
{Object.entries(m.tags || {}).filter(([, v]) => v).map(([k, v]) => {v} )}
{m.link && linked ↗ }
);
})}
{m.name}
“{m.keyLine}”
}
{m.id ? `EDIT ${m.code}` : "NEW MODULE"}
set("name", e.target.value)} placeholder="GSP — fighting is a game" />
{Object.keys(tax.attrs).map((cat) => (
setM({ ...m, tags: { ...m.tags, [cat]: e.target.value } })} options={tax.attrs[cat]} placeholder="—" />
))}
set("status", e.target.value)} options={MODULE_STATUSES} />
set("angleId", e.target.value)} placeholder="No angle"
options={angles.map((a) => ({ value: a.id, label: a.name }))} />
set("source", e.target.value)} placeholder="YT long-form 12 Jul" />
set("link", e.target.value)} placeholder="https://drive.google.com/…" />
ASSEMBLE A CREATIVE
One module per slot. The plate below is your ad name in Meta — that’s the join key.
{slots.map((s) => {
const opts = modules.filter((m) => m.slotId === s.id && m.status !== "Retired");
const pick = modules.find((m) => m.id === picks[s.id]);
return (
setPicks({ ...picks, [s.id]: e.target.value })}
placeholder={opts.length ? `Choose ${s.name.toLowerCase()}…` : "No modules in this slot yet"}
options={opts.map((m) => ({ value: m.id, label: `${m.code} · ${m.name}` }))} />
{pick && (
);
})}
{Object.values(pick.tags || {}).filter(Boolean).map((v, i) => {v} )}
{pick.link ? asset ↗ : no asset link }
)}
{code ?
{tested && ⚠ This exact combination has already been built
}
set("adsetId", e.target.value)} placeholder="From Ads Manager" />
set("market", e.target.value.toUpperCase())} placeholder="US" />
set("version", Math.max(1, parseInt(e.target.value, 10) || 1))} />
set("landingBase", e.target.value)} placeholder="https://levelupfightgame.com/archetype" />
set("srcCode", e.target.value)} placeholder={srcDefault || "us_r1_bvw"} />
set("descriptor", e.target.value)} placeholder={code || "FighterProfile"} />
set("title", e.target.value)} placeholder="Build the version of you that wins" />
set("description", e.target.value)} />
{["LUFG", f.market || "?", f.round, angleCode, descriptor, `v${f.version || 1}`].join(" | ")}
) : (
Pick modules or type a descriptor (and set the angle’s registry code) to preview the ad name.
)}
Uploads the image, builds the creative, creates the ad in the target ad set — named to taxonomy, funnel-tagged, and left PAUSED. You launch it in Ads Manager. Always.
{result && (
{result.taxonomy_name}
Ad {result.ad_id} staged · status PAUSED
{result.warning && ⚠ {result.warning}
}
Review & launch in Ads Manager ↗
upd(a.id, { brand: e.target.value.toUpperCase() })} placeholder="LUFG" />
upd(a.id, { market: e.target.value.toUpperCase() })} placeholder="US / AU / NZ" />
upd(a.id, { version: Math.max(1, parseInt(e.target.value, 10) || 1) })} />
⚠ Name blocked — missing {missing.join(", ")}
) : (
{adName}
e.stopPropagation()} style={{ background: C.surface, borderTop: `1px solid ${C.line}`, borderRadius: "16px 16px 0 0", width: "100%", maxWidth: 720, maxHeight: "80vh", animation: "sheet 0.22s ease-out", overflow: "auto", padding: 16 }}>
Close
{/* breadcrumb */}
{error} }
{!loading && !error && files && files.length === 0 &&
Pick from Drive
{stack.map((c, i) => (
{i < stack.length - 1 && / }
))}
{loading && Loading Drive…
}
{error && Empty folder.
}
{!loading && !error && (
{folders.map((f) => (
))}
{items.map((f) => (
))}
)}
{picker && { picker.onPick(link); setPicker(null); flash("Asset linked from Drive"); }} onClose={() => setPicker(null)} />}
setRegForm(regForm ? null : { descriptor: "", angleId: angles.find((x) => x.status === "Active")?.id || "", market: "US", round: "R1", ratio: "4x5", kind: "Static", assetLink: "" })}>+ Register creative
{metaStatus && metaStatus.configured && {syncing ? "Syncing…" : "Sync Meta"} }
{regForm && (
setRegForm({ ...regForm, kind: e.target.value })} options={CREATIVE_KINDS} />
setRegForm({ ...regForm, angleId: e.target.value })} placeholder="No angle" options={angles.map((x) => ({ value: x.id, label: x.name }))} />
setRegForm({ ...regForm, round: e.target.value })} options={ROUNDS} />
Register
setRegForm(null)}>Cancel
)}
{assemblies.length === 0 && Nothing in the field yet. Build an assembly first. }
);
}
/* ================= PERFORMANCE ================= */
/* The homescreen — the numbers a general checks each morning. Defaults to
THIS testing cycle (aligned to the marketing cycle) and surfaces scale/kill
decisions; toggle to Historical for the deep period breakdowns. CPL — cost
per MMA lead — is the spine, ahead of conversions. */
const avg = (arr) => (arr.length ? arr.reduce((a, b) => a + b, 0) / arr.length : null);
function Performance({ tax, angles, cycles, modules, assemblies, metrics, metaStatus, refreshMetrics, log, flash, goTrack }) {
const [scope, setScope] = useState("cycle"); // cycle | historical
const [syncing, setSyncing] = useState(false);
const activeAngle = angles.find((a) => a.status === "Active");
const activeCycle = cycles.find((c) => c.status === "Active");
const inCycleWindow = (dateStr) => {
if (!activeCycle) return true;
if (activeCycle.startDate && dateStr < activeCycle.startDate) return false;
if (activeCycle.endDate && dateStr > activeCycle.endDate) return false;
return true;
};
// Per-creative rollup for the current cycle
const rows = useMemo(() => {
const map = {};
metrics.filter((r) => inCycleWindow(r.date)).forEach((r) => {
const g = (map[r.assemblyId] = map[r.assemblyId] || { spend: 0, leads: 0, conv: 0, ctrs: [], days: new Set() });
g.spend += +r.spend || 0; g.leads += +r.leads || 0; g.conv += +r.conversions || 0;
if (r.ctr) g.ctrs.push(+r.ctr);
if (r.date) g.days.add(r.date);
});
let list = Object.entries(map).map(([id, v]) => {
const asm = assemblies.find((a) => a.id === id);
if (!asm) return null;
return { asm, spend: v.spend, leads: v.leads, conv: v.conv, ctr: avg(v.ctrs), cpl: v.leads > 0 ? v.spend / v.leads : null, days: v.days.size };
}).filter(Boolean);
// Prefer creatives explicitly linked to the active cycle; if none are linked
// yet (day 1), fall back to everything with metrics in the window.
if (activeCycle) {
const linked = list.filter((r) => r.asm.cycleId === activeCycle.id);
if (linked.length) list = linked;
}
return list;
}, [metrics, assemblies, activeCycle]);
const totSpend = rows.reduce((t, r) => t + r.spend, 0);
const totLeads = rows.reduce((t, r) => t + r.leads, 0);
const blendedCpl = totLeads > 0 ? totSpend / totLeads : null;
// Scale/kill flag — a SUGGESTION the human acts on. Unit is the blended CPL,
// so there are no arbitrary dollar thresholds. An explicit verdict wins.
const flagOf = (r) => {
const v = (r.asm.verdict || "").toLowerCase();
if (v === "scale") return "scale";
if (v === "kill") return "kill";
if (!blendedCpl) return "test"; // nobody has leads yet
if (r.leads === 0 && r.spend >= blendedCpl) return "kill"; // spent a lead's worth, got none
if (r.cpl != null && r.leads >= 2 && r.cpl <= 0.85 * blendedCpl) return "scale";
if (r.cpl != null && r.cpl >= 1.5 * blendedCpl) return "kill";
return "test";
};
const ranked = rows.map((r) => ({ ...r, flag: flagOf(r) }))
.sort((a, b) => (a.cpl == null ? Infinity : a.cpl) - (b.cpl == null ? Infinity : b.cpl));
const nScale = ranked.filter((r) => r.flag === "scale").length;
const nKill = ranked.filter((r) => r.flag === "kill").length;
const flagChip = { scale: "gold", kill: "red", test: "blue" };
const flagLabel = { scale: "SCALE", kill: "KILL", test: "TESTING" };
const sync = async () => {
setSyncing(true);
try {
const res = await apiPost("/api/meta-sync", {});
await refreshMetrics();
flash(`Meta sync: ${res.synced_rows} rows, ${res.matched_assemblies.length} creatives matched`);
log("metric", `Meta sync from Performance — ${res.synced_rows} rows`);
} catch (e) { flash("Meta sync failed — check META_ACCESS_TOKEN / META_AD_ACCOUNT_ID"); }
setSyncing(false);
};
const num = (v) => ({ fontSize: 23, fontWeight: 600, fontFamily: NUM, fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em", color: v });
return (
Meta pulls daily spend/CTR/leads per fingerprint — don’t hand-log the same days for synced creatives.
setRegForm({ ...regForm, descriptor: e.target.value })} placeholder="FighterProfile" />
setRegForm({ ...regForm, market: e.target.value.toUpperCase() })} />
setRegForm({ ...regForm, assetLink: e.target.value })} placeholder="https://drive.google.com/…" />
setPicker({ onPick: (link) => setRegForm((p) => ({ ...p, assetLink: link })) })}>Drive
One creative = one registration, even across 3 aspect ratios. As long as every ratio’s Meta ad name carries this same descriptor, all of them roll up here automatically. Ratio is a per-ad token, not a separate creative.
{sorted.map((a) => {
const L = life(a);
const isOpen = open === a.id;
return (
);
})}
setOpen(isOpen ? null : a.id)}>
{a.kind} }
{a.status}
{a.verdict}
{/* lifetime strip */}
Spend ${L.spend.toFixed(0)}
CPL {L.cpl != null ? "$" + L.cpl.toFixed(2) : "—"}
Leads {L.leads}
CTR {L.ctr != null ? L.ctr.toFixed(2) + "%" : "—"}
Hook {L.hook != null ? L.hook.toFixed(1) + "%" : "—"}
CPA {L.cpa != null ? "$" + L.cpa.toFixed(0) : "—"}
Conv {L.conv}
{L.days && {L.days}d live}
{isOpen && (
{/* modules inside, or the external-creative marker */}
upd(a.id, { kind: e.target.value })} placeholder="—" options={CREATIVE_KINDS} />
upd(a.id, { angleId: e.target.value || null })} placeholder="No angle"
options={angles.map((x) => ({ value: x.id, label: x.name }))} />
upd(a.id, { cycleId: e.target.value || null })} placeholder="No cycle"
options={cycles.filter((c) => !a.angleId || c.angleId === a.angleId).map((c) => ({ value: c.id, label: c.name }))} />
upd(a.id, { verdict: e.target.value }, `${a.code} verdict → ${e.target.value}`)} options={VERDICTS} />
upd(a.id, { notes: e.target.value })} style={{ minHeight: 44 }} />
Save metrics
setMForm(null)}>Cancel
)}
{/* metric history */}
{metrics.filter((x) => x.assemblyId === a.id).slice().reverse().map((r) => (
)}
{a.moduleIds.length > 0
? a.moduleIds.map((id) => {
const m = modules.find((x) => x.id === id);
return m ? {m.code} {m.name} : null;
})
: {a.kind || "External"} — no modules }
{a.assetLink && asset ↗}
upd(a.id, { assetLink: e.target.value })} placeholder="https://drive.google.com/…" />
setPicker({ onPick: (link) => upd(a.id, { assetLink: link }) })}>Drive
upd(a.id, { campaign: e.target.value })} placeholder="Cold prospecting" />
upd(a.id, { platform: e.target.value })} placeholder="Meta / IG" />
{a.status === "Draft" && upd(a.id, { status: "Live", launchDate: today() }, `${a.code} launched`)}>Mark live }
{a.status === "Live" && upd(a.id, { status: "Retired", retiredAt: today() }, `${a.code} retired after run`)}>Retire }
setMForm({ assemblyId: a.id, date: today(), spend: "", hookRate: "", ctr: "", leads: "", conversions: "", notes: "" })}>+ Log metrics
{mForm?.assemblyId === a.id && (
setMForm({ ...mForm, date: e.target.value })} />
setMForm({ ...mForm, spend: e.target.value })} />
setMForm({ ...mForm, hookRate: e.target.value })} />
setMForm({ ...mForm, ctr: e.target.value })} />
setMForm({ ...mForm, leads: e.target.value })} />
setMForm({ ...mForm, conversions: e.target.value })} />
setMForm({ ...mForm, notes: e.target.value })} />
{r.date}
${(+r.spend || 0).toFixed(0)}
hook {r.hookRate || "—"}%
ctr {r.ctr || "—"}%
{r.leads || 0} leads
{r.conversions || 0} conv
))}
{/* scope toggle */}
);
}
/* ================= REPORTS ================= */
function Reports({ tax, angles, modules, assemblies, metrics }) {
const [period, setPeriod] = useState("month");
const { s, e } = periodRange(period, tax.fyStartMonth);
const inRange = metrics.filter((m) => { const d = new Date(m.date); return d >= s && d <= e; });
const byAssembly = useMemo(() => {
const map = {};
inRange.forEach((r) => {
const a = (map[r.assemblyId] = map[r.assemblyId] || { spend: 0, conv: 0, leads: 0, ctrs: [], hooks: [] });
a.spend += +r.spend || 0; a.conv += +r.conversions || 0; a.leads += +r.leads || 0;
if (r.ctr) a.ctrs.push(+r.ctr); if (r.hookRate) a.hooks.push(+r.hookRate);
});
return Object.entries(map).map(([id, v]) => {
const asm = assemblies.find((a) => a.id === id);
return asm && {
asm, spend: v.spend, conv: v.conv, leads: v.leads,
ctr: v.ctrs.length ? v.ctrs.reduce((a, b) => a + b) / v.ctrs.length : 0,
hook: v.hooks.length ? v.hooks.reduce((a, b) => a + b) / v.hooks.length : 0,
cpl: v.leads > 0 ? v.spend / v.leads : null,
cpa: v.conv > 0 ? v.spend / v.conv : null,
};
}).filter(Boolean).sort((a, b) => b.ctr - a.ctr);
}, [inRange, assemblies]);
const moduleStats = useMemo(() => {
const map = {};
byAssembly.forEach((row, idx) => {
const topHalf = idx < Math.ceil(byAssembly.length / 2);
row.asm.moduleIds.forEach((id) => {
const m = (map[id] = map[id] || { runs: 0, top: 0, ctrs: [], scaleWins: 0 });
m.runs++; if (topHalf) m.top++; m.ctrs.push(row.ctr);
if (row.asm.verdict === "Scale") m.scaleWins++;
});
});
return Object.entries(map).map(([id, v]) => ({
mod: modules.find((m) => m.id === id), ...v,
avgCtr: v.ctrs.length ? v.ctrs.reduce((a, b) => a + b) / v.ctrs.length : 0,
})).filter((x) => x.mod).sort((a, b) => b.avgCtr - a.avgCtr);
}, [byAssembly, modules]);
const byAngle = useMemo(() => {
const map = {};
byAssembly.forEach((r) => {
const key = r.asm.angleId || "none";
const g = (map[key] = map[key] || { spend: 0, conv: 0, leads: 0, ctrs: [], n: 0 });
g.spend += r.spend; g.conv += r.conv; g.leads += r.leads; g.ctrs.push(r.ctr); g.n++;
});
return Object.entries(map).map(([id, g]) => ({
angle: angles.find((a) => a.id === id),
...g, ctr: g.ctrs.length ? g.ctrs.reduce((a, b) => a + b, 0) / g.ctrs.length : 0,
})).sort((a, b) => b.ctr - a.ctr);
}, [byAssembly, angles]);
const totSpend = byAssembly.reduce((t, r) => t + r.spend, 0);
const totConv = byAssembly.reduce((t, r) => t + r.conv, 0);
const totLeads = byAssembly.reduce((t, r) => t + r.leads, 0);
return (
{[["cycle", "This cycle"], ["historical", "Historical"]].map(([k, l]) => (
))}
{metaStatus && metaStatus.configured && (
{syncing ? "Syncing…" : "Sync Meta"}
)}
{scope === "historical" ? (
{/* active angle + cycle context */}
{/* the 5 numbers */}
{ranked.length === 0 ? (
Go to Track →
) : (
)}
)}
{activeAngle ? activeAngle.name : "No active angle"}{activeAngle && activeAngle.code ? · {activeAngle.code} : ""}
{activeCycle ? activeCycle.name : "No active cycle — set one on the Angle tab"}
{activeCycle && activeCycle.question && Q: {activeCycle.question}
}
${totSpend.toFixed(0)}
{blendedCpl != null ? "$" + blendedCpl.toFixed(2) : "—"}
{totLeads}
{ranked.length}
{nScale}▲{nKill}▼
No connected ad data yet.
To monitor an ad here: it must be an assembly whose code appears in the Meta ad name.
New ads → stage them in Build (born named to contract).
Existing ads → Track → + Register creative, then tap Sync Meta above.
New ads → stage them in Build (born named to contract).
Existing ads → Track → + Register creative, then tap Sync Meta above.
{ranked.map((r) => {
const better = blendedCpl && r.cpl != null && r.cpl < blendedCpl;
return (
{r.asm.kind} }
{flagLabel[r.flag]}
);
})}
{[r.asm.market, r.asm.round].filter(Boolean).join(" · ")}
CPL {r.cpl != null ? "$" + r.cpl.toFixed(2) : "—"}
Leads {r.leads}
Spend ${r.spend.toFixed(0)}
CTR {r.ctr != null ? r.ctr.toFixed(2) + "%" : "—"}
{r.days > 0 && {r.days}d data}
Flags are suggestions off blended CPL (${blendedCpl != null ? blendedCpl.toFixed(2) : "—"}) — you decide. Act in Ads Manager, then log the verdict in .
{["week", "month", "quarter", "half", "year"].map((k) => (
))}
{byAssembly.length === 0 ? (
${totSpend.toFixed(0)}
{totLeads ? "$" + (totSpend / totLeads).toFixed(2) : "—"}
{totLeads}
{totConv}
{totConv ? "$" + (totSpend / totConv).toFixed(0) : "—"}
{byAssembly.length}
{byAngle.filter((x) => x.angle).map((r) => (
{r.angle.status}
))}
{r.angle.name}
CPL {r.leads > 0 ? "$" + (r.spend / r.leads).toFixed(2) : "—"}
Leads {r.leads}
Avg CTR {r.ctr.toFixed(2)}%
Spend ${r.spend.toFixed(0)}
Conv {r.conv}
{r.n} creatives tested
{byAssembly.map((r, i) => (
1 ? C.red : C.line}` }}>
{r.asm.verdict}
))}
CPL {r.cpl ? "$" + r.cpl.toFixed(2) : "—"}
CTR {r.ctr.toFixed(2)}%
Hook {r.hook.toFixed(1)}%
Spend ${r.spend.toFixed(0)}
CPA {r.cpa ? "$" + r.cpa.toFixed(0) : "—"}
{moduleStats.map((r) => (
))}
{r.mod.name}
Avg CTR {r.avgCtr.toFixed(2)}%
In {r.runs} creatives
Top-half {Math.round((r.top / r.runs) * 100)}%
{r.scaleWins > 0 && {r.scaleWins} scale winner{r.scaleWins > 1 ? "s" : ""} }
Close the loop: what are you killing, scaling, or shooting next because of this report? If the answer is nothing, the report failed — not the month.
{[["export", "Export"], ["settings", "Taxonomy & settings"], ["history", "History"]].map(([k, l]) => (
))}
{section === "export" && (
LLM insight brief
Full history formatted for pasting straight into Claude for analysis — module win rates, fatigue, gaps, next shots.
Full JSON export
Complete structured dump — also your migration file when this graduates to the production app.
{llmExport().slice(0, 3000)}
{Object.keys(tax.attrs).map((cat) => (
))}
setTax({ ...tax, fyStartMonth: +e.target.value })}
options={Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: new Date(2000, i, 1).toLocaleString("en-AU", { month: "long" }) }))} />
)}
{section === "history" && (
{tax.attrs[cat].map((v) => (
{v}
))}
setNewVals({ ...newVals, [cat]: e.target.value })} placeholder={`New ${cat.toLowerCase()}…`} />
addAttr(cat)}>Add
{tax.slots.map((s) => {s.code} · {s.name} )}
setNewVals({ ...newVals, slotName: e.target.value })} placeholder="Slot name (e.g. Re-hook)" />
setNewVals({ ...newVals, slotCode: e.target.value })} placeholder="R" style={{ width: 64 }} />
Add
Existing slots stay put so historical codes never break.
{MODULE_STATUSES.map((v) => {v} )}
{VERDICTS.map((v) => {v} )}
Fixed vocabulary from docs/NAMING.md, enforced by the database — every layer
(capture, Cutman, Meta, readback) speaks it. Change the contract, not the app.
{[...history].reverse().map((h, i) => (
{h.ts.slice(5, 16).replace("T", " ")}
{h.type} {h.detail}
))}
{history.length === 0 && Every add, edit, launch, verdict, and metric log lands here permanently.
}