From 4159f470d63815e55a789e9188e0b62d1df50627 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 28 Apr 2026 20:53:16 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20context=20panel=20polish=20=E2=80=94=20h?=
 =?UTF-8?q?eight=20buttons,=20amber=20theme=20vars,=20label=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 cortex/static/app.js     | 28 ++++++++++++++++++++++------
 cortex/static/index.html | 26 ++++++++++++--------------
 cortex/static/style.css  | 24 ++++++++++++++++++------
 3 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/cortex/static/app.js b/cortex/static/app.js
index fdd0931..9521eef 100644
--- a/cortex/static/app.js
+++ b/cortex/static/app.js
@@ -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();
 
diff --git a/cortex/static/index.html b/cortex/static/index.html
index 062f2b8..1ebbbc3 100644
--- a/cortex/static/index.html
+++ b/cortex/static/index.html
@@ -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>
diff --git a/cortex/static/style.css b/cortex/static/style.css
index 5ccd1c9..e7d29c6 100644
--- a/cortex/static/style.css
+++ b/cortex/static/style.css
@@ -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;
         }