Add tiered memory system with manual distillation
- config.py: memory_budget_long/mid/short settings (overridable in .env)
- memory_distiller.py: distill_short (no LLM), distill_mid, distill_long (LLM)
- routers/distill.py: POST /distill/{short,mid,long,all} endpoints
- context_loader.py: rewrote to load long→mid→short order with include_* toggles
- routers/chat.py: ChatRequest gains include_long/mid/short fields
- routers/files.py: MEMORY_LONG/MID/SHORT.md added to ALLOWED set
- main.py: register distill router
- static/index.html: context bar — tier selector, L/M/S memory toggles,
distill buttons with status feedback; send includes tier + memory flags
- inara/MEMORY_LONG.md: migrated from MEMORY.md + Cortex/Talk bot notes
- inara/MEMORY_MID.md, MEMORY_SHORT.md: stubs ready for distillation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -522,6 +522,164 @@
|
||||
.edit-save-btn { border-color: var(--inara-border); color: var(--accent); }
|
||||
.edit-save-btn:hover { background: var(--inara-bg); }
|
||||
.edit-cancel-btn:hover { color: var(--text); border-color: var(--muted); }
|
||||
|
||||
/* ── File editor modal ───────────────────────────────────── */
|
||||
#file-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
z-index: 200;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#file-modal.open { display: flex; }
|
||||
|
||||
#file-modal-inner {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
width: min(860px, 96vw);
|
||||
height: min(82vh, 800px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#file-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#file-modal-header select {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
color: var(--text);
|
||||
font-size: 0.85rem;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#file-modal-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fm-btn {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.fm-btn:hover { color: var(--text); border-color: var(--muted); }
|
||||
.fm-btn.active { color: var(--accent); border-color: var(--accent); }
|
||||
.fm-btn.save { color: var(--accent); border-color: var(--inara-border); }
|
||||
.fm-btn.save:hover { background: var(--inara-bg); }
|
||||
#file-saved-msg {
|
||||
font-size: 0.75rem;
|
||||
color: #6abf6a;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
#file-saved-msg.show { opacity: 1; }
|
||||
|
||||
#file-modal-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#file-editor {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 16px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
resize: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#file-preview {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
display: none;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#file-preview.active { display: block; }
|
||||
#file-editor.hidden { display: none; }
|
||||
|
||||
/* Talk activity badge on Sessions button */
|
||||
#sessions-btn.talk-badge::after {
|
||||
content: '●';
|
||||
color: #7cb9e8;
|
||||
margin-left: 5px;
|
||||
font-size: 0.55rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ── Context bar ─────────────────────────────────────────── */
|
||||
#context-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 20px;
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ctx-label {
|
||||
font-size: 0.63rem;
|
||||
color: var(--muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ctx-btn {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 0.63rem;
|
||||
padding: 2px 7px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.ctx-btn:hover { color: var(--text); border-color: var(--muted); }
|
||||
.ctx-btn.active { color: var(--accent); border-color: var(--accent); }
|
||||
.ctx-btn.mem-on { color: #6abf6a; border-color: #2a4a2a; }
|
||||
|
||||
.ctx-sep { flex: 1; min-width: 8px; }
|
||||
|
||||
#ctx-distill-status {
|
||||
font-size: 0.62rem;
|
||||
color: #6abf6a;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#ctx-distill-status.show { opacity: 1; }
|
||||
#ctx-distill-status.err { color: var(--error-text); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -532,14 +690,55 @@
|
||||
<div class="subtitle">Cortex · Local</div>
|
||||
</div>
|
||||
<button id="sessions-btn" class="hdr-btn">Sessions</button>
|
||||
<button id="files-btn" class="hdr-btn">Files</button>
|
||||
<button id="backend-toggle" class="hdr-btn" title="Click to switch primary backend">claude</button>
|
||||
|
||||
<div id="sessions-panel"></div>
|
||||
</header>
|
||||
|
||||
<!-- File editor modal -->
|
||||
<div id="file-modal">
|
||||
<div id="file-modal-inner">
|
||||
<div id="file-modal-header">
|
||||
<span id="file-modal-title">Context Files</span>
|
||||
<select id="file-select"></select>
|
||||
<button class="fm-btn" id="file-raw-btn">edit</button>
|
||||
<button class="fm-btn active" id="file-preview-btn">preview</button>
|
||||
<button class="fm-btn save" id="file-save-btn">Save</button>
|
||||
<span id="file-saved-msg">saved ✓</span>
|
||||
<button class="fm-btn" id="file-close-btn">✕</button>
|
||||
</div>
|
||||
<div id="file-modal-body">
|
||||
<textarea id="file-editor" spellcheck="false"></textarea>
|
||||
<div id="file-preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="messages"></div>
|
||||
<div id="session-id"></div>
|
||||
|
||||
<!-- Context / memory controls -->
|
||||
<div id="context-bar">
|
||||
<span class="ctx-label">Tier:</span>
|
||||
<button class="ctx-btn" data-tier="1" id="tier-1">1</button>
|
||||
<button class="ctx-btn active" data-tier="2" id="tier-2">2</button>
|
||||
<button class="ctx-btn" data-tier="3" id="tier-3">3</button>
|
||||
<button class="ctx-btn" data-tier="4" id="tier-4">4</button>
|
||||
<span class="ctx-sep"></span>
|
||||
<span class="ctx-label">Mem:</span>
|
||||
<button class="ctx-btn mem-on" id="mem-long-btn" title="Long-term memory (MEMORY_LONG.md)">L</button>
|
||||
<button class="ctx-btn mem-on" id="mem-mid-btn" title="Mid-term memory (MEMORY_MID.md)">M</button>
|
||||
<button class="ctx-btn mem-on" id="mem-short-btn" title="Short-term memory (MEMORY_SHORT.md)">S</button>
|
||||
<span class="ctx-sep"></span>
|
||||
<span class="ctx-label">Distill:</span>
|
||||
<button class="ctx-btn" id="distill-short-btn" title="Roll session logs → MEMORY_SHORT">short</button>
|
||||
<button class="ctx-btn" id="distill-mid-btn" title="Summarize short → MEMORY_MID (LLM)">mid</button>
|
||||
<button class="ctx-btn" id="distill-long-btn" title="Integrate mid → MEMORY_LONG (LLM)">long</button>
|
||||
<button class="ctx-btn" id="distill-all-btn" title="Run all three distillation steps">all</button>
|
||||
<span id="ctx-distill-status"></span>
|
||||
</div>
|
||||
|
||||
<div id="input-area">
|
||||
<textarea id="input" rows="1" placeholder="Message Inara… (Ctrl+Enter to send)" autofocus></textarea>
|
||||
<div id="right-col">
|
||||
@@ -581,6 +780,7 @@
|
||||
let primaryBackend = 'claude';
|
||||
let activeController = null;
|
||||
let currentHistory = []; // mirrors backend session [{role, content}, ...]
|
||||
let talkThinkingDiv = null; // pending "thinking…" bubble for live Talk updates
|
||||
|
||||
// ── Enter toggle ─────────────────────────────────────────────
|
||||
// Default: Ctrl+Enter sends. Stored in localStorage.
|
||||
@@ -769,6 +969,8 @@
|
||||
}
|
||||
|
||||
async function resumeSession(id) {
|
||||
talkThinkingDiv = null;
|
||||
if (id && id.startsWith('nct_')) sessionsBtn.classList.remove('talk-badge');
|
||||
const res = await fetch(`/history/${id}`);
|
||||
const data = await res.json();
|
||||
|
||||
@@ -1092,7 +1294,14 @@
|
||||
const res = await fetch('/chat', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message: text, session_id: sessionId }),
|
||||
body: JSON.stringify({
|
||||
message: text,
|
||||
session_id: sessionId,
|
||||
tier: currentTier,
|
||||
include_long: memLong,
|
||||
include_mid: memMid,
|
||||
include_short: memShort,
|
||||
}),
|
||||
signal: activeController.signal,
|
||||
});
|
||||
|
||||
@@ -1166,6 +1375,214 @@
|
||||
|
||||
inputEl.addEventListener('input', syncHeight);
|
||||
|
||||
// ── File editor ──────────────────────────────────────────────
|
||||
const fileModal = document.getElementById('file-modal');
|
||||
const fileSelect = document.getElementById('file-select');
|
||||
const fileEditor = document.getElementById('file-editor');
|
||||
const filePreview = document.getElementById('file-preview');
|
||||
const fileRawBtn = document.getElementById('file-raw-btn');
|
||||
const filePreviewBtn = document.getElementById('file-preview-btn');
|
||||
const fileSaveBtn = document.getElementById('file-save-btn');
|
||||
const fileSavedMsg = document.getElementById('file-saved-msg');
|
||||
const fileCloseBtn = document.getElementById('file-close-btn');
|
||||
const filesBtn = document.getElementById('files-btn');
|
||||
|
||||
let fileMode = 'preview'; // 'edit' or 'preview'
|
||||
|
||||
function setFileMode(mode) {
|
||||
fileMode = mode;
|
||||
if (mode === 'edit') {
|
||||
fileEditor.classList.remove('hidden');
|
||||
filePreview.classList.remove('active');
|
||||
fileRawBtn.classList.add('active');
|
||||
filePreviewBtn.classList.remove('active');
|
||||
} else {
|
||||
fileEditor.classList.add('hidden');
|
||||
filePreview.classList.add('active');
|
||||
fileRawBtn.classList.remove('active');
|
||||
filePreviewBtn.classList.add('active');
|
||||
if (typeof marked !== 'undefined') {
|
||||
filePreview.innerHTML = marked.parse(fileEditor.value);
|
||||
filePreview.querySelectorAll('a').forEach(a => {
|
||||
a.target = '_blank'; a.rel = 'noopener noreferrer';
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFile(name) {
|
||||
const res = await fetch(`/files/${encodeURIComponent(name)}`);
|
||||
if (!res.ok) { fileEditor.value = `Error loading ${name}`; return; }
|
||||
const data = await res.json();
|
||||
fileEditor.value = data.content;
|
||||
document.getElementById('file-modal-title').textContent = name;
|
||||
setFileMode(fileMode);
|
||||
}
|
||||
|
||||
async function openFileModal() {
|
||||
// Populate the file list
|
||||
const res = await fetch('/files');
|
||||
const data = await res.json();
|
||||
fileSelect.innerHTML = '';
|
||||
for (const f of data.files) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = f.name;
|
||||
opt.textContent = f.name + (f.exists ? '' : ' (missing)');
|
||||
fileSelect.appendChild(opt);
|
||||
}
|
||||
fileModal.classList.add('open');
|
||||
await loadFile(fileSelect.value);
|
||||
}
|
||||
|
||||
filesBtn.addEventListener('click', openFileModal);
|
||||
|
||||
fileSelect.addEventListener('change', () => loadFile(fileSelect.value));
|
||||
|
||||
fileRawBtn.addEventListener('click', () => setFileMode('edit'));
|
||||
filePreviewBtn.addEventListener('click', () => setFileMode('preview'));
|
||||
|
||||
fileSaveBtn.addEventListener('click', async () => {
|
||||
const name = fileSelect.value;
|
||||
const res = await fetch(`/files/${encodeURIComponent(name)}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content: fileEditor.value }),
|
||||
});
|
||||
if (res.ok) {
|
||||
fileSavedMsg.classList.add('show');
|
||||
setTimeout(() => fileSavedMsg.classList.remove('show'), 2000);
|
||||
}
|
||||
});
|
||||
|
||||
fileCloseBtn.addEventListener('click', () => fileModal.classList.remove('open'));
|
||||
|
||||
fileModal.addEventListener('click', (e) => {
|
||||
if (e.target === fileModal) fileModal.classList.remove('open');
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && fileModal.classList.contains('open')) {
|
||||
fileModal.classList.remove('open');
|
||||
}
|
||||
// Ctrl+S to save when modal is open
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 's' && fileModal.classList.contains('open')) {
|
||||
e.preventDefault();
|
||||
fileSaveBtn.click();
|
||||
}
|
||||
});
|
||||
|
||||
// ── Real-time Talk updates (SSE) ─────────────────────────────
|
||||
const evtSource = new EventSource('/events');
|
||||
|
||||
evtSource.onmessage = (e) => {
|
||||
let data;
|
||||
try { data = JSON.parse(e.data); } catch { return; }
|
||||
if (data.type === 'keepalive') return;
|
||||
if (data.type !== 'nct_message' && data.type !== 'nct_response') return;
|
||||
|
||||
if (sessionId === data.session_id) {
|
||||
// Active session — append live
|
||||
if (data.type === 'nct_message') {
|
||||
// Clear any stale thinking div before new user msg
|
||||
if (talkThinkingDiv) { talkThinkingDiv.remove(); talkThinkingDiv = null; }
|
||||
addMessage('user', data.content);
|
||||
talkThinkingDiv = addMessage('assistant thinking', '✨ thinking…');
|
||||
} else {
|
||||
if (talkThinkingDiv) {
|
||||
talkThinkingDiv.className = 'message assistant';
|
||||
setMessageText(talkThinkingDiv, 'assistant', data.content);
|
||||
talkThinkingDiv = null;
|
||||
} else {
|
||||
addMessage('assistant', data.content);
|
||||
}
|
||||
scrollToBottom();
|
||||
}
|
||||
} else {
|
||||
// Different session — light badge on Sessions button
|
||||
if (data.type === 'nct_message') {
|
||||
sessionsBtn.classList.add('talk-badge');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ── Context bar — tier + memory toggles + distill ────────────
|
||||
let currentTier = parseInt(localStorage.getItem('ctx-tier') || '2');
|
||||
let memLong = localStorage.getItem('mem-long') !== 'false';
|
||||
let memMid = localStorage.getItem('mem-mid') !== 'false';
|
||||
let memShort = localStorage.getItem('mem-short') !== 'false';
|
||||
|
||||
const distillStatus = document.getElementById('ctx-distill-status');
|
||||
|
||||
function updateTierUI() {
|
||||
document.querySelectorAll('.ctx-btn[data-tier]').forEach(btn => {
|
||||
btn.classList.toggle('active', parseInt(btn.dataset.tier) === currentTier);
|
||||
});
|
||||
}
|
||||
|
||||
function updateMemUI() {
|
||||
document.getElementById('mem-long-btn').classList.toggle('mem-on', memLong);
|
||||
document.getElementById('mem-mid-btn').classList.toggle('mem-on', memMid);
|
||||
document.getElementById('mem-short-btn').classList.toggle('mem-on', memShort);
|
||||
document.getElementById('mem-long-btn').classList.toggle('active', false);
|
||||
document.getElementById('mem-mid-btn').classList.toggle('active', false);
|
||||
document.getElementById('mem-short-btn').classList.toggle('active', false);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.ctx-btn[data-tier]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
currentTier = parseInt(btn.dataset.tier);
|
||||
localStorage.setItem('ctx-tier', currentTier);
|
||||
updateTierUI();
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('mem-long-btn').addEventListener('click', () => {
|
||||
memLong = !memLong;
|
||||
localStorage.setItem('mem-long', memLong);
|
||||
updateMemUI();
|
||||
});
|
||||
document.getElementById('mem-mid-btn').addEventListener('click', () => {
|
||||
memMid = !memMid;
|
||||
localStorage.setItem('mem-mid', memMid);
|
||||
updateMemUI();
|
||||
});
|
||||
document.getElementById('mem-short-btn').addEventListener('click', () => {
|
||||
memShort = !memShort;
|
||||
localStorage.setItem('mem-short', memShort);
|
||||
updateMemUI();
|
||||
});
|
||||
|
||||
function showDistillStatus(msg, isErr) {
|
||||
distillStatus.textContent = msg;
|
||||
distillStatus.classList.toggle('err', !!isErr);
|
||||
distillStatus.classList.add('show');
|
||||
setTimeout(() => distillStatus.classList.remove('show'), 4000);
|
||||
}
|
||||
|
||||
async function runDistill(endpoint) {
|
||||
showDistillStatus('distilling…', false);
|
||||
try {
|
||||
const res = await fetch(`/distill/${endpoint}`, { method: 'POST' });
|
||||
const d = await res.json();
|
||||
if (!res.ok || d.ok === false) {
|
||||
const err = d.error || d.mid?.error || d.long?.error || `HTTP ${res.status}`;
|
||||
showDistillStatus(`✗ ${err}`, true);
|
||||
} else {
|
||||
showDistillStatus(`✓ ${endpoint} done`, false);
|
||||
}
|
||||
} catch (err) {
|
||||
showDistillStatus(`✗ ${err.message}`, true);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('distill-short-btn').addEventListener('click', () => runDistill('short'));
|
||||
document.getElementById('distill-mid-btn').addEventListener('click', () => runDistill('mid'));
|
||||
document.getElementById('distill-long-btn').addEventListener('click', () => runDistill('long'));
|
||||
document.getElementById('distill-all-btn').addEventListener('click', () => runDistill('all'));
|
||||
|
||||
updateTierUI();
|
||||
updateMemUI();
|
||||
|
||||
// ── Init ─────────────────────────────────────────────────────
|
||||
updateEnterToggleUI();
|
||||
syncHeight();
|
||||
|
||||
Reference in New Issue
Block a user