serversdown
4f770f2e43
Brian can rate Lyra's outputs as he uses her; each rating is stored as a (context, content, rating) triple — the shape a future fine-tune / preference dataset wants, collected passively during real use. - memory: ratings table + add_rating (upsert: one row per item, re-rating replaces), list_ratings, rating_counts - server: POST /rate, GET /ratings/counts, GET /ratings/export (JSONL download) - chat UI: subtle 👍/👎 on each assistant reply, captures the prompting message as context - journal/reflection UI: 👍/👎 on each thought - tests: counts + upsert-replace behavior Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
162 lines
7.6 KiB
HTML
162 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#070707" />
|
|
<title>Lyra — Journal</title>
|
|
<style>
|
|
:root {
|
|
--bg: #070707; --bg-elev: #0e0e0e; --bg-line: #141414; --border: #2a1d12;
|
|
--text: #e8e8e8; --fade: #8a8a8a; --accent: #ff7a00;
|
|
--reflection: #8fd694; --metacognition: #ffb347; --journal: #ff7a00;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0; min-height: 100%; background: var(--bg); color: var(--text);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
header {
|
|
position: sticky; top: 0; z-index: 10; background: var(--bg-elev);
|
|
border-bottom: 1px solid var(--border); padding: env(safe-area-inset-top) 14px 0;
|
|
}
|
|
.topbar { display: flex; align-items: center; gap: 10px; padding: 13px 0 10px; flex-wrap: wrap; }
|
|
.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 600; }
|
|
.topbar a.back { color: var(--accent); text-decoration: none; font-size: .95rem; }
|
|
.count { margin-left: auto; color: var(--fade); font-size: .8rem; }
|
|
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; }
|
|
.chip {
|
|
font-size: .8rem; padding: 6px 12px; border-radius: 999px;
|
|
border: 1px solid var(--border); background: var(--bg-line); color: var(--fade);
|
|
cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
|
|
}
|
|
.chip.active { color: var(--text); border-color: var(--accent); background: #241400; }
|
|
|
|
main { max-width: 720px; margin: 0 auto; padding: 14px 14px 48px; }
|
|
.day { color: var(--fade); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px;
|
|
margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--bg-line); }
|
|
.day:first-child { margin-top: 4px; }
|
|
|
|
.entry { display: flex; gap: 11px; padding: 10px 2px; }
|
|
.rail { flex: none; width: 4px; border-radius: 3px; background: var(--fade); }
|
|
.entry.k-reflection .rail { background: var(--reflection); }
|
|
.entry.k-metacognition .rail { background: var(--metacognition); }
|
|
.entry.k-journal .rail { background: var(--journal); }
|
|
.body { flex: 1; }
|
|
.meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; flex-wrap: wrap; }
|
|
.kind { font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
|
|
.entry.k-reflection .kind { color: var(--reflection); }
|
|
.entry.k-metacognition .kind { color: var(--metacognition); }
|
|
.entry.k-journal .kind { color: var(--journal); }
|
|
.time { color: var(--fade); font-size: .72rem; }
|
|
.src { color: var(--fade); font-size: .68rem; opacity: .7; }
|
|
.text { font-size: .98rem; line-height: 1.55; }
|
|
.jrate { display: flex; gap: 8px; margin-top: 6px; opacity: .35; }
|
|
.entry:hover .jrate { opacity: .85; }
|
|
.jr { background: none; border: none; cursor: pointer; font-size: .85rem; padding: 2px 5px;
|
|
border-radius: 5px; filter: grayscale(.6); -webkit-tap-highlight-color: transparent; }
|
|
.jr:hover { filter: none; background: rgba(255,122,0,.12); }
|
|
.jr.rated { filter: none; background: rgba(255,122,0,.25); opacity: 1; }
|
|
.empty { color: var(--fade); text-align: center; padding: 44px 16px; }
|
|
.hidden { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="topbar">
|
|
<h1>📔 Lyra · Journal</h1>
|
|
<a class="back" href="/self">← Mind</a>
|
|
<a class="back" href="/">Chat</a>
|
|
<span class="count" id="count"></span>
|
|
</div>
|
|
<div class="chips" id="chips">
|
|
<span class="chip active" data-kind="all">all</span>
|
|
<span class="chip active" data-kind="journal">journal</span>
|
|
<span class="chip active" data-kind="reflection">reflections</span>
|
|
<span class="chip active" data-kind="metacognition">metacognition</span>
|
|
</div>
|
|
</header>
|
|
<main id="root"><p class="empty" id="boot">Opening her journal…</p></main>
|
|
|
|
<script>
|
|
const root = document.getElementById('root');
|
|
const countEl = document.getElementById('count');
|
|
const active = new Set(['journal', 'reflection', 'metacognition']);
|
|
let entries = [];
|
|
|
|
function esc(s){ const d=document.createElement('div'); d.textContent = s==null?'':String(s); return d.innerHTML; }
|
|
function dayKey(iso){ return new Date(iso).toLocaleDateString([], {weekday:'long', month:'short', day:'numeric', year:'numeric'}); }
|
|
function clockt(iso){ return new Date(iso).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'}); }
|
|
|
|
document.getElementById('chips').addEventListener('click', (e) => {
|
|
const chip = e.target.closest('.chip'); if (!chip) return;
|
|
const k = chip.dataset.kind;
|
|
if (k === 'all') {
|
|
const turnOn = !chip.classList.contains('active');
|
|
document.querySelectorAll('.chip').forEach(c => c.classList.toggle('active', turnOn));
|
|
active.clear(); if (turnOn) ['journal','reflection','metacognition'].forEach(x => active.add(x));
|
|
} else {
|
|
if (active.has(k)) { active.delete(k); chip.classList.remove('active'); }
|
|
else { active.add(k); chip.classList.add('active'); }
|
|
document.querySelector('.chip[data-kind="all"]').classList.toggle('active', active.size === 3);
|
|
}
|
|
render();
|
|
});
|
|
|
|
function render(){
|
|
const shown = entries.filter(e => active.has(e.kind));
|
|
countEl.textContent = `${shown.length} entr${shown.length === 1 ? 'y' : 'ies'}`;
|
|
if (!shown.length) { root.innerHTML = '<p class="empty">Nothing here yet. Her reflections and notes will collect as she thinks.</p>'; return; }
|
|
let html = '', lastDay = null;
|
|
for (const e of shown) {
|
|
const d = dayKey(e.created_at);
|
|
if (d !== lastDay) { html += `<div class="day">${esc(d)}</div>`; lastDay = d; }
|
|
html += `<div class="entry k-${esc(e.kind)}">
|
|
<div class="rail"></div>
|
|
<div class="body">
|
|
<div class="meta">
|
|
<span class="kind">${esc(e.kind)}</span>
|
|
<span class="time">${esc(clockt(e.created_at))}</span>
|
|
${e.source ? `<span class="src">via ${esc(e.source)}</span>` : ''}
|
|
</div>
|
|
<div class="text">${esc(e.content)}</div>
|
|
<div class="jrate">
|
|
<button class="jr" data-id="${e.id}" data-val="1">👍</button>
|
|
<button class="jr" data-id="${e.id}" data-val="-1">👎</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
root.innerHTML = html;
|
|
}
|
|
|
|
// 👍/👎 on a thought -> /rate (fine-tune signal)
|
|
root.addEventListener('click', (ev) => {
|
|
const b = ev.target.closest('.jr'); if (!b) return;
|
|
const e = entries.find(x => String(x.id) === b.dataset.id); if (!e) return;
|
|
fetch('/rate', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ kind: e.kind, rating: Number(b.dataset.val), content: e.content, ref: e.id })
|
|
}).catch(() => {});
|
|
const bar = b.parentElement;
|
|
bar.querySelectorAll('.jr').forEach(x => x.classList.remove('rated'));
|
|
b.classList.add('rated');
|
|
});
|
|
|
|
async function load(){
|
|
try {
|
|
const r = await fetch('/journal/data', { cache: 'no-store' });
|
|
entries = (await r.json()).entries || [];
|
|
render();
|
|
} catch (e) {
|
|
root.innerHTML = '<p class="empty">Couldn\'t open her journal. Is the server up?</p>';
|
|
}
|
|
}
|
|
load();
|
|
setInterval(load, 20000);
|
|
document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
|
|
</script>
|
|
</body>
|
|
</html>
|