/* global React, ReactDOM, RECIPE_DATA, OneCook */ const { useState, useEffect, useMemo, useRef } = React; const { ConfidenceBadge, ConfidenceModal, SourceModal, tierFor, scaleQuantity } = window.OneCook; const DATA = window.RECIPE_DATA; // ───────────────────────────── App ───────────────────────────── function App() { const [modal, setModal] = useState(null); // 'confidence' | 'source' | null const [servings, setServings] = useState(DATA.metadata.servings); const [cookMode, setCookMode] = useState(false); const [checked, setChecked] = useState(() => new Set()); const [doneSteps, setDoneSteps] = useState(() => new Set()); const [activeStep, setActiveStep] = useState(0); const factor = servings / DATA.metadata.servings; const toggleIng = (i) => { setChecked((s) => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; }); }; const toggleStep = (i) => { setDoneSteps((s) => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; }); }; return (
setModal("source")} onOpenConfidence={() => setModal("confidence")} />
setModal("confidence")} onOpenSource={() => setModal("source")} cookMode={cookMode} setCookMode={setCookMode} /> setModal("source")} />
setModal("source")} onOpenConfidence={() => setModal("confidence")} />
{modal === "confidence" && ( setModal(null)} onOpenSource={() => setModal("source")} /> )} {modal === "source" && setModal(null)} />}
); } // ───────────────────────────── Top Bar ───────────────────────────── function TopBar({ onOpenSource, onOpenConfidence }) { const [open, setOpen] = useState(false); return (
OneCook AI
BR
{open && ( )}
); } function Logo() { return ( ); } // ───────────────────────────── Hero ───────────────────────────── function Hero({ data, onOpenConfidence, onOpenSource, cookMode, setCookMode }) { const m = data.metadata; return (
MainsAutumnOne-pan

{data.title}

{data.instructions && data.instructions.length > 0 && (

{(() => { const first = data.instructions[0]?.text || ""; return first.length > 180 ? first.slice(0, 177) + "…" : first; })()}

)}
} />
); } function Stat({ label, v, extra }) { return (
{label}
{v} {extra}
); } function DifficultyPips({ n }) { return ( {Array.from({ length: 5 }).map((_, i) => ( ))} ); } function Dot() { return ; } // ───────────────────────────── Confidence Card ───────────────────────────── function ConfidenceCard({ data, onOpenConfidence, onOpenSource }) { const c = data.confidence_assessment; const t = tierFor(c.overall_score); return (
Extraction Confidence
{c.overall_score.toFixed(2)} / 10.00
{t.label}
{Object.entries(c.field_scores).map(([k, v]) => { const ft = tierFor(v); return (
{k} {v.toFixed(2)}
); })}
{data.source_type} · iter #{c.iteration}
{c.ambiguities.length} ambiguities flagged.
); } // ───────────────────────────── Provenance Strip ───────────────────────────── function ProvenanceStrip({ data, onOpenSource }) { return (
Extracted from a {data.source_type === 'handwritten' ? 'handwritten note' : data.source_type + ' source'} · OneCook Vision v3 · 1 source artifact
); } // ───────────────────────────── Ingredients ───────────────────────────── function Ingredients({ data, servings, setServings, factor, checked, toggleIng, cookMode }) { const baseServings = data.metadata.servings; return ( ); } function IngRow({ ing, factor, checked, onToggle, cookMode }) { const scaled = scaleQuantity(ing.quantity, factor); const scaledChanged = scaled !== ing.quantity && ing.quantity; return (
  • {ing.quantity && ( {scaled} {scaledChanged && · was {ing.quantity}} )} {ing.unit && {ing.unit}} {ing.item}
    {ing.preparation &&
    {ing.preparation}
    }
    • ); } // ───────────────────────────── Instructions ───────────────────────────── function Instructions({ data, doneSteps, toggleStep, activeStep, setActiveStep, cookMode }) { // Lightweight phase grouping: thirds of the step list (or none if <6 steps) const phases = useMemo(() => { const n = data.instructions.length; if (n < 6) return [{ title: null, range: [1, n] }]; const a = Math.ceil(n / 3); const b = Math.ceil((n * 2) / 3); return [ { title: "Prep", range: [1, a] }, { title: "Cook", range: [a + 1, b] }, { title: "Finish", range: [b + 1, n] }, ]; }, [data.instructions.length]); return (

    Method

    {data.instructions.length} steps · {doneSteps.size}/{data.instructions.length} done
    {phases.map((phase, pi) => (
    Phase {pi + 1}

    {phase.title}

      {data.instructions .filter((s) => s.step_number >= phase.range[0] && s.step_number <= phase.range[1]) .map((step) => ( toggleStep(step.step_number)} isAmbiguous={false} /> ))}
    ))}
    ); } function StepRow({ step, done, onToggle, isAmbiguous }) { return (

  • {step.text}

    {(step.temperature_c != null || step.temperature != null) && (() => { const c = step.temperature_c != null ? step.temperature_c : (typeof step.temperature === 'number' ? step.temperature : null); if (c == null) return null; return {(c * 9 / 5 + 32).toFixed(0)}°F · {c}°C; })()} {step.time_duration && {step.time_duration}} {isAmbiguous && ( Flagged · review against source )}
    • ); } function Chip({ icon, children }) { const icons = { thermo: , clock: <>, }; return ( {icons[icon]} {children} ); } // ───────────────────────────── Notes ───────────────────────────── function Notes({ data, onOpenSource, onOpenConfidence }) { const ambig = data.confidence_assessment?.ambiguities || []; if (ambig.length === 0) return null; return (
    Source ambiguities
      {ambig.map((a, i) => (
    • {a}
      • ))}
    ); } function Footer() { return (
    OneCook · Recipes you've actually cooked
    v3.2.1 · build a7f9d2
    ); } // ───────────────────────────── Mount ───────────────────────────── ReactDOM.createRoot(document.getElementById("root")).render();