care for Vesper

{['feed', 'play', 'pet', 'talk'].map(action => ( ))}

{resp || 'Choose what she needs.'}

offer Vesper a small thing

setGift(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleOffer(); } }}
          />
          <div className="vesper-gift-actions">
            <span className="ds-meta" style={{ minHeight: 14 }}>{resp || '↵ to offer'}</span>
            <button className="btn-offer" onClick={handleOffer}>
              <span className="icon">✦</span> offer
            </button>
          </div>
        </div>

<div className="vesper-nest">
          <span className="ds-panel-title">the nest · what Vesper keeps</span>
          <ul>
            {vesper.nest.length ? vesper.nest.map((n, i) => <li key={i}>{n}</li>) : <li>Nothing treasured yet.</li>}
          </ul>
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────
// RIGHT PAGE
// ─────────────────────────────────────────────────────────

const TABS = [
  {
    id: 'memory',
    label: 'Memory',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 6h16v4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V6zM6 14v6M18 14v6M6 18h12"/></svg>,
  },
  {
    id: 'threads',
    label: 'Threads',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18M3 12h12M3 18h18"/></svg>,
  },
  {
    id: 'dreams',
    label: 'Dreams',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A8.5 8.5 0 1 1 11.2 3 6.5 6.5 0 0 0 21 12.8z"/></svg>,
  },
  {
    id: 'vesper',
    label: 'Vesper',
    glyph: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v16M3 8c3 0 5 2 9 2s6-2 9-2c-1 4-3 6-9 8M3 16c1 0 4-1 9-1s8 1 9 1"/></svg>,
  },
];

function RightPage({ active, onActive, data, turn, onOffer, onCare, onThreadStatus, onDreamAction }) {
  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 (
    <section className="page right">
      <div className="bookmarks" role="tablist">
        {TABS.map(t => (
          <button
            key={t.id}
            className={'bookmark' + (active === t.id ? ' active' : '')}
            role="tab"
            aria-selected={active === t.id}
            onClick={() => onActive(t.id)}
          >
            <span className="bm-glyph">{t.glyph}</span>
            {t.label}
          </button>
        ))}
      </div>

<div className="right-stage">
        <div className={cls}>
          {shown === 'memory'  && <MemoryTab mem={data.memory} />}
          {shown === 'threads' && <ThreadsTab threads={data.threads} onThreadStatus={onThreadStatus} />}
          {shown === 'dreams'  && <DreamsTab dreams={data.dreams} onDreamAction={onDreamAction} />}
          {shown === 'vesper'  && <VesperTab vesper={data.vesper} onOffer={onOffer} onCare={onCare} />}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────
// TWEAKS
// ─────────────────────────────────────────────────────────

function HearthTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · Hearth">
      <TweakSection label="Tint">
        <TweakRadio label="Accent" value={t.tint}
          options={['plum', 'moss', 'gold']}
          onChange={v => setTweak('tint', v)} />
      </TweakSection>
      <TweakSection label="Page turn">
        <TweakRadio label="Animation" value={t.turn}
          options={['tilt', 'none']}
          onChange={v => setTweak('turn', v)} />
      </TweakSection>
      <TweakSection label="Right page density">
        <TweakRadio label="Density" value={t.rightDensity}
          options={['comfy', 'dense']}
          onChange={v => setTweak('rightDensity', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// ─────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState('memory');
  const [data, setData] = useState(EMPTY_DATA);

useEffect(() => { applyTweaks(t); }, [t]);
  useEffect(() => {
    TomeData.getHearthData().then(next => {
      setData(next);
      const ticker = document.getElementById('ticker-text');
      if (!ticker) return;
      if (!next.quotes.length) {
        ticker.textContent = 'No stored quotes yet.';
        return;
      }
      let idx = Math.floor(Math.random() * next.quotes.length);
      ticker.textContent = `"${next.quotes[idx]}"`;
      const timer = setInterval(() => {
        idx = (idx + 1) % next.quotes.length;
        ticker.style.opacity = '0';
        setTimeout(() => {
          ticker.textContent = `"${next.quotes[idx]}"`;
          ticker.style.opacity = '1';
        }, 220);
      }, 7000);
      return () => clearInterval(timer);
    }).catch(() => {
      const ticker = document.getElementById('ticker-text');
      if (ticker) ticker.textContent = 'Could not load stored quotes.';
    });
  }, []);

const offerToVesper = async (gift) => {
    const next = await TomeData.offerVesper(gift);
    setData(next.data);
    return next.response;
  };

const careForVesper = async (action) => {
    const next = await TomeData.careForVesper(action);
    setData(next.data);
    return next.response;
  };

const updateThreadStatus = async (id, status, priority) => {
    if (!id) return null;
    await AiMind.updateThreadStatus(id, status, priority);
    const next = await TomeData.getHearthData();
    setData(next);
    return next;
  };

const updateDream = async (id, action) => {
    if (!id) return null;
    if (action === 'recall') await AiMind.recallDream(id);
    if (action === 'digest') await AiMind.digestDream(id);
    if (action === 'look-next') await AiMind.queueDreamNext(id);
    const next = await TomeData.getHearthData();
    setData(next);
    return next.dreams.find(d => String(d.id) === String(id)) || null;
  };

return (
    <>
      <div className="tome">
        <LeftPage data={data} />
        <RightPage
          active={active}
          onActive={setActive}
          data={data}
          turn={t.turn}
          onOffer={offerToVesper}
          onCare={careForVesper}
          onThreadStatus={updateThreadStatus}
          onDreamAction={updateDream}
        />
      </div>
      <HearthTweaks t={t} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Memory

Threads

Dreams

✦ Vesper