feat: resizable detail panel

src/frontend/app.js

@@ -1636,6 +1636,41 @@ function closeDetail() {
   if (overlay) overlay.classList.remove('open');
 }
 
+// ── Detail panel resize ───────────────────────────────────────
+(function initDetailResize() {
+  var handle = document.getElementById('detailResizeHandle');
+  var panel = document.getElementById('detailPanel');
+  if (!handle || !panel) return;
+
+  var startX, startW;
+  handle.addEventListener('mousedown', function(e) {
+    e.preventDefault();
+    startX = e.clientX;
+    startW = panel.offsetWidth;
+    panel.classList.add('resizing');
+    handle.classList.add('active');
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+  function onMove(e) {
+    var newW = startW + (startX - e.clientX);
+    newW = Math.max(400, Math.min(newW, window.innerWidth * 0.9));
+    panel.style.width = newW + 'px';
+    panel.style.right = '0';
+  }
+  function onUp() {
+    panel.classList.remove('resizing');
+    handle.classList.remove('active');
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    localStorage.setItem('codedash-detail-width', panel.style.width);
+  }
+
+  // Restore saved width
+  var saved = localStorage.getItem('codedash-detail-width');
+  if (saved) panel.style.width = saved;
+})();
+
 async function loadGitCommits(project, fromTs, toTs) {
   try {
     var resp = await fetch('/api/git-commits?project=' + encodeURIComponent(project) + '&from=' + fromTs + '&to=' + toTs);

src/frontend/index.html

@@ -131,6 +131,7 @@
 
 <div class="overlay" id="overlay" onclick="closeDetail()"></div>
 <div class="detail-panel" id="detailPanel">
+    <div class="detail-resize-handle" id="detailResizeHandle"></div>
     <div class="detail-header">
         <strong id="detailTitle">Session Detail</strong>
         <button class="detail-close" onclick="closeDetail()">&times;</button>

src/frontend/styles.css

@@ -729,17 +729,36 @@ body {
 .detail-panel {
     position: fixed;
     top: 0;
-    right: -700px;
+    right: 0;
     width: 700px;
+    min-width: 400px;
+    max-width: 90vw;
     height: 100vh;
     background: var(--bg-secondary);
     border-left: 1px solid var(--border);
-    transition: right 0.25s ease;
+    transform: translateX(100%);
+    transition: transform 0.25s ease;
     display: flex;
     flex-direction: column;
     z-index: 100;
 }
-.detail-panel.open { right: 0; }
+.detail-panel.open { transform: translateX(0); }
+.detail-panel.resizing { transition: none; }
+
+.detail-resize-handle {
+    position: absolute;
+    left: -3px;
+    top: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 101;
+}
+.detail-resize-handle:hover,
+.detail-resize-handle.active {
+    background: var(--accent-blue);
+    opacity: 0.5;
+}
 
 .detail-header {
     padding: 16px 20px;