1b425a539f
- Add /settings page with password change form and personas list - Add /help dedicated page (replaces help modal); renders HELP.md with collapsible sections, dark theme, back link to active persona - Add 👤 account button and convert ? button to link in header - Remove help modal HTML and ~55 lines of modal JS from main app - Register settings and help routers in main.py Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
143 lines
7.0 KiB
HTML
143 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<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>">
|
|
<!-- Apply saved theme + font size before first paint to avoid flash -->
|
|
<script>
|
|
(function(){
|
|
var t = localStorage.getItem('theme');
|
|
if (!t) t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
document.documentElement.setAttribute('data-theme', t);
|
|
var sizes = { normal: '16px', large: '18px', small: '14px' };
|
|
var fs = localStorage.getItem('font-size') || 'normal';
|
|
document.documentElement.style.fontSize = sizes[fs] || '16px';
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="/static/marked.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<span class="header-emoji" id="header-emoji">✨</span>
|
|
<div class="persona-switcher" id="persona-switcher">
|
|
<div class="name" id="persona-name">Inara</div>
|
|
<div class="subtitle">Cortex · Local</div>
|
|
<div class="persona-dropdown" id="persona-dropdown"></div>
|
|
</div>
|
|
<button id="sessions-btn" class="hdr-btn">Sessions</button>
|
|
<button id="files-btn" class="hdr-btn">Files</button>
|
|
<button id="ctx-open-btn" class="hdr-btn" title="Settings">⚙<span class="tier-badge">2</span></button>
|
|
<a href="/help" class="hdr-btn" title="Help & reference" style="text-decoration:none">?</a>
|
|
<a id="account-btn" href="/settings" class="hdr-btn" title="Account settings" style="text-decoration:none">👤</a>
|
|
<form method="POST" action="/logout" style="margin:0">
|
|
<button type="submit" class="hdr-btn" title="Sign out" id="logout-btn">⏏</button>
|
|
</form>
|
|
|
|
<div id="sessions-panel"></div>
|
|
|
|
<!-- Context / memory panel -->
|
|
<div id="ctx-panel">
|
|
<div class="ctx-section">
|
|
<div class="ctx-section-title">Context Tier</div>
|
|
<div class="ctx-row">
|
|
<button class="ctx-btn" data-tier="1" id="tier-1" title="Minimal (~1.5k tokens)">T1</button>
|
|
<button class="ctx-btn active" data-tier="2" id="tier-2" title="Standard (~5k tokens)">T2</button>
|
|
<button class="ctx-btn" data-tier="3" id="tier-3" title="Extended (~15k tokens)">T3</button>
|
|
<button class="ctx-btn" data-tier="4" id="tier-4" title="Full (~50k tokens)">T4</button>
|
|
</div>
|
|
</div>
|
|
<div class="ctx-section">
|
|
<div class="ctx-section-title">Memory Layers</div>
|
|
<div class="ctx-row">
|
|
<button class="ctx-btn mem-on" id="mem-long-btn" title="Long-term (MEMORY_LONG.md)">Long</button>
|
|
<button class="ctx-btn mem-on" id="mem-mid-btn" title="Mid-term (MEMORY_MID.md)">Mid</button>
|
|
<button class="ctx-btn mem-on" id="mem-short-btn" title="Short-term (MEMORY_SHORT.md)">Short</button>
|
|
</div>
|
|
</div>
|
|
<div class="ctx-section">
|
|
<div class="ctx-section-title">Distill Memory</div>
|
|
<div class="ctx-row">
|
|
<button class="ctx-btn" id="distill-short-btn" title="Roll session logs → MEMORY_SHORT (no LLM)">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 steps in sequence">all</button>
|
|
</div>
|
|
<div id="ctx-distill-status"></div>
|
|
<div id="ctx-schedule"></div>
|
|
</div>
|
|
<div class="ctx-section">
|
|
<div class="ctx-section-title">Backend</div>
|
|
<div class="ctx-row">
|
|
<button id="backend-toggle" class="ctx-btn" title="Click to switch primary backend">claude</button>
|
|
</div>
|
|
</div>
|
|
<div class="ctx-section">
|
|
<div class="ctx-section-title">Display</div>
|
|
<div class="ctx-row">
|
|
<button id="font-size-btn" class="ctx-btn" title="Cycle font size: normal → large → small">Aa</button>
|
|
<button id="theme-btn" class="ctx-btn" title="Toggle light/dark mode">☾</button>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Auth warning banner — shown when Claude CLI token is near expiry -->
|
|
<div id="auth-banner">
|
|
<div id="auth-banner-text">
|
|
<span id="auth-banner-msg"></span>
|
|
<span id="auth-banner-hint"></span>
|
|
</div>
|
|
<button id="auth-banner-close" title="Dismiss">✕</button>
|
|
</div>
|
|
|
|
<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="agent-mode-btn" title="Agent mode — Gemini tool loop + Claude response">Agent</button>
|
|
<button id="send">Send</button>
|
|
<button id="stop">Stop</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|