← back to Agent Cabinet

Activity viewer: draggable middle splitter to resize the two columns (clamped 260–720px, persisted to localStorage, double-click resets to 380px)

be0315fd8860116ac32929c018222e164f91c052 · 2026-06-16 18:08:13 -0700 · SteveStudio2

Files touched

• M activity.html

Diff

commit be0315fd8860116ac32929c018222e164f91c052
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue Jun 16 18:08:13 2026 -0700

    Activity viewer: draggable middle splitter to resize the two columns (clamped 260–720px, persisted to localStorage, double-click resets to 380px)
---
 activity.html | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/activity.html b/activity.html
index d487ca1..6947808 100644
--- a/activity.html
+++ b/activity.html
@@ -17,10 +17,15 @@
   .chip .dot{width:9px;height:9px;border-radius:50%}
   .chip .n{font:11px ui-monospace,monospace;opacity:.8}
   main{max-width:1340px;margin:0 auto;padding:18px 28px 70px}
-  .cols{display:grid;grid-template-columns:minmax(340px,400px) 1fr;gap:26px;align-items:start}
-  .col-up{position:sticky;top:132px;max-height:calc(100vh - 150px);overflow:auto}
+  .cols{display:grid;grid-template-columns:var(--col-w,380px) 14px minmax(0,1fr);align-items:start}
+  .col-up{position:sticky;top:132px;max-height:calc(100vh - 150px);overflow:auto;padding-right:6px}
+  .col-feed{min-width:0}
+  .col-resize{align-self:stretch;min-height:340px;position:relative;cursor:col-resize;touch-action:none}
+  .col-resize::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--line)}
+  .col-resize:hover::before,.col-resize.drag::before{background:#34f4ce;width:3px}
+  .col-resize::after{content:"⋮⋮";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);color:var(--dim);font-size:11px;letter-spacing:-3px;writing-mode:vertical-rl}
   .col-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:6px 2px 0}
-  @media(max-width:900px){.cols{grid-template-columns:1fr}.col-up{position:static;max-height:none;overflow:visible}}
+  @media(max-width:900px){.cols{grid-template-columns:1fr}.col-up{position:static;max-height:none;overflow:visible}.col-resize{display:none}}
   .day{margin:22px 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);position:sticky;top:128px;background:#0b0e14;padding:4px 0;z-index:3}
   .ev{display:grid;grid-template-columns:64px 92px 1fr;gap:12px;align-items:baseline;padding:8px 10px;border-radius:9px;border-left:3px solid var(--c,#2b3650);background:#0e1320;margin-bottom:5px}
   .ev:hover{background:#121829}
@@ -52,6 +57,7 @@
 </header>
 <main class="cols">
   <aside class="col-up"><section id="upcoming"></section></aside>
+  <div class="col-resize" id="splitter" title="Drag to resize · double-click to reset"></div>
   <div class="col-feed"><div class="col-head">Recent activity</div><div id="feed"><div class="empty">Loading activity…</div></div></div>
 </main>
 <script>
@@ -115,6 +121,19 @@ async function loadSchedule(){
   if(cont.length) h+='<div class="up-cont"><b style="color:#8a94a6">Continuous</b>'+cont.map(c=>`<span class="cc">${esc(c.label)} · ${esc(c.cadence)}</span>`).join('')+'</div>';
   document.getElementById('upcoming').innerHTML=h;
 }
+// draggable splitter — resize the two columns (persisted; double-click resets)
+(function(){
+  const cols=document.querySelector('.cols'), sp=document.getElementById('splitter'), KEY='cabinet-activity-colw';
+  const MIN=260, MAX=720;
+  const saved=parseInt(localStorage.getItem(KEY)||'',10);
+  if(saved>=MIN && saved<=MAX) cols.style.setProperty('--col-w', saved+'px');
+  let dragging=false;
+  function move(x){ const r=cols.getBoundingClientRect(); let w=Math.max(MIN,Math.min(MAX, x-r.left)); cols.style.setProperty('--col-w', w+'px'); return w; }
+  sp.addEventListener('mousedown', e=>{ dragging=true; sp.classList.add('drag'); document.body.style.userSelect='none'; e.preventDefault(); });
+  window.addEventListener('mousemove', e=>{ if(dragging) move(e.clientX); });
+  window.addEventListener('mouseup', ()=>{ if(!dragging) return; dragging=false; sp.classList.remove('drag'); document.body.style.userSelect=''; const w=parseInt(cols.style.getPropertyValue('--col-w'),10); if(w) localStorage.setItem(KEY,w); });
+  sp.addEventListener('dblclick', ()=>{ cols.style.setProperty('--col-w','380px'); localStorage.setItem(KEY,'380'); });
+})();
 load(); loadSchedule(); setInterval(()=>{ load(); loadSchedule(); }, 30000);
 </script>
 </body></html>

← 0dfcebe Activity viewer: side-by-side two columns — sticky Upcoming/  ·  back to Agent Cabinet  ·  Activity viewer: click any process/event for details — detai 9727194 →