fix: context panel polish — height buttons, amber theme vars, label cleanup
- 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
@@ -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();
|
||||
|
||||
|
||||
@@ -90,32 +90,30 @@
|
||||
<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>
|
||||
<button class="ctx-btn" id="distill-short-btn" title="Roll today's sessions → MEMORY_SHORT.md (fast, no LLM)">Short</button>
|
||||
<button class="ctx-btn" id="distill-mid-btn" title="Summarize SHORT → MID memory (uses LLM)">Mid</button>
|
||||
<button class="ctx-btn" id="distill-long-btn" title="Integrate MID → LONG memory (uses LLM)">Long</button>
|
||||
<button class="ctx-btn" id="distill-all-btn" title="Run Short → Mid → Long 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-section-title">Role</div>
|
||||
<div class="ctx-row">
|
||||
<button id="backend-toggle" class="ctx-btn" title="Click to switch primary backend">claude</button>
|
||||
<button id="backend-toggle" class="ctx-btn" title="Active role — click to cycle">chat</button>
|
||||
</div>
|
||||
<div id="backend-model-hint"></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>
|
||||
<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 theme">☾</button>
|
||||
<button class="ctx-btn" data-height="120" title="Compact — input grows up to ~4 lines">S</button>
|
||||
<button class="ctx-btn" data-height="240" title="Medium — input grows up to ~8 lines">M</button>
|
||||
<button class="ctx-btn" data-height="480" title="Large — input grows up to ~16 lines">L</button>
|
||||
<button id="enter-toggle" class="ctx-btn" title="Toggle send shortcut: Ctrl+Enter ↔ Enter">⌃↵</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,6 +21,9 @@
|
||||
--pre-bg: rgba(0,0,0,0.35);
|
||||
--success: #6abf6a;
|
||||
--success-dim: #2a4a2a;
|
||||
--amber: #f59e0b;
|
||||
--amber-border: #92400e;
|
||||
--amber-glow: rgba(245,158,11,0.35);
|
||||
}
|
||||
|
||||
/* ── Light theme ─────────────────────────────────────────── */
|
||||
@@ -45,6 +48,9 @@
|
||||
--pre-bg: rgba(0,0,0,0.07);
|
||||
--success: #1e6e1e;
|
||||
--success-dim: #5aaa5a;
|
||||
--amber: #b45309;
|
||||
--amber-border: #92400e;
|
||||
--amber-glow: rgba(180,83,9,0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,6 +75,9 @@
|
||||
--pre-bg: rgba(0,0,0,0.35);
|
||||
--success: #6abf6a;
|
||||
--success-dim: #2a4a2a;
|
||||
--amber: #f59e0b;
|
||||
--amber-border: #92400e;
|
||||
--amber-glow: rgba(245,158,11,0.35);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
@@ -91,6 +100,9 @@
|
||||
--pre-bg: rgba(0,0,0,0.07);
|
||||
--success: #1e6e1e;
|
||||
--success-dim: #5aaa5a;
|
||||
--amber: #b45309;
|
||||
--amber-border: #92400e;
|
||||
--amber-glow: rgba(180,83,9,0.25);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -729,11 +741,11 @@
|
||||
}
|
||||
#tools-toggle:hover { color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.2); }
|
||||
#tools-toggle.local-on {
|
||||
color: #f59e0b;
|
||||
border-color: #92400e;
|
||||
box-shadow: 0 0 6px rgba(245,158,11,0.35);
|
||||
color: var(--amber);
|
||||
border-color: var(--amber-border);
|
||||
box-shadow: 0 0 6px var(--amber-glow);
|
||||
}
|
||||
#tools-toggle.local-on:hover { box-shadow: 0 0 10px rgba(245,158,11,0.5); }
|
||||
#tools-toggle.local-on:hover { box-shadow: 0 0 10px var(--amber-glow); }
|
||||
|
||||
#input {
|
||||
flex: 1;
|
||||
@@ -1196,9 +1208,9 @@
|
||||
.ctx-btn:hover { color: var(--text); border-color: var(--muted); }
|
||||
.ctx-btn.active { color: var(--accent); border-color: var(--accent); }
|
||||
.ctx-btn.mem-on { color: var(--success); border-color: var(--success-dim); }
|
||||
.ctx-btn.local-on { color: #f59e0b; border-color: #92400e; }
|
||||
.ctx-btn.local-on { color: var(--amber); border-color: var(--amber-border); }
|
||||
#backend-model-hint {
|
||||
font-size: 0.68rem; color: #f59e0b; opacity: 0.8;
|
||||
font-size: 0.68rem; color: var(--amber); opacity: 0.9;
|
||||
margin-top: 4px; word-break: break-all; line-height: 1.3;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user