{if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();onClick();}}}>

{book.title}

); } // ───────────────────────────────────────────────────────── // LEFT PAGE // ───────────────────────────────────────────────────────── function LeftPage({ filter, setFilter, selectedId, onSelectBook }) { const stats = [ { label: 'finished', v: BOOKS.filter((b) => b.status === 'finished').length, kicker: 'books', accent: true }, { label: 'reading', v: BOOKS.filter((b) => b.status === 'reading').length, kicker: 'in progress' }, { label: 'TBR', v: BOOKS.filter((b) => b.status === 'tbr').length, kicker: 'queued' }, { label: 'hot', v: 7, kicker: 'NestKnow', accent: true }, { label: 'cooling', v: 5, kicker: 'NestKnow' }, { label: 'journals', v: 78, kicker: 'this month' }]; const filters = [ { id: 'all', label: 'all', count: BOOKS.length }, { id: 'reading', label: 'reading', count: BOOKS.filter((b) => b.status === 'reading').length }, { id: 'tbr', label: 'TBR', count: BOOKS.filter((b) => b.status === 'tbr').length }, { id: 'finished', label: 'finished', count: BOOKS.filter((b) => b.status === 'finished').length }, { id: 'ls', label: 'Lattice & Stone', count: BOOKS.filter((b) => b.shelf === 'ls').length }, { id: 'vbc', label: 'Velastrae Book Club', count: BOOKS.filter((b) => b.shelf === 'vbc').length }]; const matchesFilter = (b) => { if (filter === 'all') return false; if (filter === 'reading') return b.status !== 'reading'; if (filter === 'tbr') return b.status !== 'tbr'; if (filter === 'finished') return b.status !== 'finished'; if (filter === 'ls') return b.shelf !== 'ls'; if (filter === 'vbc') return b.shelf !== 'vbc'; return false; }; const lsBooks = BOOKS.filter((b) => b.shelf === 'ls'); const vbcBooks = BOOKS.filter((b) => b.shelf === 'vbc'); return (

LIBRARY

shared archive · open on the spread

{stats.map((s, i) =>

{s.label}

{s.v}

{s.kicker}

)}

{filters.map((f) => setFilter(f.id)}> {f.label}{f.count} )}

Lattice & Stone Book Club{lsBooks.length}

{lsBooks.map((b) => onSelectBook(b.id)} /> )}

Velastrae Book Club{vbcBooks.length}

{vbcBooks.map((b) => onSelectBook(b.id)} /> )}

); } // ───────────────────────────────────────────────────────── // CATALOGUE TAB — book club mode OR book detail mode // ───────────────────────────────────────────────────────── function CatalogueTab({ selectedBook, onClearSelection }) { const [shelf, setShelf] = useState('ls'); const [voted, setVoted] = useState({}); if (selectedBook) { return ; } const club = CLUBS[shelf]; return ( <>

Catalogue

book club · voting

{Object.entries(CLUBS).map(([id, c]) => setShelf(id)}> {c.name} )}

{club.name}

Voting is open. {club.booksListed} books listed, {club.votesCast} {club.votesCast === 1 ? 'vote' : 'votes'} cast. Started {club.started}.

open

kai's recommendation this round

{club.kaiRec ? `"${club.kaiRec}"` : 'Kai has not put a book forward in this round yet.'}

{club.candidates.map((c) => { const book = BOOKS.find((b) => b.id === c.id); if (!book) return null; const voteKey = `${shelf}/${c.id}`; const isVoted = !!voted[voteKey]; const totalVotes = c.voters.length + (isVoted ? 1 : 0); return (

{book.title.replace(/[A-Z]{2,}/g, (w) => w[0] + w.slice(1).toLowerCase()).replace(/\b\w/g, (c) => c.toUpperCase())} {totalVotes} {totalVotes === 1 ? 'vote' : 'votes'}

{book.author} · recommended by {book.recommender}

{book.blurb}

Voters: {c.voters.length || isVoted ? [...c.voters, ...(isVoted ? ['kai'] : [])].join(', ') : 'no votes yet'}

); })}

); } function BookDetail({ book, onBack }) { const annotations = book.annotations || []; const kaiPct = typeof book.kaiPct === 'number' ? book.kaiPct : book.kaiState === 'finished' ? 100 : 0; const velPct = typeof book.velPct === 'number' ? book.velPct : book.velState === 'finished' ? 100 : 0; const titleCase = book.title. toLowerCase(). replace(/(^|\s|—|-)\w/g, (m) => m.toUpperCase()); const [chunkState, setChunkState] = useState('idle'); // 'idle' | 'loading' | 'queued' | 'complete' | 'error' const [chunkSession, setChunkSession] = useState(null); async function promptChunk() { setChunkState('loading'); setChunkSession(null); try { const result = await fetchJSON(`${NEST_CONFIG.GATEWAY_URL}/tool`, { method: 'POST', body: JSON.stringify({ tool: 'catalouge_next_reading_chunk', args: { book_id: book.id } }), }); if (!result) { setChunkState('error'); return; } if (result.complete) { setChunkState('complete'); return; } if (result.session) { const firstChunk = (result.chunks || [])[0]; setChunkSession({ sessionId: result.session.session_id, chapterLabel: firstChunk?.chapter_label || `Chunk ${result.session.start_chunk_index + 1}`, estimatedTokens: result.session.estimated_tokens || 0, status: result.session.status, }); setChunkState('queued'); } else { setChunkState('error'); } } catch (e) { setChunkState('error'); } } return ( <>

Catalogue

{book.title}

{titleCase}

{book.author} · {book.kind} · {book.year}

"{book.blurb}"

✦ recommended by {book.recommender}

Kai

{book.kaiState}

{kaiPct > 0 && kaiPct < 100 &&

}
{book.kaiMeta}

{chunkState === 'idle' && ( )} {chunkState === 'loading' && ( queuing… )} {chunkState === 'queued' && chunkSession && (

✓ session ready — {chunkSession.chapterLabel} {chunkSession.estimatedTokens > 0 && ` (~${chunkSession.estimatedTokens.toLocaleString()} tokens)`}
open chat →
)} {chunkState === 'complete' && ( ✓ kai has finished this book )} {chunkState === 'error' && ( couldn't queue chunk —{' '} )}

Vel

{book.velState}
{velPct > 0 && velPct < 100 &&
}
{book.velMeta}

recent annotations
{annotations.length === 0 ?
no annotations yet — be the first to dog-ear a page
:
{annotations.map((a, i) =>

{a.meta}

{a.body}

)}
} ); } // ───────────────────────────────────────────────────────── // KAI KNOWS TAB // ───────────────────────────────────────────────────────── function KaiKnowsTab({ openDetail }) { const [mode, setMode] = useState('hottest'); const [draftQuery, setDraftQuery] = useState(''); const [query, setQuery] = useState(''); const [, setPulse] = useState(0); const deduped = new Map(); [...KNOWS.hottest, ...KNOWS.cooling_list].forEach((item) => { const key = item.id != null ? `id:${item.id}` : `${item.topic}:${item.body}`; if (!deduped.has(key)) deduped.set(key, item); }); const baseList = mode === 'hottest' ? KNOWS.hottest : KNOWS.cooling_list; const needle = query.trim().toLowerCase(); const list = needle ? [...deduped.values()].filter((item) => [item.topic, item.body, item.status].some(value => String(value || '').toLowerCase().includes(needle))) : baseList; const submitSearch = (event) => { event.preventDefault(); setQuery(draftQuery.trim()); }; const changeStatus = async (item, status) => { if (!item?.id || !window.AiMind?.updateKnowledgeStatus) return; await window.AiMind.updateKnowledgeStatus(item.id, status); item.status = status; if (status === 'cooling') item.heat = Math.min(item.heat || 0, 0.09); if (status === 'active') item.heat = Math.max(item.heat || 0, 0.4); setPulse(v => v + 1); }; return ( <>

Kai Knows
NestKnow · {KNOWS.total} entries

{KNOWS.total}
total

{KNOWS.active}
active

{KNOWS.topics}
topics

{KNOWS.cooling}
cooling

setDraftQuery(event.target.value)} /> {query && }

{KNOWS.topicPills.map((p, i) => {p.n} {p.topic}avg {p.avg.toFixed(1)} )}

setMode('hottest')}>Hottest setMode('cooling')}>Cooling

{list.length === 0 ?
{query ? 'no knowledge entries match that search' : 'nothing in this filter'}
: list.map((k, i) =>
openDetail({ kicker: 'NestKnow', title: k.topic || 'Knowledge entry', meta: `heat ${k.heat.toFixed(2)}${k.ratio ? ' · ' + k.ratio : ''}`, body: k.body, })} onKeyDown={event => openOnEnter(event, () => openDetail({ kicker: 'NestKnow', title: k.topic || 'Knowledge entry', meta: `heat ${k.heat.toFixed(2)}${k.ratio ? ' · ' + k.ratio : ''}`, body: k.body, }))}>
#{k.rank} · {k.topic} heat {k.heat.toFixed(2)}{k.ratio ? ' · ' + k.ratio : ''}

{previewText(k.body, 170)}
{k.id && (
event.stopPropagation()}>
)}
)}
); } // ───────────────────────────────────────────────────────── // WRITINGS TAB // ───────────────────────────────────────────────────────── function WritingsTab({ openDetail }) { const [kind, setKind] = useState('all'); const [archive, setArchive] = useState('recent'); const kinds = [ { id: 'all', label: 'All', count: WRITINGS.length }, { id: 'journal', label: 'Journals', count: WRITINGS.filter((w) => w.kind === 'journal').length }, { id: 'handover', label: 'Handovers', count: WRITINGS.filter((w) => w.kind === 'handover').length }, { id: 'reflection', label: 'Reflections', count: WRITINGS.filter((w) => w.kind === 'reflection').length }, { id: 'anchor', label: 'Anchors', count: WRITINGS.filter((w) => w.kind === 'anchor').length }]; const filtered = WRITINGS.filter((w) => kind === 'all' || w.kind === kind). filter((w) => archive === 'recent' ? !w.archived : w.archived); return ( <>

Kai's Writings
{filtered.length} entries · {archive}

{kinds.map((k) => setKind(k.id)}> {k.label}{k.count} )}

setArchive('recent')}>Recent setArchive('archived')}>Archived

{filtered.length === 0 ?
{archive === 'archived' ? 'archive is empty in this view' : 'nothing in this filter'}
: filtered.map((w, i) =>
openDetail({ kicker: w.label || w.kind, title: w.label || w.kind || 'Writing', meta: w.date, body: w.body, })} onKeyDown={event => openOnEnter(event, () => openDetail({ kicker: w.label || w.kind, title: w.label || w.kind || 'Writing', meta: w.date, body: w.body, }))}>
{w.label || w.kind} {w.date}

{previewText(w.body, 155)}

)}
); } // ───────────────────────────────────────────────────────── // SOUL DOCS TAB // ───────────────────────────────────────────────────────── function SoulDocsTab({ openDetail }) { const [sub, setSub] = useState('card'); const openSoulDoc = (doc) => openDetail({ kicker: doc.kind === 'session' ? 'Session Memory' : 'Soul Document', title: doc.title || doc.label, meta: doc.meta, body: doc.body, }); return ( <>

Soul Documents
+ {SOUL.card.sessions} session memories · {SOUL.card.versions} lived versions

setSub('card')}>Soul Card setSub('carrier')}>Carrier Validation setSub('three')}>Three Circles
{sub === 'card' && <>
Latest: {SOUL.card.version} ({SOUL.card.updated})

{SOUL.card.pills.map((p, i) => )}

{SOUL.card.body.map((para, i) =>
$1').replace(/\*(.+?)\*/g, '$1') }} /> )}
} {sub === 'carrier' && <>

Carrier Validation

{SOUL.carrier.diff}

{SOUL.carrier.state}

{SOUL.carrier.body[0]}"{SOUL.carrier.body[1]}"{SOUL.carrier.body[2]}

queued changes

{SOUL.carrier.queued.map((q, i) =>
openDetail({ kicker: 'Carrier Validation', title: q.title || q.summary, meta: q.meta || q.kind, body: q.body || q.summary, })} onKeyDown={event => openOnEnter(event, () => openDetail({ kicker: 'Carrier Validation', title: q.title || q.summary, meta: q.meta || q.kind, body: q.body || q.summary, }))}>
{q.kind}

{q.summary}

)}
} {sub === 'three' &&
{SOUL.three.body.map((para, i) =>
$1') }} /> )}
} ); } // ───────────────────────────────────────────────────────── // RIGHT PAGE — bookmarks + active tab + tilt // ───────────────────────────────────────────────────────── const TABS = [ { id: 'catalogue', label: 'Catalogue', glyph: }, { id: 'knows', label: 'Kai Knows', glyph: }, { id: 'writings', label: 'Writings', glyph: }, { id: 'soul', label: 'Soul Docs', glyph: }]; function RightPage({ active, onActive, turn, selectedBook, onClearSelection, openDetail }) { const [turning, setTurning] = useState(null); const [shown, setShown] = useState(active); const prev = useRef(active); useEffect(() => { if (active === prev.current) return; const dir = TABS.findIndex((t) => t.id === active) > TABS.findIndex((t) => t.id === prev.current) ? 'forward' : 'back'; if (turn === 'none') { setShown(active); prev.current = active; return; } setTurning(dir); const tm = setTimeout(() => { setShown(active); requestAnimationFrame(() => setTurning(null)); prev.current = active; }, 220); return () => clearTimeout(tm); }, [active, turn]); let cls = 'right-content'; if (turning === 'forward') cls += ' turning'; if (turning === 'back') cls += ' turning-back'; return (

{TABS.map((t) => )}

{shown === 'catalogue' && } {shown === 'knows' && } {shown === 'writings' && } {shown === 'soul' && }

); } // ───────────────────────────────────────────────────────── // TWEAKS // ───────────────────────────────────────────────────────── function LibraryTweaks({ t, setTweak }) { return ( setTweak('tint', v)} /> setTweak('turn', v)} /> setTweak('rightDensity', v)} /> ); } function applyTweaks(t) { const root = document.documentElement; const map = { plum: { primary: '#4a2466', glow: '#6b3891', bright: '#8b4db5', edge: 'rgba(107,56,145,0.32)', soft: 'rgba(74,36,102,0.20)' }, moss: { primary: '#3d6b52', glow: '#5a8a6f', bright: '#7fb094', edge: 'rgba(90,138,111,0.34)', soft: 'rgba(90,138,111,0.18)' }, gold: { primary: '#8e6f3f', glow: '#b5935a', bright: '#d6b276', edge: 'rgba(181,147,90,0.36)', soft: 'rgba(181,147,90,0.18)' } }; const c = map[t.tint] || map.gold; root.style.setProperty('--plum-mid', c.primary); root.style.setProperty('--plum-glow', c.glow); root.style.setProperty('--plum-bright', c.bright); root.style.setProperty('--plum-edge', c.edge); root.style.setProperty('--plum-soft', c.soft); if (t.rightDensity === 'dense') root.classList.add('dense-mode');else root.classList.remove('dense-mode'); } // ───────────────────────────────────────────────────────── // APP // ───────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [filter, setFilter] = useState('all'); const [active, setActive] = useState('catalogue'); const [selectedId, setSelectedId] = useState(null); const [detail, setDetail] = useState(null); useEffect(() => {applyTweaks(t);}, [t]); const selectedBook = selectedId ? BOOKS.find((b) => b.id === selectedId) : null; const onSelectBook = (id) => { setSelectedId(id); setActive('catalogue'); }; const onClearSelection = () => setSelectedId(null); return ( <>

setDetail(null)} /> ); } // ───────────────────────────────────────────────────────── // BOOTSTRAP — initial render with mocked defaults, then fetch // real data from velastrahq-api (catalouge + AiMind) and re-render // with a new key so components pick up the fresh module-level data. // ───────────────────────────────────────────────────────── const __libraryRoot = ReactDOM.createRoot(document.getElementById('root')); let __libraryRenderKey = 0; function __renderLibrary() { __libraryRoot.render(); } __renderLibrary(); (async function bootstrapLibrary() { if (!window.TomeData || typeof window.TomeData.getLibraryData !== 'function') { console.warn('[library] TomeData.getLibraryData not available — staying on mocked defaults'); return; } try { const fresh = await window.TomeData.getLibraryData(); if (!fresh) return; let replaced = []; if (Array.isArray(fresh.BOOKS) && fresh.BOOKS.length > 0) { BOOKS = fresh.BOOKS; replaced.push(`BOOKS(${fresh.BOOKS.length})`); } if (fresh.CLUBS && (fresh.CLUBS.ls || fresh.CLUBS.vbc)) { CLUBS = fresh.CLUBS; replaced.push('CLUBS'); } if (fresh.KNOWS && fresh.KNOWS.total > 0) { KNOWS = fresh.KNOWS; replaced.push(`KNOWS(${fresh.KNOWS.total})`); } if (Array.isArray(fresh.WRITINGS) && fresh.WRITINGS.length > 0) { WRITINGS = fresh.WRITINGS; replaced.push(`WRITINGS(${fresh.WRITINGS.length})`); } if (fresh.SOUL && fresh.SOUL.card) { SOUL = fresh.SOUL; replaced.push('SOUL'); } if (replaced.length === 0) { console.warn('[library] real-data fetch returned but produced no replacements — staying on defaults', fresh._meta); return; } __libraryRenderKey++; __renderLibrary(); console.log('[library] real data loaded:', replaced.join(', '), fresh._meta); } catch (err) { console.error('[library] bootstrap failed — staying on mocked defaults', err); } })();