2f675ee4bf
Cortex: FastAPI backend serving Inara via Claude/Gemini CLI backends. Includes SSE streaming chat, session persistence, Google Chat webhook handler, and Docker support. Inara: Identity files (persona, soul, protocols, memory, context tiers) mounted read-only into the container at runtime. Features in initial cut: - /chat endpoint with SSE keepalive + LLM fallback - Session store with rolling history window - Markdown rendering, copy-to-clipboard, links open in new tab - Stacked right-column input controls (height selector, enter toggle, note mode with public/private) — semi-hidden until textarea grows - /note endpoint for injecting public context into session history - Docker Compose config (local dev runs natively; Docker for server) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
892 lines
32 KiB
HTML
892 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cortex — Inara</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✨</text></svg>">
|
|
<script src="/static/marked.min.js"></script>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: #0d0a14;
|
|
--surface: #16101f;
|
|
--border: #2d1f3d;
|
|
--user-bg: #5c1528;
|
|
--user-border: #7a1f36;
|
|
--inara-bg: #1e1530;
|
|
--inara-border: #3d2a55;
|
|
--accent: #c4935a;
|
|
--text: #e8e0f0;
|
|
--muted: #6b5a80;
|
|
--error-bg: #3b0f0f;
|
|
--error-border: #7f1d1d;
|
|
--error-text: #fca5a5;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
header {
|
|
padding: 12px 20px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.header-emoji {
|
|
font-size: 1.6rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
25% { transform: scale(1.2) rotate(-12deg); opacity: 0.7; }
|
|
75% { transform: scale(1.2) rotate(12deg); opacity: 0.7; }
|
|
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
}
|
|
|
|
.header-emoji.processing { animation: shimmer 0.75s ease-in-out infinite; }
|
|
|
|
header .name { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
|
|
header .subtitle { font-size: 0.78rem; color: var(--muted); }
|
|
|
|
.hdr-btn {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.75rem;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, color 0.15s;
|
|
}
|
|
|
|
.hdr-btn:hover { border-color: var(--muted); color: var(--text); }
|
|
|
|
#backend-toggle.gemini { border-color: #2a4a2a; color: #6abf6a; }
|
|
#sessions-btn { margin-left: auto; }
|
|
|
|
/* Sessions panel */
|
|
#sessions-panel {
|
|
display: none;
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
right: 20px;
|
|
width: 300px;
|
|
max-height: 340px;
|
|
overflow-y: auto;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
z-index: 100;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
#sessions-panel.open { display: block; }
|
|
|
|
.session-item {
|
|
padding: 10px 14px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.session-item:last-child { border-bottom: none; }
|
|
.session-item:hover { background: var(--bg); }
|
|
.session-item.new { color: var(--accent); justify-content: center; }
|
|
|
|
.session-id {
|
|
font-family: monospace;
|
|
font-size: 0.85rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.session-meta {
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Messages */
|
|
#messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.message {
|
|
max-width: 75%;
|
|
padding: 10px 14px;
|
|
border-radius: 12px;
|
|
line-height: 1.55;
|
|
word-wrap: break-word;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.message.user { white-space: pre-wrap; }
|
|
|
|
.message.user {
|
|
align-self: flex-end;
|
|
background: var(--user-bg);
|
|
border: 1px solid var(--user-border);
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.message.assistant {
|
|
align-self: flex-start;
|
|
background: var(--inara-bg);
|
|
border: 1px solid var(--inara-border);
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
/* Markdown rendering inside assistant messages */
|
|
.message.assistant p { margin: 0 0 0.6em; }
|
|
.message.assistant p:last-child { margin-bottom: 0; }
|
|
.message.assistant ul,
|
|
.message.assistant ol { margin: 0.4em 0 0.6em 1.4em; padding: 0; }
|
|
.message.assistant li { margin-bottom: 0.2em; }
|
|
.message.assistant h1,
|
|
.message.assistant h2,
|
|
.message.assistant h3 { margin: 0.8em 0 0.3em; font-weight: 600;
|
|
color: var(--accent); line-height: 1.3; }
|
|
.message.assistant h1 { font-size: 1.1em; }
|
|
.message.assistant h2 { font-size: 1.0em; }
|
|
.message.assistant h3 { font-size: 0.95em; }
|
|
.message.assistant strong { color: var(--text); font-weight: 600; }
|
|
.message.assistant em { color: var(--accent); font-style: italic; }
|
|
.message.assistant a { color: var(--accent); text-decoration: underline; }
|
|
.message.assistant hr { border: none; border-top: 1px solid var(--border);
|
|
margin: 0.8em 0; }
|
|
.message.assistant blockquote {
|
|
border-left: 3px solid var(--border);
|
|
margin: 0.5em 0;
|
|
padding: 0.2em 0.8em;
|
|
color: var(--muted);
|
|
}
|
|
.message.assistant code {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.88em;
|
|
background: rgba(0,0,0,0.3);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 0.1em 0.35em;
|
|
}
|
|
.message.assistant pre {
|
|
background: rgba(0,0,0,0.35);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 10px 12px;
|
|
overflow-x: auto;
|
|
margin: 0.5em 0;
|
|
}
|
|
.message.assistant pre code {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.message.system {
|
|
align-self: center;
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
background: none;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.message.error {
|
|
align-self: flex-start;
|
|
background: var(--error-bg);
|
|
border: 1px solid var(--error-border);
|
|
color: var(--error-text);
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
.message.thinking { color: var(--muted); font-style: italic; }
|
|
|
|
/* Copy button */
|
|
.message.assistant { position: relative; }
|
|
|
|
.copy-btn {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 8px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
color: var(--muted);
|
|
font-size: 0.7rem;
|
|
padding: 2px 7px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.15s, color 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.message.assistant:hover .copy-btn { opacity: 1; }
|
|
.copy-btn:hover { color: var(--text); border-color: var(--muted); }
|
|
.copy-btn.copied { color: #6abf6a; border-color: #2a4a2a; }
|
|
|
|
/* Note messages */
|
|
.message.note-private {
|
|
align-self: flex-end;
|
|
background: rgba(100, 70, 5, 0.15);
|
|
border: 1px dashed rgba(180, 130, 40, 0.45);
|
|
border-bottom-right-radius: 3px;
|
|
font-size: 0.9rem;
|
|
max-width: 70%;
|
|
}
|
|
|
|
.message.note-public {
|
|
align-self: flex-end;
|
|
background: rgba(5, 70, 70, 0.15);
|
|
border: 1px dashed rgba(40, 170, 150, 0.45);
|
|
border-bottom-right-radius: 3px;
|
|
font-size: 0.9rem;
|
|
max-width: 70%;
|
|
}
|
|
|
|
.note-label {
|
|
display: block;
|
|
font-size: 0.62rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 5px;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.message.note-private .note-label { color: #c9a84c; }
|
|
.message.note-public .note-label { color: #4abfb0; }
|
|
.message.note-private .note-content { color: #c9a84c; white-space: pre-wrap; }
|
|
.message.note-public .note-content { color: #4abfb0; white-space: pre-wrap; }
|
|
|
|
/* ── Input area ────────────────────────────────────────────── */
|
|
#input-area {
|
|
padding: 14px 20px;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
#input {
|
|
flex: 1;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
padding: 10px 14px;
|
|
font-size: 0.95rem;
|
|
font-family: inherit;
|
|
resize: none;
|
|
line-height: 1.4;
|
|
overflow-y: auto;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
#input:focus { outline: none; border-color: var(--muted); }
|
|
|
|
#input.note-mode { border-color: rgba(180, 130, 40, 0.55); }
|
|
#input.note-mode:focus { border-color: rgba(180, 130, 40, 0.85); }
|
|
#input.note-mode.public { border-color: rgba(40, 170, 150, 0.55); }
|
|
#input.note-mode.public:focus { border-color: rgba(40, 170, 150, 0.85); }
|
|
|
|
/* Right column — all controls stacked, fixed width */
|
|
#right-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
width: 88px;
|
|
}
|
|
|
|
/* Semi-hidden controls: height selector row */
|
|
#height-row {
|
|
display: none; /* shown by JS when content > 3 lines */
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
#height-row span {
|
|
font-size: 0.65rem;
|
|
color: var(--muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#height-sel {
|
|
flex: 1;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
color: var(--muted);
|
|
font-size: 0.65rem;
|
|
padding: 2px 4px;
|
|
cursor: pointer;
|
|
min-width: 0;
|
|
}
|
|
|
|
#height-sel:focus { outline: none; border-color: var(--muted); }
|
|
|
|
/* Semi-hidden: enter-mode toggle */
|
|
#enter-toggle {
|
|
display: none; /* shown by JS when content > 3 lines */
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
padding: 3px 6px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: border-color 0.15s, color 0.15s;
|
|
}
|
|
|
|
#enter-toggle:hover { border-color: var(--muted); color: var(--text); }
|
|
|
|
/* Note type toggle — only visible in note mode */
|
|
#note-type-btn {
|
|
display: none;
|
|
background: var(--bg);
|
|
border: 1px solid rgba(180, 130, 40, 0.4);
|
|
border-radius: 5px;
|
|
color: rgba(180, 130, 40, 0.85);
|
|
font-size: 0.68rem;
|
|
padding: 3px 6px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
#note-type-btn.public {
|
|
border-color: rgba(40, 170, 150, 0.4);
|
|
color: rgba(40, 170, 150, 0.85);
|
|
}
|
|
|
|
#note-type-btn:hover { opacity: 0.75; }
|
|
|
|
/* Note button */
|
|
#note-btn {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
color: var(--muted);
|
|
border-radius: 8px;
|
|
padding: 8px 0;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
transition: border-color 0.15s, color 0.15s;
|
|
}
|
|
|
|
#note-btn:hover { border-color: var(--muted); color: var(--text); }
|
|
#note-btn.active { border-color: rgba(180, 130, 40, 0.6); color: #c9a84c; }
|
|
#note-btn.active.public { border-color: rgba(40, 170, 150, 0.6); color: #4abfb0; }
|
|
|
|
/* Send button */
|
|
#send {
|
|
background: var(--user-bg);
|
|
border: 1px solid var(--user-border);
|
|
color: var(--text);
|
|
border-radius: 8px;
|
|
padding: 10px 0;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
#send:hover { background: var(--user-border); }
|
|
#send:disabled { background: var(--surface); color: var(--muted);
|
|
border-color: var(--border); cursor: not-allowed; }
|
|
|
|
#session-id {
|
|
font-size: 0.7rem;
|
|
color: var(--border);
|
|
padding: 0 20px 6px;
|
|
background: var(--surface);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<span class="header-emoji">✨</span>
|
|
<div>
|
|
<div class="name">Inara</div>
|
|
<div class="subtitle">Cortex · Local</div>
|
|
</div>
|
|
<button id="sessions-btn" class="hdr-btn">Sessions</button>
|
|
<button id="backend-toggle" class="hdr-btn" title="Click to switch primary backend">claude</button>
|
|
|
|
<div id="sessions-panel"></div>
|
|
</header>
|
|
|
|
<div id="messages"></div>
|
|
<div id="session-id"></div>
|
|
|
|
<div id="input-area">
|
|
<textarea id="input" rows="1" placeholder="Message Inara… (Ctrl+Enter to send)" autofocus></textarea>
|
|
<div id="right-col">
|
|
<!-- Semi-hidden: appear when content > ~3 lines -->
|
|
<div id="height-row">
|
|
<span>↕</span>
|
|
<select id="height-sel">
|
|
<option value="120">5 lines</option>
|
|
<option value="240">10 lines</option>
|
|
<option value="480">20 lines</option>
|
|
</select>
|
|
</div>
|
|
<button id="enter-toggle" title="Toggle send shortcut">⌃↵</button>
|
|
<!-- Note mode controls -->
|
|
<button id="note-type-btn">private</button>
|
|
<button id="note-btn">Note</button>
|
|
<button id="send">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const messagesEl = document.getElementById('messages');
|
|
const inputEl = document.getElementById('input');
|
|
const sendBtn = document.getElementById('send');
|
|
const sessionEl = document.getElementById('session-id');
|
|
const headerEmoji = document.querySelector('.header-emoji');
|
|
const backendToggle = document.getElementById('backend-toggle');
|
|
const sessionsBtn = document.getElementById('sessions-btn');
|
|
const sessionsPanel = document.getElementById('sessions-panel');
|
|
const heightRow = document.getElementById('height-row');
|
|
const heightSel = document.getElementById('height-sel');
|
|
const enterToggle = document.getElementById('enter-toggle');
|
|
const noteTypeBtnEl = document.getElementById('note-type-btn');
|
|
const noteBtnEl = document.getElementById('note-btn');
|
|
|
|
let sessionId = null;
|
|
let primaryBackend = 'claude';
|
|
|
|
// ── Enter toggle ─────────────────────────────────────────────
|
|
// Default: Ctrl+Enter sends. Stored in localStorage.
|
|
let ctrlEnterMode = localStorage.getItem('ctrlEnterSend') !== 'false';
|
|
|
|
function updateEnterToggleUI() {
|
|
enterToggle.textContent = ctrlEnterMode ? '⌃↵' : '↵';
|
|
enterToggle.title = ctrlEnterMode
|
|
? 'Ctrl+Enter sends — click for Enter mode'
|
|
: 'Enter sends — click for Ctrl+Enter mode';
|
|
updateInputPlaceholder();
|
|
}
|
|
|
|
enterToggle.addEventListener('click', () => {
|
|
ctrlEnterMode = !ctrlEnterMode;
|
|
localStorage.setItem('ctrlEnterSend', ctrlEnterMode);
|
|
updateEnterToggleUI();
|
|
});
|
|
|
|
// ── Textarea height ──────────────────────────────────────────
|
|
let maxHeight = parseInt(localStorage.getItem('maxHeight') || '120');
|
|
|
|
function syncHeight() {
|
|
inputEl.style.height = 'auto';
|
|
inputEl.style.maxHeight = maxHeight + 'px';
|
|
const sh = inputEl.scrollHeight;
|
|
inputEl.style.height = Math.min(sh, maxHeight) + 'px';
|
|
// Show semi-hidden controls when content exceeds ~3 lines or a larger max is set
|
|
const showExtras = sh > 80 || maxHeight > 120;
|
|
heightRow.style.display = showExtras ? 'flex' : 'none';
|
|
enterToggle.style.display = showExtras ? 'block' : 'none';
|
|
}
|
|
|
|
heightSel.value = String(maxHeight);
|
|
heightSel.addEventListener('change', () => {
|
|
maxHeight = parseInt(heightSel.value);
|
|
localStorage.setItem('maxHeight', maxHeight);
|
|
syncHeight();
|
|
});
|
|
|
|
// ── Note mode ────────────────────────────────────────────────
|
|
let noteMode = false;
|
|
let notePublic = false;
|
|
|
|
function updateInputMode() {
|
|
if (noteMode) {
|
|
noteBtnEl.classList.add('active');
|
|
noteTypeBtnEl.style.display = 'block';
|
|
sendBtn.textContent = 'Add Note';
|
|
inputEl.classList.add('note-mode');
|
|
if (notePublic) {
|
|
inputEl.classList.add('public');
|
|
noteBtnEl.classList.add('public');
|
|
noteTypeBtnEl.textContent = 'public';
|
|
noteTypeBtnEl.classList.add('public');
|
|
} else {
|
|
inputEl.classList.remove('public');
|
|
noteBtnEl.classList.remove('public');
|
|
noteTypeBtnEl.textContent = 'private';
|
|
noteTypeBtnEl.classList.remove('public');
|
|
}
|
|
} else {
|
|
noteBtnEl.classList.remove('active', 'public');
|
|
noteTypeBtnEl.style.display = 'none';
|
|
sendBtn.textContent = 'Send';
|
|
inputEl.classList.remove('note-mode', 'public');
|
|
}
|
|
updateInputPlaceholder();
|
|
}
|
|
|
|
function updateInputPlaceholder() {
|
|
if (noteMode) {
|
|
inputEl.placeholder = notePublic
|
|
? 'Public note — LLM sees this next turn…'
|
|
: 'Private note — only you see this…';
|
|
} else {
|
|
inputEl.placeholder = ctrlEnterMode
|
|
? 'Message Inara… (Ctrl+Enter to send)'
|
|
: 'Message Inara…';
|
|
}
|
|
}
|
|
|
|
noteBtnEl.addEventListener('click', () => {
|
|
noteMode = !noteMode;
|
|
updateInputMode();
|
|
inputEl.focus();
|
|
});
|
|
|
|
noteTypeBtnEl.addEventListener('click', () => {
|
|
notePublic = !notePublic;
|
|
updateInputMode();
|
|
});
|
|
|
|
// ── Backend toggle ───────────────────────────────────────────
|
|
|
|
fetch('/backend').then(r => r.json()).then(d => setBackendUI(d.primary));
|
|
|
|
function setBackendUI(backend) {
|
|
primaryBackend = backend;
|
|
backendToggle.textContent = backend;
|
|
backendToggle.className = 'hdr-btn' + (backend === 'gemini' ? ' gemini' : '');
|
|
}
|
|
|
|
backendToggle.addEventListener('click', async () => {
|
|
const next = primaryBackend === 'claude' ? 'gemini' : 'claude';
|
|
const res = await fetch('/backend', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ primary: next }),
|
|
});
|
|
const d = await res.json();
|
|
setBackendUI(d.primary);
|
|
addMessage('system', `Backend: ${d.primary} (fallback: ${d.fallback})`);
|
|
});
|
|
|
|
// ── Sessions panel ───────────────────────────────────────────
|
|
|
|
sessionsBtn.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
if (sessionsPanel.classList.contains('open')) {
|
|
sessionsPanel.classList.remove('open');
|
|
return;
|
|
}
|
|
const res = await fetch('/sessions');
|
|
const data = await res.json();
|
|
renderPanel(data.sessions);
|
|
sessionsPanel.classList.add('open');
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!sessionsPanel.contains(e.target) && e.target !== sessionsBtn) {
|
|
sessionsPanel.classList.remove('open');
|
|
}
|
|
});
|
|
|
|
function renderPanel(sessions) {
|
|
sessionsPanel.innerHTML = '';
|
|
|
|
const newItem = makeItem('new', '+ New session', '');
|
|
newItem.addEventListener('click', () => {
|
|
sessionId = null;
|
|
messagesEl.innerHTML = '';
|
|
sessionEl.textContent = '';
|
|
addMessage('system', 'New session');
|
|
sessionsPanel.classList.remove('open');
|
|
inputEl.focus();
|
|
});
|
|
sessionsPanel.appendChild(newItem);
|
|
|
|
if (!sessions.length) {
|
|
const empty = makeItem('', 'No sessions yet', '');
|
|
empty.style.cursor = 'default';
|
|
empty.style.color = 'var(--muted)';
|
|
sessionsPanel.appendChild(empty);
|
|
return;
|
|
}
|
|
|
|
for (const s of sessions) {
|
|
const item = makeItem(
|
|
s.session_id === sessionId ? 'active' : '',
|
|
s.session_id,
|
|
`${s.message_count} msgs · ${timeAgo(s.updated)}`
|
|
);
|
|
item.addEventListener('click', () => resumeSession(s.session_id));
|
|
sessionsPanel.appendChild(item);
|
|
}
|
|
}
|
|
|
|
function makeItem(cls, label, meta) {
|
|
const item = document.createElement('div');
|
|
item.className = 'session-item' + (cls ? ' ' + cls : '');
|
|
|
|
const idEl = document.createElement('span');
|
|
idEl.className = cls === 'new' ? '' : 'session-id';
|
|
idEl.textContent = label;
|
|
item.appendChild(idEl);
|
|
|
|
if (meta) {
|
|
const metaEl = document.createElement('span');
|
|
metaEl.className = 'session-meta';
|
|
metaEl.textContent = meta;
|
|
item.appendChild(metaEl);
|
|
}
|
|
return item;
|
|
}
|
|
|
|
async function resumeSession(id) {
|
|
const res = await fetch(`/history/${id}`);
|
|
const data = await res.json();
|
|
|
|
messagesEl.innerHTML = '';
|
|
sessionId = id;
|
|
sessionEl.textContent = `session: ${id}`;
|
|
|
|
for (const msg of data.messages) {
|
|
addMessage(msg.role === 'user' ? 'user' : 'assistant', msg.content);
|
|
}
|
|
|
|
addMessage('system', `Resumed session ${id}`);
|
|
sessionsPanel.classList.remove('open');
|
|
inputEl.focus();
|
|
}
|
|
|
|
function timeAgo(iso) {
|
|
if (!iso) return '?';
|
|
const mins = Math.floor((Date.now() - new Date(iso)) / 60000);
|
|
if (mins < 1) return 'just now';
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs < 24) return `${hrs}h ago`;
|
|
return `${Math.floor(hrs / 24)}d ago`;
|
|
}
|
|
|
|
function fallbackCopy(text) {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
ta.style.cssText = 'position:fixed;top:-9999px;left:-9999px';
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
}
|
|
|
|
// ── Chat ─────────────────────────────────────────────────────
|
|
|
|
function addMessage(role, text) {
|
|
const div = document.createElement('div');
|
|
div.className = `message ${role}`;
|
|
|
|
if (role === 'assistant' && typeof marked !== 'undefined') {
|
|
div.dataset.raw = text;
|
|
div.innerHTML = marked.parse(text);
|
|
div.querySelectorAll('a').forEach(a => {
|
|
a.target = '_blank';
|
|
a.rel = 'noopener noreferrer';
|
|
});
|
|
div.appendChild(makeCopyBtn(div));
|
|
} else if (role === 'note-private' || role === 'note-public') {
|
|
const label = document.createElement('span');
|
|
label.className = 'note-label';
|
|
label.textContent = role === 'note-private' ? '◦ private note' : '◦ context note';
|
|
const content = document.createElement('span');
|
|
content.className = 'note-content';
|
|
content.textContent = text;
|
|
div.appendChild(label);
|
|
div.appendChild(content);
|
|
} else {
|
|
div.textContent = text;
|
|
}
|
|
|
|
messagesEl.appendChild(div);
|
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
|
return div;
|
|
}
|
|
|
|
function setMessageText(div, role, text) {
|
|
if (role === 'assistant' && typeof marked !== 'undefined') {
|
|
div.dataset.raw = text;
|
|
div.innerHTML = marked.parse(text);
|
|
div.querySelectorAll('a').forEach(a => {
|
|
a.target = '_blank';
|
|
a.rel = 'noopener noreferrer';
|
|
});
|
|
div.appendChild(makeCopyBtn(div));
|
|
} else {
|
|
div.textContent = text;
|
|
}
|
|
}
|
|
|
|
function makeCopyBtn(div) {
|
|
const btn = document.createElement('button');
|
|
btn.className = 'copy-btn';
|
|
btn.textContent = 'copy';
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const text = div.dataset.raw || '';
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
|
|
} else {
|
|
fallbackCopy(text);
|
|
}
|
|
btn.textContent = '✓';
|
|
btn.classList.add('copied');
|
|
setTimeout(() => {
|
|
btn.textContent = 'copy';
|
|
btn.classList.remove('copied');
|
|
}, 1500);
|
|
});
|
|
return btn;
|
|
}
|
|
|
|
async function addNote() {
|
|
const text = inputEl.value.trim();
|
|
if (!text) return;
|
|
|
|
inputEl.value = '';
|
|
syncHeight();
|
|
|
|
if (!notePublic) {
|
|
// Private: UI only, never sent to backend
|
|
addMessage('note-private', text);
|
|
return;
|
|
}
|
|
|
|
// Public: show in UI and persist to session so LLM sees it next turn
|
|
if (!sessionId) {
|
|
addMessage('system', 'Start a conversation first before adding a public note.');
|
|
return;
|
|
}
|
|
|
|
addMessage('note-public', text);
|
|
try {
|
|
const res = await fetch('/note', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ session_id: sessionId, note: text }),
|
|
});
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
} catch (err) {
|
|
addMessage('system', `Note save failed: ${err.message}`);
|
|
}
|
|
}
|
|
|
|
async function sendMessage() {
|
|
const text = inputEl.value.trim();
|
|
if (!text || sendBtn.disabled) return;
|
|
|
|
inputEl.value = '';
|
|
syncHeight();
|
|
sendBtn.disabled = true;
|
|
headerEmoji.classList.add('processing');
|
|
|
|
addMessage('user', text);
|
|
const thinkingDiv = addMessage('assistant thinking', '✨ thinking…');
|
|
|
|
try {
|
|
const res = await fetch('/chat', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message: text, session_id: sessionId }),
|
|
});
|
|
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
buffer += decoder.decode(value, { stream: true });
|
|
const lines = buffer.split('\n');
|
|
buffer = lines.pop();
|
|
|
|
for (const line of lines) {
|
|
if (!line.startsWith('data: ')) continue;
|
|
const data = JSON.parse(line.slice(6));
|
|
|
|
if (data.type === 'keepalive') continue;
|
|
|
|
if (data.type === 'response') {
|
|
sessionId = data.session_id;
|
|
sessionEl.textContent = `session: ${sessionId}`;
|
|
thinkingDiv.className = 'message assistant';
|
|
setMessageText(thinkingDiv, 'assistant', data.response);
|
|
if (data.fallback_used) {
|
|
addMessage('system',
|
|
`⚡ ${primaryBackend} unavailable — answered by ${data.backend}`);
|
|
}
|
|
} else if (data.type === 'error') {
|
|
throw new Error(data.message);
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
thinkingDiv.className = 'message error';
|
|
thinkingDiv.textContent = `Error: ${err.message}`;
|
|
}
|
|
|
|
headerEmoji.classList.remove('processing');
|
|
sendBtn.disabled = false;
|
|
inputEl.focus();
|
|
}
|
|
|
|
sendBtn.addEventListener('click', () => {
|
|
if (noteMode) addNote(); else sendMessage();
|
|
});
|
|
|
|
inputEl.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
const shouldSend = ctrlEnterMode ? (e.ctrlKey || e.metaKey) : !e.shiftKey;
|
|
if (shouldSend) {
|
|
e.preventDefault();
|
|
if (noteMode) addNote(); else sendMessage();
|
|
}
|
|
}
|
|
});
|
|
|
|
inputEl.addEventListener('input', syncHeight);
|
|
|
|
// ── Init ─────────────────────────────────────────────────────
|
|
updateEnterToggleUI();
|
|
syncHeight();
|
|
addMessage('system', 'Session started');
|
|
</script>
|
|
</body>
|
|
</html>
|