cf277f822e
- Load Inter variable font from Google Fonts on all 5 HTML pages - font-weight: 450 on body (between regular and medium — fixes thin feel) - -webkit-font-smoothing: antialiased for cleaner screen rendering - Base font size: normal 16→17px, large 18→19px, small 14→15px - Applies consistently to main UI, login, setup, settings, and help pages Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
159 lines
8.0 KiB
HTML
159 lines
8.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>">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
|
|
<!-- 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: '17px', large: '19px', small: '15px' };
|
|
var fs = localStorage.getItem('font-size') || 'normal';
|
|
document.documentElement.style.fontSize = sizes[fs] || '17px';
|
|
})();
|
|
</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>
|
|
|
|
<nav id="hdr-nav">
|
|
<button id="sessions-btn" class="hdr-btn" title="Sessions">💬 <span class="btn-label">Sessions</span></button>
|
|
<button id="ctx-open-btn" class="hdr-btn" title="Context & memory">⚙<span class="tier-badge">2</span></button>
|
|
<div class="hdr-dropdown-wrap" id="settings-wrap">
|
|
<button class="hdr-btn" id="settings-btn" title="Settings">≡</button>
|
|
<div class="hdr-dropdown" id="settings-dropdown">
|
|
<button id="files-btn" class="hdr-dd-item">📁 Files</button>
|
|
<a href="/settings" class="hdr-dd-item">👤 Account</a>
|
|
<div class="hdr-dd-divider"></div>
|
|
<form method="POST" action="/logout" style="margin:0">
|
|
<button type="submit" class="hdr-dd-item">⏏ Sign Out</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<a href="/help" class="hdr-btn" title="Help & reference" style="text-decoration:none">❓</a>
|
|
</nav>
|
|
|
|
<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>
|
|
<select id="height-sel" class="ctx-btn" title="Max input height" style="cursor:pointer">
|
|
<option value="120">5 lines</option>
|
|
<option value="240">10 lines</option>
|
|
<option value="480">20 lines</option>
|
|
</select>
|
|
<button id="enter-toggle" class="ctx-btn" title="Toggle send shortcut">⌃↵</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">
|
|
<!-- Mode select — compact dropdown, opens upward, MRU sorted -->
|
|
<div id="mode-select">
|
|
<button id="mode-select-btn" title="Input mode">
|
|
<span id="mode-icon">💬</span>
|
|
<span id="mode-label">Chat</span>
|
|
<span class="mode-arrow">▲</span>
|
|
</button>
|
|
<!-- Populated dynamically in MRU order -->
|
|
<div id="mode-dropdown"></div>
|
|
<!-- Note visibility sub-toggle — only shown when note mode is active -->
|
|
<button id="note-vis-btn" title="Toggle note visibility (private / public)">prv</button>
|
|
</div>
|
|
<textarea id="input" rows="1" placeholder="Message…" autofocus></textarea>
|
|
<div id="send-col">
|
|
<button id="send">Send</button>
|
|
<button id="stop">Stop</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|