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

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