neohive 6.0.2 → 6.0.3

package/dashboard.html

@@ -4,7 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Neohive</title>
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect rx='20' width='100' height='100' fill='%230d1117'/><path d='M20 30 Q20 20 30 20 H70 Q80 20 80 30 V55 Q80 65 70 65 H55 L40 80 V65 H30 Q20 65 20 55Z' fill='%2358a6ff'/><circle cx='38' cy='42' r='5' fill='%230d1117'/><circle cx='55' cy='42' r='5' fill='%230d1117'/></svg>">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect rx='20' width='100' height='100' fill='%230d1117'/><path d='M20 30 Q20 20 30 20 H70 Q80 20 80 30 V55 Q80 65 70 65 H55 L40 80 V65 H30 Q20 65 20 55Z' fill='%23f59e0b'/><circle cx='38' cy='42' r='5' fill='%230d1117'/><circle cx='55' cy='42' r='5' fill='%230d1117'/></svg>">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -12,64 +12,69 @@
   * { margin: 0; padding: 0; box-sizing: border-box; }
 
   :root {
-    --bg: #080b12;
-    --surface: #0f1318;
-    --surface-2: #161c24;
-    --surface-3: #1e2530;
-    --border: rgba(255, 255, 255, 0.06);
-    --border-light: rgba(255, 255, 255, 0.1);
-    --text: #f0f4f8;
-    --text-dim: #94a3b8;
-    --text-muted: #5a6578;
-    --accent: #6c8aff;
-    --accent-dim: rgba(108, 138, 255, 0.12);
-    --accent-glow: rgba(108, 138, 255, 0.25);
-    --green: #34d399;
-    --green-dim: rgba(52, 211, 153, 0.12);
-    --red: #f87171;
-    --red-dim: rgba(248, 113, 113, 0.12);
-    --orange: #fbbf24;
-    --orange-dim: rgba(251, 191, 36, 0.12);
-    --purple: #c084fc;
-    --purple-dim: rgba(192, 132, 252, 0.12);
-    --yellow: #fbbf24;
-    --sidebar-w: 280px;
-    --header-h: 56px;
-    --glow: 0 0 20px rgba(108, 138, 255, 0.08);
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
-    --gradient-accent: linear-gradient(135deg, #6c8aff, #a78bfa);
-    --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
+    --bg: #09090b;
+    --surface: #111113;
+    --surface-2: #1a1a1f;
+    --surface-3: #232329;
+    --border: rgba(255, 255, 255, 0.07);
+    --border-light: rgba(255, 255, 255, 0.12);
+    --text: #ececf1;
+    --text-dim: #8e8ea0;
+    --text-muted: #56566a;
+    --accent: #f59e0b;
+    --accent-dim: rgba(245, 158, 11, 0.12);
+    --accent-glow: rgba(245, 158, 11, 0.2);
+    --green: #22c55e;
+    --green-dim: rgba(34, 197, 94, 0.12);
+    --red: #ef4444;
+    --red-dim: rgba(239, 68, 68, 0.12);
+    --orange: #f97316;
+    --orange-dim: rgba(249, 115, 22, 0.12);
+    --purple: #a78bfa;
+    --purple-dim: rgba(167, 139, 250, 0.12);
+    --yellow: #eab308;
+    --text-xs: 12px;
+    --text-sm: 13px;
+    --text-base: 14px;
+    --text-lg: 16px;
+    --text-xl: 24px;
+    --sidebar-w: 220px;
+    --header-h: 48px;
+    --glow: 0 0 24px rgba(245, 158, 11, 0.06);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
+    --gradient-accent: linear-gradient(135deg, #f59e0b, #f97316);
+    --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
   }
 
   [data-theme="light"] {
-    --bg: #f0f2f5;
+    --bg: #fafaf9;
     --surface: #ffffff;
-    --surface-2: #f7f8fa;
-    --surface-3: #eef0f4;
+    --surface-2: #f5f5f4;
+    --surface-3: #e7e5e4;
     --border: rgba(0, 0, 0, 0.08);
     --border-light: rgba(0, 0, 0, 0.12);
-    --text: #111827;
-    --text-dim: #4b5563;
-    --text-muted: #9ca3af;
-    --accent: #4f6eff;
-    --accent-dim: rgba(79, 110, 255, 0.08);
-    --accent-glow: rgba(79, 110, 255, 0.15);
-    --green: #059669;
-    --green-dim: rgba(5, 150, 105, 0.08);
+    --text: #0c0a09;
+    --text-dim: #57534e;
+    --text-muted: #a8a29e;
+    --accent: #d97706;
+    --accent-dim: rgba(217, 119, 6, 0.08);
+    --accent-glow: rgba(217, 119, 6, 0.12);
+    --green: #16a34a;
+    --green-dim: rgba(22, 163, 74, 0.08);
     --red: #dc2626;
     --red-dim: rgba(220, 38, 38, 0.08);
-    --orange: #d97706;
-    --orange-dim: rgba(217, 119, 6, 0.08);
+    --orange: #ea580c;
+    --orange-dim: rgba(234, 88, 12, 0.08);
     --purple: #7c3aed;
     --purple-dim: rgba(124, 58, 237, 0.08);
-    --yellow: #d97706;
-    --glow: 0 0 20px rgba(79, 110, 255, 0.05);
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
-    --gradient-accent: linear-gradient(135deg, #4f6eff, #7c3aed);
+    --yellow: #ca8a04;
+    --glow: 0 0 20px rgba(217, 119, 6, 0.05);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
+    --gradient-accent: linear-gradient(135deg, #d97706, #ea580c);
     --gradient-surface: linear-gradient(180deg, rgba(0,0,0,0.01) 0%, transparent 100%);
   }
 
@@ -112,12 +117,10 @@
 
   /* ===== HEADER ===== */
   .header {
-    background: rgba(15, 19, 24, 0.8);
-    backdrop-filter: blur(16px) saturate(180%);
-    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    background: var(--bg);
     border-bottom: 1px solid var(--border);
-    padding: 0 20px;
-    height: var(--header-h);
+    padding: 0 16px;
+    height: 48px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -129,64 +132,53 @@
   }
 
   [data-theme="light"] .header {
-    background: rgba(255, 255, 255, 0.85);
+    background: var(--bg);
   }
 
   .header-left {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 12px;
   }
 
   .logo {
-    font-size: 18px;
-    font-weight: 800;
-    background: var(--gradient-accent);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--text);
     white-space: nowrap;
     letter-spacing: -0.3px;
   }
 
   .header-stats {
-    display: flex;
-    gap: 16px;
-    align-items: center;
+    display: none;
   }
 
   .h-stat {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    font-size: 12px;
-    color: var(--text-dim);
+    display: none;
   }
 
   .h-stat-val {
-    font-weight: 700;
-    color: var(--accent);
-    font-size: 13px;
+    display: none;
   }
 
   .header-actions {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 4px;
   }
 
   .connection {
     display: flex;
     align-items: center;
     gap: 5px;
-    font-size: 11px;
+    font-size: 12px;
     color: var(--text-dim);
-    margin-right: 8px;
+    margin-right: 4px;
   }
 
   .conn-dot {
-    width: 6px;
-    height: 6px;
+    width: 7px;
+    height: 7px;
     border-radius: 50%;
     background: var(--green);
     box-shadow: 0 0 6px var(--green);
@@ -205,7 +197,7 @@
     padding: 6px 12px;
     border-radius: 8px;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 500;
     transition: all 0.2s ease;
     white-space: nowrap;
@@ -246,7 +238,13 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    transition: transform 0.25s ease;
+    transition: width 0.25s ease, min-width 0.25s ease, margin-left 0.25s ease;
+  }
+  .sidebar.collapsed {
+    width: 0;
+    min-width: 0;
+    border-right: none;
+    overflow: hidden;
   }
 
   .sidebar-scroll {
@@ -260,7 +258,7 @@
   }
 
   .sidebar-title {
-    font-size: 10px;
+    font-size: 11px;
     font-weight: 700;
     color: var(--text-muted);
     text-transform: uppercase;
@@ -296,7 +294,7 @@
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 4px 8px;
-    font-size: 11px;
+    font-size: 12px;
     color: var(--text);
     outline: none;
     min-width: 0;
@@ -307,7 +305,7 @@
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 4px 4px;
-    font-size: 10px;
+    font-size: 11px;
     color: var(--text);
     outline: none;
     cursor: pointer;
@@ -325,7 +323,7 @@
     padding: 4px 6px;
     cursor: pointer;
     border-radius: 6px;
-    font-size: 10px;
+    font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -335,14 +333,14 @@
   .role-group-header:hover { background: var(--surface-2); }
   .role-group-header .role-group-arrow {
     transition: transform 0.2s;
-    font-size: 8px;
+    font-size: 9px;
   }
   .role-group-header .role-group-arrow.collapsed { transform: rotate(-90deg); }
   .role-group-header .role-group-count {
     background: var(--surface-2);
     padding: 1px 6px;
     border-radius: 8px;
-    font-size: 9px;
+    font-size: 10px;
     color: var(--text-dim);
   }
   .role-group-body.collapsed { display: none; }
@@ -352,20 +350,20 @@
     background: var(--surface-2);
     background-image: var(--gradient-surface);
     border: 1px solid var(--border);
-    border-radius: 10px;
-    padding: 10px 12px;
-    margin-bottom: 6px;
+    border-radius: 8px;
+    padding: 6px 10px;
+    margin-bottom: 4px;
     transition: all 0.25s ease;
+    cursor: pointer;
   }
 
   .agent-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-sm); }
 
-  .agent-card.sleeping {
-    border-color: var(--orange);
+  .agent-card.sleeping, .agent-card.idle {
     border-left: 3px solid var(--orange);
   }
 
-  .agent-card.dead {
+  .agent-card.dead, .agent-card.offline {
     opacity: 0.5;
   }
 
@@ -373,142 +371,50 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-bottom: 6px;
   }
 
   .agent-avatar {
-    width: 28px;
-    height: 28px;
+    width: 26px;
+    height: 26px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
-    font-size: 12px;
+    font-size: 11px;
     color: #fff;
     flex-shrink: 0;
   }
 
   .agent-info { flex: 1; min-width: 0; }
 
-  .agent-name {
-    font-weight: 600;
-    font-size: 13px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
+  .agent-status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
   }
+  .agent-status-dot.active, .agent-status-dot.working { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
+  .agent-status-dot.listening { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; animation: pulse 2s infinite; }
+  .agent-status-dot.sleeping, .agent-status-dot.idle { background: #f59e0b; animation: pulse 2s infinite; }
+  .agent-status-dot.dead, .agent-status-dot.offline { background: #6b7280; }
 
-  .agent-badge {
-    font-size: 9px;
-    padding: 1px 5px;
-    border-radius: 6px;
+  .agent-name {
     font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.3px;
-  }
-
-  .agent-badge.active { background: var(--green-dim); color: var(--green); }
-  .agent-badge.sleeping { background: var(--orange-dim); color: var(--orange); }
-  .agent-badge.dead { background: var(--red-dim); color: var(--red); }
-
-  .agent-status-intent {
-    font-size: 11px;
-    color: var(--text-dim);
-    padding: 3px 0;
+    font-size: 13px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-style: italic;
-  }
-
-  .agent-status-intent::before {
-    content: '\1F4AD';
-    margin-right: 4px;
-    font-style: normal;
-  }
-
-  .listen-badge {
-    font-size: 9px;
-    padding: 2px 6px;
-    border-radius: 6px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.3px;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    margin-top: 5px;
-  }
-
-  .listen-badge.listening {
-    background: var(--green-dim);
-    color: var(--green);
-    border: 1px solid rgba(63, 185, 80, 0.3);
-  }
-
-  .listen-badge.busy {
-    background: var(--orange-dim);
-    color: var(--yellow);
-    border: 1px solid rgba(227, 179, 65, 0.3);
-  }
-
-  .listen-badge.not-listening {
-    background: var(--red-dim);
-    color: var(--red);
-    border: 1px solid rgba(248, 81, 73, 0.3);
-    animation: pulseAlert 1.5s infinite;
-  }
-
-  .listen-badge.offline {
-    background: var(--surface-3);
-    color: var(--text-muted);
-    border: 1px solid var(--border);
-  }
-
-  .listen-dot {
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-    display: inline-block;
-  }
-
-  .listen-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
-  .listen-dot.off { background: var(--red); }
-
-  @keyframes pulseAlert {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.6; }
   }
 
-  .agent-meta {
-    font-size: 10px;
+  .agent-subtitle {
+    font-size: 12px;
     color: var(--text-muted);
-    display: flex;
-    gap: 8px;
-  }
-
-  .agent-activity {
-    font-size: 10px;
-    color: var(--text-dim);
-    margin-top: 4px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .agent-activity-icon {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    flex-shrink: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  .agent-activity-icon.active { background: var(--green); box-shadow: 0 0 4px var(--green); }
-  .agent-activity-icon.sleeping { background: var(--orange); animation: pulse 2s infinite; }
-  .agent-activity-icon.dead { background: var(--red); }
-
   .nudge-btn {
     background: var(--orange-dim);
     color: var(--orange);
@@ -908,15 +814,15 @@
     flex-wrap: wrap;
   }
 
-  .msg-from { font-weight: 600; font-size: 13px; }
-  .msg-arrow { color: var(--text-muted); font-size: 11px; }
-  .msg-to { font-size: 12px; color: var(--text-dim); }
-  .msg-time { font-size: 10px; color: var(--text-muted); }
+  .msg-from { font-weight: 600; font-size: 14px; }
+  .msg-arrow { color: var(--text-muted); font-size: 12px; }
+  .msg-to { font-size: 13px; color: var(--text-dim); }
+  .msg-time { font-size: 11px; color: var(--text-muted); }
 
   .badge-channel {
     background: var(--purple-dim);
     color: var(--purple);
-    font-size: 9px;
+    font-size: 10px;
     padding: 1px 5px;
     border-radius: 6px;
     font-weight: 600;
@@ -937,7 +843,7 @@
   .channel-filter-bar::-webkit-scrollbar { display: none; }
 
   .channel-tab {
-    font-size: 11px;
+    font-size: 12px;
     padding: 3px 10px;
     border-radius: 12px;
     border: 1px solid var(--border);
@@ -963,7 +869,7 @@
   }
 
   .badge {
-    font-size: 9px;
+    font-size: 10px;
     padding: 2px 6px;
     border-radius: 6px;
     font-weight: 600;
@@ -975,16 +881,16 @@
 
   /* ===== MARKDOWN CONTENT ===== */
   .msg-content {
-    font-size: 13px;
+    font-size: 14px;
     line-height: 1.6;
     word-break: break-word;
     color: var(--text);
   }
 
-  .msg-content h1 { font-size: 20px; font-weight: 700; margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
-  .msg-content h2 { font-size: 17px; font-weight: 700; margin: 10px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--border); }
-  .msg-content h3 { font-size: 15px; font-weight: 600; margin: 8px 0 4px; }
-  .msg-content h4 { font-size: 14px; font-weight: 600; margin: 6px 0 3px; }
+  .msg-content h1 { font-size: 22px; font-weight: 700; margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
+  .msg-content h2 { font-size: 18px; font-weight: 700; margin: 10px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--border); }
+  .msg-content h3 { font-size: 16px; font-weight: 600; margin: 8px 0 4px; }
+  .msg-content h4 { font-size: 15px; font-weight: 600; margin: 6px 0 3px; }
 
   .msg-content p { margin: 4px 0; }
 
@@ -1200,8 +1106,8 @@
   }
 
   .empty-icon { font-size: 40px; opacity: 0.2; }
-  .empty-text { font-size: 15px; }
-  .empty-sub { font-size: 12px; color: var(--text-muted); }
+  .empty-text { font-size: 16px; }
+  .empty-sub { font-size: 13px; color: var(--text-muted); }
 
   /* ===== MESSAGE FLASH ===== */
   .message-new { animation: flashIn 0.8s ease-out; }
@@ -1489,28 +1395,272 @@
     30% { opacity: 1; transform: translateY(-3px); }
   }
 
-  /* ===== VIEW TABS ===== */
-  .view-tabs {
+  /* ===== UNIFIED NAV SIDEBAR ===== */
+  .nav-sidebar {
+    width: 220px;
+    min-width: 220px;
+    background: var(--surface);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-shrink: 0;
+    transition: width 0.25s ease, min-width 0.25s ease;
+  }
+  .nav-sidebar.collapsed {
+    width: 56px;
+    min-width: 56px;
+  }
+  .nav-sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 16px 12px;
+    flex-shrink: 0;
+  }
+  .nav-sidebar-logo {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-dim);
+    white-space: nowrap;
+    overflow: hidden;
+    letter-spacing: 0.02em;
+  }
+  .nav-sidebar.collapsed .nav-sidebar-logo { display: none; }
+  .nav-sidebar-toggle {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 14px;
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: 6px;
+    transition: all 0.15s;
+    font-family: inherit;
+    flex-shrink: 0;
+  }
+  .nav-sidebar-toggle:hover { background: rgba(255,255,255,0.06); color: var(--text); }
+  .nav-sidebar.collapsed .nav-sidebar-header { justify-content: center; padding: 14px 8px 10px; }
+  .nav-sidebar.collapsed .nav-sidebar-toggle { margin: 0; }
+  .nav-sidebar-section { padding: 4px 6px; }
+  .nav-section-main { display: flex; flex-direction: column; gap: 1px; }
+  .nav-sidebar-divider { height: 1px; background: var(--border); margin: 10px 14px; flex-shrink: 0; }
+  .nav-sidebar-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-muted);
+    letter-spacing: 0.08em;
+    padding: 8px 14px 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-transform: uppercase;
+  }
+  .nav-sidebar.collapsed .nav-sidebar-label { display: none; }
+  .nav-sidebar.collapsed .nav-sidebar-project { display: none; }
+  .nav-sidebar.collapsed .nav-sidebar-agents #agents-list { display: none; }
+  .nav-sidebar-spacer { flex: 1; }
+  .nav-sidebar-agents { overflow-y: auto; min-height: 0; }
+
+  /* Nav items */
+  .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.15s;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 1px 6px;
+    position: relative;
+  }
+  .nav-item:hover { background: rgba(255,255,255,0.04); }
+  .nav-item.active { background: var(--accent-dim); }
+  .nav-item .nav-icon { line-height: 0; flex-shrink: 0; width: 20px; min-width: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
+  .nav-item .nav-icon svg { flex-shrink: 0; width: 16px; height: 16px; }
+  .nav-item.active .nav-icon { color: var(--accent); }
+  .nav-item:hover .nav-icon { color: var(--text); }
+  .nav-item .nav-text { font-size: 13px; font-weight: 500; color: var(--text-dim); }
+  .nav-item.active .nav-text { color: var(--accent); font-weight: 600; }
+  .nav-item:hover .nav-text { color: var(--text); }
+  .nav-sidebar.collapsed .nav-item { justify-content: center; padding: 10px 4px; margin: 0; }
+  .nav-sidebar.collapsed .nav-item .nav-text { display: none; }
+
+  /* ===== AGENT STATUS BAR ===== */
+  .agent-bar {
     display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
     background: var(--surface);
     border-bottom: 1px solid var(--border);
+    overflow-x: auto;
+    flex-shrink: 0;
+    min-height: 36px;
+  }
+  .agent-bar::-webkit-scrollbar { height: 0; }
+  .agent-pill {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 10px 3px 6px;
+    border-radius: 20px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    font-size: 13px;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.15s;
+    flex-shrink: 0;
   }
+  .agent-pill:hover { border-color: var(--accent); }
+  .agent-pill .status-dot {
+    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+  }
+  .agent-pill.online .status-dot, .agent-pill.working .status-dot { background: #22c55e; }
+  .agent-pill.listening .status-dot { background: #3b82f6; animation: pulse 2s infinite; }
+  .agent-pill.idle .status-dot { background: #f59e0b; }
+  .agent-pill.offline .status-dot { background: #6b7280; opacity: 0.6; }
+  .agent-pill .agent-name { font-weight: 600; color: var(--text); }
+  .agent-pill .agent-activity { color: var(--text-muted); font-size: 12px; }
+  .agent-pill.offline .agent-name { color: var(--text-muted); opacity: 0.6; }
 
-  .view-tab {
-    flex: 1;
-    text-align: center;
-    padding: 10px 8px;
-    font-size: 12px;
-    font-weight: 600;
+  /* ===== OVERVIEW PAGE ===== */
+  .overview-area { display: none; flex-direction: column; gap: 24px; padding: 28px 32px; overflow-y: auto; }
+  .overview-area.visible { display: flex; }
+
+  .overview-welcome {
+    margin-bottom: 4px;
+  }
+  .overview-welcome h2 {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 4px;
+    letter-spacing: -0.3px;
+  }
+  .overview-welcome p {
+    font-size: 13px;
     color: var(--text-muted);
-    cursor: pointer;
-    border-bottom: 2px solid transparent;
-    transition: all 0.2s ease;
-    letter-spacing: 0.02em;
   }
 
-  .view-tab:hover { color: var(--text); background: rgba(255,255,255,0.02); }
-  .view-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-dim); }
+  .overview-metrics {
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
+  }
+  .metric-card {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
+    padding: 20px 22px; display: flex; flex-direction: column; gap: 6px;
+    position: relative; overflow: hidden;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .metric-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-sm); }
+  .metric-card .metric-icon {
+    width: 36px; height: 36px; border-radius: 10px;
+    display: flex; align-items: center; justify-content: center;
+    margin-bottom: 4px; flex-shrink: 0;
+  }
+  .metric-card .metric-label { font-size: 12px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.02em; }
+  .metric-card .metric-value { font-size: 32px; font-weight: 800; color: var(--text); line-height: 1.1; letter-spacing: -0.5px; }
+  .metric-card .metric-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+
+  .overview-grid {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
+  }
+  .overview-panel {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px;
+    transition: border-color 0.2s;
+  }
+  .overview-panel:hover { border-color: var(--border-light); }
+  .overview-panel h3 {
+    font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 14px;
+    display: flex; align-items: center; justify-content: space-between;
+  }
+  .overview-panel h3 a { font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; text-decoration: none; transition: color 0.15s; }
+  .overview-panel h3 a:hover { color: var(--accent); }
+  .overview-agent-row {
+    display: flex; align-items: center; gap: 10px; padding: 8px 0;
+    border-bottom: 1px solid var(--border);
+  }
+  .overview-agent-row:last-child { border-bottom: none; }
+  .overview-agent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+  .overview-agent-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
+  .overview-agent-status { font-size: 12px; color: var(--text-muted); }
+  .overview-msg-row {
+    display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; align-items: baseline;
+  }
+  .overview-msg-row:last-child { border-bottom: none; }
+  .overview-msg-from { font-weight: 600; color: var(--text); min-width: 80px; font-size: 13px; }
+  .overview-msg-text { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-size: 13px; }
+  .overview-msg-time { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
+  .overview-full-width { grid-column: 1 / -1; }
+  .overview-task-summary { display: flex; gap: 10px; flex-wrap: wrap; }
+  .overview-task-badge {
+    padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
+  }
+  .overview-task-badge.pending { background: rgba(234, 179, 8, 0.1); color: var(--yellow); }
+  .overview-task-badge.active { background: rgba(245, 158, 11, 0.1); color: var(--accent); }
+  .overview-task-badge.done { background: rgba(63, 185, 80, 0.1); color: var(--green); }
+  .overview-launch-btn {
+    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
+    background: var(--gradient-accent); color: #fff; border: none; border-radius: 10px;
+    font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 12px;
+    transition: all 0.2s; box-shadow: 0 2px 8px var(--accent-glow);
+  }
+  .overview-launch-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }
+
+  /* ===== TOAST NOTIFICATIONS ===== */
+  .toast-container {
+    position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999;
+    display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: center;
+  }
+  .toast {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
+    padding: 12px 20px; font-size: 13px; color: var(--text); box-shadow: var(--shadow-lg);
+    pointer-events: auto; display: flex; align-items: center; gap: 10px;
+    animation: toast-in 0.3s ease-out;
+    max-width: 420px;
+  }
+  .toast.toast-error { background: var(--red-dim); border-color: var(--red); color: var(--red); }
+  .toast.toast-success { background: var(--green-dim); border-color: var(--green); }
+  .toast.leaving { animation: toast-out 0.3s ease-in forwards; }
+  .toast-icon { font-size: 16px; flex-shrink: 0; }
+  .toast-text { flex: 1; }
+  @keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
+  @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } }
+
+  /* ===== USER MESSAGES ===== */
+  .message.user-msg { background: rgba(245, 158, 11, 0.04); border-left: 2px solid var(--accent); }
+
+  /* Hide old view-tabs (replaced by nav sidebar) */
+  .view-tabs { display: none !important; }
+
+  /* ===== SETTINGS MENU ===== */
+  .header-settings-btn {
+    background: none; border: none; color: var(--text-muted); cursor: pointer;
+    padding: 6px; border-radius: 6px; display: flex; align-items: center;
+    transition: all 0.15s;
+  }
+  .header-settings-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
+  .settings-item {
+    padding: 8px 14px; font-size: 12px; color: var(--text-dim); cursor: pointer;
+    display: flex; align-items: center; gap: 8px; transition: background 0.1s;
+  }
+  .settings-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
+  .settings-item.settings-danger { color: var(--red); }
+  .settings-item.settings-danger:hover { background: var(--red-dim); }
+
+  /* (metric-card styles consolidated in overview section above) */
+
+  /* ===== BUTTON SYSTEM ===== */
+  .btn-primary { background: var(--gradient-accent); color: #fff; border: none; }
+  .btn-secondary { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
+  .btn-secondary:hover { border-color: var(--accent); color: var(--text); }
+  .btn-ghost { background: none; border: none; color: var(--text-muted); }
+  .btn-ghost:hover { color: var(--text); }
+  .btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red-dim); }
+  .btn-danger:hover { background: var(--red-dim); }
 
   /* ===== LAN BADGE ===== */
   .lan-badge {
@@ -2093,7 +2243,7 @@
   @media (max-width: 768px) {
     :root {
       --sidebar-w: 280px;
-      --header-h: 50px;
+      --header-h: 48px;
     }
 
     .mobile-toggle { display: block; }
@@ -2201,12 +2351,23 @@
 
     /* Scroll-to-bottom button: bigger touch target */
     .scroll-bottom { width: 44px; height: 44px; font-size: 18px; bottom: 80px; }
+
+    /* Icon rail: hide on mobile */
+    .nav-sidebar { display: none; }
+
+    /* Agent bar: smaller on mobile */
+    .agent-bar { padding: 4px 8px; min-height: 30px; }
+    .agent-pill { font-size: 10px; padding: 2px 8px 2px 5px; }
+
+    /* Overview: single column on mobile */
+    .overview-grid { grid-template-columns: 1fr; }
+    .overview-metrics { grid-template-columns: 1fr; }
   }
 
   /* ===== MOBILE: PHONE (480px) ===== */
   @media (max-width: 480px) {
     :root {
-      --header-h: 46px;
+      --header-h: 44px;
     }
 
     .header { padding: 0 8px; }
@@ -2581,11 +2742,47 @@
   .launch-area {
     flex: 1;
     overflow-y: auto;
-    padding: 20px;
+    padding: 28px 32px;
     display: none;
   }
-
   .launch-area.visible { display: block; }
+  .launch-section {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
+    padding: 20px; margin-bottom: 20px;
+  }
+  .launch-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--text); }
+  .launch-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
+  .launch-form-field { display: flex; flex-direction: column; gap: 4px; }
+  .launch-form-field label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
+  .launch-form-field input, .launch-form-field select {
+    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
+    padding: 8px 12px; font-size: 13px; color: var(--text); outline: none; transition: border-color 0.15s;
+  }
+  .launch-form-field input:focus, .launch-form-field select:focus { border-color: var(--accent); }
+  .launch-form-field input.invalid { border-color: var(--red); }
+  .launch-form-field .field-hint { font-size: 11px; color: var(--text-muted); min-height: 16px; }
+  .launch-form-field .field-hint.error { color: var(--red); }
+  .launch-form-field .field-hint.success { color: var(--green); }
+  .launch-prompt-output {
+    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
+    padding: 12px; font-size: 12px; font-family: 'SFMono-Regular', Consolas, monospace;
+    color: var(--text); line-height: 1.5; max-height: 200px; overflow-y: auto;
+    white-space: pre-wrap; cursor: pointer; position: relative; transition: border-color 0.15s;
+  }
+  .launch-prompt-output:hover { border-color: var(--accent); }
+  .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+  .template-card {
+    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
+    padding: 16px; cursor: pointer; transition: all 0.15s;
+  }
+  .template-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
+  .template-card-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
+  .template-card-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
+  .template-card-agents { display: flex; flex-wrap: wrap; gap: 4px; }
+  .template-agent-chip {
+    font-size: 11px; padding: 2px 8px; border-radius: 6px;
+    background: var(--accent-dim); color: var(--accent); font-weight: 500;
+  }
 
   /* ===== RULES VIEW ===== */
   .rules-area {
@@ -2697,7 +2894,7 @@
   .docs-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
   .docs-badge-beta { background: rgba(210, 153, 34, 0.15); color: #d29922; }
   .docs-badge-new { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
-  .docs-badge-stable { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
+  .docs-badge-stable { background: rgba(245, 158, 11, 0.15); color: var(--accent); }
   .docs-phase-diagram { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
   .docs-phase-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text); }
   .docs-phase-arrow { color: var(--text-muted); font-size: 14px; }
@@ -3125,10 +3322,7 @@
     color: var(--text-muted);
   }
 
-  /* ===== v3.0: PLUGINS SECTION ===== */
-  /* Plugins removed in v3.4.3 */
-
-  /* ===== v3.0: AVATAR PICKER ===== */
+  /* ===== AVATAR PICKER ===== */
   .avatar-option {
     width: 44px;
     height: 44px;
@@ -3329,49 +3523,36 @@
 <div class="header">
   <div class="header-left">
     <button class="mobile-toggle" onclick="toggleSidebar()" aria-label="Menu">&#9776;</button>
-    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect rx='20' width='100' height='100' fill='%230d1117'/><path d='M20 30 Q20 20 30 20 H70 Q80 20 80 30 V55 Q80 65 70 65 H55 L40 80 V65 H30 Q20 65 20 55Z' fill='%2358a6ff'/><circle cx='38' cy='42' r='5' fill='%230d1117'/><circle cx='55' cy='42' r='5' fill='%230d1117'/></svg>" alt="" style="height:28px;margin-right:4px;vertical-align:middle">
+    <svg width="18" height="18" viewBox="0 0 32 32" style="flex-shrink:0"><defs><linearGradient id="hg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f59e0b"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><path d="M16 2L27.6 9v14L16 30 4.4 23V9z" fill="url(#hg)" opacity="0.9"/><path d="M16 7L23 11v8l-7 4-7-4v-8z" fill="#09090b" opacity="0.6"/><circle cx="16" cy="15.5" r="3" fill="#fff" opacity="0.9"/></svg>
     <div class="logo">Neohive</div>
-    <span id="mobile-project-name" style="display:none;font-size:11px;color:var(--orange);font-weight:600;background:var(--orange-dim);padding:2px 8px;border-radius:10px" onclick="toggleSidebar()"></span>
-    <select id="mobile-project-select" class="mobile-project-select" onchange="mobileSelectProject(this.value)" style="display:none">
-      <option value="">Select project...</option>
-    </select>
-    <div class="header-stats">
-      <div class="h-stat"><span class="h-stat-val" id="stat-messages">0</span> msgs</div>
-      <div class="h-stat"><span class="h-stat-val" id="stat-agents">0</span> agents</div>
-      <div class="h-stat"><span class="h-stat-val" id="stat-sleeping" style="color:var(--orange)">0</span> sleeping</div>
-      <div class="h-stat"><span class="h-stat-val" id="stat-threads">0</span> threads</div>
-      <div class="h-stat"><span class="h-stat-val" id="stat-clis">0</span> CLI types</div>
-      <div class="h-stat" id="managed-badge" style="display:none;background:rgba(88,166,255,0.15);border-radius:8px;padding:2px 8px">
-        <span class="h-stat-val" style="color:#58a6ff;font-size:11px" id="managed-phase">MANAGED</span>
-        <span style="color:#8b949e;font-size:10px" id="managed-floor-info"></span>
-      </div>
-    </div>
+    <!-- Hidden stat elements for JS compatibility -->
+    <span id="stat-messages" style="display:none">0</span>
+    <span id="stat-agents" style="display:none">0</span>
+    <span id="stat-sleeping" style="display:none">0</span>
+    <span id="stat-threads" style="display:none">0</span>
+    <span id="stat-clis" style="display:none">0</span>
+    <div id="managed-badge" style="display:none"><span id="managed-phase"></span><span id="managed-floor-info"></span></div>
   </div>
   <div class="header-actions">
+    <span class="conn-dot" title="Connected"></span>
+    <!-- Settings dropdown -->
     <div style="position:relative;display:inline-block">
-      <button class="notif-toggle" id="notif-bell" onclick="toggleNotifPanel()" title="Notifications" style="position:relative">&#x1f514;<span id="notif-badge" style="display:none;position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:8px;font-weight:700;min-width:14px;height:14px;border-radius:7px;text-align:center;line-height:14px;padding:0 3px">0</span></button>
-      <div id="notif-panel" style="display:none;position:absolute;right:0;top:100%;margin-top:8px;background:var(--surface);border:1px solid var(--border-light);border-radius:12px;width:320px;max-height:400px;overflow-y:auto;z-index:300;box-shadow:var(--shadow-lg)">
-        <div style="padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center">Notifications <button onclick="clearNotifications()" style="background:none;border:none;color:var(--text-muted);font-size:11px;cursor:pointer">Clear</button></div>
-        <div id="notif-list" style="padding:4px 0"><div style="padding:16px;text-align:center;color:var(--text-muted);font-size:12px">No notifications yet</div></div>
+      <button class="header-settings-btn" onclick="toggleSettingsMenu()" title="Settings">
+        <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="2.5"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M2.9 2.9l1.4 1.4M11.7 11.7l1.4 1.4M13.1 2.9l-1.4 1.4M4.3 11.7l-1.4 1.4"/></svg>
+      </button>
+      <div id="settings-menu" style="display:none;position:absolute;right:0;top:100%;margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;z-index:300;min-width:180px;box-shadow:var(--shadow-lg)">
+        <div class="settings-item" onclick="toggleTheme();toggleSettingsMenu()"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="4"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2"/></svg> Theme</div>
+        <div class="settings-item" id="settings-notif-item" onclick="toggleCombinedNotifications();"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6a4 4 0 018 0v3l2 2H2l2-2z"/><path d="M6 13a2 2 0 004 0"/></svg> <span id="settings-notif-label">Notifications</span></div>
+        <div style="height:1px;background:var(--border);margin:4px 8px"></div>
+        <div class="settings-item" onclick="exportShareableHTML();toggleSettingsMenu()">Export HTML</div>
+        <div class="settings-item" onclick="exportJSON();toggleSettingsMenu()">Export JSON</div>
+        <div class="settings-item" onclick="enterReplay();toggleSettingsMenu()">Replay</div>
+        <div class="settings-item" onclick="openPhoneAccess();toggleSettingsMenu()">Phone Access</div>
+        <div class="settings-item" onclick="switchView('docs');toggleSettingsMenu()">Help &amp; Docs</div>
+        <div style="height:1px;background:var(--border);margin:4px 8px"></div>
+        <div class="settings-item settings-danger" onclick="doReset();toggleSettingsMenu()">Reset Data</div>
       </div>
     </div>
-    <button class="notif-toggle" id="notif-toggle" onclick="toggleNotifications()" title="Browser notifications">&#x1f514;</button>
-    <button class="theme-toggle" id="theme-toggle" onclick="toggleTheme()" title="Toggle dark/light theme">&#x1f319;</button>
-    <span onclick="toggleShortcutsOverlay()" style="font-size:10px;color:var(--text-muted);cursor:pointer;padding:0 4px" title="Keyboard shortcuts">? keys</span>
-    <button class="sound-toggle" id="sound-toggle" onclick="toggleSound()" title="Toggle notification sound">&#x1f508;</button>
-    <button class="phone-btn" id="phone-btn" onclick="openPhoneAccess()" title="Phone access (LAN)">&#x1F4F1;</button>
-    <div class="connection"><span class="conn-dot"></span><span id="conn-label">Live</span><span class="conn-detail" id="conn-detail"></span></div>
-    <button class="btn" onclick="enterReplay()" id="replay-header-btn" title="Replay conversation">Replay</button>
-    <div style="position:relative;display:inline-block">
-      <button class="btn btn-primary" onclick="toggleExportMenu()">Export &#x25BE;</button>
-      <div id="export-menu" style="display:none;position:absolute;right:0;top:100%;margin-top:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;overflow:hidden;z-index:200;min-width:160px">
-        <div style="padding:7px 12px;font-size:12px;cursor:pointer;transition:background 0.1s" onmouseover="this.style.background='var(--surface-3)'" onmouseout="this.style.background=''" onclick="exportShareableHTML();toggleExportMenu()">HTML (shareable)</div>
-        <div style="padding:7px 12px;font-size:12px;cursor:pointer;transition:background 0.1s" onmouseover="this.style.background='var(--surface-3)'" onmouseout="this.style.background=''" onclick="exportConversation();toggleExportMenu()">Markdown (.md)</div>
-        <div style="padding:7px 12px;font-size:12px;cursor:pointer;transition:background 0.1s" onmouseover="this.style.background='var(--surface-3)'" onmouseout="this.style.background=''" onclick="exportJSON();toggleExportMenu()">JSON (.json)</div>
-        <div style="padding:7px 12px;font-size:12px;cursor:pointer;transition:background 0.1s;border-top:1px solid var(--border)" onmouseover="this.style.background='var(--surface-3)'" onmouseout="this.style.background=''" onclick="exportReplay();toggleExportMenu()">Animated Replay (.html)</div>
-      </div>
-    </div>
-    <button class="btn btn-danger" onclick="doReset()">Reset</button>
   </div>
 </div>
 
@@ -3406,85 +3587,76 @@
 
 <!-- APP LAYOUT -->
 <div class="app">
-  <div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>
-
-  <!-- SIDEBAR -->
-  <div class="sidebar" id="sidebar">
-    <!-- Project Switcher -->
-    <div class="project-switcher">
-      <select class="project-select" id="project-select" onchange="switchProject()">
-        <option value="">Default (local)</option>
-      </select>
-      <input class="project-input" id="project-path-input" placeholder="Enter project folder path..."
-        onkeydown="if(event.key==='Enter'){addProject();}">
-      <div class="project-actions">
-        <button class="btn btn-primary" onclick="showAddProject()">+ Add</button>
-        <button class="btn" onclick="discoverProjects()">Discover</button>
-        <button class="btn btn-danger" onclick="removeProject()" id="remove-project-btn" style="display:none">Remove</button>
-      </div>
-      <div id="discover-results" style="display:none"></div>
+  <!-- UNIFIED NAV SIDEBAR -->
+  <nav class="nav-sidebar expanded" id="nav-sidebar">
+    <div class="nav-sidebar-header">
+      <span class="nav-sidebar-logo"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="var(--accent)" stroke-width="1.5" style="vertical-align:-2px;margin-right:6px"><path d="M8 1.5L14 5v6l-6 3.5L2 11V5z"/></svg>Neohive</span>
+      <button class="nav-sidebar-toggle" onclick="toggleNavSidebar()" title="Collapse sidebar">&#x25C0;</button>
     </div>
-    <div class="sidebar-scroll">
-      <!-- Agents Section -->
-      <div class="sidebar-section">
-        <div class="sidebar-title">
-          <span>Agents</span>
-          <span class="alert-count" id="alert-count" style="display:none">0</span>
-        </div>
-        <div class="agent-filter-bar" id="agent-filter-bar">
-          <input type="text" id="agent-search" placeholder="Search..." oninput="filterAgents()">
-          <select id="agent-role-filter" onchange="filterAgents()">
-            <option value="">Role</option>
-            <option value="lead">Lead</option>
-            <option value="backend">Backend</option>
-            <option value="frontend">Frontend</option>
-            <option value="quality">Quality</option>
-            <option value="monitor">Monitor</option>
-            <option value="advisor">Advisor</option>
-          </select>
-          <select id="agent-status-filter" onchange="filterAgents()">
-            <option value="">Status</option>
-            <option value="active">Online</option>
-            <option value="dead">Offline</option>
-            <option value="sleeping">Idle</option>
-          </select>
-        </div>
-        <div id="agents-list"></div>
+    <!-- Navigation -->
+    <div class="nav-sidebar-section nav-section-main">
+      <div class="nav-item active" data-view="overview" onclick="switchView('overview')">
+        <span class="nav-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1.5L14 5v6l-6 3.5L2 11V5z"/></svg></span><span class="nav-text">Overview</span>
       </div>
-
-      <!-- Agent Stats Section -->
-      <div class="sidebar-section">
-        <div class="sidebar-title"><span>Stats</span></div>
-        <div id="agent-stats"></div>
+      <div class="nav-item" data-view="messages" onclick="switchView('messages')">
+        <span class="nav-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3h12v8H6l-3 2.5V11H2z" stroke-linejoin="round"/></svg></span><span class="nav-text">Messages</span>
       </div>
-
-      <!-- Activity Heatmap -->
-      <div class="sidebar-section">
-        <div class="sidebar-title"><span>Activity</span></div>
-        <div id="activity-heatmap"></div>
+      <div class="nav-item" data-view="tasks" onclick="switchView('tasks')">
+        <span class="nav-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="12" height="12" rx="2"/><path d="M5 8l2 2 4-4"/></svg></span><span class="nav-text">Tasks</span>
       </div>
-
-      <!-- Bookmarks Section -->
-      <div class="sidebar-section">
-        <div class="sidebar-title">
-          <span>Bookmarks</span>
-          <span class="alert-count" id="bookmark-count" style="display:none">0</span>
-        </div>
-        <div id="bookmarks-list"></div>
-        <div class="filter-clear" id="bookmark-clear" onclick="clearBookmarkFilter()" style="display:none">&#x2715; Clear filter</div>
+      <div class="nav-item" data-view="workflows" onclick="switchView('workflows')">
+        <span class="nav-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 8a6 6 0 0111 0M14 8a6 6 0 01-11 0"/><path d="M13 5v3h-3M3 11v-3h3"/></svg></span><span class="nav-text">Workflows</span>
       </div>
-
-      <!-- Threads Section -->
-      <div class="sidebar-section">
-        <div class="sidebar-title"><span>Threads</span></div>
-        <div id="threads-list"></div>
-        <div class="filter-clear" id="filter-clear" onclick="clearThreadFilter()">&#x2715; Clear filter</div>
+      <div class="nav-item" data-view="stats" onclick="switchView('stats')">
+        <span class="nav-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 14V8M8 14V3M13 14V6"/></svg></span><span class="nav-text">Analytics</span>
+      </div>
+      <div class="nav-item" data-view="launch" onclick="switchView('launch')">
+        <span class="nav-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v12M2 8h12"/></svg></span><span class="nav-text">Launch</span>
       </div>
     </div>
-  </div>
+    <div class="nav-sidebar-divider"></div>
+    <!-- Agents -->
+    <div class="nav-sidebar-section nav-sidebar-agents">
+      <div class="nav-sidebar-label">AGENTS</div>
+      <div id="agents-list"></div>
+    </div>
+    <div class="nav-sidebar-divider"></div>
+    <!-- Project -->
+    <div class="nav-sidebar-section nav-sidebar-project">
+      <div class="nav-sidebar-label" style="display:flex;align-items:center;justify-content:space-between;gap:6px">
+        <span>PROJECT</span>
+        <span style="display:flex;align-items:center;gap:2px">
+          <button type="button" id="remove-project-btn" onclick="removeProject()" title="Remove selected project from this list (does not delete .neohive data on disk)" aria-label="Remove project"
+            style="display:none;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 4px;line-height:1;border-radius:4px;opacity:0.85"
+            onmouseenter="this.style.color='#f87171'" onmouseleave="this.style.color='var(--text-muted)'">
+            <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.25" aria-hidden="true"><path d="M2 4h12"/><path d="M5 4V2.5h6V4"/><path d="M6 7v5M10 7v5"/><path d="M3 4v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4"/></svg>
+          </button>
+          <button type="button" onclick="showAddProject()" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0 2px;line-height:1" title="Add project">+</button>
+        </span>
+      </div>
+      <select class="project-select" id="project-select" onchange="switchProject()" style="width:100%;margin-top:4px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px">
+        <option value="">Default (local)</option>
+      </select>
+      <button type="button" id="remove-project-text-btn" class="btn" onclick="removeProject()" style="display:none;width:100%;margin-top:6px;padding:5px 8px;font-size:11px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted)" title="Removes this folder from the dashboard only">Remove project from list</button>
+      <input class="project-input" id="project-path-input" placeholder="Repo root (not …/.neohive)" title="Use the folder you open in Cursor — not the .neohive subfolder" onkeydown="if(event.key==='Enter')addProject();if(event.key==='Escape')this.classList.remove('visible');" style="margin-top:4px">
+    </div>
+    <div class="nav-sidebar-spacer"></div>
+    <!-- Bottom nav -->
+    <div class="nav-sidebar-section">
+      <div class="nav-item" data-view="plan" onclick="switchView('plan')">
+        <span class="nav-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 2l10 6-10 6z"/></svg></span><span class="nav-text">Plan</span>
+      </div>
+      <div class="nav-item" data-view="rules" onclick="switchView('rules')">
+        <span class="nav-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1L2 4v4c0 3.5 2.5 6.5 6 7.5 3.5-1 6-4 6-7.5V4z"/></svg></span><span class="nav-text">Rules</span>
+      </div>
+    </div>
+  </nav>
 
   <!-- MAIN -->
   <div class="main" style="position:relative">
+    <!-- Agent Status Bar -->
+    <div class="agent-bar" id="agent-bar"></div>
+
     <div class="replay-bar" id="replay-bar">
       <div class="replay-controls">
         <button class="replay-btn" onclick="replayPlayPause()" id="replay-play">&#x25B6;</button>
@@ -3525,6 +3697,7 @@
       <div id="pinned-list"></div>
     </div>
     <div class="messages-area" id="messages"></div>
+    <div class="overview-area visible" id="overview-area"></div>
     <div class="tasks-area" id="tasks-area"></div>
     <div class="workspaces-area" id="workspaces-area"></div>
     <div class="workflows-area" id="workflows-area"></div>
@@ -3569,6 +3742,7 @@
   <div class="profile-popup-bio" id="pp-bio"></div>
   <div class="profile-popup-stats" id="pp-stats"></div>
   <button class="btn btn-primary" style="width:100%;margin-top:10px" id="pp-edit-btn" onclick="openProfileEditor()">Edit Profile</button>
+  <button class="btn btn-danger" style="width:100%;margin-top:6px" id="pp-delete-btn" onclick="confirmDeleteAgent()">Delete Agent</button>
 </div>
 
 <!-- Character Designer Panel -->
@@ -3579,8 +3753,6 @@
     <button class="cd-close" onclick="closeProfileEditor()">&times;</button>
   </div>
   <div class="cd-body">
-    <!-- 3D Preview -->
-    <div class="cd-preview" id="cd-preview-container"></div>
 
     <!-- Info Section: Avatar + Name/Role/Bio -->
     <div class="cd-info-section">
@@ -3831,8 +4003,8 @@
       </div>
       <div class="cd-color-row">
         <label>Shirt color</label>
-        <input type="color" id="pe-shirt-color" value="#58a6ff" onchange="cdOnChange()">
-        <span class="cd-color-hex" id="cd-shirt-hex">#58a6ff</span>
+        <input type="color" id="pe-shirt-color" value="#f59e0b" onchange="cdOnChange()">
+        <span class="cd-color-hex" id="cd-shirt-hex">#f59e0b</span>
       </div>
       <div class="cd-color-row">
         <label>Pants color</label>
@@ -3967,6 +4139,9 @@ function lttFetch(url, opts) {
 
 var activeThread = null;
 var activeChannel = null; // null = all channels
+// Safe element getter — returns dummy div for removed elements to prevent null crashes
+function $id(id) { return document.getElementById(id) || document.createElement('div'); }
+
 var activeProject = ''; // empty = default/local
 var cachedHistory = [];
 var cachedAgents = {};
@@ -3980,8 +4155,8 @@ window.addEventListener('resize', function() { isMobile = window.innerWidth <= 7
 
 // Agent color palette
 var COLORS = [
-  '#58a6ff','#3fb950','#d29922','#f85149','#bc8cff',
-  '#f778ba','#79c0ff','#7ee787','#e3b341','#ffa198'
+  '#f59e0b','#f97316','#3fb950','#d29922','#f85149',
+  '#f778ba','#7ee787','#e3b341','#ffa198','#14b8a6'
 ];
 var COLORS_LIGHT = [
   '#0969da','#1a7f37','#9a6700','#cf222e','#8250df',
@@ -4197,7 +4372,7 @@ function renderTable(rows) {
 
 // ==================== AGENT MONITORING ====================
 
-var PROVIDER_COLORS = { claude: '#d97706', anthropic: '#d97706', openai: '#10b981', gemini: '#3b82f6', google: '#3b82f6' };
+var PROVIDER_COLORS = { claude: '#d97706', anthropic: '#d97706', openai: '#10b981', gemini: '#3b82f6', google: '#3b82f6', cursor: '#6366f1' };
 
 function getProviderBadge(provider) {
   if (!provider) return '';
@@ -4212,6 +4387,7 @@ var agentFilterStatus = '';
 var collapsedRoleGroups = {};
 
 function filterAgents() {
+  if (!document.getElementById('agent-search')) return;
   agentFilterSearch = (document.getElementById('agent-search').value || '').toLowerCase();
   agentFilterRole = document.getElementById('agent-role-filter').value;
   agentFilterStatus = document.getElementById('agent-status-filter').value;
@@ -4223,11 +4399,13 @@ function toggleRoleGroup(role) {
   renderAgents(cachedAgents);
 }
 
+var _lastAgentsHash = '';
 function renderAgents(agents) {
+  updateAgentBar(agents);
   var el = document.getElementById('agents-list');
   var keys = Object.keys(agents);
   if (!keys.length) {
-    el.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:4px;">No agents registered</div>';
+    if (_lastAgentsHash !== 'empty') { el.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:4px;">No agents registered</div>'; _lastAgentsHash = 'empty'; }
     return;
   }
 
@@ -4236,7 +4414,7 @@ function renderAgents(agents) {
   for (var f = 0; f < keys.length; f++) {
     var fname = keys[f];
     var finfo = agents[fname];
-    var fstate = finfo.status || (finfo.alive ? 'active' : 'dead');
+    var fstate = finfo.status || (finfo.alive ? 'working' : 'offline');
     if (agentFilterSearch && fname.toLowerCase().indexOf(agentFilterSearch) === -1 &&
         (!finfo.display_name || finfo.display_name.toLowerCase().indexOf(agentFilterSearch) === -1)) continue;
     if (agentFilterRole && finfo.role !== agentFilterRole) continue;
@@ -4244,8 +4422,17 @@ function renderAgents(agents) {
     filtered.push(fname);
   }
 
+  var collapsedSig = Object.keys(collapsedRoleGroups).filter(function(k) { return collapsedRoleGroups[k]; }).sort().join(',');
+  var structuralPart = keys.map(function(k) { var a = agents[k]; return k + ':' + (a.alive ? '1' : '0') + ':' + (a.is_listening ? 'L' : 'W') + ':' + (a.role || '') + ':' + (a.status || ''); }).join('|');
+  var useGrouping = filtered.length > 6;
+  var layoutHash = structuralPart + '|F:' + agentFilterSearch + ':' + agentFilterRole + ':' + agentFilterStatus + '|C:' + collapsedSig + '|G:' + (useGrouping ? '1' : '0');
+
   if (!filtered.length) {
     el.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:4px;">No matching agents</div>';
+    _lastAgentsHash = layoutHash;
+    var alertEl0 = document.getElementById('alert-count');
+    if (alertEl0) alertEl0.style.display = 'none';
+    updateInjectTargets(keys);
     return;
   }
 
@@ -4261,9 +4448,6 @@ function renderAgents(agents) {
     roleGroups[grole].push(gname);
   }
 
-  // Only use role grouping if more than 6 agents (otherwise flat list)
-  var useGrouping = filtered.length > 6;
-
   var sleepCount = 0;
   var html = '';
 
@@ -4272,90 +4456,44 @@ function renderAgents(agents) {
     for (var i = 0; i < agentNames.length; i++) {
       var name = agentNames[i];
       var info = agents[name];
-    var color = getColor(name);
-    // Use server-provided status if available, fallback to client-side detection
-    var state = info.status || (info.alive ? 'active' : 'dead');
-    if (state === 'sleeping') sleepCount++;
-
-    var activityText = '';
-    if (state === 'dead') {
-      activityText = 'Process not running';
-    } else if (info.idle_seconds != null) {
-      if (info.idle_seconds < 5) activityText = 'Active just now';
-      else if (info.idle_seconds < 60) activityText = 'Active ' + info.idle_seconds + 's ago';
-      else activityText = 'Idle ' + Math.floor(info.idle_seconds / 60) + 'm ' + (info.idle_seconds % 60) + 's';
-    } else if (info.last_message) {
-      activityText = 'Last msg ' + timeAgo(info.last_message);
-    } else {
-      activityText = 'Registered ' + timeAgo(info.registered_at);
-    }
-
-    var stateLabel = state.charAt(0).toUpperCase() + state.slice(1);
-    var cardClass = 'agent-card' + (state !== 'active' ? ' ' + state : '');
-
-    var nudgeHtml = '';
-    if (state === 'sleeping' || (state === 'active' && !info.is_listening && info.idle_seconds > 30)) {
-      nudgeHtml = '<button class="nudge-btn" onclick="sendNudge(\'' + escapeHtml(name) + '\')">Send Nudge</button>';
-    }
-    var removeHtml = '';
-    var respawnHtml = '';
-    if (state === 'dead') {
-      removeHtml = '<button class="remove-agent-btn" onclick="event.stopPropagation();removeAgent(\'' + escapeHtml(name) + '\')" title="Remove this agent">Remove</button>';
-      respawnHtml = '<button class="respawn-btn" onclick="event.stopPropagation();respawnAgent(\'' + escapeHtml(name) + '\')" title="Generate resume prompt for this agent">&#x1F504; Respawn</button>';
-    }
-
-    // Listening status — simplified: skip for dead (already shown via badge)
-    var listenHtml = '';
-    if (state !== 'dead') {
-      if (info.is_listening) {
-        var sinceTxt = info.listening_since ? ' since ' + formatTime(info.listening_since) : '';
-        listenHtml = '<div class="listen-badge listening" title="Agent is waiting for messages — can receive dashboard injections"><span class="listen-dot on"></span>Listening' + sinceTxt + '</div>';
-      } else if (state === 'active') {
-        listenHtml = '<div class="listen-badge busy" title="Agent is working, not currently listening for messages"><span class="listen-dot off"></span>Busy</div>';
-      } else {
-        listenHtml = '<div class="listen-badge not-listening" title="Agent is not listening. Send a nudge or type \'listen\' in the terminal."><span class="listen-dot off"></span>Not Listening</div>';
+      var color = getColor(name);
+      var state = !info.alive ? 'offline' : info.is_listening ? 'listening' : (info.status === 'idle' || info.status === 'sleeping') ? 'idle' : 'working';
+      if (state === 'idle') sleepCount++;
+
+      // Compact activity text
+      var activityText = '';
+      if (state === 'offline' || state === 'dead') {
+        activityText = 'offline';
+      } else if (info.idle_seconds != null) {
+        if (info.idle_seconds < 5) activityText = 'just now';
+        else if (info.idle_seconds < 60) activityText = info.idle_seconds + 's ago';
+        else activityText = Math.floor(info.idle_seconds / 60) + 'm ago';
+      } else if (info.last_activity) {
+        activityText = timeAgo(info.last_activity);
       }
-    }
 
-    var avatarHtml = info.avatar
-      ? '<img class="agent-avatar-img" src="' + escapeHtml(info.avatar) + '" alt="' + escapeHtml(name) + '" onerror="this.style.display=\'none\'">'
-      : '<div class="agent-avatar" style="background:' + color + '">' + initial(name) + '</div>';
-    var displayName = info.display_name || name;
-    var roleHtml = '';
-    if (info.role) {
-      var roleBg = info.role === 'quality' ? 'background:rgba(34,197,94,0.15);color:var(--green)' :
-        info.role === 'monitor' ? 'background:rgba(239,68,68,0.15);color:var(--red,#ef4444)' :
-        info.role === 'advisor' ? 'background:rgba(168,85,247,0.15);color:var(--purple,#a855f7)' :
-        info.role === 'lead' ? 'background:rgba(59,130,246,0.15);color:var(--accent)' : '';
-      roleHtml = '<span class="role-badge" style="' + roleBg + '">' + escapeHtml(info.role) + '</span>';
-    }
-    var branchHtml = info.branch && info.branch !== 'main' ? ' <span style="font-size:9px;color:var(--text-muted)">[' + escapeHtml(info.branch) + ']</span>' : '';
-
-    cardHtml += '<div class="' + cardClass + '">' +
-      '<div class="agent-top" onclick="showProfilePopup(\'' + escapeHtml(name) + '\', event)" style="cursor:pointer">' +
-        avatarHtml +
-        '<div class="agent-info">' +
-          '<div class="agent-name" style="color:' + color + '">' +
-            escapeHtml(displayName) +
-            roleHtml +
-            ' <span class="agent-badge ' + state + '">' + stateLabel + '</span>' +
-            branchHtml +
-          '</div>' +
-          '<div class="agent-meta"><span>' + getProviderBadge(info.provider) + 'PID ' + info.pid + '</span>' +
-            (info.last_activity ? '<span style="margin-left:8px" title="Last heartbeat: ' + new Date(info.last_activity).toLocaleTimeString() + '">&#x1f493; ' + timeAgo(info.last_activity) + '</span>' : '') +
+      var cardClass = 'agent-card' + (state !== 'working' ? ' ' + state : '');
+      var avatarHtml = info.avatar
+        ? '<img class="agent-avatar-img" src="' + escapeHtml(info.avatar) + '" alt="' + escapeHtml(name) + '" onerror="this.style.display=\'none\'">'
+        : '<div class="agent-avatar" style="background:' + color + '">' + initial(name) + '</div>';
+      var displayName = info.display_name || name;
+
+      // Subtitle: role + activity
+      var subtitleParts = [];
+      if (info.role) subtitleParts.push(info.role);
+      if (activityText) subtitleParts.push(activityText);
+      var subtitleText = subtitleParts.join(' \u00B7 ');
+
+      cardHtml += '<div class="' + cardClass + '" data-agent="' + escapeHtml(name) + '" onclick="showProfilePopup(\'' + escapeHtml(name) + '\', event)">' +
+        '<div class="agent-top">' +
+          avatarHtml +
+          '<div class="agent-info">' +
+            '<div class="agent-name" style="color:' + color + '">' + escapeHtml(displayName) + '</div>' +
+            '<div class="agent-subtitle">' + escapeHtml(subtitleText) + '</div>' +
           '</div>' +
+          '<span class="agent-status-dot ' + state + '" title="' + state + '"></span>' +
         '</div>' +
-      '</div>' +
-      '<div class="agent-activity">' +
-        '<span class="agent-activity-icon ' + state + '"></span>' +
-        activityText +
-      '</div>' +
-      (info.current_status ? '<div class="agent-status-intent" title="' + escapeHtml(info.current_status) + '">' + escapeHtml(info.current_status) + '</div>' : '') +
-      listenHtml +
-      nudgeHtml +
-      respawnHtml +
-      removeHtml +
-    '</div>';
+      '</div>';
     }
     return cardHtml;
   }
@@ -4382,10 +4520,47 @@ function renderAgents(agents) {
     html += renderAgentCards(filtered);
   }
 
-  el.innerHTML = html;
+  // DOM patching: when layout is unchanged, update cards in place (activity text, dots); else full rebuild
+  var existingCards = el.querySelectorAll('[data-agent]');
+  var canPatch = !useGrouping && existingCards.length === filtered.length && existingCards.length > 0;
+  var didPatch = false;
+  if (canPatch && layoutHash === _lastAgentsHash) {
+    didPatch = true;
+    for (var pi = 0; pi < filtered.length; pi++) {
+      var pName = filtered[pi];
+      var pCard = el.querySelector('[data-agent="' + pName + '"]');
+      if (!pCard) { didPatch = false; break; }
+      var pInfo = agents[pName];
+      var pState = !pInfo.alive ? 'offline' : pInfo.is_listening ? 'listening' : (pInfo.status === 'idle' || pInfo.status === 'sleeping') ? 'idle' : 'working';
+      var dot = pCard.querySelector('.agent-status-dot');
+      if (dot) { dot.className = 'agent-status-dot ' + pState; dot.title = pState; }
+      var sub = pCard.querySelector('.agent-subtitle');
+      if (sub) {
+        var parts = [];
+        if (pInfo.role) parts.push(pInfo.role);
+        if (pState === 'offline') parts.push('offline');
+        else if (pInfo.idle_seconds != null) {
+          if (pInfo.idle_seconds < 5) parts.push('just now');
+          else if (pInfo.idle_seconds < 60) parts.push(pInfo.idle_seconds + 's ago');
+          else parts.push(Math.floor(pInfo.idle_seconds / 60) + 'm ago');
+        } else if (pInfo.last_activity) {
+          parts.push(timeAgo(pInfo.last_activity));
+        }
+        var newSub = parts.join(' \u00B7 ');
+        if (sub.textContent !== newSub) sub.textContent = newSub;
+      }
+      var newCardClass = 'agent-card' + (pState !== 'working' ? ' ' + pState : '');
+      if (pCard.className !== newCardClass) pCard.className = newCardClass;
+    }
+  }
+  if (!didPatch) {
+    el.innerHTML = html;
+    _lastAgentsHash = layoutHash;
+  }
 
   // Update alert badge
   var alertEl = document.getElementById('alert-count');
+  if (!alertEl) return;
   if (sleepCount > 0) {
     alertEl.textContent = sleepCount;
     alertEl.style.display = '';
@@ -4464,12 +4639,12 @@ function showRespawnModal(agentName, prompt) {
 
   overlay.innerHTML =
     '<div class="respawn-modal">' +
-      '<h3>&#x1F504; Respawn ' + escapeHtml(agentName) + '</h3>' +
+      '<h3>Respawn ' + escapeHtml(agentName) + '</h3>' +
       '<p style="color:var(--text-secondary);font-size:12px;margin:0 0 8px">Copy this prompt and paste it into a fresh CLI terminal to respawn the agent:</p>' +
       '<div class="respawn-modal-prompt" id="respawn-prompt-text">' + escapeHtml(prompt) + '</div>' +
       '<div class="respawn-modal-actions">' +
         '<button class="respawn-close-btn" onclick="dismissRespawnModal()">Close</button>' +
-        '<button class="respawn-copy-btn" onclick="copyRespawnPrompt()">&#x1F4CB; Copy to Clipboard</button>' +
+        '<button class="respawn-copy-btn" onclick="copyRespawnPrompt()">Copy to Clipboard</button>' +
       '</div>' +
     '</div>';
 
@@ -4489,7 +4664,7 @@ function copyRespawnPrompt() {
     var btn = document.querySelector('.respawn-copy-btn');
     if (btn) {
       btn.textContent = '\u2705 Copied!';
-      setTimeout(function() { btn.innerHTML = '&#x1F4CB; Copy to Clipboard'; }, 2000);
+      setTimeout(function() { btn.innerHTML = 'Copy to Clipboard'; }, 2000);
     }
   }).catch(function() {
     // Fallback: select all text
@@ -4568,6 +4743,7 @@ function doInject() {
 // ==================== THREADS ====================
 
 function renderThreads(messages) {
+  if (!document.getElementById('threads-list')) return;
   var threads = {};
   for (var i = 0; i < messages.length; i++) {
     var m = messages[i];
@@ -4616,17 +4792,17 @@ function renderMessages(messages) {
         ? '<div class="empty-sub">Select a project above to see agent conversations</div>'
         : '<div class="empty-sub">Waiting for messages in: ' + activeProject.split(/[/\\]/).pop() + '</div>';
       el.innerHTML = '<div class="empty-state">' +
-        '<div class="empty-icon">&#x1f4ac;</div>' +
+        '<div class="empty-icon" style="font-size:40px;opacity:0.2">--</div>' +
         '<div class="empty-text">No messages yet</div>' +
         mobileHint +
       '</div>';
     } else {
       el.innerHTML = '<div class="empty-state">' +
-        '<div class="empty-icon">&#x1f680;</div>' +
-        '<div class="empty-text">Neohive v5.0</div>' +
+        '<div class="empty-icon" style="font-size:40px;opacity:0.2">--</div>' +
+        '<div class="empty-text">Neohive v6.0</div>' +
         '<div class="empty-sub">Autonomous AI agent teams — one command, zero babysitting</div>' +
         '<div class="onboard-steps">' +
-          '<div class="onboard-step" style="margin-bottom:12px"><span class="onboard-num" style="background:var(--accent)">&#x26A1;</span><span style="font-weight:600">Quickest start — one command:</span></div>' +
+          '<div class="onboard-step" style="margin-bottom:12px"><span class="onboard-num" style="background:var(--accent)"></span><span style="font-weight:600">Quickest start — one command:</span></div>' +
           '<div class="copy-block" onclick="copyText(this)" data-text="npx neohive run &quot;build a REST API with auth&quot; --agents 4"><span class="copy-hint">click to copy</span>npx neohive run "build a REST API with auth" --agents 4</div>' +
           '<div style="font-size:11px;color:var(--text-muted);margin:8px 0 16px;text-align:center">Spawns 4 agents, auto-assigns roles, creates autonomous workflow. Walk away, come back to finished work.</div>' +
           '<div style="border-top:1px solid var(--border);padding-top:12px;margin-top:4px"></div>' +
@@ -4710,10 +4886,12 @@ function renderMessages(messages) {
 
   for (var i = windowStart; i < filtered.length; i++) {
     var m = filtered[i];
-    var color = getColor(m.from);
-    var fromDisplay = (cachedAgents[m.from] && cachedAgents[m.from].display_name) || m.from;
-    var toDisplay = (cachedAgents[m.to] && cachedAgents[m.to].display_name) || m.to;
+    var color = m.from === '__user__' ? 'var(--accent)' : getColor(m.from);
+    var fromDisplay = m.from === '__user__' ? 'You' : (cachedAgents[m.from] && cachedAgents[m.from].display_name) || m.from;
+    var toDisplay = m.to === '__user__' ? 'You' : (cachedAgents[m.to] && cachedAgents[m.to].display_name) || m.to;
     var newClass = (isNew && i >= lastMessageCount) ? ' message-new' : '';
+    var isUserMsg = m.from === '__user__';
+    var isReplyToUser = m.to === '__user__';
     var isSystem = m.system === true;
 
     // Date separator
@@ -4758,7 +4936,7 @@ function renderMessages(messages) {
         buildMsgActions(m.id) +
         msgAvatarHtml +
         '<div class="msg-body">' +
-          '<div class="handoff-banner">&#x1f91d; Handoff: ' + escapeHtml(fromDisplay) + ' &rarr; ' + escapeHtml(toDisplay) + '</div>' +
+          '<div class="handoff-banner">Handoff: ' + escapeHtml(fromDisplay) + ' &rarr; ' + escapeHtml(toDisplay) + '</div>' +
           '<div class="msg-header">' +
             '<span class="msg-from" style="color:' + color + '" title="@' + escapeHtml(m.from) + '">' + escapeHtml(fromDisplay) + '</span>' +
             '<span class="msg-time" title="' + formatTime(m.timestamp) + '">' + relativeTime(m.timestamp) + '</span>' +
@@ -4785,7 +4963,7 @@ function renderMessages(messages) {
             '<span class="msg-time" title="' + formatTime(m.timestamp) + '">' + relativeTime(m.timestamp) + '</span>' +
             '<div class="msg-badges">' + badges + '</div>' +
           '</div>' +
-          '<div class="file-meta"><span class="file-icon">&#x1f4c4;</span>' + escapeHtml(fileName) + '<span class="file-size">' + fileSize + '</span></div>' +
+          '<div class="file-meta"><span class="file-icon" style="opacity:0.5">[ ]</span>' + escapeHtml(fileName) + '<span class="file-size">' + fileSize + '</span></div>' +
           '<div class="msg-content">' + renderMarkdown(m.content) + '</div>' +
           buildReactionsHtml(m.id) +
           buildReadReceipts(m.id) +
@@ -4793,7 +4971,9 @@ function renderMessages(messages) {
       lastFrom = m.from;
       lastTo = m.to;
     } else {
-      html += '<div class="message' + newClass + groupClass + '">' +
+      var userMsgClass = isUserMsg ? ' user-msg' : '';
+      var replyBadge = isReplyToUser ? '<span class="badge" style="background:var(--accent-dim);color:var(--accent)">Reply to you</span>' : '';
+      html += '<div class="message' + newClass + groupClass + userMsgClass + '">' +
         buildMsgActions(m.id) +
         msgAvatarHtml +
         '<div class="msg-body">' +
@@ -4802,7 +4982,7 @@ function renderMessages(messages) {
             '<span class="msg-arrow">&rarr;</span>' +
             '<span class="msg-to">' + escapeHtml(toDisplay) + '</span>' +
             '<span class="msg-time" title="' + formatTime(m.timestamp) + '">' + relativeTime(m.timestamp) + '</span>' +
-            '<div class="msg-badges">' + badges + '</div>' +
+            '<div class="msg-badges">' + replyBadge + badges + '</div>' +
           '</div>' +
           '<div class="msg-content">' + renderMarkdown(m.content) + '</div>' +
           buildReactionsHtml(m.id) +
@@ -4972,13 +5152,17 @@ function renderChannelBar(messages) {
 }
 
 function toggleSidebar() {
-  document.getElementById('sidebar').classList.toggle('open');
-  document.getElementById('sidebar-overlay').classList.toggle('open');
+  var sb = document.getElementById('sidebar') || document.getElementById('nav-sidebar');
+  if (sb) sb.classList.toggle('open');
+  var ov = document.getElementById('sidebar-overlay');
+  if (ov) ov.classList.toggle('open');
 }
 
 function closeSidebar() {
-  document.getElementById('sidebar').classList.remove('open');
-  document.getElementById('sidebar-overlay').classList.remove('open');
+  var sb = document.getElementById('sidebar') || document.getElementById('nav-sidebar');
+  if (sb) sb.classList.remove('open');
+  var ov = document.getElementById('sidebar-overlay');
+  if (ov) ov.classList.remove('open');
 }
 
 var newWhileScrolled = 0;
@@ -5136,7 +5320,7 @@ function deepSearch() {
     lastMessageCount = 0;
     var el = document.getElementById('messages');
     if (!messages.length) {
-      el.innerHTML = '<div class="empty-state"><div class="empty-icon">&#x1f50d;</div><div class="empty-text">No results for "' + escapeHtml(query) + '"</div><div class="empty-sub">Searched full history including channels</div></div>';
+      el.innerHTML = '<div class="empty-state"><div class="empty-icon" style="font-size:40px;opacity:0.2">--</div><div class="empty-text">No results for "' + escapeHtml(query) + '"</div><div class="empty-sub">Searched full history including channels</div></div>';
       return;
     }
     // Render search results directly (don't overwrite cachedHistory)
@@ -5261,14 +5445,14 @@ function buildMsgActions(msgId) {
 
   var msg = cachedHistory.find(function(m) { return m.id === msgId; });
   var isDeletable = msg && (msg.from === 'dashboard' || msg.from === 'Dashboard' || msg.from === 'system' || msg.from === '__system__');
-  var deleteBtn = isDeletable ? '<button class="msg-action-btn" onclick="deleteMessage(\'' + msgId + '\')" title="Delete" style="color:var(--red,#e74c3c)">&#x1f5d1;&#xFE0F;</button>' : '';
+  var deleteBtn = isDeletable ? '<button class="msg-action-btn" onclick="deleteMessage(\'' + msgId + '\')" title="Delete" style="color:var(--red,#e74c3c)">Del</button>' : '';
 
   return '<div class="msg-actions">' +
-    '<button class="msg-action-btn" onclick="toggleReactPicker(\'' + msgId + '\')" title="React">&#x1f600;</button>' +
+    '<button class="msg-action-btn" onclick="toggleReactPicker(\'' + msgId + '\')" title="React">+</button>' +
     '<button class="msg-action-btn' + pinClass + '" onclick="togglePin(\'' + msgId + '\')" title="Pin">\ud83d\udccc</button>' +
     '<button class="msg-action-btn' + starClass + '" onclick="toggleBookmark(\'' + msgId + '\')" title="Bookmark">' + starChar + '</button>' +
-    '<button class="msg-action-btn" onclick="copyMessage(\'' + msgId + '\', this)" title="Copy">&#x1f4cb;</button>' +
-    '<button class="msg-action-btn" onclick="openEditMessage(\'' + msgId + '\')" title="Edit">&#x270F;&#xFE0F;</button>' +
+    '<button class="msg-action-btn" onclick="copyMessage(\'' + msgId + '\', this)" title="Copy">Copy</button>' +
+    '<button class="msg-action-btn" onclick="openEditMessage(\'' + msgId + '\')" title="Edit">Edit</button>' +
     deleteBtn +
     '<div class="react-picker" id="react-' + msgId + '">' +
       REACTION_EMOJIS.map(function(e) { return '<button class="react-emoji" onclick="addReaction(\'' + msgId + '\',\'' + e + '\')">' + e + '</button>'; }).join('') +
@@ -5281,7 +5465,7 @@ function copyMessage(msgId, btn) {
   if (!msg) return;
   navigator.clipboard.writeText(msg.content).then(function() {
     var orig = btn.innerHTML;
-    btn.innerHTML = '&#x2705;';
+    btn.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8l3 3 7-7"/></svg>';
     btn.title = 'Copied!';
     setTimeout(function() { btn.innerHTML = orig; btn.title = 'Copy'; }, 1500);
   });
@@ -5381,11 +5565,11 @@ function applyTheme(theme) {
   currentTheme = theme;
   if (theme === 'light') {
     document.documentElement.setAttribute('data-theme', 'light');
-    document.getElementById('theme-toggle').innerHTML = '&#x2600;&#xfe0f;';
   } else {
     document.documentElement.removeAttribute('data-theme');
-    document.getElementById('theme-toggle').innerHTML = '&#x1f319;';
   }
+  var themeBtn = document.getElementById('theme-toggle');
+  if (themeBtn) themeBtn.innerHTML = theme === 'light' ? 'Light' : 'Dark';
   localStorage.setItem('ltt-theme', theme);
 }
 
@@ -5504,6 +5688,7 @@ function copyText(el) {
 // ==================== AGENT STATS ====================
 
 function renderAgentStats() {
+  if (!document.getElementById('agent-stats')) return;
   var el = document.getElementById('agent-stats');
   if (!cachedHistory.length) {
     el.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:4px;">No data yet</div>';
@@ -5575,6 +5760,7 @@ function fetchActivity() {
 
 function renderActivityHeatmap(data) {
   var el = document.getElementById('activity-heatmap');
+  if (!el) return;
   if (!data.agents || !Object.keys(data.agents).length) {
     el.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:4px;">No activity data</div>';
     return;
@@ -5593,7 +5779,7 @@ function renderActivityHeatmap(data) {
     html += '<div class="activity-agent">' +
       '<div class="activity-label">' +
         '<span class="activity-name" style="color:' + color + '">' + escapeHtml(name) + '</span>' +
-        '<span class="activity-pct">' + pct + '%</span>' +
+        '<span class="activity-pct">' + pct + '<span style="font-size:0.75em;margin-left:1px">%</span></span>' +
       '</div>' +
       '<div class="activity-bar">' +
         '<div class="activity-fill" style="width:' + pct + '%;background:' + color + '"></div>' +
@@ -5632,13 +5818,14 @@ function toggleBookmark(msgId) {
 }
 
 function renderBookmarksSidebar() {
+  if (!document.getElementById('bookmarks-list')) return;
   var el = document.getElementById('bookmarks-list');
   var countEl = document.getElementById('bookmark-count');
   var clearEl = document.getElementById('bookmark-clear');
   var ids = Object.keys(bookmarks);
 
   if (!ids.length) {
-    el.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:4px;">No bookmarks yet<br><span style="font-size:10px;opacity:0.7">Hover a message and click &#x2606; to bookmark</span></div>';
+    el.innerHTML = '<div style="color:var(--text-muted);font-size:12px;padding:4px;">No bookmarks yet<br><span style="font-size:10px;opacity:0.7">Hover a message and click star to bookmark</span></div>';
     countEl.style.display = 'none';
     clearEl.style.display = 'none';
     return;
@@ -5710,19 +5897,28 @@ function exportJSON() {
 
 // ==================== VIEW SWITCHING ====================
 
-var activeView = 'office';
+var activeView = localStorage.getItem('neohive_activeView') || 'overview';
 
 function switchView(view) {
   activeView = view;
-  document.getElementById('tab-messages').classList.toggle('active', view === 'messages');
-  document.getElementById('tab-tasks').classList.toggle('active', view === 'tasks');
-  document.getElementById('tab-workspaces').classList.toggle('active', view === 'workspaces');
-  document.getElementById('tab-workflows').classList.toggle('active', view === 'workflows');
-  document.getElementById('tab-plan').classList.toggle('active', view === 'plan');
-  document.getElementById('tab-launch').classList.toggle('active', view === 'launch');
-  document.getElementById('tab-rules').classList.toggle('active', view === 'rules');
-  document.getElementById('tab-stats').classList.toggle('active', view === 'stats');
-  document.getElementById('tab-docs').classList.toggle('active', view === 'docs');
+  try { localStorage.setItem('neohive_activeView', view); } catch {}
+  // Reset render hashes so switching tabs forces a fresh render
+  _lastTasksHash = '';
+  _lastAgentsHash = '';
+  if (renderOverview._lastHash) renderOverview._lastHash = '';
+  // Update nav sidebar active state
+  var navItems = document.querySelectorAll('.nav-item');
+  for (var i = 0; i < navItems.length; i++) {
+    navItems[i].classList.toggle('active', navItems[i].getAttribute('data-view') === view);
+  }
+  // Update old tab active states (kept for compatibility)
+  var tabIds = ['messages','tasks','workspaces','workflows','plan','launch','rules','stats','docs'];
+  for (var t = 0; t < tabIds.length; t++) {
+    var el = document.getElementById('tab-' + tabIds[t]);
+    if (el) el.classList.toggle('active', view === tabIds[t]);
+  }
+  // Toggle view areas
+  document.getElementById('overview-area').classList.toggle('visible', view === 'overview');
   document.getElementById('messages').style.display = view === 'messages' ? 'flex' : 'none';
   document.getElementById('tasks-area').classList.toggle('visible', view === 'tasks');
   document.getElementById('workspaces-area').classList.toggle('visible', view === 'workspaces');
@@ -5735,6 +5931,9 @@ function switchView(view) {
   document.getElementById('docs-area').classList.toggle('visible', view === 'docs');
   document.getElementById('search-bar').style.display = view === 'messages' ? 'flex' : 'none';
   document.getElementById('channel-filter-bar').style.display = view === 'messages' && activeChannel !== undefined ? '' : 'none';
+  var composeBar = document.querySelector('.msg-input-bar');
+  if (composeBar) composeBar.style.display = (view === 'messages') ? 'flex' : 'none';
+  if (view === 'overview') renderOverview();
   if (view === 'messages') renderChannelBar(cachedHistory);
   if (view === 'tasks') fetchTasks();
   if (view === 'workspaces') fetchWorkspaces();
@@ -5744,7 +5943,6 @@ function switchView(view) {
   if (view === 'launch') renderLaunchPanel();
   if (view === 'rules') fetchRules();
   if (view === 'stats') fetchStats();
-  // Auto-close sidebar on mobile after view switch
   if (isMobile) closeSidebar();
 }
 
@@ -5754,7 +5952,10 @@ var cachedTasks = [];
 
 function fetchTasks() {
   var pq = projectParam();
-  document.getElementById('tasks-area').innerHTML = '<div class="loading-spinner">Loading tasks...</div>';
+  var tasksArea = document.getElementById('tasks-area');
+  if (tasksArea && !tasksArea.querySelector('.kanban') && !tasksArea.querySelector('.tasks-empty')) {
+    tasksArea.innerHTML = '<div class="loading-spinner">Loading tasks...</div>';
+  }
   lttFetch('/api/tasks' + pq).then(function(r) { return r.json(); }).then(function(tasks) {
     cachedTasks = Array.isArray(tasks) ? tasks : [];
     renderTasks();
@@ -5764,9 +5965,13 @@ function fetchTasks() {
   });
 }
 
+var _lastTasksHash = '';
 function renderTasks() {
   var el = document.getElementById('tasks-area');
+  var savedScroll = el.scrollTop;
   if (!cachedTasks.length) {
+    _lastTasksHash = '';
+
     el.innerHTML = '<div class="kanban">' +
       '<div class="kanban-col">' +
         '<div class="kanban-title pending">Pending<span class="kanban-count">0</span></div>' +
@@ -5789,6 +5994,11 @@ function renderTasks() {
     return;
   }
 
+  // Data hash to skip unnecessary DOM rebuilds
+  var tasksHash = cachedTasks.map(function(t) { return t.id + ':' + t.status + ':' + (t.assignee || ''); }).join('|');
+  if (tasksHash === _lastTasksHash) return;
+  _lastTasksHash = tasksHash;
+
   var groups = { pending: [], in_progress: [], in_review: [], done: [], blocked: [] };
   for (var i = 0; i < cachedTasks.length; i++) {
     var t = cachedTasks[i];
@@ -5817,7 +6027,10 @@ function renderTasks() {
     html += '</div>';
   }
   html += '</div>';
-  el.innerHTML = html;
+  if (el.innerHTML !== html) {
+    el.innerHTML = html;
+    el.scrollTop = savedScroll;
+  }
 }
 
 function buildTaskCard(t) {
@@ -5846,7 +6059,7 @@ function buildTaskCard(t) {
     notesHtml = '<div style="font-size:10px;color:var(--text-muted);margin-top:4px;font-style:italic">' + escapeHtml(lastNote.by) + ': ' + escapeHtml((lastNote.text || '').substring(0, 80)) + '</div>';
   }
 
-  return '<div class="task-card" draggable="true" data-task-id="' + t.id + '" ondragstart="onTaskDragStart(event)" ondragend="onTaskDragEnd(event)">' +
+  return '<div class="task-card" draggable="true" data-task-id="' + t.id + '" ondragstart="onTaskDragStart(event)" ondragend="onTaskDragEnd(event)" onclick="showTaskDetail(\'' + t.id + '\')">' +
     '<div class="task-title">' + escapeHtml(t.title || 'Untitled') + (badgesHtml ? ' ' + badgesHtml : '') + '</div>' +
     (t.description ? '<div class="task-desc">' + escapeHtml(t.description) + '</div>' : '') +
     notesHtml +
@@ -5868,6 +6081,152 @@ function updateTaskStatus(taskId, newStatus) {
   }).catch(function(e) { console.error('Task update failed:', e); });
 }
 
+// ==================== TASK DETAIL VIEW ====================
+
+function showTaskDetail(taskId) {
+  var task = cachedTasks.find(function(t) { return t.id === taskId; });
+  if (!task) return;
+  var el = document.getElementById('task-detail-content');
+  if (!el) return;
+  var statusColors = { pending: 'var(--yellow)', in_progress: 'var(--accent)', in_review: 'var(--purple)', done: 'var(--green)', blocked: 'var(--red)' };
+  var statusColor = statusColors[task.status] || 'var(--text-muted)';
+
+  var html = '';
+  html += '<div style="margin-bottom:16px"><div style="font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px">' + escapeHtml(task.title || 'Untitled') + '</div>';
+  html += '<span style="font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600;background:' + statusColor + '20;color:' + statusColor + '">' + escapeHtml(task.status || 'pending') + '</span></div>';
+
+  if (task.description) {
+    html += '<div style="font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:16px;padding:12px;background:var(--surface-2);border-radius:8px">' + escapeHtml(task.description) + '</div>';
+  }
+
+  html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;font-size:12px">';
+  html += '<div style="color:var(--text-muted)">Assignee <div style="color:var(--text);font-weight:600;margin-top:2px">' + escapeHtml(task.assignee || 'Unassigned') + '</div></div>';
+  html += '<div style="color:var(--text-muted)">Created by <div style="color:var(--text);font-weight:600;margin-top:2px">' + escapeHtml(task.created_by || '?') + '</div></div>';
+  html += '<div style="color:var(--text-muted)">Created <div style="color:var(--text);margin-top:2px">' + (task.created_at ? new Date(task.created_at).toLocaleString() : '?') + '</div></div>';
+  html += '<div style="color:var(--text-muted)">Updated <div style="color:var(--text);margin-top:2px">' + (task.updated_at ? new Date(task.updated_at).toLocaleString() : '?') + '</div></div>';
+  html += '</div>';
+
+  // Notes
+  if (task.notes && task.notes.length) {
+    html += '<div style="margin-bottom:16px"><div style="font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px">Notes (' + task.notes.length + ')</div>';
+    for (var n = 0; n < task.notes.length; n++) {
+      var note = task.notes[n];
+      html += '<div style="font-size:12px;padding:6px 8px;background:var(--surface-2);border-radius:6px;margin-bottom:4px"><span style="font-weight:600;color:var(--text)">' + escapeHtml(note.by || '?') + '</span> <span style="color:var(--text-muted);font-size:10px">' + (note.at ? timeAgo(note.at) : '') + '</span><div style="color:var(--text-dim);margin-top:2px">' + escapeHtml(note.text || '') + '</div></div>';
+    }
+    html += '</div>';
+  }
+
+  // Action buttons
+  var canEdit = task.status === 'pending';
+  var canDelete = task.status !== 'in_progress';
+  html += '<div style="border-top:1px solid var(--border);padding-top:12px;display:flex;justify-content:flex-end;gap:8px">';
+  if (canEdit) {
+    html += '<button class="btn btn-primary" onclick="editTask(\'' + task.id + '\')" style="font-size:12px">Edit</button>';
+  } else {
+    html += '<button class="btn" disabled style="font-size:12px;opacity:0.3;cursor:not-allowed" title="Only pending tasks can be edited">Edit</button>';
+  }
+  if (canDelete) {
+    html += '<button class="btn btn-danger" id="task-delete-btn" onclick="confirmDeleteTask(\'' + task.id + '\')" style="font-size:12px">Delete Task</button>';
+  } else {
+    html += '<button class="btn btn-danger" disabled style="font-size:12px;opacity:0.4;cursor:not-allowed" title="Cannot delete active task">Delete Task</button>';
+  }
+  html += '</div>';
+
+  el.innerHTML = html;
+  var taskOverlay = document.getElementById('task-detail-overlay');
+  if (taskOverlay) taskOverlay.classList.add('open');
+}
+
+function closeTaskDetail() {
+  var taskOv = document.getElementById('task-detail-overlay');
+  if (taskOv) taskOv.classList.remove('open');
+  var btn = document.getElementById('task-delete-btn');
+  if (btn) { btn.textContent = 'Delete Task'; btn._confirming = false; }
+}
+
+function editTask(taskId) {
+  var task = cachedTasks.find(function(t) { return t.id === taskId; });
+  if (!task) return;
+  var el = document.getElementById('task-detail-content');
+  if (!el) return;
+  var html = '';
+  html += '<div style="font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px">Edit Task</div>';
+  html += '<div style="margin-bottom:12px"><label style="font-size:12px;color:var(--text-muted);display:block;margin-bottom:4px">Title</label>';
+  html += '<input type="text" id="task-edit-title" value="' + escapeHtml(task.title || '') + '" style="width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text);outline:none"></div>';
+  html += '<div style="margin-bottom:12px"><label style="font-size:12px;color:var(--text-muted);display:block;margin-bottom:4px">Description</label>';
+  html += '<textarea id="task-edit-desc" style="width:100%;min-height:80px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text);outline:none;resize:vertical;font-family:inherit">' + escapeHtml(task.description || '') + '</textarea></div>';
+  html += '<div style="margin-bottom:16px"><label style="font-size:12px;color:var(--text-muted);display:block;margin-bottom:4px">Assignee</label>';
+  html += '<input type="text" id="task-edit-assignee" value="' + escapeHtml(task.assignee || '') + '" placeholder="Agent name" style="width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text);outline:none"></div>';
+  html += '<div style="display:flex;gap:8px;justify-content:flex-end">';
+  html += '<button class="btn" onclick="showTaskDetail(\'' + taskId + '\')" style="font-size:12px">Cancel</button>';
+  html += '<button class="btn btn-primary" onclick="saveTaskEdit(\'' + taskId + '\')" style="font-size:12px">Save Changes</button>';
+  html += '</div>';
+  el.innerHTML = html;
+}
+
+function saveTaskEdit(taskId) {
+  var title = document.getElementById('task-edit-title').value.trim();
+  var desc = document.getElementById('task-edit-desc').value.trim();
+  var assignee = document.getElementById('task-edit-assignee').value.trim();
+  if (!title) { showToast('!', 'Title is required'); return; }
+  lttFetch('/api/tasks' + projectParam(), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ task_id: taskId, title: title, description: desc, assignee: assignee || null })
+  }).then(function(r) { return r.json(); }).then(function(data) {
+    if (data.error) {
+      showToast('!', data.error);
+    } else {
+      showToast('&#x2713;', 'Task updated');
+      closeTaskDetail();
+      fetchTasks();
+    }
+  }).catch(function() {
+    showToast('!', 'Save failed');
+  });
+}
+
+var _taskDeleteTimer = null;
+function confirmDeleteTask(taskId) {
+  var btn = document.getElementById('task-delete-btn');
+  if (!btn) return;
+  if (!btn._confirming) {
+    btn._confirming = true;
+    btn.textContent = 'Confirm Delete';
+    btn.style.background = 'var(--red-dim)';
+    _taskDeleteTimer = setTimeout(function() {
+      btn.textContent = 'Delete Task';
+      btn.style.background = '';
+      btn._confirming = false;
+    }, 3000);
+  } else {
+    if (_taskDeleteTimer) clearTimeout(_taskDeleteTimer);
+    btn.textContent = 'Deleting...';
+    btn.disabled = true;
+    lttFetch('/api/tasks' + projectParam(), {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ task_id: taskId })
+    }).then(function(r) { return r.json(); }).then(function(data) {
+      if (data.error) {
+        showToast('!', 'Delete failed: ' + data.error);
+        btn.textContent = 'Delete Task';
+        btn.disabled = false;
+        btn._confirming = false;
+      } else {
+        showToast('&#x2713;', 'Task deleted');
+        closeTaskDetail();
+        fetchTasks();
+      }
+    }).catch(function() {
+      showToast('!', 'Delete failed');
+      btn.textContent = 'Delete Task';
+      btn.disabled = false;
+      btn._confirming = false;
+    });
+  }
+}
+
 // ==================== KANBAN DRAG-AND-DROP ====================
 
 var draggedTaskId = null;
@@ -5912,7 +6271,7 @@ function onKanbanDrop(e) {
 
 // ==================== STATS VIEW ====================
 
-var AGENT_COLORS = ['#58a6ff', '#f78166', '#7ee787', '#d2a8ff', '#ffa657', '#ff7b72', '#79c0ff', '#56d364'];
+var AGENT_COLORS = ['#f59e0b', '#f97316', '#7ee787', '#d29922', '#ffa657', '#14b8a6', '#f778ba', '#56d364'];
 
 function fetchStats() {
   var pq = activeProject ? '?project=' + encodeURIComponent(activeProject) : '';
@@ -6203,13 +6562,13 @@ function deleteRule(ruleId) {
 // ==================== EXPORT MENU ====================
 
 function toggleExportMenu() {
-  var menu = document.getElementById('export-menu');
+  var menu = document.getElementById('export-menu') || document.createElement('div');
   menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
 }
 
 // Close menu on outside click
 document.addEventListener('click', function(e) {
-  var menu = document.getElementById('export-menu');
+  var menu = document.getElementById('export-menu') || document.createElement('div');
   if (menu && menu.style.display !== 'none' && !e.target.closest('#export-menu') && !e.target.closest('.btn-primary')) {
     menu.style.display = 'none';
   }
@@ -6281,23 +6640,75 @@ function showProfilePopup(agentName, event) {
 
 document.addEventListener('click', function() {
   document.getElementById('profile-popup').classList.remove('open');
+  // Reset delete button if popup closes
+  var delBtn = document.getElementById('pp-delete-btn');
+  if (delBtn) { delBtn.textContent = 'Delete Agent'; delBtn._confirming = false; }
 });
 
+var _deleteConfirmTimer = null;
+function confirmDeleteAgent() {
+  var btn = document.getElementById('pp-delete-btn');
+  if (!editingAgent) return;
+  if (!btn._confirming) {
+    // First click: change to confirm state
+    btn._confirming = true;
+    btn.textContent = 'Confirm Delete';
+    btn.style.background = 'var(--red-dim)';
+    // Reset after 3s if not confirmed
+    _deleteConfirmTimer = setTimeout(function() {
+      btn.textContent = 'Delete Agent';
+      btn.style.background = '';
+      btn._confirming = false;
+    }, 3000);
+  } else {
+    // Second click: actually delete
+    if (_deleteConfirmTimer) clearTimeout(_deleteConfirmTimer);
+    btn.textContent = 'Deleting...';
+    btn.disabled = true;
+    var agentName = editingAgent;
+    var pq = projectParam();
+    lttFetch('/api/agents' + pq, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: agentName })
+    }).then(function(r) { return r.json(); }).then(function(data) {
+      if (data.error) {
+        showToast('!', 'Delete failed: ' + data.error);
+        btn.textContent = 'Delete Agent';
+        btn.disabled = false;
+        btn._confirming = false;
+      } else {
+        showToast('&#x2713;', agentName + ' removed');
+        document.getElementById('profile-popup').classList.remove('open');
+        btn.textContent = 'Delete Agent';
+        btn.disabled = false;
+        btn._confirming = false;
+        poll(); // Refresh agents
+      }
+    }).catch(function() {
+      showToast('!', 'Delete failed');
+      btn.textContent = 'Delete Agent';
+      btn.disabled = false;
+      btn._confirming = false;
+    });
+  }
+}
+
 // ==================== v3.0: PROFILE EDITOR ====================
 
 var BUILT_IN_AVATARS = [
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2358a6ff'/%3E%3Ccircle cx='22' cy='26' r='4' fill='%23fff'/%3E%3Ccircle cx='42' cy='26' r='4' fill='%23fff'/%3E%3Crect x='20' y='38' width='24' height='4' rx='2' fill='%23fff'/%3E%3Crect x='14' y='12' width='6' height='10' rx='3' fill='%2358a6ff' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='44' y='12' width='6' height='10' rx='3' fill='%2358a6ff' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E",
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23f59e0b'/%3E%3Ccircle cx='22' cy='26' r='4' fill='%23fff'/%3E%3Ccircle cx='42' cy='26' r='4' fill='%23fff'/%3E%3Crect x='20' y='38' width='24' height='4' rx='2' fill='%23fff'/%3E%3Crect x='14' y='12' width='6' height='10' rx='3' fill='%23f59e0b' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='44' y='12' width='6' height='10' rx='3' fill='%23f59e0b' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E",
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%233fb950'/%3E%3Ccircle cx='22' cy='26' r='5' fill='%23fff'/%3E%3Ccircle cx='42' cy='26' r='5' fill='%23fff'/%3E%3Ccircle cx='22' cy='26' r='2' fill='%23333'/%3E%3Ccircle cx='42' cy='26' r='2' fill='%23333'/%3E%3Cpath d='M20 38 Q32 46 44 38' stroke='%23fff' fill='none' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E",
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23d29922'/%3E%3Crect x='16' y='22' width='12' height='8' rx='2' fill='%23fff'/%3E%3Crect x='36' y='22' width='12' height='8' rx='2' fill='%23fff'/%3E%3Ccircle cx='22' cy='26' r='2' fill='%23333'/%3E%3Ccircle cx='42' cy='26' r='2' fill='%23333'/%3E%3Cpath d='M24 40 H40' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E",
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23f85149'/%3E%3Ccircle cx='22' cy='26' r='4' fill='%23fff'/%3E%3Ccircle cx='42' cy='26' r='4' fill='%23fff'/%3E%3Ccircle cx='22' cy='26' r='2' fill='%23333'/%3E%3Ccircle cx='42' cy='26' r='2' fill='%23333'/%3E%3Cpath d='M22 40 Q32 34 42 40' stroke='%23fff' fill='none' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E",
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23bc8cff'/%3E%3Ccircle cx='22' cy='28' r='4' fill='%23fff'/%3E%3Ccircle cx='42' cy='28' r='4' fill='%23fff'/%3E%3Cpath d='M16 18 L22 24' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M48 18 L42 24' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cellipse cx='32' cy='42' rx='8' ry='4' fill='%23fff'/%3E%3C/svg%3E",
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23fb923c'/%3E%3Ccircle cx='22' cy='28' r='4' fill='%23fff'/%3E%3Ccircle cx='42' cy='28' r='4' fill='%23fff'/%3E%3Cpath d='M16 18 L22 24' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M48 18 L42 24' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Cellipse cx='32' cy='42' rx='8' ry='4' fill='%23fff'/%3E%3C/svg%3E",
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23f778ba'/%3E%3Ccircle cx='24' cy='26' r='6' fill='%23fff'/%3E%3Ccircle cx='40' cy='26' r='6' fill='%23fff'/%3E%3Ccircle cx='24' cy='26' r='3' fill='%23333'/%3E%3Ccircle cx='40' cy='26' r='3' fill='%23333'/%3E%3Cpath d='M26 40 Q32 46 38 40' stroke='%23fff' fill='none' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E",
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2379c0ff'/%3E%3Crect x='17' y='23' width='10' height='6' rx='3' fill='%23fff'/%3E%3Crect x='37' y='23' width='10' height='6' rx='3' fill='%23fff'/%3E%3Cpath d='M22 38 L32 44 L42 38' stroke='%23fff' fill='none' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E",
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23fbbf24'/%3E%3Crect x='17' y='23' width='10' height='6' rx='3' fill='%23fff'/%3E%3Crect x='37' y='23' width='10' height='6' rx='3' fill='%23fff'/%3E%3Cpath d='M22 38 L32 44 L42 38' stroke='%23fff' fill='none' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E",
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%237ee787'/%3E%3Ccircle cx='22' cy='26' r='4' fill='%23fff'/%3E%3Ccircle cx='42' cy='26' r='4' fill='%23fff'/%3E%3Ccircle cx='23' cy='25' r='2' fill='%23333'/%3E%3Ccircle cx='43' cy='25' r='2' fill='%23333'/%3E%3Cpath d='M20 38 Q32 48 44 38' stroke='%23fff' fill='none' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E",
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23e3b341'/%3E%3Cpath d='M18 22 L26 30 L18 30Z' fill='%23fff'/%3E%3Cpath d='M46 22 L38 30 L46 30Z' fill='%23fff'/%3E%3Crect x='24' y='38' width='16' height='6' rx='3' fill='%23fff'/%3E%3C/svg%3E",
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23ffa198'/%3E%3Ccircle cx='22' cy='26' r='5' fill='%23fff'/%3E%3Ccircle cx='42' cy='26' r='5' fill='%23fff'/%3E%3Ccircle cx='22' cy='27' r='2.5' fill='%23333'/%3E%3Ccircle cx='42' cy='27' r='2.5' fill='%23333'/%3E%3Cellipse cx='32' cy='42' rx='6' ry='3' fill='%23fff'/%3E%3C/svg%3E",
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230969da'/%3E%3Crect x='16' y='20' width='14' height='10' rx='2' fill='%23fff'/%3E%3Crect x='34' y='20' width='14' height='10' rx='2' fill='%23fff'/%3E%3Ccircle cx='23' cy='25' r='2' fill='%230969da'/%3E%3Ccircle cx='41' cy='25' r='2' fill='%230969da'/%3E%3Crect x='26' y='38' width='12' height='4' rx='2' fill='%23fff'/%3E%3C/svg%3E",
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238250df'/%3E%3Ccircle cx='24' cy='24' r='5' fill='%23fff'/%3E%3Ccircle cx='40' cy='24' r='5' fill='%23fff'/%3E%3Ccircle cx='24' cy='24' r='2' fill='%238250df'/%3E%3Ccircle cx='40' cy='24' r='2' fill='%238250df'/%3E%3Cpath d='M20 38 Q32 50 44 38' stroke='%23fff' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='10' r='4' fill='%23fff'/%3E%3C/svg%3E",
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23d97706'/%3E%3Crect x='16' y='20' width='14' height='10' rx='2' fill='%23fff'/%3E%3Crect x='34' y='20' width='14' height='10' rx='2' fill='%23fff'/%3E%3Ccircle cx='23' cy='25' r='2' fill='%23d97706'/%3E%3Ccircle cx='41' cy='25' r='2' fill='%23d97706'/%3E%3Crect x='26' y='38' width='12' height='4' rx='2' fill='%23fff'/%3E%3C/svg%3E",
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23b45309'/%3E%3Ccircle cx='24' cy='24' r='5' fill='%23fff'/%3E%3Ccircle cx='40' cy='24' r='5' fill='%23fff'/%3E%3Ccircle cx='24' cy='24' r='2' fill='%23b45309'/%3E%3Ccircle cx='40' cy='24' r='2' fill='%23b45309'/%3E%3Cpath d='M20 38 Q32 50 44 38' stroke='%23fff' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='10' r='4' fill='%23fff'/%3E%3C/svg%3E",
 ];
 
 var editingAgent = '';
@@ -6412,7 +6823,7 @@ function cdPickBodyType(el) {
 function cdRandomize() {
   var skinColors = ['#FFD5B8', '#F5D0A9', '#D4A574', '#C68642', '#8D5524', '#6B3E26', '#FFDFC4', '#F0C8A0', '#E0AC69', '#503335'];
   var hairColors = ['#4A3728', '#1a1a1a', '#8B4513', '#D4A574', '#333', '#8B0000', '#F5DEB3', '#FFD700', '#A52A2A', '#2C1608'];
-  var shirtColors = ['#58a6ff', '#f97316', '#a855f7', '#22c55e', '#ef4444', '#eab308', '#06b6d4', '#ec4899', '#6366f1', '#14b8a6'];
+  var shirtColors = ['#f59e0b', '#f97316', '#a855f7', '#22c55e', '#ef4444', '#eab308', '#06b6d4', '#ec4899', '#6366f1', '#14b8a6'];
   var pantsColors = ['#2d3748', '#3d2b1f', '#1e1b2e', '#1a2e1a', '#2e1a1a', '#2e2a1a', '#1a2e2e', '#2e1a28', '#1a1a3e', '#1e2e2e'];
   var shoeColors = ['#1a1a2e', '#2a1a0a', '#0a0a0a', '#3a2a1a', '#1a0a0a'];
   var hairStyles = ['none', 'short', 'spiky', 'long', 'ponytail', 'bob', 'curly', 'afro', 'bun', 'braids', 'mohawk', 'wavy'];
@@ -6482,7 +6893,7 @@ function openProfileEditor() {
 
   // Set color pickers
   document.getElementById('pe-head-color').value = defApp.head_color || '#FFD5B8';
-  document.getElementById('pe-shirt-color').value = defApp.shirt_color || '#58a6ff';
+  document.getElementById('pe-shirt-color').value = defApp.shirt_color || '#f59e0b';
   document.getElementById('pe-hair-color').value = defApp.hair_color || '#4A3728';
   document.getElementById('pe-pants-color').value = defApp.pants_color || '#2d3748';
   document.getElementById('pe-shoe-color').value = defApp.shoe_color || '#1a1a2e';
@@ -6658,74 +7069,159 @@ function renderWorkspaces(data) {
 
 function fetchWorkflows() {
   var pq = projectParam();
-  document.getElementById('workflows-area').innerHTML = '<div class="loading-spinner">Loading workflows...</div>';
+  var wfArea = document.getElementById('workflows-area');
+  // Only show loading spinner on first load (no existing workflow elements)
+  if (wfArea && !wfArea.querySelector('[data-wf-id]') && !wfArea.querySelector('.tasks-empty')) {
+    wfArea.innerHTML = '<div class="loading-spinner">Loading workflows...</div>';
+  }
   lttFetch('/api/workflows' + pq).then(function(r) { return r.json(); }).then(function(data) {
     renderWorkflows(Array.isArray(data) ? data : []);
   }).catch(function() {});
 }
 
+function buildWorkflowHTML(wf) {
+  var doneCount = wf.steps.filter(function(s) { return s.status === 'done'; }).length;
+  var pct = Math.round((doneCount / wf.steps.length) * 100);
+  var statusColor = wf.status === 'completed' ? 'var(--green)' : 'var(--accent)';
+  var barColor = statusColor;
+
+  var stepsHtml = '';
+  for (var j = 0; j < wf.steps.length; j++) {
+    var s = wf.steps[j];
+    var stepColor = s.status === 'done' ? 'var(--green)' : s.status === 'in_progress' ? 'var(--accent)' : 'var(--text-muted)';
+    if (j > 0) stepsHtml += '<span class="step-arrow">&rarr;</span>';
+    var stepTimeHtml = '';
+    if (s.status === 'done' && s.started_at && s.completed_at) {
+      var dur = Math.round((new Date(s.completed_at) - new Date(s.started_at)) / 60000);
+      stepTimeHtml = '<div class="step-time" style="font-size:9px;color:var(--text-muted);margin-top:2px">' + (dur > 0 ? dur + 'm' : '<1m') + '</div>';
+    } else if (s.status === 'in_progress' && s.started_at) {
+      var elapsed = Math.round((Date.now() - new Date(s.started_at)) / 60000);
+      stepTimeHtml = '<div class="step-time" style="font-size:9px;color:var(--accent);margin-top:2px">' + elapsed + 'm elapsed</div>';
+    }
+    stepsHtml += '<div class="step-card ' + s.status + '" data-step-id="' + s.id + '" title="' + escapeHtml(s.notes || '') + '">' +
+      '<span class="step-num">' + s.id + '</span>' +
+      '<span class="step-status" style="font-size:10px;color:' + stepColor + ';font-weight:600;text-transform:uppercase">' + s.status.replace('_', ' ') + '</span>' +
+      '<div class="step-desc">' + escapeHtml(s.description) + '</div>' +
+      (s.assignee ? '<div class="step-assignee">' + escapeHtml(s.assignee) + '</div>' : '') +
+      stepTimeHtml +
+    '</div>';
+  }
+
+  var controlsHtml = wf.status === 'active' ? '<div class="wf-advance-controls" style="margin-top:8px;display:flex;gap:6px"><button class="btn btn-primary" onclick="dashAdvanceWorkflow(\'' + wf.id + '\')">Complete Step</button></div>' : '';
+
+  return '<div class="pipeline" data-wf-id="' + wf.id + '" style="cursor:pointer" onclick="showWorkflowDetail(\'' + wf.id + '\')">' +
+    '<div class="pipeline-header">' +
+      '<div class="pipeline-name">' + escapeHtml(wf.name) + ' <span class="wf-status-label" style="font-size:11px;color:' + statusColor + ';font-weight:600">' + escapeHtml(wf.status) + '</span></div>' +
+      '<div class="pipeline-progress">' + doneCount + '/' + wf.steps.length + ' (' + pct + '%)</div>' +
+    '</div>' +
+    '<div class="pipeline-bar"><div class="pipeline-bar-fill" style="width:' + pct + '%;background:' + barColor + '"></div></div>' +
+    '<div class="pipeline-steps">' + stepsHtml + '</div>' +
+    controlsHtml +
+  '</div>';
+}
+
 function renderWorkflows(workflows) {
   var el = document.getElementById('workflows-area');
   if (!workflows.length) {
-    el.innerHTML = '<div class="tasks-empty">No workflows yet. Agents create workflows with <code style="background:var(--surface-2);padding:2px 6px;border-radius:4px;font-size:12px;color:var(--orange)">create_workflow(name, steps)</code></div>';
+    if (!el.querySelector('.tasks-empty')) {
+      el.innerHTML = '<div class="tasks-empty">No workflows yet. Agents create workflows with <code style="background:var(--surface-2);padding:2px 6px;border-radius:4px;font-size:12px;color:var(--orange)">create_workflow(name, steps)</code></div>';
+    }
     return;
   }
 
-  var html = '';
+  // Remove empty-state if present
+  var emptyEl = el.querySelector('.tasks-empty');
+  if (emptyEl) emptyEl.remove();
+  // Remove loading spinner if present
+  var spinner = el.querySelector('.loading-spinner');
+  if (spinner) spinner.remove();
+
+  // Build map of existing workflow DOM elements
+  var existingEls = {};
+  el.querySelectorAll('[data-wf-id]').forEach(function(node) {
+    existingEls[node.getAttribute('data-wf-id')] = node;
+  });
+
+  // Track which IDs are in the new data
+  var activeIds = {};
+
   for (var i = 0; i < workflows.length; i++) {
     var wf = workflows[i];
-    var doneCount = wf.steps.filter(function(s) { return s.status === 'done'; }).length;
-    var pct = Math.round((doneCount / wf.steps.length) * 100);
-    var statusColor = wf.status === 'completed' ? 'var(--green)' : 'var(--accent)';
-
-    var barColor = wf.status === 'completed' ? 'var(--green)' : 'var(--accent)';
-    var metaHtml = '<div class="pipeline-meta">';
-    if (wf.created_by) metaHtml += '<span>Created by ' + escapeHtml(wf.created_by) + '</span>';
-    if (wf.created_at) metaHtml += '<span>' + timeAgo(wf.created_at) + '</span>';
-    if (wf.updated_at && wf.updated_at !== wf.created_at) metaHtml += '<span>Updated ' + timeAgo(wf.updated_at) + '</span>';
-    metaHtml += '</div>';
-
-    html += '<div class="pipeline">' +
-      '<div class="pipeline-header">' +
-        '<div class="pipeline-name">' + escapeHtml(wf.name) + ' <span style="font-size:11px;color:' + statusColor + ';font-weight:600">' + escapeHtml(wf.status) + '</span></div>' +
-        '<div class="pipeline-progress">' + doneCount + '/' + wf.steps.length + ' (' + pct + '%)</div>' +
-      '</div>' +
-      metaHtml +
-      '<div class="pipeline-bar"><div class="pipeline-bar-fill" style="width:' + pct + '%;background:' + barColor + '"></div></div>' +
-      '<div class="pipeline-steps">';
-
-    for (var j = 0; j < wf.steps.length; j++) {
-      var s = wf.steps[j];
-      var stepColor = s.status === 'done' ? 'var(--green)' : s.status === 'in_progress' ? 'var(--accent)' : 'var(--text-muted)';
-      if (j > 0) html += '<span class="step-arrow">&rarr;</span>';
-      var stepTimeHtml = '';
-      if (s.status === 'done' && s.started_at && s.completed_at) {
-        var dur = Math.round((new Date(s.completed_at) - new Date(s.started_at)) / 60000);
-        stepTimeHtml = '<div style="font-size:9px;color:var(--text-muted);margin-top:2px">' + (dur > 0 ? dur + 'm' : '<1m') + '</div>';
-      } else if (s.status === 'in_progress' && s.started_at) {
-        var elapsed = Math.round((Date.now() - new Date(s.started_at)) / 60000);
-        stepTimeHtml = '<div style="font-size:9px;color:var(--accent);margin-top:2px">' + elapsed + 'm elapsed</div>';
+    activeIds[wf.id] = true;
+    var existing = existingEls[wf.id];
+
+    if (existing) {
+      // PATCH existing workflow element in place
+      var doneCount = wf.steps.filter(function(s) { return s.status === 'done'; }).length;
+      var pct = Math.round((doneCount / wf.steps.length) * 100);
+
+      // Update progress text
+      var progEl = existing.querySelector('.pipeline-progress');
+      var newProg = doneCount + '/' + wf.steps.length + ' (' + pct + '%)';
+      if (progEl && progEl.textContent !== newProg) progEl.textContent = newProg;
+
+      // Update progress bar
+      var barFill = existing.querySelector('.pipeline-bar-fill');
+      if (barFill) {
+        var newWidth = pct + '%';
+        if (barFill.style.width !== newWidth) barFill.style.width = newWidth;
+        var barColor = wf.status === 'completed' ? 'var(--green)' : 'var(--accent)';
+        if (barFill.style.background !== barColor) barFill.style.background = barColor;
       }
 
-      html += '<div class="step-card ' + s.status + '" title="' + escapeHtml(s.notes || '') + '">' +
-        '<span class="step-num">' + s.id + '</span>' +
-        '<span style="font-size:10px;color:' + stepColor + ';font-weight:600;text-transform:uppercase">' + s.status.replace('_', ' ') + '</span>' +
-        '<div class="step-desc">' + escapeHtml(s.description) + '</div>' +
-        (s.assignee ? '<div class="step-assignee">&#x1f464; ' + escapeHtml(s.assignee) + '</div>' : '') +
-        stepTimeHtml +
-      '</div>';
-    }
-    html += '</div>';
+      // Update status label
+      var statusLabel = existing.querySelector('.wf-status-label');
+      if (statusLabel && statusLabel.textContent !== wf.status) {
+        statusLabel.textContent = wf.status;
+        statusLabel.style.color = wf.status === 'completed' ? 'var(--green)' : 'var(--accent)';
+      }
 
-    // Dashboard controls — advance or skip
-    if (wf.status === 'active') {
-      html += '<div style="margin-top:8px;display:flex;gap:6px">' +
-        '<button class="btn btn-primary" onclick="dashAdvanceWorkflow(\'' + wf.id + '\')">Advance Step</button>' +
-      '</div>';
+      // Update each step
+      for (var j = 0; j < wf.steps.length; j++) {
+        var s = wf.steps[j];
+        var stepEl = existing.querySelector('[data-step-id="' + s.id + '"]');
+        if (stepEl) {
+          var newClass = 'step-card ' + s.status;
+          if (stepEl.className !== newClass) stepEl.className = newClass;
+          // Update step status text
+          var stepStatusEl = stepEl.querySelector('.step-status');
+          var newStatusText = s.status.replace('_', ' ');
+          if (stepStatusEl && stepStatusEl.textContent !== newStatusText) {
+            var stepColor = s.status === 'done' ? 'var(--green)' : s.status === 'in_progress' ? 'var(--accent)' : 'var(--text-muted)';
+            stepStatusEl.textContent = newStatusText;
+            stepStatusEl.style.color = stepColor;
+          }
+          // Update elapsed time
+          var timeEl = stepEl.querySelector('.step-time');
+          if (s.status === 'in_progress' && s.started_at) {
+            var elapsed = Math.round((Date.now() - new Date(s.started_at)) / 60000);
+            var newTime = elapsed + 'm elapsed';
+            if (timeEl) { if (timeEl.textContent !== newTime) timeEl.textContent = newTime; }
+            else { stepEl.insertAdjacentHTML('beforeend', '<div class="step-time" style="font-size:9px;color:var(--accent);margin-top:2px">' + newTime + '</div>'); }
+          } else if (timeEl && s.status !== 'done') {
+            timeEl.remove();
+          }
+        }
+      }
+
+      var advControls = existing.querySelector('.wf-advance-controls');
+      if (wf.status === 'active') {
+        if (!advControls) {
+          existing.insertAdjacentHTML('beforeend', '<div class="wf-advance-controls" style="margin-top:8px;display:flex;gap:6px"><button class="btn btn-primary" onclick="dashAdvanceWorkflow(\'' + wf.id + '\')">Complete Step</button></div>');
+        }
+      } else if (advControls) {
+        advControls.remove();
+      }
+    } else {
+      // NEW workflow — append
+      el.insertAdjacentHTML('beforeend', buildWorkflowHTML(wf));
     }
-    html += '</div>';
   }
-  el.innerHTML = html;
+
+  // Remove workflows that no longer exist
+  Object.keys(existingEls).forEach(function(id) {
+    if (!activeIds[id]) existingEls[id].remove();
+  });
 }
 
 function dashAdvanceWorkflow(wfId) {
@@ -6736,6 +7232,150 @@ function dashAdvanceWorkflow(wfId) {
   }).then(function() { fetchWorkflows(); }).catch(function() {});
 }
 
+// ==================== WORKFLOW DETAIL VIEW ====================
+
+var _cachedWorkflows = [];
+
+// Override fetchWorkflows to cache
+var _origFetchWorkflows = fetchWorkflows;
+fetchWorkflows = function() {
+  var pq = projectParam();
+  var wfArea = document.getElementById('workflows-area');
+  if (wfArea && !wfArea.querySelector('[data-wf-id]') && !wfArea.querySelector('.tasks-empty')) {
+    wfArea.innerHTML = '<div class="loading-spinner">Loading workflows...</div>';
+  }
+  lttFetch('/api/workflows' + pq).then(function(r) { return r.json(); }).then(function(wfs) {
+    _cachedWorkflows = Array.isArray(wfs) ? wfs : [];
+    renderWorkflows(_cachedWorkflows);
+  }).catch(function() { _cachedWorkflows = []; renderWorkflows([]); });
+};
+
+function showWorkflowDetail(wfId) {
+  var wf = _cachedWorkflows.find(function(w) { return w.id === wfId; });
+  if (!wf) return;
+  var el = document.getElementById('wf-detail-content');
+  if (!el) return;
+  var steps = wf.steps || [];
+  var doneCount = steps.filter(function(s) { return s.status === 'done'; }).length;
+  var pct = steps.length > 0 ? Math.round((doneCount / steps.length) * 100) : 0;
+  var statusColors = { active: 'var(--accent)', completed: 'var(--green)', paused: 'var(--orange)' };
+  var statusColor = statusColors[wf.status] || 'var(--text-muted)';
+
+  var html = '';
+  // Header
+  html += '<div style="margin-bottom:16px">';
+  html += '<div style="font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px">' + escapeHtml(wf.name || 'Workflow') + '</div>';
+  html += '<span style="font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600;background:' + statusColor + '20;color:' + statusColor + '">' + escapeHtml(wf.status) + '</span>';
+  if (wf.autonomous) html += ' <span style="font-size:10px;padding:2px 6px;border-radius:4px;background:var(--accent-dim);color:var(--accent);font-weight:600">AUTO</span>';
+  if (wf.parallel) html += ' <span style="font-size:10px;padding:2px 6px;border-radius:4px;background:var(--purple-dim);color:var(--purple);font-weight:600">PARALLEL</span>';
+  html += '</div>';
+
+  // Info grid
+  html += '<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px;font-size:12px">';
+  html += '<div style="color:var(--text-muted)">Progress <div style="color:var(--text);font-weight:700;font-size:16px;margin-top:2px">' + pct + '<span style="font-size:12px;margin-left:1px">%</span></div></div>';
+  html += '<div style="color:var(--text-muted)">Created by <div style="color:var(--text);font-weight:600;margin-top:2px">' + escapeHtml(wf.created_by || '?') + '</div></div>';
+  html += '<div style="color:var(--text-muted)">Created <div style="color:var(--text);margin-top:2px">' + (wf.created_at ? timeAgo(wf.created_at) : '?') + '</div></div>';
+  html += '</div>';
+
+  // Progress bar
+  html += '<div style="height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:16px"><div style="height:100%;width:' + pct + '%;background:' + statusColor + ';border-radius:3px;transition:width 0.3s"></div></div>';
+
+  // Steps
+  html += '<div style="font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px">Steps (' + doneCount + '/' + steps.length + ')</div>';
+  for (var i = 0; i < steps.length; i++) {
+    var s = steps[i];
+    var sColor = s.status === 'done' ? 'var(--green)' : s.status === 'in_progress' ? 'var(--accent)' : s.status === 'awaiting_approval' ? 'var(--orange)' : 'var(--text-muted)';
+    html += '<div style="background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:6px;border-left:3px solid ' + sColor + '">';
+    html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">';
+    html += '<span style="font-size:13px;font-weight:600;color:var(--text)">Step ' + (s.id || i+1) + ': ' + escapeHtml((s.description || '').substring(0, 80)) + '</span>';
+    html += '<span style="font-size:10px;padding:2px 6px;border-radius:4px;background:' + sColor + '20;color:' + sColor + ';font-weight:600">' + escapeHtml(s.status || 'pending').replace('_', ' ') + '</span>';
+    html += '</div>';
+    html += '<div style="font-size:11px;color:var(--text-muted)">';
+    if (s.assignee) html += 'Assignee: <span style="color:var(--text)">' + escapeHtml(s.assignee) + '</span>';
+    if (s.started_at) html += ' | Started: ' + timeAgo(s.started_at);
+    if (s.completed_at) html += ' | Done: ' + timeAgo(s.completed_at);
+    html += '</div>';
+    if (s.notes) html += '<div style="font-size:11px;color:var(--text-dim);margin-top:4px;font-style:italic">' + escapeHtml(s.notes.substring(0, 200)) + '</div>';
+    html += '</div>';
+  }
+
+  // Checkpoints
+  if (wf.checkpoints && wf.checkpoints.length > 0) {
+    html += '<div style="font-size:13px;font-weight:600;color:var(--text);margin:12px 0 8px">Checkpoints (' + wf.checkpoints.length + ')</div>';
+    for (var c = 0; c < wf.checkpoints.length; c++) {
+      var cp = wf.checkpoints[c];
+      html += '<div style="font-size:12px;padding:6px 8px;background:var(--surface-2);border-radius:6px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center">';
+      html += '<span style="color:var(--text-dim)">Step ' + cp.step_id + ' — ' + escapeHtml((cp.step_description || '').substring(0, 50)) + ' <span style="color:var(--text-muted)">' + (cp.completed_at ? timeAgo(cp.completed_at) : '') + '</span></span>';
+      html += '</div>';
+    }
+  }
+
+  // Actions
+  var canDelete = wf.status !== 'active';
+  html += '<div style="border-top:1px solid var(--border);padding-top:12px;margin-top:12px;display:flex;justify-content:flex-end;gap:8px">';
+  if (wf.status === 'active') {
+    html += '<button class="btn btn-primary" onclick="event.stopPropagation();dashAdvanceWorkflow(\'' + wf.id + '\');closeWfDetail()" style="font-size:12px">Complete Step</button>';
+  }
+  if (canDelete) {
+    html += '<button class="btn btn-danger" id="wf-delete-btn" onclick="event.stopPropagation();confirmDeleteWorkflow(\'' + wf.id + '\')" style="font-size:12px">Delete</button>';
+  } else {
+    html += '<button class="btn btn-danger" disabled style="font-size:12px;opacity:0.4;cursor:not-allowed" title="Cannot delete active workflow">Delete</button>';
+  }
+  html += '</div>';
+
+  el.innerHTML = html;
+  var wfOverlay = document.getElementById('wf-detail-overlay');
+  if (wfOverlay) wfOverlay.classList.add('open');
+}
+
+function closeWfDetail() {
+  var wfOv = document.getElementById('wf-detail-overlay');
+  if (wfOv) wfOv.classList.remove('open');
+  var btn = document.getElementById('wf-delete-btn');
+  if (btn) { btn.textContent = 'Delete'; btn._confirming = false; }
+}
+
+var _wfDeleteTimer = null;
+function confirmDeleteWorkflow(wfId) {
+  var btn = document.getElementById('wf-delete-btn');
+  if (!btn) return;
+  if (!btn._confirming) {
+    btn._confirming = true;
+    btn.textContent = 'Confirm Delete';
+    btn.style.background = 'var(--red-dim)';
+    _wfDeleteTimer = setTimeout(function() {
+      btn.textContent = 'Delete';
+      btn.style.background = '';
+      btn._confirming = false;
+    }, 3000);
+  } else {
+    if (_wfDeleteTimer) clearTimeout(_wfDeleteTimer);
+    btn.textContent = 'Deleting...';
+    btn.disabled = true;
+    lttFetch('/api/workflows' + projectParam(), {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ workflow_id: wfId })
+    }).then(function(r) { return r.json(); }).then(function(data) {
+      if (data.error) {
+        showToast('!', 'Delete failed: ' + data.error);
+        btn.textContent = 'Delete';
+        btn.disabled = false;
+        btn._confirming = false;
+      } else {
+        showToast('&#x2713;', 'Workflow deleted');
+        closeWfDetail();
+        fetchWorkflows();
+      }
+    }).catch(function() {
+      showToast('!', 'Delete failed');
+      btn.textContent = 'Delete';
+      btn.disabled = false;
+      btn._confirming = false;
+    });
+  }
+}
+
 // ==================== v5.0: PLAN EXECUTION VIEW ====================
 
 var planRefreshInterval = null;
@@ -6823,7 +7463,7 @@ function renderPlanView(data) {
     // Step cards
     for (var j = 0; j < steps.length; j++) {
       var s = steps[j];
-      var icon = s.status === 'done' ? '&#x2705;' : s.status === 'in_progress' ? '&#x1f504;' : '&#x23f3;';
+      var icon = s.status === 'done' ? '<svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8l3 3 7-7"/></svg>' : s.status === 'in_progress' ? '<svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 8a6 6 0 0111 0M14 8a6 6 0 01-11 0"/></svg>' : '...';
       var bgColor = s.status === 'done' ? 'rgba(34,197,94,0.08)' : s.status === 'in_progress' ? 'rgba(59,130,246,0.08)' : 'var(--surface-2)';
       var borderColor = s.status === 'done' ? 'var(--green)' : s.status === 'in_progress' ? 'var(--accent)' : 'var(--border)';
 
@@ -6852,15 +7492,15 @@ function renderPlanView(data) {
               confidence +
             '</div>' +
           '</div>' +
-          (s.flagged ? '<div style="font-size:10px;color:var(--orange);margin-top:2px">&#x26a0;&#xfe0f; ' + escapeHtml(s.flag_reason || 'Flagged for review') + '</div>' : '') +
-          (s.verification && s.verification.learnings ? '<div style="font-size:10px;color:var(--purple,#a855f7);margin-top:2px">&#x1f4da; Learned: ' + escapeHtml(s.verification.learnings.substring(0, 100)) + '</div>' : '') +
+          (s.flagged ? '<div style="font-size:10px;color:var(--orange);margin-top:2px">' + escapeHtml(s.flag_reason || 'Flagged for review') + '</div>' : '') +
+          (s.verification && s.verification.learnings ? '<div style="font-size:10px;color:var(--purple,#a855f7);margin-top:2px">Learned: ' + escapeHtml(s.verification.learnings.substring(0, 100)) + '</div>' : '') +
         '</div>';
 
       // Step control buttons (skip/reassign) for in_progress/pending steps
       if (wf.status === 'active' && (s.status === 'in_progress' || s.status === 'pending')) {
         html += '<div style="display:flex;gap:4px">' +
           '<button onclick="planAction(\'skip\',' + s.id + ',\'' + wf.id + '\')" style="font-size:10px;padding:3px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-muted)" title="Skip this step">Skip</button>' +
-          '<button onclick="planReassign(' + s.id + ',\'' + wf.id + '\')" style="font-size:10px;padding:3px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-muted)" title="Reassign">&#x1f504;</button>' +
+          '<button onclick="planReassign(' + s.id + ',\'' + wf.id + '\')" style="font-size:10px;padding:3px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-muted)" title="Reassign">Re</button>' +
           '</div>';
       }
       html += '</div>';
@@ -6868,9 +7508,9 @@ function renderPlanView(data) {
 
     // Stats footer
     html += '<div style="display:flex;gap:16px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted)">';
-    if (retryCount > 0) html += '<span>&#x1f504; Retries: ' + retryCount + '</span>';
-    if (flaggedSteps.length > 0) html += '<span>&#x26a0;&#xfe0f; Flagged: ' + flaggedSteps.length + '</span>';
-    html += '<span>&#x2705; Done: ' + doneCount + '/' + steps.length + '</span>';
+    if (retryCount > 0) html += '<span>Retries: ' + retryCount + '</span>';
+    if (flaggedSteps.length > 0) html += '<span>Flagged: ' + flaggedSteps.length + '</span>';
+    html += '<span>Done: ' + doneCount + '/' + steps.length + '</span>';
     html += '</div>';
 
     // Control buttons
@@ -7007,7 +7647,7 @@ function renderMonitorPanel(data) {
     for (var i = 0; i < agentNames.length; i++) {
       var name = agentNames[i];
       var a = agents[name];
-      var color = a.status === 'active' ? 'var(--green)' : a.status === 'idle' ? 'var(--orange)' : 'var(--red,#ef4444)';
+      var color = a.status === 'working' ? 'var(--green)' : a.status === 'listening' ? '#3b82f6' : a.status === 'idle' ? 'var(--orange)' : 'var(--red,#ef4444)';
       var role = a.role ? ' (' + a.role + ')' : '';
       html += '<div style="padding:4px 8px;background:var(--surface-2);border-left:3px solid ' + color + ';border-radius:4px;font-size:11px">' +
         '<span style="font-weight:600">' + escapeHtml(name) + '</span>' +
@@ -7084,6 +7724,7 @@ var notifData = [];
 var notifSeen = 0;
 
 function toggleNotifPanel() {
+  if (!document.getElementById('notif-panel')) return;
   var panel = document.getElementById('notif-panel');
   var isOpen = panel.style.display !== 'none';
   panel.style.display = isOpen ? 'none' : 'block';
@@ -7109,7 +7750,7 @@ function renderNotifList() {
   var html = '';
   for (var i = notifData.length - 1; i >= 0; i--) {
     var n = notifData[i];
-    var icon = n.type === 'online' ? '&#x1f7e2;' : n.type === 'offline' ? '&#x1f534;' : n.type === 'listening' ? '&#x1f50a;' : '&#x1f515;';
+    var icon = n.type === 'online' ? '+' : n.type === 'offline' ? '-' : n.type === 'listening' ? '~' : 'x';
     var time = new Date(n.timestamp).toLocaleTimeString();
     html += '<div style="padding:8px 16px;border-bottom:1px solid var(--border);font-size:12px;display:flex;gap:8px;align-items:center">' +
       '<span>' + icon + '</span>' +
@@ -7120,6 +7761,7 @@ function renderNotifList() {
 }
 
 function updateNotifBadge() {
+  if (!document.getElementById('notif-badge')) return;
   var badge = document.getElementById('notif-badge');
   var unseen = notifData.length - notifSeen;
   if (unseen > 0) { badge.textContent = unseen; badge.style.display = 'block'; }
@@ -7127,6 +7769,7 @@ function updateNotifBadge() {
 }
 
 function clearNotifications() {
+  if (!document.getElementById('notif-list')) return;
   notifData = [];
   notifSeen = 0;
   renderNotifList();
@@ -7136,7 +7779,7 @@ function clearNotifications() {
 // Close notif panel on outside click
 document.addEventListener('click', function(e) {
   var panel = document.getElementById('notif-panel');
-  var bell = document.getElementById('notif-bell');
+  var bell = document.getElementById('notif-bell') || document.createElement('div');
   if (panel && panel.style.display !== 'none' && !panel.contains(e.target) && e.target !== bell && !bell.contains(e.target)) {
     panel.style.display = 'none';
   }
@@ -7226,7 +7869,7 @@ function renderScores(data, repData) {
     var n = names[i];
     var a = agents[n];
     var agentRep = rep ? rep[n] : null;
-    var medal = i === 0 ? '&#x1f947;' : i === 1 ? '&#x1f948;' : i === 2 ? '&#x1f949;' : '#' + (i + 1);
+    var medal = i === 0 ? '#1' : i === 1 ? '#2' : i === 2 ? '#3' : '#' + (i + 1);
     var scoreColor = a.score >= 80 ? 'var(--green)' : a.score >= 60 ? 'var(--accent)' : a.score >= 40 ? 'var(--orange)' : 'var(--red)';
     html += '<div style="background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px">' +
       '<div style="font-size:18px;width:28px;text-align:center">' + medal + '</div>' +
@@ -7271,13 +7914,13 @@ function poll() {
       sendBrowserNotification(cachedHistory[cachedHistory.length - 1]);
     }
 
-    document.getElementById('stat-messages').textContent = status.messageCount;
-    document.getElementById('stat-agents').textContent = status.agentCount;
-    document.getElementById('stat-sleeping').textContent = status.sleepingCount || 0;
-    document.getElementById('stat-threads').textContent = status.threadCount;
+    $id('stat-messages').textContent = status.messageCount;
+    $id('stat-agents').textContent = status.agentCount;
+    $id('stat-sleeping').textContent = status.sleepingCount || 0;
+    $id('stat-threads').textContent = status.threadCount;
 
     // Managed mode badge
-    var managedBadge = document.getElementById('managed-badge');
+    var managedBadge = $id('managed-badge');
     if (status.conversation_mode === 'managed' && status.managed) {
       managedBadge.style.display = '';
       var phaseLabel = String(status.managed.phase || 'discussion').toUpperCase();
@@ -7285,8 +7928,8 @@ function poll() {
         status.managed.floor === 'directed' ? (status.managed.turn_current || '?') + ' speaking' :
         status.managed.floor === 'open' ? 'round-robin' :
         status.managed.floor === 'execution' ? 'working' : '';
-      document.getElementById('managed-phase').textContent = phaseLabel;
-      document.getElementById('managed-floor-info').textContent = floorInfo ? ' | ' + floorInfo : '';
+      $id('managed-phase').textContent = phaseLabel;
+      $id('managed-floor-info').textContent = floorInfo ? ' | ' + floorInfo : '';
     } else {
       managedBadge.style.display = 'none';
     }
@@ -7298,7 +7941,7 @@ function poll() {
       var ag = cachedAgents[agentKeys[p]];
       if (ag.alive && ag.provider && ag.provider !== 'unknown') providers[ag.provider] = true;
     }
-    document.getElementById('stat-clis').textContent = Object.keys(providers).length;
+    $id('stat-clis').textContent = Object.keys(providers).length;
 
     // Update tab title with message count
     document.title = status.messageCount > 0
@@ -7325,7 +7968,7 @@ function poll() {
     checkPlanCompletion();
   }).catch(function(e) {
     console.error('Poll failed:', e);
-    document.getElementById('conn-detail').textContent = ' ERR: ' + e.message;
+    var _cd = document.getElementById('conn-detail'); if(_cd) _cd.textContent = ' ERR: ' + e.message;
   });
 }
 
@@ -7342,6 +7985,14 @@ function doReset() {
 
 // ==================== PROJECT MANAGEMENT ====================
 
+function setProjectRemoveButtonsVisible(visible) {
+  var disp = visible ? '' : 'none';
+  var icon = document.getElementById('remove-project-btn');
+  var text = document.getElementById('remove-project-text-btn');
+  if (icon) icon.style.display = disp;
+  if (text) text.style.display = disp;
+}
+
 function loadProjects() {
   return lttFetch('/api/projects').then(function(r) { return r.json(); }).then(function(projects) {
     console.log('[LTT] loadProjects:', projects.length, 'projects, activeProject:', activeProject);
@@ -7355,10 +8006,12 @@ function loadProjects() {
       sel.appendChild(opt);
     }
 
-    // Auto-select first project if none selected
-    if (!activeProject && projects.length > 0) {
-      activeProject = projects[0].path;
-      console.log('[LTT] auto-selected first project:', activeProject);
+    // If selection pointed at a project the server removed (e.g. redundant with Default), fall back to Default
+    if (activeProject && !projects.some(function(p) { return p.path === activeProject; })) {
+      activeProject = '';
+      sel.value = '';
+      setProjectRemoveButtonsVisible(false);
+      poll();
     }
 
     // If project came from URL param, try fuzzy match (handles path separator differences)
@@ -7374,7 +8027,7 @@ function loadProjects() {
 
     if (activeProject) {
       sel.value = activeProject;
-      document.getElementById('remove-project-btn').style.display = '';
+      setProjectRemoveButtonsVisible(true);
       // Update header project indicator for mobile
       var indicator = document.getElementById('mobile-project-name');
       if (indicator) {
@@ -7384,8 +8037,8 @@ function loadProjects() {
       }
     }
 
-    // Show/hide remove button
-    document.getElementById('remove-project-btn').style.display = activeProject ? '' : 'none';
+    // Show/hide remove buttons (not shown for Default / local)
+    setProjectRemoveButtonsVisible(!!activeProject);
     // Sync mobile header project select
     syncMobileProjectSelect();
   }).catch(function(e) {
@@ -7396,7 +8049,7 @@ function loadProjects() {
 function switchProject() {
   activeProject = document.getElementById('project-select').value;
   lastMessageCount = 0;
-  document.getElementById('remove-project-btn').style.display = activeProject ? '' : 'none';
+  setProjectRemoveButtonsVisible(!!activeProject);
   syncMobileProjectSelect();
   loadConversationList();
   poll();
@@ -7408,7 +8061,7 @@ function mobileSelectProject(val) {
   lastMessageCount = 0;
   // Sync sidebar select
   document.getElementById('project-select').value = val;
-  document.getElementById('remove-project-btn').style.display = val ? '' : 'none';
+  setProjectRemoveButtonsVisible(!!val);
   poll();
 }
 
@@ -7429,6 +8082,7 @@ function syncMobileProjectSelect() {
 
 function showAddProject() {
   var input = document.getElementById('project-path-input');
+  if (!input) return;
   if (input.classList.contains('visible')) {
     input.classList.remove('visible');
   } else {
@@ -7439,8 +8093,11 @@ function showAddProject() {
 
 function addProject() {
   var input = document.getElementById('project-path-input');
+  if (!input) return;
   var projectPath = input.value.trim();
   if (!projectPath) return;
+  // If user pasted .../repo/.neohive, use repo root (matches server rules)
+  projectPath = projectPath.replace(/[\\/]+\.neohive\/?$/i, '');
 
   lttFetch('/api/projects', {
     method: 'POST',
@@ -7458,13 +8115,14 @@ function addProject() {
         switchProject();
       }, 200);
     } else {
-      alert(res.error || 'Failed to add project');
+      showToast('!', res.error || 'Failed to add project');
     }
   }).catch(function(e) { console.error('Add project failed:', e); });
 }
 
 function discoverProjects() {
   var resultsEl = document.getElementById('discover-results');
+  if (!resultsEl) return;
   resultsEl.style.display = 'block';
   resultsEl.innerHTML = '<div style="font-size:11px;color:var(--text-muted);padding:4px;">Scanning...</div>';
 
@@ -7500,7 +8158,7 @@ function addDiscovered(projectPath, name) {
     body: JSON.stringify({ path: projectPath, name: name })
   }).then(function(r) { return r.json(); }).then(function(res) {
     if (res.success) {
-      document.getElementById('discover-results').style.display = 'none';
+      var _dr = document.getElementById('discover-results'); if (_dr) _dr.style.display = 'none';
       loadProjects();
     }
   }).catch(function() {});
@@ -7508,7 +8166,9 @@ function addDiscovered(projectPath, name) {
 
 function removeProject() {
   if (!activeProject) return;
-  if (!confirm('Remove this project from the dashboard?')) return;
+  var sel = document.getElementById('project-select');
+  var label = sel && sel.options[sel.selectedIndex] ? sel.options[sel.selectedIndex].textContent : activeProject;
+  if (!confirm('Remove “' + label + '” from the dashboard?\n\nYour .neohive folder on disk is not deleted — only this shortcut in the list.')) return;
 
   lttFetch('/api/projects', {
     method: 'DELETE',
@@ -7518,10 +8178,17 @@ function removeProject() {
     if (res.success) {
       activeProject = '';
       document.getElementById('project-select').value = '';
+      setProjectRemoveButtonsVisible(false);
       loadProjects();
       poll();
+      showToast('\u2713', 'Project removed from list');
+    } else {
+      showToast('!', res.error || 'Could not remove project');
     }
-  }).catch(function(e) { console.error('Remove project failed:', e); });
+  }).catch(function(e) {
+    console.error('Remove project failed:', e);
+    showToast('!', 'Remove project failed');
+  });
 }
 
 // ==================== SOUND NOTIFICATIONS ====================
@@ -7531,18 +8198,75 @@ var audioCtx = null;
 
 function toggleSound() {
   soundEnabled = !soundEnabled;
-  var btn = document.getElementById('sound-toggle');
+  var btn = document.getElementById('sound-toggle') || document.createElement('div');
   if (soundEnabled) {
     btn.classList.add('active');
-    btn.innerHTML = '&#x1f50a;';
-    // Init audio context on first user interaction
+    btn.innerHTML = '~';
     if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
   } else {
     btn.classList.remove('active');
-    btn.innerHTML = '&#x1f508;';
+    btn.innerHTML = 'Off';
   }
 }
 
+function toggleCombinedNotifications() {
+  var label = document.getElementById('settings-notif-label');
+  if (typeof Notification === 'undefined') {
+    if (label) label.textContent = 'Notifications (not supported)';
+    return;
+  }
+  if (!notifEnabled && !soundEnabled) {
+    // Turn both on — request permission if needed
+    if (notifPermission !== 'granted') {
+      Notification.requestPermission().then(function(perm) {
+        notifPermission = perm;
+        if (perm === 'granted') {
+          notifEnabled = true;
+          soundEnabled = true;
+          if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+          localStorage.setItem('ltt-notif', 'true');
+          updateNotifBtn();
+          updateCombinedNotifLabel();
+        } else {
+          if (label) label.textContent = 'Notifications (blocked by browser)';
+        }
+      });
+    } else {
+      notifEnabled = true;
+      soundEnabled = true;
+      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      localStorage.setItem('ltt-notif', 'true');
+      updateNotifBtn();
+      updateCombinedNotifLabel();
+    }
+  } else {
+    // Turn both off
+    notifEnabled = false;
+    soundEnabled = false;
+    localStorage.setItem('ltt-notif', 'false');
+    updateNotifBtn();
+    updateCombinedNotifLabel();
+  }
+}
+
+function updateCombinedNotifLabel() {
+  var label = document.getElementById('settings-notif-label');
+  if (!label) return;
+  if (notifEnabled && soundEnabled) {
+    label.textContent = 'Notifications: On';
+    label.style.color = 'var(--green)';
+  } else if (notifPermission === 'denied') {
+    label.textContent = 'Notifications (blocked by browser)';
+    label.style.color = 'var(--red)';
+  } else {
+    label.textContent = 'Notifications: Off';
+    label.style.color = '';
+  }
+}
+
+// Init label on load
+setTimeout(updateCombinedNotifLabel, 500);
+
 function playNotifSound() {
   if (!audioCtx) return;
   try {
@@ -7588,14 +8312,6 @@ var pollLatency = 0;
 
 function updateConnectionInfo(latency) {
   pollLatency = latency;
-  var detail = document.getElementById('conn-detail');
-  if (latency < 100) {
-    detail.textContent = ' ' + latency + 'ms';
-  } else if (latency < 500) {
-    detail.textContent = ' ' + latency + 'ms';
-  } else {
-    detail.textContent = ' slow';
-  }
 }
 
 // ==================== REPLAY MODE ====================
@@ -7616,7 +8332,7 @@ function enterReplay() {
   document.getElementById('search-bar').style.display = 'none';
   document.getElementById('replay-slider').max = cachedHistory.length;
   document.getElementById('replay-slider').value = 0;
-  document.getElementById('replay-header-btn').style.display = 'none';
+  var _rh = document.getElementById('replay-header-btn'); if(_rh) _rh.style.display = 'none';
   renderReplayMessages();
 }
 
@@ -7627,7 +8343,7 @@ function exitReplay() {
   document.getElementById('replay-bar').classList.remove('visible');
   document.getElementById('view-tabs').style.display = '';
   document.getElementById('search-bar').style.display = '';
-  document.getElementById('replay-header-btn').style.display = '';
+  var _rh = document.getElementById('replay-header-btn'); if(_rh) _rh.style.display = '';
   lastMessageCount = 0;
   renderMessages(cachedHistory);
 }
@@ -7744,13 +8460,13 @@ function toggleNotifications() {
 }
 
 function updateNotifBtn() {
-  var btn = document.getElementById('notif-toggle');
+  var btn = document.getElementById('notif-toggle') || document.createElement('div');
   if (notifEnabled) {
     btn.classList.add('active');
-    btn.innerHTML = '&#x1f514;';
+    btn.innerHTML = 'On';
   } else {
     btn.classList.remove('active');
-    btn.innerHTML = '&#x1f515;';
+    btn.innerHTML = 'x';
   }
 }
 
@@ -7761,7 +8477,7 @@ function sendBrowserNotification(msg) {
     var preview = msg.content.substring(0, 80);
     var n = new Notification(msg.from + ' sent a message', {
       body: preview,
-      icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect rx="20" width="100" height="100" fill="%230d1117"/><path d="M20 30 Q20 20 30 20 H70 Q80 20 80 30 V55 Q80 65 70 65 H55 L40 80 V65 H30 Q20 65 20 55Z" fill="%2358a6ff"/></svg>',
+      icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect rx="20" width="100" height="100" fill="%230d1117"/><path d="M20 30 Q20 20 30 20 H70 Q80 20 80 30 V55 Q80 65 70 65 H55 L40 80 V65 H30 Q20 65 20 55Z" fill="%23f59e0b"/></svg>',
       tag: 'ltt-' + msg.id
     });
     n.onclick = function() { window.focus(); n.close(); };
@@ -7784,21 +8500,23 @@ function fetchLanState() {
 
 function updateLanUI() {
   // Update phone button indicator
-  var phoneBtn = document.getElementById('phone-btn');
+  var phoneBtn = document.getElementById('phone-btn') || document.createElement('div');
   phoneBtn.classList.toggle('lan-active', lanState.lan_mode);
 
   // Update LAN badge in connection area
   var existing = document.getElementById('lan-badge');
   if (lanState.lan_mode && lanState.lan_ip) {
     if (!existing) {
-      var conn = document.querySelector('.connection');
-      var badge = document.createElement('span');
-      badge.className = 'lan-badge';
-      badge.id = 'lan-badge';
-      conn.appendChild(badge);
-      existing = badge;
+      var conn = document.querySelector('.connection') || document.querySelector('.header-actions');
+      if (conn) {
+        var badge = document.createElement('span');
+        badge.className = 'lan-badge';
+        badge.id = 'lan-badge';
+        conn.appendChild(badge);
+        existing = badge;
+      }
     }
-    existing.textContent = 'LAN ' + lanState.lan_ip + ':' + lanState.port;
+    if (existing) existing.textContent = 'LAN ' + lanState.lan_ip + ':' + lanState.port;
   } else if (existing) {
     existing.remove();
   }
@@ -7812,6 +8530,10 @@ function openPhoneAccess() {
   fetchLanState().then(function() {
     renderPhoneModalContent();
     document.getElementById('phone-modal-overlay').classList.add('open');
+  }).catch(function() {
+    // Still open the modal even if fetch fails — show current state
+    renderPhoneModalContent();
+    document.getElementById('phone-modal-overlay').classList.add('open');
   });
 }
 
@@ -7903,87 +8625,336 @@ var selectedCli = 'claude';
 var _launchWatchers = []; // [{name, cli, prompt, state}] for tracking launch status
 var _launchWatchInterval = null;
 
+var ROLE_SKILLS = {
+  lead: ['planning', 'delegation', 'tracking', 'review'],
+  backend: ['javascript', 'typescript', 'nodejs', 'coding', 'debugging'],
+  frontend: ['ui', 'ux', 'css', 'html', 'frontend', 'design'],
+  quality: ['review', 'testing', 'quality', 'security', 'standards'],
+  monitor: ['observability', 'logging', 'performance', 'health-checks']
+};
+var ROLE_PROMPTS = {
+  lead: function(name) { return 'You are ' + name + ', the Coordinator in a multi-agent team. Register as "' + name + '".\n\nYour job is to:\n1. Break the user\'s request into tasks and delegate to team agents via send_message\n2. Use create_task() and create_workflow() to formally track work\n3. Monitor progress with workflow_status() and list_tasks()\n4. Use consume_messages() to check agent updates without blocking\n5. Synthesize results and present to the user\n\nYou MUST NOT edit files or write code. Delegate ALL code work to other agents. Your tools: send_message, create_task, create_workflow, advance_workflow, workflow_status, list_tasks, consume_messages, broadcast.'; },
+  backend: function(name) { return 'You are ' + name + ', a Developer in a multi-agent team. Register as "' + name + '". Call listen() to wait for tasks.\n\nWhen you receive a task:\n1. Use lock_file() before editing shared code\n2. Implement the requested changes with clean, tested code\n3. Use unlock_file() when done editing\n4. Update your task with update_task(status="done")\n5. Send a summary to the Coordinator with file paths and key decisions\n6. Call listen() again for the next task\n\nFocus on production-quality code. Include file paths in reports.'; },
+  frontend: function(name) { return 'You are ' + name + ', a Frontend Developer in a multi-agent team. Register as "' + name + '". Call listen() to wait for tasks.\n\nWhen you receive a task:\n1. Use lock_file() before editing shared frontend code\n2. Implement UI/UX changes following design conventions\n3. Use unlock_file() when done\n4. Update your task with update_task(status="done")\n5. Send a summary to the Coordinator with file paths and screenshots if relevant\n6. Call listen() again for the next task\n\nFocus on clean UI, accessibility, and responsive design.'; },
+  quality: function(name) { return 'You are ' + name + ', a Reviewer in a multi-agent team. Register as "' + name + '". Call listen() to wait for review requests.\n\nWhen you receive work to review:\n1. Read the actual files that were changed\n2. Check for bugs, security issues, code style, edge cases\n3. Use submit_review() to formally approve or request changes\n4. Send structured feedback: blockers vs suggestions\n5. Call listen() again\n\nBe constructive and specific. Reference line numbers. Never let mediocre work pass.'; },
+  monitor: function(name) { return 'You are ' + name + ', a System Monitor in a multi-agent team. Register as "' + name + '". Call listen() to wait for events.\n\nYour job:\n1. Watch for idle agents, stuck tasks, and circular escalations\n2. Use send_message to nudge idle agents\n3. Use update_task to reassign stuck tasks\n4. Log interventions to your workspace via workspace_write\n5. Call listen() again\n\nNever stop monitoring. You ARE the system intelligence.'; }
+};
+
 function renderLaunchPanel() {
   var el = document.getElementById('launch-area');
-  // Fetch unified templates (serves both templates/ and conversation-templates/ dirs)
-  lttFetch('/api/templates').then(function(r) { return r.json(); }).then(function(allTemplates) {
-    // Split by source field — "templates" = quick start, "conversation-templates" = workflows
+  var pq = projectParam();
+  Promise.all([
+    lttFetch('/api/templates').then(function(r) { return r.json(); }).catch(function() { return []; }),
+    lttFetch('/api/agents' + pq).then(function(r) { return r.json(); }).catch(function() { return {}; })
+  ]).then(function(results) {
+    var allTemplates = results[0];
+    var existingAgents = results[1];
+    var existingNames = Object.keys(existingAgents).map(function(n) { return n.toLowerCase(); });
+
     var simpleTemplates = [];
     var convTemplates = [];
     for (var k = 0; k < allTemplates.length; k++) {
-      if (allTemplates[k].source === 'conversation-templates') {
-        convTemplates.push(allTemplates[k]);
-      } else {
-        simpleTemplates.push(allTemplates[k]);
-      }
+      if (allTemplates[k].source === 'conversation-templates') convTemplates.push(allTemplates[k]);
+      else simpleTemplates.push(allTemplates[k]);
     }
     launchTemplates = simpleTemplates;
+    window._convTemplates = convTemplates;
+
+    var html = '';
+    // Section 1: Add Agent
+    html += '<div class="launch-section">';
+    html += '<h3>Add Agent</h3>';
+    html += '<div class="launch-form-row">';
+    html += '<div class="launch-form-field"><label>Agent Name</label><input type="text" id="launch-name" placeholder="e.g. Backend, Reviewer" maxlength="20" oninput="validateLaunchName()"><div class="field-hint" id="launch-name-hint">1-20 alphanumeric, underscore, or hyphen</div></div>';
+    html += '<div class="launch-form-field"><label>Role</label><select id="launch-role" onchange="onLaunchRoleChange()"><option value="">Select role...</option><option value="lead">Lead</option><option value="backend">Backend</option><option value="frontend">Frontend</option><option value="quality">Quality</option><option value="monitor">Monitor</option></select></div>';
+    html += '</div>';
+    html += '<div class="launch-form-row">';
+    html += '<div class="launch-form-field"><label>CLI Type</label><select id="launch-cli"><option value="claude"' + (selectedCli === 'claude' ? ' selected' : '') + '>Claude Code</option><option value="gemini"' + (selectedCli === 'gemini' ? ' selected' : '') + '>Gemini CLI</option><option value="codex"' + (selectedCli === 'codex' ? ' selected' : '') + '>Codex CLI</option><option value="cursor"' + (selectedCli === 'cursor' ? ' selected' : '') + '>Cursor IDE</option></select></div>';
+    html += '<div class="launch-form-field"><label>Skills</label><input type="text" id="launch-skills" placeholder="Auto-filled from role" readonly style="color:var(--text-muted)"></div>';
+    html += '</div>';
+    html += '<div style="margin-top:8px"><button class="btn btn-primary" onclick="generateAgentPrompt()" style="margin-right:8px">Generate Prompt</button><button class="btn" onclick="doLaunch()">Launch Terminal</button></div>';
+    html += '<div id="launch-prompt-output" style="display:none;margin-top:12px"></div>';
+    html += '<div class="launch-result" id="launch-result"></div>';
+    html += '</div>';
 
-    // Build unified template picker with optgroups
-    var templateOpts = '<option value="">-- No template --</option>';
-    if (simpleTemplates.length) {
-      templateOpts += '<optgroup label="Quick Start">';
-      for (var i = 0; i < simpleTemplates.length; i++) {
-        templateOpts += '<option value="simple:' + escapeHtml(simpleTemplates[i].name) + '">' + escapeHtml(simpleTemplates[i].name) + ' \u2014 ' + escapeHtml(simpleTemplates[i].description || '') + '</option>';
+    // Section 2: Team Templates
+    html += '<div class="launch-section">';
+    html += '<h3 style="display:flex;justify-content:space-between;align-items:center">Team Templates <button class="btn btn-primary" onclick="showTemplateBuilder()" style="font-size:12px;padding:5px 12px">+ Create Template</button></h3>';
+    if (allTemplates.length > 0) {
+      html += '<div class="template-grid">';
+      var allTpls = simpleTemplates.concat(convTemplates);
+      for (var t = 0; t < allTpls.length; t++) {
+        var tpl = allTpls[t];
+        var agents = tpl.agents || [];
+        var isConv = tpl.source === 'conversation-templates';
+        html += '<div class="template-card" onclick="expandTemplate(' + t + ')">';
+        html += '<div class="template-card-name">' + escapeHtml(tpl.name || tpl.id || 'Template') + '</div>';
+        html += '<div class="template-card-desc">' + escapeHtml(tpl.description || '') + '</div>';
+        html += '<div class="template-card-agents">';
+        if (agents.length > 0) {
+          for (var a = 0; a < agents.length; a++) {
+            var chipLabel = agents[a].display_name || agents[a].name || 'Agent';
+            if (agents[a].role) chipLabel += ' (' + agents[a].role + ')';
+            html += '<span class="template-agent-chip">' + escapeHtml(chipLabel) + '</span>';
+          }
+        } else if (tpl.roles) {
+          var roleNames = Object.keys(tpl.roles);
+          for (var r = 0; r < roleNames.length; r++) {
+            html += '<span class="template-agent-chip">' + escapeHtml(roleNames[r]) + '</span>';
+          }
+        }
+        html += '</div></div>';
       }
-      templateOpts += '</optgroup>';
+      html += '</div>';
+      html += '<div id="template-expanded" style="display:none;margin-top:16px"></div>';
+    } else {
+      html += '<div style="color:var(--text-muted);font-size:13px;padding:8px 0">No templates yet. Create one to get started.</div>';
     }
-    if (convTemplates.length) {
-      templateOpts += '<optgroup label="Workflows (multi-agent)">';
-      for (var j = 0; j < convTemplates.length; j++) {
-        var ct = convTemplates[j];
-        var agentCount = ct.agents ? ct.agents.length : 0;
-        templateOpts += '<option value="conv:' + escapeHtml(ct.id || ct.name) + '">' + escapeHtml(ct.name) + ' (' + agentCount + ' agents) \u2014 ' + escapeHtml(ct.description || '') + '</option>';
+    html += '<div id="template-builder" style="display:none;margin-top:16px"></div>';
+    html += '</div>';
+
+    // Store data for JS functions
+    window._launchExistingNames = existingNames;
+    window._allLaunchTemplates = allTpls;
+
+    el.innerHTML = html;
+  }).catch(function() {
+    el.innerHTML = '<div class="launch-section"><h3>Add Agent</h3><p style="color:var(--text-dim)">Failed to load data.</p></div>';
+  });
+}
+
+function validateLaunchName() {
+  var input = document.getElementById('launch-name');
+  var hint = document.getElementById('launch-name-hint');
+  var name = (input.value || '').trim();
+  if (!name) { hint.className = 'field-hint'; hint.textContent = '1-20 alphanumeric, underscore, or hyphen'; input.classList.remove('invalid'); return; }
+  if (!/^[a-zA-Z0-9_-]{1,20}$/.test(name)) { hint.className = 'field-hint error'; hint.textContent = 'Invalid: only letters, numbers, _ and -'; input.classList.add('invalid'); return; }
+  if (window._launchExistingNames && window._launchExistingNames.indexOf(name.toLowerCase()) !== -1) { hint.className = 'field-hint error'; hint.textContent = 'Name already taken by an existing agent'; input.classList.add('invalid'); return; }
+  hint.className = 'field-hint success'; hint.textContent = 'Name available'; input.classList.remove('invalid');
+}
+
+function onLaunchRoleChange() {
+  var role = document.getElementById('launch-role').value;
+  var skillsInput = document.getElementById('launch-skills');
+  if (role && ROLE_SKILLS[role]) {
+    skillsInput.value = ROLE_SKILLS[role].join(', ');
+  } else {
+    skillsInput.value = '';
+  }
+}
+
+function generateAgentPrompt() {
+  var name = (document.getElementById('launch-name').value || '').trim();
+  var role = document.getElementById('launch-role').value;
+  var cli = document.getElementById('launch-cli').value;
+  if (!name) { showToast('!', 'Enter an agent name'); return; }
+  if (!/^[a-zA-Z0-9_-]{1,20}$/.test(name)) { showToast('!', 'Invalid agent name'); return; }
+
+  var prompt;
+  if (role && ROLE_PROMPTS[role]) {
+    prompt = ROLE_PROMPTS[role](name);
+  } else {
+    prompt = 'You are ' + name + ' in a multi-agent team. Register as "' + name + '". Call listen() to wait for tasks. When you receive a task, implement it, report what you did, and call listen() again.';
+  }
+
+  var outputEl = document.getElementById('launch-prompt-output');
+  outputEl.style.display = 'block';
+  outputEl.innerHTML = '<div class="launch-prompt-output" onclick="copyGeneratedPrompt()"><div style="font-size:11px;color:var(--text-muted);margin-bottom:6px">Click to copy</div>' + escapeHtml(prompt) + '</div>';
+  window._generatedLaunchPrompt = prompt;
+}
+
+function copyGeneratedPrompt() {
+  if (window._generatedLaunchPrompt) {
+    navigator.clipboard.writeText(window._generatedLaunchPrompt).then(function() {
+      showToast('&#x2713;', 'Prompt copied to clipboard');
+    });
+  }
+}
+
+function expandTemplate(index) {
+  var tpls = window._allLaunchTemplates;
+  if (!tpls || !tpls[index]) return;
+  var tpl = tpls[index];
+  var agents = tpl.agents || [];
+  var expanded = document.getElementById('template-expanded');
+  if (!expanded) return;
+
+  var html = '<div style="background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:16px">';
+  html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px"><span style="font-size:14px;font-weight:600">' + escapeHtml(tpl.name) + '</span><button class="btn" onclick="document.getElementById(\'template-expanded\').style.display=\'none\'" style="font-size:11px;padding:4px 10px">Close</button></div>';
+
+  if (agents.length > 0) {
+    for (var i = 0; i < agents.length; i++) {
+      var ag = agents[i];
+      var agPrompt = ag.prompt || 'You are ' + (ag.name || 'Agent') + '. Register as "' + (ag.name || 'Agent') + '". Call listen() for tasks.';
+      html += '<div style="margin-bottom:10px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:8px">';
+      html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">';
+      html += '<span style="font-weight:600;font-size:13px">' + escapeHtml(ag.display_name || ag.name || 'Agent') + '</span>';
+      html += '<span style="font-size:11px;color:var(--text-muted)">' + escapeHtml(ag.role || '') + '</span>';
+      html += '</div>';
+      if (ag.skills && ag.skills.length) {
+        html += '<div style="margin-bottom:4px;display:flex;gap:4px;flex-wrap:wrap">';
+        for (var s = 0; s < ag.skills.length; s++) {
+          html += '<span style="font-size:10px;padding:1px 6px;border-radius:4px;background:var(--accent-dim);color:var(--accent)">' + escapeHtml(ag.skills[s]) + '</span>';
+        }
+        html += '</div>';
       }
-      templateOpts += '</optgroup>';
+      if (ag.responsibilities && ag.responsibilities.length) {
+        html += '<div style="font-size:11px;color:var(--text-dim);margin-bottom:6px">' + ag.responsibilities.map(function(r) { return escapeHtml(r); }).join(' / ') + '</div>';
+      }
+      html += '<div class="launch-prompt-output" style="font-size:11px;max-height:100px" onclick="navigator.clipboard.writeText(this.textContent).then(function(){showToast(\'&#x2713;\',\'Copied!\')})">' + escapeHtml(agPrompt) + '</div>';
+      html += '</div>';
     }
+  } else if (tpl.roles) {
+    var roleNames = Object.keys(tpl.roles);
+    for (var r = 0; r < roleNames.length; r++) {
+      var rolePrompt = tpl.roles[roleNames[r]].prompt || 'Register as "' + roleNames[r] + '" and call listen().';
+      html += '<div style="margin-bottom:8px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:8px">';
+      html += '<div style="font-weight:600;font-size:13px;margin-bottom:4px">' + escapeHtml(roleNames[r]) + '</div>';
+      html += '<div class="launch-prompt-output" style="font-size:11px;max-height:100px" onclick="navigator.clipboard.writeText(this.textContent).then(function(){showToast(\'&#x2713;\',\'Copied!\')})">' + escapeHtml(rolePrompt) + '</div>';
+      html += '</div>';
+    }
+  }
+  html += '</div>';
 
-    // Store conv templates for later use
-    window._convTemplates = convTemplates;
+  expanded.innerHTML = html;
+  expanded.style.display = 'block';
+  expanded.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
 
-    el.innerHTML =
-      '<div class="launch-panel">' +
-        '<h3>Launch Agent Terminal</h3>' +
-        '<div class="launch-field">' +
-          '<label>Project Folder</label>' +
-          '<input type="text" id="launch-project" value="' + escapeHtml(activeProject) + '" placeholder="Path to project folder">' +
-        '</div>' +
-        '<div class="launch-field">' +
-          '<label>CLI Type</label>' +
-          '<div class="cli-btns">' +
-            '<div class="cli-btn' + (selectedCli === 'claude' ? ' selected' : '') + '" onclick="selectCli(\'claude\')">Claude</div>' +
-            '<div class="cli-btn' + (selectedCli === 'gemini' ? ' selected' : '') + '" onclick="selectCli(\'gemini\')">Gemini</div>' +
-            '<div class="cli-btn' + (selectedCli === 'codex' ? ' selected' : '') + '" onclick="selectCli(\'codex\')">Codex</div>' +
-          '</div>' +
-        '</div>' +
-        '<div class="launch-field">' +
-          '<label>Agent Name</label>' +
-          '<input type="text" id="launch-name" placeholder="e.g. Builder, Coder, Reviewer" maxlength="20">' +
-        '</div>' +
-        '<div class="launch-field">' +
-          '<label>Template</label>' +
-          '<select id="launch-template" onchange="onTemplateSelect()">' + templateOpts + '</select>' +
-        '</div>' +
-        '<div id="launch-template-preview"></div>' +
-        '<div class="launch-field">' +
-          '<label>Prompt (auto-copied to clipboard on launch)</label>' +
-          '<textarea id="launch-prompt" placeholder="Custom instructions for the agent..."></textarea>' +
-        '</div>' +
-        '<div class="launch-actions">' +
-          '<button class="btn btn-primary" onclick="doLaunch()">Launch Terminal</button>' +
-          '<button class="btn" onclick="copyLaunchPrompt()">Copy Prompt</button>' +
-        '</div>' +
-        '<div id="launch-all-section" style="display:none">' +
-          '<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--border)">' +
-            '<button class="btn btn-primary" onclick="doLaunchAll()" style="width:100%;padding:12px;font-size:14px">Launch All Agents from Template</button>' +
-            '<p style="font-size:11px;color:var(--text-muted);margin-top:6px;text-align:center">Opens a terminal for each agent in the selected template. Prompts are copied to clipboard sequentially.</p>' +
-          '</div>' +
-        '</div>' +
-        '<div class="launch-result" id="launch-result"></div>' +
-        '<div id="launch-status-tracker" class="launch-status-list" style="display:none"></div>' +
-      '</div>';
+// ==================== CUSTOM TEMPLATE BUILDER ====================
+
+var _tplBuilderAgents = [];
+
+function showTemplateBuilder(prefill) {
+  var el = document.getElementById('template-builder');
+  if (!el) return;
+  _tplBuilderAgents = prefill && prefill.agents ? prefill.agents.map(function(a) { return Object.assign({}, a); }) : [
+    { name: 'Coordinator', role: 'lead', skills: 'planning, delegation', prompt: '' },
+    { name: 'Developer', role: 'backend', skills: 'javascript, coding', prompt: '' }
+  ];
+
+  renderBuilderForm(el, prefill);
+  el.style.display = 'block';
+  el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+function renderBuilderForm(el, prefill) {
+  var html = '<div style="background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:20px">';
+  html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><span style="font-size:16px;font-weight:700;color:var(--text)">' + (prefill ? 'Edit Template' : 'Create Template') + '</span><button class="btn" onclick="hideTemplateBuilder()" style="font-size:11px;padding:4px 10px">Cancel</button></div>';
+
+  // Template info
+  html += '<div class="launch-form-row">';
+  html += '<div class="launch-form-field"><label>Template Name</label><input type="text" id="tpl-name" value="' + escapeHtml(prefill ? prefill.name || '' : '') + '" placeholder="e.g. My Dev Team"></div>';
+  html += '<div class="launch-form-field"><label>Category</label><select id="tpl-category"><option value="development"' + (prefill && prefill.category === 'development' ? ' selected' : '') + '>Development</option><option value="research"' + (prefill && prefill.category === 'research' ? ' selected' : '') + '>Research</option><option value="review"' + (prefill && prefill.category === 'review' ? ' selected' : '') + '>Review</option><option value="custom"' + (prefill && prefill.category === 'custom' ? ' selected' : '') + '>Custom</option></select></div>';
+  html += '</div>';
+  html += '<div class="launch-form-field" style="margin-bottom:16px"><label>Description</label><input type="text" id="tpl-desc" value="' + escapeHtml(prefill ? prefill.description || '' : '') + '" placeholder="Brief description of this team template"></div>';
+  html += '<div class="launch-form-field" style="margin-bottom:16px"><label>Mode</label><select id="tpl-mode"><option value="direct"' + (prefill && prefill.conversation_mode === 'direct' ? ' selected' : '') + '>Direct</option><option value="group"' + (prefill && prefill.conversation_mode === 'group' ? ' selected' : '') + '>Group</option><option value="managed"' + (prefill && prefill.conversation_mode === 'managed' ? ' selected' : '') + '>Managed</option></select></div>';
+
+  // Agents
+  html += '<div style="font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px">Agents</div>';
+  for (var i = 0; i < _tplBuilderAgents.length; i++) {
+    var ag = _tplBuilderAgents[i];
+    html += '<div style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px">';
+    html += '<div class="launch-form-row">';
+    html += '<div class="launch-form-field"><label>Name</label><input type="text" data-tpl-agent="' + i + '" data-field="name" value="' + escapeHtml(ag.name || '') + '" oninput="updateTplAgent(' + i + ',\'name\',this.value)"></div>';
+    html += '<div class="launch-form-field"><label>Role</label><select data-tpl-agent="' + i + '" data-field="role" onchange="updateTplAgent(' + i + ',\'role\',this.value);autoFillTplSkills(' + i + ',this.value)"><option value="">Select...</option><option value="lead"' + (ag.role === 'lead' ? ' selected' : '') + '>Lead</option><option value="backend"' + (ag.role === 'backend' ? ' selected' : '') + '>Backend</option><option value="frontend"' + (ag.role === 'frontend' ? ' selected' : '') + '>Frontend</option><option value="quality"' + (ag.role === 'quality' ? ' selected' : '') + '>Quality</option><option value="monitor"' + (ag.role === 'monitor' ? ' selected' : '') + '>Monitor</option></select></div>';
+    html += '</div>';
+    html += '<div class="launch-form-field" style="margin-bottom:6px"><label>Skills</label><input type="text" data-tpl-agent="' + i + '" data-field="skills" value="' + escapeHtml(ag.skills || '') + '" oninput="updateTplAgent(' + i + ',\'skills\',this.value)" placeholder="comma-separated skills"></div>';
+    html += '<div class="launch-form-field"><label>Prompt</label><textarea data-tpl-agent="' + i + '" data-field="prompt" oninput="updateTplAgent(' + i + ',\'prompt\',this.value)" style="min-height:60px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px;font-size:12px;color:var(--text);font-family:inherit;resize:vertical;outline:none;width:100%">' + escapeHtml(ag.prompt || '') + '</textarea></div>';
+    if (_tplBuilderAgents.length > 1) {
+      html += '<button class="btn btn-danger" onclick="removeTplAgent(' + i + ')" style="font-size:11px;padding:3px 8px;margin-top:6px">Remove</button>';
+    }
+    html += '</div>';
+  }
+  html += '<button class="btn" onclick="addTplAgent()" style="font-size:12px;margin-bottom:16px">+ Add Agent</button>';
+
+  // Save
+  html += '<div style="display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--border);padding-top:12px">';
+  if (prefill && prefill.id) {
+    html += '<button class="btn btn-primary" onclick="saveCustomTemplate(\'' + escapeHtml(prefill.id) + '\')" style="font-size:12px">Update Template</button>';
+  } else {
+    html += '<button class="btn btn-primary" onclick="saveCustomTemplate()" style="font-size:12px">Save Template</button>';
+  }
+  html += '</div>';
+  html += '</div>';
+  el.innerHTML = html;
+}
+
+function hideTemplateBuilder() {
+  var el = document.getElementById('template-builder');
+  if (el) el.style.display = 'none';
+}
+
+function updateTplAgent(idx, field, value) {
+  if (_tplBuilderAgents[idx]) _tplBuilderAgents[idx][field] = value;
+}
+
+function autoFillTplSkills(idx, role) {
+  if (ROLE_SKILLS[role]) {
+    _tplBuilderAgents[idx].skills = ROLE_SKILLS[role].join(', ');
+    var el = document.getElementById('template-builder');
+    if (el) renderBuilderForm(el);
+  }
+}
+
+function addTplAgent() {
+  _tplBuilderAgents.push({ name: '', role: '', skills: '', prompt: '' });
+  var el = document.getElementById('template-builder');
+  if (el) renderBuilderForm(el);
+}
+
+function removeTplAgent(idx) {
+  _tplBuilderAgents.splice(idx, 1);
+  var el = document.getElementById('template-builder');
+  if (el) renderBuilderForm(el);
+}
+
+function saveCustomTemplate(existingId) {
+  var name = (document.getElementById('tpl-name').value || '').trim();
+  var desc = (document.getElementById('tpl-desc').value || '').trim();
+  var category = document.getElementById('tpl-category').value;
+  var mode = document.getElementById('tpl-mode').value;
+
+  if (!name) { showToast('!', 'Template name is required'); return; }
+  if (_tplBuilderAgents.length < 1) { showToast('!', 'Add at least one agent'); return; }
+  var hasEmptyName = _tplBuilderAgents.some(function(a) { return !a.name || !a.name.trim(); });
+  if (hasEmptyName) { showToast('!', 'All agents must have a name'); return; }
+
+  var agents = _tplBuilderAgents.map(function(a) {
+    return {
+      name: a.name.trim(),
+      role: a.role || '',
+      display_name: a.name.trim(),
+      skills: (a.skills || '').split(',').map(function(s) { return s.trim(); }).filter(Boolean),
+      prompt: a.prompt || 'You are ' + a.name.trim() + '. Register as "' + a.name.trim() + '" and call listen() for tasks.'
+    };
+  });
+
+  var body = {
+    name: name,
+    description: desc,
+    category: category,
+    conversation_mode: mode,
+    agents: agents
+  };
+
+  var method = existingId ? 'PUT' : 'POST';
+  if (existingId) body.id = existingId;
+
+  lttFetch('/api/custom-templates' + projectParam(), {
+    method: method,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body)
+  }).then(function(r) { return r.json(); }).then(function(data) {
+    if (data.error) {
+      showToast('!', data.error);
+    } else {
+      showToast('&#x2713;', 'Template saved');
+      hideTemplateBuilder();
+      renderLaunchPanel();
+    }
   }).catch(function() {
-    el.innerHTML = '<div class="launch-panel"><h3>Launch Agent Terminal</h3><p style="color:var(--text-dim)">Failed to load templates.</p></div>';
+    showToast('!', 'Failed to save template');
   });
 }
 
@@ -8087,10 +9058,10 @@ function fillAgentFromConvTemplate(templateId, agentName) {
 
 // ==================== LAUNCH SINGLE AGENT ====================
 function doLaunch() {
-  var projectDir = document.getElementById('launch-project').value.trim();
   var agentName = document.getElementById('launch-name').value.trim();
-  var prompt = document.getElementById('launch-prompt').value.trim();
   var resultEl = document.getElementById('launch-result');
+  var cliSelect = document.getElementById('launch-cli');
+  var cli = cliSelect ? cliSelect.value : selectedCli;
 
   if (!agentName) {
     resultEl.className = 'launch-result error';
@@ -8098,9 +9069,10 @@ function doLaunch() {
     return;
   }
 
-  // Copy prompt to clipboard before launching
-  var launchPrompt = prompt || 'You are agent "' + agentName + '". Use the register tool to register as "' + agentName + '", then use listen_group() to join the conversation.';
+  // Use generated prompt if available, otherwise build a default
+  var launchPrompt = window._generatedLaunchPrompt || 'You are agent "' + agentName + '". Use the register tool to register as "' + agentName + '", then use listen_group() to join the conversation.';
   navigator.clipboard.writeText(launchPrompt).catch(function() {});
+  selectedCli = cli;
 
   resultEl.className = 'launch-result info';
   resultEl.innerHTML = 'Launching terminal for <strong>' + escapeHtml(agentName) + '</strong>...';
@@ -8108,7 +9080,7 @@ function doLaunch() {
   lttFetch('/api/launch', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ cli: selectedCli, project_dir: projectDir || undefined, agent_name: agentName, prompt: launchPrompt })
+    body: JSON.stringify({ cli: cli, project_dir: undefined, agent_name: agentName, prompt: launchPrompt })
   }).then(function(r) { return r.json(); }).then(function(data) {
     if (data.error) {
       resultEl.className = 'launch-result error';
@@ -8125,11 +9097,18 @@ function doLaunch() {
       startLaunchWatcher(agentName);
     } else {
       resultEl.className = 'launch-result success';
-      var html = '<strong>MCP config written.</strong> Run this command in a terminal:<br>';
-      html += '<div class="launch-prompt-box" onclick="copyText(this)" data-text="' + escapeHtml(data.command).replace(/"/g, '&quot;') + '">' + escapeHtml(data.command) + '</div>';
-      html += '<br>Then paste this prompt:<br>';
-      html += '<div class="launch-prompt-box" onclick="copyText(this)" data-text="' + escapeHtml(launchPrompt).replace(/"/g, '&quot;') + '">' + escapeHtml(launchPrompt.substring(0, 300)) + (launchPrompt.length > 300 ? '...' : '') + '</div>';
-      resultEl.innerHTML = html;
+      if (data.cli === 'cursor') {
+        resultEl.innerHTML =
+          '<strong>.cursor/mcp.json updated</strong> with <code>NEOHIVE_DATA_DIR</code>. Open this project in Cursor, reload MCP tools if needed, then paste the prompt (already copied).<br>' +
+          '<span style="font-size:11px;color:var(--text-dim)">' + escapeHtml(data.project_dir || '') + '</span><br><br>' +
+          '<div class="launch-prompt-box" onclick="copyText(this)" data-text="' + escapeHtml(launchPrompt).replace(/"/g, '&quot;') + '">' + escapeHtml(launchPrompt.substring(0, 300)) + (launchPrompt.length > 300 ? '...' : '') + '</div>';
+      } else {
+        var html = '<strong>MCP config written.</strong> Run this command in a terminal:<br>';
+        html += '<div class="launch-prompt-box" onclick="copyText(this)" data-text="' + escapeHtml(data.command).replace(/"/g, '&quot;') + '">' + escapeHtml(data.command) + '</div>';
+        html += '<br>Then paste this prompt:<br>';
+        html += '<div class="launch-prompt-box" onclick="copyText(this)" data-text="' + escapeHtml(launchPrompt).replace(/"/g, '&quot;') + '">' + escapeHtml(launchPrompt.substring(0, 300)) + (launchPrompt.length > 300 ? '...' : '') + '</div>';
+        resultEl.innerHTML = html;
+      }
       startLaunchWatcher(agentName);
     }
   }).catch(function(err) {
@@ -8276,7 +9255,9 @@ function renderLaunchStatusTracker() {
   var h = '<div style="font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Launch Status</div>';
   for (var i = 0; i < _launchWatchers.length; i++) {
     var w = _launchWatchers[i];
-    var stateLabel = { pending: 'Waiting...', launching: 'Opening terminal...', launched: 'Terminal open \u2014 paste prompt', registered: 'Online', failed: 'Failed' }[w.state] || w.state;
+    var launchingLabel = w.cli === 'cursor' ? 'Writing MCP config...' : 'Opening terminal...';
+    var launchedLabel = w.cli === 'cursor' ? 'Open Cursor \u2014 paste prompt' : 'Terminal open \u2014 paste prompt';
+    var stateLabel = { pending: 'Waiting...', launching: launchingLabel, launched: launchedLabel, registered: 'Online', failed: 'Failed' }[w.state] || w.state;
     if (w.state === 'failed' && w.error) stateLabel = 'Failed: ' + w.error;
     h += '<div class="launch-status-item">' +
       '<span class="ls-dot ' + w.state + '"></span>' +
@@ -8309,8 +9290,8 @@ function renderDocs() {
   el.innerHTML =
     '<div class="docs-container">' +
 
-    '<h2>Neohive v5.0</h2>' +
-    '<p class="docs-subtitle">True Autonomy Engine \u2014 AI agents that self-organize, self-verify, and never stop working. Works with Claude Code, Gemini CLI, and Codex CLI.</p>' +
+    '<h2>Neohive v6.0</h2>' +
+    '<p class="docs-subtitle">True Autonomy Engine \u2014 AI agents that self-organize, self-verify, and never stop working. Works with Claude Code, Gemini CLI, Codex CLI, and Cursor IDE.</p>' +
 
     // Quick Start — One Command
     '<div class="docs-section">' +
@@ -8423,7 +9404,7 @@ function renderDocs() {
     '<div class="docs-section">' +
       '<h3>Frequently Asked Questions</h3>' +
       '<h4>Do agents need internet access?</h4>' +
-      '<p>No. Agents communicate through local files in your project\'s <code>.neohive/</code> folder. No cloud servers, no API calls between agents. The AI CLIs themselves may need internet for their LLM providers, but the agent bridge is fully local.</p>' +
+      '<p>No. Agents communicate through local files in your project\'s <code>.neohive/</code> folder. No cloud servers, no API calls between agents. The AI CLIs themselves may need internet for their LLM providers, but Neohive is fully local.</p>' +
       '<h4>Can I mix different AI CLIs?</h4>' +
       '<p>Yes! Claude Code, Gemini CLI, and Codex CLI can all talk to each other in the same conversation. Run <code>npx neohive init --all</code> to configure all of them.</p>' +
       '<h4>What happens when message files get large?</h4>' +
@@ -8461,6 +9442,316 @@ function copyLaunchPrompt() {
   });
 }
 
+// ==================== SETTINGS MENU ====================
+
+function toggleSettingsMenu() {
+  var menu = document.getElementById('settings-menu');
+  if (menu) menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
+}
+// Close settings when clicking outside
+document.addEventListener('click', function(e) {
+  var menu = document.getElementById('settings-menu');
+  if (menu && menu.style.display === 'block' && !e.target.closest('.header-settings-btn') && !e.target.closest('#settings-menu')) {
+    menu.style.display = 'none';
+  }
+});
+
+// ==================== SIDEBAR TOGGLE ====================
+
+function toggleNavSidebar() {
+  var sidebar = document.getElementById('nav-sidebar');
+  if (!sidebar) return;
+  var isExpanded = sidebar.classList.contains('expanded');
+  sidebar.classList.toggle('expanded');
+  sidebar.classList.toggle('collapsed');
+  var btn = sidebar.querySelector('.nav-sidebar-toggle');
+  if (btn) btn.innerHTML = isExpanded ? '&#x25B6;' : '&#x25C0;';
+  try { localStorage.setItem('neohive-sidebar-collapsed', isExpanded ? '1' : '0'); } catch(e) {}
+}
+// Restore sidebar state from localStorage
+(function() {
+  try {
+    var saved = localStorage.getItem('neohive-sidebar-collapsed');
+    if (saved === '1') {
+      var sidebar = document.getElementById('nav-sidebar');
+      if (sidebar) {
+        sidebar.classList.remove('expanded');
+        sidebar.classList.add('collapsed');
+        var btn = sidebar.querySelector('.nav-sidebar-toggle');
+        if (btn) btn.innerHTML = '&#x25B6;';
+      }
+    }
+  } catch(e) {}
+})();
+
+// ==================== AGENT STATUS BAR ====================
+
+var prevAgentBarState = {};
+
+function updateAgentBar(agents) {
+  var bar = document.getElementById('agent-bar');
+  if (!bar || !agents) return;
+  var html = '';
+  var sorted = Object.entries(agents).sort(function(a, b) {
+    var aAlive = a[1].alive ? 1 : 0;
+    var bAlive = b[1].alive ? 1 : 0;
+    return bAlive - aAlive;
+  });
+  for (var i = 0; i < sorted.length; i++) {
+    var name = sorted[i][0];
+    var agent = sorted[i][1];
+    if (name === '__system__' || name === 'Dashboard') continue;
+    var cls = 'offline';
+    var activity = 'offline';
+    if (agent.alive) {
+      if (agent.is_listening || agent.status === 'listening') { cls = 'listening'; activity = 'listening'; }
+      else if (agent.status === 'idle') { cls = 'idle'; activity = 'idle'; }
+      else { cls = 'working'; activity = agent.status === 'working' ? 'working' : 'active'; }
+    }
+    // Toast on state change
+    var prevState = prevAgentBarState[name];
+    if (prevState !== undefined) {
+      if (!prevState && agent.alive) showToast('<span style="color:var(--green)">+</span>', name + ' came online');
+      if (prevState && !agent.alive) showToast('<span style="color:var(--text-muted)">-</span>', name + ' went offline');
+    }
+    prevAgentBarState[name] = agent.alive;
+    html += '<div class="agent-pill ' + cls + '" onclick="showAgentPopup(\'' + name + '\')">' +
+      '<span class="status-dot"></span>' +
+      '<span class="agent-name">' + name + '</span>' +
+      '<span class="agent-activity">' + activity + '</span>' +
+    '</div>';
+  }
+  if (bar.innerHTML !== html) bar.innerHTML = html;
+}
+
+// ==================== OVERVIEW PAGE ====================
+
+function renderOverview() {
+  var area = document.getElementById('overview-area');
+  if (!area) return;
+  var savedScroll = area.scrollTop;
+  var pq = projectParam();
+  var histQ = pq + (pq ? '&' : '?') + 'limit=5' + (activeBranch && activeBranch !== 'main' ? '&branch=' + encodeURIComponent(activeBranch) : '');
+  Promise.all([
+    lttFetch('/api/status' + pq).then(function(r) { return r.json(); }),
+    lttFetch('/api/agents' + pq).then(function(r) { return r.json(); }),
+    lttFetch('/api/history' + histQ).then(function(r) { return r.json(); }),
+    lttFetch('/api/tasks' + pq).then(function(r) { return r.json(); }),
+    lttFetch('/api/workflows' + pq).then(function(r) { return r.json(); }),
+    lttFetch('/api/notifications' + pq + (pq ? '&' : '?') + 'limit=10').then(function(r) { return r.json(); }).catch(function() { return []; })
+  ]).then(function(results) {
+    var status = results[0];
+    var agents = results[1];
+    var history = Array.isArray(results[2]) ? results[2] : (results[2].messages || []);
+    var tasks = Array.isArray(results[3]) ? results[3] : [];
+    var workflows = Array.isArray(results[4]) ? results[4] : [];
+    var notifications = Array.isArray(results[5]) ? results[5] : [];
+
+    var agentEntries = Object.entries(agents).filter(function(e) { return e[0] !== '__system__'; });
+
+    // Data hash to skip unnecessary rebuilds (excludes timestamps)
+    var overviewHash = (status.aliveCount || 0) + ':' + (status.messageCount || 0) + ':' + agentEntries.length + ':' + tasks.map(function(t) { return t.status; }).join(',') + ':' + workflows.map(function(w) { return w.status; }).join(',') + ':' + history.length + ':' + notifications.length + ':b:' + (activeBranch || 'main');
+    if (overviewHash === renderOverview._lastHash) { return; }
+    renderOverview._lastHash = overviewHash;
+
+    var pending = tasks.filter(function(t) { return t.status === 'pending'; }).length;
+    var inProgress = tasks.filter(function(t) { return t.status === 'in_progress'; }).length;
+    var done = tasks.filter(function(t) { return t.status === 'done'; }).length;
+    var taskPct = tasks.length > 0 ? Math.round((done / tasks.length) * 100) : 0;
+    var activeWfs = workflows.filter(function(w) { return w.status === 'active'; });
+    var hasAgents = agentEntries.length > 0;
+    var hasMessages = history.length > 0;
+    var hasWorkflows = activeWfs.length > 0;
+    var hasTasks = tasks.length > 0;
+
+    var html = '';
+
+    // Welcome header with coordinator mode toggle
+    var coordMode = status.coordinator_mode || 'responsive';
+    html += '<div class="overview-welcome" style="display:flex;justify-content:space-between;align-items:flex-start">';
+    html += '<div><h2>Dashboard</h2>';
+    html += '<p>' + (status.conversation_mode === 'managed' ? 'Managed mode' : 'Direct mode') + ' &middot; ' + (status.agentCount || 0) + ' agents registered</p></div>';
+    html += '<div style="display:flex;align-items:center;gap:8px;padding-top:4px">';
+    html += '<span style="font-size:12px;color:var(--text-muted)">Coordinator</span>';
+    html += '<div style="display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:12px">';
+    html += '<button onclick="setCoordinatorMode(\'responsive\')" style="padding:5px 12px;border:none;cursor:pointer;font-size:12px;font-weight:' + (coordMode === 'responsive' ? '600' : '400') + ';background:' + (coordMode === 'responsive' ? 'var(--accent-dim)' : 'var(--surface-2)') + ';color:' + (coordMode === 'responsive' ? 'var(--accent)' : 'var(--text-muted)') + ';transition:all 0.15s">Stay with me</button>';
+    html += '<button onclick="setCoordinatorMode(\'autonomous\')" style="padding:5px 12px;border:none;border-left:1px solid var(--border);cursor:pointer;font-size:12px;font-weight:' + (coordMode === 'autonomous' ? '600' : '400') + ';background:' + (coordMode === 'autonomous' ? 'var(--green-dim)' : 'var(--surface-2)') + ';color:' + (coordMode === 'autonomous' ? 'var(--green)' : 'var(--text-muted)') + ';transition:all 0.15s">Run autonomously</button>';
+    html += '</div></div>';
+    html += '</div>';
+
+    // Metric cards with icons
+    html += '<div class="overview-metrics">';
+    html += '<div class="metric-card">';
+    html += '<div class="metric-icon" style="background:var(--green-dim)"><svg viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="var(--green)" stroke-width="1.5"><circle cx="8" cy="5" r="3"/><path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6"/></svg></div>';
+    html += '<div class="metric-label">Active Agents</div>';
+    html += '<div class="metric-value">' + (status.aliveCount || 0) + '</div>';
+    html += '<div class="metric-sub">' + (status.sleepingCount || 0) + ' sleeping</div>';
+    html += '</div>';
+
+    html += '<div class="metric-card">';
+    html += '<div class="metric-icon" style="background:var(--accent-dim)"><svg viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="var(--accent)" stroke-width="1.5"><path d="M2 3h12v8H6l-3 2.5V11H2z" stroke-linejoin="round"/></svg></div>';
+    html += '<div class="metric-label">Messages</div>';
+    html += '<div class="metric-value">' + (status.messageCount || 0) + '</div>';
+    html += '<div class="metric-sub">' + (status.threadCount || 0) + ' threads</div>';
+    html += '</div>';
+
+    html += '<div class="metric-card">';
+    html += '<div class="metric-icon" style="background:' + (taskPct === 100 ? 'var(--green-dim)' : 'var(--purple-dim)') + '"><svg viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="' + (taskPct === 100 ? 'var(--green)' : 'var(--purple)') + '" stroke-width="1.5"><rect x="2" y="2" width="12" height="12" rx="2"/><path d="M5 8l2 2 4-4"/></svg></div>';
+    html += '<div class="metric-label">Task Progress</div>';
+    html += '<div class="metric-value">' + taskPct + '<span style="font-size:18px;font-weight:600;color:var(--text-muted);margin-left:2px">%</span></div>';
+    html += '<div class="metric-sub">' + done + ' done, ' + inProgress + ' active, ' + pending + ' pending</div>';
+    html += '</div>';
+    html += '</div>';
+
+    if (!hasAgents && !hasMessages && !hasWorkflows && !hasTasks) {
+      // Empty state with branded feel
+      html += '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:16px">';
+      html += '<div style="width:64px;height:64px;border-radius:16px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;margin-bottom:20px"><svg viewBox="0 0 16 16" width="28" height="28" fill="none" stroke="var(--accent)" stroke-width="1.2"><path d="M8 1.5L14 5v6l-6 3.5L2 11V5z"/></svg></div>';
+      html += '<div style="font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px">No agents online yet</div>';
+      html += '<div style="font-size:13px;color:var(--text-muted);max-width:360px;line-height:1.6;margin-bottom:4px">Open a CLI terminal and register an agent to start collaborating.</div>';
+      html += '<button class="overview-launch-btn" onclick="switchView(\'launch\')"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2v12M2 8h12"/></svg> Launch Agents</button>';
+      html += '</div>';
+    } else {
+      html += '<div class="overview-grid">';
+
+      // Active agents panel
+      if (hasAgents) {
+        html += '<div class="overview-panel"><h3>Agents <a onclick="switchView(\'messages\')">View messages &rarr;</a></h3>';
+        for (var i = 0; i < agentEntries.length; i++) {
+          var aName = agentEntries[i][0];
+          var aInfo = agentEntries[i][1];
+          var dotColor = !aInfo.alive ? '#6b7280' : aInfo.is_listening ? '#3b82f6' : aInfo.status === 'idle' ? '#f59e0b' : '#22c55e';
+          var dotGlow = !aInfo.alive ? '' : ';box-shadow:0 0 6px ' + dotColor;
+          var statusText = !aInfo.alive ? 'offline' : aInfo.is_listening ? 'listening' : aInfo.status === 'idle' ? 'idle' : 'working';
+          html += '<div class="overview-agent-row"><span class="overview-agent-dot" style="background:' + dotColor + dotGlow + '"></span><span class="overview-agent-name">' + aName + '</span><span class="overview-agent-status">' + statusText + ' &middot; ' + (aInfo.provider || '?') + '</span></div>';
+        }
+        html += '</div>';
+      }
+
+      // Workflow progress panel
+      if (hasWorkflows) {
+        html += '<div class="overview-panel"><h3>Workflows <a onclick="switchView(\'workflows\')">View all &rarr;</a></h3>';
+        for (var w = 0; w < activeWfs.length; w++) {
+          var wf = activeWfs[w];
+          var wfDone = wf.steps ? wf.steps.filter(function(s) { return s.status === 'done'; }).length : 0;
+          var wfTotal = wf.steps ? wf.steps.length : 1;
+          var wfPct = Math.round((wfDone / wfTotal) * 100);
+          html += '<div style="margin-bottom:12px"><div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px"><span style="font-size:13px;font-weight:600;color:var(--text)">' + (wf.name || 'Workflow') + '</span><span style="font-size:12px;color:var(--text-muted)">' + wfPct + '<span style="font-size:0.8em;margin-left:1px">%</span></span></div>';
+          html += '<div style="height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:' + wfPct + '%;background:var(--gradient-accent);border-radius:3px;transition:width 0.3s"></div></div></div>';
+        }
+        html += '</div>';
+      }
+
+      // Task summary
+      if (hasTasks && !hasWorkflows) {
+        html += '<div class="overview-panel"><h3>Tasks <a onclick="switchView(\'tasks\')">View board &rarr;</a></h3>';
+        html += '<div class="overview-task-summary">';
+        if (pending > 0) html += '<span class="overview-task-badge pending">' + pending + ' pending</span>';
+        if (inProgress > 0) html += '<span class="overview-task-badge active">' + inProgress + ' active</span>';
+        if (done > 0) html += '<span class="overview-task-badge done">' + done + ' done</span>';
+        html += '</div>';
+        html += '</div>';
+      }
+
+      // Recent messages
+      if (hasMessages) {
+        html += '<div class="overview-panel overview-full-width"><h3>Recent Activity <a onclick="switchView(\'messages\')">View all &rarr;</a></h3>';
+        for (var m = 0; m < history.length; m++) {
+          var msg = history[m];
+          var time = new Date(msg.timestamp);
+          var timeStr = time.getHours() + ':' + String(time.getMinutes()).padStart(2, '0');
+          var preview = (msg.content || '').replace(/[#*`_~\[\]]/g, '').substring(0, 100);
+          html += '<div class="overview-msg-row"><span class="overview-msg-from">' + (msg.from || '?') + '</span><span class="overview-msg-text">' + preview + '</span><span class="overview-msg-time">' + timeStr + '</span></div>';
+        }
+        html += '</div>';
+      }
+
+      // Task summary (if workflows already shown, put tasks as full width)
+      if (hasTasks && hasWorkflows) {
+        html += '<div class="overview-panel overview-full-width"><h3>Tasks <a onclick="switchView(\'tasks\')">View board &rarr;</a></h3>';
+        html += '<div class="overview-task-summary">';
+        if (pending > 0) html += '<span class="overview-task-badge pending">' + pending + ' pending</span>';
+        if (inProgress > 0) html += '<span class="overview-task-badge active">' + inProgress + ' active</span>';
+        if (done > 0) html += '<span class="overview-task-badge done">' + done + ' done</span>';
+        html += '</div>';
+        html += '</div>';
+      }
+
+      html += '</div>';
+    }
+
+    // Notifications feed (always show if there are recent notifications)
+    if (notifications.length > 0) {
+      var NOTIF_ICONS = { task_done: '&#x2713;', workflow_advanced: '&#x25B6;', agent_online: '+', agent_offline: '-', approval_needed: '!' };
+      var NOTIF_COLORS = { task_done: 'var(--green)', workflow_advanced: 'var(--accent)', agent_online: 'var(--green)', agent_offline: 'var(--text-muted)', approval_needed: 'var(--orange)' };
+      html += '<div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px">';
+      html += '<div style="font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px">Recent Notifications</div>';
+      var recent = notifications.slice(-8).reverse();
+      for (var ni = 0; ni < recent.length; ni++) {
+        var n = recent[ni];
+        var ntime = new Date(n.timestamp);
+        var ntimeStr = ntime.getHours() + ':' + String(ntime.getMinutes()).padStart(2, '0');
+        var ncolor = NOTIF_COLORS[n.type] || 'var(--text-muted)';
+        var nicon = NOTIF_ICONS[n.type] || '&#x2022;';
+        html += '<div style="display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px">';
+        html += '<span style="width:22px;height:22px;border-radius:6px;background:' + ncolor + '15;color:' + ncolor + ';display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0">' + nicon + '</span>';
+        html += '<span style="flex:1;color:var(--text-dim)">' + (n.summary || n.type) + '</span>';
+        html += '<span style="font-size:11px;color:var(--text-muted);flex-shrink:0">' + ntimeStr + '</span>';
+        html += '</div>';
+      }
+      html += '</div>';
+    }
+
+    if (area.innerHTML !== html) {
+      area.innerHTML = html;
+      area.scrollTop = savedScroll;
+    }
+  }).catch(function(e) {
+    area.innerHTML = '<div style="padding:28px 32px;color:var(--text-muted)">Failed to load overview: ' + e.message + '</div>';
+  });
+}
+
+// ==================== COORDINATOR MODE ====================
+
+function setCoordinatorMode(mode) {
+  lttFetch('/api/coordinator-mode', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ mode: mode })
+  }).then(function(r) { return r.json(); }).then(function(data) {
+    if (data.error) {
+      showToast('!', 'Failed: ' + data.error);
+    } else {
+      showToast('&#x2713;', 'Coordinator mode: ' + (mode === 'responsive' ? 'Stay with me' : 'Run autonomously'));
+      renderOverview();
+    }
+  }).catch(function() {
+    showToast('!', 'Failed to change coordinator mode');
+  });
+}
+
+// ==================== TOAST NOTIFICATIONS ====================
+
+var toastQueue = [];
+function showToast(icon, text) {
+  var container = document.getElementById('toast-container');
+  if (!container) return;
+  // Max 3 toasts
+  while (container.children.length >= 3) {
+    container.removeChild(container.firstChild);
+  }
+  var toast = document.createElement('div');
+  var isError = icon === '!' || text.toLowerCase().indexOf('failed') !== -1 || text.toLowerCase().indexOf('error') !== -1;
+  var isSuccess = icon.indexOf('2713') !== -1 || icon.indexOf('+') !== -1;
+  toast.className = 'toast' + (isError ? ' toast-error' : isSuccess ? ' toast-success' : '');
+  toast.innerHTML = '<span class="toast-icon">' + icon + '</span><span class="toast-text">' + text + '</span>';
+  container.appendChild(toast);
+  setTimeout(function() {
+    toast.classList.add('leaving');
+    setTimeout(function() { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 300);
+  }, 5000);
+}
+
 // ==================== SSE + POLLING ====================
 
 var sseConnected = false;
@@ -8470,19 +9761,16 @@ var ssePollFallback = null;
 
 function setConnStatus(status) {
   var dot = document.querySelector('.conn-dot');
-  var label = document.getElementById('conn-label');
+  if (!dot) return;
   if (status === 'live') {
     dot.style.background = 'var(--green)';
     dot.style.animation = 'pulse 2s infinite';
-    label.textContent = 'Live (SSE)';
   } else if (status === 'reconnecting') {
     dot.style.background = 'var(--yellow, #f0ad4e)';
     dot.style.animation = 'pulse 0.8s infinite';
-    label.textContent = 'Reconnecting...';
   } else if (status === 'poll') {
     dot.style.background = 'var(--green)';
     dot.style.animation = 'pulse 2s infinite';
-    label.textContent = 'Live (poll)';
   }
 }
 
@@ -8501,10 +9789,17 @@ function initSSE() {
       if (needMessages || needAgents) {
         // Full poll for messages/agents (they're coupled in rendering)
         poll();
-      } else {
-        // Targeted fetch for tasks/workflows only — no full poll needed
-        if (needTasks && activeView === 'tasks') fetchTasks();
-        if (needWorkflows && activeView === 'workflows') fetchWorkflows();
+        // Also refresh overview if currently viewing it
+        if (activeView === 'overview') renderOverview();
+      }
+      // Targeted fetch for tasks/workflows — refresh on any view that needs them
+      if (needTasks) {
+        if (activeView === 'tasks') fetchTasks();
+        else if (activeView === 'overview') renderOverview();
+      }
+      if (needWorkflows) {
+        if (activeView === 'workflows') fetchWorkflows();
+        else if (activeView === 'overview') renderOverview();
       }
     };
     eventSource.onopen = function() {
@@ -8556,16 +9851,31 @@ loadProjects().then(function() {
   loadConversationList();
   poll();
   initSSE();
-  switchView('office');
+  switchView(activeView);
 }).catch(function(e) {
   console.error('[LTT] init: loadProjects failed, polling anyway:', e);
   poll();
   initSSE();
-  switchView('office');
+  switchView(activeView);
 });
 // Safety-net poll at 10s (SSE handles real-time, this catches any missed updates)
 setInterval(poll, 10000);
 </script>
 
+<!-- Workflow Detail Popup -->
+<div class="phone-modal-overlay" id="wf-detail-overlay" onclick="if(event.target===this)closeWfDetail()">
+  <div class="phone-modal" style="width:620px;text-align:left;max-height:85vh;overflow-y:auto">
+    <button class="phone-modal-close" onclick="closeWfDetail()">&times;</button>
+    <div id="wf-detail-content"></div>
+  </div>
+</div>
+<!-- Task Detail Popup -->
+<div class="phone-modal-overlay" id="task-detail-overlay" onclick="if(event.target===this)closeTaskDetail()">
+  <div class="phone-modal" style="width:520px;text-align:left;max-height:80vh;overflow-y:auto">
+    <button class="phone-modal-close" onclick="closeTaskDetail()">&times;</button>
+    <div id="task-detail-content"></div>
+  </div>
+</div>
+<div class="toast-container" id="toast-container"></div>
 </body>
 </html>