Convert task detail panel to centered modal

automaton/dashboard/html/dashboard.js

@@ -180,10 +180,10 @@ function renderTaskCard(task) {
 }
 
 function renderDetail(task) {
-    const detail = document.getElementById('detail-panel');
+    const overlay = document.getElementById('detail-overlay');
     const title = document.getElementById('detail-title');
     const content = document.getElementById('detail-content');
-    detail.classList.add('open');
+    overlay.classList.add('open');
     const statusClass = task.state === 'done' ? 'done' : task.state === 'blocked' ? 'blocked' : 'in_progress';
     const statusText = task.state === 'done' ? '✅ PASS' : task.state === 'blocked' ? '❌ BLOCKED' : '🔄 IN PROGRESS';
     const phaseGroup = getPhaseGroupForState(task.state);
@@ -222,7 +222,7 @@ function renderDetail(task) {
 }
 
 function closeDetail() {
-    document.getElementById('detail-panel').classList.remove('open');
+    document.getElementById('detail-overlay').classList.remove('open');
     state.selectedTask = null;
 }
 
@@ -431,6 +431,7 @@ function setupUI() {
     document.getElementById('btn-help').addEventListener('click', () => { document.getElementById('help-modal').classList.toggle('open'); });
     document.getElementById('btn-close-help').addEventListener('click', () => { document.getElementById('help-modal').classList.remove('open'); });
     document.getElementById('btn-close-detail').addEventListener('click', closeDetail);
+    document.getElementById('detail-overlay').addEventListener('click', (e) => { if (e.target === e.currentTarget) closeDetail(); });
     document.getElementById('filter-phase').addEventListener('change', (e) => { state.filterPhase = e.target.value; renderCurrentView(); });
     document.getElementById('filter-review').addEventListener('change', (e) => { state.filterReview = e.target.value; renderCurrentView(); });
     document.getElementById('filter-wave').addEventListener('change', (e) => { state.filterWave = e.target.value; renderCurrentView(); });

automaton/dashboard/html/index.html

@@ -84,13 +84,15 @@
             </div>
         </main>
 
-        <div class="detail-panel" id="detail-panel">
+        <div class="modal-overlay" id="detail-overlay">
-            <div class="detail-header">
+            <div class="modal-panel" id="detail-panel">
-                <h3 id="detail-title">Select a task</h3>
+                <div class="detail-header">
-                <button class="btn btn-close" id="btn-close-detail">✕</button>
+                    <h3 id="detail-title">Select a task</h3>
-            </div>
+                    <button class="btn btn-close" id="btn-close-detail">✕</button>
-            <div class="detail-content" id="detail-content">
+                </div>
-                <p class="detail-empty">Click on a task to view details</p>
+                <div class="detail-content" id="detail-content">
+                    <p class="detail-empty">Click on a task to view details</p>
+                </div>
             </div>
         </div>
 

automaton/dashboard/html/styles.css

@@ -137,15 +137,21 @@ body {
 .subtask-status.pass { color: var(--success); }
 .subtask-status.fail { color: var(--error); }
 .subtask-status.incomplete { color: var(--text-muted); }
-.detail-panel {
+.modal-overlay {
-    position: fixed; right: 0; top: 0; bottom: 0; width: 380px;
+    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
-    background: var(--bg-secondary); border-left: 1px solid var(--border-color);
+    z-index: 100; display: none; align-items: center; justify-content: center;
-    z-index: 100; display: none; flex-direction: column; overflow-y: auto;
+    backdrop-filter: blur(2px);
 }
-.detail-panel.open { display: flex; }
+.modal-overlay.open { display: flex; }
-.detail-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
+.modal-panel {
-.detail-header h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); }
+    background: var(--bg-secondary); border: 1px solid var(--border-color);
-.detail-content { padding: 12px 16px; flex: 1; }
+    border-radius: 12px; width: 90%; max-width: 720px; max-height: 85vh;
+    display: flex; flex-direction: column; overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+}
+.detail-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
+.detail-header h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
+.detail-content { padding: 16px 20px; overflow-y: auto; flex: 1; }
 .detail-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }
 .detail-section { margin-bottom: 16px; }
 .detail-section h4 { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }