import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" const TOPICS = [ { id: "mbs", label: "Mortgage-Backed Securities & 2008" }, { id: "pe", label: "Private Equity Buyouts" }, { id: "cds", label: "Credit Default Swaps" }, { id: "activist", label: "Hedge Fund Activism" }, { id: "sovdebt", label: "Global South Sovereign Debt" } ] function QuizPanel({ explainer, topicId, database, useLiveQuery, c }) { const [answers, setAnswers] = React.useState({}) const [submitted, setSubmitted] = React.useState(false) const { docs: results } = useLiveQuery("type", { key: "quiz-result" }) const topicResults = results.filter(r => r.topicId === topicId) function submitQuiz() { let score = 0 explainer.quiz.forEach((q, i) => { if (answers[i] === q.correctIndex) score++ }) database.put({ type: "quiz-result", topicId, score, total: explainer.quiz.length, answeredBy: "visitor", avatarUrl: null, createdAt: Date.now() }) setSubmitted(true) } return (

{!submitted && explainer.quiz.map((q, i) => (

{i + 1}. {q.question}

{q.choices.map((ch, ci) => ( setAnswers({ ...answers, [i]: ci })} className="mt-1" /> {ch} ))}

))} {!submitted && ( )} {submitted && (

Your answers:

{explainer.quiz.map((q, i) => (

{answers[i] === q.correctIndex ? "✓" : "✗"} {q.question}

{q.explanation}

))}

)} {topicResults.length > 0 && (

Live Results

{r.avatarUrl && } {r.answeredBy} {r.score}/{r.total}

)}

) } export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("financialization-reader") const { docs: stateDocs } = useLiveQuery("type", { key: "app-state" }) const appState = stateDocs[0] || { type: "app-state", topicId: null, explainer: null } const [loadingTopic, setLoadingTopic] = React.useState(null) async function selectTopic(topic) { setLoadingTopic(topic.id) try { const res = await callAI( `You are a political economy instructor. For the topic "${topic.label}", produce a structured financialization explainer covering: deregulation history, profit flows, risk distribution, and real-world consequences for workers, pensioners, and communities. Also generate 4 quiz questions.`, { schema: { properties: { summary: { type: "string", description: "2-3 sentence overview" }, stages: { type: "array", description: "Pipeline stages from deregulation to consequences", items: { type: "object", properties: { label: { type: "string", description: "Stage name e.g. Deregulation, Profit Flows, Risk Distribution, Consequences" }, narrative: { type: "string", description: "1 paragraph explanation" }, profiters: { type: "string", description: "Who profits at this stage" }, bearers: { type: "string", description: "Who bears the risk/cost" } } } }, quiz: { type: "array", items: { type: "object", properties: { question: { type: "string" }, choices: { type: "array", items: { type: "string" } }, correctIndex: { type: "number" }, explanation: { type: "string" } } } } } } } ) const explainer = JSON.parse(res) await database.put({ ...appState, _id: appState._id, type: "app-state", topicId: topic.id, topicLabel: topic.label, explainer, deepDives: {} }) } finally { setLoadingTopic(null) } } const Spinner = () => ( ) const c = { page: "min-h-screen bg-[#f4f1ea] text-[#1a1a1a] font-[Helvetica_Neue,Helvetica,Arial,sans-serif] pb-24", header: "bg-[#1a1a1a] text-[#f4f1ea] px-5 py-6 border-b-4 border-[#a8261d]", title: "text-3xl font-bold tracking-tight leading-none", tagline: "text-sm text-[#c9c3b6] mt-1 italic", main: "px-4 py-5 max-w-2xl mx-auto space-y-5", section: "bg-white border border-[#1a1a1a] rounded-sm p-4 shadow-[3px_3px_0_#1a1a1a]", h2: "text-xl font-bold border-b-2 border-[#a8261d] pb-2 mb-3 uppercase tracking-wide", btn: "min-h-[44px] px-4 py-3 bg-[#1a1a1a] text-[#f4f1ea] font-semibold rounded-sm hover:bg-[#a8261d] disabled:opacity-50 w-full", btnSm: "min-h-[44px] px-3 py-2 bg-[#a8261d] text-white text-sm font-semibold rounded-sm hover:bg-[#1a1a1a] disabled:opacity-50", input: "w-full min-h-[44px] px-3 py-2 border border-[#1a1a1a] bg-[#fafaf7] rounded-sm", card: "border-l-4 border-[#a8261d] bg-[#fafaf7] p-3 mb-2", pill: "inline-block px-2 py-1 text-xs bg-[#1a1a1a] text-[#f4f1ea] mr-2 mb-1 rounded-sm", muted: "text-sm text-[#5a5a5a] italic", viewer: "flex items-center gap-2 text-xs text-[#c9c3b6]" } return (

Choose a Topic

Pick an instrument or crisis. Everyone viewing sees the same selection.

{appState.topicLabel && (

Currently exploring: {appState.topicLabel}

)}

The Pipeline

{!appState.explainer ? (

Select a topic above to trace the chain from deregulation to consequence.

) : ( <>

{appState.explainer.summary}

{appState.explainer.stages.map((stage, i) => (

{stage.label}

{stage.narrative}

Profits{stage.profiters}

Bears risk{stage.bearers}

{appState.deepDives?.[i] && (

{appState.deepDives[i]}

)} {!appState.deepDives?.[i] && ( )}

))}

)}

Test Your Understanding

{!appState.explainer ? (

The quiz appears once a topic is selected.

) : ( )}

) }