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
2026-04-28 20:53:16 -04:00
parent e2a61bb78d
commit 4159f470d6
3 changed files with 52 additions and 26 deletions

View File

@@ -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;
}