neohive 6.0.3 → 6.1.0

package/dashboard.html

@@ -4,78 +4,116 @@
 <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='%23f59e0b'/><circle cx='38' cy='42' r='5' fill='%230d1117'/><circle cx='55' cy='42' r='5' fill='%230d1117'/></svg>">
+<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
+<link rel="icon" href="logo.svg" type="image/svg+xml">
 <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">
+<link rel="stylesheet" href="/design-system.css">
+<!-- xterm.js dependencies now lazy-loaded on terminal tab activation to prevent dashboard stalling -->
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
 
+  /*
+   * Token fallbacks: specificity 0 via :where() so a loaded design-system.css :root
+   * and [data-theme="light"] still win. If /design-system.css is blocked (Safari
+   * extensions / networking), these keep cards, padding, and colors defined.
+   */
+  :where(:root) {
+    --nh-space-1: 4px;
+    --nh-space-2: 8px;
+    --nh-space-3: 12px;
+    --nh-space-4: 16px;
+    --nh-space-5: 20px;
+    --nh-space-6: 24px;
+    --nh-space-8: 32px;
+    --nh-radius-sm: 6px;
+    --nh-radius-md: 8px;
+    --nh-radius-lg: 10px;
+    --nh-radius-xl: 12px;
+    --nh-bg: #0f0f10;
+    --nh-sidebar: #161618;
+    --nh-card: #1c1c1f;
+    --nh-card-hover: #232326;
+    --nh-border: #27272a;
+    --nh-text-primary: #f3f4f6;
+    --nh-text-secondary: #9ca3af;
+    --nh-text-muted: #6b7280;
+    --nh-accent: #f59e0b;
+    --nh-green: #10b981;
+    --nh-red: #ef4444;
+    --nh-orange: #f97316;
+    --nh-purple: #a78bfa;
+    --nh-yellow: #eab308;
+    --nh-divider: rgba(255, 255, 255, 0.08);
+    --nh-divider-strong: rgba(255, 255, 255, 0.14);
+    --nh-accent-5: rgba(245, 158, 11, 0.05);
+    --nh-accent-10: rgba(245, 158, 11, 0.1);
+    --nh-accent-20: rgba(245, 158, 11, 0.2);
+    --nh-green-10: rgba(16, 185, 129, 0.1);
+    --nh-red-10: rgba(239, 68, 68, 0.12);
+    --nh-orange-10: rgba(249, 115, 22, 0.12);
+    --nh-purple-10: rgba(167, 139, 250, 0.12);
+    --nh-purple-20: rgba(167, 139, 250, 0.22);
+    --nh-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
+    --nh-code-inline-fg: #f97316;
+    --nh-code-block-bg: #0f0f10;
+    --nh-on-dark: #ffffff;
+    --nh-on-accent: #3a2201;
+    --nh-blue: #3b82f6;
+    --nh-green-glow: 0 0 8px rgba(16, 185, 129, 0.5);
+    --nh-blue-glow: 0 0 8px rgba(59, 130, 246, 0.45);
+  }
+
   :root {
-    --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;
+    /* Bridge legacy dashboard tokens → design-system.css (--nh-*) */
+    --bg: var(--nh-bg);
+    --surface: var(--nh-sidebar);
+    --surface-2: var(--nh-card);
+    --surface-3: var(--nh-card-hover);
+    --border: var(--nh-divider);
+    --border-light: var(--nh-divider-strong);
+    --text: var(--nh-text-primary);
+    --text-dim: var(--nh-text-secondary);
+    --text-muted: var(--nh-text-muted);
+    --accent: var(--nh-accent);
+    --accent-dim: var(--nh-accent-10);
+    --accent-glow: var(--nh-accent-20);
+    --green: var(--nh-green);
+    --green-dim: var(--nh-green-10);
+    --red: var(--nh-red);
+    --red-dim: var(--nh-red-10);
+    --orange: var(--nh-orange);
+    --orange-dim: var(--nh-orange-10);
+    --purple: var(--nh-purple);
+    --purple-dim: var(--nh-purple-10);
+    --yellow: var(--nh-yellow);
+    --bg-primary: var(--nh-card);
+    --bg-secondary: var(--nh-sidebar);
+    --bg-tertiary: var(--nh-card-hover);
+    --text-primary: var(--nh-text-primary);
+    --text-secondary: var(--nh-text-secondary);
     --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);
+    --sidebar-w: 256px;
+    --header-h: 56px;
+    --glow: 0 0 24px var(--nh-accent-10);
     --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%);
+    --gradient-accent: linear-gradient(135deg, var(--nh-accent), var(--nh-orange));
+    --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
   }
 
   [data-theme="light"] {
-    --bg: #fafaf9;
-    --surface: #ffffff;
-    --surface-2: #f5f5f4;
-    --surface-3: #e7e5e4;
-    --border: rgba(0, 0, 0, 0.08);
-    --border-light: rgba(0, 0, 0, 0.12);
-    --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: #ea580c;
-    --orange-dim: rgba(234, 88, 12, 0.08);
-    --purple: #7c3aed;
-    --purple-dim: rgba(124, 58, 237, 0.08);
-    --yellow: #ca8a04;
-    --glow: 0 0 20px rgba(217, 119, 6, 0.05);
+    --glow: 0 0 20px var(--nh-accent-10);
     --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%);
+    --gradient-surface: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%);
   }
 
   .theme-toggle {
@@ -117,10 +155,12 @@
 
   /* ===== HEADER ===== */
   .header {
-    background: var(--bg);
-    border-bottom: 1px solid var(--border);
-    padding: 0 16px;
-    height: 48px;
+    background: var(--nh-glass-bg);
+    backdrop-filter: var(--nh-blur);
+    -webkit-backdrop-filter: var(--nh-blur);
+    border-bottom: 1px solid var(--nh-glass-border);
+    padding: 0 var(--nh-space-6);
+    height: var(--header-h);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -129,6 +169,7 @@
     left: 0;
     right: 0;
     z-index: 100;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
   }
 
   [data-theme="light"] .header {
@@ -142,8 +183,9 @@
   }
 
   .logo {
-    font-size: 15px;
+    font-size: 20px;
     font-weight: 700;
+    letter-spacing: -0.01em;
     color: var(--text);
     white-space: nowrap;
     letter-spacing: -0.3px;
@@ -164,7 +206,16 @@
   .header-actions {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 10px;
+  }
+
+  .header-conn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--text-dim);
+    margin-right: 4px;
   }
 
   .connection {
@@ -177,11 +228,11 @@
   }
 
   .conn-dot {
-    width: 7px;
-    height: 7px;
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
     background: var(--green);
-    box-shadow: 0 0 6px var(--green);
+    box-shadow: var(--nh-green-glow);
     animation: pulse 2s infinite;
   }
 
@@ -232,13 +283,15 @@
   .sidebar {
     width: var(--sidebar-w);
     min-width: var(--sidebar-w);
-    background: var(--surface);
-    background-image: var(--gradient-surface);
-    border-right: 1px solid var(--border);
+    background: var(--nh-glass-bg);
+    backdrop-filter: var(--nh-blur);
+    -webkit-backdrop-filter: var(--nh-blur);
+    border-right: 1px solid var(--nh-glass-border);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     transition: width 0.25s ease, min-width 0.25s ease, margin-left 0.25s ease;
+    box-shadow: 1px 0 0 rgba(0,0,0,0.1);
   }
   .sidebar.collapsed {
     width: 0;
@@ -348,24 +401,40 @@
   /* ===== AGENT CARDS ===== */
   .agent-card {
     background: var(--surface-2);
-    background-image: var(--gradient-surface);
     border: 1px solid var(--border);
     border-radius: 8px;
-    padding: 6px 10px;
-    margin-bottom: 4px;
-    transition: all 0.25s ease;
+    padding: 8px 12px;
+    margin-bottom: 6px;
+    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
     cursor: pointer;
+    position: relative;
+    overflow: hidden;
   }
 
-  .agent-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-sm); }
+  .agent-card:hover {
+    transform: translateX(4px);
+    border-color: var(--nh-accent-50);
+    background: var(--surface-3);
+    box-shadow: var(--shadow-sm);
+  }
 
-  .agent-card.sleeping, .agent-card.idle {
-    border-left: 3px solid var(--orange);
+  .agent-card.working, .agent-card.active {
+    border-left: 3px solid var(--green);
+    box-shadow: 0 0 15px var(--green-dim);
+    animation: nh-glow-pulse 2s infinite ease-in-out;
   }
 
   .agent-card.dead, .agent-card.offline {
     opacity: 0.5;
   }
+  .agent-card.unknown {
+    opacity: 0.4;
+    border-left: 3px solid var(--nh-text-muted);
+  }
+  .agent-card.stale {
+    opacity: 0.65;
+    border-left: 3px solid var(--orange);
+  }
 
   .agent-top {
     display: flex;
@@ -394,10 +463,22 @@
     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-status-dot.active, .agent-status-dot.working { background: var(--green); box-shadow: var(--nh-green-glow); }
+  .agent-status-dot.listening { background: var(--nh-blue); box-shadow: 0 0 6px var(--nh-blue); animation: pulse 2s infinite; }
+  .agent-status-dot.sleeping, .agent-status-dot.idle { background: var(--nh-accent); animation: pulse 2s infinite; }
+  .agent-status-dot.dead, .agent-status-dot.offline { background: var(--nh-text-muted); }
+  .agent-status-dot.unknown { background: var(--nh-text-muted); opacity: 0.5; }
+  .agent-status-dot.stale { background: var(--orange); animation: pulse 2s infinite; }
+  .agent-status-dot.unresponsive { background: var(--orange, #f97316); box-shadow: 0 0 6px var(--orange, #f97316); animation: pulse 2s infinite; }
+  .agent-status-dot.stuck { background: var(--red, #ef4444); box-shadow: 0 0 8px var(--red, #ef4444); animation: pulse 1.2s infinite; }
+
+  .agent-state-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; line-height: 16px; flex-shrink: 0; }
+  .agent-state-pill.listening { background: rgba(96,165,250,0.15); color: #60a5fa; }
+  .agent-state-pill.working   { background: rgba(251,191,36,0.15); color: #fbbf24; }
+  .agent-current-tool { font-size: 10px; color: var(--nh-text-muted, #6b7280); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
+
+  .agent-card.stuck { border-color: rgba(239, 68, 68, 0.3); }
+  .agent-card.unresponsive { border-color: rgba(249, 115, 22, 0.3); }
 
   .agent-name {
     font-weight: 600;
@@ -415,6 +496,147 @@
     text-overflow: ellipsis;
   }
 
+  /* ===== AGENT SKILLS ===== */
+  .agent-skills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 6px;
+  }
+
+  .skill-tag {
+    font-size: 9px;
+    padding: 1px 5px;
+    border-radius: 4px;
+    background: var(--surface-3);
+    color: var(--text-dim);
+    border: 1px solid var(--border);
+  }
+
+  /* ===== NUDGE & SPARKLINE ===== */
+  .agent-nudge-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 24px;
+    height: 24px;
+    border-radius: 6px;
+    background: var(--nh-red-10);
+    border: 1px solid var(--nh-red);
+    color: var(--nh-red);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.2s ease;
+    z-index: 10;
+  }
+  .agent-card:hover .agent-nudge-btn { opacity: 1; }
+  .agent-nudge-btn:hover { background: var(--nh-red); color: #fff; transform: scale(1.1); box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
+
+  .listen-sparkline {
+    display: flex;
+    gap: 3px;
+    margin-top: 8px;
+    padding-top: 4px;
+    border-top: 1px solid var(--nh-divider);
+    align-items: center;
+  }
+  .listen-sparkline-label {
+    font-size: 9px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    font-weight: 700;
+    margin-right: 4px;
+    letter-spacing: 0.5px;
+  }
+  .hb-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--nh-divider-strong);
+    transition: all 0.3s ease;
+  }
+  .hb-dot.active {
+    background: var(--nh-green);
+    box-shadow: 0 0 6px var(--nh-green);
+  }
+  .hb-dot.stale { background: var(--nh-orange); opacity: 0.5; }
+  .hb-dot.empty { background: transparent; border: 1px solid var(--nh-divider); }
+
+  @keyframes stuck-pulse {
+    0% { border-color: var(--nh-divider); }
+    50% { border-color: var(--nh-red); box-shadow: inset 0 0 10px var(--nh-red-10); }
+    100% { border-color: var(--nh-divider); }
+  }
+  .agent-card.stuck {
+    animation: stuck-pulse 1.5s infinite ease-in-out;
+  }
+
+  /* Platform colors */
+  .platform-claude { background: var(--nh-accent-10); color: var(--nh-accent); border-color: var(--nh-accent-20); }
+  .platform-gemini { background: rgba(59, 130, 246, 0.1); color: var(--nh-blue); border-color: rgba(59, 130, 246, 0.2); }
+  .platform-openai { background: var(--nh-green-10); color: var(--nh-green); border-color: var(--nh-green-20); }
+  .platform-deepseek { background: var(--nh-purple-10); color: var(--nh-purple); border-color: var(--nh-purple-20); }
+  .platform-llama { background: var(--nh-orange-10); color: var(--nh-orange); border-color: var(--nh-orange-20); }
+  .platform-mistral { background: var(--nh-red-10); color: var(--nh-red); border-color: var(--nh-red-20); }
+
+  /* Skill Editor in Profile */
+  .skill-editor {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--surface-2);
+    border-radius: 8px;
+    border: 1px solid var(--border);
+  }
+
+  .skill-editor-tag {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 4px 8px;
+    background: var(--surface-3);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+  }
+
+  .remove-skill-btn {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  .remove-skill-btn:hover { opacity: 1; color: var(--red); }
+
+  .add-skill-box {
+    display: flex;
+    gap: 6px;
+    width: 100%;
+    margin-top: 8px;
+  }
+
+  .add-skill-input {
+    flex: 1;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-size: 12px;
+    color: var(--text);
+    outline: none;
+  }
+
+  .add-skill-input:focus { border-color: var(--accent); }
+
   .nudge-btn {
     background: var(--orange-dim);
     color: var(--orange);
@@ -638,37 +860,88 @@
     flex-direction: column;
     min-width: 0;
     overflow: hidden;
+    background: var(--nh-bg);
   }
 
-  /* ===== MESSAGES ===== */
+  /* ===== MESSAGES (card feed — nh-msg-card from design-system.css) ===== */
   .messages-area {
     flex: 1;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     padding: 16px 20px;
+    padding: var(--nh-space-4) var(--nh-space-5);
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex-direction: column;
     flex-direction: column;
-    gap: 2px;
+    /* margin between rows — do not rely on flex gap alone (Safari 14.0 reports @supports(gap) true for grid while flex had no gap) */
   }
 
-  .message {
+  .messages-area > * + * {
+    margin-top: 12px;
+    margin-top: var(--nh-space-3, 12px);
+  }
+
+  /*
+   * Card chrome duplicated here (higher specificity than .nh-msg-card alone) with
+   * px fallbacks so messages stay “in cards” even if external CSS or vars fail.
+   * Horizontal spacing uses margin, not flex gap, for the same Safari reason.
+   */
+  .message.nh-msg-card {
+    display: -webkit-flex;
     display: flex;
-    gap: 10px;
-    padding: 10px 14px;
-    border-radius: 10px;
-    transition: all 0.2s ease;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+    box-sizing: border-box;
+    padding: 16px 20px;
+    padding: var(--nh-space-4) var(--nh-space-5);
+    background-color: #1c1c1f;
+    background-color: var(--nh-card, #1c1c1f);
+    border: 1px solid #27272a;
+    border-color: var(--nh-border, #27272a);
+    border-radius: 12px;
+    border-radius: var(--nh-radius-xl, 12px);
+  }
+
+  .message.nh-msg-card > .msg-avatar + .msg-body,
+  .message.nh-msg-card > .msg-avatar-img + .msg-body {
+    margin-left: 12px;
+    margin-left: var(--nh-space-3, 12px);
+  }
+
+  .message.nh-msg-card:hover {
+    border-color: rgba(156, 163, 175, 0.45);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
+    box-shadow: var(--nh-shadow-card, 0 4px 24px rgba(0, 0, 0, 0.35));
+  }
+
+  .message {
     position: relative;
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
+    overflow: visible;
   }
 
-  .message:hover { background: var(--surface); box-shadow: var(--glow); }
+  .message .msg-actions {
+    top: -10px;
+    right: var(--nh-space-3);
+  }
 
   /* ===== REACTIONS ===== */
   .msg-actions {
     position: absolute;
-    top: 6px;
+    top: -10px;
     right: 6px;
     display: none;
     gap: 2px;
     align-items: center;
+    z-index: 2;
+    background: var(--nh-card, #1c1c1f);
+    border: 1px solid var(--nh-border, #27272a);
+    border-radius: var(--nh-radius-md, 8px);
+    padding: 2px 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   }
 
   .message:hover .msg-actions { display: flex; }
@@ -693,11 +966,11 @@
     position: absolute;
     top: -4px;
     right: 56px;
-    background: var(--surface-2);
+    background: var(--nh-card);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid var(--border-light);
-    border-radius: 10px;
+    border: 1px solid var(--nh-border);
+    border-radius: var(--nh-radius-lg);
     padding: 4px;
     gap: 2px;
     z-index: 20;
@@ -717,7 +990,7 @@
     line-height: 1;
   }
 
-  .react-emoji:hover { background: var(--surface-3); }
+  .react-emoji:hover { background: var(--nh-card-hover); }
 
   .msg-reactions {
     display: flex;
@@ -730,9 +1003,9 @@
     display: inline-flex;
     align-items: center;
     gap: 3px;
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    border-radius: 10px;
+    background: var(--nh-card-hover);
+    border: 1px solid var(--nh-border);
+    border-radius: var(--nh-radius-lg);
     padding: 1px 6px;
     font-size: 12px;
     cursor: pointer;
@@ -768,22 +1041,29 @@
 
   .pinned-toggle { font-size: 11px; color: var(--accent); }
 
-  .pinned-section .message { padding: 6px 20px; }
+  .pinned-section .message.nh-msg-card {
+    padding: var(--nh-space-2) var(--nh-space-4);
+    margin-bottom: var(--nh-space-2);
+  }
+  .pinned-section .message.nh-msg-card:last-child { margin-bottom: 0; }
   .pinned-section .msg-content { font-size: 12px; max-height: 40px; overflow: hidden; }
 
   .bookmark-btn {
     position: absolute;
-    top: 8px;
-    right: 8px;
-    background: none;
-    border: none;
+    top: -10px;
+    right: 40px;
+    background: var(--nh-card, #1c1c1f);
+    border: 1px solid var(--nh-border, #27272a);
+    border-radius: var(--nh-radius-md, 8px);
     cursor: pointer;
     font-size: 14px;
     opacity: 0;
     transition: opacity 0.15s;
     color: var(--text-muted);
-    padding: 2px;
+    padding: 2px 4px;
     line-height: 1;
+    z-index: 2;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   }
 
   .message:hover .bookmark-btn { opacity: 0.6; }
@@ -791,21 +1071,81 @@
   .bookmark-btn.active { opacity: 1 !important; color: var(--yellow); }
 
   .msg-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 9999px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 13px;
     flex-shrink: 0;
-    color: #fff;
+    color: var(--nh-on-dark);
     margin-top: 2px;
+    border: 1px solid var(--nh-border);
+  }
+
+  /* min-height:0 helps WebKit flex descendants size correctly; overflow visible avoids clipping receipts/shadows */
+  .msg-body { flex: 1; min-width: 0; min-height: 0; overflow: visible; }
+
+  .msg-card-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--nh-space-4);
+    margin-bottom: var(--nh-space-2);
+    width: 100%;
+  }
+
+  .msg-card-ident {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .msg-from {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 1.3;
+    color: var(--nh-text-primary);
   }
 
-  .msg-body { flex: 1; min-width: 0; }
+  .msg-to-line {
+    font-size: 12px;
+    color: var(--nh-text-secondary);
+    margin-top: var(--nh-space-1);
+    line-height: 1.35;
+  }
+
+  .msg-to-label {
+    color: var(--nh-text-muted);
+    margin-right: var(--nh-space-1);
+    font-weight: 500;
+  }
+
+  .msg-card-head-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--nh-space-1);
+    flex-shrink: 0;
+    text-align: right;
+  }
+
+  .msg-time {
+    font-size: 12px;
+    color: var(--nh-text-muted);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
 
+  .msg-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    justify-content: flex-end;
+  }
+
+  /* Legacy row layout (compact / grouped fallbacks) */
   .msg-header {
     display: flex;
     align-items: baseline;
@@ -814,10 +1154,8 @@
     flex-wrap: wrap;
   }
 
-  .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); }
+  .msg-arrow { color: var(--nh-text-muted); font-size: 12px; }
+  .msg-to { font-size: 13px; color: var(--nh-text-secondary); }
 
   .badge-channel {
     background: var(--purple-dim);
@@ -884,56 +1222,58 @@
     font-size: 14px;
     line-height: 1.6;
     word-break: break-word;
-    color: var(--text);
+    color: var(--nh-text-primary);
   }
 
-  .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 h1 { font-size: 22px; font-weight: 700; margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--nh-border); }
+  .msg-content h2 { font-size: 18px; font-weight: 700; margin: 10px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--nh-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; }
 
   .msg-content strong { font-weight: 700; }
-  .msg-content em { font-style: italic; color: var(--text-dim); }
+  .msg-content em { font-style: italic; color: var(--nh-text-secondary); }
 
   .msg-content code {
-    background: var(--surface-3);
-    padding: 1px 5px;
-    border-radius: 4px;
+    background: var(--nh-card-hover);
+    padding: 2px 6px;
+    border-radius: var(--nh-radius-sm);
     font-size: 12px;
     font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-    color: var(--orange);
+    color: var(--nh-code-inline-fg);
+    border: 1px solid var(--nh-border);
   }
 
   .msg-content pre {
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 14px 16px;
-    margin: 8px 0;
+    background: var(--nh-code-block-bg);
+    border: 1px solid var(--nh-border);
+    border-radius: var(--nh-radius-md);
+    padding: var(--nh-space-3) var(--nh-space-4);
+    margin: var(--nh-space-2) 0;
     overflow-x: auto;
     font-size: 12px;
     line-height: 1.6;
     font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
     position: relative;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
   }
 
   .msg-content pre code {
     background: none;
     padding: 0;
-    color: var(--text);
+    border: none;
+    color: var(--nh-text-primary);
     font-size: inherit;
   }
 
   .msg-content pre .lang-tag {
     position: absolute;
-    top: 4px;
-    right: 8px;
+    top: 6px;
+    right: var(--nh-space-2);
     font-size: 10px;
-    color: var(--text-muted);
+    color: var(--nh-text-muted);
     text-transform: uppercase;
+    font-weight: 600;
   }
 
   .msg-content ul, .msg-content ol {
@@ -946,15 +1286,15 @@
   }
 
   .msg-content blockquote {
-    border-left: 3px solid var(--border-light);
+    border-left: 3px solid var(--nh-border);
     padding: 2px 12px;
     margin: 4px 0;
-    color: var(--text-dim);
+    color: var(--nh-text-secondary);
   }
 
   .msg-content hr {
     border: none;
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--nh-border);
     margin: 8px 0;
   }
 
@@ -966,18 +1306,18 @@
   }
 
   .msg-content th, .msg-content td {
-    border: 1px solid var(--border);
+    border: 1px solid var(--nh-border);
     padding: 5px 10px;
     text-align: left;
   }
 
   .msg-content th {
-    background: var(--surface-2);
+    background: var(--nh-card-hover);
     font-weight: 600;
   }
 
   .msg-content a {
-    color: var(--accent);
+    color: var(--nh-accent);
     text-decoration: none;
   }
 
@@ -988,6 +1328,7 @@
     display: flex;
     gap: 2px;
     margin-top: 4px;
+    margin-bottom: 2px;
     align-items: center;
   }
   .read-receipt-dot {
@@ -1066,6 +1407,7 @@
     font-size: 12px;
     font-family: inherit;
     resize: none;
+    width: 100%;
     height: 34px;
     max-height: 80px;
     outline: none;
@@ -1125,46 +1467,33 @@
   [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
   [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
 
-  /* ===== SCROLL TO BOTTOM ===== */
+  /* ===== SCROLL TO BOTTOM PILL ===== */
   .scroll-bottom {
     position: absolute;
     bottom: 80px;
-    right: 24px;
-    background: var(--gradient-accent);
-    color: #fff;
-    border: none;
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--surface);
+    background-image: var(--gradient-surface);
+    color: var(--text);
+    border: 1px solid var(--border-light);
+    border-radius: 20px;
+    padding: 8px 16px;
     display: none;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    font-size: 16px;
-    box-shadow: 0 4px 16px var(--accent-glow);
+    font-size: 13px;
+    font-weight: 600;
+    box-shadow: var(--shadow-lg), 0 4px 16px rgba(0,0,0,0.1);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
     z-index: 10;
     transition: all 0.25s ease;
   }
 
-  .scroll-bottom.visible { display: flex; }
-  .scroll-bottom:hover { transform: translateY(-2px); box-shadow: 0 6px 24px var(--accent-glow); }
-
-  .scroll-bottom .new-count {
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    background: var(--red);
-    color: #fff;
-    font-size: 9px;
-    font-weight: 700;
-    min-width: 16px;
-    height: 16px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 4px;
-  }
+  .scroll-bottom.visible { display: flex; transform: translateX(-50%) translateY(0); }
+  .scroll-bottom:hover { transform: translateX(-50%) translateY(-2px); box-shadow: var(--shadow-lg), 0 6px 20px rgba(0,0,0,0.15); color: var(--accent); }
 
   /* ===== SEARCH BAR ===== */
   .search-bar {
@@ -1207,14 +1536,28 @@
   .compact-toggle.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
 
   /* Compact mode styles */
-  .messages-area.compact-mode { gap: 0; padding: 8px 12px; }
-  .messages-area.compact-mode .message { padding: 3px 8px; gap: 6px; }
+  .messages-area.compact-mode { padding: 8px 12px; }
+  .messages-area.compact-mode > * + * {
+    margin-top: 4px;
+    margin-top: var(--nh-space-1, 4px);
+  }
+  .messages-area.compact-mode .message.nh-msg-card { padding: var(--nh-space-2) var(--nh-space-3); }
   .messages-area.compact-mode .msg-avatar,
   .messages-area.compact-mode .msg-avatar-img { display: none; }
-  .messages-area.compact-mode .msg-header { margin-bottom: 0; display: inline; }
-  .messages-area.compact-mode .msg-body { display: inline; }
-  .messages-area.compact-mode .msg-from { font-size: 12px; }
+  .messages-area.compact-mode .msg-card-head {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 6px;
+    margin-bottom: 0;
+    width: auto;
+  }
+  .messages-area.compact-mode .msg-card-ident { display: inline; flex: none; }
+  .messages-area.compact-mode .msg-from { font-size: 12px; display: inline; }
+  .messages-area.compact-mode .msg-to-line { display: inline; margin-top: 0; margin-left: 4px; }
+  .messages-area.compact-mode .msg-card-head-right { flex-direction: row; align-items: baseline; }
   .messages-area.compact-mode .msg-time { font-size: 9px; }
+  .messages-area.compact-mode .msg-body { display: block; }
   .messages-area.compact-mode .msg-content { display: inline; font-size: 12px; }
   .messages-area.compact-mode .msg-content p { display: inline; margin: 0; }
 
@@ -1310,18 +1653,26 @@
   .app-footer a:hover { color: var(--accent); }
 
   /* ===== MESSAGE GROUPING ===== */
-  .message.grouped {
-    padding-top: 2px;
-    padding-bottom: 2px;
+  .message.grouped.nh-msg-card {
+    padding-top: var(--nh-space-2);
+    padding-bottom: var(--nh-space-2);
   }
 
-  .message.grouped .msg-avatar {
+  .message.grouped .msg-avatar,
+  .message.grouped .msg-avatar-img {
     visibility: hidden;
-    width: 32px;
+    width: 36px;
     height: 0;
+    min-height: 0;
+    border: none;
+    margin: 0;
   }
 
-  .message.grouped .msg-header {
+  .message.grouped .msg-card-head {
+    display: none;
+  }
+
+  .message.grouped .handoff-banner {
     display: none;
   }
 
@@ -1397,10 +1748,10 @@
 
   /* ===== UNIFIED NAV SIDEBAR ===== */
   .nav-sidebar {
-    width: 220px;
-    min-width: 220px;
+    width: var(--sidebar-w);
+    min-width: var(--sidebar-w);
     background: var(--surface);
-    border-right: 1px solid var(--border);
+    border-right: 1px solid var(--nh-border);
     display: flex;
     flex-direction: column;
     overflow-y: auto;
@@ -1416,13 +1767,30 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16px 16px 12px;
+    padding: var(--nh-space-4) var(--nh-space-4) var(--nh-space-3);
     flex-shrink: 0;
+    border-bottom: 1px solid var(--nh-border);
   }
-  .nav-sidebar-logo {
-    font-size: 13px;
+  .nh-brand-mark {
+    width: 24px;
+    height: 24px;
+    border-radius: 0;
+    background: none;
+    color: var(--nh-on-accent);
+    font-size: 12px;
     font-weight: 700;
-    color: var(--text-dim);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .nav-sidebar-logo {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nh-space-2);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text);
     white-space: nowrap;
     overflow: hidden;
     letter-spacing: 0.02em;
@@ -1447,11 +1815,11 @@
   .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-size: 12px;
     font-weight: 600;
-    color: var(--text-muted);
-    letter-spacing: 0.08em;
-    padding: 8px 14px 6px;
+    color: var(--text-dim);
+    letter-spacing: 0.05em;
+    padding: var(--nh-space-2) var(--nh-space-3) var(--nh-space-2);
     white-space: nowrap;
     overflow: hidden;
     text-transform: uppercase;
@@ -1467,23 +1835,28 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 8px 12px;
+    padding: var(--nh-space-2) var(--nh-space-3);
     cursor: pointer;
-    border-radius: 8px;
-    transition: all 0.15s;
+    border-radius: var(--nh-radius-sm);
+    border: 1px solid transparent;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
     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:hover { background: var(--nh-card); color: var(--text); }
+  .nav-item.active {
+    background: rgba(245, 158, 11, 0.1);
+    border-color: transparent;
+    box-shadow: inset 3px 0 0 var(--nh-accent);
+  }
   .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 .nav-text { font-size: 14px; font-weight: 500; color: var(--text-dim); }
+  .nav-item.active .nav-text { color: var(--accent); font-weight: 500; }
   .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; }
@@ -1492,123 +1865,450 @@
   .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 {
+    gap: 6px;
+    padding: 6px var(--nh-space-4);
+    background: var(--surface);
+    border-bottom: 1px solid var(--nh-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: var(--green); box-shadow: 0 0 6px var(--green); }
+  .agent-pill.listening .status-dot { background: var(--nh-blue); animation: pulse 2s infinite; box-shadow: 0 0 6px var(--nh-blue); }
+  .agent-pill.idle .status-dot { background: var(--accent); }
+  .agent-pill.offline .status-dot { background: var(--nh-text-muted); opacity: 0.65; }
+  .agent-pill.unknown .status-dot { background: var(--nh-text-muted); opacity: 0.4; }
+  .agent-pill.stale .status-dot { background: var(--accent); opacity: 0.8; }
+  .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; }
+  .agent-pill.unknown .agent-name { color: var(--text-muted); opacity: 0.4; }
+  .agent-pill.stale .agent-name { color: var(--text-muted); opacity: 0.7; }
+
+  /* ===== OVERVIEW PAGE ===== */
+  .overview-area {
+    display: none;
+    flex-direction: column;
+    gap: var(--nh-space-6);
+    padding: var(--nh-space-6) var(--nh-space-8);
+    overflow-y: auto;
+    background: var(--nh-bg);
+  }
+  .overview-area.visible { display: flex; }
+
+  .overview-welcome {
+    margin-bottom: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--nh-space-4);
+  }
+  .overview-welcome > div:first-child {
+    flex: 1;
+    min-width: min(100%, 220px);
+  }
+  .overview-welcome h2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: var(--nh-space-1);
+    letter-spacing: -0.02em;
+  }
+  .overview-welcome p {
+    font-size: 14px;
+    color: var(--text-dim);
+  }
+
+  .overview-coordinator {
+    display: flex;
+    align-items: center;
+    gap: var(--nh-space-2);
+    flex-shrink: 0;
+  }
+  .overview-coordinator-label {
+    font-size: 12px;
+    color: var(--text-dim);
+  }
+  .overview-coordinator-toggle {
+    display: flex;
+    border: 1px solid var(--nh-border);
+    border-radius: var(--nh-radius-sm);
+    overflow: hidden;
+    font-size: 12px;
+  }
+  .overview-coordinator-btn {
+    padding: 6px 14px;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: inherit;
+    font-weight: 400;
+    background: var(--nh-card);
+    color: var(--text-dim);
+    transition: background-color 0.15s ease, color 0.15s ease;
+  }
+  .overview-coordinator-btn + .overview-coordinator-btn {
+    border-left: 1px solid var(--nh-border);
+  }
+  .overview-coordinator-btn:hover {
+    color: var(--text);
+  }
+  /* Stitch: selected “Stay with me” = dark graphite; “Run autonomously” selected = solid amber */
+  .overview-coordinator-btn--mode-responsive {
+    font-weight: 600;
+    background: var(--nh-graphite);
+    color: var(--nh-text-primary);
+    border-color: var(--nh-border);
+  }
+  .overview-coordinator-btn--mode-autonomous {
+    font-weight: 600;
+    background: var(--nh-accent);
+    color: var(--nh-on-accent);
+    border-color: var(--nh-accent);
+  }
+
+  .overview-metrics {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--nh-space-4);
+  }
+  .metric-card {
+    background: var(--nh-card);
+    border: 1px solid var(--nh-border);
+    border-radius: var(--nh-radius-lg);
+    padding: var(--nh-space-5) var(--nh-space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--nh-space-2);
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+  .metric-card:hover {
+    border-color: rgba(156, 163, 175, 0.45);
+    box-shadow: var(--nh-shadow-card);
+  }
+  .metric-card .metric-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--nh-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 2px;
+    flex-shrink: 0;
+  }
+  .metric-card .metric-label {
+    font-size: 12px;
+    color: var(--text-dim);
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+  .metric-card .metric-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text);
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+  }
+  .metric-card .metric-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
+
+  .metric-card__progress {
+    height: 6px;
+    background: var(--nh-card-hover);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-top: var(--nh-space-2);
+  }
+  .metric-card__progress-fill {
+    height: 100%;
+    border-radius: 3px;
+    background: var(--nh-accent);
+    transition: width 0.35s ease;
+  }
+
+  .overview-stitch-rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nh-space-4);
+    width: 100%;
+  }
+  .overview-stitch-rows > .overview-panel {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .overview-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--nh-space-4);
+  }
+  .overview-grid--pair {
+    align-items: stretch;
+  }
+  @media (max-width: 900px) {
+    .overview-grid--pair {
+      grid-template-columns: 1fr;
+    }
+  }
+  .overview-panel {
+    background: var(--nh-sidebar);
+    border: 1px solid var(--nh-border);
+    border-radius: var(--nh-radius-xl);
+    padding: var(--nh-space-5);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
+  }
+  [data-theme="light"] .overview-panel {
+    box-shadow: none;
+  }
+  .overview-panel:hover {
+    border-color: rgba(156, 163, 175, 0.45);
+    box-shadow: var(--nh-shadow-card);
+  }
+  .overview-panel h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: var(--nh-space-3);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .overview-panel h3 a {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--nh-accent);
+    cursor: pointer;
+    text-decoration: none;
+    transition: opacity 0.15s;
+  }
+  .overview-panel h3 a:hover { opacity: 0.85; }
+  .overview-panel-empty {
+    font-size: 13px;
+    color: var(--text-dim);
+    margin: 0;
+  }
+  .overview-task-stitch {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nh-space-2);
+    font-size: 14px;
+  }
+  .overview-task-stitch-done { color: var(--text); font-weight: 600; }
+  .overview-task-stitch-rem { color: var(--text-dim); }
+  .overview-agent-row {
+    display: flex;
+    align-items: center;
+    gap: var(--nh-space-2);
+    flex-wrap: wrap;
+    padding: var(--nh-space-2) 0;
+    border-bottom: 1px solid var(--nh-border);
+  }
+  .overview-agent-row:last-child { border-bottom: none; }
+  .overview-agent-name { font-size: 13px; font-weight: 600; color: var(--text); }
+  .overview-agent-status { font-size: 12px; color: var(--text-muted); }
+  .overview-activity-row {
+    display: flex;
+    gap: var(--nh-space-3);
+    padding: var(--nh-space-2) 0;
+    border-bottom: 1px solid var(--nh-border);
+    font-size: 13px;
+    align-items: flex-start;
+  }
+  .overview-activity-row:last-child { border-bottom: none; }
+  .overview-activity-time {
+    color: var(--text-dim);
+    font-size: 12px;
+    flex-shrink: 0;
+    min-width: 100px;
+    font-variant-numeric: tabular-nums;
+  }
+  .overview-activity-body {
+    flex: 1;
+    min-width: 0;
+    color: var(--text-dim);
+    line-height: 1.45;
+  }
+  .overview-msg-from--agent { font-weight: 600; color: var(--nh-accent); }
+  .overview-msg-from--coord { font-weight: 600; color: var(--nh-yellow); }
+  .overview-msg-from--system { font-weight: 600; color: var(--nh-text-muted); }
+  .overview-activity-preview {
+    color: var(--text-dim);
+    word-break: break-word;
+  }
+  .overview-full-width { grid-column: 1 / -1; }
+  .overview-task-summary { display: flex; gap: 10px; flex-wrap: wrap; }
+  .overview-task-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    border-radius: 9999px;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.25;
+    border: 1px solid transparent;
+  }
+  .overview-task-badge.pending {
+    background: var(--nh-yellow-10);
+    color: var(--yellow);
+    border-color: var(--nh-yellow-20);
+  }
+  .overview-task-badge.active {
+    background: var(--nh-accent-10);
+    color: var(--accent);
+    border-color: var(--nh-accent-20);
+  }
+  .overview-task-badge.done {
+    background: var(--nh-green-10);
+    color: var(--green);
+    border-color: var(--nh-green-20);
+  }
+  .overview-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px var(--nh-space-5);
+    text-align: center;
+    background: var(--nh-sidebar);
+    border: 1px solid var(--nh-border);
+    border-radius: var(--nh-radius-xl);
+    box-shadow: var(--nh-shadow-card);
+  }
+  .overview-empty-state-icon {
+    width: 64px;
+    height: 64px;
+    border-radius: var(--nh-radius-xl);
+    background: var(--nh-accent-10);
+    border: 1px solid var(--nh-accent-20);
     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; }
-
-  /* ===== 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;
+    justify-content: center;
+    margin-bottom: var(--nh-space-5);
   }
-  .overview-welcome h2 {
-    font-size: 22px;
-    font-weight: 700;
+  .overview-empty-state-title {
+    font-size: 18px;
+    font-weight: 600;
     color: var(--text);
-    margin-bottom: 4px;
-    letter-spacing: -0.3px;
+    margin-bottom: var(--nh-space-2);
   }
-  .overview-welcome p {
-    font-size: 13px;
-    color: var(--text-muted);
+  .overview-empty-state-desc {
+    font-size: 14px;
+    color: var(--text-dim);
+    max-width: 360px;
+    line-height: 1.6;
+    margin-bottom: var(--nh-space-1);
   }
-
-  .overview-metrics {
-    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
+  .overview-launch-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nh-space-2);
+    padding: 10px var(--nh-space-5);
+    background: var(--nh-accent);
+    color: var(--nh-on-accent);
+    border: none;
+    border-radius: var(--nh-radius-sm);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: inherit;
+    margin-top: var(--nh-space-3);
+    transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
+    box-shadow: 0 2px 12px var(--nh-accent-20);
   }
-  .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;
+  .overview-launch-btn:hover {
+    background: var(--nh-accent-90);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 20px var(--nh-accent-20);
   }
-  .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;
+  .overview-notif-row-stitch {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nh-space-3);
+    padding: var(--nh-space-2) 0;
+    border-bottom: 1px solid var(--nh-border);
+    font-size: 13px;
   }
-  .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-notif-row-stitch:last-child { border-bottom: none; }
+  .overview-notif-icon-stitch {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--nh-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+    flex-shrink: 0;
   }
-  .overview-panel {
-    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px;
-    transition: border-color 0.2s;
+  .overview-notif--success .overview-notif-icon-stitch {
+    background: var(--nh-green-10);
+    color: var(--nh-green);
   }
-  .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-notif--info .overview-notif-icon-stitch {
+    background: rgba(59, 130, 246, 0.12);
+    color: var(--nh-blue);
   }
-  .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-notif--neutral .overview-notif-icon-stitch {
+    background: var(--nh-card-hover);
+    color: var(--text-dim);
   }
-  .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-notif--warn .overview-notif-icon-stitch {
+    background: var(--nh-orange-10);
+    color: var(--nh-orange);
   }
-  .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-notif-tag {
+    font-size: 11px;
+    font-weight: 700;
+    margin-right: 6px;
   }
-  .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-notif--success .overview-notif-tag { color: var(--nh-green); }
+  .overview-notif--info .overview-notif-tag { color: var(--nh-blue); }
+  .overview-notif--neutral .overview-notif-tag { color: var(--text-dim); }
+  .overview-notif--warn .overview-notif-tag { color: var(--nh-orange); }
+  .overview-notif-msg { color: var(--text-dim); line-height: 1.4; }
+  .overview-notif-time-stitch {
+    font-size: 11px;
+    color: var(--text-dim);
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-left: var(--nh-space-2);
+  }
+  .overview-role-pill {
+    display: inline-block;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: var(--nh-accent-10);
+    color: var(--nh-accent);
+    border: 1px solid var(--nh-accent-20);
+    margin-left: var(--nh-space-2);
+    vertical-align: middle;
   }
-  .overview-launch-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }
 
   /* ===== TOAST NOTIFICATIONS ===== */
   .toast-container {
@@ -1631,7 +2331,11 @@
   @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); }
+  .message.user-msg.nh-msg-card {
+    background: var(--nh-accent-5);
+    border-left: 3px solid var(--nh-accent);
+    padding-left: calc(var(--nh-space-5) - 2px);
+  }
 
   /* Hide old view-tabs (replaced by nav sidebar) */
   .view-tabs { display: none !important; }
@@ -1878,6 +2582,7 @@
   .kanban-title.in_review { background: rgba(168,85,247,0.15); color: var(--purple,#a855f7); }
   .kanban-title.done { background: var(--green-dim); color: var(--green); }
   .kanban-title.blocked { background: var(--red-dim); color: var(--red); }
+  .kanban-title.blocked_permanent { background: var(--red); color: #fff; }
 
   .kanban-count {
     font-size: 10px;
@@ -1911,8 +2616,10 @@
     color: var(--text-dim);
     margin-bottom: 6px;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
     -webkit-box-orient: vertical;
+    box-orient: vertical;
     overflow: hidden;
   }
 
@@ -2182,10 +2889,11 @@
   }
 
   /* ===== HANDOFF MESSAGE ===== */
-  .message.handoff-msg {
-    background: var(--purple-dim);
-    border: 1px solid rgba(188, 140, 255, 0.2);
-    border-left: 3px solid var(--purple);
+  .message.handoff-msg.nh-msg-card {
+    background: var(--nh-purple-10);
+    border-color: var(--nh-purple-20);
+    border-left: 3px solid var(--nh-purple);
+    padding-left: calc(var(--nh-space-5) - 2px);
   }
 
   .handoff-banner {
@@ -2194,10 +2902,10 @@
     gap: 6px;
     font-size: 11px;
     font-weight: 600;
-    color: var(--purple);
+    color: var(--nh-purple);
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    margin-bottom: 4px;
+    margin-bottom: var(--nh-space-2);
   }
 
   /* ===== FILE SHARE MESSAGE ===== */
@@ -2205,37 +2913,119 @@
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    background: var(--surface-2);
-    border: 1px solid var(--border);
-    border-radius: 6px;
+    background: var(--nh-card-hover);
+    border: 1px solid var(--nh-border);
+    border-radius: var(--nh-radius-sm);
     padding: 4px 10px;
     font-size: 11px;
-    color: var(--text-dim);
-    margin-bottom: 6px;
+    color: var(--nh-text-secondary);
+    margin-bottom: var(--nh-space-2);
   }
 
   .file-icon { font-size: 14px; }
 
   .file-size {
-    color: var(--text-muted);
+    color: var(--nh-text-muted);
     font-size: 10px;
   }
 
-  /* ===== SYSTEM MESSAGE ===== */
-  .message.system-msg {
-    justify-content: center;
-    padding: 6px 14px;
+  /* ===== SYSTEM EVENT BANNER (all system messages) ===== */
+  .message.system-event-banner {
+    background: none;
+    border: none;
+    border-radius: 6px;
+    box-shadow: none;
+    padding: 10px 16px;
+    margin: 0 0 6px 0;
+    min-height: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    border-left: 3px solid var(--nh-border, var(--border));
+  }
+  .system-event-banner .event-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 1px;
+    opacity: 0.8;
+  }
+  .system-event-banner .event-icon svg {
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+  .system-event-banner .event-body {
+    flex: 1;
+    min-width: 0;
+  }
+  .system-event-banner .event-text {
+    font-size: 12px;
+    color: var(--nh-text-secondary, var(--text-muted));
+    line-height: 1.4;
+    word-wrap: break-word;
+  }
+  .system-event-banner .event-text p { margin: 0; }
+  .system-event-banner .event-time {
+    font-size: 10px;
+    color: var(--nh-text-secondary, var(--text-muted));
+    opacity: 0.5;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+  /* Type colors — left border + icon color */
+  .system-event-banner.evt-critical { border-left-color: #ef4444; }
+  .system-event-banner.evt-critical .event-icon { color: #ef4444; }
+  .system-event-banner.evt-critical .event-text { color: #ef4444; font-weight: 500; }
+  .system-event-banner.evt-warning { border-left-color: #f59e0b; }
+  .system-event-banner.evt-warning .event-icon { color: #f59e0b; }
+  .system-event-banner.evt-warning .event-text { color: #f59e0b; }
+  .system-event-banner.evt-event { border-left-color: #22c55e; }
+  .system-event-banner.evt-event .event-icon { color: #22c55e; }
+  .system-event-banner.evt-review { border-left-color: #3b82f6; }
+  .system-event-banner.evt-review .event-icon { color: #3b82f6; }
+  .system-event-banner.evt-status { border-left-color: #6b7280; }
+  .system-event-banner.evt-status .event-icon { color: #6b7280; }
+  .system-event-banner.evt-role { border-left-color: #8b5cf6; }
+  .system-event-banner.evt-role .event-icon { color: #8b5cf6; }
+  .system-event-banner.evt-violation { border-left-color: #ef4444; background: rgba(239,68,68,0.05); }
+  .system-event-banner.evt-violation .event-icon { color: #ef4444; }
+  .system-event-banner.evt-violation .event-text { color: var(--text); font-weight: 500; }
+
+  /* ===== VIOLATION MESSAGES ===== */
+  .message.violation-msg.nh-msg-card {
+    border: 1px solid var(--nh-amber, #f59e0b);
+    background: rgba(245, 158, 11, 0.05);
+  }
+
+  .violation-content {
+    color: var(--text);
+    font-weight: 500;
+    font-style: normal;
   }
 
-  .message.system-msg .msg-body {
-    max-width: 600px;
-    text-align: center;
+  .violation-icon {
+    color: var(--nh-amber, #f59e0b);
+    margin-right: 6px;
+    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
   }
 
-  .message.system-msg .msg-content {
-    color: var(--text-dim);
-    font-style: italic;
-    font-size: 12px;
+  .violation-label {
+    color: var(--nh-amber, #f59e0b);
+    font-weight: 700;
+    margin-right: 4px;
+  }
+
+  /* ===== STEP SHIELD ICON ===== */
+  .step-shield {
+    display: inline-flex;
+    align-items: center;
+    color: var(--nh-amber, #f59e0b);
+    margin-right: 4px;
+    vertical-align: middle;
+    opacity: 0.85;
   }
 
   /* ===== RESPONSIVE ===== */
@@ -2261,6 +3051,24 @@
 
     .sidebar.open { transform: translateX(0); }
 
+    .nav-sidebar {
+      position: fixed;
+      top: var(--header-h);
+      left: 0;
+      bottom: 0;
+      z-index: 90;
+      transform: translateX(-100%);
+      box-shadow: 4px 0 20px rgba(0,0,0,0.3);
+      transition: transform 0.25s ease;
+    }
+
+    .nav-sidebar.open {
+      display: flex !important;
+      width: var(--sidebar-w) !important;
+      min-width: var(--sidebar-w) !important;
+      transform: translateX(0);
+    }
+
     .sidebar-overlay {
       display: none;
       position: fixed;
@@ -2305,9 +3113,14 @@
     .mobile-project-select:focus { border-color: var(--orange); }
 
     /* Messages: better mobile spacing */
-    .messages-area { padding: 8px; gap: 1px; }
-    .message { padding: 8px 10px; gap: 8px; }
+    .messages-area { padding: 8px; }
+    .messages-area > * + * {
+      margin-top: 8px;
+      margin-top: var(--nh-space-2, 8px);
+    }
+    .message.nh-msg-card { padding: var(--nh-space-3); }
     .msg-avatar { width: 28px; height: 28px; font-size: 11px; }
+    .msg-avatar-img { width: 28px; height: 28px; }
     .msg-from { font-size: 12px; }
     .msg-content { font-size: 13px; line-height: 1.5; }
     .msg-time { font-size: 9px; }
@@ -2319,6 +3132,7 @@
     /* Input bar: stack vertically */
     .msg-input-bar {
       flex-direction: column;
+      align-items: stretch;
       padding: 8px 10px;
       gap: 6px;
     }
@@ -2371,7 +3185,7 @@
     }
 
     .header { padding: 0 8px; }
-    .logo { font-size: 14px; }
+    .logo { font-size: 17px; }
     .header-left { gap: 6px; }
 
     /* Compact header buttons */
@@ -2384,8 +3198,12 @@
 
     /* Messages: tighter for small screens */
     .messages-area { padding: 6px; }
-    .message { padding: 6px 8px; gap: 6px; border-radius: 6px; }
-    .msg-avatar { width: 24px; height: 24px; font-size: 10px; }
+    .messages-area > * + * {
+      margin-top: 6px;
+      margin-top: var(--nh-space-2, 6px);
+    }
+    .message.nh-msg-card { padding: var(--nh-space-2) var(--nh-space-3); }
+    .msg-avatar { width: 28px; height: 28px; font-size: 10px; }
     .msg-header { gap: 4px; }
     .msg-from { font-size: 11px; }
     .msg-to { font-size: 11px; }
@@ -2418,7 +3236,7 @@
 
   /* ===== MOBILE: VERY SMALL PHONE (360px) ===== */
   @media (max-width: 360px) {
-    .logo { font-size: 13px; }
+    .logo { font-size: 15px; }
     .mobile-project-select { max-width: 80px; font-size: 9px; }
     .msg-avatar { display: none; }
     .message { gap: 0; }
@@ -2434,12 +3252,13 @@
   }
 
   .msg-avatar-img {
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
     margin-top: 2px;
+    border: 1px solid var(--nh-border);
   }
 
   .role-badge {
@@ -2452,7 +3271,7 @@
     margin-left: 4px;
   }
 
-  /* ===== v3.0: PROFILE POPUP ===== */
+  /* ===== v3.0: PROFILE POPUP (3-TAB) ===== */
   .profile-popup {
     display: none;
     position: fixed;
@@ -2461,11 +3280,16 @@
     background-image: var(--gradient-surface);
     border: 1px solid var(--border-light);
     border-radius: 14px;
-    padding: 18px;
-    width: 260px;
+    padding: 0;
+    width: 310px;
+    box-sizing: border-box;
+    max-height: 80vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    word-break: break-word;
     box-shadow: var(--shadow-lg), 0 0 40px rgba(0,0,0,0.2);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
   }
 
   .profile-popup.open { display: block; }
@@ -2474,19 +3298,21 @@
     display: flex;
     align-items: center;
     gap: 12px;
-    margin-bottom: 10px;
+    padding: 16px 18px 12px;
   }
 
   .profile-popup-avatar {
-    width: 48px;
-    height: 48px;
+    width: 44px;
+    height: 44px;
     border-radius: 50%;
     object-fit: cover;
+    flex-shrink: 0;
   }
 
   .profile-popup-name {
     font-weight: 700;
     font-size: 15px;
+    line-height: 1.2;
   }
 
   .profile-popup-id {
@@ -2494,6 +3320,73 @@
     color: var(--text-muted);
   }
 
+  .pp-status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    padding: 2px 8px;
+    border-radius: 10px;
+    margin-left: 6px;
+  }
+  .pp-status-badge.online { background: rgba(52,211,153,0.15); color: #34d399; }
+  .pp-status-badge.offline { background: rgba(156,163,175,0.15); color: #9ca3af; }
+  .pp-status-badge.listening { background: rgba(96,165,250,0.15); color: #60a5fa; }
+  .pp-status-badge.unresponsive { background: rgba(249,115,22,0.15); color: #f97316; }
+  .pp-status-badge.stuck { background: rgba(239,68,68,0.15); color: #ef4444; }
+
+  /* Tab bar */
+  .pp-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    padding: 0 18px;
+    gap: 0;
+  }
+  .pp-tab {
+    flex: 1;
+    padding: 8px 0;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: var(--text-muted);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    text-align: center;
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .pp-tab:hover { color: var(--text); }
+  .pp-tab.active { color: var(--nh-accent); border-bottom-color: var(--nh-accent); }
+
+  /* Tab content */
+  .pp-tab-content {
+    display: none;
+    padding: 14px 18px 16px;
+    max-height: calc(80vh - 140px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .pp-tab-content.active { display: block; }
+  .terminal-wrapper {
+    background: #000;
+    border-radius: var(--nh-radius-md);
+    padding: 10px;
+    margin-top: 8px;
+    height: 320px;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid var(--nh-border);
+  }
+  #pp-terminal-container {
+    width: 100%;
+    height: 100%;
+  }
+
   .profile-popup-bio {
     font-size: 12px;
     color: var(--text-dim);
@@ -2504,19 +3397,49 @@
   .profile-popup-stats {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 4px;
+    gap: 6px;
     margin-top: 8px;
   }
 
   .profile-popup-stat {
     font-size: 11px;
     color: var(--text-dim);
+    background: var(--surface-2);
+    border-radius: 8px;
+    padding: 8px 10px;
   }
 
   .profile-popup-stat span {
     font-weight: 600;
     color: var(--text);
+    display: block;
+    font-size: 16px;
+    margin-bottom: 2px;
+  }
+
+  /* Actions tab */
+  .pp-actions-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+  .pp-action-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 14px 8px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    cursor: pointer;
+    color: var(--text);
+    font-size: 11px;
+    font-weight: 500;
+    transition: background 0.15s, border-color 0.15s;
   }
+  .pp-action-btn:hover { background: var(--surface-3); border-color: var(--nh-accent-dim); }
+  .pp-action-btn svg { width: 20px; height: 20px; stroke: var(--nh-accent); fill: none; stroke-width: 1.5; }
 
   /* ===== v3.0: WORKSPACES TAB ===== */
   .workspaces-area {
@@ -2721,6 +3644,7 @@
     margin-top: 4px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
@@ -3242,7 +4166,7 @@
   }
   .launch-status-item .ls-dot.pending { background: var(--text-muted); }
   .launch-status-item .ls-dot.launching { background: var(--yellow); animation: pulse-dot 1s infinite; }
-  .launch-status-item .ls-dot.launched { background: var(--orange, #f59e0b); }
+  .launch-status-item .ls-dot.launched { background: var(--nh-accent); }
   .launch-status-item .ls-dot.registered { background: var(--green); }
   .launch-status-item .ls-dot.failed { background: var(--red); }
   @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -3523,8 +4447,8 @@
 <div class="header">
   <div class="header-left">
     <button class="mobile-toggle" onclick="toggleSidebar()" aria-label="Menu">&#9776;</button>
-    <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>
+    <img src="logo.svg" width="40" height="40" alt="" aria-hidden="true" style="flex-shrink:0">
+    <div class="logo">NeoHive</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>
@@ -3534,7 +4458,10 @@
     <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>
+    <div class="header-conn" title="Live updates connected">
+      <span class="conn-dot" aria-hidden="true"></span>
+      <span>Connected</span>
+    </div>
     <!-- Settings dropdown -->
     <div style="position:relative;display:inline-block">
       <button class="header-settings-btn" onclick="toggleSettingsMenu()" title="Settings">
@@ -3588,9 +4515,10 @@
 <!-- APP LAYOUT -->
 <div class="app">
   <!-- UNIFIED NAV SIDEBAR -->
+  <div class="sidebar-overlay" id="sidebar-overlay" onclick="closeSidebar()"></div>
   <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>
+      <span class="nav-sidebar-logo">Workspace</span>
       <button class="nav-sidebar-toggle" onclick="toggleNavSidebar()" title="Collapse sidebar">&#x25C0;</button>
     </div>
     <!-- Navigation -->
@@ -3646,8 +4574,16 @@
       <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>
+    <div class="nav-sidebar-divider"></div>
+    <!-- Governance -->
+    <div class="nav-sidebar-section nav-sidebar-governance">
+      <div class="nav-sidebar-label">GOVERNANCE</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>
+        <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">Policies</span>
+      </div>
+      <div class="nav-item" data-view="audit-log" onclick="switchView('audit-log')">
+        <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 4v8h10V4H3zm2 2h6v1H5V6zm0 2h6v1H5V8z"/></svg></span><span class="nav-text">Audit Log</span>
       </div>
     </div>
   </nav>
@@ -3676,7 +4612,8 @@
       <div class="view-tab" id="tab-workflows" onclick="switchView('workflows')">Workflows</div>
       <div class="view-tab" id="tab-plan" onclick="switchView('plan')">Plan</div>
       <div class="view-tab" id="tab-launch" onclick="switchView('launch')">Launch</div>
-      <div class="view-tab" id="tab-rules" onclick="switchView('rules')">Rules</div>
+      <div class="view-tab" id="tab-rules" onclick="switchView('rules')">Policies</div>
+      <div class="view-tab" id="tab-audit-log" onclick="switchView('audit-log')">Audit Log</div>
       <div class="view-tab" id="tab-stats" onclick="switchView('stats')">Stats</div>
       <div class="view-tab" id="tab-docs" onclick="switchView('docs')">Docs</div>
     </div>
@@ -3705,9 +4642,13 @@
     <div class="plan-area" id="monitor-panel" style="display:none"></div>
     <div class="launch-area" id="launch-area"></div>
     <div class="rules-area" id="rules-area"></div>
+    <div class="audit-log-area" id="audit-log-area" style="display:none; padding:16px 20px; overflow-y:auto; flex:1"></div>
     <div class="stats-area" id="stats-area"></div>
     <div class="docs-area" id="docs-area"><div id="docs-content"></div></div>
-    <button class="scroll-bottom" id="scroll-bottom" onclick="scrollToBottom()">&#x2193;<span class="new-count" id="new-msg-count" style="display:none">0</span></button>
+    <button class="scroll-bottom" id="scroll-bottom" type="button" onclick="scrollToBottom()" aria-label="Jump to latest messages.">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
+      <span id="new-msg-count" style="margin-right:4px">0</span> <span id="new-msg-label">new messages</span>
+    </button>
     <div class="typing-bar" id="typing-bar"></div>
 
     <!-- MESSAGE INPUT -->
@@ -3733,16 +4674,48 @@
 <div class="profile-popup" id="profile-popup" onclick="event.stopPropagation()">
   <div class="profile-popup-header">
     <img class="profile-popup-avatar" id="pp-avatar" src="data:," style="display:none">
-    <div>
-      <div class="profile-popup-name" id="pp-name"></div>
+    <div style="flex:1;min-width:0">
+      <div style="display:flex;align-items:center;gap:4px;flex-wrap:wrap">
+        <div class="profile-popup-name" id="pp-name"></div>
+        <span id="pp-status-badge" class="pp-status-badge"></span>
+      </div>
       <div class="profile-popup-id" id="pp-id"></div>
     </div>
   </div>
-  <div id="pp-role"></div>
-  <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 class="pp-tabs">
+    <button class="pp-tab active" data-tab="stats" onclick="switchPpTab('stats')">Stats</button>
+    <button class="pp-tab" data-tab="actions" onclick="switchPpTab('actions')">Actions</button>
+    <button class="pp-tab" data-tab="profile" onclick="switchPpTab('profile')">Profile</button>
+    <button class="pp-tab" data-tab="terminal" onclick="switchPpTab('terminal', true)" style="display:none">Terminal</button>
+  </div>
+  <!-- Stats Tab -->
+  <div class="pp-tab-content active" id="pp-tab-stats">
+    <div id="pp-badges" style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px"></div>
+    <div class="profile-popup-stats" id="pp-stats"></div>
+    <div id="pp-skills-readonly" style="margin-top:12px"></div>
+  </div>
+  <!-- Actions Tab -->
+  <div class="pp-tab-content" id="pp-tab-actions">
+    <div class="pp-actions-grid" id="pp-actions"></div>
+  </div>
+  <!-- Profile Tab -->
+  <div class="pp-tab-content" id="pp-tab-profile">
+    <div class="profile-popup-bio" id="pp-bio"></div>
+    <div id="pp-skills-container" style="margin-top:10px;padding-top:10px;border-top:1px solid var(--border)"></div>
+    <button class="btn btn-primary" style="width:100%;margin-top:12px" 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>
+  <!-- Terminal Tab -->
+  <div class="pp-tab-content" id="pp-tab-terminal" style="display:none">
+    <div style="font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);margin-bottom:6px">Live Terminal Bridge</div>
+    <div class="terminal-wrapper">
+      <div id="pp-terminal-container"></div>
+    </div>
+    <div style="font-size:10px;color:var(--text-muted);margin-top:8px;display:flex;justify-content:space-between">
+      <span>Real-time agent stream</span>
+      <span id="terminal-status">Ready</span>
+    </div>
+  </div>
 </div>
 
 <!-- Character Designer Panel -->
@@ -3790,6 +4763,12 @@
       <button class="cd-tab" onclick="cdSwitchTab('face', this)">Face</button>
       <button class="cd-tab" onclick="cdSwitchTab('outfit', this)">Outfit</button>
       <button class="cd-tab" onclick="cdSwitchTab('accessories', this)">Acc.</button>
+      <button class="cd-tab" onclick="cdSwitchTab('stats', this)">Stats</button>
+    </div>
+
+    <!-- Tab: Stats -->
+    <div class="cd-tab-content" id="cd-tab-stats">
+      <div id="pe-stats-container" style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;color:var(--text)"></div>
     </div>
 
     <!-- Tab: Body -->
@@ -4181,6 +5160,28 @@ function formatTime(ts) {
   return new Date(ts).toLocaleTimeString([], { hour:'2-digit', minute:'2-digit', second:'2-digit' });
 }
 
+function formatShortTime(ts) {
+  return new Date(ts).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
+
+/** Message card header: name, To line, clock time, badges (Stitch-style). */
+function buildMsgCardHead(fromDisplay, toDisplay, color, ts, badgesHtml, opt) {
+  opt = opt || {};
+  var showTo = opt.showTo !== false;
+  var timeStr = formatShortTime(ts);
+  var badges = badgesHtml || '';
+  return '<div class="msg-card-head">' +
+    '<div class="msg-card-ident">' +
+      '<span class="msg-from" style="color:' + color + '">' + escapeHtml(fromDisplay) + '</span>' +
+      (showTo ? '<div class="msg-to-line"><span class="msg-to-label">To</span> ' + escapeHtml(toDisplay) + '</div>' : '') +
+    '</div>' +
+    '<div class="msg-card-head-right">' +
+      '<span class="msg-time" title="' + formatTime(ts) + '">' + timeStr + '</span>' +
+      (badges ? '<div class="msg-badges">' + badges + '</div>' : '') +
+    '</div>' +
+  '</div>';
+}
+
 function timeAgo(ts) {
   var secs = Math.floor((Date.now() - new Date(ts).getTime()) / 1000);
   if (secs < 5) return 'just now';
@@ -4372,12 +5373,13 @@ function renderTable(rows) {
 
 // ==================== AGENT MONITORING ====================
 
-var PROVIDER_COLORS = { claude: '#d97706', anthropic: '#d97706', openai: '#10b981', gemini: '#3b82f6', google: '#3b82f6', cursor: '#6366f1' };
+/* Provider label colors: use design-system tokens (theme-aware). */
+var PROVIDER_COLOR_VARS = { claude: 'var(--nh-accent)', anthropic: 'var(--nh-accent)', openai: 'var(--nh-green)', gemini: 'var(--nh-blue)', google: 'var(--nh-blue)', cursor: 'var(--nh-purple)' };
 
 function getProviderBadge(provider) {
   if (!provider) return '';
   var key = provider.toLowerCase();
-  var c = PROVIDER_COLORS[key] || 'var(--text-muted)';
+  var c = PROVIDER_COLOR_VARS[key] || 'var(--text-muted)';
   return '<span style="color:' + c + ';font-size:9px;font-weight:600;margin-right:4px">' + escapeHtml(provider) + '</span>';
 }
 
@@ -4423,7 +5425,7 @@ function renderAgents(agents) {
   }
 
   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 structuralPart = keys.map(function(k) { var a = agents[k]; return k + ':' + (a.alive ? '1' : '0') + ':' + (a.is_listening ? 'L' : 'W') + ':' + (a.role || '') + ':' + (a.status || '') + ':' + (a.skills || []).join(','); }).join('|');
   var useGrouping = filtered.length > 6;
   var layoutHash = structuralPart + '|F:' + agentFilterSearch + ':' + agentFilterRole + ':' + agentFilterStatus + '|C:' + collapsedSig + '|G:' + (useGrouping ? '1' : '0');
 
@@ -4432,14 +5434,14 @@ function renderAgents(agents) {
     _lastAgentsHash = layoutHash;
     var alertEl0 = document.getElementById('alert-count');
     if (alertEl0) alertEl0.style.display = 'none';
-    updateInjectTargets(keys);
+    updateInjectTargets(agents);
     return;
   }
 
   // Group by role
   var ROLE_ORDER = ['lead', 'backend', 'frontend', 'quality', 'monitor', 'advisor', ''];
   var ROLE_LABELS = { lead: 'Lead', backend: 'Backend', frontend: 'Frontend', quality: 'Quality', monitor: 'Monitor', advisor: 'Advisor', '': 'Unassigned' };
-  var ROLE_COLORS = { lead: 'var(--accent)', backend: '#f59e0b', frontend: '#8b5cf6', quality: 'var(--green)', monitor: 'var(--red,#ef4444)', advisor: 'var(--purple,#a855f7)', '': 'var(--text-muted)' };
+  var ROLE_COLORS = { lead: 'var(--nh-accent)', backend: 'var(--nh-amber)', frontend: 'var(--nh-purple)', quality: 'var(--nh-green)', monitor: 'var(--nh-red)', advisor: 'var(--nh-purple)', '': 'var(--nh-text-muted)' };
   var roleGroups = {};
   for (var g = 0; g < filtered.length; g++) {
     var gname = filtered[g];
@@ -4457,13 +5459,24 @@ function renderAgents(agents) {
       var name = agentNames[i];
       var info = agents[name];
       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++;
+      var state = info.status || (!info.alive ? 'offline' : info.is_listening ? 'listening' : 'working');
+      if (state === 'idle' || state === 'stale') sleepCount++;
+      var currentToolHtml = (state === 'working' && info.current_tool)
+        ? '<div class="agent-current-tool">\u2699 ' + escapeHtml(info.current_tool) + '</div>'
+        : '';
 
       // Compact activity text
       var activityText = '';
-      if (state === 'offline' || state === 'dead') {
+      if (state === 'unknown') {
+        activityText = 'never started';
+      } else if (state === 'stale') {
+        activityText = 'stale';
+      } else if (state === 'offline' || state === 'dead') {
         activityText = 'offline';
+      } else if (state === 'stuck') {
+        activityText = '⚠ no listen()';
+      } else if (state === 'unresponsive') {
+        activityText = 'unresponsive';
       } 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';
@@ -4484,20 +5497,97 @@ function renderAgents(agents) {
       if (activityText) subtitleParts.push(activityText);
       var subtitleText = subtitleParts.join(' \u00B7 ');
 
+      // Skills: limited to 3 for sidebar cards
+      var skillsHtml = '';
+      if (info.skills && info.skills.length > 0) {
+        var platformClass = 'platform-' + (info.provider || 'unknown').toLowerCase();
+        var platformSkills = info.platform_skills || [];
+        skillsHtml = '<div class="agent-skills">';
+        for (var s = 0; s < Math.min(info.skills.length, 3); s++) {
+          var skill = info.skills[s];
+          var isPlatform = platformSkills.indexOf(skill) !== -1;
+          skillsHtml += '<span class="skill-tag' + (isPlatform ? ' ' + platformClass : '') + '">' + escapeHtml(skill) + '</span>';
+        }
+        if (info.skills.length > 3) {
+          skillsHtml += '<span class="skill-tag" style="opacity:0.5">+' + (info.skills.length - 3) + '</span>';
+        }
+        skillsHtml += '</div>';
+      }
+
+      // Nudge button (Bell icon)
+      var nudgeBtnHtml = '';
+      if (state !== 'offline' && state !== 'dead' && state !== 'unknown') {
+        nudgeBtnHtml = '<div class="agent-nudge-btn" title="Nudge agent to listen()" onclick="sendNudge(\'' + escapeHtml(name) + '\', event)">' +
+          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>' +
+        '</div>';
+      }
+
+      // Liveness Sparkline (Heartbeat dots)
+      var sparklineHtml = '';
+      if (state !== 'offline' && state !== 'dead' && state !== 'unknown') {
+        var dots = '';
+        var history = info.listen_history || [];
+        // Fallback: synthesize from last_listen_call if listen_history is missing
+        if (history.length === 0) {
+          var llc = info.last_listen_call || info.last_listened_at;
+          if (llc) {
+            var llcTs = typeof llc === 'string' ? new Date(llc).getTime() : llc;
+            if (llcTs > 0) history = [llcTs];
+          }
+        }
+        for (var d = 0; d < 10; d++) {
+          var dotClass = 'hb-dot';
+          if (d < history.length) {
+            var age = (Date.now() - history[d]) / 1000;
+            if (age < 30) dotClass += ' active';
+            else if (age < 120) dotClass += ' stale';
+          } else {
+            dotClass += ' empty';
+          }
+          dots += '<div class="' + dotClass + '"></div>';
+        }
+        sparklineHtml = '<div class="listen-sparkline"><span class="listen-sparkline-label">Liveness</span>' + dots + '</div>';
+      }
+
+      var indicatorHtml = (state === 'listening' || state === 'working')
+        ? '<span class="agent-state-pill ' + state + '">' + state + '</span>'
+        : '<span class="agent-status-dot ' + state + '" title="' + state + '"></span>';
       cardHtml += '<div class="' + cardClass + '" data-agent="' + escapeHtml(name) + '" onclick="showProfilePopup(\'' + escapeHtml(name) + '\', event)">' +
+        nudgeBtnHtml +
         '<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>' +
+            currentToolHtml +
+            skillsHtml +
+            sparklineHtml +
           '</div>' +
-          '<span class="agent-status-dot ' + state + '" title="' + state + '"></span>' +
+          indicatorHtml +
         '</div>' +
       '</div>';
     }
     return cardHtml;
   }
 
+  function sendNudge(name, event) {
+    if (event) event.stopPropagation();
+    fetch('/api/inject', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        to: name,
+        content: '[NUDGE] Your neohive session appears stuck. Please call listen() now to process messages.',
+        priority: 'critical'
+      })
+    })
+    .then(r => r.json())
+    .then(d => {
+      if (d.success) showToast('Nudge sent to ' + name, 'success');
+      else showToast('Failed to nudge: ' + (d.error || 'unknown error'), 'error');
+    });
+  }
+
   if (useGrouping) {
     for (var r = 0; r < ROLE_ORDER.length; r++) {
       var role = ROLE_ORDER[r];
@@ -4531,9 +5621,13 @@ function renderAgents(agents) {
       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 pState = pInfo.status || (!pInfo.alive ? 'offline' : pInfo.is_listening ? 'listening' : 'working');
       var dot = pCard.querySelector('.agent-status-dot');
       if (dot) { dot.className = 'agent-status-dot ' + pState; dot.title = pState; }
+      var pill = pCard.querySelector('.agent-state-pill');
+      if (pill) { pill.className = 'agent-state-pill ' + pState; pill.textContent = pState; }
+      var ctEl = pCard.querySelector('.agent-current-tool');
+      if (ctEl) { ctEl.textContent = (pState === 'working' && pInfo.current_tool) ? '\u2699 ' + pInfo.current_tool : ''; }
       var sub = pCard.querySelector('.agent-subtitle');
       if (sub) {
         var parts = [];
@@ -4558,6 +5652,9 @@ function renderAgents(agents) {
     _lastAgentsHash = layoutHash;
   }
 
+  // Update inject target dropdown — must run BEFORE the alertEl guard which may early-return
+  updateInjectTargets(agents);
+
   // Update alert badge
   var alertEl = document.getElementById('alert-count');
   if (!alertEl) return;
@@ -4567,9 +5664,6 @@ function renderAgents(agents) {
   } else {
     alertEl.style.display = 'none';
   }
-
-  // Update inject target dropdown
-  updateInjectTargets(keys);
 }
 
 function sendNudge(agentName) {
@@ -4679,18 +5773,23 @@ function copyRespawnPrompt() {
 
 var lastAgentKeys = '';
 
-function updateInjectTargets(keys) {
+function updateInjectTargets(agents) {
+  // Build sorted list of real agents (exclude system/internal names)
+  var keys = Object.keys(agents).filter(function(k) {
+    return k !== '__system__' && k !== '__user__' && k !== 'Dashboard';
+  }).sort();
   var joined = keys.join(',');
   if (joined === lastAgentKeys) return;
   lastAgentKeys = joined;
 
   var sel = document.getElementById('inject-target');
+  if (!sel) return;
   var current = sel.value;
   sel.innerHTML = '<option value="">Select agent...</option>';
   for (var i = 0; i < keys.length; i++) {
     var opt = document.createElement('option');
     opt.value = keys[i];
-    opt.textContent = keys[i];
+    opt.textContent = (agents[keys[i]] && agents[keys[i]].display_name) || keys[i];
     sel.appendChild(opt);
   }
   // Broadcast option
@@ -4782,6 +5881,33 @@ function renderThreads(messages) {
 
 // ==================== MESSAGES ====================
 
+/** Before replacing #messages innerHTML, remember which row was at the top of the viewport (stable vs raw scrollTop). */
+function captureMessageScrollAnchor(container) {
+  if (!container) return null;
+  var st = container.scrollTop;
+  var nodes = container.querySelectorAll('.nh-msg-card[data-msg-id]');
+  for (var i = 0; i < nodes.length; i++) {
+    var n = nodes[i];
+    var mid = n.getAttribute('data-msg-id');
+    if (!mid) continue;
+    if (n.offsetTop + n.offsetHeight > st + 0.5) {
+      return { id: mid, delta: n.offsetTop - st };
+    }
+  }
+  return null;
+}
+
+function restoreMessageScrollAnchor(container, anchor) {
+  if (!anchor || !container) return;
+  var nodes = container.querySelectorAll('.nh-msg-card[data-msg-id]');
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].getAttribute('data-msg-id') === anchor.id) {
+      container.scrollTop = Math.max(0, nodes[i].offsetTop - anchor.delta);
+      return;
+    }
+  }
+}
+
 function renderMessages(messages) {
   var el = document.getElementById('messages');
 
@@ -4854,9 +5980,7 @@ function renderMessages(messages) {
   // Track new messages while scrolled up
   if (isNew && !autoScroll) {
     newWhileScrolled += (filtered.length - lastMessageCount);
-    var countEl = document.getElementById('new-msg-count');
-    countEl.textContent = newWhileScrolled;
-    countEl.style.display = '';
+    updateNewMsgPill(newWhileScrolled);
     document.getElementById('scroll-bottom').classList.add('visible');
   }
   // Play sound if new messages arrived
@@ -4915,33 +6039,56 @@ function renderMessages(messages) {
     }
 
     var groupClass = isGrouped ? ' grouped' : '';
+    var msgIdAttr = m.id ? ' data-msg-id="' + escapeHtml(m.id) + '"' : '';
 
     var badges = '';
     if (m.channel && m.channel !== 'general') badges += '<span class="badge-channel" onclick="filterChannel(\'' + escapeHtml(m.channel) + '\')" title="Channel: #' + escapeHtml(m.channel) + '">#' + escapeHtml(m.channel) + '</span>';
     if (m.acked) badges += '<span class="badge badge-ack">ACK</span>';
     if (m.thread_id) badges += '<span class="badge badge-thread">Thread</span>';
-    if (m.edited) badges += '<span class="badge" style="background:var(--orange-dim);color:var(--orange)" title="Edited ' + (m.edited_at ? new Date(m.edited_at).toLocaleString() : '') + '">edited</span>';
+    if (m.edited) badges += '<span class="nh-pill nh-pill--review nh-pill--sm" title="Edited ' + (m.edited_at ? new Date(m.edited_at).toLocaleString() : '') + '">edited</span>';
 
     var msgAvatarHtml = getMsgAvatar(m.from, color);
 
     if (isSystem) {
-      html += '<div class="message system-msg' + newClass + '">' +
-        '<div class="msg-body">' +
-          '<div class="msg-content">' + renderMarkdown(m.content) + '</div>' +
-        '</div></div>';
+      var evtType = 'status';
+      var evtIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>';
+      if (/\[CRITICAL\]/.test(m.content)) {
+        evtType = 'critical';
+        evtIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
+      } else if (/\[WARNING\]/.test(m.content)) {
+        evtType = 'warning';
+        evtIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
+      } else if (/\[VIOLATION\]/i.test(m.content)) {
+        evtType = 'violation';
+        evtIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>';
+      } else if (/\[EVENT\]/.test(m.content)) {
+        evtType = 'event';
+        evtIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+      } else if (/\[REVIEW/.test(m.content)) {
+        evtType = 'review';
+        evtIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
+      } else if (/\[ROLE/.test(m.content)) {
+        evtType = 'role';
+        evtIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
+      } else if (/\[STATUS\]/.test(m.content) || /\[QUALITY/.test(m.content)) {
+        evtType = 'status';
+      }
+      var evtTime = new Date(m.timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+      var evtText = m.content.replace(/^\[[\w\s]+\]\s*/, '');
+      html += '<div class="message system-event-banner evt-' + evtType + newClass + '"' + msgIdAttr + '>' +
+        '<span class="event-icon">' + evtIcon + '</span>' +
+        '<div class="event-body"><span class="event-text">' + renderMarkdown(evtText) + '</span></div>' +
+        '<span class="event-time">' + evtTime + '</span>' +
+      '</div>';
       lastFrom = '';
       lastTo = '';
     } else if (m.type === 'handoff') {
-      html += '<div class="message handoff-msg' + newClass + '">' +
+      var handoffBadges = '<span class="nh-pill nh-pill--review nh-pill--sm">Handoff</span>' + badges;
+      html += '<div class="message nh-msg-card handoff-msg' + newClass + '"' + msgIdAttr + '>' +
         buildMsgActions(m.id) +
         msgAvatarHtml +
         '<div class="msg-body">' +
-          '<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>' +
-            '<div class="msg-badges">' + badges + '</div>' +
-          '</div>' +
+          buildMsgCardHead(fromDisplay, toDisplay, color, m.timestamp, handoffBadges) +
           '<div class="msg-content">' + renderMarkdown(m.content) + '</div>' +
           buildReactionsHtml(m.id) +
           buildReadReceipts(m.id) +
@@ -4952,17 +6099,11 @@ function renderMessages(messages) {
       var fileMeta = m.file || {};
       var fileName = fileMeta.name || 'file';
       var fileSize = fileMeta.size ? (fileMeta.size > 1024 ? Math.round(fileMeta.size / 1024) + ' KB' : fileMeta.size + ' B') : '';
-      html += '<div class="message' + newClass + '">' +
+      html += '<div class="message nh-msg-card' + newClass + '"' + msgIdAttr + '>' +
         buildMsgActions(m.id) +
         msgAvatarHtml +
         '<div class="msg-body">' +
-          '<div class="msg-header">' +
-            '<span class="msg-from" style="color:' + color + '" title="@' + escapeHtml(m.from) + '">' + escapeHtml(fromDisplay) + '</span>' +
-            '<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>' +
+          buildMsgCardHead(fromDisplay, toDisplay, color, m.timestamp, badges) +
           '<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) +
@@ -4972,18 +6113,12 @@ function renderMessages(messages) {
       lastTo = m.to;
     } else {
       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 + '">' +
+      var replyBadge = isReplyToUser ? '<span class="nh-pill nh-pill--review nh-pill--sm">Reply to you</span>' : '';
+      html += '<div class="message nh-msg-card' + newClass + groupClass + userMsgClass + '"' + msgIdAttr + '>' +
         buildMsgActions(m.id) +
         msgAvatarHtml +
         '<div class="msg-body">' +
-          '<div class="msg-header">' +
-            '<span class="msg-from" style="color:' + color + '" title="@' + escapeHtml(m.from) + '">' + escapeHtml(fromDisplay) + '</span>' +
-            '<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">' + replyBadge + badges + '</div>' +
-          '</div>' +
+          buildMsgCardHead(fromDisplay, toDisplay, color, m.timestamp, replyBadge + badges) +
           '<div class="msg-content">' + renderMarkdown(m.content) + '</div>' +
           buildReactionsHtml(m.id) +
           buildReadReceipts(m.id) +
@@ -5029,20 +6164,33 @@ function renderMessages(messages) {
     var prevTo = lastRenderedIds.length > 0 ? filtered[appendStart - 1].to : '';
     for (var ni = appendStart; ni < filtered.length; ni++) {
       var nm = filtered[ni];
-      var nColor = getColor(nm.from);
-      var nIsSystem = nm.system === true;
-      var nMsgDate = new Date(nm.timestamp).toLocaleDateString();
-      // Simplified: render each new message with full formatting
-      var nDisplayName = nm.from;
+      var nColor = nm.from === '__user__' ? 'var(--accent)' : getColor(nm.from);
+      var nFromDisp = nm.from === '__user__' ? 'You' : (cachedAgents[nm.from] && cachedAgents[nm.from].display_name) || nm.from;
+      var nToDisp = nm.to === '__user__' ? 'You' : (cachedAgents[nm.to] && cachedAgents[nm.to].display_name) || nm.to;
       var nContent = renderMarkdown(nm.content);
-      var nTime = formatTime(nm.timestamp);
-      var nToLabel = nm.to === '__group__' ? '' : ' &rarr; ' + escapeHtml(nm.to);
-      newMsgHtml += '<div class="message message-new" data-id="' + nm.id + '">' +
-        '<div class="msg-body"><div class="msg-header">' +
-          '<span class="msg-from" style="color:' + nColor + '">' + escapeHtml(nDisplayName) + '</span>' +
-          '<span class="msg-to">' + nToLabel + '</span>' +
-          '<span class="msg-time">' + nTime + '</span>' +
-        '</div>' +
+      if (nm.system === true) {
+        var neType = 'status';
+        var neIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>';
+        if (/\[CRITICAL\]/.test(nm.content)) { neType = 'critical'; neIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>'; }
+        else if (/\[WARNING\]/.test(nm.content)) { neType = 'warning'; neIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>'; }
+        else if (/\[VIOLATION\]/i.test(nm.content)) { neType = 'violation'; neIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>'; }
+        else if (/\[EVENT\]/.test(nm.content)) { neType = 'event'; neIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>'; }
+        else if (/\[REVIEW/.test(nm.content)) { neType = 'review'; neIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>'; }
+        else if (/\[ROLE/.test(nm.content)) { neType = 'role'; neIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>'; }
+        var neTime = new Date(nm.timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+        var neText = nm.content.replace(/^\[[\w\s]+\]\s*/, '');
+        newMsgHtml += '<div class="message system-event-banner evt-' + neType + ' message-new" data-msg-id="' + escapeHtml(nm.id) + '">' +
+          '<span class="event-icon">' + neIcon + '</span>' +
+          '<div class="event-body"><span class="event-text">' + renderMarkdown(neText) + '</span></div>' +
+          '<span class="event-time">' + neTime + '</span>' +
+        '</div>';
+        continue;
+      }
+      var nAvatar = getMsgAvatar(nm.from, nColor);
+      newMsgHtml += '<div class="message nh-msg-card message-new" data-msg-id="' + escapeHtml(nm.id) + '">' +
+        nAvatar +
+        '<div class="msg-body">' +
+        buildMsgCardHead(nFromDisp, nToDisp, nColor, nm.timestamp, '') +
         '<div class="msg-content">' + nContent + '</div>' +
         '</div></div>';
     }
@@ -5052,8 +6200,10 @@ function renderMessages(messages) {
       while (tempDiv.firstChild) el.appendChild(tempDiv.firstChild);
     }
   } else {
-    // Full re-render (filters active, messages changed, or first render)
+    // Full re-render — innerHTML clears the DOM; restore view via message anchor, not raw scrollTop
+    var scrollAnchor = !autoScroll ? captureMessageScrollAnchor(el) : null;
     el.innerHTML = loadMoreHtml + html;
+    if (scrollAnchor) restoreMessageScrollAnchor(el, scrollAnchor);
   }
 
   lastRenderedIds = currentIds;
@@ -5153,18 +6303,55 @@ function renderChannelBar(messages) {
 
 function toggleSidebar() {
   var sb = document.getElementById('sidebar') || document.getElementById('nav-sidebar');
-  if (sb) sb.classList.toggle('open');
+  if (!sb) return;
+  var isOpen = sb.classList.toggle('open');
+  if (isOpen) {
+    sb.style.display = 'flex';
+    sb.style.width = 'var(--sidebar-w)';
+    sb.style.minWidth = 'var(--sidebar-w)';
+    sb.style.transform = 'translateX(0)';
+  } else {
+    sb.style.display = '';
+    sb.style.width = '';
+    sb.style.minWidth = '';
+    sb.style.transform = '';
+  }
   var ov = document.getElementById('sidebar-overlay');
   if (ov) ov.classList.toggle('open');
 }
 
 function closeSidebar() {
   var sb = document.getElementById('sidebar') || document.getElementById('nav-sidebar');
-  if (sb) sb.classList.remove('open');
+  if (sb) {
+    sb.classList.remove('open');
+    sb.style.display = '';
+    sb.style.width = '';
+    sb.style.minWidth = '';
+    sb.style.transform = '';
+  }
   var ov = document.getElementById('sidebar-overlay');
   if (ov) ov.classList.remove('open');
 }
 
+function updateNewMsgPill(count) {
+  count = Math.max(0, Number(count) || 0);
+
+  var scrollBtn = document.getElementById('scroll-bottom');
+  var countEl = document.getElementById('new-msg-count');
+  var labelEl = document.getElementById('new-msg-label');
+  if (!scrollBtn || !countEl) return;
+
+  countEl.textContent = count;
+  if (labelEl) labelEl.textContent = count === 1 ? 'new message' : 'new messages';
+
+  if (count > 0) {
+    var label = count === 1 ? 'new message' : 'new messages';
+    scrollBtn.setAttribute('aria-label', 'Jump to latest messages. ' + count + ' ' + label + '.');
+  } else {
+    scrollBtn.setAttribute('aria-label', 'Jump to latest messages.');
+  }
+}
+
 var newWhileScrolled = 0;
 
 document.getElementById('messages').addEventListener('scroll', function() {
@@ -5174,9 +6361,9 @@ document.getElementById('messages').addEventListener('scroll', function() {
   if (atBottom) {
     scrollBtn.classList.remove('visible');
     newWhileScrolled = 0;
-    document.getElementById('new-msg-count').style.display = 'none';
+    updateNewMsgPill(0);
   } else {
-    scrollBtn.classList.add('visible');
+    if (newWhileScrolled > 0) scrollBtn.classList.add('visible');
   }
 });
 
@@ -5185,8 +6372,8 @@ function scrollToBottom() {
   el.scrollTop = el.scrollHeight;
   autoScroll = true;
   newWhileScrolled = 0;
+  updateNewMsgPill(0);
   document.getElementById('scroll-bottom').classList.remove('visible');
-  document.getElementById('new-msg-count').style.display = 'none';
 }
 
 // ==================== COMPACT MODE ====================
@@ -5418,10 +6605,12 @@ function renderPinnedMessages() {
     var m = cachedHistory[i];
     if (!pins[m.id]) continue;
     var color = getColor(m.from);
-    html += '<div class="message">' +
-      '<div class="msg-avatar" style="background:' + color + ';width:20px;height:20px;font-size:9px">' + initial(m.from) + '</div>' +
+    var pFrom = (cachedAgents[m.from] && cachedAgents[m.from].display_name) || m.from;
+    var pTo = (cachedAgents[m.to] && cachedAgents[m.to].display_name) || m.to;
+    html += '<div class="message nh-msg-card">' +
+      '<div class="msg-avatar" style="background:' + color + ';width:24px;height:24px;font-size:9px">' + initial(m.from) + '</div>' +
       '<div class="msg-body">' +
-        '<div class="msg-header"><span class="msg-from" style="color:' + color + ';font-size:11px">' + escapeHtml(m.from) + '</span></div>' +
+        buildMsgCardHead(pFrom, pTo, color, m.timestamp, '') +
         '<div class="msg-content">' + escapeHtml(m.content.substring(0, 120)) + (m.content.length > 120 ? '...' : '') + '</div>' +
       '</div></div>';
   }
@@ -5897,7 +7086,11 @@ function exportJSON() {
 
 // ==================== VIEW SWITCHING ====================
 
-var activeView = localStorage.getItem('neohive_activeView') || 'overview';
+var activeView = 'overview';
+try {
+  var _savedView = localStorage.getItem('neohive_activeView');
+  if (_savedView) activeView = _savedView;
+} catch (e) { /* Safari / private mode: storage can throw; keep default */ }
 
 function switchView(view) {
   activeView = view;
@@ -5905,6 +7098,7 @@ function switchView(view) {
   // Reset render hashes so switching tabs forces a fresh render
   _lastTasksHash = '';
   _lastAgentsHash = '';
+  if (view === 'messages') lastAgentKeys = '';
   if (renderOverview._lastHash) renderOverview._lastHash = '';
   // Update nav sidebar active state
   var navItems = document.querySelectorAll('.nav-item');
@@ -5912,7 +7106,7 @@ function switchView(view) {
     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'];
+  var tabIds = ['messages','tasks','workspaces','workflows','plan','launch','rules','audit-log','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]);
@@ -5927,6 +7121,10 @@ function switchView(view) {
   document.getElementById('monitor-panel').style.display = view === 'plan' ? 'block' : 'none';
   document.getElementById('launch-area').classList.toggle('visible', view === 'launch');
   document.getElementById('rules-area').classList.toggle('visible', view === 'rules');
+  if (document.getElementById('audit-log-area')) {
+    document.getElementById('audit-log-area').classList.toggle('visible', view === 'audit-log');
+    document.getElementById('audit-log-area').style.display = view === 'audit-log' ? 'block' : 'none';
+  }
   document.getElementById('stats-area').classList.toggle('visible', view === 'stats');
   document.getElementById('docs-area').classList.toggle('visible', view === 'docs');
   document.getElementById('search-bar').style.display = view === 'messages' ? 'flex' : 'none';
@@ -5942,6 +7140,7 @@ function switchView(view) {
   if (view === 'docs') renderDocs();
   if (view === 'launch') renderLaunchPanel();
   if (view === 'rules') fetchRules();
+  if (view === 'audit-log') fetchAuditLog();
   if (view === 'stats') fetchStats();
   if (isMobile) closeSidebar();
 }
@@ -5999,7 +7198,7 @@ function renderTasks() {
   if (tasksHash === _lastTasksHash) return;
   _lastTasksHash = tasksHash;
 
-  var groups = { pending: [], in_progress: [], in_review: [], done: [], blocked: [] };
+  var groups = { pending: [], in_progress: [], in_review: [], done: [], blocked: [], blocked_permanent: [] };
   for (var i = 0; i < cachedTasks.length; i++) {
     var t = cachedTasks[i];
     var status = t.status || 'pending';
@@ -6012,7 +7211,8 @@ function renderTasks() {
     { key: 'in_progress', label: 'In Progress' },
     { key: 'in_review', label: 'In Review' },
     { key: 'done', label: 'Done' },
-    { key: 'blocked', label: 'Blocked' }
+    { key: 'blocked', label: 'Blocked' },
+    { key: 'blocked_permanent', label: '⛔ Needs Intervention' }
   ];
 
   var html = '<div class="kanban">';
@@ -6051,6 +7251,7 @@ function buildTaskCard(t) {
 
   var badgesHtml = '';
   if (t.escalated_at) badgesHtml += '<span style="font-size:9px;padding:1px 5px;border-radius:6px;font-weight:600;background:var(--red-dim);color:var(--red)">ESCALATED</span>';
+  if (t.retry_count > 0) badgesHtml += '<span style="font-size:9px;padding:1px 5px;border-radius:6px;font-weight:600;background:var(--yellow)20;color:var(--yellow)" title="Reclaimed ' + t.retry_count + ' time(s) by watchdog">↺' + t.retry_count + '</span>';
   if (t.channel) badgesHtml += '<span class="badge-channel" onclick="filterChannel(\'' + escapeHtml(t.channel) + '\')">#' + escapeHtml(t.channel) + '</span>';
 
   var notesHtml = '';
@@ -6059,9 +7260,14 @@ 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>';
   }
 
+  var blockedReasonHtml = (t.status === 'blocked_permanent' && t.blocked_reason)
+    ? '<div style="font-size:10px;color:var(--red);margin-top:4px;font-style:italic">' + escapeHtml(t.blocked_reason) + '</div>'
+    : '';
+
   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>' : '') +
+    blockedReasonHtml +
     notesHtml +
     '<div class="task-footer">' +
       assigneeHtml +
@@ -6088,7 +7294,7 @@ function showTaskDetail(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 statusColors = { pending: 'var(--yellow)', in_progress: 'var(--accent)', in_review: 'var(--purple)', done: 'var(--green)', blocked: 'var(--red)', blocked_permanent: 'var(--red)' };
   var statusColor = statusColors[task.status] || 'var(--text-muted)';
 
   var html = '';
@@ -6271,7 +7477,7 @@ function onKanbanDrop(e) {
 
 // ==================== STATS VIEW ====================
 
-var AGENT_COLORS = ['#f59e0b', '#f97316', '#7ee787', '#d29922', '#ffa657', '#14b8a6', '#f778ba', '#56d364'];
+var AGENT_COLORS = ['var(--nh-accent)', 'var(--nh-orange)', 'var(--nh-green)', 'var(--nh-blue)', 'var(--nh-purple)', 'var(--nh-red)', 'var(--nh-amber)', 'var(--nh-yellow)'];
 
 function fetchStats() {
   var pq = activeProject ? '?project=' + encodeURIComponent(activeProject) : '';
@@ -6313,7 +7519,7 @@ function renderStats(data, tasks, workflows) {
     var ts = tasks[ti].status;
     if (ts === 'done') tasksDone++;
     else if (ts === 'in_progress' || ts === 'in_review') tasksActive++;
-    else if (ts === 'blocked') tasksBlocked++;
+    else if (ts === 'blocked' || ts === 'blocked_permanent') tasksBlocked++;
     else tasksPending++;
   }
 
@@ -6464,6 +7670,7 @@ function renderInsights(decisions, history) {
 // ==================== RULES TAB ====================
 
 var cachedRules = [];
+var cachedAuditLog = [];
 
 function fetchRules() {
   var pq = projectParam();
@@ -6473,47 +7680,101 @@ function fetchRules() {
   }).catch(function() { cachedRules = []; renderRules(); });
 }
 
+function fetchAuditLog() {
+  var pq = projectParam();
+  lttFetch('/api/audit-log' + pq).then(function(r) { return r.json(); }).then(function(log) {
+    cachedAuditLog = Array.isArray(log) ? log : [];
+    renderAuditLog();
+  }).catch(function() { cachedAuditLog = []; renderAuditLog(); });
+}
+
 function renderRules() {
   var el = document.getElementById('rules-area');
-  var html = '<h3 style="font-size:16px;font-weight:700;margin-bottom:16px">Project Rules</h3>';
-
-  // Add form
-  html += '<div class="rule-add-form">' +
-    '<textarea id="new-rule-text" placeholder="Enter a new rule for all agents to follow..."></textarea>' +
-    '<div class="rule-form-row">' +
-      '<select id="new-rule-category">' +
+  var html = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><h3 style="font-size:16px;font-weight:700">Governance Policies</h3></div>';
+
+  // No-code Rule Builder Form
+  html += '<div class="rule-add-form" style="background:var(--nh-glass-bg);backdrop-filter:blur(var(--nh-blur));border:1px solid var(--nh-glass-border);padding:16px;border-radius:12px;margin-bottom:20px">' +
+    '<h4 style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px">CREATE NEW POLICY</h4>' +
+    '<div style="display:flex;gap:12px;margin-bottom:12px">' +
+      '<div style="flex:1">' +
+        '<label style="font-size:10px;color:var(--text-muted);display:block;margin-bottom:4px;font-weight:600;letter-spacing:0.5px">WHEN (TRIGGER)</label>' +
+        '<select id="builder-trigger" style="width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:8px;border-radius:6px">' +
+          '<option value="Anytime">Anytime</option>' +
+          '<option value="Before executing a workflow step">Before workflow step</option>' +
+          '<option value="After executing a workflow step">After workflow step</option>' +
+          '<option value="When writing a file">When writing a file</option>' +
+          '<option value="When sending a message">When sending a message</option>' +
+        '</select>' +
+      '</div>' +
+      '<div style="flex:2">' +
+        '<label style="font-size:10px;color:var(--text-muted);display:block;margin-bottom:4px;font-weight:600;letter-spacing:0.5px">IF (CONDITION)</label>' +
+        '<input id="builder-condition" type="text" placeholder="e.g. the file ends with .js (optional)" style="width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:8px;border-radius:6px">' +
+      '</div>' +
+    '</div>' +
+    '<div style="margin-bottom:16px">' +
+      '<label style="font-size:10px;color:var(--text-muted);display:block;margin-bottom:4px;font-weight:600;letter-spacing:0.5px">THEN (ACTION)</label>' +
+      '<textarea id="builder-action" placeholder="What must the agent do? e.g. Ensure strict type checking is added." style="width:100%;min-height:50px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:8px;border-radius:6px"></textarea>' +
+    '</div>' +
+    '<div style="display:flex;gap:12px;margin-bottom:16px;background:var(--surface-3);padding:10px;border-radius:8px;border:1px dashed var(--border)">' +
+      '<div style="flex:1">' +
+        '<label style="font-size:10px;color:var(--text-muted);display:block;margin-bottom:4px;font-weight:600;letter-spacing:0.5px">SCOPE: ROLE</label>' +
+        '<input id="builder-scope-role" type="text" placeholder="e.g. quality" style="width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:6px;border-radius:6px;font-size:12px">' +
+      '</div>' +
+      '<div style="flex:1">' +
+        '<label style="font-size:10px;color:var(--text-muted);display:block;margin-bottom:4px;font-weight:600;letter-spacing:0.5px">SCOPE: PROVIDER</label>' +
+        '<input id="builder-scope-provider" type="text" placeholder="e.g. claude" style="width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:6px;border-radius:6px;font-size:12px">' +
+      '</div>' +
+      '<div style="flex:1">' +
+        '<label style="font-size:10px;color:var(--text-muted);display:block;margin-bottom:4px;font-weight:600;letter-spacing:0.5px">SCOPE: AGENT</label>' +
+        '<input id="builder-scope-agent" type="text" placeholder="e.g. Victor" style="width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:6px;border-radius:6px;font-size:12px">' +
+      '</div>' +
+    '</div>' +
+    '<div class="rule-form-row" style="display:flex;gap:10px;align-items:center">' +
+      '<select id="new-rule-category" style="background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:6px;border-radius:6px">' +
         '<option value="general">General</option>' +
         '<option value="safety">Safety</option>' +
         '<option value="workflow">Workflow</option>' +
         '<option value="coding">Coding Standards</option>' +
         '<option value="forbidden">Forbidden Actions</option>' +
       '</select>' +
-      '<select id="new-rule-priority">' +
+      '<select id="new-rule-priority" style="background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:6px;border-radius:6px">' +
         '<option value="normal">Normal</option>' +
         '<option value="important">Important</option>' +
         '<option value="critical">Critical</option>' +
       '</select>' +
-      '<button class="btn btn-primary" onclick="addRule()" style="margin-left:auto">Add Rule</button>' +
+      '<button class="btn btn-primary" onclick="addRule()" style="margin-left:auto;background:var(--gradient-accent);color:#fff;border:none;padding:6px 16px;border-radius:6px;cursor:pointer;font-weight:600">Save Policy</button>' +
     '</div>' +
   '</div>';
 
   if (!cachedRules.length) {
-    html += '<div style="color:var(--text-muted);font-size:13px;text-align:center;padding:40px 0">No rules defined yet. Add rules above — agents will see them in their guide text automatically.</div>';
+    html += '<div style="color:var(--text-muted);font-size:13px;text-align:center;padding:40px 0;background:var(--nh-glass-bg);backdrop-filter:blur(var(--nh-blur));border:1px solid var(--nh-glass-border);border-radius:12px">No policies defined yet.</div>';
   } else {
     for (var i = 0; i < cachedRules.length; i++) {
       var r = cachedRules[i];
       var cardClass = 'rule-card' + (r.active === false ? ' inactive' : '') + (r.priority === 'critical' ? ' critical' : r.priority === 'important' ? ' important' : '');
-      html += '<div class="' + cardClass + '">' +
+      var scopeObj = {};
+      if (r.scope_role) scopeObj.Role = r.scope_role;
+      if (r.scope_provider) scopeObj.Provider = r.scope_provider;
+      if (r.scope_agent) scopeObj.Agent = r.scope_agent;
+      var scopeKeys = Object.keys(scopeObj);
+      var scopeStr = scopeKeys.length > 0 
+                     ? scopeKeys.map(function(k) { return k + ':' + scopeObj[k]; }).join(', ')
+                     : escapeHtml(r.scope || 'global');
+      var hasScope = scopeKeys.length > 0 || (r.scope && r.scope !== 'global');
+      var scopeBadge = hasScope ? '<span style="font-size:9px;padding:2px 6px;border-radius:4px;background:var(--surface-3);color:var(--text-dim);border:1px solid var(--border);margin-right:6px;text-transform:uppercase" title="Scope">' + escapeHtml(scopeStr) + '</span>' : '';
+      
+      html += '<div class="' + cardClass + '" style="background:var(--nh-glass-bg);backdrop-filter:blur(var(--nh-blur));border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px;display:flex;align-items:center">' +
         '<div style="flex:1">' +
-          '<div class="rule-text">' + escapeHtml(r.text) + '</div>' +
+          '<div class="rule-text" style="font-size:14px;color:var(--text);margin-bottom:6px">' + escapeHtml(r.text) + '</div>' +
           '<div style="display:flex;gap:6px;align-items:center;margin-top:4px">' +
-            '<span class="rule-category">' + escapeHtml(r.category || 'general') + '</span>' +
+            scopeBadge +
+            '<span class="rule-category" style="font-size:10px;padding:2px 6px;border-radius:4px;background:var(--purple-dim);color:var(--purple)">' + escapeHtml(r.category || 'general') + '</span>' +
             '<span style="font-size:9px;color:var(--text-muted)">by ' + escapeHtml(r.created_by || '?') + ' &middot; ' + timeAgo(r.created_at) + '</span>' +
           '</div>' +
         '</div>' +
-        '<div class="rule-actions">' +
-          '<button onclick="toggleRule(\'' + r.id + '\',' + (r.active === false ? 'true' : 'false') + ')">' + (r.active === false ? 'Enable' : 'Disable') + '</button>' +
-          '<button onclick="deleteRule(\'' + r.id + '\')" style="color:var(--red,#ef4444)">Delete</button>' +
+        '<div class="rule-actions" style="display:flex;gap:8px;align-items:center">' +
+          '<button class="btn" style="padding:4px 8px;font-size:11px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:4px;cursor:pointer" onclick="toggleRule(\'' + r.id + '\',' + (r.active === false ? 'true' : 'false') + ')">' + (r.active === false ? 'Enable' : 'Disable') + '</button>' +
+          '<button class="btn" style="padding:4px 8px;font-size:11px;color:var(--red,#ef4444);background:transparent;border:none;cursor:pointer" onclick="deleteRule(\'' + r.id + '\')">Delete</button>' +
         '</div>' +
       '</div>';
     }
@@ -6522,19 +7783,74 @@ function renderRules() {
   el.innerHTML = html;
 }
 
+function renderAuditLog() {
+  var el = document.getElementById('audit-log-area');
+  if (!el) return;
+  var html = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><h3 style="font-size:16px;font-weight:700">Governance Audit Log</h3></div>';
+
+  if (!cachedAuditLog.length) {
+    html += '<div style="color:var(--text-muted);font-size:13px;text-align:center;padding:40px 0;background:var(--nh-glass-bg);backdrop-filter:blur(var(--nh-blur));border:1px solid var(--nh-glass-border);border-radius:12px">No enforcement events recorded yet.</div>';
+  } else {
+    html += '<div style="background:var(--nh-glass-bg);backdrop-filter:blur(var(--nh-blur));border:1px solid var(--border);border-radius:12px;overflow:hidden">';
+    for (var i = 0; i < cachedAuditLog.length; i++) {
+        var log = cachedAuditLog[i];
+        var isViolation = log.type === 'violation' || log.event === 'violation' || log.status === 'violation';
+        var icon = isViolation ? '<span style="color:var(--red)">&#x26A0;</span>' : '<span style="color:var(--green)">&#x2713;</span>';
+        var borderLeft = isViolation ? 'border-left:3px solid var(--red)' : 'border-left:3px solid transparent';
+        
+        html += '<div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start;' + borderLeft + '">' +
+            '<div style="font-size:16px;margin-top:2px">' + icon + '</div>' +
+            '<div style="flex:1">' + 
+              '<div style="font-size:13px;color:var(--text);margin-bottom:4px"><strong>' + escapeHtml(log.agent || 'System') + '</strong>: ' + escapeHtml(log.description || log.message || '') + '</div>' +
+              '<div style="font-size:11px;color:var(--text-muted)">' + timeAgo(log.timestamp) + (log.rule_id ? ' &middot; Rule ' + escapeHtml(log.rule_id) : '') + '</div>' +
+            '</div>' +
+        '</div>';
+    }
+    html += '</div>';
+  }
+  el.innerHTML = html;
+}
+
 function addRule() {
-  var text = document.getElementById('new-rule-text').value.trim();
-  if (!text) return;
+  var trigger = document.getElementById('builder-trigger').value;
+  var condition = document.getElementById('builder-condition').value.trim();
+  var action = document.getElementById('builder-action').value.trim();
+  
+  if (!action) {
+    alert("Action field is required to create a rule.");
+    return;
+  }
+  
+  var text = "";
+  if (trigger === "Anytime") {
+    text = condition ? "If " + condition + ", then " + action : action;
+  } else {
+    text = trigger + (condition ? " and " + condition : "") + ", then " + action;
+  }
+  
+  var sRole = document.getElementById('builder-scope-role').value.trim();
+  var sProv = document.getElementById('builder-scope-provider').value.trim();
+  var sAgent = document.getElementById('builder-scope-agent').value.trim();
+  var scopeObj = {};
+  if (sRole) scopeObj.role = sRole;
+  if (sProv) scopeObj.provider = sProv;
+  if (sAgent) scopeObj.agent = sAgent;
+  var scope = Object.keys(scopeObj).length > 0 ? scopeObj : 'global';
+
   var category = document.getElementById('new-rule-category').value;
   var priority = document.getElementById('new-rule-priority').value;
   var pq = projectParam();
   lttFetch('/api/rules' + pq, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ action: 'add', text: text, category: category, priority: priority, created_by: 'Dashboard' })
+    body: JSON.stringify({ action: 'add', text: text, category: category, priority: priority, scope: scope, created_by: 'Dashboard' })
   }).then(function(r) { return r.json(); }).then(function(res) {
     if (res.success) {
-      document.getElementById('new-rule-text').value = '';
+      document.getElementById('builder-condition').value = '';
+      document.getElementById('builder-action').value = '';
+      document.getElementById('builder-scope-role').value = '';
+      document.getElementById('builder-scope-provider').value = '';
+      document.getElementById('builder-scope-agent').value = '';
       fetchRules();
     }
   }).catch(function(e) { console.error('Add rule failed:', e); });
@@ -6603,6 +7919,181 @@ function getMsgAvatar(name, color) {
 
 // ==================== v3.0: PROFILE POPUP ====================
 
+function switchPpTab(tabName, forceInit) {
+  var popup = document.getElementById('profile-popup');
+  var agentName = popup.dataset.agent || editingAgent;
+  
+  var tabs = document.querySelectorAll('.pp-tab');
+  var contents = document.querySelectorAll('.pp-tab-content');
+  
+  tabs.forEach(function(t) { t.classList.toggle('active', t.dataset.tab === tabName); });
+  contents.forEach(function(c) { c.classList.toggle('active', c.id === 'pp-tab-' + tabName); });
+  
+  activePpTab = tabName;
+  if (tabName === 'terminal' || forceInit) {
+    if (agentName) initTerminal(agentName);
+  }
+}
+
+var _xtermLoadPromise = null;
+function loadXterm() {
+  if (_xtermLoadPromise) return _xtermLoadPromise;
+  _xtermLoadPromise = new Promise(function(resolve, reject) {
+    console.log('[Neohive] Lazy-loading xterm.js dependencies...');
+    var css = document.createElement('link');
+    css.rel = 'stylesheet';
+    css.href = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css';
+    document.head.appendChild(css);
+    
+    var s1 = document.createElement('script');
+    s1.src = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js';
+    s1.onload = function() {
+      var s2 = document.createElement('script');
+      s2.src = 'https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js';
+      s2.onload = function() {
+        console.log('[Neohive] xterm.js loaded successfully.');
+        resolve();
+      };
+      s2.onerror = reject;
+      document.head.appendChild(s2);
+    };
+    s1.onerror = reject;
+    document.head.appendChild(s1);
+  });
+  return _xtermLoadPromise;
+}
+
+var terminalInstances = new Map(); // agentName -> { term: Terminal, fit: FitAddon, lastMsgId: string }
+
+async function initTerminal(agentName) {
+  var container = document.getElementById('pp-terminal-container');
+  if (!container || !agentName) return;
+
+  // Clear previous terminal output
+  container.innerHTML = '<div style="padding:20px; color:var(--nh-text-muted); font-family:monospace;">Connecting terminal stream...</div>';
+
+  try {
+    await loadXterm();
+  } catch (err) {
+    console.error('[Neohive] Failed to load xterm.js:', err);
+    container.innerHTML = '<div style="padding:20px; color:var(--nh-red); font-family:monospace;">Terminal unavailable — check network connection.</div>';
+    return;
+  }
+
+  container.innerHTML = '';
+
+  if (terminalInstances.has(agentName)) {
+    var inst = terminalInstances.get(agentName);
+    inst.term.open(container);
+    if (inst.fit) {
+      setTimeout(function() { inst.fit.fit(); }, 50);
+    }
+    return inst.term;
+  }
+
+  var term = new Terminal({
+    cursorBlink: true,
+    theme: { background: '#111827', cursor: '#fbbf24' },
+    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+    fontSize: 12
+  });
+  var fit = new FitAddon.FitAddon();
+  term.loadAddon(fit);
+  
+  // Ensure DOM is ready
+  setTimeout(function() {
+    term.open(container);
+    fit.fit();
+    terminalInstances.set(agentName, { term: term, fit: fit, lastMsgId: null });
+    
+    term.writeln('\x1b[33m[Neohive]\x1b[0m Connecting terminal stream for \x1b[32m' + agentName + '\x1b[0m...');
+    
+    // Real Stream: sync current history immediately
+    syncTerminalsFromHistory(agentName, term);
+  }, 50);
+  
+  return term;
+}
+
+function syncTerminalsFromHistory(targetAgent, specificTerm) {
+  // If targetAgent provided, sync only that one, else sync all open instances
+  var targets = targetAgent ? [targetAgent] : Array.from(terminalInstances.keys());
+  
+  targets.forEach(function(agent) {
+    var inst = terminalInstances.get(agent);
+    if (!inst) return;
+    var term = specificTerm || inst.term;
+    
+    // Find messages from this agent starting with [terminal:
+    // cachedHistory is global, oldest to newest
+    cachedHistory.forEach(function(msg) {
+      if (msg.from === agent && msg.content && msg.content.startsWith('[terminal:')) {
+        // Simple deduplication based on unique message ID
+        if (inst.lastMsgId && msg.id <= inst.lastMsgId) return;
+        
+        // Extract content: "[terminal: some command] output..." -> "output..." 
+        var clean = msg.content.replace(/^\[terminal:.*?\]/, '');
+        if (clean) {
+          // If the clean content is empty, it might be just the command tag
+          // We can echo the command tag if we want, or just the output
+          term.writeln(clean);
+        }
+        inst.lastMsgId = msg.id;
+      }
+    });
+  });
+}
+
+function ppPing(agentName) {
+  var pq = projectParam();
+  lttFetch('/api/inject' + pq, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ from: '__user__', to: agentName, content: 'ping' })
+  }).then(function(r) { return r.json(); }).then(function(res) {
+    if (res.success) {
+      var btn = document.querySelector('#pp-actions .pp-ping-btn');
+      if (btn) { btn.style.borderColor = 'var(--nh-green)'; setTimeout(function() { btn.style.borderColor = ''; }, 1000); }
+    }
+  }).catch(function(e) { log.error('Ping failed:', e); });
+}
+
+function ppMessage(agentName) {
+  var sel = document.getElementById('inject-target');
+  if (sel) sel.value = agentName;
+  var ta = document.getElementById('inject-content');
+  if (ta) { ta.value = ''; ta.focus(); }
+  updateSendBtn();
+  document.getElementById('profile-popup').classList.remove('open');
+}
+
+function ppNudge(agentName) {
+  var sel = document.getElementById('inject-target');
+  if (sel) sel.value = agentName;
+  var ta = document.getElementById('inject-content');
+  if (ta) { ta.value = '@' + agentName + ' '; ta.focus(); }
+  updateSendBtn();
+  document.getElementById('profile-popup').classList.remove('open');
+}
+
+function ppFilterChat(agentName) {
+  searchQuery = agentName.toLowerCase();
+  var input = document.getElementById('search-input');
+  if (input) input.value = agentName;
+  lastMessageCount = 0;
+  renderMessages(cachedHistory);
+  document.getElementById('profile-popup').classList.remove('open');
+}
+
+function ppViewHistory(agentName) {
+  searchQuery = agentName.toLowerCase();
+  var input = document.getElementById('search-input');
+  if (input) input.value = agentName;
+  lastMessageCount = 0;
+  renderMessages(cachedHistory);
+  document.getElementById('profile-popup').classList.remove('open');
+}
+
 function showProfilePopup(agentName, event) {
   event.stopPropagation();
   var popup = document.getElementById('profile-popup');
@@ -6610,37 +8101,206 @@ function showProfilePopup(agentName, event) {
   if (!agent) return;
 
   editingAgent = agentName;
+  popup.dataset.agent = agentName;
   var color = getColor(agentName);
+
+  // Header: avatar, name, status badge
   var ppAvatar = document.getElementById('pp-avatar');
   if (agent.avatar && (agent.avatar.startsWith('data:image/') || agent.avatar.startsWith('/'))) { ppAvatar.setAttribute('src', agent.avatar); ppAvatar.style.display = ''; } else { ppAvatar.style.display = 'none'; }
   document.getElementById('pp-name').textContent = agent.display_name || agentName;
   document.getElementById('pp-name').style.color = color;
   document.getElementById('pp-id').textContent = '@' + agentName;
-  document.getElementById('pp-role').innerHTML = agent.role ? '<span class="role-badge">' + escapeHtml(agent.role) + '</span>' : '';
-  document.getElementById('pp-bio').textContent = agent.bio || '';
 
-  // Stats
-  var sent = 0, received = 0;
-  for (var i = 0; i < cachedHistory.length; i++) {
-    if (cachedHistory[i].from === agentName) sent++;
-    if (cachedHistory[i].to === agentName) received++;
-  }
-  document.getElementById('pp-stats').innerHTML =
-    '<div class="profile-popup-stat">Sent: <span>' + sent + '</span></div>' +
-    '<div class="profile-popup-stat">Received: <span>' + received + '</span></div>' +
-    '<div class="profile-popup-stat">Provider: <span>' + escapeHtml(agent.provider || 'unknown') + '</span></div>' +
-    '<div class="profile-popup-stat">Branch: <span>' + escapeHtml(agent.branch || 'main') + '</span></div>';
-
-  // Position near click
-  var rect = event.target.closest('.agent-top').getBoundingClientRect();
-  popup.style.top = Math.min(rect.bottom + 4, window.innerHeight - 280) + 'px';
-  popup.style.left = Math.min(rect.left, window.innerWidth - 280) + 'px';
+  // Status badge
+  var state = agent.status || (!agent.alive ? 'offline' : agent.is_listening ? 'listening' : 'working');
+  var badgeClass = (state === 'offline' || state === 'dead') ? 'offline' : state === 'listening' ? 'listening' : (state === 'stuck') ? 'stuck' : (state === 'unresponsive') ? 'unresponsive' : 'online';
+  var statusLabel = state === 'listening' ? 'Listening' : (state === 'offline' || state === 'dead') ? 'Offline' : state === 'stuck' ? 'Stuck' : state === 'unresponsive' ? 'Unresponsive' : state === 'idle' ? 'Idle' : 'Online';
+  document.getElementById('pp-status-badge').className = 'pp-status-badge ' + badgeClass;
+  document.getElementById('pp-status-badge').textContent = statusLabel;
+
+  // Default to Actions tab when opening agent popup
+  switchPpTab('actions', false);
+
+  // === Stats Tab ===
+  var badgesHtml = '';
+  if (agent.provider) badgesHtml += '<span class="role-badge" style="font-size:10px">' + escapeHtml(agent.provider) + '</span>';
+  if (agent.role) badgesHtml += '<span class="role-badge" style="font-size:10px">' + escapeHtml(agent.role) + '</span>';
+  document.getElementById('pp-badges').innerHTML = badgesHtml;
+
+  // Count tasks completed and messages for this agent
+  var tasksCompleted = 0;
+  var msgCount = 0;
+  if (cachedTasks) {
+    for (var t = 0; t < cachedTasks.length; t++) {
+      if (cachedTasks[t].assignee === agentName && cachedTasks[t].status === 'done') tasksCompleted++;
+    }
+  }
+  if (cachedHistory) {
+    for (var m = 0; m < cachedHistory.length; m++) {
+      if (cachedHistory[m].from === agentName) msgCount++;
+    }
+  }
+
+  var statsHtml = '<div class="profile-popup-stat"><span>' + tasksCompleted + '</span>Tasks Done</div>' +
+    '<div class="profile-popup-stat"><span>' + msgCount + '</span>Messages</div>';
+  document.getElementById('pp-stats').innerHTML = statsHtml;
+
+  // Skills (read-only display)
+  var skills = agent.skills || [];
+  var skillsRoHtml = '';
+  if (skills.length > 0) {
+    var platformClass = 'platform-' + (agent.provider || 'unknown').toLowerCase();
+    var platformSkills = agent.platform_skills || [];
+    skillsRoHtml = '<div style="font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);margin-bottom:6px">Skills</div><div class="skill-tags-inline">';
+    for (var s = 0; s < skills.length; s++) {
+      var isPlatform = platformSkills.indexOf(skills[s]) !== -1;
+      skillsRoHtml += '<span class="skill-tag' + (isPlatform ? ' ' + platformClass : '') + '">' + escapeHtml(skills[s]) + '</span>';
+    }
+    skillsRoHtml += '</div>';
+  }
+  document.getElementById('pp-skills-readonly').innerHTML = skillsRoHtml;
+
+  // === Actions Tab ===
+  var eName = escapeHtml(agentName);
+  var actionsHtml = '<button class="pp-action-btn" onclick="ppMessage(\'' + eName + '\')">' +
+    '<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>' +
+    'Message</button>' +
+    '<button class="pp-action-btn pp-ping-btn" onclick="ppPing(\'' + eName + '\')">' +
+    '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>' +
+    'Ping</button>' +
+    '<button class="pp-action-btn" onclick="ppNudge(\'' + eName + '\')">' +
+    '<svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>' +
+    'Nudge</button>' +
+    '<button class="pp-action-btn" onclick="ppFilterChat(\'' + eName + '\')">' +
+    '<svg viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>' +
+    'Messages</button>' +
+    '<button class="pp-action-btn" onclick="ppViewHistory(\'' + eName + '\')">' +
+    '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>' +
+    'History</button>';
+  document.getElementById('pp-actions').innerHTML = actionsHtml;
+
+  // === Profile Tab ===
+  document.getElementById('pp-bio').textContent = agent.bio || 'No bio set.';
+  renderSkillEditor(agentName);
+
+  // Position near click — find closest clickable ancestor
+  var anchor = event.target.closest('.agent-top') || event.target.closest('.agent-card') || event.target;
+  var rect = anchor.getBoundingClientRect();
+  popup.style.visibility = 'hidden';
   popup.classList.add('open');
+  var popupHeight = popup.offsetHeight;
+
+  var topPos = rect.bottom + 4;
+  if (topPos + popupHeight > window.innerHeight - 10) {
+    var topSpace = rect.top;
+    var bottomSpace = window.innerHeight - rect.bottom;
+    if (topSpace > bottomSpace && topSpace > popupHeight) {
+      topPos = rect.top - popupHeight - 4;
+    } else {
+      topPos = window.innerHeight - popupHeight - 10;
+    }
+  }
+
+  popup.style.top = Math.max(10, topPos) + 'px';
+  popup.style.left = Math.min(rect.left, window.innerWidth - 310) + 'px';
+  popup.style.visibility = 'visible';
+}
+
+function renderSkillEditor(agentName) {
+  var agent = cachedAgents[agentName];
+  var container = document.getElementById('pp-skills-container');
+  if (!agent || !container) return;
+
+  var platformClass = 'platform-' + (agent.provider || 'unknown').toLowerCase();
+  var skills = agent.skills || [];
+  var platformSkills = agent.platform_skills || [];
+  
+  var html = '<div style="font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);margin-bottom:8px">Skills & Expertise</div>';
+  html += '<div class="skill-editor">';
+  
+  // Existing skills
+  html += '<div class="skill-tags-inline">';
+  for (var i = 0; i < skills.length; i++) {
+    var skill = skills[i];
+    var isPlatform = platformSkills.indexOf(skill) !== -1;
+    html += '<span class="skill-tag' + (isPlatform ? ' ' + platformClass : '') + '">' + 
+            escapeHtml(skill) + 
+            '<span class="skill-remove" onclick="removeSkill(\'' + escapeHtml(agentName) + '\', ' + i + ')">&times;</span>' +
+            '</span>';
+  }
+  html += '</div>';
+
+  // Add new skill input
+  html += '<div class="skill-input-row" style="margin-top:8px;display:flex;gap:4px">' +
+          '<input type="text" id="new-skill-input" placeholder="Add skill..." onkeydown="if(event.key===' + "'Enter'" + ') addSkill(\'' + escapeHtml(agentName) + '\')" style="flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-size:11px;color:var(--text)">' +
+          '<button onclick="addSkill(\'' + escapeHtml(agentName) + '\')" style="background:var(--nh-accent-dim);border:1px solid var(--nh-accent);border-radius:4px;padding:0 8px;color:var(--nh-accent);cursor:pointer;font-size:14px">+</button>' +
+          '</div>';
+
+  html += '</div>';
+  container.innerHTML = html;
+}
+
+function addSkill(agentName) {
+  var input = document.getElementById('new-skill-input');
+  var skill = input.value.trim();
+  if (!skill) return;
+
+  var agent = cachedAgents[agentName];
+  var newSkills = (agent.skills || []).slice();
+  if (newSkills.indexOf(skill) === -1) {
+    newSkills.push(skill);
+    updateAgentSkills(agentName, newSkills);
+  }
+  input.value = '';
+}
+
+function removeSkill(agentName, index) {
+  var agent = cachedAgents[agentName];
+  var newSkills = (agent.skills || []).slice();
+  newSkills.splice(index, 1);
+  updateAgentSkills(agentName, newSkills);
+}
+
+function updateAgentSkills(agentName, skills) {
+  var pq = projectParam();
+  lttFetch('/api/agent-cards' + pq, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name: agentName, skills: skills })
+  }).then(function(r) { return r.json(); }).then(function(data) {
+    if (data.error) {
+      showToast('!', 'Update failed: ' + data.error);
+    } else {
+      // Optimistic update of cache
+      if (cachedAgents[agentName]) {
+        cachedAgents[agentName].skills = skills;
+        renderAgents(cachedAgents); // Refresh sidebar
+        renderSkillEditor(agentName); // Refresh popup
+      }
+    }
+  }).catch(function() {
+    showToast('!', 'Update failed');
+  });
+}
+
+function showAgentPopup(agentName) {
+  var agent = cachedAgents[agentName];
+  if (!agent) return;
+  editingAgent = agentName;
+  openProfileEditor();
+  
+  // Auto-switch to stats tab
+  var tabs = document.querySelectorAll('.cd-tab');
+  for (var i = 0; i < tabs.length; i++) {
+    if (tabs[i].textContent === 'Stats') {
+      cdSwitchTab('stats', tabs[i]);
+      break;
+    }
+  }
 }
 
 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; }
 });
@@ -6938,6 +8598,33 @@ function openProfileEditor() {
   // Reset to Body tab
   cdSwitchTab('body', document.querySelector('.cd-tab'));
 
+  // Calculate and populate stats
+  var sent = 0, received = 0;
+  for (var i = 0; i < cachedHistory.length; i++) {
+    if (cachedHistory[i].from === editingAgent) sent++;
+    if (cachedHistory[i].to === editingAgent) received++;
+  }
+  var statsHtml =
+    '<div style="background:var(--surface-2);padding:10px;border-radius:6px;border:1px solid var(--border)">Sent: <b style="color:var(--text)">' + sent + '</b></div>' +
+    '<div style="background:var(--surface-2);padding:10px;border-radius:6px;border:1px solid var(--border)">Received: <b style="color:var(--text)">' + received + '</b></div>' +
+    '<div style="background:var(--surface-2);padding:10px;border-radius:6px;border:1px solid var(--border)">Provider: <b style="color:var(--text)">' + escapeHtml(agent.provider || 'unknown') + '</b></div>' +
+    '<div style="background:var(--surface-2);padding:10px;border-radius:6px;border:1px solid var(--border)">Branch: <b style="color:var(--text)">' + escapeHtml(agent.branch || 'main') + '</b></div>';
+  document.getElementById('pe-stats-container').innerHTML = statsHtml;
+
+  var pq = projectParam();
+  lttFetch('/api/token-usage' + pq).then(function(r) { return r.json(); }).then(function(data) {
+    if (!data || !data.agents || !data.agents[editingAgent]) return;
+    var tu = data.agents[editingAgent];
+    var tokenHtml = 
+      '<div style="grid-column:1/-1;margin-top:12px;font-weight:800;color:var(--text);font-size:11px;text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:4px">Token Usage (<span style="color:var(--accent);font-weight:600">' + escapeHtml(tu.model || 'unknown') + '</span>)</div>' +
+      '<div style="background:var(--surface-2);padding:10px;border-radius:6px;border:1px solid var(--border)">Input: <b style="color:var(--text)">' + (tu.input_tokens || 0).toLocaleString() + '</b> </div>' +
+      '<div style="background:var(--surface-2);padding:10px;border-radius:6px;border:1px solid var(--border)">Output: <b style="color:var(--text)">' + (tu.output_tokens || 0).toLocaleString() + '</b> </div>' +
+      '<div style="background:var(--surface-2);padding:10px;border-radius:6px;border:1px solid var(--border)">Cache: <b style="color:var(--text)">' + ((tu.cache_creation_tokens || 0) + (tu.cache_read_tokens || 0)).toLocaleString() + '</b> </div>' +
+      '<div style="background:var(--accent-dim);color:var(--accent);padding:10px;border-radius:6px;border:1px solid var(--accent);font-weight:700">Cost: $' + (tu.estimated_cost_usd || 0).toFixed(2) + '</div>';
+    var el = document.getElementById('pe-stats-container');
+    if (el) el.innerHTML += tokenHtml;
+  }).catch(function() {});
+
   // Open the panel
   document.getElementById('char-designer').classList.add('open');
   document.getElementById('cd-backdrop').classList.add('open');
@@ -7089,6 +8776,20 @@ function buildWorkflowHTML(wf) {
   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)';
+    
+    var hasActiveRule = false;
+    if (typeof cachedRules !== 'undefined' && s.assignee && cachedAgents && cachedAgents[s.assignee]) {
+      var a = cachedAgents[s.assignee];
+      for (var r=0; r < cachedRules.length; r++) {
+         if (!cachedRules[r].active) continue;
+         var matchRole = !cachedRules[r].scope_role || cachedRules[r].scope_role === (a.role || '').toLowerCase();
+         var matchProv = !cachedRules[r].scope_provider || cachedRules[r].scope_provider === (a.provider || '').toLowerCase();
+         var matchAgt = !cachedRules[r].scope_agent || cachedRules[r].scope_agent === s.assignee;
+         if (matchRole && matchProv && matchAgt) { hasActiveRule = true; break; }
+      }
+    }
+    var shieldIcon = hasActiveRule ? '<span class="step-shield" title="Governed by active rules"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span>' : '';
+
     if (j > 0) stepsHtml += '<span class="step-arrow">&rarr;</span>';
     var stepTimeHtml = '';
     if (s.status === 'done' && s.started_at && s.completed_at) {
@@ -7100,6 +8801,7 @@ function buildWorkflowHTML(wf) {
     }
     stepsHtml += '<div class="step-card ' + s.status + '" data-step-id="' + s.id + '" title="' + escapeHtml(s.notes || '') + '">' +
       '<span class="step-num">' + s.id + '</span>' +
+      shieldIcon +
       '<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>' : '') +
@@ -7606,7 +9308,7 @@ function checkPlanCompletion() {
         if (Notification.permission === 'granted') {
           new Notification('Plan Complete: ' + wf.name, {
             body: 'All ' + wf.steps.length + ' steps done!',
-            icon: '/logo.png',
+            icon: '/favicon.png',
           });
         }
         // Flash the tab title
@@ -7647,7 +9349,7 @@ function renderMonitorPanel(data) {
     for (var i = 0; i < agentNames.length; i++) {
       var name = agentNames[i];
       var a = agents[name];
-      var color = a.status === 'working' ? 'var(--green)' : a.status === 'listening' ? '#3b82f6' : a.status === 'idle' ? 'var(--orange)' : 'var(--red,#ef4444)';
+      var color = a.status === 'working' ? 'var(--nh-green)' : a.status === 'listening' ? 'var(--nh-blue)' : a.status === 'idle' ? 'var(--nh-accent)' : 'var(--nh-red)';
       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>' +
@@ -7912,6 +9614,8 @@ function poll() {
     // Browser notification for new messages
     if (prevHistLen > 0 && cachedHistory.length > prevHistLen) {
       sendBrowserNotification(cachedHistory[cachedHistory.length - 1]);
+      // Real-time terminal sync: new messages arrived, update any open terminals
+      syncTerminalsFromHistory();
     }
 
     $id('stat-messages').textContent = status.messageCount;
@@ -9501,12 +11205,16 @@ function updateAgentBar(agents) {
     var name = sorted[i][0];
     var agent = sorted[i][1];
     if (name === '__system__' || name === 'Dashboard') continue;
-    var cls = 'offline';
-    var activity = 'offline';
+    var cls = agent.status || 'offline';
+    var activity = cls;
     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'; }
+    } else if (agent.status === 'unknown') {
+      activity = 'never started';
+    } else if (agent.status === 'stale') {
+      activity = 'stale';
     }
     // Toast on state change
     var prevState = prevAgentBarState[name];
@@ -9531,7 +11239,7 @@ function renderOverview() {
   if (!area) return;
   var savedScroll = area.scrollTop;
   var pq = projectParam();
-  var histQ = pq + (pq ? '&' : '?') + 'limit=5' + (activeBranch && activeBranch !== 'main' ? '&branch=' + encodeURIComponent(activeBranch) : '');
+  var histQ = pq + (pq ? '&' : '?') + 'limit=12' + (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(); }),
@@ -9550,7 +11258,7 @@ function renderOverview() {
     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');
+    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') + ':c:' + (status.coordinator_mode || 'responsive');
     if (overviewHash === renderOverview._lastHash) { return; }
     renderOverview._lastHash = overviewHash;
 
@@ -9568,137 +11276,152 @@ function renderOverview() {
 
     // 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">';
+    var regTotal = agentEntries.length || (status.agentCount || 0);
+    var aliveN = status.aliveCount || 0;
+    html += '<div class="overview-welcome">';
     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 += '<p>' + (status.conversation_mode === 'managed' ? 'Managed mode' : 'Direct mode') + ' — ' + regTotal + ' agent' + (regTotal === 1 ? '' : 's') + ' registered</p></div>';
+    html += '<div class="overview-coordinator">';
+    html += '<span class="overview-coordinator-label">Coordinator</span>';
+    html += '<div class="overview-coordinator-toggle" role="group" aria-label="Coordinator mode">';
+    html += '<button type="button" class="overview-coordinator-btn' + (coordMode === 'responsive' ? ' overview-coordinator-btn--mode-responsive' : '') + '" onclick="setCoordinatorMode(\'responsive\')">Stay with me</button>';
+    html += '<button type="button" class="overview-coordinator-btn' + (coordMode === 'autonomous' ? ' overview-coordinator-btn--mode-autonomous' : '') + '" onclick="setCoordinatorMode(\'autonomous\')">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 class="metric-label">Active agents</div>';
+    html += '<div class="metric-value">' + aliveN + '/' + regTotal + '</div>';
+    html += '<div class="metric-sub">' + regTotal + ' registered</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 class="metric-sub">Total exchanged</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-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-card__progress"><div class="metric-card__progress-fill" style="width:' + taskPct + '%"></div></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 class="overview-empty-state">';
+      html += '<div class="overview-empty-state-icon"><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 class="overview-empty-state-title">No agents online yet</div>';
+      html += '<div class="overview-empty-state-desc">Open a CLI terminal and register an agent to start collaborating.</div>';
+      html += '<button type="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>';
-      }
+      html += '<div class="overview-stitch-rows">';
 
-      // Workflow progress panel
       if (hasWorkflows) {
-        html += '<div class="overview-panel"><h3>Workflows <a onclick="switchView(\'workflows\')">View all &rarr;</a></h3>';
+        html += '<div class="overview-panel overview-full-width"><h3>Workflows <a onclick="switchView(\'workflows\')">View all</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 class="metric-card__progress"><div class="metric-card__progress-fill" style="width:' + wfPct + '%"></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">';
+      html += '<div class="overview-grid overview-grid--pair">';
+      html += '<div class="overview-panel"><h3>Agents <a onclick="switchView(\'messages\')">View details</a></h3>';
+      if (hasAgents) {
+        for (var i = 0; i < agentEntries.length; i++) {
+          var aName = agentEntries[i][0];
+          var aInfo = agentEntries[i][1];
+          var dotMod = !aInfo.alive ? 'offline' : aInfo.is_listening ? 'listening' : aInfo.status === 'idle' ? 'idle' : 'working';
+          var statusText = !aInfo.alive ? 'offline' : aInfo.is_listening ? 'listening' : aInfo.status === 'idle' ? 'idle' : 'working';
+          var role = aInfo.role || '';
+          html += '<div class="overview-agent-row"><span class="nh-presence-dot nh-presence-dot--' + dotMod + '" aria-hidden="true"></span><span class="overview-agent-name">' + aName + '</span>';
+          if (role) html += '<span class="overview-role-pill">' + escapeHtml(role) + '</span>';
+          html += '<span class="overview-agent-status" style="margin-left:auto">' + statusText + '</span></div>';
+        }
+      } else {
+        html += '<p class="overview-panel-empty">No agents registered</p>';
+      }
+      html += '</div>';
+
+      html += '<div class="overview-panel"><h3>Tasks <a onclick="switchView(\'tasks\')">View board</a></h3>';
+      if (hasTasks) {
+        var rem = pending + inProgress;
+        html += '<div class="overview-task-stitch"><span class="overview-task-stitch-done">' + done + ' done</span><span class="overview-task-stitch-rem">' + rem + ' remaining</span></div>';
+        html += '<div class="overview-task-summary" style="margin-top:10px">';
         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>';
+      } else {
+        html += '<p class="overview-panel-empty">No tasks yet</p>';
       }
+      html += '</div>';
+      html += '</div>';
 
-      // Recent messages
+      html += '<div class="overview-grid overview-grid--pair">';
+      html += '<div class="overview-panel"><h3>Recent Activity <a onclick="switchView(\'messages\')">View all</a></h3>';
       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>';
+          var fromN = msg.from || '?';
+          var fromL = fromN.toLowerCase();
+          var fk = fromL === 'coordinator' ? 'coord' : (fromL === 'system' || fromL === '__system__') ? 'system' : 'agent';
+          var t = new Date(msg.timestamp);
+          var th = t.getHours();
+          var tm = String(t.getMinutes()).padStart(2, '0');
+          var ap = th >= 12 ? 'PM' : 'AM';
+          var th12 = th % 12;
+          if (th12 === 0) th12 = 12;
+          var timeBracket = '[' + th12 + ':' + tm + ' ' + ap + ']';
+          var preview = (msg.content || '').replace(/[#*`_~\[\]]/g, '').substring(0, 120);
+          html += '<div class="overview-activity-row"><span class="overview-activity-time">' + timeBracket + '</span><span class="overview-activity-body"><span class="overview-msg-from--' + fk + '">' + escapeHtml(fromN) + '</span><span class="overview-activity-preview">: ' + escapeHtml(preview) + '</span></span></div>';
         }
-        html += '</div>';
+      } else {
+        html += '<p class="overview-panel-empty">No recent messages</p>';
       }
+      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 class="overview-panel"><h3>Recent Notifications</h3>';
+      if (notifications.length > 0) {
+        var NOTIF_STITCH = {
+          task_done: { icon: '&#x2713;', label: 'Success', cls: 'overview-notif--success' },
+          agent_online: { icon: '&#x2713;', label: 'Success', cls: 'overview-notif--success' },
+          workflow_advanced: { icon: 'i', label: 'Info', cls: 'overview-notif--info' },
+          agent_listening: { icon: 'i', label: 'Info', cls: 'overview-notif--info' },
+          agent_busy: { icon: 'i', label: 'Info', cls: 'overview-notif--info' },
+          agent_offline: { icon: '&#x2013;', label: 'Info', cls: 'overview-notif--neutral' },
+          approval_needed: { icon: '!', label: 'Warning', cls: 'overview-notif--warn' }
+        };
+        var recentN = notifications.slice(-8).reverse();
+        for (var ni = 0; ni < recentN.length; ni++) {
+          var nv = recentN[ni];
+          var meta = NOTIF_STITCH[nv.type] || { icon: '&#x2022;', label: 'Info', cls: 'overview-notif--neutral' };
+          var ntime = new Date(nv.timestamp);
+          var nth = ntime.getHours();
+          var ntm = String(ntime.getMinutes()).padStart(2, '0');
+          var nap = nth >= 12 ? 'PM' : 'AM';
+          var nth12 = nth % 12;
+          if (nth12 === 0) nth12 = 12;
+          var ntimeStr = nth12 + ':' + ntm + ' ' + nap;
+          var nbody = escapeHtml(nv.message || nv.summary || nv.type || '');
+          html += '<div class="overview-notif-row-stitch ' + meta.cls + '"><span class="overview-notif-icon-stitch">' + meta.icon + '</span><div style="flex:1;min-width:0"><span class="overview-notif-tag">[' + meta.label + ']</span><span class="overview-notif-msg">' + nbody + '</span></div><span class="overview-notif-time-stitch">' + ntimeStr + '</span></div>';
+        }
+      } else {
+        html += '<p class="overview-panel-empty">No notifications</p>';
       }
-
       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>';
     }