/* Main app — calm narrative. * State machine: userTyping → forge1 → forge2 → progress → result(+ preview) * Switching tabs restarts. Replay button after done. */ const { useState, useEffect, useRef, useMemo } = React; const PREVIEWS = { hotel: window.HotelPreview, documents: window.DocumentsPreview, hospital: window.HospitalPreview, government: window.GovernmentPreview, finance: window.FinancePreview, pharmacy: window.PharmacyPreview, portal: window.PortalPreview, workbook: window.WorkbookPreview, }; const CHAR_MS_USER = 24; const CHAR_MS_FORGE = 18; // ─── Hook: drive the scene timeline ─────────────────────────────────────── function useSceneTimeline(scene, replayKey) { const [s, setS] = useState({ phase: "userTyping", // userTyping | userDone | forgeThinking | forge1 | forge2 | progress | result | done userIdx: 0, forge1Idx: 0, forge2Idx: 0, forge1Visible: false, forge2Visible: false, progressPhase: 0, // 0..2 (reading / building / done) progressPct: 0, previewVisible: false, resultVisible: false, }); useEffect(() => { setS({ phase: "userTyping", userIdx: 0, forge1Idx: 0, forge2Idx: 0, forge1Visible: false, forge2Visible: false, progressPhase: 0, progressPct: 0, previewVisible: false, resultVisible: false, }); const timers = []; const at = (ms, fn) => timers.push(setTimeout(fn, ms)); let t = 350; // small initial breath // 1) Type user message for (let i = 1; i <= scene.user.length; i++) { at(t + i * CHAR_MS_USER, () => setS(p => ({ ...p, userIdx: i }))); } t += scene.user.length * CHAR_MS_USER + 900; // 2) Forge thinking dots at(t, () => setS(p => ({ ...p, phase: "forgeThinking" }))); t += 800; // 3) Show forge line 1 container + type it at(t, () => setS(p => ({ ...p, phase: "forge1", forge1Visible: true }))); for (let i = 1; i <= scene.forge[0].length; i++) { at(t + i * CHAR_MS_FORGE, () => setS(p => ({ ...p, forge1Idx: i }))); } t += scene.forge[0].length * CHAR_MS_FORGE + 550; // 4) Forge line 2 at(t, () => setS(p => ({ ...p, phase: "forge2", forge2Visible: true }))); for (let i = 1; i <= scene.forge[1].length; i++) { at(t + i * CHAR_MS_FORGE, () => setS(p => ({ ...p, forge2Idx: i }))); } t += scene.forge[1].length * CHAR_MS_FORGE + 700; // 5) Progress phases at(t, () => setS(p => ({ ...p, phase: "progress", progressPhase: 0, progressPct: 0 }))); // animate progress smoothly: tick every 60ms const totalProgressMs = scene.phases.reduce((a, b) => a + b.ms, 0); let elapsed = 0; const start = t; const tickInterval = 50; const totalTicks = Math.ceil(totalProgressMs / tickInterval); for (let i = 1; i <= totalTicks; i++) { at(start + i * tickInterval, () => { const ms = i * tickInterval; // compute phase let acc = 0; let ph = 0; for (let p = 0; p < scene.phases.length; p++) { if (ms <= acc + scene.phases[p].ms) { ph = p; break; } acc += scene.phases[p].ms; } if (ms >= totalProgressMs) ph = scene.phases.length - 1; const pct = Math.min(100, (ms / totalProgressMs) * 100); setS(p => ({ ...p, progressPhase: ph, progressPct: pct })); }); } t += totalProgressMs; // 6) Preview fades in slightly before progress finishes at(t - 350, () => setS(p => ({ ...p, previewVisible: true }))); // 7) Result line t += 400; at(t, () => setS(p => ({ ...p, phase: "result", resultVisible: true }))); // 8) Mark done t += 200; at(t, () => setS(p => ({ ...p, phase: "done" }))); return () => timers.forEach(clearTimeout); }, [scene.id, replayKey]); return s; } // ─── Atoms ──────────────────────────────────────────────────────────────── function TypingCursor() { return ; } function ThinkingDots() { return ( ); } // ─── Layout ─────────────────────────────────────────────────────────────── function ForgeMark() { return ( ); } function Header({ scenes, currentId, onPick }) { return (
forgeai
{scenes.map(s => { const active = s.id === currentId; return ( ); })}
); } function ConversationPane({ scene, s, onReplay }) { const showUser = s.userIdx > 0; const showThinking = s.phase === "forgeThinking"; const showForge1 = s.forge1Visible; const showForge2 = s.forge2Visible; const showProgress = ["progress", "result", "done"].includes(s.phase); const showResult = s.resultVisible; const userText = scene.user.slice(0, s.userIdx); const f1 = scene.forge[0].slice(0, s.forge1Idx); const f2 = scene.forge[1].slice(0, s.forge2Idx); const userTypingNow = s.phase === "userTyping" && s.userIdx < scene.user.length; const forge1TypingNow = s.phase === "forge1" && s.forge1Idx < scene.forge[0].length; const forge2TypingNow = s.phase === "forge2" && s.forge2Idx < scene.forge[1].length; return (
{/* User */} {showUser && (
You
{userText} {userTypingNow && }
)} {/* Forge */} {(showThinking || showForge1) && (
ForgeAI
{showThinking && !showForge1 && (
)} {showForge1 && (
{f1} {forge1TypingNow && }
{showForge2 && (
{f2} {forge2TypingNow && }
)}
)}
)} {/* Progress */} {showProgress && (
{scene.phases[s.progressPhase].label} {Math.round(s.progressPct)}%
)} {/* Result */} {showResult && (
Done
{scene.result}
{s.phase === "done" && ( )}
)}
); } function PreviewPane({ scene, visible }) { const Comp = PREVIEWS[scene.preview]; return (
{visible && Comp && } {!visible && (
{/* subtle placeholder shimmer */}
)}
); } function App() { const scenes = window.SCENES; const [currentId, setCurrentId] = useState("hotel"); const [replayKey, setReplayKey] = useState(0); const scene = scenes.find(s => s.id === currentId); const s = useSceneTimeline(scene, replayKey); const pick = (id) => { if (id === currentId) { setReplayKey(k => k + 1); } else { setCurrentId(id); setReplayKey(k => k + 1); } }; return (
setReplayKey(k => k + 1)} />
{/* Subtle footer */}
forgeai · a context-grounded execution agent {s.phase === "done" ? "ready" : s.phase === "progress" ? scene.phases[s.progressPhase].label : "in progress"}
); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();