// Fill by Flow — screens // Listen, SingleFluid, JobTable, Capacity, Safety const { useState: useSt, useEffect: useEf, useRef: useRf } = React; // ══ LISTEN SCREEN ═════════════════════════════════════ function ListenScreen({ state, onDemo, onToggle, connStatus }) { const { listening, transcript } = state; return (
{connStatus === 'live' ? 'LIVE' : 'WARMING UP'}} />
{transcript || "Say a fluid, a job, or 'how much'"}
Year · Make · Model · Fluid or Job
— Tap to demo —
onDemo('single')} html='"19 F-150
oil change"' /> onDemo('job')} html='"19 F-150
full service"' /> onDemo('capacity')} html='"how much
oil"' />
); } function DemoBtn({ onClick, html }) { return ( {/* BIG CAPACITY NUMBER + METER */}
{capDisplay}
{capUnits} {units === 'metric' ? `${data.capacity[wetDry==='dry'?'dry':'wet']} QT` : `${data.capacity.metric.toFixed(2)} L`}
{/* FLUID METER */} {density !== "industrial" && (
0 ? poured : parseFloat(capDisplay)} max={parseFloat(capDisplay)} label={pouring ? "POURING" : poured > 0 ? "POURED" : "TARGET"} density={density} />
)}
{/* SPEC BLOCK — novel decoder */}
Spec · Grade
{data.spec.grade}
{data.spec.standard}
OEM: {data.spec.oem}
{showMatrix && (
✓ COMPATIBLE
{data.compatible.map((c, i) => (
✓{c}
))}
✗ NEVER USE
{data.incompatible.map((c, i) => (
✗{c}
))}
)}
{/* PROCEDURE — numbered */}
Procedure · voice "next" to advance
{data.procedure.map((p, i) => (
0{i+1}
{p.step}
{p.detail}
))}
{/* FLAGS */}
SYNTHETIC OEM SPEC TURBO {data.interval.miles/1000}K MI · {data.interval.months}MO
{/* source */}
Source · {(data.confidence*100).toFixed(0)}% confidence
{data.source}
Screen stays on · voice "new query" to reset
{/* POUR + action bar */}
); } // ══ JOB TABLE SCREEN ══════════════════════════════════ function JobTableScreen({ data, veh, onBack, onItemTap, units, layout }) { const [done, setDone] = useSt(new Set()); const [expanded, setExpanded] = useSt(null); const toggle = (id) => { setDone(prev => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); }; const fluidItems = data.items.filter(i => i.capacity !== null); const totalCap = fluidItems.reduce((s, i) => s + (i.capacity || 0), 0); const doneCount = data.items.filter(i => done.has(i.id)).length; const pct = (doneCount / data.items.length) * 100; // group by category const grouped = data.items.reduce((acc, item) => { (acc[item.category] = acc[item.category] || []).push(item); return acc; }, {}); return (
{/* job header */}
JOB TABLE · FLUID
FORD WORKSHOP
{veh.year} {veh.make} {veh.model} · {veh.engine}
{data.jobName}
{doneCount}/{data.items.length}
{units === 'metric' ? (totalCap * 0.946).toFixed(1) + 'L' : totalCap.toFixed(1) + 'QT'} TOTAL
{/* table */}
{Object.entries(grouped).map(([cat, items]) => (
{cat}
{items.map(item => ( toggle(item.id)} onExpand={() => setExpanded(expanded === item.id ? null : item.id)} expanded={expanded === item.id} layout={layout} units={units} /> ))} ))}
{/* bottom */}
); } function JobRow({ item, done, onToggle, onExpand, expanded, layout, units }) { const hasWarn = item.warning != null; const isRed = item.warningLevel === 'red'; const displayCap = item.capacity == null ? null : units === 'metric' ? (item.capacity * 0.946).toFixed(2) : item.capacity.toFixed(1); const displayUnits = units === 'metric' ? 'L' : item.units; if (layout === "cards") { // card layout — more visual return (
{item.name}
{item.spec}
{item.specDetail}
{displayCap != null ? ( <>
{displayCap}
{displayUnits}
) : (
—
)}
{hasWarn && (
⚠ {item.warning}
)}
); } // default dense table layout return (
{done && }
{item.name}
{item.spec}
{hasWarn && (
⚠ {item.warning}
)}
{item.procedure}
{displayCap != null ? ( <>
{displayCap}
{displayUnits}
) : (
N/A
)}
); } // ══ CAPACITY-ONLY SCREEN ══════════════════════════════ function CapacityScreen({ data, veh, onBack, units, density }) { const val = units === 'metric' ? data.capacity.metric.toFixed(2) : data.capacity.value.toFixed(1); const u = units === 'metric' ? 'L' : data.capacity.units; return (
Capacity · Voice Answer
{veh.year} {veh.make} {veh.model}
{veh.engine}
"{data.query}"
{data.component}
{density !== 'industrial' && ( )}
{val}
{u}
{data.note}
ALSO: {units === 'metric' ? data.capacity.value + ' QT' : data.capacity.metric.toFixed(2) + ' L'}
); } // ══ SAFETY WALL (blocking warning) ═══════════════════ function SafetyWall({ data, onAck }) { return (
⚠⚠⚠ {data.severity} ⚠⚠⚠
{data.title}
{data.subtitle}
REASON
{data.reason}
✓ CORRECT FLUID
{data.correct}
); } // ══ shared styles ════════════════════════════════════ const screenStyle = { position:'absolute', inset:0, display:'flex', flexDirection:'column', background:'var(--bg)' }; const microLabel = { fontFamily:"'DM Mono',monospace", fontSize:9, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--muted)' }; const diagBlock = { width:'100%', background:'var(--panel)', border:'2px solid var(--border-h)', borderLeft:'4px solid var(--accent)' }; const btnNew = { flex:1, height:64, background:'var(--panel-2)', border:'2px solid var(--border-h)', color:'var(--text)', fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:17, letterSpacing:'0.14em', textTransform:'uppercase', cursor:'pointer' }; const btnWrong = { flex:1, height:64, background:'transparent', border:'2px solid rgba(255,59,48,0.46)', color:'var(--warn)', fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:17, letterSpacing:'0.14em', textTransform:'uppercase', cursor:'pointer' }; Object.assign(window, { ListenScreen, SingleFluidScreen, JobTableScreen, CapacityScreen, SafetyWall });