SYLLABLE FLOW GRID

\n {Array.from({ length: maxBeats }, (_, i) => (\n

\n {i % 4 === 0 ? (i / 4 + 1) : \"·\"}\n

\n ))}\n

\n {grid.map((syls, li) => (\n

\n {li + 1}\n {syls.slice(0, maxBeats).map((syl, si) => {\n const onBeat = si % 4 === 0;\n const rk = extractRhymeKey(syl.text);\n const c = rk.key1 ? cF(rk.key1, rk.confidence) : {};\n return (\n

\n {syl.stressed && (\n

\n )}\n

\n );\n })}\n {syls.length}s\n

\n ))}\n

\n stressed\n on-beat\n

\n );\n}\n\n/* ═══════════════════════════════════════════════════════════════════════════\n SCORE RADAR (mini SVG per bar)\n ═══════════════════════════════════════════════════════════════════════════ */\nfunction ScoreRadar({ scores, size = 60 }) {\n const dims = [\"rhyme\", \"syllable\", \"internal\", \"flow\", \"density\", \"alliteration\", \"vocabRichness\"];\n const labels = [\"RHY\", \"SYL\", \"INT\", \"FLW\", \"DEN\", \"ALT\", \"VOC\"];\n const cx = size / 2, cy = size / 2, r = size / 2 - 8;\n const angleStep = (Math.PI * 2) / dims.length;\n\n const points = dims.map((d, i) => {\n const angle = i * angleStep - Math.PI / 2;\n const val = scores[d] || 0;\n return { x: cx + Math.cos(angle) * r * val, y: cy + Math.sin(angle) * r * val };\n });\n const polyPoints = points.map(p => `${p.x},${p.y}`).join(\" \");\n\n // Grid rings\n const rings = [0.25, 0.5, 0.75, 1];\n\n return (\n \n );\n}\n\n/* ═══════════════════════════════════════════════════════════════════════════\n MAIN APP\n ═══════════════════════════════════════════════════════════════════════════ */\nexport default function PCEPhase4() {\n const [text, setText] = useState(SAMPLE);\n const [hoveredWord, setHoveredWord] = useState(null);\n const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });\n const [selectedKey, setSelectedKey] = useState(null);\n const [theme, setTheme] = useState(\"overcoming struggle, rising from nothing, relentless ambition\");\n const [generating, setGenerating] = useState(false);\n const [statusLog, setStatusLog] = useState([]);\n const [activeTab, setActiveTab] = useState(\"verse\");\n const [lastResult, setLastResult] = useState(null);\n const [syllableRange, setSyllableRange] = useState({ min: 12, max: 18 });\n const [ledger, setLedger] = useState(() => createLedger());\n const [variants] = useState(() => PV.map(v => ({ ...v })));\n const [compiledData, setCompiledData] = useState(null);\n const [storageLoaded, setStorageLoaded] = useState(false);\n const seedRef = useRef(Date.now());\n const abortRef = useRef(null);\n\n // Scheme planner state\n const [schemePlan, setSchemePlan] = useState(SCHEME_PRESETS[\"Couplets (AABB)\"].slice());\n const [selectedPreset, setSelectedPreset] = useState(\"Couplets (AABB)\");\n const [verseBarCount, setVerseBarCount] = useState(8);\n const [verseProgress, setVerseProgress] = useState(null); // {current, total, bars:[], scores:[], status}\n const [barScores, setBarScores] = useState([]); // scores for all bars in text\n\n // Load persisted data\n useEffect(() => {\n (async () => {\n try {\n const saved = await sGet(SK.compiled);\n if (saved?.rules) { CD = saved; setCompiledData(saved); }\n const bandit = await sGet(SK.bandit);\n if (bandit && Array.isArray(bandit)) bandit.forEach((b, i) => { if (variants[i]) { variants[i].s = b.s || 0; variants[i].t = b.t || 0; } });\n const lyrics = await sGet(SK.lyrics);\n if (lyrics && typeof lyrics === \"string\" && lyrics.trim()) setText(lyrics);\n } catch {}\n setStorageLoaded(true);\n })();\n }, []);\n\n // Auto-save lyrics\n useEffect(() => {\n if (!storageLoaded) return;\n const t = setTimeout(() => sSet(SK.lyrics, text), 1500);\n return () => clearTimeout(t);\n }, [text, storageLoaded]);\n\n const persistBandit = useCallback(async () => {\n await sSet(SK.bandit, variants.map(v => ({ id: v.id, s: v.s, t: v.t })));\n }, [variants]);\n\n // Rebuild ledger\n const rebuildLedger = useCallback(() => {\n const L = createLedger();\n const lines = text.split(\"\\n\").filter(l => l.trim());\n const tok = lines.map(l => tokenize(l));\n const sch = detectSchemes(tok);\n lines.forEach((line, i) => {\n if (sch[i]) lUER(L, line, i, sch[i]);\n const ws = tok[i].filter(t => t.type === \"word\" && t.rk?.key1);\n const kg = {}; ws.forEach((w, wi) => (kg[w.rk.key1] = kg[w.rk.key1] || []).push({ word: w.text, pos: wi / Math.max(1, ws.length - 1) }));\n Object.entries(kg).forEach(([key, group]) => { if (group.length >= 2) group.forEach(g => lNI(L, g.word, i, g.pos)); });\n });\n L.barCount = lines.length;\n setLedger(L);\n return L;\n }, [text]);\n\n useEffect(() => { rebuildLedger(); }, [text, rebuildLedger]);\n\n // Compute scores for all bars\n useEffect(() => {\n const lines = text.split(\"\\n\").filter(l => l.trim());\n if (!lines.length) { setBarScores([]); return; }\n const tok = lines.map(l => tokenize(l));\n const sch = detectSchemes(tok);\n const scores = lines.map((line, i) => {\n const ct = buildCt({ ledger, scheme: sch[i] || \"A\", theme, syllables: syllableRange });\n return scoreBar(line, ct, ledger);\n });\n setBarScores(scores);\n }, [text, ledger, theme, syllableRange]);\n\n const analysis = useMemo(() => {\n const raw = text.split(\"\\n\"), tok = raw.map(l => tokenize(l)), sch = detectSchemes(tok);\n const fam = {}; tok.forEach(line => line.forEach(t => { if (t.rk?.key1) fam[t.rk.key1] = (fam[t.rk.key1] || 0) + 1; }));\n const src = { exception: 0, compiled: 0, handcrafted: 0, fallback: 0 };\n tok.forEach(line => line.forEach(t => { if (t.rk?.source && t.type === \"word\") src[t.rk.source] = (src[t.rk.source] || 0) + 1; }));\n return { tokenized: tok, schemes: sch, familyCount: fam, sources: src };\n }, [text]);\n\n const legend = useMemo(() =>\n Object.entries(analysis.familyCount).filter(([, c]) => c >= 2).sort((a, b) => b[1] - a[1]).slice(0, 18)\n .map(([key, count]) => ({ key, count, color: cF(key, 0.8) }))\n , [analysis.familyCount]);\n\n // Ensure schemePlan length matches verseBarCount\n useEffect(() => {\n if (schemePlan.length < verseBarCount) {\n const base = SCHEME_PRESETS[selectedPreset] || [\"A\", \"B\"];\n const extended = [...schemePlan];\n while (extended.length < verseBarCount) extended.push(base[extended.length % base.length]);\n setSchemePlan(extended);\n } else if (schemePlan.length > verseBarCount) {\n setSchemePlan(schemePlan.slice(0, verseBarCount));\n }\n }, [verseBarCount]);\n\n // Compile CMUdict\n const handleCompile = useCallback(async () => {\n setStatusLog([{ stage: \"info\", label: \"Fetching CMUdict...\" }]);\n try {\n const res = await fetch(CMUDICT_URL);\n const text = await res.text();\n const entries = parseCMU(text);\n setStatusLog(p => [...p, { stage: \"info\", label: `Parsed ${entries.length} entries, compiling...` }]);\n const result = compileCMU(entries, (s) => setStatusLog(p => [...p, { stage: \"info\", label: s.msg }]));\n await sSet(SK.compiled, result);\n CD = result; setCompiledData(result);\n setStatusLog(p => [...p, { stage: \"accepted\", label: `Compiled: ${result.stats.rules} rules, ${result.stats.exceptions} exceptions` }]);\n } catch (e) { setStatusLog(p => [...p, { stage: \"error\", label: e.message }]); }\n }, []);\n\n // Single bar generation\n const handleGenSingle = useCallback(async (scheme) => {\n if (generating) return;\n setGenerating(true); setStatusLog([]);\n const cL = rebuildLedger();\n const bars = text.split(\"\\n\").filter(l => l.trim());\n const _ic = cL.internalChains.length > 0\n ? cL.internalChains.reduce((best, ch) => ch.words.length > best.words.length ? ch : best)\n : null;\n const internalHint = _ic \n ? { key: _ic.key, nearPos: _ic.approxPos ?? 0.5, examples: _ic.words.slice(-4) } \n : undefined;\n const ct = buildCt({ ledger: cL, scheme, theme, syllables: syllableRange, internalHint });\n try {\n seedRef.current = (seedRef.current * 1103515245 + 12345) & 0x7fffffff;\n const result = await genBar({ contract: ct, recentBars: bars, seed: seedRef.current, variants, onStatus: s => setStatusLog(p => [...p, s]) });\n setLastResult(result);\n if (result.bar) setText(p => { const t = p.trimEnd(); return t + (t ? \"\\n\" : \"\") + result.bar; });\n await persistBandit();\n } catch (e) { setStatusLog(p => [...p, { stage: \"error\", label: e.message }]); }\n finally { setGenerating(false); }\n }, [generating, text, theme, syllableRange, variants, rebuildLedger, persistBandit]);\n\n // Multi-bar verse generation\n const handleGenVerse = useCallback(async () => {\n if (generating) return;\n setGenerating(true);\n const controller = new AbortController();\n abortRef.current = controller;\n const progress = { current: 0, total: verseBarCount, bars: [], scores: [], status: \"running\" };\n setVerseProgress({ ...progress });\n setStatusLog([]);\n\n let currentText = text;\n let currentLedger = rebuildLedger();\n\n for (let i = 0; i < verseBarCount; i++) {\n if (controller.signal.aborted) { progress.status = \"aborted\"; break; }\n\n const scheme = schemePlan[i] || \"A\";\n progress.current = i + 1;\n setVerseProgress({ ...progress });\n setStatusLog([{ stage: \"info\", label: `Bar ${i + 1}/${verseBarCount} — scheme ${scheme}` }]);\n\n const bars = currentText.split(\"\\n\").filter(l => l.trim());\n const _ic2 = currentLedger.internalChains.length > 0\n ? currentLedger.internalChains.reduce((best, ch) => ch.words.length > best.words.length ? ch : best)\n : null;\n const internalHint2 = _ic2 \n ? { key: _ic2.key, nearPos: _ic2.approxPos ?? 0.5, examples: _ic2.words.slice(-4) } \n : undefined;\n const ct = buildCt({ ledger: currentLedger, scheme, theme, syllables: syllableRange, internalHint: internalHint2 });\n\n try {\n seedRef.current = (seedRef.current * 1103515245 + 12345) & 0x7fffffff;\n const result = await genBar({\n contract: ct, recentBars: bars, seed: seedRef.current, variants,\n onStatus: s => setStatusLog(prev => {\n const filtered = prev.filter(p => p.stage !== \"info\" || !p.label.startsWith(\"Bar\"));\n return [{ stage: \"info\", label: `Bar ${i + 1}/${verseBarCount} — scheme ${scheme}` }, ...filtered.slice(-4), s];\n }),\n });\n\n if (result.bar) {\n progress.bars.push({ bar: result.bar, scheme, accepted: result.accepted, endWord: result.endWord, endKey: result.endKey });\n const score = scoreBar(result.bar, ct, currentLedger);\n progress.scores.push(score);\n currentText = currentText.trimEnd() + (currentText.trim() ? \"\\n\" : \"\") + result.bar;\n setText(currentText);\n currentLedger = createLedger();\n const lines = currentText.split(\"\\n\").filter(l => l.trim());\n const tok = lines.map(l => tokenize(l));\n const sch = detectSchemes(tok);\n lines.forEach((line, li) => { if (sch[li]) lUER(currentLedger, line, li, sch[li]); });\n setLedger(currentLedger);\n }\n await persistBandit();\n } catch (e) {\n progress.bars.push({ bar: `[ERROR: ${e.message}]`, scheme, accepted: false });\n progress.scores.push({ rhyme: 0, syllable: 0, internal: 0, flow: 0, density: 0, total: 0 });\n }\n setVerseProgress({ ...progress });\n }\n\n progress.status = controller.signal.aborted ? \"aborted\" : \"complete\";\n setVerseProgress({ ...progress });\n setGenerating(false);\n abortRef.current = null;\n }, [generating, text, verseBarCount, schemePlan, theme, syllableRange, variants, rebuildLedger, persistBandit]);\n\n const handleAbort = useCallback(() => { abortRef.current?.abort(); }, []);\n\n const handleWordHover = useCallback((e, rk) => {\n if (!rk) return;\n const r = e.currentTarget.getBoundingClientRect();\n setTooltipPos({ x: r.left + r.width / 2, y: r.top - 8 });\n setHoveredWord(rk);\n }, []);\n\n const avgScore = useMemo(() => {\n if (!barScores.length) return null;\n const sum = { rhyme: 0, syllable: 0, internal: 0, flow: 0, density: 0, total: 0 };\n barScores.forEach(s => { for (const k in sum) sum[k] += s[k]; });\n for (const k in sum) sum[k] /= barScores.length;\n return sum;\n }, [barScores]);\n\n return (\n

\n \n \n\n {/* HEADER */}\n

PCE // VERSE ENGINE

\n PHASE 4 — SCHEME PLANNER + MULTI-BAR + SCORING + FLOW\n

\n {avgScore &&

\n AVG:\n 0.6 ? GREEN : avgScore.total > 0.35 ? AMBER : PINK, fontWeight: 600 }}>{(avgScore.total * 100).toFixed(0)}%\n

}\n {compiledData && CMUDICT ✓}\n {!compiledData && }\n

\n\n

\n {/* LEFT: LYRICS ANALYSIS + SCORES */}\n

\n {analysis.tokenized.map((line, li) => {\n const scheme = analysis.schemes[li];\n const endTok = [...line].reverse().find(t => t.type === \"word\");\n const score = barScores[li];\n return (\n

\n {li + 1}\n \n {scheme && (() => { const c = endTok ? cF(endTok.rk?.key1, endTok.rk?.confidence || 0) : {}; return {scheme}; })()}\n \n

\n {line.map((tok, ti) => {\n if (tok.type === \"space\") return {tok.text};\n const rk = tok.rk, isEnd = tok === endTok, fam = analysis.familyCount[rk?.key1] || 0;\n const show = rk?.key1 && fam >= 2 && rk.confidence >= 0.3;\n const c = show ? cF(rk.key1, rk.confidence) : {};\n const isH = hoveredWord === rk, isFH = hoveredWord && hoveredWord.key1 === rk?.key1 && rk?.key1;\n const pf = !selectedKey || rk?.key1 === selectedKey;\n return (\n handleWordHover(e, rk)} onMouseLeave={() => setHoveredWord(null)}\n onClick={() => rk?.key1 && setSelectedKey(p => p === rk.key1 ? null : rk.key1)}\n style={{ cursor: rk?.key1 ? \"pointer\" : \"default\", padding: \"0 1px\", borderRadius: 2, transition: \"all 0.1s\", background: isH ? (c.bg || \"rgba(255,255,255,0.06)\") : isFH ? c.bg : (show && pf ? c.bg : \"transparent\"), color: show && pf ? c.text : (rk?.key1 ? \"rgba(255,255,255,0.55)\" : \"rgba(255,255,255,0.25)\"), borderBottom: isEnd && show ? `2px solid ${c.border}` : \"1px solid transparent\", fontWeight: isEnd && show ? 600 : 400, opacity: selectedKey && !pf ? 0.15 : 1 }}\n >{tok.text}\n );\n })}\n

\n {/* Mini score bar */}\n {score && (\n

\n {[[\"R\", score.rhyme, CYAN], [\"S\", score.syllable, GREEN], [\"I\", score.internal, MAGENTA], [\"A\", score.alliteration, PINK], [\"V\", score.vocabRichness, AMBER]].map(([l, v, col]) => (\n

\n {l}\n

\n ))}\n

\n )}\n

\n );\n })}\n

\n\n {/* Editor */}\n

setText(e.target.value)} spellCheck={false}\n              style={{ width: \"100%\", height: 72, resize: \"vertical\", background: \"#060610\", color: \"#c0c0c8\", border: \"none\", outline: \"none\", padding: \"5px 10px\", fontFamily: FM, fontSize: 11, lineHeight: 1.7, boxSizing: \"border-box\" }}\n              placeholder=\"Type or paste lyrics...\"\n            />\n          </div>\n\n          {/* Legend */}\n          {legend.length > 0 && (\n            <div style={{ borderTop: \"1px solid rgba(255,255,255,0.04)\", padding: \"3px 10px\", display: \"flex\", flexWrap: \"wrap\", gap: 2, background: \"rgba(10,10,20,0.5)\" }}>\n              {legend.map(({ key, count, color }) => (\n                <button key={key} onClick={() => setSelectedKey(p => p === key ? null : key)}\n                  style={{ display: \"inline-flex\", alignItems: \"center\", gap: 2, padding: \"0 4px\", borderRadius: 2, border: selectedKey === key ? `1px solid ${color.solid}` : `1px solid ${color.border}`, background: selectedKey === key ? color.bg : \"transparent\", cursor: \"pointer\", lineHeight: \"14px\" }}>\n                  <span style={{ width: 4, height: 4, borderRadius: \"50%\", background: color.solid }} />\n                  <span style={{ fontFamily: FM, fontSize: 7, color: color.text }}>{key}</span>\n                  <span style={{ fontSize: 6, color: \"rgba(255,255,255,0.15)\", fontFamily: FD }}>×{count}</span>\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* RIGHT: TABS */}\n        <div style={{ flex: \"1 1 48%\", display: \"flex\", flexDirection: \"column\", overflow: \"hidden\", background: \"#0c0c14\" }}>\n          <div style={{ display: \"flex\", borderBottom: \"1px solid rgba(255,255,255,0.06)\" }}>\n            {[\"verse\", \"flow\", \"scores\", \"engine\"].map(t => (\n              <button key={t} onClick={() => setActiveTab(t)}\n                style={{ flex: 1, padding: \"6px 0\", background: activeTab === t ? \"rgba(255,255,255,0.04)\" : \"transparent\", border: \"none\", borderBottom: activeTab === t ? `2px solid ${CYAN}` : \"2px solid transparent\", color: activeTab === t ? \"rgba(255,255,255,0.7)\" : \"rgba(255,255,255,0.2)\", fontFamily: FD, fontSize: 8, letterSpacing: 1, cursor: \"pointer\" }}>\n                {t.toUpperCase()}\n              </button>\n            ))}\n          </div>\n\n          <div style={{ flex: 1, overflow: \"auto\" }}>\n\n            {/* ══ VERSE TAB — Scheme Planner + Multi-Bar Generation ══ */}\n            {activeTab === \"verse\" && (\n              <div style={{ padding: \"10px 12px\" }}>\n                {/* Theme */}\n                <div style={{ marginBottom: 8 }}>\n                  <label style={{ fontFamily: FD, fontSize: 7, letterSpacing: 1.5, color: \"rgba(255,255,255,0.2)\", display: \"block\", marginBottom: 2 }}>THEME</label>\n                  <textarea value={theme} onChange={e => setTheme(e.target.value)} style={{ width: \"100%\", height: 32, background: \"rgba(255,255,255,0.03)\", border: \"1px solid rgba(255,255,255,0.06)\", borderRadius: 3, color: \"#e0e0e8\", fontFamily: FM, fontSize: 10, padding: \"4px 6px\", resize: \"none\", outline: \"none\", boxSizing: \"border-box\" }} />\n                </div>\n\n                {/* Scheme Presets */}\n                <div style={{ marginBottom: 8 }}>\n                  <label style={{ fontFamily: FD, fontSize: 7, letterSpacing: 1.5, color: \"rgba(255,255,255,0.2)\", display: \"block\", marginBottom: 3 }}>SCHEME PATTERN</label>\n                  <div style={{ display: \"flex\", gap: 3, flexWrap: \"wrap\", marginBottom: 6 }}>\n                    {Object.keys(SCHEME_PRESETS).map(name => (\n                      <button key={name} onClick={() => { setSelectedPreset(name); const p = [...SCHEME_PRESETS[name]]; while (p.length < verseBarCount) p.push(p[p.length % SCHEME_PRESETS[name].length]); setSchemePlan(p.slice(0, verseBarCount)); }}\n                        style={{ padding: \"2px 6px\", borderRadius: 2, fontSize: 8, fontFamily: FM, border: selectedPreset === name ? `1px solid ${CYAN}` : \"1px solid rgba(255,255,255,0.08)\", background: selectedPreset === name ? `${CYAN}11` : \"transparent\", color: selectedPreset === name ? CYAN : \"rgba(255,255,255,0.35)\", cursor: \"pointer\" }}>\n                        {name}\n                      </button>\n                    ))}\n                  </div>\n\n                  {/* Editable scheme grid */}\n                  <div style={{ display: \"flex\", gap: 3, alignItems: \"center\", flexWrap: \"wrap\" }}>\n                    {schemePlan.slice(0, verseBarCount).map((s, i) => {\n                      const sc = schemeColor(s);\n                      return (\n                        <div key={i} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 1 }}>\n                          <span style={{ fontSize: 6, color: \"rgba(255,255,255,0.1)\", fontFamily: FM }}>{i + 1}</span>\n                          <button onClick={() => {\n                            const next = String.fromCharCode(((s.charCodeAt(0) - 65 + 1) % 8) + 65);\n                            const np = [...schemePlan]; np[i] = next; setSchemePlan(np); setSelectedPreset(\"\");\n                          }}\n                            style={{ width: 22, height: 22, borderRadius: 3, border: `1px solid ${sc.border}`, background: sc.bg, color: sc.text, fontFamily: FD, fontSize: 10, fontWeight: 700, cursor: \"pointer\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>\n                            {s}\n                          </button>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n\n                {/* Bar count + syllable controls */}\n                <div style={{ display: \"flex\", gap: 10, marginBottom: 10, alignItems: \"flex-end\" }}>\n                  <div>\n                    <label style={{ fontFamily: FD, fontSize: 7, letterSpacing: 1, color: \"rgba(255,255,255,0.2)\", display: \"block\", marginBottom: 2 }}>BARS</label>\n                    <input type=\"number\" min={2} max={20} value={verseBarCount} onChange={e => setVerseBarCount(Math.max(2, Math.min(20, +e.target.value)))}\n                      style={{ width: 40, background: \"rgba(255,255,255,0.03)\", border: \"1px solid rgba(255,255,255,0.08)\", borderRadius: 2, color: \"#e0e0e8\", fontFamily: FM, fontSize: 10, padding: \"3px 4px\", textAlign: \"center\", outline: \"none\" }}\n                    />\n                  </div>\n                  <div>\n                    <label style={{ fontFamily: FD, fontSize: 7, letterSpacing: 1, color: \"rgba(255,255,255,0.2)\", display: \"block\", marginBottom: 2 }}>SYL RANGE</label>\n                    <div style={{ display: \"flex\", gap: 3, alignItems: \"center\" }}>\n                      <input type=\"number\" min={6} max={24} value={syllableRange.min} onChange={e => setSyllableRange(p => ({ ...p, min: +e.target.value }))} style={{ width: 32, background: \"rgba(255,255,255,0.03)\", border: \"1px solid rgba(255,255,255,0.08)\", borderRadius: 2, color: \"#e0e0e8\", fontFamily: FM, fontSize: 10, padding: \"3px\", textAlign: \"center\", outline: \"none\" }} />\n                      <span style={{ color: \"rgba(255,255,255,0.1)\", fontSize: 8 }}>—</span>\n                      <input type=\"number\" min={6} max={30} value={syllableRange.max} onChange={e => setSyllableRange(p => ({ ...p, max: +e.target.value }))} style={{ width: 32, background: \"rgba(255,255,255,0.03)\", border: \"1px solid rgba(255,255,255,0.08)\", borderRadius: 2, color: \"#e0e0e8\", fontFamily: FM, fontSize: 10, padding: \"3px\", textAlign: \"center\", outline: \"none\" }} />\n                    </div>\n                  </div>\n                </div>\n\n                {/* Generate buttons */}\n                <div style={{ display: \"flex\", gap: 6, marginBottom: 10 }}>\n                  <button onClick={handleGenVerse} disabled={generating}\n                    style={{ flex: 2, padding: \"8px 0\", borderRadius: 4, border: \"none\", cursor: generating ? \"not-allowed\" : \"pointer\", fontFamily: FD, fontSize: 10, fontWeight: 700, letterSpacing: 1.5, background: generating ? \"rgba(255,255,255,0.04)\" : `linear-gradient(135deg,${CYAN}22,${MAGENTA}22)`, color: generating ? \"rgba(255,255,255,0.25)\" : CYAN, transition: \"all 0.2s\" }}>\n                    {generating && verseProgress ? (\n                      <span style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\", gap: 5 }}>\n                        <span style={{ display: \"inline-block\", width: 8, height: 8, border: `2px solid ${CYAN}`, borderTopColor: \"transparent\", borderRadius: \"50%\", animation: \"spin 0.8s linear infinite\" }} />\n                        {verseProgress.current}/{verseProgress.total}\n                      </span>\n                    ) : `GENERATE ${verseBarCount}-BAR VERSE`}\n                  </button>\n                  {generating && <button onClick={handleAbort} style={{ padding: \"8px 12px\", borderRadius: 4, border: `1px solid ${PINK}33`, background: `${PINK}11`, color: PINK, fontFamily: FD, fontSize: 9, letterSpacing: 1, cursor: \"pointer\" }}>ABORT</button>}\n                </div>\n\n                {/* Verse progress */}\n                {verseProgress && (\n                  <div style={{ marginBottom: 8 }}>\n                    <div style={{ display: \"flex\", gap: 2, marginBottom: 4 }}>\n                      {schemePlan.slice(0, verseBarCount).map((s, i) => {\n                        const done = i < (verseProgress.bars?.length || 0);\n                        const active = i === verseProgress.current - 1 && verseProgress.status === \"running\";\n                        const barData = verseProgress.bars?.[i];\n                        const sc = schemeColor(s);\n                        return (\n                          <div key={i} style={{\n                            flex: 1, height: 6, borderRadius: 2,\n                            background: done ? (barData?.accepted ? `${GREEN}66` : `${AMBER}44`) : active ? `${CYAN}33` : \"rgba(255,255,255,0.03)\",\n                            border: active ? `1px solid ${CYAN}` : \"1px solid transparent\",\n                            transition: \"all 0.3s\",\n                          }} />\n                        );\n                      })}\n                    </div>\n                    {verseProgress.status === \"complete\" && (\n                      <div style={{ fontSize: 9, color: GREEN, fontFamily: FD, letterSpacing: 1 }}>\n                        ✓ COMPLETE — {verseProgress.bars.filter(b => b.accepted).length}/{verseProgress.total} accepted\n                      </div>\n                    )}\n                    {verseProgress.status === \"aborted\" && (\n                      <div style={{ fontSize: 9, color: AMBER, fontFamily: FD, letterSpacing: 1 }}>◆ ABORTED at bar {verseProgress.current}</div>\n                    )}\n                  </div>\n                )}\n\n                {/* Single-bar quick gen */}\n                <div style={{ borderTop: \"1px solid rgba(255,255,255,0.04)\", paddingTop: 8 }}>\n                  <div style={{ fontFamily: FD, fontSize: 7, letterSpacing: 1.5, color: \"rgba(255,255,255,0.15)\", marginBottom: 4 }}>SINGLE BAR</div>\n                  <div style={{ display: \"flex\", gap: 3 }}>\n                    {[\"A\", \"B\", \"C\", \"D\", \"E\", \"F\"].map(s => (\n                      <button key={s} onClick={() => handleGenSingle(s)} disabled={generating}\n                        style={{ width: 22, height: 22, borderRadius: 3, border: `1px solid ${schemeColor(s).border}`, background: schemeColor(s).bg, color: generating ? \"rgba(255,255,255,0.15)\" : schemeColor(s).text, fontFamily: FD, fontSize: 9, fontWeight: 700, cursor: generating ? \"not-allowed\" : \"pointer\" }}>\n                        {s}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Status log */}\n                {statusLog.length > 0 && (\n                  <div style={{ marginTop: 8, maxHeight: 100, overflow: \"auto\", background: \"rgba(0,0,0,0.15)\", borderRadius: 3, padding: \"3px 6px\" }}>\n                    {statusLog.slice(-6).map((s, i) => {\n                      const col = { accepted: GREEN, rejected: PINK, error: PINK, info: \"rgba(255,255,255,0.3)\" }[s.stage] || CYAN;\n                      const icon = { accepted: \"✓\", rejected: \"✗\", error: \"✗\", info: \"›\" }[s.stage] || \"›\";\n                      return <div key={i} style={{ display: \"flex\", gap: 5, padding: \"1px 0\", fontSize: 9, fontFamily: FM }}><span style={{ color: col, width: 8, textAlign: \"center\", fontWeight: 700 }}>{icon}</span><span style={{ color: \"rgba(255,255,255,0.4)\" }}>{s.label}</span></div>;\n                    })}\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* ══ FLOW TAB ══ */}\n            {activeTab === \"flow\" && (\n              <FlowGrid lines={text.split(\"\\n\").filter(l => l.trim())} />\n            )}\n\n            {/* ══ SCORES TAB ══ */}\n            {activeTab === \"scores\" && (\n              <div style={{ padding: \"8px 12px\" }}>\n                <div style={{ fontFamily: FD, fontSize: 8, letterSpacing: 1.5, color: \"rgba(255,255,255,0.25)\", marginBottom: 8 }}>BAR SCORES</div>\n                {avgScore && (\n                  <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, marginBottom: 12, padding: \"8px\", background: \"rgba(255,255,255,0.02)\", borderRadius: 4 }}>\n                    <ScoreRadar scores={avgScore} size={70} />\n                    <div style={{ fontSize: 10, fontFamily: FM }}>\n                      <div style={{ fontFamily: FD, fontSize: 8, color: \"rgba(255,255,255,0.2)\", marginBottom: 4, letterSpacing: 1 }}>VERSE AVERAGE</div>\n                      {[[\"Rhyme\", avgScore.rhyme, CYAN], [\"Syllable\", avgScore.syllable, GREEN], [\"Internal\", avgScore.internal, MAGENTA], [\"Flow\", avgScore.flow, AMBER], [\"Density\", avgScore.density, \"rgba(255,255,255,0.5)\"]].map(([l, v, c]) => (\n                        <div key={l} style={{ display: \"flex\", gap: 6, alignItems: \"center\", padding: \"1px 0\" }}>\n                          <span style={{ color: \"rgba(255,255,255,0.25)\", width: 50 }}>{l}</span>\n                          <div style={{ width: 60, height: 3, borderRadius: 2, background: \"rgba(255,255,255,0.04)\" }}>\n                            <div style={{ width: `${v * 100}%`, height: \"100%\", borderRadius: 2, background: c, opacity: 0.7 }} />\n                          </div>\n                          <span style={{ color: v > 0.6 ? GREEN : v > 0.3 ? AMBER : PINK, fontSize: 9, width: 24, textAlign: \"right\" }}>{(v * 100).toFixed(0)}%</span>\n                        </div>\n                      ))}\n                      <div style={{ marginTop: 4, fontWeight: 600, color: avgScore.total > 0.6 ? GREEN : avgScore.total > 0.35 ? AMBER : PINK }}>Total: {(avgScore.total * 100).toFixed(0)}%</div>\n                    </div>\n                  </div>\n                )}\n                {/* Per-bar scores */}\n                {text.split(\"\\n\").filter(l => l.trim()).map((line, i) => {\n                  const s = barScores[i];\n                  if (!s) return null;\n                  return (\n                    <div key={i} style={{ display: \"flex\", gap: 8, padding: \"4px 0\", borderBottom: \"1px solid rgba(255,255,255,0.02)\", alignItems: \"center\" }}>\n                      <span style={{ fontSize: 8, color: \"rgba(255,255,255,0.1)\", fontFamily: FM, width: 16, textAlign: \"right\" }}>{i + 1}</span>\n                      <ScoreRadar scores={s} size={40} />\n                      <div style={{ flex: 1, minWidth: 0 }}>\n                        <div style={{ fontSize: 10, color: \"rgba(255,255,255,0.5)\", overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" }}>{line}</div>\n                        <div style={{ display: \"flex\", gap: 6, fontSize: 8, color: \"rgba(255,255,255,0.2)\", marginTop: 1 }}>\n                          <span>R:{(s.rhyme * 100).toFixed(0)}</span>\n                          <span>S:{(s.syllable * 100).toFixed(0)}</span>\n                          <span>I:{(s.internal * 100).toFixed(0)}</span>\n                          <span>F:{(s.flow * 100).toFixed(0)}</span>\n                          <span style={{ color: s.total > 0.6 ? GREEN : s.total > 0.35 ? AMBER : PINK, fontWeight: 600 }}>={(s.total * 100).toFixed(0)}%</span>\n                        </div>\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n            )}\n\n            {/* ══ ENGINE TAB — Compiler + Ledger + Bandit ══ */}\n            {activeTab === \"engine\" && (\n              <div style={{ padding: \"8px 12px\", fontSize: 10, fontFamily: FM }}>\n                {/* Bandit Stats */}\n                <div style={{ marginBottom: 10 }}>\n                  <label style={{ fontFamily: FD, fontSize: 7, letterSpacing: 1.5, color: \"rgba(255,255,255,0.2)\", display: \"block\", marginBottom: 4 }}>VARIANT PERFORMANCE (UCB1 BANDIT)</label>\n                  {variants.map((v, i) => {\n                    const winRate = v.t > 0 ? (v.s / v.t * 100) : 0;\n                    const plays = v.t;\n                    return (\n                      <div key={v.id} style={{ display: \"flex\", alignItems: \"center\", gap: 6, marginBottom: 3, padding: \"3px 6px\", background: \"rgba(255,255,255,0.02)\", borderRadius: 2 }}>\n                        <span style={{ fontFamily: FM, fontSize: 9, color: \"rgba(255,255,255,0.5)\", width: 70, overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" }}>{v.label}</span>\n                        <div style={{ flex: 1, height: 6, background: \"rgba(255,255,255,0.05)\", borderRadius: 3, overflow: \"hidden\" }}>\n                          <div style={{ width: `${winRate}%`, height: \"100%\", background: `linear-gradient(90deg, ${CYAN}, ${MAGENTA})`, transition: \"width 0.3s\" }} />\n                        </div>\n                        <span style={{ fontFamily: FM, fontSize: 8, color: winRate > 60 ? GREEN : winRate > 40 ? AMBER : PINK, width: 32, textAlign: \"right\" }}>{winRate.toFixed(0)}%</span>\n                        <span style={{ fontFamily: FM, fontSize: 7, color: \"rgba(255,255,255,0.2)\", width: 40, textAlign: \"right\" }}>{plays} plays</span>\n                      </div>\n                    );\n                  })}\n                </div>\n\n                {/* Compiler status */}\n                <div style={{ marginBottom: 10 }}>\n                  <div style={{ fontFamily: FD, fontSize: 8, letterSpacing: 1.5, color: \"rgba(255,255,255,0.25)\", marginBottom: 4 }}>COMPILER</div>\n                  {compiledData ? (\n                    <div style={{ fontSize: 9, color: \"rgba(255,255,255,0.3)\" }}>\n                      {compiledData.stats.rules} rules, {compiledData.stats.exceptions} exceptions, {compiledData.stats.confusion} confusion pairs\n                      <button onClick={handleCompile} style={{ marginLeft: 8, fontSize: 8, fontFamily: FD, color: \"rgba(255,255,255,0.2)\", background: \"transparent\", border: \"1px solid rgba(255,255,255,0.06)\", borderRadius: 2, padding: \"1px 4px\", cursor: \"pointer\" }}>RECOMPILE</button>\n                    </div>\n                  ) : (\n                    <button onClick={handleCompile} style={{ padding: \"4px 10px\", borderRadius: 3, border: \"none\", background: `${MAGENTA}15`, color: MAGENTA, fontFamily: FD, fontSize: 9, letterSpacing: 1, cursor: \"pointer\" }}>COMPILE FROM CMUDICT</button>\n                  )}\n                </div>\n\n                {/* Ledger */}\n                <div style={{ marginBottom: 10 }}>\n                  <div style={{ fontFamily: FD, fontSize: 8, letterSpacing: 1.5, color: \"rgba(255,255,255,0.25)\", marginBottom: 4 }}>LEDGER — {Object.keys(ledger.schemes).length} SCHEMES, {ledger.internalChains.length} CHAINS</div>\n                  {Object.values(ledger.schemes).map(b => {\n                    const c = cF(b.targetKey1, 0.8);\n                    return (\n                      <div key={b.scheme} style={{ display: \"flex\", gap: 6, padding: \"1px 0\", alignItems: \"center\" }}>\n                        <span style={{ width: 14, height: 14, lineHeight: \"14px\", textAlign: \"center\", borderRadius: 2, background: c.bg, color: c.text, border: `1px solid ${c.border}`, fontFamily: FD, fontSize: 8, fontWeight: 700 }}>{b.scheme}</span>\n                        <span style={{ color: c.text, fontSize: 9 }}>{b.targetKey1}</span>\n                        <span style={{ color: \"rgba(255,255,255,0.15)\", marginLeft: \"auto\", fontSize: 8 }}>{b.examples.slice(-3).join(\", \")}</span>\n                      </div>\n                    );\n                  })}\n                </div>\n\n                {/* Bandit */}\n                <div>\n                  <div style={{ fontFamily: FD, fontSize: 8, letterSpacing: 1.5, color: \"rgba(255,255,255,0.25)\", marginBottom: 4 }}>BANDIT</div>\n                  {variants.map(v => {\n                    const rate = v.t > 0 ? Math.round(v.s / v.t * 100) : 0;\n                    return (\n                      <div key={v.id} style={{ display: \"flex\", gap: 6, padding: \"1px 0\", alignItems: \"center\" }}>\n                        <span style={{ color: \"rgba(255,255,255,0.4)\", width: 55, fontSize: 9 }}>{v.label}</span>\n                        <div style={{ flex: 1, height: 3, borderRadius: 2, background: \"rgba(255,255,255,0.04)\" }}>\n                          <div style={{ width: `${rate}%`, height: \"100%\", borderRadius: 2, background: rate > 60 ? GREEN : rate > 30 ? AMBER : PINK }} />\n                        </div>\n                        <span style={{ color: \"rgba(255,255,255,0.2)\", fontSize: 8, width: 36, textAlign: \"right\" }}>{v.s}/{v.t}</span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* TOOLTIP */}\n      {hoveredWord?.key1 && (\n        <div style={{ position: \"fixed\", left: Math.min(tooltipPos.x, typeof window !== \"undefined\" ? window.innerWidth - 180 : 500), top: tooltipPos.y, transform: \"translate(-50%,-100%)\", zIndex: 1000, pointerEvents: \"none\" }}>\n          <div style={{ background: \"rgba(12,12,22,0.96)\", border: `1px solid ${cF(hoveredWord.key1, hoveredWord.confidence).border}`, borderRadius: 4, padding: \"4px 8px\", boxShadow: `0 4px 16px rgba(0,0,0,0.5)`, minWidth: 130, backdropFilter: \"blur(8px)\" }}>\n            <div style={{ fontFamily: FD, fontSize: 9, fontWeight: 700, color: cF(hoveredWord.key1, hoveredWord.confidence).text, marginBottom: 2, letterSpacing: 1 }}>\"{hoveredWord.raw}\"</div>\n            {[[\"k1\", hoveredWord.key1], [\"k2\", hoveredWord.key2, hoveredWord.key2 === hoveredWord.key1], [\"nuc\", hoveredWord.nucleus], [\"coda\", hoveredWord.coda || \"∅\", !hoveredWord.coda], [\"cf\", hoveredWord.confidence.toFixed(2)], [\"src\", hoveredWord.source]].map(([l, v, d]) => (\n              <div key={l} style={{ display: \"flex\", justifyContent: \"space-between\", gap: 6, fontSize: 8, lineHeight: 1.4 }}>\n                <span style={{ color: \"rgba(255,255,255,0.18)\", fontFamily: FD }}>{l}</span>\n                <span style={{ color: l === \"src\" ? (v === \"exception\" ? GREEN : v === \"compiled\" ? MAGENTA : v === \"handcrafted\" ? CYAN : \"rgba(255,255,255,0.3)\") : d ? \"rgba(255,255,255,0.18)\" : \"rgba(255,255,255,0.65)\", fontFamily: FM, fontWeight: d ? 400 : 600 }}>{v}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n","url","link_url","/p/nsabbc12a6ifuw0cjeq4","versioned_link_url","/p/nsabbc12a6ifuw0cjeq4/1","yapping","**Defining the Core Application**\n\nI'm now focusing on the React application's core functionality. \"PCE // VERSE ENGINE (Phase 4)\" is crystallizing as a rap/poetry generation tool. I need to integrate phonetic analysis using ARPABET and CMUdict. Rhyme scheme planning, like AABB and ABAB, and support for multi-bar structures are also key components.\n\n\n**Refining the Generation Engine**\n\nI'm now integrating an LLM for rap/poetry generation and building a syllable-counting and stress visualization system (Flow Grid). I'm developing a scoring system for rhymes, syllable counts, internal rhymes, and flow. A \"Bandit\" system will optimize generation prompts, and local storage persistence is also a priority. I am considering separating the codebase, but the original code provided seemed tightly coupled.\n\n\n**Analyzing Code Structure**\n\nI am now focusing on the given React application code's structure and dependencies. I've noted the `index.html` boilerplate and the `app.jsx` main logic file. I see the use of React hooks and am planning to refactor the code into several modules, like `phonetics.js` for ARPABET logic and `engine.js` for generation. I've observed that `extractRhymeKey` relies on a global `CD` variable.\n\n\n**Considering Code Dependencies**\n\nI'm now thinking about how to split the code, as the tight coupling and use of the module-level `CD` variable in `extractRhymeKey` are complicating the refactor. I'm focusing on preserving state or using exports/imports carefully. I've decided to move `CD` into `phonetics.js` to expose a data setting function, to allow the `extractRhymeKey` to run in the `phonetics.js` module. I am planning separate files for `utils`, `phonetics`, `generation`, `components`, and `app`, as well as keeping `index.html`.\n\n\n**Defining Module Responsibilities**\n\nI'm now refining the file structure. I'm moving `tokenize` to `phonetics.js` to support scoring in `logic.js`. The logic.js file will house all the logic for storage, generation, scoring, ledger and LLM interactions, as well as helpers like `scoreBar`, and `phoneticDistance`. The `phonetics.js` file now includes constants, variables, and functions related to phonetic analysis, and the new function `setCompiledData` will let the main app update the local `CD`. The `components.jsx` file houses React components, but depends on `extractRhymeKey`.\n\n\n**Clarifying Dependencies and Structure**\n\nI'm now clarifying the module dependencies further, starting with the `app.jsx` file as the main orchestrator. I've confirmed that `tokenize` and `extractRhymeKey` are core functions; they will be placed together in the `phonetics.js` module. `engine.js` will handle all logic around LLM calls, prompts, and score keeping. The `ui-utils.js` file now contains visual helpers. The `app.jsx` component will simply import and coordinate. My plan minimizes circular imports and global variables like websim.\n\n\n**Consolidating Module Imports**\n\nI'm now ensuring all necessary functions are present within each module. I've confirmed that `visuals.jsx` requires `extractRhymeKey` for visualization, and `engine.js` will leverage `tokenize`, `estSyl`, and `extractRhymeKey` from `phonetics.js`. I am importing `getWordSyllables` into `visuals.jsx` from `phonetics.js` as well. The code seems well-structured, I now begin code implementation.\n\n\n**Finalizing Module Exports**\n\nI'm now nailing down exports for each module. `phonetics.js` houses text analysis and now exports `extractRhymeKey`, `compileCMU`, `parseCMU`, `setCD`, `CD`, `estSyl`, `tokenize`, `detectSchemes`, and `getWordSyllables`. `engine.js` is the LLM logic hub and exports `sGet`, `sSet`, `SK`, `genBar`, `scoreBar`, `createLedger`, `lUER`, `buildCt`, `PV`, and `SCHEME_PRESETS`. The UI components, `FlowGrid`, `ScoreRadar`, and `cF`, are exported from `visuals.jsx`, while `app.jsx` coordinates imports from all modules. I'm keeping `window._erkCache`.\n\n\n**Consolidating Constants Exports**\n\nI'm now putting constants in the right places. The fonts and colors like `schemeColor`, `FM`, and `FD` are now exported from `visuals.jsx`. I'm also addressing a syntax error I noticed in `engine.js` with the `bRefineP` function definition; it seems like a missing closing brace. I'm making sure `scoreBar` and `genBar` dependencies are valid. The system seems sound.\n\n\n**Adjusting Function Scopes**\n\nI've located a syntax error in `engine.js` related to the nested `bRefineP` function, assuming the original intent was for it to be accessible to `genBar`. I have moved `bRefineP` out of `bBP` to resolve this and ensure proper function scope. I will now create `constants.js` to handle shared constants.\n\n\n**Defining Implementation Order**\n\nI'm now focusing on the implementation order, and I'll start with `constants.js` to define fonts and colors. Then, I'll move on to `phonetics.js` to handle phonetic analysis and `CD`, followed by `engine.js` for generation logic. Next, I'll create `visuals.jsx` with the UI components and finally, the `app.jsx` main component. The `CMUDICT_URL` must be exported.\n\n\n\n\nindex.html\n```index.html\n```\n\nconstants.js\n```constants.js\n```\n\nphonetics.js\n```phonetics.js\n```\n\nengine.js\n```engine.js\n```\n\nvisuals.jsx\n```visuals.jsx\n```\n\napp.jsx\n```app.jsx\n```\n\nphonetics-state.js\n```phonetics-state.js\n```","cursor","eyJpZCI6Im5zYWJiYzEyYTZpZnV3MGNqZXE0In0","token","included",[],"routes/browser/layout","actionData","errors"]
</article></body></html>