Scott.Idem/Cortex-Inara
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: mobile-friendly header — move backend/display into settings panel

Browse Source 
Header trimmed to 4 buttons (Sessions, Files, ⚙, ?). Backend toggle,
font size, and theme moved into the ⚙ settings panel under new Backend
and Display sections. Panels use responsive widths to avoid overflow on
small screens. Mobile breakpoints tighten padding and hide subtitle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-17 23:03:55 -04:00
parent ce1561572a
commit 7b51e7cc44
4 changed files with 45 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cortex/static/app.js
View File

@@ -118,7 +118,7 @@
function setBackendUI(backend) {
primaryBackend = backend;
backendToggle.textContent = backend;
backendToggle.className = 'hdr-btn' + (backend === 'gemini' ? ' gemini' : '');
backendToggle.className = 'ctx-btn' + (backend === 'gemini' ? ' mem-on' : '');
}
backendToggle.addEventListener('click', async () => {

18
cortex/static/index.html
View File

@@ -28,10 +28,7 @@
</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="Context &amp; memory settings">⚙<span class="tier-badge">2</span></button>
<button id="backend-toggle" class="hdr-btn" title="Click to switch primary backend">claude</button>
<button id="font-size-btn" class="hdr-btn" title="Cycle font size">Aa</button>
<button id="theme-btn" class="hdr-btn" title="Toggle light/dark mode">☾</button>
<button id="ctx-open-btn" class="hdr-btn" title="Settings">⚙<span class="tier-badge">2</span></button>
<button id="help-btn" class="hdr-btn" title="Help &amp; reference">?</button>
<div id="sessions-panel"></div>
@@ -65,6 +62,19 @@
</div>
<div id="ctx-distill-status"></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>

27
cortex/static/style.css
View File

@@ -142,7 +142,6 @@
.hdr-btn:hover { border-color: var(--muted); color: var(--text); }
#backend-toggle.gemini { border-color: var(--success-dim); color: var(--success); }
#sessions-btn { margin-left: auto; }
/* Sessions panel */
@@ -150,8 +149,8 @@
display: none;
position: absolute;
top: calc(100% + 4px);
right: 20px;
width: 300px;
right: 12px;
width: min(300px, calc(100vw - 24px));
max-height: 340px;
overflow-y: auto;
background: var(--surface);
@@ -710,8 +709,8 @@
display: none;
position: absolute;
top: calc(100% + 4px);
right: 20px;
width: 280px;
right: 12px;
width: min(280px, calc(100vw - 24px));
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
@@ -767,10 +766,6 @@
#ctx-distill-status.show { opacity: 1; }
#ctx-distill-status.err { color: var(--error-text); }
/* Theme toggle + font size */
#theme-btn { font-size: 0.85rem; padding: 5px 8px; }
#font-size-btn { min-width: 32px; text-align: center; }
/* Ctx header button — shows current tier as a dim superscript */
#ctx-open-btn .tier-badge {
font-size: 0.6em;
@@ -902,3 +897,17 @@
color: var(--accent);
font-weight: 600;
}
/* ── Mobile responsive ───────────────────────────────────── */
@media (max-width: 520px) {
header { padding: 8px 12px; gap: 8px; }
header .subtitle { display: none; }
#messages { padding: 12px; }
#input-area { padding: 10px 12px; }
}
@media (max-width: 380px) {
header .name { font-size: 1rem; }
.header-emoji { font-size: 1.3rem; }
.hdr-btn { padding: 5px 8px; }
}

17
inara/HELP.md
View File

@@ -12,12 +12,19 @@
|---|---|
| **Sessions** | Open the sessions panel — list, resume, or start sessions |
| **Files** | Open the identity file editor (SOUL, MEMORY, etc.) |
| **⚙ N** | Open the Context & Memory panel (N = current tier) |
| **claude / gemini** | Active backend — click to toggle primary |
| **Aa / A+ / A−** | Cycle font size: normal (16px) → large (18px) → small (14px) |
| **☾ / ☀** | Toggle dark / light theme |
| **⚙ N** | Open the Settings panel (N = current context tier) |
| **?** | Open this help panel |
The **⚙ Settings** panel contains all configuration options:
| Section | Controls |
|---|---|
| **Context Tier** | T1 – T4 context depth |
| **Memory Layers** | Toggle Long / Mid / Short memory on/off |
| **Distill Memory** | Manually trigger short / mid / long / all distillation |
| **Backend** | Active LLM backend — click to toggle claude ↔ gemini |
| **Display** | Aa/A+/A− font size cycle · ☾/☀ theme toggle |
All header settings (theme, font size, tier, memory layers) persist in `localStorage` across page refreshes.
---
@@ -58,7 +65,7 @@ Notes are injected into a session without triggering an LLM response.
## Backends
- **Claude CLI** and **Gemini CLI** are both available. One is primary, the other is fallback.
- Click the backend button (`claude` or `gemini`) to switch which is primary.
- Click **⚙** → **Backend** to toggle between `claude` and `gemini` as the primary.
- If the primary fails or times out, the fallback is used automatically. A **⚡** notice appears in the chat when this happens.
- Timeouts: Claude 60s, Gemini 120s.