{/* SVG overlay: links / arc */} {/* thread label at cluster centroid */} {showCluster && (

{cand.title}

)} {/* nodes */} {KEYS.map((id, i) => { const p = pos[id]; const e = ev(id); const reading = stageKey === 'scan' && i === scanIdx; const read = stageKey === 'scan' ? i < scan : true; const isMember = p.role === 'cluster' || p.role === 'arc'; const beat = cand.beats.find(b => b.id === id); const hovered = hover === id; return (

setHover(id)} onMouseLeave={() => setHover(null)} title={e.title} style={{ position:'absolute', left:`${p.x}%`, top:`${p.y}%`, zIndex: hovered ? 9 : (isMember ? 4 : 2), transform:`translate(-50%,-50%) scale(${(p.scale)*(hovered?1.16:1)})`, opacity:p.op, transition:'left .7s cubic-bezier(.5,0,.2,1), top .7s cubic-bezier(.5,0,.2,1), opacity .5s ease, transform .3s cubic-bezier(.2,.8,.2,1)', filter: (stageKey==='scan' && !read) ? 'grayscale(0.85) opacity(0.5)' : (p.role==='ignored' ? 'grayscale(0.5)' : 'none'), cursor:'default' }}> {(reading || hovered) && } {e.fragile && } {/* arc role + label */} {p.role === 'arc' && (

{beat?.role}

{e.title.split(/[—·]/)[0].trim()}

)} {/* reading signal chip */} {reading && (

+{(e.people[0]||e.tags[0]||'signal')}

)}

); })} {/* stage caption */}

{stageKey === 'scan' ? `reading ${Math.min(scan,12)} / 12` : showCluster ? `${order.length} linked · ${KEYS.length - order.length} set aside` : showArc ? `${order.length} beats on the arc` : '32 memories queued'}

{/* scrubber */}

{STAGES.map((s,i) => { const done = i < si, active = i === si; return ( ); })}

{[0.5,1,2].map(sp => ( ))}

); } function PlayGlyph(){return ;} function PauseGlyph(){return ;} // ── Engine monitor rail ───────────────────────────────────────────────────── function EngineRail({ stage, cand, playing, atEnd }) { const showConf = ['cluster','propose','arc','draft','formed'].includes(stage.key); return (

Weaver engine

{stage.verb}

{showConf && }

{stage.blurb}

{/* terminal monitor */}

{stage.think.map((t,i) => (

› {t}{i===stage.think.length-1 && playing && !atEnd && ▍}

))}

); } // ── API trace (network-inspector) ─────────────────────────────────────────── function ApiTrace({ si }) { return (

API trace

weaver.life/api

{STAGES.map((s,i) => { if (i > si) return null; const active = i === si; return (

{active && } {s.label}

{s.api.map((a,j) => (

{a.path}

{active && (

{a.note}

{a.req &&

}
                        {a.res && }

)}

))}

); })}

); } function Pre({ label, body }) { return (

{label}

{body}

); } // ── Main page ─────────────────────────────────────────────────────────────── function PageWeaver({ go, candidate }) { const [si, setSi] = useState(0); const [playing, setPlaying] = useState(false); const [speed, setSpeed] = useState(1); const [candId, setCandId] = useState(candidate || 'cand_snow'); const [accepted, setAccepted] = useState(false); const [order, setOrder] = useState([]); const [scan, setScan] = useState(0); const [draftN, setDraftN] = useState(0); const [hover, setHover] = useState(null); const [showApi, setShowApi] = useState(true); const cand = CANDIDATES.find(c => c.id === candId) || CANDIDATES[0]; const stage = STAGES[si]; const atEnd = si === STAGES.length - 1; // sync candidate from Tweak useEffect(() => { if (candidate && candidate !== candId) setCandId(candidate); }, [candidate]); // when candidate changes → reset order + un-accept; bounce back if past propose useEffect(() => { setOrder(cand.beats.map(b => b.id)); setAccepted(false); setSi(s => s > PROPOSE_I ? PROPOSE_I : s); }, [candId]); // auto-advance useEffect(() => { if (!playing) return; if (atEnd) { setPlaying(false); return; } const t = setTimeout(() => { if (stage.key === 'propose') { if (cand.belowThreshold) { setPlaying(false); return; } if (!accepted) setAccepted(true); } setSi(s => Math.min(s + 1, STAGES.length - 1)); }, stageMs(stage.key, cand) / speed); return () => clearTimeout(t); }, [playing, si, speed, accepted, candId]); // scan sweep useEffect(() => { if (stage.key !== 'scan') return; if (!playing) { setScan(12); return; } setScan(0); const iv = setInterval(() => setScan(s => (s >= 12 ? (clearInterval(iv), 12) : s + 1)), 150 / speed); return () => clearInterval(iv); }, [stage.key, playing, speed]); // draft reveal useEffect(() => { if (stage.key !== 'draft') return; const total = cand.draft.length; if (!playing) { setDraftN(total); return; } setDraftN(0); const iv = setInterval(() => setDraftN(n => (n >= total ? (clearInterval(iv), total) : n + 1)), 800 / speed); return () => clearInterval(iv); }, [stage.key, playing, speed, candId]); const jump = useCallback((i) => { setPlaying(false); if (i >= ARC_I && !accepted) { if (cand.belowThreshold) { i = PROPOSE_I; } else setAccepted(true); } setSi(i); }, [accepted, cand]); const step = useCallback((d) => jump(Math.max(0, Math.min(STAGES.length - 1, si + d))), [si, jump]); const togglePlay = useCallback(() => { if (atEnd) { setSi(0); setAccepted(false); setOrder(cand.beats.map(b => b.id)); setPlaying(true); return; } setPlaying(p => !p); }, [atEnd, cand]); const startFromInbox = useCallback(() => { setSi(1); setPlaying(true); }, []); const accept = useCallback(() => { setAccepted(true); setSi(ARC_I); }, []); const advance = useCallback(() => step(1), [step]); const moveBeat = useCallback((i, d) => setOrder(o => { const j = i + d; if (j < 0 || j >= o.length) return o; const n = o.slice(); [n[i], n[j]] = [n[j], n[i]]; return n; }), []); const reshuffle = useCallback(() => setOrder(cand.beats.map(b => b.id)), [cand]); const replay = useCallback(() => { setSi(0); setAccepted(false); setOrder(cand.beats.map(b => b.id)); setPlaying(false); }, [cand]); // which stage detail panel let panel = null; if (stage.key === 'inbox') panel = ; else if (stage.key === 'scan') panel = ; else if (stage.key === 'cluster') panel = ; else if (stage.key === 'propose') panel = ; else if (stage.key === 'arc') panel = ; else if (stage.key === 'draft') panel = ; else if (stage.key === 'formed') panel = ; return ( } title="Story Weaver" sub="Watch the Weaver turn scattered memories into a Playbook — it links, proposes, arranges, and drafts. You stay in control at every step." right={ }/>

b.id)} scan={scan} hover={hover} setHover={setHover}/> {panel}

{showApi && }

); } window.PageWeaver = PageWeaver; })();