const { useState, useEffect, useRef, useMemo, useCallback } = React; const { buildFractal, hashSeed, seedToFateCode, fateCodeToSeed } = window.FractalEngine; const CatMeta = window.FractalEngine.CAT_META; const ENRICH_CONCURRENCY = 6; const STORAGE_KEY = "lpfv::paths::v1"; // Legacy keys — removed in favour of URL-as-source-of-truth + explicit Saved Paths. const LEGACY_KEYS = ["lpfv::active::v1", "lpfv::choice", "lpfv::seed"]; // ---------------- URL state ---------------- function readUrlState() { try { const p = new URLSearchParams(window.location.search); const f = (p.get("f") || "").trim().toUpperCase(); const c = (p.get("c") || "").trim(); if (f && c && /^[A-Z0-9]{6}$/.test(f)) return { fateCode: f, choice: c }; } catch {} return null; } function writeUrlState({ fateCode, choice }) { try { const url = new URL(window.location.href); if (fateCode && choice) { url.searchParams.set("f", fateCode); url.searchParams.set("c", choice); } else { url.searchParams.delete("f"); url.searchParams.delete("c"); } window.history.replaceState(null, "", url.toString()); } catch {} } function clearUrlState() { try { const url = new URL(window.location.href); url.searchParams.delete("f"); url.searchParams.delete("c"); window.history.replaceState(null, "", url.toString()); } catch {} } // ---------------- TWEAKS ---------------- const TWEAKS = /*EDITMODE-BEGIN*/{ "accentCyan": "#00F0FF", "accentPurple": "#B24BFF", "treeDepth": 4, "glow": true, "grid": true }/*EDITMODE-END*/; // ---------------- utils ---------------- function useLocalStorage(key, initial) { const [v, setV] = useState(() => { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : initial; } catch { return initial; } }); useEffect(() => { try { localStorage.setItem(key, JSON.stringify(v)); } catch {} }, [key, v]); return [v, setV]; } function clsx(...a) { return a.filter(Boolean).join(" "); } // ---------------- Glyphs (small, geometric only) ---------------- const Glyph = { Plus: (p) => , Copy: (p) => , Dice: (p) => , Play: (p) => , Save: (p) => , X: (p) => , Chev: (p) => , Arrow: (p) => , Gear: (p) => , Link: (p) => , Spark: (p) => , }; // ---------------- Narrative enrichment ---------------- const GEMINI_ENDPOINT = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent"; const POLLINATIONS_ENDPOINT = "https://text.pollinations.ai/"; function buildNodePrompt({ node, choice }) { const catLabel = CatMeta[node.category]?.label || "Ending"; const valLabel = node.valence > 0 ? "thriving" : node.valence < 0 ? "struggle" : "ambiguous"; const tYears = (node.depth * 2.5).toFixed(1); const stepStr = node.step ? ["wealth","joy","chaos","legacy"].map(k => `${k[0]}${node.step[k]>=0?"+":""}${node.step[k]}`).join(" ") : ""; const terminalHint = node.terminal ? "This event ENDS the path — write it as a quiet closure, not a cliffhanger." : "This is an ongoing event, not an ending."; return `You narrate a what-if life simulator. The person committed to: "${choice}". At T+${tYears} years, write a single specific event that happens. Category: ${catLabel}. Valence: ${valLabel}. Step changes: ${stepStr}. ${terminalHint} Return ONLY valid JSON: {"title": "...", "micro": "..."}. - title: 2–5 words, evocative, no clichés. - micro: one or two sentences (max 220 chars), concrete and specific to "${choice}". Show, don't tell. No moralizing. No prose outside the JSON. No markdown fences.`; } function parseEnrichmentJson(text) { // Some models wrap JSON in ```json ... ``` fences; strip defensively. const cleaned = String(text).trim() .replace(/^```(?:json)?\s*/i, "") .replace(/\s*```$/i, "") .trim(); const parsed = JSON.parse(cleaned); if (!parsed.title || !parsed.micro) throw new Error("Missing fields"); return { title: String(parsed.title).trim(), micro: String(parsed.micro).trim() }; } // Gemini (BYOK) async function enrichViaGemini({ node, choice, apiKey, signal }) { const res = await fetch(`${GEMINI_ENDPOINT}?key=${encodeURIComponent(apiKey)}`, { method: "POST", signal, headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contents: [{ parts: [{ text: buildNodePrompt({ node, choice }) }] }], generationConfig: { responseMimeType: "application/json", responseSchema: { type: "object", properties: { title: { type: "string" }, micro: { type: "string" } }, required: ["title", "micro"], }, temperature: 0.85, }, }), }); if (!res.ok) throw new Error(`Gemini ${res.status}`); const data = await res.json(); const text = data?.candidates?.[0]?.content?.parts?.[0]?.text; if (!text) throw new Error("Empty response"); return parseEnrichmentJson(text); } // Pollinations (free, anonymous — shared resource, no SLA) async function enrichViaPollinations({ node, choice, signal }) { const res = await fetch(POLLINATIONS_ENDPOINT, { method: "POST", signal, headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [{ role: "user", content: buildNodePrompt({ node, choice }) }], model: "openai", jsonMode: true, private: true, referrer: "lifefractal.com", }), }); if (!res.ok) throw new Error(`Pollinations ${res.status}`); const text = await res.text(); return parseEnrichmentJson(text); } // Concurrency-limited parallel runner — Gemini free tier is ~15 req/min. async function runLimited(items, limit, fn) { const queue = [...items]; const workers = Array.from({ length: Math.min(limit, queue.length) }).map(async () => { while (queue.length) { const item = queue.shift(); try { await fn(item); } catch (e) { /* swallow — fallback to template */ } } }); await Promise.all(workers); } // Enrichment cache key: tree is fully determined by (seed, choice), so cache per (seed, choice). function enrichmentCacheKey(seed, choice) { return `lpfv::enrich::${seed}::${hashSeed(choice)}`; } // ---------------- Fractal Tree SVG ---------------- function FractalTree({ tree, focusId, setFocusId, hoverId, setHoverId, growthKey, accentCyan, accentPurple, glow }) { const svgRef = useRef(null); const [growth, setGrowth] = useState(0); // 0..1 // Animate grow on mount / whenever growthKey changes useEffect(() => { setGrowth(0); let raf; const start = performance.now(); const dur = 1400; const tick = (t) => { const p = Math.min(1, (t - start) / dur); // Ease out cubic setGrowth(1 - Math.pow(1 - p, 3)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [growthKey]); if (!tree) return null; const { nodes, edges } = tree; const nodeMap = Object.fromEntries(nodes.map(n => [n.id, n])); const maxDepth = Math.max(...nodes.map(n => n.depth)); // Each edge/node has a reveal window based on its depth const windowFor = (depth) => { const segs = maxDepth + 1; const start = depth === 0 ? 0 : (depth - 1) / segs; const end = (depth) / segs + 0.15; return [start, Math.min(1, end)]; }; const revealAmount = (depth) => { const [s, e] = windowFor(depth); if (growth <= s) return 0; if (growth >= e) return 1; const t = (growth - s) / (e - s); return 1 - Math.pow(1 - t, 2); }; const valenceColor = (v) => v > 0 ? accentCyan : v < 0 ? accentPurple : "#8892a6"; // Focus path = chain from focus up to root const focusChain = useMemo(() => { if (!focusId) return new Set(); const s = new Set(); let cur = nodeMap[focusId]; while (cur) { s.add(cur.id); cur = cur.parentId ? nodeMap[cur.parentId] : null; } return s; }, [focusId, nodeMap]); return ( {/* ambient glow */} {/* depth grid lines */} {Array.from({length: maxDepth + 1}).map((_, d) => { const y = 680 - (d / maxDepth) * (680 - 80) - 40; return ; })} {/* EDGES */} {edges.map((e) => { const a = nodeMap[e.from]; const b = nodeMap[e.to]; const r = revealAmount(b.depth); if (r <= 0) return null; const dx = b.x - a.x, dy = b.y - a.y; const endX = a.x + dx * r; const endY = a.y + dy * r; const col = valenceColor(b.valence); const onPath = focusId ? (focusChain.has(a.id) && focusChain.has(b.id)) : true; const dim = focusId && !onPath; return ( {/* soft halo */} {glow && !dim && ( )} ); })} {/* NODES */} {nodes.map((n) => { const r = revealAmount(n.depth); if (r <= 0) return null; const col = n.depth === 0 ? "#fff" : valenceColor(n.valence); const size = n.depth === 0 ? 11 : (10 - n.depth * 1.1); const isFocus = focusId === n.id; const isHover = hoverId === n.id; const onPath = focusId ? focusChain.has(n.id) : true; const dim = focusId && !onPath; return ( setHoverId(n.id)} onMouseLeave={() => setHoverId(null)} onClick={() => setFocusId(isFocus ? null : n.id)}> {/* outer hit target */} {/* halo */} {glow && (isHover || isFocus || n.depth === 0) && ( )} {/* terminal outer ring */} {n.terminal && ( )} {n.depth === 0 && ( )} {/* valence tick (skip on terminal — ring already signals it) */} {n.depth > 0 && n.valence !== 0 && !n.terminal && ( {n.valence > 0 ? "+" : "−"} )} ); })} ); } // ---------------- Stat bar ---------------- function StatBar({ label, value, accent }) { const pct = Math.max(0, Math.min(1, (value + 10) / 20)); const sign = value > 0 ? "+" : ""; return (
{label} {sign}{value}
= 0 ? "50%" : `${pct * 100}%`, width: `${Math.abs(pct - 0.5) * 100}%`, background: accent, boxShadow: `0 0 12px ${accent}80`, }}/>
); } // ---------------- Main App ---------------- function App() { // Tweaks (live) const [tweaks, setTweaks] = useState(TWEAKS); const [editMode, setEditMode] = useState(false); // Core state — URL is the source of truth for a share-able session. // localStorage is reserved for explicit Saved Paths only. const [choice, setChoice] = useState(""); const [draftChoice, setDraftChoice] = useState(""); const [seed, setSeed] = useState(0); const [tree, setTree] = useState(null); const [growthKey, setGrowthKey] = useState(0); const [hoverId, setHoverId] = useState(null); const [focusId, setFocusId] = useState(null); const [savedPaths, setSavedPaths] = useLocalStorage(STORAGE_KEY, []); const [toast, setToast] = useState(null); const [fateInput, setFateInput] = useState(""); // BYOK + settings const [apiKey, setApiKey] = useLocalStorage("lpfv::gemini_key::v1", ""); // narrativeSource: "off" | "pollinations" | "gemini" // Default to Pollinations so out-of-box users get AI narrative with zero setup. const [narrativeSource, setNarrativeSource] = useLocalStorage("lpfv::narrative_source::v1", "pollinations"); const [settingsOpen, setSettingsOpen] = useState(false); const [enrichStatus, setEnrichStatus] = useState({ running: false, done: 0, total: 0 }); const enrichAbortRef = useRef(null); // Clean up legacy implicit-session keys (one-time migration). useEffect(() => { try { LEGACY_KEYS.forEach(k => localStorage.removeItem(k)); } catch {} }, []); // Load from URL on mount. Bare URL = empty state; no implicit restore. useEffect(() => { const urlState = readUrlState(); if (!urlState) return; const s = fateCodeToSeed(urlState.fateCode); setChoice(urlState.choice); setDraftChoice(urlState.choice); setSeed(s); setTree(buildFractal({ seed: s, choice: urlState.choice, depth: tweaks.treeDepth })); setGrowthKey(k => k + 1); }, []); // Keep the URL in sync with the current fate (shareable state). useEffect(() => { if (choice && seed) { writeUrlState({ fateCode: seedToFateCode(seed), choice }); } else { clearUrlState(); } }, [choice, seed]); // Edit mode wiring useEffect(() => { const handler = (e) => { if (e.data?.type === "__activate_edit_mode") setEditMode(true); if (e.data?.type === "__deactivate_edit_mode") setEditMode(false); }; window.addEventListener("message", handler); window.parent.postMessage({type:"__edit_mode_available"}, "*"); return () => window.removeEventListener("message", handler); }, []); const applyTweak = (k, v) => { setTweaks(t => { const next = {...t, [k]: v}; window.parent.postMessage({type:"__edit_mode_set_keys", edits: {[k]: v}}, "*"); return next; }); }; // Rebuild tree when depth changes and choice/seed present useEffect(() => { if (choice && seed) { setTree(buildFractal({ seed, choice, depth: tweaks.treeDepth })); setGrowthKey(k => k + 1); } }, [tweaks.treeDepth]); // ---------- Enrichment effect ---------- // Re-runs when the tree identity or AI settings change. Applies cached text // immediately, then fires fresh enrichment for any uncached nodes. useEffect(() => { if (!tree || !choice || !seed) return; const cacheKey = enrichmentCacheKey(seed, choice); let cache = {}; try { cache = JSON.parse(localStorage.getItem(cacheKey) || "{}"); } catch {} // Apply cached enrichments synchronously if (Object.keys(cache).length) { setTree(prev => { if (!prev) return prev; let changed = false; const nextNodes = prev.nodes.map(n => { if (cache[n.id] && n.title !== cache[n.id].title) { changed = true; return { ...n, title: cache[n.id].title, micro: cache[n.id].micro }; } return n; }); return changed ? { ...prev, nodes: nextNodes } : prev; }); } // Decide which enricher to use. let enricher = null; if (narrativeSource === "gemini" && apiKey) { enricher = (node, signal) => enrichViaGemini({ node, choice, apiKey, signal }); } else if (narrativeSource === "pollinations") { enricher = (node, signal) => enrichViaPollinations({ node, choice, signal }); } if (!enricher) return; const uncached = tree.nodes.filter(n => n.depth > 0 && !cache[n.id]); if (uncached.length === 0) return; if (enrichAbortRef.current) enrichAbortRef.current.abort(); const controller = new AbortController(); enrichAbortRef.current = controller; setEnrichStatus({ running: true, done: 0, total: uncached.length }); let done = 0; runLimited(uncached, ENRICH_CONCURRENCY, async (node) => { if (controller.signal.aborted) return; const enriched = await enricher(node, controller.signal); cache[node.id] = enriched; try { localStorage.setItem(cacheKey, JSON.stringify(cache)); } catch {} setTree(prev => { if (!prev) return prev; const nextNodes = prev.nodes.map(n => n.id === node.id ? { ...n, title: enriched.title, micro: enriched.micro } : n ); return { ...prev, nodes: nextNodes }; }); done++; setEnrichStatus({ running: true, done, total: uncached.length }); }).finally(() => { if (!controller.signal.aborted) setEnrichStatus(s => ({ ...s, running: false })); }); return () => controller.abort(); }, [seed, choice, narrativeSource, apiKey, tweaks.treeDepth]); const runEvolve = (nextChoice, nextSeed) => { const c = nextChoice ?? draftChoice ?? choice; if (!c || !c.trim()) { flash("Enter a life choice first"); return; } const s = nextSeed ?? Math.floor(Math.random() * 0xffffffff); setChoice(c.trim()); setSeed(s); setTree(buildFractal({ seed: s, choice: c.trim(), depth: tweaks.treeDepth })); setFocusId(null); setHoverId(null); setGrowthKey(k => k + 1); }; const reEvolve = () => { const s = Math.floor(Math.random() * 0xffffffff); setSeed(s); setTree(buildFractal({ seed: s, choice, depth: tweaks.treeDepth })); setFocusId(null); setGrowthKey(k => k + 1); }; const replay = () => { if (tree) setGrowthKey(k => k + 1); }; const clearAll = () => { if (enrichAbortRef.current) enrichAbortRef.current.abort(); setChoice(""); setDraftChoice(""); setSeed(0); setTree(null); setFocusId(null); setHoverId(null); setFateInput(""); setEnrichStatus({ running: false, done: 0, total: 0 }); clearUrlState(); flash("cleared"); }; const loadFateCode = () => { const code = fateInput.trim().toUpperCase(); if (code.length < 4) { flash("Fate code too short"); return; } const s = fateCodeToSeed(code); if (!choice) { flash("Enter your life choice first"); return; } setSeed(s); setTree(buildFractal({ seed: s, choice, depth: tweaks.treeDepth })); setFateInput(""); setFocusId(null); setGrowthKey(k => k + 1); flash(`Fate ${code} loaded`); }; const copyFate = async () => { if (!seed) return; const code = seedToFateCode(seed); try { await navigator.clipboard.writeText(code); flash(`${code} copied`); } catch { flash(code); } }; const copyShareLink = async () => { if (!seed || !choice) return; const url = new URL(window.location.origin + window.location.pathname); url.searchParams.set("f", seedToFateCode(seed)); url.searchParams.set("c", choice); const link = url.toString(); try { await navigator.clipboard.writeText(link); flash("share link copied"); } catch { flash(link); } }; const savePath = () => { if (!tree || !choice || !seed) return; const code = seedToFateCode(seed); const entry = { id: `${code}-${Date.now()}`, code, choice, seed, savedAt: Date.now(), }; setSavedPaths(arr => [entry, ...arr.filter(e => !(e.code === code && e.choice === choice))].slice(0, 24)); flash("Path saved"); }; const loadPath = (p) => { setChoice(p.choice); setDraftChoice(p.choice); setSeed(p.seed); setTree(buildFractal({ seed: p.seed, choice: p.choice, depth: tweaks.treeDepth })); setFocusId(null); setGrowthKey(k => k + 1); }; const deletePath = (id) => { setSavedPaths(arr => arr.filter(e => e.id !== id)); }; const flash = (msg) => { setToast(msg); setTimeout(() => setToast(t => (t === msg ? null : t)), 1800); }; // Current focus / hover node data const inspectId = hoverId || focusId; const inspectNode = tree && inspectId ? tree.nodes.find(n => n.id === inspectId) : null; // Summary = extreme leaf, normalized by depth so early terminals can compete // fairly with deep leaves (cumulative delta grows with depth). const leafSummary = useMemo(() => { if (!tree) return null; const childSet = new Set(tree.edges.map(e => e.from)); const leaves = tree.nodes.filter(n => !childSet.has(n.id)); if (leaves.length === 0) return null; // Score per simulated year (2.5y per depth). Max(depth,1) guards root-only trees. const score = (n) => { const years = Math.max(1, n.depth * 2.5); return (n.delta.wealth + n.delta.joy - n.delta.chaos + n.delta.legacy) / years; }; const best = leaves.reduce((a,b) => score(b) > score(a) ? b : a, leaves[0]); const worst = leaves.reduce((a,b) => score(b) < score(a) ? b : a, leaves[0]); return { best, worst, count: leaves.length }; }, [tree]); const fateCode = seed ? seedToFateCode(seed) : ""; const styleVars = { "--cy": tweaks.accentCyan, "--pp": tweaks.accentPurple, }; return (
LIFE-PATH FRACTAL
what-if engine · v0.4
thriving ambiguous struggle {narrativeSource !== "off" && !(narrativeSource === "gemini" && !apiKey) && ( {enrichStatus.running ? `AI ${enrichStatus.done}/${enrichStatus.total}` : "AI"} )}
{/* Bento Grid */}
{/* INPUT cell */}
01 · Life Choice the decision you're modeling