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

fix: context panel polish — height buttons, amber theme vars, label cleanup

Browse Source 
- Replace height <select> with S/M/L buttons (data-height); active class shows
  current setting; clicking an empty textarea briefly expands it as a preview
  so the effect is immediately visible, then auto-shrinks back
- Add --amber/--amber-border/--amber-glow CSS vars to all 4 theme blocks:
  dark=#f59e0b (bright), light=#b45309 (deep, 4:1 contrast on light bg)
  Fixes local-on/tools-toggle/backend-hint being nearly invisible in light mode
- Rename "Backend" ctx-section to "Role" (matches the role-cycle toggle)
- Update backend-toggle title from stale "primary backend" to "Active role"
- Capitalize distill buttons (Short/Mid/Long/All) to match Memory layer style
- Improve all ctx-panel button titles for clarity

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-04-28 20:53:16 -04:00
parent e2a61bb78d
commit 4159f470d6
3 changed files with 52 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
cortex/static/app.js
View File

@@ -6,7 +6,6 @@
const backendToggle = document.getElementById('backend-toggle');
const sessionsBtn = document.getElementById('sessions-btn');
const sessionsPanel = document.getElementById('sessions-panel');
const heightSel = document.getElementById('height-sel');
const enterToggle = document.getElementById('enter-toggle');
const stopBtn = document.getElementById('stop');
const mode_select_btn_el = document.getElementById('mode-select-btn');
@@ -137,17 +136,33 @@
let maxHeight = parseInt(localStorage.getItem('maxHeight') || '120');
function syncHeight() {
inputEl.style.transition = '';
inputEl.style.height = 'auto';
inputEl.style.maxHeight = maxHeight + 'px';
const sh = inputEl.scrollHeight;
inputEl.style.height = Math.min(sh, maxHeight) + 'px';
}
heightSel.value = String(maxHeight);
heightSel.addEventListener('change', () => {
maxHeight = parseInt(heightSel.value);
localStorage.setItem('maxHeight', maxHeight);
syncHeight();
function updateHeightUI() {
document.querySelectorAll('.ctx-btn[data-height]').forEach(btn => {
btn.classList.toggle('active', parseInt(btn.dataset.height) === maxHeight);
});
}
document.querySelectorAll('.ctx-btn[data-height]').forEach(btn => {
btn.addEventListener('click', () => {
maxHeight = parseInt(btn.dataset.height);
localStorage.setItem('maxHeight', maxHeight);
updateHeightUI();
// Brief expand preview so the effect is immediately visible on an empty textarea
if (!inputEl.value.trim()) {
inputEl.style.transition = 'height 0.2s ease';
inputEl.style.height = maxHeight + 'px';
setTimeout(syncHeight, 600);
} else {
syncHeight();
}
});
});
// ── Input mode — dropdown select with MRU ordering ──────────
@@ -1662,6 +1677,7 @@
updateTierUI();
updateMemUI();
updateHeightUI();
updateToolsToggleUI();
update_mode_ui();