@panguard-ai/panguard-guard 1.6.0 → 1.7.0

package/dist/dashboard/dashboard.html

@@ -12,14 +12,15 @@
     />
     <style>
       :root {
-        --sage: #8b9a8e;
+        --sage: #8b9a8e; /* brand identity / presence */
+        --emerald: #34d399; /* action layer: CTAs, positive/active, updates */
         --bg-base: #1a1614;
         --bg-card: #242220;
         --bg-raised: #2e2c2a;
         --border: #3a3836;
         --text-primary: #f5f1e8;
         --text-muted: #a09a94;
-        --ok: #2ed573;
+        --ok: #34d399;
         --warn: #fbbf24;
         --danger: #ef4444;
         --orange: #f97316;
@@ -63,8 +64,8 @@
         gap: 10px;
       }
       .sb-brand svg {
-        width: 28px;
-        height: 28px;
+        width: 32px;
+        height: 32px;
         flex-shrink: 0;
       }
       .sb-brand span {
@@ -74,6 +75,25 @@
         color: var(--text-primary);
         letter-spacing: 0.5px;
       }
+      .sb-brand-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+      }
+      .sb-brand .brand-tier {
+        font-size: 9px;
+        font-weight: 700;
+        letter-spacing: 0.8px;
+        text-transform: uppercase;
+        color: var(--sage);
+        background: rgba(139, 154, 142, 0.14);
+        border: 1px solid rgba(139, 154, 142, 0.3);
+        border-radius: 4px;
+        padding: 1px 6px;
+        align-self: flex-start;
+        line-height: 1.6;
+      }
       .sb-nav {
         flex: 1;
         padding: 12px 0;
@@ -282,6 +302,224 @@
         border-left-color: var(--ok);
       }
 
+      /* Readable event cards (replaces the raw JSON dump rows). A solo dev
+         scans these, not parses them: severity, plain summary, time. */
+      .ev-card {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 11px 16px;
+        border-bottom: 1px solid var(--border);
+        border-left: 3px solid var(--text-muted);
+      }
+      .ev-card:last-child {
+        border-bottom: none;
+      }
+      .ev-card .ev-sev {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--text-muted);
+        flex-shrink: 0;
+      }
+      .ev-card .ev-body {
+        flex: 1;
+        min-width: 0;
+      }
+      .ev-card .ev-title {
+        font-size: 13px;
+        color: var(--text-primary);
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .ev-card .ev-meta {
+        font-size: 11px;
+        color: var(--text-muted);
+        margin-top: 2px;
+        font-family: 'JetBrains Mono', 'SF Mono', monospace;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .ev-card .ev-sevtag {
+        font-size: 10px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--text-muted);
+        flex-shrink: 0;
+      }
+      .ev-card .ev-time {
+        font-size: 11px;
+        color: var(--text-muted);
+        font-family: 'JetBrains Mono', 'SF Mono', monospace;
+        flex-shrink: 0;
+      }
+      .ev-card.critical,
+      .ev-card.malicious {
+        border-left-color: var(--danger);
+      }
+      .ev-card.critical .ev-sev,
+      .ev-card.malicious .ev-sev {
+        background: var(--danger);
+      }
+      .ev-card.critical .ev-sevtag,
+      .ev-card.malicious .ev-sevtag {
+        color: var(--danger);
+      }
+      .ev-card.high {
+        border-left-color: var(--orange);
+      }
+      .ev-card.high .ev-sev {
+        background: var(--orange);
+      }
+      .ev-card.high .ev-sevtag {
+        color: var(--orange);
+      }
+      .ev-card.medium,
+      .ev-card.suspicious {
+        border-left-color: var(--warn);
+      }
+      .ev-card.medium .ev-sev,
+      .ev-card.suspicious .ev-sev {
+        background: var(--warn);
+      }
+      .ev-card.medium .ev-sevtag,
+      .ev-card.suspicious .ev-sevtag {
+        color: var(--warn);
+      }
+
+      /* First-run welcome guide */
+      .welcome {
+        position: relative;
+        background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(139, 154, 142, 0.04));
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        padding: 22px 24px;
+        margin-bottom: 20px;
+        box-shadow: var(--glow);
+      }
+      .welcome-x {
+        position: absolute;
+        top: 12px;
+        right: 14px;
+        background: transparent;
+        border: 0;
+        color: var(--text-muted);
+        font-size: 22px;
+        line-height: 1;
+        cursor: pointer;
+        padding: 2px 6px;
+      }
+      .welcome-x:hover {
+        color: var(--text-primary);
+      }
+      .welcome-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 8px;
+      }
+      .welcome-title {
+        font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+      .welcome-lead {
+        font-size: 13px;
+        color: var(--text-primary);
+        line-height: 1.65;
+        max-width: 72ch;
+        margin-bottom: 18px;
+      }
+      .welcome-grid {
+        display: grid;
+        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+        gap: 24px;
+      }
+      @media (max-width: 720px) {
+        .welcome-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+      .welcome-col-h {
+        font-size: 11px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--text-muted);
+        margin-bottom: 10px;
+      }
+      .welcome-opt {
+        font-weight: 500;
+        text-transform: none;
+        letter-spacing: 0;
+        color: var(--sage);
+      }
+      .welcome-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: 13px;
+        line-height: 1.9;
+        color: var(--text-muted);
+      }
+      .welcome-list strong {
+        color: var(--text-primary);
+        font-weight: 600;
+      }
+      .welcome-step {
+        background: var(--bg-raised);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        padding: 12px 14px;
+        margin-bottom: 10px;
+      }
+      .welcome-step:last-child {
+        margin-bottom: 0;
+      }
+      .welcome-step-h {
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--text-primary);
+        margin-bottom: 4px;
+      }
+      .welcome-step-b {
+        font-size: 12px;
+        color: var(--text-muted);
+        line-height: 1.6;
+        margin-bottom: 8px;
+      }
+      .welcome-step-b strong {
+        color: var(--text-primary);
+        font-weight: 600;
+      }
+      .welcome-foot {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-top: 18px;
+        flex-wrap: wrap;
+      }
+      .welcome-later {
+        background: transparent;
+        border: 0;
+        color: var(--text-muted);
+        font-size: 12px;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+      .welcome-later:hover {
+        color: var(--text-primary);
+      }
+      .welcome-foot-note {
+        font-size: 11px;
+        color: var(--text-muted);
+      }
+
       /* Tables */
       .tb {
         width: 100%;
@@ -389,7 +627,7 @@
         font-family: inherit;
       }
       .btn-primary {
-        background: var(--sage);
+        background: var(--emerald);
         color: var(--bg-base);
       }
       .btn-primary:hover {
@@ -573,7 +811,7 @@
         flex-shrink: 0;
       }
       .toggle.on {
-        background: var(--sage);
+        background: var(--emerald);
       }
       .toggle::after {
         content: '';
@@ -606,6 +844,145 @@
         font-weight: 600;
       }
 
+      /* Collective-defense value/privacy explainer */
+      .cd-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 12px;
+        margin: 14px 0;
+      }
+      @media (max-width: 720px) {
+        .cd-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+      .cd-box {
+        background: var(--bg-raised);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        padding: 14px 16px;
+      }
+      .cd-box-title {
+        font-size: 12px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: var(--text-muted);
+        margin-bottom: 8px;
+      }
+      .cd-box-title.cd-good {
+        color: var(--ok);
+      }
+      .cd-list {
+        margin: 0;
+        padding-left: 18px;
+        font-size: 13px;
+        line-height: 1.65;
+        color: var(--text-muted);
+      }
+      .cd-list li {
+        margin-bottom: 4px;
+      }
+      .cd-control {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 12px 0 4px;
+      }
+      .cd-cli {
+        margin-top: 12px;
+        font-size: 12px;
+        color: var(--text-muted);
+      }
+      /* Copy-paste command line */
+      .cmd-box {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 6px;
+        background: var(--bg-raised);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        padding: 8px 10px;
+      }
+      .cmd-box code {
+        flex: 1;
+        font-family: 'JetBrains Mono', 'SF Mono', monospace;
+        font-size: 12px;
+        color: var(--text-primary);
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+      .cmd-copy {
+        flex-shrink: 0;
+        background: transparent;
+        border: 1px solid var(--border);
+        color: var(--sage);
+        border-radius: 6px;
+        padding: 4px 10px;
+        font-size: 11px;
+        font-weight: 600;
+        cursor: pointer;
+        transition:
+          border-color 0.15s,
+          color 0.15s;
+      }
+      .cmd-copy:hover {
+        border-color: var(--sage);
+      }
+      .cmd-copy.copied {
+        color: var(--ok);
+        border-color: var(--ok);
+      }
+
+      /* Optional alert-channel disclosure */
+      .notify-summary {
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--sage);
+        list-style: none;
+        user-select: none;
+        padding: 4px 0;
+      }
+      .notify-summary::-webkit-details-marker {
+        display: none;
+      }
+      .notify-summary::before {
+        content: '▸ ';
+        color: var(--text-muted);
+      }
+      details[open] .notify-summary::before {
+        content: '▾ ';
+      }
+      .nc {
+        background: var(--bg-raised);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        padding: 12px 14px;
+      }
+      .nc-head {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        margin-bottom: 4px;
+      }
+      .nc-name {
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+      .nc-state {
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .nc-what {
+        font-size: 12px;
+        color: var(--text-muted);
+        line-height: 1.55;
+        margin-bottom: 8px;
+      }
+
       /* Spinner */
       .spin {
         display: inline-block;
@@ -791,29 +1168,138 @@
         color: var(--ok);
       }
 
-      /* Tier-upsell link (shown when license tier is community for paid features) */
-      .upsell {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 12px;
-        color: var(--text-muted);
-        text-decoration: none;
-        padding: 6px 10px;
-        border-radius: 8px;
-        border: 1px dashed var(--border);
-        transition: all 0.15s;
+      /* Neutral default + connecting state for the persistent status dot, so it
+         never reads green before a real armed status loads. */
+      .pbar .pb-dot {
+        background: var(--text-muted);
       }
-      .upsell:hover {
-        color: var(--sage);
-        border-color: var(--sage);
+      .pbar .pb-dot.warn {
+        background: var(--warn);
+        box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
       }
 
-      /* Threat Cloud flywheel */
-      .flywheel {
+      /* Connection guidance banner: shown only when Guard is unreachable. The
+         single honest answer to "why is everything blank?" with the one fix. */
+      .conn-banner {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+        padding: 12px 16px;
+        margin-bottom: 16px;
+        border: 1px solid var(--danger);
+        border-radius: 10px;
+        background: rgba(239, 68, 68, 0.08);
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--text-primary);
+      }
+      .conn-banner .cb-text {
+        flex: 1;
+        min-width: 200px;
+      }
+      .conn-banner .conn-cmd {
         font-family: 'JetBrains Mono', 'SF Mono', monospace;
-        font-size: 12px;
-        color: var(--text-muted);
+        font-size: 13px;
+        background: var(--bg-base);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 4px 10px;
+        color: var(--emerald);
+      }
+
+      /* One fused posture hero: state (left) + score with one-click fixes
+         (right), collapsing to one column on narrow screens. */
+      .hero-fused {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-template-areas: 'main score' 'fixes fixes';
+        gap: 18px 32px;
+        align-items: start;
+      }
+      .hp-main {
+        grid-area: main;
+        min-width: 0;
+      }
+      .hp-score {
+        grid-area: score;
+        text-align: center;
+        min-width: 140px;
+      }
+      .hp-fixes {
+        grid-area: fixes;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .hp-fixes:empty {
+        display: none;
+      }
+      .hp-state {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .hp-sub {
+        font-size: 14px;
+        color: var(--text-primary);
+        line-height: 1.6;
+        margin-top: 10px;
+        max-width: 56ch;
+      }
+      .hp-tagline {
+        font-size: 12px;
+        color: var(--text-muted);
+        margin-top: 14px;
+        letter-spacing: 0.2px;
+      }
+      .score-num {
+        font-family: 'Space Grotesk', sans-serif;
+        font-size: 56px;
+        font-weight: 700;
+        line-height: 1;
+        color: var(--emerald);
+      }
+      .score-cap {
+        font-size: 11px;
+        letter-spacing: 1px;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        margin-top: 4px;
+      }
+      .score-track {
+        height: 8px;
+        border-radius: 6px;
+        background: var(--bg-raised);
+        overflow: hidden;
+        margin: 12px 0 6px;
+      }
+      .score-fill {
+        height: 100%;
+        width: 0;
+        background: var(--emerald);
+        transition: width 0.4s;
+      }
+      .score-label {
+        font-size: 12px;
+        color: var(--text-muted);
+      }
+      @media (max-width: 720px) {
+        .hero-fused {
+          grid-template-columns: 1fr;
+          grid-template-areas: 'score' 'main' 'fixes';
+        }
+        .hp-score {
+          text-align: left;
+        }
+      }
+
+      /* Threat Cloud flywheel */
+      .flywheel {
+        font-family: 'JetBrains Mono', 'SF Mono', monospace;
+        font-size: 12px;
+        color: var(--text-muted);
         background: var(--bg-raised);
         border: 1px solid var(--border);
         border-radius: var(--radius);
@@ -828,13 +1314,36 @@
     <!-- Sidebar (220px fixed) -->
     <div class="sb">
       <div class="sb-brand">
-        <svg viewBox="385 323 1278 1403" fill="none">
+        <!-- Official PanGuard brand mark — the full 5-path 3D cube-shield (three
+             interlocking shield faces + top bracket), matching packages/website
+             BrandLogo.tsx. The dashboard previously shipped only one of the five
+             paths, so it rendered as a flat blob. fg = sage, bg = sidebar cutout. -->
+        <svg viewBox="385 323 1278 1403" fill="none" aria-label="PanGuard AI">
           <path
-            fill="#8B9A8E"
+            fill="var(--sage)"
             d="M 1021.5 830.423 C 1026.54 829.911 1045.81 832.659 1051.64 833.401 C 1072.38 835.99 1093.1 838.746 1113.8 841.667 L 1329.99 871.428 L 1329.95 1306.51 L 1330 1422.21 C 1330.01 1450.54 1332.08 1491.81 1325.18 1518.04 C 1318.79 1541.46 1305.62 1562.47 1287.31 1578.42 C 1269.98 1593.59 1234.62 1610.78 1212.96 1622.97 C 1151.4 1657.6 1087.44 1689.5 1026.42 1725.08 L 1024.58 1725.72 C 1020.72 1724.57 1005.67 1715.74 1001.44 1713.38 C 986.676 1705.08 971.857 1696.88 956.982 1688.79 L 836.342 1623.07 C 818.678 1613.37 800.537 1603.48 783.285 1593.93 C 741.183 1570.62 718.225 1528.6 718.162 1480.8 C 718.14 1463.85 718.093 1446.28 718.119 1429.07 L 718.13 1313.33 L 718.15 871.408 C 819.171 858.462 920.068 841.835 1021.5 830.423 z"
           />
+          <path
+            fill="var(--bg-card)"
+            d="M 1022.52 931.436 C 1027.43 930.745 1072.31 937.152 1079.51 938.107 C 1129.15 944.531 1178.76 951.264 1228.32 958.306 L 1228.23 1353.88 L 1228.35 1443.73 C 1228.37 1464.29 1233.5 1493.24 1214.51 1505.36 C 1195.74 1517.34 1175.98 1527.71 1156.43 1538.41 C 1112.57 1561.92 1068.87 1585.75 1025.35 1609.89 L 1024.59 1610.05 C 1019.31 1608.51 1009.91 1602.52 1004.79 1599.72 C 950.803 1570.14 896.481 1541.36 842.686 1511.4 C 829.113 1503.85 820.756 1496.4 820.195 1479.81 C 819.565 1461.16 819.816 1442.57 819.824 1423.9 L 819.867 1314.91 L 819.664 958.376 C 837.727 956.927 860.873 952.653 879.255 950.388 C 926.512 944.567 975.292 936.455 1022.52 931.436 z"
+          />
+          <path
+            fill="var(--sage)"
+            d="M 687.515 577.4 C 696.504 576.451 715.718 579.584 725.68 580.913 L 782.266 588.553 C 853.62 598.25 926.853 607.634 997.939 618.387 L 997.872 779.654 C 966.188 784.487 928.734 789.954 897.039 793.352 L 897.073 705.399 C 831.524 696.853 760.432 685.286 694.176 678.356 C 683.151 677.203 646.195 683.753 632.643 685.485 L 487.112 705.406 C 488.77 841.757 487.098 980.17 487.357 1116.69 L 487.339 1188.98 C 487.213 1243.94 479.328 1246.69 530.666 1273.69 C 574.625 1298.03 623.372 1322.43 666.093 1347.35 C 665.454 1385.26 666.06 1424.82 666.087 1462.87 C 649.609 1452.6 628.321 1441.62 610.88 1432.12 L 500.871 1372.76 C 476.603 1359.56 440.159 1342.09 421.535 1323.57 C 404.11 1306.02 392.433 1283.59 388.055 1259.25 C 384.254 1237.81 385.323 1203.28 385.354 1180.66 L 385.478 1064.48 L 385.312 618.209 C 414.868 615.376 445.833 609.518 475.437 605.863 C 545.54 597.208 617.46 584.737 687.515 577.4 z"
+          />
+          <path
+            fill="var(--sage)"
+            d="M 1348.89 577.369 C 1360.73 575.936 1415.83 584.528 1431.77 586.589 C 1508.75 596.536 1585.62 608.685 1662.67 618.335 L 1662.73 1028.87 L 1662.69 1154.09 C 1662.67 1223.3 1674.33 1293.75 1609.64 1337.92 C 1596.01 1347.22 1581.75 1354.57 1567.33 1362.44 L 1512.89 1391.87 L 1382 1462.6 C 1383.76 1427.96 1382.35 1382.83 1382.21 1347.24 C 1420 1324.81 1467.93 1301.58 1507.58 1279.5 C 1524.53 1270.36 1558.74 1256.3 1560.1 1235.39 C 1561.42 1215.18 1560.95 1193.69 1560.9 1173.32 L 1560.87 1066.29 L 1560.68 705.345 C 1543.39 703.65 1521.51 700.068 1504.1 697.576 C 1473.23 693.054 1442.33 688.801 1411.39 684.819 C 1399.03 683.204 1369.09 678.563 1357.99 678.482 C 1343.65 678.377 1310.02 683.839 1294.14 685.904 C 1246.36 692.092 1198.63 698.627 1150.95 705.51 C 1151.37 734.567 1151.1 764.255 1151.14 793.361 C 1118.48 789.558 1083.43 784.206 1050.79 779.597 L 1050.69 617.847 L 1348.89 577.369 z"
+          />
+          <path
+            fill="var(--sage)"
+            d="M 1017.32 323.354 C 1027.15 321.591 1105.66 333.344 1122.51 335.603 C 1166.74 341.267 1210.92 347.328 1255.05 353.786 C 1279.68 357.183 1305.51 360.23 1329.92 364.192 L 1329.98 526.684 C 1296.55 530.372 1261.73 535.721 1228.25 540.29 C 1228.4 510.591 1228.39 480.892 1228.23 451.193 C 1219.27 449.729 1209.61 448.427 1200.57 447.329 C 1144.13 440.467 1086.78 429.864 1030.24 424.572 C 1018.71 422.967 967.642 430.978 952.027 433.125 L 819.579 450.968 C 820.252 479.945 819.726 511.22 819.879 540.382 C 785.991 535.397 752.051 530.778 718.064 526.526 L 717.99 364.358 C 745.543 359.872 774.642 356.332 802.417 352.399 L 1017.32 323.354 z"
+          />
         </svg>
-        <span>PANGUARD AI</span>
+        <div class="sb-brand-text">
+          <span class="sb-wordmark">PanGuard</span>
+          <span class="brand-tier" id="brand-tier">Community</span>
+        </div>
       </div>
       <div class="sb-nav">
         <div class="ni on" data-tab="overview">
@@ -861,6 +1370,20 @@
             /></svg
           ><span data-i18n="n_sk">Skills</span>
         </div>
+        <div class="ni" data-tab="coverage">
+          <svg viewBox="0 0 24 24">
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
+            /></svg
+          ><span>Coverage</span>
+        </div>
+        <div class="ni" data-tab="runtime">
+          <svg viewBox="0 0 24 24">
+            <path
+              d="M13 3l-2 0 0 10 2 0 0-10zm4.83 2.17l-1.42 1.42A6.92 6.92 0 0119 12a7 7 0 11-11.41-5.42L6.17 5.17A9 9 0 1021 12a8.94 8.94 0 00-3.17-6.83z"
+            /></svg
+          ><span>Runtime</span>
+        </div>
         <div class="ni" data-tab="tcloud">
           <svg viewBox="0 0 24 24">
             <path
@@ -894,6 +1417,15 @@
             >COMMUNITY</span
           >
         </div>
+        <div class="ws-b" style="margin-top: 8px">
+          <span
+            id="welcome-reopen"
+            role="button"
+            tabindex="0"
+            style="font-size: 11px; color: var(--sage); cursor: pointer"
+            >Show welcome guide</span
+          >
+        </div>
       </div>
     </div>
 
@@ -901,44 +1433,156 @@
     <div class="mn">
       <!-- Protection status bar (always visible) -->
       <div class="pbar" id="pbar">
-        <div class="pb-dot ok" id="pb-dot"></div>
-        <span class="pb-txt" id="pb-txt">CONNECTING…</span>
-        <span id="pb-detail">| -- rules active | Uptime: --</span>
+        <div class="pb-dot" id="pb-dot"></div>
+        <span class="pb-txt" id="pb-txt">Connecting…</span>
+        <span id="pb-detail">checking protection status…</span>
+      </div>
+
+      <!-- Connection guidance: hidden unless Guard is unreachable. Replaces the
+           old dead end where everything sat on a stale green "CONNECTING…". -->
+      <div class="conn-banner" id="conn-banner" style="display: none">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+        <div class="cb-text">
+          <strong>Guard isn't running on this machine.</strong>
+          Your agents aren't being watched right now. Start protection:
+        </div>
+        <code class="conn-cmd">pga up</code>
+        <button type="button" class="btn btn-secondary btn-sm" id="conn-copy">Copy</button>
       </div>
 
       <!-- ===== PAGE 1: Overview ===== -->
       <div class="pg on" id="p-overview">
         <div class="pt"><em data-i18n="t_ov">Overview</em></div>
 
-        <!-- Status hero -->
-        <div class="hero">
-          <div class="hero-head">
-            <div class="live-dot" id="hero-dot"></div>
-            <div class="hero-status" id="hero-status">CONNECTING…</div>
-            <span class="badge badge-protected" id="hero-badge" data-i18n="active">Active</span>
+        <!-- First-run welcome guide: positive first-contact orientation. Hidden by
+             default; shown ONCE on the first LIVE authenticated status (gated by a
+             localStorage flag + the single-source-of-truth live signal, so it can
+             never paint on top of the "Guard not running" banner or the 401 overlay).
+             Dismissible, never nags; reopenable from the sidebar. -->
+        <div
+          class="welcome"
+          id="welcome-guide"
+          style="display: none"
+          role="region"
+          aria-label="Welcome to PanGuard Guard"
+        >
+          <button type="button" class="welcome-x" id="welcome-x" aria-label="Close welcome guide">
+            &times;
+          </button>
+          <div class="welcome-head">
+            <span class="dot dot-ok"></span>
+            <span class="welcome-title">You're protected. Here's the lay of the land.</span>
           </div>
-          <div
-            style="font-size: 13px; color: var(--text-muted); line-height: 1.6"
-            id="hero-desc"
-          >
-            Every event runs through deterministic pattern matching and heuristic correlation —
-            on-device by default. An optional semantic layer (bring your own LLM) stays off until
-            you enable it.
+          <div class="welcome-lead">
+            PanGuard Guard is watching the AI agents on this machine. Two detection layers run
+            automatically and need no setup: <strong>Layer A</strong> (proven ATR pattern rules) and
+            <strong>Layer B</strong> (behavioural heuristics). They run fully on-device — nothing
+            about your activity leaves this machine. Everything below is here only when you want it.
+          </div>
+
+          <div class="welcome-grid">
+            <div class="welcome-col">
+              <div class="welcome-col-h">Where things are</div>
+              <ul class="welcome-list">
+                <li><strong>Overview</strong> — am I safe right now? (this page)</li>
+                <li><strong>Threats</strong> — anything Guard has caught</li>
+                <li><strong>Coverage</strong> — which agent apps are protected</li>
+                <li><strong>Rules · Skills · Runtime</strong> — reference, not chores</li>
+                <li><strong>Settings</strong> — mode, the optional model, alerts</li>
+              </ul>
+            </div>
+            <div class="welcome-col">
+              <div class="welcome-col-h">
+                Optional next steps <span class="welcome-opt">— both off by default</span>
+              </div>
+
+              <div class="welcome-step">
+                <div class="welcome-step-h">Add a second opinion (Layer C)</div>
+                <div class="welcome-step-b">
+                  Optionally connect your own LLM for an advisory read on anything Layers A and B
+                  flag. It only ever <strong>flags for review — it can never block on its own</strong>.
+                  Runs on already-flagged events only, so a cloud key is a few cents a month; a local
+                  model (Ollama) is free. <strong>Your key is entered in the terminal, never here</strong>,
+                  and is stored encrypted on this machine.
+                </div>
+                <div class="cmd-box">
+                  <code id="welcome-ai-cmd">pga guard ai</code>
+                  <button class="cmd-copy" data-copy-target="welcome-ai-cmd" type="button">
+                    Copy
+                  </button>
+                </div>
+              </div>
+
+              <div class="welcome-step">
+                <div class="welcome-step-h">Join collective defense</div>
+                <div class="welcome-step-b">
+                  Optionally let the attacks Guard blocks here help draft new open rules for everyone —
+                  and get the community's new rules back sooner. Shares only a rule ID and a one-way
+                  hash; <strong>never your prompts, code, files, keys, IP, or hostname</strong>. Off
+                  until you turn it on.
+                </div>
+                <button type="button" class="btn btn-secondary btn-sm" data-goto="tcloud">
+                  Open Threat Cloud &rarr;
+                </button>
+              </div>
+            </div>
           </div>
+
+          <div class="welcome-foot">
+            <button type="button" class="btn btn-primary btn-sm" id="welcome-done">Got it</button>
+            <button type="button" class="welcome-later" id="welcome-later">Dismiss for now</button>
+            <span class="welcome-foot-note">
+              <code>pga</code> commands run in your terminal. Reopen this anytime from the sidebar.
+            </span>
+          </div>
+        </div>
+
+        <!-- One fused posture hero: the single answer to "am I safe right now?".
+             Left = honest state + a plain-English line; right = the posture score
+             with one-click fixes. Starts NEUTRAL (never a static green "Active");
+             setConnState()/updateStatus() drive every element from one source of
+             truth, and a 401 swaps in the unauthenticated screen instead. All IDs
+             the JS drives are preserved (DESIGN.md §2.1: lead with one decision). -->
+        <div class="hero hero-fused" id="posture-card">
+          <div class="hp-main">
+            <div class="hp-state">
+              <span class="live-dot" id="hero-dot"></span>
+              <span class="hero-status" id="hero-status">Connecting…</span>
+              <span class="badge badge-off" id="hero-badge">Connecting…</span>
+            </div>
+            <div class="hp-sub" id="hero-desc">Checking Guard status on this machine…</div>
+            <div class="hp-tagline">
+              PanGuard Community — free, on-device protection for your AI agents.
+            </div>
+          </div>
+          <div class="hp-score">
+            <div class="score-num" id="posture-score">--</div>
+            <div class="score-cap">Posture</div>
+            <div class="score-track"><div class="score-fill" id="posture-bar"></div></div>
+            <div class="score-label" id="posture-label">Checking…</div>
+          </div>
+          <div class="hp-fixes" id="posture-deductions"></div>
         </div>
 
         <!-- 4 KPI cards -->
         <div class="cg">
-          <div class="cd">
+          <div class="cd" title="Total ATR detection rules currently loaded and enforcing on this machine.">
             <div class="cl" data-i18n="k_rules">Rules Active</div>
             <div class="cv sg" id="v-rules">--</div>
           </div>
-          <div class="cd">
+          <div class="cd" title="Threats Guard has detected on this machine.">
             <div class="cl" data-i18n="k_threats">Threats Detected</div>
             <div class="cv sg" id="v-threats">0</div>
           </div>
-          <div class="cd">
-            <div class="cl" data-i18n="k_tc">TC Rules Synced</div>
+          <div
+            class="cd"
+            title="Detection rules pulled from the Threat Cloud network, included in your active rule set."
+          >
+            <div class="cl" data-i18n="k_tc">Threat Cloud rules synced</div>
             <div class="cv sg" id="v-tcsync">0</div>
           </div>
         </div>
@@ -946,12 +1590,15 @@
         <!-- Detection layers status (renamed Tier → Layer A/B/C) -->
         <div class="fs">
           <h3>
-            <span class="dot dot-ok"></span> <span data-i18n="layer_title">Detection Layers</span>
+            <span class="dot dot-ok" id="layers-dot"></span>
+            <span data-i18n="layer_title">Detection Layers</span>
           </h3>
           <div class="desc">
-            Layers A and B are deterministic and always on. Layer C is optional — bring your own
-            LLM (cloud API or local model). It is advisory (flags for review, never auto-blocks)
-            and stays off until you connect one.
+            Layers A and B are deterministic and always on. Layer C is optional — bring your own LLM
+            (cloud API or local model). It is advisory (flags for review, never auto-blocks) and
+            stays off until you connect one. It runs only on events A and B already flagged, not on
+            every action, so cloud use is typically a few cents a month — and a local model (Ollama)
+            is free and keeps everything on your machine.
           </div>
           <div class="layer-row">
             <span class="layer-label">Layer A &mdash; Pattern match (ATR rules)</span>
@@ -964,10 +1611,45 @@
             <span class="layer-status on" id="lb-st">Active</span>
           </div>
           <div class="layer-row">
-            <span class="layer-label">Layer C &mdash; Semantic verdict (optional &middot; advisory)</span>
+            <span class="layer-label"
+              >Layer C &mdash; Semantic verdict (optional &middot; advisory)</span
+            >
             <div class="layer-bar"><div class="layer-fill" id="lc-bar"></div></div>
             <span class="layer-status" id="lc-st">Off &middot; bring your own</span>
           </div>
+          <!-- Layer C call-to-action: a discoverable two-state affordance that
+               replaces the old silent server-filled hint. Not connected -> why +
+               "Set up Layer C" deep-linking to the Settings section. Connected ->
+               a calm confirmation. Driven from status.layers.c.state. -->
+          <div
+            class="lc-cta"
+            id="lc-cta"
+            style="
+              margin-top: 10px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              gap: 12px;
+              flex-wrap: wrap;
+              padding: 10px 12px;
+              background: var(--bg-raised);
+              border: 1px solid var(--border);
+              border-radius: 10px;
+            "
+          >
+            <div
+              class="lc-cta-text"
+              id="lc-cta-text"
+              style="font-size: 12px; color: var(--text-muted); line-height: 1.6; flex: 1; min-width: 220px"
+            >
+              Optional: connect your own LLM for a second opinion on flagged events — catches novel
+              attacks A and B miss. Advisory only: it flags for review, never auto-blocks. Free with a
+              local model, or a few cents a month with a cloud key.
+            </div>
+            <button type="button" class="btn btn-secondary btn-sm" id="lc-cta-btn">
+              Set up Layer C
+            </button>
+          </div>
         </div>
 
         <!-- Uptime counter -->
@@ -1017,69 +1699,43 @@
           "
         >
           <div class="flt">
-            <button
-              class="fb on"
-              data-sev="all"
-              data-i18n="all"
-            >
-              All
-            </button>
-            <button
-              class="fb"
-              data-sev="critical"
-              data-i18n="critical"
-            >
-              Critical
-            </button>
-            <button
-              class="fb"
-              data-sev="high"
-              data-i18n="high"
-            >
-              High
-            </button>
-            <button
-              class="fb"
-              data-sev="medium"
-              data-i18n="medium"
-            >
-              Medium
-            </button>
-            <button class="fb" data-sev="low" data-i18n="low">
-              Low
-            </button>
+            <button class="fb on" data-sev="all" data-i18n="all">All</button>
+            <button class="fb" data-sev="critical" data-i18n="critical">Critical</button>
+            <button class="fb" data-sev="high" data-i18n="high">High</button>
+            <button class="fb" data-sev="medium" data-i18n="medium">Medium</button>
+            <button class="fb" data-sev="low" data-i18n="low">Low</button>
           </div>
           <div style="display: flex; gap: 8px; align-items: center">
             <button
               class="btn btn-secondary btn-sm"
-              data-tier-gate="pilot"
               id="btn-sarif"
-              style="display: none"
+              title="Download a .sarif.json of detected threats (the standard format GitHub and code scanners read). Saved to your computer — nothing is uploaded, and it never includes your source code."
             >
               <span data-i18n="exp_sarif">Export SARIF</span>
             </button>
             <button
               class="btn btn-primary btn-sm"
-              data-tier-gate="pilot"
               id="btn-evidence"
-              style="display: none"
+              title="Download a JSON evidence report of detections (rule IDs, timestamps, severities, matched patterns). Saved to your computer — nothing is uploaded, and it never includes your source code."
             >
               <span data-i18n="exp_evidence">Generate Evidence Pack</span>
             </button>
-            <a
-              class="upsell"
-              data-tier-upsell="pilot"
-              href="https://panguard.ai/pricing"
-              target="_blank"
-              rel="noopener"
-              style="display: none"
-              data-i18n="upsell_pilot"
-            >
-              Upgrade to Pilot &mdash; unlock SARIF + Evidence Pack
-            </a>
           </div>
         </div>
 
+        <div class="pd" style="margin: -6px 0 14px; font-size: 12px">
+          Export your detected threats as a file you can keep or share. SARIF is a standard format
+          GitHub and code scanners read; the Evidence Pack is a self-contained JSON report. Both
+          download to your computer — nothing is uploaded, and neither includes your source code or
+          file contents.
+        </div>
+
+        <!-- Suppression summary (anti alert-fatigue: only high-confidence shown by default) -->
+        <div
+          id="th-summary"
+          style="display: none; font-size: 12px; color: var(--text-secondary); margin: 4px 0 10px"
+        ></div>
+
         <!-- Sortable threat table -->
         <table class="tb">
           <thead>
@@ -1087,6 +1743,7 @@
               <th data-sort="timestamp" class="sortable">Timestamp</th>
               <th data-sort="ruleId" class="sortable">Rule ID</th>
               <th data-sort="severity" class="sortable">Severity</th>
+              <th data-sort="confidence" class="sortable">Confidence</th>
               <th>Matched Pattern</th>
               <th data-sort="action" class="sortable">Action</th>
             </tr>
@@ -1105,10 +1762,28 @@
       <div class="pg" id="p-rules">
         <div class="pt"><em data-i18n="t_ru">Rules</em></div>
         <div class="pd" data-i18n="d_ru">
-          All loaded ATR detection rules. Rules sync hourly from Threat Cloud. Use search and
-          filters to find specific rules.
+          All loaded ATR detection rules. The bundled rule set is checked daily against npm; updates
+          are surfaced below and applied only when you run <code>pga upgrade</code> — rules are the
+          engine's trust root and are never auto-pulled. Use search and filters to find specific
+          rules.
         </div>
 
+        <!-- Rule-update banner: surfaces rule-sync's daily notify-only check.
+             Hidden unless a newer published rule set is available. -->
+        <div
+          id="rule-update-banner"
+          style="
+            display: none;
+            margin: 0 0 16px;
+            padding: 12px 16px;
+            border: 1px solid var(--emerald, #34d399);
+            border-radius: 10px;
+            background: rgba(52, 211, 153, 0.08);
+            font-size: 13px;
+            line-height: 1.6;
+          "
+        ></div>
+
         <div class="cg">
           <div class="cd">
             <div class="cl" data-i18n="ru_total">Total Rules</div>
@@ -1255,18 +1930,105 @@
               <th data-i18n="sk_name">Name</th>
               <th data-i18n="sk_platform">Platform</th>
               <th data-i18n="sk_status">Status</th>
+              <th data-i18n="sk_actions">Actions</th>
             </tr>
           </thead>
           <tbody id="sk-tb"></tbody>
         </table>
+
+        <!-- Quarantined files — see what's quarantined and restore it. The
+             quarantine confirm dialog promises restorability; this honors it.
+             Hidden when nothing is quarantined. -->
+        <div id="qz-section" style="display: none; margin-top: 28px">
+          <div class="st" style="margin-bottom: 12px">Quarantined Files</div>
+          <table class="tb">
+            <thead>
+              <tr>
+                <th>Original path</th>
+                <th>Reason</th>
+                <th>Quarantined</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody id="qz-tb"></tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- ===== Coverage ===== -->
+      <div class="pg" id="p-coverage">
+        <div class="pt"><em>Coverage</em></div>
+        <div class="pd">
+          Which AI agent platforms Guard can see on this machine, and whether each is wired up. A
+          detected-but-not-connected platform is running <strong>unprotected</strong> — connect it
+          with <code>pga init</code>.
+        </div>
+        <div class="cg">
+          <div class="cd">
+            <div class="cl">Detected</div>
+            <div class="cv sg" id="cov-detected">--</div>
+          </div>
+          <div class="cd">
+            <div class="cl">Protected</div>
+            <div class="cv" id="cov-configured" style="color: var(--emerald)">--</div>
+          </div>
+          <div class="cd">
+            <div class="cl">Unprotected</div>
+            <div class="cv" id="cov-unprotected">--</div>
+          </div>
+        </div>
+        <div id="cov-loading" class="empty">
+          <span class="spin"></span> <span>Detecting platforms…</span>
+        </div>
+        <table class="tb" id="cov-table" style="display: none">
+          <thead>
+            <tr>
+              <th>Platform</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody id="cov-tb"></tbody>
+        </table>
+      </div>
+
+      <!-- ===== Runtime ===== -->
+      <div class="pg" id="p-runtime">
+        <div class="pt"><em>Runtime</em></div>
+        <div class="pd">
+          Live decisions from the MCP proxy as your agents call tools. Quiet when healthy — a row
+          appears only on a real evaluation. <strong>allow</strong> = passed,
+          <strong>deny</strong> = blocked on a proven rule, <strong>ask</strong> = flagged for you
+          to decide.
+        </div>
+        <div id="rt-loading" class="empty">
+          <span class="spin"></span> <span>Loading runtime verdicts…</span>
+        </div>
+        <div id="rt-empty" class="empty" style="display: none">
+          No proxy activity yet. Verdicts appear here when the MCP proxy evaluates a tool call.
+        </div>
+        <table class="tb" id="rt-table" style="display: none">
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Outcome</th>
+              <th>Tool / reason</th>
+              <th>Confidence</th>
+            </tr>
+          </thead>
+          <tbody id="rt-tb"></tbody>
+        </table>
       </div>
 
       <!-- ===== PAGE 5: Threat Cloud ===== -->
       <div class="pg" id="p-tcloud">
         <div class="pt"><em data-i18n="t_tc">Threat Cloud</em></div>
         <div class="pd" data-i18n="d_tc">
-          Threat Cloud is PanGuard's anonymous threat intelligence sharing network. Your endpoint
-          can upload anonymized threat patterns and receive updated detection rules in return.
+          Threat Cloud is PanGuard's anonymous threat-intelligence network. It is
+          <strong>off by default — until you turn on Collective Defense below, nothing leaves this
+          machine.</strong> When you do enable it, your endpoint uploads anonymized threat signatures
+          (no code, no file contents). New detection rules ship in the open ATR package — Guard
+          checks once a day and tells you when an upgrade is available. It never auto-pulls rule logic
+          from the network, so a compromised relay can't change what your engine enforces.
         </div>
 
         <div id="tc-loading" class="empty">
@@ -1316,20 +2078,54 @@
 
           <div class="st" data-i18n="tc_flywheel">Flywheel</div>
           <div class="flywheel" id="tc-flywheel">
-            <strong>Your endpoint</strong> detects threats &rarr;
-            <strong>Threat Cloud</strong> aggregates them anonymously &rarr;
-            <strong>Community</strong> rules sync back to every endpoint, hourly.
+            <strong>Your endpoint</strong> detects a threat &rarr;
+            <strong>Threat Cloud</strong> aggregates it anonymously &rarr; it strengthens the open
+            <strong>ATR</strong> ruleset &rarr; you get the improvements through
+            <strong>pga upgrade</strong> (a daily check flags when new rules are out).
           </div>
 
           <div class="fs" style="margin-top: 20px">
-            <h3 data-i18n="tc_upload">Anonymous Upload</h3>
-            <div class="desc" data-i18n="tc_upload_desc">
-              When enabled, anonymized threat patterns are uploaded to Threat Cloud. No personal
-              data, file contents, or source code is sent.
+            <h3>Collective defense</h3>
+            <div class="desc">
+              Off by default. When you turn it on, every attack Guard blocks on this machine can
+              become a new ATR rule that protects everyone — and you get the community's new rules
+              back faster. More sensors means quicker detection for all of us.
+            </div>
+
+            <div class="cd-grid">
+              <div class="cd-box">
+                <div class="cd-box-title cd-good">What turning it on does for you</div>
+                <ul class="cd-list">
+                  <li>Your blocked patterns help draft new open ATR rules.</li>
+                  <li>You receive community rule updates sooner.</li>
+                  <li>You can turn it off again at any time.</li>
+                </ul>
+              </div>
+              <div class="cd-box">
+                <div class="cd-box-title">What is shared (and what is never shared)</div>
+                <ul class="cd-list">
+                  <li>Shared: the matched rule ID, a one-way hash of the payload, and the source type.</li>
+                  <li>Never shared: your prompts, code, file contents, keys, IP address, or hostname.</li>
+                  <li>A random install ID only — raw samples never leave this machine.</li>
+                </ul>
+              </div>
             </div>
-            <div style="display: flex; align-items: center; gap: 12px">
-              <div class="toggle" id="tc-toggle"></div>
-              <span id="tc-toggle-label" style="font-size: 13px; font-weight: 600">--</span>
+
+            <div class="cd-control">
+              <div class="toggle" id="tc-toggle" role="switch" aria-checked="false" tabindex="0"
+                aria-label="Collective defense"></div>
+              <div>
+                <div id="tc-toggle-label" style="font-size: 14px; font-weight: 600">--</div>
+                <div id="tc-toggle-sub" style="font-size: 12px; color: var(--text-muted)"></div>
+              </div>
+            </div>
+
+            <div class="cd-cli">
+              Prefer the command line? This does the same thing:
+              <div class="cmd-box">
+                <code id="tc-cli-cmd">pga config set telemetry true</code>
+                <button class="cmd-copy" data-copy-target="tc-cli-cmd" type="button">Copy</button>
+              </div>
             </div>
           </div>
         </div>
@@ -1343,20 +2139,198 @@
         <div class="fs">
           <h3>Guard Mode</h3>
           <div class="desc">
-            Learning mode builds a baseline of normal activity and only logs. Protection mode
-            actively blocks detected threats. Saving a change restarts detection with the new mode.
+            Three modes. <strong>Learning</strong> builds a baseline and only logs.
+            <strong>Report-only</strong> detects and records everything but never acts (recommended
+            for new deployments). <strong>Protection</strong> actively blocks — but only using the
+            responses armed in your enforcement policy (by default that's nothing destructive: it
+            detects and notifies). Saving applies to new activity right away; it won't interrupt
+            actions already in progress.
           </div>
-          <div style="display: flex; align-items: center; gap: 12px">
-            <div class="toggle" id="st-mode-toggle"></div>
-            <span id="st-mode-label" style="font-size: 13px; font-weight: 600">Learning</span>
+          <div
+            id="st-mode-seg"
+            role="radiogroup"
+            aria-label="Guard mode"
+            style="
+              display: inline-flex;
+              border: 1px solid var(--border, #2e2a27);
+              border-radius: 8px;
+              overflow: hidden;
+            "
+          >
+            <button
+              type="button"
+              class="seg-btn"
+              data-mode="learning"
+              role="radio"
+              aria-checked="false"
+              style="
+                padding: 8px 16px;
+                background: transparent;
+                color: var(--text-muted);
+                border: 0;
+                cursor: pointer;
+                font-size: 13px;
+                font-weight: 600;
+              "
+            >
+              Learning
+            </button>
+            <button
+              type="button"
+              class="seg-btn"
+              data-mode="report-only"
+              role="radio"
+              aria-checked="false"
+              style="
+                padding: 8px 16px;
+                background: transparent;
+                color: var(--text-muted);
+                border: 0;
+                border-left: 1px solid var(--border, #2e2a27);
+                cursor: pointer;
+                font-size: 13px;
+                font-weight: 600;
+              "
+            >
+              Report-only
+            </button>
+            <button
+              type="button"
+              class="seg-btn"
+              data-mode="protection"
+              role="radio"
+              aria-checked="false"
+              style="
+                padding: 8px 16px;
+                background: transparent;
+                color: var(--text-muted);
+                border: 0;
+                border-left: 1px solid var(--border, #2e2a27);
+                cursor: pointer;
+                font-size: 13px;
+                font-weight: 600;
+              "
+            >
+              Protection
+            </button>
+          </div>
+          <div
+            id="st-mode-desc"
+            style="margin-top: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.6"
+          ></div>
+        </div>
+
+        <!-- ===== Semantic layer (Layer C) — optional advisory LLM =====
+             The headline "how do I connect a model" surface. Self-contained (does
+             NOT depend on a server string). No key field by design — the key is
+             entered only in the terminal via `pga guard ai`. -->
+        <div class="fs" id="p-settings-layerc">
+          <h3>
+            <span class="dot dot-off" id="lc-set-dot"></span>
+            Semantic layer (Layer C)
+            <span
+              id="lc-set-state"
+              style="margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted)"
+              >Off · optional</span
+            >
+          </h3>
+          <div class="desc">
+            An optional second opinion. Layers A and B (the always-on ATR pattern rules and
+            heuristics) do the blocking. Layer C adds your own LLM to read flagged events in plain
+            language and catch novel attacks the deterministic layers miss. It is
+            <strong>advisory only</strong> — it flags events for your review and
+            <strong>can never block on its own</strong>. It runs only on events A or B already
+            flagged, not on every action, so a cloud model typically costs a few cents a month, and a
+            local model is free.
+          </div>
+
+          <div class="cd-grid">
+            <div class="cd-box">
+              <div class="cd-box-title cd-good">Path 1 — Local model (free &amp; fully private)</div>
+              <ul class="cd-list">
+                <li>Runs a model on this machine with Ollama.</li>
+                <li>No API key, no cost — nothing leaves your computer.</li>
+                <li>Best if you want maximum privacy.</li>
+              </ul>
+            </div>
+            <div class="cd-box">
+              <div class="cd-box-title">Path 2 — Cloud model (bring your own key)</div>
+              <ul class="cd-list">
+                <li>Use an OpenAI or Anthropic key you already have.</li>
+                <li>Typically a few cents a month (flagged events only).</li>
+                <li>Your key is sent only to that provider — never to PanGuard.</li>
+              </ul>
+            </div>
+          </div>
+
+          <div style="margin-top: 14px">
+            <div style="font-size: 13px; font-weight: 600; margin-bottom: 6px">How to connect</div>
+            <div class="desc" style="margin-bottom: 8px">
+              Run this one command in your terminal. It walks you through picking a model and, for a
+              cloud model, prompts for your key privately.
+              <strong>You never type the key into this dashboard.</strong>
+            </div>
+            <div class="cmd-box">
+              <code id="lc-cmd">pga guard ai</code>
+              <button class="cmd-copy" type="button" data-copy-target="lc-cmd">Copy</button>
+            </div>
+            <div class="desc" style="margin-top: 8px">
+              When it finishes, restart Guard with
+              <code>pga guard restart</code> — this panel will then show Layer C as connected.
+            </div>
+          </div>
+
+          <details style="margin-top: 14px">
+            <summary class="notify-summary">How your API key is protected</summary>
+            <ul class="cd-list" style="margin-top: 10px; padding-left: 18px">
+              <li>
+                <strong>Typed privately in the terminal.</strong> The key is read with the screen
+                echo off, so it never shows on screen, never lands in your shell history, and is never
+                passed as a command argument.
+              </li>
+              <li>
+                <strong>Never entered in the browser.</strong> This dashboard deliberately has no
+                field for your key — a localhost web page is a weaker place to handle a secret than
+                your terminal.
+              </li>
+              <li>
+                <strong>Encrypted at rest.</strong> Stored at
+                <code>~/.panguard/llm.enc</code> with AES-256-GCM, file permissions
+                <code>0600</code> (only you can read it).
+              </li>
+              <li>
+                <strong>Locked to this machine.</strong> The encryption key is derived from this
+                machine and user, so a copied file is useless anywhere else.
+              </li>
+              <li>
+                <strong>Sent only to your provider.</strong> Your key goes only to the model provider
+                you chose. It is never sent to PanGuard.
+              </li>
+            </ul>
+          </details>
+
+          <div style="margin-top: 14px">
+            <div style="font-size: 13px; font-weight: 600; margin-bottom: 6px">
+              Turn it off / remove your key
+            </div>
+            <div class="desc" style="margin-bottom: 8px">
+              Turns Layer C off and deletes the stored config (including any key) from this machine.
+            </div>
+            <div class="cmd-box">
+              <code id="lc-cmd-remove">pga guard ai --remove</code>
+              <button class="cmd-copy" type="button" data-copy-target="lc-cmd-remove">Copy</button>
+            </div>
           </div>
         </div>
 
         <div class="fs">
           <h3 data-i18n="st_tc">Threat Cloud Endpoint</h3>
           <div class="desc" data-i18n="st_tc_desc">
-            URL of the Threat Cloud relay. Leave empty for the default panguard.ai endpoint, or
-            specify your own air-gapped relay.
+            The server Guard talks to for Threat Cloud. <strong>Most people should leave this
+            blank</strong> — Guard uses the default (tc.panguard.ai). Change it only if you run your
+            own private or air-gapped relay: when Collective Defense is on, anonymized signatures and
+            the daily rule-update check go to whatever URL is set here. Your prompts, code, and keys
+            are never sent regardless.
           </div>
           <div class="fr">
             <label data-i18n="st_endpoint">Endpoint</label>
@@ -1376,20 +2350,58 @@
           </div>
         </div>
 
+        <div class="fs">
+          <h3>Alerts</h3>
+          <div class="info-box" style="border-left: 3px solid var(--ok); margin-bottom: 14px">
+            <strong>You are already set up.</strong> Every threat Guard detects shows up right here
+            in this dashboard — on the Overview and Threats tabs. No configuration needed.
+          </div>
+
+          <details id="notify-details">
+            <summary class="notify-summary">Send alerts somewhere else too? (optional)</summary>
+            <div class="desc" style="margin-top: 10px">
+              You can also push each alert to a chat or inbox you already watch. Pick one below,
+              paste its line into <code>~/.panguard-guard/config.json</code> (or run
+              <code>pga setup</code> for a guided walk-through), then restart Guard. Secrets are
+              typed into that file, never into this dashboard. Heads-up: any channel you add sends
+              alert summaries to that service (Slack's servers, your email provider, or your webhook
+              URL). Alerts always stay visible here regardless.
+            </div>
+            <div id="st-notify-list" style="display: flex; flex-direction: column; gap: 10px"></div>
+          </details>
+        </div>
+
+        <div class="fs">
+          <h3>
+            Enforcement Policy
+            <span style="font-weight: 400; color: var(--text-muted); font-size: 12px"
+              >&mdash; what Protection mode is allowed to do</span
+            >
+          </h3>
+          <div class="desc">
+            This list is <strong>read-only here</strong> — an "armed" response only runs
+            automatically when Guard Mode is set to Protection; in Learning or Report-only nothing
+            automatic happens. To change what's armed, edit
+            <code>enforcementPolicy</code> in <code>~/.panguard-guard/config.json</code> (or run
+            <code>pga setup</code>) and restart Guard.
+          </div>
+          <div
+            id="st-enforce-list"
+            style="display: flex; flex-direction: column; gap: 6px; font-size: 13px"
+          ></div>
+        </div>
 
         <div style="display: flex; gap: 10px; margin-top: 8px">
           <button class="btn btn-primary" id="btn-save">Save</button>
-          <button class="btn btn-secondary" id="btn-reload">
-            Reload
-          </button>
+          <button class="btn btn-secondary" id="btn-reload">Reload</button>
         </div>
 
         <div class="info-box" style="margin-top: 20px">
           <strong data-i18n="st_license">License Tier:</strong> <span id="st-tier-display">--</span
           ><br />
           <span data-i18n="st_license_desc"
-            >Community is free and unlimited. Pilot unlocks SARIF + Evidence Pack export and
-            priority Threat Cloud routing.</span
+            >Community is free and unlimited — including SARIF and Evidence Pack export. No features
+            are locked.</span
           >
           <br /><br />
           <a
@@ -1398,7 +2410,7 @@
             rel="noopener"
             style="color: var(--sage)"
             data-i18n="st_license_link"
-            >View pricing &rarr;</a
+            >Compare editions &rarr;</a
           >
         </div>
       </div>
@@ -1411,12 +2423,14 @@
       /*  i18n strings (EN / ZH)                                       */
       /* ============================================================ */
 
-
       var currentSevFilter = 'all';
       var currentSort = { col: 'timestamp', dir: 'desc' };
       var allThreats = [];
       var allRules = [];
+      var skillsData = [];
       var licenseTier = 'community';
+      var SUPPRESS_THRESHOLD = 50;
+      var showSuppressed = false;
 
       /* ============================================================ */
       /*  Utilities                                                    */
@@ -1429,6 +2443,28 @@
           .replace(/"/g, '&quot;')
           .replace(/'/g, '&#039;');
       }
+      /* Copy a command to the clipboard. Falls back to a manual-select prompt
+         when the async clipboard API is unavailable (older browsers / non-secure
+         contexts). The button briefly confirms so the user knows it worked. */
+      function copyText(text, btn) {
+        function ok() {
+          if (!btn) return;
+          var prev = btn.textContent;
+          btn.textContent = 'Copied';
+          btn.classList.add('copied');
+          setTimeout(function () {
+            btn.textContent = prev;
+            btn.classList.remove('copied');
+          }, 1500);
+        }
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(text).then(ok, function () {
+            window.prompt('Copy this command:', text);
+          });
+        } else {
+          window.prompt('Copy this command:', text);
+        }
+      }
       function fmtUptime(ms) {
         var s = Math.floor(ms / 1000);
         if (s < 60) return s + 's';
@@ -1454,10 +2490,70 @@
           if (r.status === 401) {
             var wl = document.getElementById('wl');
             if (wl) wl.textContent = 'Invalid token';
+            // An unauthenticated visit (bare URL, expired/cleared cookie, wrong
+            // token) used to silently no-op and leave a static green "Active"
+            // badge — a dead end with no path forward. Render an explicit screen
+            // that tells the user exactly how to get an authenticated URL.
+            showUnauthenticated();
           }
           return r;
         });
       }
+      /* Explicit unauthenticated state: the cookie that authorizes /api/* is
+         minted only by opening the launch URL `pga up` prints. A bare visit has
+         no cookie, so every /api/* call 401s. Instead of a fake-green dead end,
+         show how to get an authenticated URL and neutralize the hero badge. */
+      var _unauthShown = false;
+      function showUnauthenticated() {
+        if (_unauthShown) return;
+        _unauthShown = true;
+        // Neutralize the hero so it never reads green while unauthenticated.
+        var hs = document.getElementById('hero-status');
+        var hd = document.getElementById('hero-dot');
+        var hb = document.getElementById('hero-badge');
+        if (hs) {
+          hs.textContent = 'NOT AUTHENTICATED';
+          hs.style.color = 'var(--warn)';
+        }
+        if (hd) hd.style.background = 'var(--warn)';
+        if (hb) {
+          hb.textContent = 'Not authenticated';
+          hb.className = 'badge badge-off';
+          hb.title = 'Open the launch URL from `pga up` to authenticate this dashboard.';
+        }
+        var ov = document.getElementById('unauth-overlay');
+        if (ov) {
+          ov.style.display = 'flex';
+          return;
+        }
+        ov = document.createElement('div');
+        ov.id = 'unauth-overlay';
+        ov.style.cssText =
+          'position:fixed;inset:0;z-index:9999;display:flex;align-items:center;' +
+          'justify-content:center;background:rgba(11,13,16,0.92);padding:24px';
+        ov.innerHTML =
+          '<div style="max-width:460px;background:var(--surface-2,#1b1f24);' +
+          'border:1px solid var(--border,#2a2f36);border-radius:12px;padding:28px;' +
+          'text-align:left;color:var(--text,#e6e8eb)">' +
+          '<div style="font-size:16px;font-weight:600;margin-bottom:10px">' +
+          'This dashboard is not authenticated</div>' +
+          '<div style="font-size:13px;color:var(--text-muted,#9aa1a9);line-height:1.6;margin-bottom:16px">' +
+          'For your security, the dashboard only accepts requests carrying a ' +
+          'one-time launch token. Opening this URL directly does not include it, ' +
+          'so live status and controls are unavailable.</div>' +
+          '<div style="font-size:13px;color:var(--text,#e6e8eb);margin-bottom:8px">' +
+          'To get an authenticated URL, run:</div>' +
+          '<div style="background:var(--surface-3,#0f1216);border-radius:8px;padding:12px 14px;' +
+          'font-family:ui-monospace,monospace;font-size:13px;color:var(--emerald,#34d399)">' +
+          'pga up</div>' +
+          '<div style="font-size:12px;color:var(--text-muted,#9aa1a9);line-height:1.6;margin-top:14px">' +
+          'It prints a link like ' +
+          '<code>http://127.0.0.1:&lt;port&gt;/?token=&hellip;</code> — open that ' +
+          'link to authenticate. If Guard is already running, re-run ' +
+          '<code>pga up</code> to reprint the authenticated link.</div>' +
+          '</div>';
+        document.body.appendChild(ov);
+      }
 
       /* ============================================================ */
       /*  i18n + language toggle                                       */
@@ -1496,6 +2592,12 @@
         if (tab === 'settings') {
           loadSettings();
         }
+        if (tab === 'coverage') {
+          loadCoverage();
+        }
+        if (tab === 'runtime') {
+          loadRuntime();
+        }
       }
       document.querySelectorAll('.ni').forEach(function (n) {
         n.addEventListener('click', function () {
@@ -1504,20 +2606,15 @@
       });
 
       /* ============================================================ */
-      /*  License tier gating                                          */
+      /*  License tier label (no feature gating — everything is free)  */
       /* ============================================================ */
       function applyTierGates(status) {
         var tier = (status && status.license && status.license.tier) || 'community';
         licenseTier = tier;
-        var isPaid = tier === 'pilot' || tier === 'enterprise' || tier === 'pro';
-        document.querySelectorAll('[data-tier-gate="pilot"]').forEach(function (el) {
-          el.style.display = isPaid ? 'inline-flex' : 'none';
-        });
-        document.querySelectorAll('[data-tier-upsell="pilot"]').forEach(function (el) {
-          el.style.display = isPaid ? 'none' : 'inline-flex';
-        });
         var badge = document.getElementById('lic-badge');
         if (badge) badge.textContent = tier.toUpperCase();
+        var brandTier = document.getElementById('brand-tier');
+        if (brandTier) brandTier.textContent = tier.charAt(0).toUpperCase() + tier.slice(1);
         var dispTier = document.getElementById('st-tier-display');
         if (dispTier) dispTier.textContent = tier;
       }
@@ -1525,15 +2622,143 @@
       /* ============================================================ */
       /*  WebSocket                                                    */
       /* ============================================================ */
+      /* ----------------------------------------------------------------
+         Connection state — ONE source of truth for "is Guard up?".
+         Drives pbar + hero + posture + footer together so they never
+         disagree. 'down' (Guard unreachable) is distinct from the 401
+         unauthenticated screen and surfaces the start-it guidance. The
+         old code left a stale green "CONNECTING…" forever when Guard was
+         simply not running; this collapses that into one honest answer.
+         ---------------------------------------------------------------- */
+      var _connState = '';
+      var _connectTimer = null;
+      var _downGrace = null;
+      function markConnLive() {
+        _connState = 'live';
+        if (_connectTimer) {
+          clearTimeout(_connectTimer);
+          _connectTimer = null;
+        }
+        if (_downGrace) {
+          clearTimeout(_downGrace);
+          _downGrace = null;
+        }
+        var b = document.getElementById('conn-banner');
+        if (b) b.style.display = 'none';
+        var wl = document.getElementById('wl');
+        var wd = document.getElementById('wd');
+        if (wl && wl.textContent !== 'Invalid token') wl.textContent = 'Connected';
+        if (wd) wd.classList.add('on');
+      }
+      // When Guard is unreachable we cannot claim any layer is "Active" — the
+      // HTML defaults to Active and renderLayers() only runs on live status, so
+      // neutralize the layer rows to avoid a residual false-green.
+      function setLayersUnknown() {
+        ['la', 'lb', 'lc'].forEach(function (k) {
+          var bar = document.getElementById(k + '-bar');
+          var st = document.getElementById(k + '-st');
+          if (bar) bar.className = 'layer-fill off';
+          if (st) {
+            st.textContent = '—';
+            st.className = 'layer-status off';
+          }
+        });
+        var ld = document.getElementById('layers-dot');
+        if (ld) ld.style.background = 'var(--text-muted)';
+      }
+      function setConnState(state) {
+        if (state === 'live') {
+          markConnLive();
+          return;
+        }
+        if (state === _connState) return;
+        _connState = state;
+        setLayersUnknown();
+        var dot = document.getElementById('pb-dot');
+        var txt = document.getElementById('pb-txt');
+        var det = document.getElementById('pb-detail');
+        var hs = document.getElementById('hero-status');
+        var hd = document.getElementById('hero-dot');
+        var hb = document.getElementById('hero-badge');
+        var hdsc = document.getElementById('hero-desc');
+        var sc = document.getElementById('posture-score');
+        var pl = document.getElementById('posture-label');
+        var pbar = document.getElementById('posture-bar');
+        var banner = document.getElementById('conn-banner');
+        var wl = document.getElementById('wl');
+        var wd = document.getElementById('wd');
+        if (state === 'connecting') {
+          if (dot) dot.className = 'pb-dot warn';
+          if (txt) txt.textContent = 'Connecting…';
+          if (hs) {
+            hs.textContent = 'Connecting…';
+            hs.style.color = 'var(--text-muted)';
+          }
+          if (hd) hd.style.background = 'var(--text-muted)';
+          if (hb) {
+            hb.textContent = 'Connecting…';
+            hb.className = 'badge badge-off';
+          }
+          if (hdsc) hdsc.textContent = 'Checking Guard status on this machine…';
+          if (banner) banner.style.display = 'none';
+          if (wl && wl.textContent !== 'Invalid token') wl.textContent = 'Connecting…';
+          if (wd) wd.classList.remove('on');
+        } else if (state === 'down') {
+          if (dot) dot.className = 'pb-dot bad';
+          if (txt) txt.textContent = 'GUARD NOT RUNNING';
+          if (det) det.textContent = '| start Guard to resume protection';
+          if (hs) {
+            hs.textContent = 'GUARD NOT RUNNING';
+            hs.style.color = 'var(--danger)';
+          }
+          if (hd) hd.style.background = 'var(--danger)';
+          if (hb) {
+            hb.textContent = 'Not running';
+            hb.className = 'badge badge-off';
+          }
+          if (hdsc)
+            hdsc.textContent =
+              'PanGuard Guard is not running on this machine, so your agents are not ' +
+              'being watched right now.';
+          if (sc) {
+            sc.textContent = '--';
+            sc.style.color = 'var(--danger)';
+          }
+          if (pl) pl.textContent = 'Guard isn’t running';
+          if (pbar) pbar.style.width = '0';
+          if (banner) banner.style.display = 'flex';
+          if (wl && wl.textContent !== 'Invalid token') wl.textContent = 'Not running';
+          if (wd) wd.classList.remove('on');
+        }
+      }
+
       function connectWS() {
         var ws = new WebSocket('ws://' + location.host + '/ws');
         ws.onopen = function () {
-          document.getElementById('wd').classList.add('on');
-          document.getElementById('wl').textContent = 'Connected';
+          if (_downGrace) {
+            clearTimeout(_downGrace);
+            _downGrace = null;
+          }
+          var wd = document.getElementById('wd');
+          var wl = document.getElementById('wl');
+          if (wd) wd.classList.add('on');
+          if (wl && wl.textContent !== 'Invalid token' && _connState !== 'down')
+            wl.textContent = 'Connected';
         };
         ws.onclose = function () {
-          document.getElementById('wd').classList.remove('on');
-          document.getElementById('wl').textContent = 'Disconnected';
+          var wd = document.getElementById('wd');
+          if (wd) wd.classList.remove('on');
+          // If we were live, give a short grace for an immediate reconnect before
+          // declaring Guard down — avoids flashing the banner on transient blips.
+          if (_connState === 'live') {
+            var wl = document.getElementById('wl');
+            if (wl && wl.textContent !== 'Invalid token') wl.textContent = 'Reconnecting…';
+            if (!_downGrace) {
+              _downGrace = setTimeout(function () {
+                if (_connState !== 'live') setConnState('down');
+              }, 4000);
+            }
+          }
           setTimeout(connectWS, 3000);
         };
         ws.onmessage = function (e) {
@@ -1563,6 +2788,13 @@
       }
       function updateStatus(s) {
         if (!s) return;
+        markConnLive();
+        // First-run welcome: only ever after a confirmed live+authenticated status,
+        // so it can never appear over the "Guard not running" banner or 401 overlay.
+        if (!_welcomeChecked) {
+          _welcomeChecked = true;
+          maybeShowWelcome();
+        }
         setKPI('v-rules', (s.atrRuleCount || 0).toLocaleString());
         var th = s.threatsDetected || 0;
         setKPI('v-threats', th);
@@ -1572,34 +2804,327 @@
         setKPI('v-events', (s.eventsProcessed || 0).toLocaleString());
         setKPI('v-mode', s.mode || '--');
 
+        // Honest posture label: PROTECTED only when the daemon will actually ACT
+        // (protection mode + an armed response). 'protection' mode with no armed
+        // OS response is MONITORING (detect + notify), not green PROTECTED.
+        var p = postureView(s);
         var hs = document.getElementById('hero-status');
         var hd = document.getElementById('hero-dot');
         var hb = document.getElementById('hero-badge');
         if (hs) {
-          hs.textContent = s.mode === 'protection' ? 'PROTECTED' : 'LEARNING';
-          hs.style.color = s.mode === 'protection' ? 'var(--ok)' : 'var(--warn)';
+          hs.textContent = p.label;
+          hs.style.color = p.color;
+          hs.title = p.detail;
         }
-        if (hd) hd.style.background = s.mode === 'protection' ? 'var(--ok)' : 'var(--warn)';
+        if (hd) hd.style.background = p.color;
         if (hb) {
-          hb.textContent = s.mode === 'protection' ? 'PROTECTED' : 'LEARNING';
-          hb.className =
-            'badge ' + (s.mode === 'protection' ? 'badge-protected' : 'badge-learning');
+          hb.textContent = p.label;
+          hb.className = 'badge ' + p.badge;
+          hb.title = p.detail;
         }
+        var hdsc = document.getElementById('hero-desc');
+        if (hdsc && p.sub) hdsc.textContent = p.sub;
         updatePBar(s);
+        renderLayers(s.layers);
+        _lastStatus = s;
+        renderPosture(s);
         applyTierGates(s);
       }
+      /* Posture score — one honest number from real local state, with each
+         deduction offering a one-click jump to fix it. Formula (founder-set
+         default): start 100; −min(threats*8,40) unresolved threats; −30 if the
+         deterministic engine isn't actually running rules; −min(unprotected*5,20)
+         detected-but-unconnected agent platforms. The optional semantic layer
+         being off is NOT penalized — it is opt-in by design. */
+      var _lastStatus = null;
+      var _agentUnprotected = 0;
+      function renderPosture(s) {
+        if (!s) return;
+        var score = 100;
+        var ded = [];
+        var threats = s.threatsDetected || 0;
+        if (threats > 0) {
+          var pt = Math.min(threats * 8, 40);
+          score -= pt;
+          ded.push({
+            label: threats + ' unresolved threat' + (threats > 1 ? 's' : ''),
+            pts: pt,
+            goto: 'threats',
+            btn: 'Review',
+          });
+        }
+        var la = s.layers && s.layers.a;
+        if (la && la.state !== 'active') {
+          score -= 30;
+          ded.push({
+            label: 'Detection engine: ' + (la.detail || 'not running'),
+            pts: 30,
+            goto: 'rules',
+            btn: 'Inspect',
+          });
+        }
+        if (_agentUnprotected > 0) {
+          var pa = Math.min(_agentUnprotected * 5, 20);
+          score -= pa;
+          ded.push({
+            label:
+              _agentUnprotected +
+              ' agent platform' +
+              (_agentUnprotected > 1 ? 's' : '') +
+              ' unprotected',
+            pts: pa,
+            goto: 'coverage',
+            btn: 'Connect',
+          });
+        }
+        // Honesty: 'protection' mode that arms NO automatic response is detect-and-
+        // notify, not prevention. Don't let the score read 'Strong' while the daemon
+        // would take no action. (report-only / learning make no such claim → no penalty.)
+        if (s.enforcement && s.enforcement.mode === 'protection' && !s.enforcement.osActionsArmed) {
+          score -= 10;
+          ded.push({
+            label: 'Protection mode on, but no automatic response is armed',
+            pts: 10,
+            goto: 'settings',
+            btn: 'Configure',
+          });
+        }
+        score = Math.max(0, score);
+        var color = score >= 85 ? 'var(--emerald)' : score >= 60 ? 'var(--warn)' : 'var(--danger)';
+        var label =
+          score >= 85
+            ? 'Strong — nothing needs your attention'
+            : score >= 60
+              ? 'Fair — a few things to address'
+              : 'At risk — action needed';
+        var sc = document.getElementById('posture-score');
+        if (sc) {
+          sc.textContent = score;
+          sc.style.color = color;
+          sc.title =
+            'Starts at 100. Points come off for unresolved threats, a detection engine that ' +
+            'isn’t running, and agent platforms you haven’t connected. The optional semantic ' +
+            'layer (Layer C) being off never lowers your score — it’s opt-in by design.';
+        }
+        var bar = document.getElementById('posture-bar');
+        if (bar) {
+          bar.style.width = score + '%';
+          bar.style.background = color;
+        }
+        var lb = document.getElementById('posture-label');
+        if (lb) lb.textContent = label;
+        var dd = document.getElementById('posture-deductions');
+        if (dd) {
+          if (!ded.length) {
+            dd.innerHTML =
+              '<div style="font-size:12px;color:var(--text-muted)">Nothing needs your ' +
+              'attention right now.</div>';
+          } else {
+            dd.innerHTML = '';
+            ded.forEach(function (d) {
+              var row = document.createElement('div');
+              row.style.cssText =
+                'display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px';
+              row.innerHTML =
+                '<span>' +
+                esc(d.label) +
+                ' <span style="color:var(--danger)">&minus;' +
+                d.pts +
+                '</span></span>' +
+                '<button type="button" class="btn btn-secondary btn-sm" data-goto="' +
+                d.goto +
+                '">' +
+                esc(d.btn) +
+                '</button>';
+              dd.appendChild(row);
+            });
+          }
+        }
+      }
+      /* Pull the unprotected-platform count for the posture score (Coverage data). */
+      function refreshPostureAgents() {
+        af('/api/agents')
+          .then(function (r) {
+            return r.json();
+          })
+          .then(function (d) {
+            _agentUnprotected = Math.max(0, (d.detected || 0) - (d.configured || 0));
+            if (_lastStatus) renderPosture(_lastStatus);
+          })
+          .catch(function () {
+            /* leave at 0 */
+          });
+      }
+      /* Real per-layer health from the server (never hard-coded green). The
+         server reports state per layer; Layer A goes red 'Degraded' if zero
+         rules are loaded, and Layer C shows the BYO-LLM guidance inline. */
+      function renderLayers(L) {
+        if (!L) return;
+        // Live status arrived: restore the section dot (cleared to neutral while
+        // Guard was unreachable) so it reflects real per-layer health again.
+        var ld = document.getElementById('layers-dot');
+        if (ld) ld.style.background = '';
+        var map = { a: 'la', b: 'lb', c: 'lc' };
+        Object.keys(map).forEach(function (k) {
+          var ly = L[k];
+          if (!ly) return;
+          var active = ly.state === 'active';
+          var color =
+            ly.state === 'active'
+              ? 'var(--ok)'
+              : ly.state === 'degraded'
+                ? 'var(--danger)'
+                : ly.state === 'idle'
+                  ? 'var(--warn)'
+                  : 'var(--text-muted)';
+          var label = active
+            ? 'Active'
+            : ly.state === 'degraded'
+              ? 'Degraded'
+              : ly.state === 'idle'
+                ? 'Idle'
+                : ly.optional
+                  ? 'Off · bring your own'
+                  : 'Off';
+          var st = document.getElementById(map[k] + '-st');
+          var bar = document.getElementById(map[k] + '-bar');
+          if (st) {
+            st.textContent = label;
+            st.style.color = color;
+            if (ly.detail) st.title = ly.detail;
+          }
+          if (bar) bar.className = 'layer-fill' + (active ? ' on' : '');
+        });
+        // Layer C call-to-action: a real two-state affordance (not a server-filled
+        // hint). Not connected -> why + "Set up Layer C"; connected -> calm note.
+        var cOn = L.c && L.c.state === 'active';
+        var ctaText = document.getElementById('lc-cta-text');
+        var ctaBtn = document.getElementById('lc-cta-btn');
+        if (ctaText && ctaBtn) {
+          if (cOn) {
+            ctaText.textContent =
+              'Layer C is connected and adding an advisory second opinion on flagged events. ' +
+              'It never blocks on its own.';
+            ctaBtn.textContent = 'Manage Layer C';
+          } else {
+            ctaText.textContent =
+              'Optional: connect your own LLM for a second opinion on flagged events — catches ' +
+              'novel attacks A and B miss. Advisory only: it flags for review, never auto-blocks. ' +
+              'Free with a local model, or a few cents a month with a cloud key.';
+            ctaBtn.textContent = 'Set up Layer C';
+          }
+        }
+        renderLayerCSettings(L);
+      }
+      /* Reflect Layer C connected/off state in the Settings section header. Defaults
+         to Off in markup so it never reads green before real status loads. */
+      function renderLayerCSettings(L) {
+        var on = L && L.c && L.c.state === 'active';
+        var dot = document.getElementById('lc-set-dot');
+        var st = document.getElementById('lc-set-state');
+        if (dot) dot.className = 'dot ' + (on ? 'dot-ok' : 'dot-off');
+        if (st) {
+          st.textContent = on ? 'Connected · advisory' : 'Off · optional';
+          st.style.color = on ? 'var(--ok)' : 'var(--text-muted)';
+        }
+      }
+
+      /* ----------------------------------------------------------------
+         First-run welcome guide. Shown once on the first LIVE authenticated
+         status (called from updateStatus, after markConnLive), gated by a
+         localStorage flag so it never nags and never paints over the down/
+         unauth states. "Got it"/X persist; "Dismiss for now" returns next
+         launch; the sidebar link reopens it.
+         ---------------------------------------------------------------- */
+      var _welcomeChecked = false;
+      function maybeShowWelcome() {
+        try {
+          if (localStorage.getItem('pg.welcome.dismissed') === '1') return;
+        } catch (e) {
+          /* private mode: fall through and show once for this page load */
+        }
+        var w = document.getElementById('welcome-guide');
+        if (w) w.style.display = '';
+      }
+      function hideWelcome(persist) {
+        var w = document.getElementById('welcome-guide');
+        if (w) w.style.display = 'none';
+        if (persist) {
+          try {
+            localStorage.setItem('pg.welcome.dismissed', '1');
+          } catch (e) {
+            /* ignore */
+          }
+        }
+      }
+      function reopenWelcome() {
+        try {
+          localStorage.removeItem('pg.welcome.dismissed');
+        } catch (e) {
+          /* ignore */
+        }
+        nav('overview');
+        var w = document.getElementById('welcome-guide');
+        if (w) w.style.display = '';
+      }
+      /* Map the server's honest enforcement posture to a label/color. PROTECTED
+         (emerald) ONLY when the daemon will actually act; 'protection' mode with
+         no armed response → MONITORING (amber), not a green over-claim. */
+      function postureView(s) {
+        var enf = s.enforcement || {
+          posture: s.mode === 'protection' ? 'protected' : s.mode || 'learning',
+          armedActions: [],
+        };
+        var MAP = {
+          protected: {
+            label: 'PROTECTED',
+            color: 'var(--emerald)',
+            badge: 'badge-protected',
+            detail: 'Detecting and auto-responding (' + (enf.armedActions || []).join(', ') + ')',
+            sub: 'Your AI agents are protected. Threats are detected and blocked automatically.',
+          },
+          monitoring: {
+            label: 'MONITORING',
+            color: 'var(--warn)',
+            badge: 'badge-learning',
+            detail:
+              'Detecting + notifying. No automatic OS response is armed — arm it under ' +
+              'enforcementPolicy in config to auto-act.',
+            sub: 'Watching every action and alerting you. No automatic blocking is armed yet.',
+          },
+          'report-only': {
+            label: 'REPORT-ONLY',
+            color: 'var(--sage)',
+            badge: 'badge-learning',
+            detail: 'Recording detections only; takes no action by design.',
+            sub: 'Recording detections for your review. Guard takes no action by design.',
+          },
+          learning: {
+            label: 'LEARNING',
+            color: 'var(--warn)',
+            badge: 'badge-learning',
+            detail: 'Building a baseline of normal activity; logging only.',
+            sub: 'Learning what normal looks like on your machine. Logging only for now.',
+          },
+          off: {
+            label: 'OFFLINE',
+            color: 'var(--danger)',
+            badge: 'badge-learning',
+            detail: 'Guard is not running.',
+            sub: 'Guard is not running, so your agents are not being watched.',
+          },
+        };
+        return MAP[enf.posture] || MAP.learning;
+      }
       function updatePBar(s) {
         var dot = document.getElementById('pb-dot');
         var txt = document.getElementById('pb-txt');
         var det = document.getElementById('pb-detail');
         if (!dot || !txt || !det) return;
-        var running = s.mode === 'protection' || s.mode === 'learning';
+        var running = s.mode === 'protection' || s.mode === 'learning' || s.mode === 'report-only';
+        var p = postureView(s);
         dot.className = 'pb-dot ' + (running ? 'ok' : 'bad');
-        txt.textContent = running
-          ? s.mode === 'protection'
-            ? 'PROTECTED'
-            : 'LEARNING'
-          : 'OFFLINE';
+        txt.textContent = running ? p.label : 'OFFLINE';
         var rules = s.atrRuleCount || 0;
         det.textContent =
           '| ' +
@@ -1614,21 +3139,37 @@
         if (emp) emp.style.display = 'none';
         var log = document.getElementById('ev-log');
         if (log) log.style.display = '';
-        var d = document.createElement('div');
-        var sev = (m.data && (m.data.severity || m.data.conclusion)) || 'benign';
-        d.className = 'ei ' + sev;
+        var data = (m && m.data) || {};
+        var sev = String(data.severity || data.conclusion || 'benign').toLowerCase();
         var t = m.timestamp ? m.timestamp.split('T')[1].split('.')[0] : '--:--:--';
-        d.innerHTML =
-          '<span class="ei-t">' +
-          t +
-          '</span>' +
-          '<span class="ei-y">' +
-          esc(m.type || '') +
+        // Plain-English summary instead of a raw JSON dump — a solo dev scans
+        // these. Prefer a human label; fall back to rule id / event type.
+        var title =
+          data.ruleName ||
+          data.message ||
+          data.ruleId ||
+          (m.type === 'new_verdict' ? 'Action reviewed' : 'Event detected');
+        var bits = [];
+        if (data.action) bits.push(String(data.action));
+        if (data.tool) bits.push(String(data.tool));
+        if (data.matchedPattern) bits.push('matched ' + String(data.matchedPattern).slice(0, 56));
+        var card = document.createElement('div');
+        card.className = 'ev-card ' + sev;
+        card.innerHTML =
+          '<span class="ev-sev"></span>' +
+          '<div class="ev-body">' +
+          '<div class="ev-title">' +
+          esc(String(title).slice(0, 140)) +
+          '</div>' +
+          (bits.length ? '<div class="ev-meta">' + esc(bits.join(' · ')) + '</div>' : '') +
+          '</div>' +
+          '<span class="ev-sevtag">' +
+          esc(sev) +
           '</span>' +
-          '<span class="ei-d">' +
-          esc(JSON.stringify(m.data || {}).slice(0, 200)) +
+          '<span class="ev-time">' +
+          t +
           '</span>';
-        log.prepend(d);
+        log.prepend(card);
         while (log.children.length > 20) log.removeChild(log.lastChild);
       }
 
@@ -1642,8 +3183,12 @@
           })
           .then(updateStatus)
           .catch(function () {
-            /* ignore */
+            // Fetch failed (not a 401 — that path shows the unauthenticated
+            // screen). On localhost this means Guard isn't reachable: surface
+            // the one honest "not running" state instead of a silent no-op.
+            if (!_unauthShown) setConnState('down');
           });
+        refreshPostureAgents();
       }
 
       function loadThreats() {
@@ -1653,15 +3198,32 @@
           })
           .then(function (verdicts) {
             allThreats = (verdicts || []).map(function (v, i) {
+              // Real ATR rule id lives in a rule_match evidence's data.ruleId —
+              // evidence[0].source is the evidence TYPE (e.g. "rule_match"), not an id.
+              var ruleMatch = (v.evidence || []).filter(function (e) {
+                return e && e.source === 'rule_match' && e.data && e.data.ruleId;
+              })[0];
+              var ruleId = ruleMatch
+                ? ruleMatch.data.ruleId
+                : v.mitreTechnique || v.evidence?.[0]?.source || 'heuristic-' + i;
+              // Enforcement confidence (deterministic-only) drives the displayed
+              // confidence; falls back to overall confidence.
+              var conf =
+                typeof v.enforcementConfidence === 'number'
+                  ? v.enforcementConfidence
+                  : typeof v.confidence === 'number'
+                    ? v.confidence
+                    : 0;
               return {
                 timestamp: v.timestamp || new Date().toISOString(),
-                ruleId: (v.evidence && v.evidence[0] && v.evidence[0].source) || 'rule-' + i,
+                ruleId: ruleId,
                 severity:
                   v.conclusion === 'malicious'
                     ? 'critical'
                     : v.conclusion === 'suspicious'
                       ? 'medium'
                       : 'low',
+                confidence: Math.round(conf),
                 pattern: (v.reasoning || '').slice(0, 160),
                 action: v.recommendedAction || 'log_only',
               };
@@ -1682,10 +3244,44 @@
       function renderThreats() {
         var tb = document.getElementById('th-tb');
         var emp = document.getElementById('th-empty');
+        var sum = document.getElementById('th-summary');
         tb.innerHTML = '';
-        var list = allThreats.filter(function (t) {
+        var bySev = allThreats.filter(function (t) {
           return currentSevFilter === 'all' || t.severity === currentSevFilter;
         });
+        // Anti alert-fatigue: low-confidence detections are suppressed from the
+        // default view (the #1 reason solo devs mute a security tool). The count
+        // stays visible and one click reveals them.
+        var high = bySev.filter(function (t) {
+          return t.confidence >= SUPPRESS_THRESHOLD;
+        });
+        var low = bySev.filter(function (t) {
+          return t.confidence < SUPPRESS_THRESHOLD;
+        });
+        if (sum) {
+          if (low.length > 0) {
+            sum.style.display = '';
+            sum.innerHTML =
+              'Showing ' +
+              high.length +
+              ' high-confidence · ' +
+              '<span id="th-supp-toggle" style="text-decoration:underline;cursor:pointer">' +
+              low.length +
+              ' low-confidence ' +
+              (showSuppressed ? 'hidden (click to hide)' : 'hidden — show') +
+              '</span>' +
+              ' <span style="color:var(--text-muted)">(still recorded — hidden by default to cut noise)</span>';
+            var tg = document.getElementById('th-supp-toggle');
+            if (tg)
+              tg.addEventListener('click', function () {
+                showSuppressed = !showSuppressed;
+                renderThreats();
+              });
+          } else {
+            sum.style.display = 'none';
+          }
+        }
+        var list = (showSuppressed ? bySev : high).slice();
         list.sort(function (a, b) {
           var av = a[currentSort.col],
             bv = b[currentSort.col];
@@ -1699,6 +3295,7 @@
         if (emp) emp.style.display = 'none';
         list.forEach(function (t) {
           var tr = document.createElement('tr');
+          if (t.confidence < SUPPRESS_THRESHOLD) tr.style.opacity = '0.6';
           var ts = t.timestamp.split('T')[1]
             ? t.timestamp.split('T')[1].split('.')[0]
             : t.timestamp;
@@ -1715,6 +3312,9 @@
             esc(t.severity) +
             '</span></td>' +
             '<td class="mono">' +
+            t.confidence +
+            '%</td>' +
+            '<td class="mono">' +
             esc(t.pattern) +
             '</td>' +
             '<td>' +
@@ -1760,7 +3360,7 @@
             a.click();
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
-            toast('SARIF exported');
+            toast('SARIF file downloaded to your computer — nothing was uploaded.');
           })
           .catch(function () {
             toast('Network error');
@@ -1785,14 +3385,45 @@
             a.click();
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
-            toast('Evidence pack generated');
+            toast('Evidence pack downloaded to your computer — nothing was uploaded.');
           })
           .catch(function () {
             toast('Network error');
           });
       }
 
+      /* Surface the daily notify-only rule-update check (rule-sync writes it to
+         rule-update.json). The server computed this 'newer rules published'
+         signal but nothing read it. Notify-only — never auto-applies. */
+      function loadRuleUpdate() {
+        var b = document.getElementById('rule-update-banner');
+        if (!b) return;
+        af('/api/rule-update')
+          .then(function (r) {
+            return r.json();
+          })
+          .then(function (d) {
+            if (d && d.updateAvailable && d.latestVersion) {
+              b.innerHTML =
+                '<strong>New detection rules available</strong> &mdash; agent-threat-rules ' +
+                esc(d.currentVersion || '?') +
+                ' &rarr; ' +
+                esc(d.latestVersion) +
+                '. Run <code>pga upgrade</code> in your terminal when you\'re ready — your current ' +
+                'rules keep protecting you until you do, and nothing changes automatically. Rules ' +
+                'are verified by npm and never auto-applied.';
+              b.style.display = '';
+            } else {
+              b.style.display = 'none';
+            }
+          })
+          .catch(function () {
+            b.style.display = 'none';
+          });
+      }
+
       function loadRules() {
+        loadRuleUpdate();
         af('/api/rules')
           .then(function (r) {
             return r.json();
@@ -1886,7 +3517,110 @@
         renderRules(f);
       }
 
+      /* Coverage — surfaces /api/agents (which platforms are detected + whether
+         each is wired to the proxy). This data drove zero UI before; a detected
+         but un-connected platform is running unprotected. */
+      function loadCoverage() {
+        var ld = document.getElementById('cov-loading');
+        var tbl = document.getElementById('cov-table');
+        var tb = document.getElementById('cov-tb');
+        if (!tb) return;
+        af('/api/agents')
+          .then(function (r) {
+            return r.json();
+          })
+          .then(function (d) {
+            var agents = (d && d.agents) || [];
+            var det = d.detected || 0;
+            var cfg = d.configured || 0;
+            setKPI('cov-detected', det);
+            setKPI('cov-configured', cfg);
+            var unprot = Math.max(0, det - cfg);
+            setKPI('cov-unprotected', unprot);
+            var ue = document.getElementById('cov-unprotected');
+            if (ue) ue.style.color = unprot > 0 ? 'var(--warn)' : 'var(--text-muted)';
+            if (!agents.length) {
+              if (ld)
+                ld.innerHTML =
+                  '<span style="color:var(--text-muted)">No agent platforms detected. Install ' +
+                  'one (Claude Code, Cursor, Cline…), then run <code>pga init</code>.</span>';
+              if (tbl) tbl.style.display = 'none';
+              return;
+            }
+            if (ld) ld.style.display = 'none';
+            if (tbl) tbl.style.display = '';
+            tb.innerHTML = '';
+            agents.forEach(function (a) {
+              var status = !a.detected
+                ? '<span style="color:var(--text-muted)">not installed</span>'
+                : a.alreadyConfigured
+                  ? '<span style="color:var(--emerald)">● protected</span>'
+                  : '<span style="color:var(--warn)">○ unprotected — run <code>pga init</code></span>';
+              var tr = document.createElement('tr');
+              tr.innerHTML = '<td>' + esc(a.name || a.id || '') + '</td><td>' + status + '</td>';
+              tb.appendChild(tr);
+            });
+          })
+          .catch(function () {
+            if (ld)
+              ld.innerHTML =
+                '<span style="color:var(--text-muted)">Platform detection unavailable.</span>';
+          });
+      }
+      /* Runtime — surfaces /api/proxy-verdicts (live MCP proxy decisions). Quiet
+         when healthy; a row only appears on a real allow/deny/ask evaluation. */
+      function loadRuntime() {
+        var ld = document.getElementById('rt-loading');
+        var emp = document.getElementById('rt-empty');
+        var tbl = document.getElementById('rt-table');
+        var tb = document.getElementById('rt-tb');
+        if (!tb) return;
+        af('/api/proxy-verdicts')
+          .then(function (r) {
+            return r.json();
+          })
+          .then(function (d) {
+            var vs = (d && d.verdicts) || [];
+            if (ld) ld.style.display = 'none';
+            if (!vs.length) {
+              if (emp) emp.style.display = '';
+              if (tbl) tbl.style.display = 'none';
+              return;
+            }
+            if (emp) emp.style.display = 'none';
+            if (tbl) tbl.style.display = '';
+            tb.innerHTML = '';
+            vs.forEach(function (v) {
+              var oc = (v.outcome || '').toLowerCase();
+              var color =
+                oc === 'deny' ? 'var(--danger)' : oc === 'ask' ? 'var(--warn)' : 'var(--emerald)';
+              var t = v.timestamp ? (String(v.timestamp).split('T')[1] || '').split('.')[0] : '--';
+              var reason =
+                v.reason || (v.matchedRules && v.matchedRules.join(', ')) || v.tool || '';
+              var conf = typeof v.confidence === 'number' ? v.confidence + '%' : '--';
+              var tr = document.createElement('tr');
+              tr.innerHTML =
+                '<td style="font-size:12px">' +
+                esc(t) +
+                '</td><td><span style="color:' +
+                color +
+                ';text-transform:uppercase;font-weight:600;font-size:12px">' +
+                esc(oc || '?') +
+                '</span></td><td style="font-size:12px">' +
+                esc(String(reason).slice(0, 80)) +
+                '</td><td style="font-size:12px">' +
+                esc(conf) +
+                '</td>';
+              tb.appendChild(tr);
+            });
+          })
+          .catch(function () {
+            if (ld) ld.style.display = 'none';
+            if (emp) emp.style.display = '';
+          });
+      }
       function loadSkills() {
+        loadQuarantined();
         af('/api/installed-skills')
           .then(function (r) {
             return r.json();
@@ -1896,6 +3630,7 @@
             var tbl = document.getElementById('sk-table');
             var tb = document.getElementById('sk-tb');
             tb.innerHTML = '';
+            skillsData = d.skills || [];
             if (!d.skills || d.skills.length === 0) {
               if (ld)
                 ld.innerHTML = '<span style="color:var(--text-muted)">No skills detected.</span>';
@@ -1917,6 +3652,29 @@
                   : status === 'blocked'
                     ? 'badge-critical'
                     : 'badge-w';
+              var actBtn =
+                'padding:3px 9px;font-size:11px;border-radius:6px;cursor:pointer;background:transparent;';
+              var actionsCell = s.whitelisted
+                ? '<td style="white-space:nowrap">' +
+                  '<span style="color:var(--text-muted);font-size:12px;margin-right:8px">trusted</span>' +
+                  '<button type="button" class="act" data-act="unwhitelist" data-idx="' +
+                  i +
+                  '" style="' +
+                  actBtn +
+                  'border:0.5px solid var(--border);color:var(--text-secondary)">Un-trust</button>' +
+                  '</td>'
+                : '<td style="white-space:nowrap">' +
+                  '<button type="button" class="act" data-act="quarantine" data-idx="' +
+                  i +
+                  '" style="' +
+                  actBtn +
+                  'border:0.5px solid var(--bad,#c0504d);color:var(--bad,#c0504d)">Quarantine</button> ' +
+                  '<button type="button" class="act" data-act="whitelist" data-idx="' +
+                  i +
+                  '" style="' +
+                  actBtn +
+                  'border:0.5px solid var(--border);color:var(--text-secondary)">Mark safe</button>' +
+                  '</td>';
               var tr = document.createElement('tr');
               tr.innerHTML =
                 '<td>' +
@@ -1934,7 +3692,8 @@
                 badgeCls +
                 '">' +
                 esc(status) +
-                '</span></td>';
+                '</span></td>' +
+                actionsCell;
               tb.appendChild(tr);
             });
             setKPI('sk-total', d.skills.length);
@@ -1955,13 +3714,24 @@
           .then(function (d) {
             document.getElementById('tc-loading').style.display = 'none';
             document.getElementById('tc-content').style.display = '';
-            var isConnected = !!d.connected;
+            // Three honest states: sharing OFF by choice is "Off" (neutral), NOT a
+            // red "Disconnected" failure. Red is reserved for enabled-but-unreachable.
             var dot = document.getElementById('tc-conn-dot');
-            if (dot) dot.className = 'dot ' + (isConnected ? 'dot-ok' : 'dot-bad');
             var ctext = document.getElementById('tc-conn-text');
+            var connState = !d.uploadEnabled
+              ? { label: 'Off', cls: 'dot-off', color: 'var(--text-muted)' }
+              : d.connected
+                ? { label: 'Connected', cls: 'dot-ok', color: 'var(--ok)' }
+                : { label: 'Not reachable', cls: 'dot-bad', color: 'var(--danger)' };
+            if (dot) dot.className = 'dot ' + connState.cls;
             if (ctext) {
-              ctext.textContent = isConnected ? 'Connected' : 'Disconnected';
-              ctext.style.color = isConnected ? 'var(--ok)' : 'var(--danger)';
+              ctext.textContent = connState.label;
+              ctext.style.color = connState.color;
+              ctext.title = !d.uploadEnabled
+                ? 'Collective defense is off — your endpoint is not sharing or syncing. Turn it on below.'
+                : d.connected
+                  ? 'Connected to the Threat Cloud relay.'
+                  : 'Collective defense is on but the relay is not reachable right now.';
             }
             document.getElementById('tc-endpoint').textContent = d.endpoint || '--';
             setKPI('tc-recv', d.totalRulesReceived || 0);
@@ -1974,19 +3744,35 @@
 
             var tog = document.getElementById('tc-toggle');
             var tlbl = document.getElementById('tc-toggle-label');
+            var tsub = document.getElementById('tc-toggle-sub');
             if (d.uploadEnabled) {
-              if (tog) tog.classList.add('on');
+              if (tog) {
+                tog.classList.add('on');
+                tog.setAttribute('aria-checked', 'true');
+              }
               if (tlbl) {
-                tlbl.textContent = 'Enabled';
+                tlbl.textContent = 'Collective defense is ON';
                 tlbl.style.color = 'var(--ok)';
               }
+              if (tsub)
+                tsub.textContent =
+                  'You are helping defend the commons. Click to turn off — sharing stops immediately.';
             } else {
-              if (tog) tog.classList.remove('on');
+              if (tog) {
+                tog.classList.remove('on');
+                tog.setAttribute('aria-checked', 'false');
+              }
               if (tlbl) {
-                tlbl.textContent = 'Disabled';
+                tlbl.textContent = 'Collective defense is OFF';
                 tlbl.style.color = 'var(--text-muted)';
               }
+              if (tsub)
+                tsub.textContent =
+                  'Nothing leaves your machine. Click to turn on and share anonymized signatures.';
             }
+            // Keep the CLI command in sync with the action the toggle will take.
+            var cli = document.getElementById('tc-cli-cmd');
+            if (cli) cli.textContent = 'pga config set telemetry ' + (d.uploadEnabled ? 'false' : 'true');
           })
           .catch(function () {
             document.getElementById('tc-loading').innerHTML =
@@ -1996,17 +3782,36 @@
       function toggleUpload() {
         var tog = document.getElementById('tc-toggle');
         var isOn = tog.classList.contains('on');
+        // consentGiven flips collective defense BOTH on and off: the backend syncs
+        // telemetryEnabled + threatCloudUploadEnabled and records/clears the consent
+        // marker. Reversible either direction. Turning ON is the higher-consequence
+        // direction (anonymized signatures start leaving the machine), so confirm it;
+        // turning OFF is the safe direction and stays one click.
+        if (!isOn) {
+          var ok = window.confirm(
+            'Turn on collective defense?\n\n' +
+              'When Guard blocks an attack on this machine, it will share an anonymized signature ' +
+              '(the matched rule ID + a one-way hash of the payload + the source type) with the ATR ' +
+              'network.\n\nNever shared: your prompts, code, file contents, keys, IP address, or ' +
+              'hostname.\n\nYou can turn this off anytime.'
+          );
+          if (!ok) return;
+        }
         af('/api/threat-cloud', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ uploadEnabled: !isOn }),
+          body: JSON.stringify({ consentGiven: !isOn }),
         })
           .then(function (r) {
             return r.json();
           })
           .then(function (d) {
             if (d.success) {
-              toast('Saved');
+              toast(
+                !isOn
+                  ? 'Collective defense ON — anonymized signatures will be shared.'
+                  : 'Collective defense OFF — nothing leaves this machine.'
+              );
               loadTCloud();
             } else {
               toast(d.error || 'Error');
@@ -2017,47 +3822,216 @@
           });
       }
 
+      /* Guard mode is THREE states (learning / report-only / protection). The
+         old binary toggle could not represent report-only and silently rewrote
+         it to 'learning' on save — quietly downgrading enforcement. This 3-state
+         segmented control preserves whatever the config actually is. */
+      var selectedMode = 'learning';
+      var _modePendingRestart = false;
+      var MODE_INFO = {
+        learning: {
+          desc: 'builds a baseline of normal activity and only logs — no blocking.',
+          color: 'var(--warn)',
+        },
+        'report-only': {
+          desc: 'detects and records everything but never acts (recommended for new deployments).',
+          color: 'var(--sage, #8b9a8e)',
+        },
+        protection: {
+          desc: 'actively blocks detected threats per your enforcement policy.',
+          color: 'var(--ok)',
+        },
+      };
+      function renderModeSeg() {
+        var seg = document.getElementById('st-mode-seg');
+        if (!seg) return;
+        Array.prototype.forEach.call(seg.querySelectorAll('.seg-btn'), function (b) {
+          var on = b.getAttribute('data-mode') === selectedMode;
+          b.style.background = on ? 'var(--surface-3, #302b27)' : 'transparent';
+          b.style.color = on
+            ? MODE_INFO[selectedMode]
+              ? MODE_INFO[selectedMode].color
+              : 'var(--text)'
+            : 'var(--text-muted)';
+          b.setAttribute('aria-checked', on ? 'true' : 'false');
+        });
+        var d = document.getElementById('st-mode-desc');
+        if (d && MODE_INFO[selectedMode]) {
+          if (_modePendingRestart && selectedMode === 'protection') {
+            // Preserve the pending-restart note across loadSettings() re-renders
+            // so the OS-response caveat does not vanish on the next refresh.
+            d.innerHTML =
+              'This mode ' +
+              esc(MODE_INFO[selectedMode].desc) +
+              ' <span style="color:var(--warn)">Pending restart: automatic OS responses arm after ' +
+              'you restart Guard (<code>pga guard restart</code>).</span>';
+          } else {
+            d.textContent = 'This mode ' + MODE_INFO[selectedMode].desc;
+          }
+        }
+      }
+      function selectMode(m) {
+        if (!MODE_INFO[m]) return;
+        // A fresh selection clears any prior pending-restart note; it re-arms
+        // only after the next protection-mode save.
+        if (m !== selectedMode) _modePendingRestart = false;
+        selectedMode = m;
+        renderModeSeg();
+      }
+      /* Optional alert channels. The dashboard NEVER sets channel secrets over
+         HTTP (that was removed as an exfil surface). For each channel that Guard
+         actually supports (NotificationConfig in types.ts: email / slack /
+         telegram / line / webhook) it shows what the channel is, whether it is
+         configured, and the exact JSON to paste into config.json. Placeholders
+         only — the user fills in their own secret in the file, not here. */
+      var NOTIFY_CHANNELS = [
+        {
+          key: 'slack',
+          name: 'Slack',
+          what: 'Post each alert into a Slack channel using an Incoming Webhook URL from Slack.',
+          snippet: '"slack": { "webhookUrl": "https://hooks.slack.com/services/XXX/YYY/ZZZ" }',
+        },
+        {
+          key: 'telegram',
+          name: 'Telegram',
+          what: 'Message you (or a group) through a Telegram bot. Needs the bot token and chat ID.',
+          snippet: '"telegram": { "botToken": "YOUR_BOT_TOKEN", "chatId": "YOUR_CHAT_ID" }',
+        },
+        {
+          key: 'email',
+          name: 'Email',
+          what: 'Email each alert through your own SMTP server.',
+          snippet:
+            '"email": { "host": "smtp.example.com", "port": 587, "secure": false, "auth": { "user": "YOU", "pass": "YOUR_SMTP_PASSWORD" }, "from": "guard@example.com", "to": ["you@example.com"] }',
+        },
+        {
+          key: 'line',
+          name: 'LINE',
+          what: 'Send each alert to LINE using a LINE Notify access token.',
+          snippet: '"line": { "accessToken": "YOUR_LINE_NOTIFY_TOKEN" }',
+        },
+        {
+          key: 'webhook',
+          name: 'Webhook',
+          what: 'POST each alert as JSON to any URL you own (wire it into your own tooling).',
+          snippet: '"webhook": { "url": "https://example.com/guard-hook", "secret": "OPTIONAL_SHARED_SECRET" }',
+        },
+      ];
+      var notifySnippetSeq = 0;
+      function renderNotifyChannels(n) {
+        n = n || {};
+        var el = document.getElementById('st-notify-list');
+        if (!el) return;
+        // If the user already configured a channel, open the optional section so
+        // they can see/manage it; otherwise keep it collapsed (zero-config default).
+        var anyOn = NOTIFY_CHANNELS.some(function (c) {
+          return !!n[c.key];
+        });
+        var details = document.getElementById('notify-details');
+        if (details && anyOn) details.setAttribute('open', '');
+        el.innerHTML = NOTIFY_CHANNELS.map(function (c) {
+          var on = !!n[c.key];
+          var stateHtml = on
+            ? '<span class="nc-state" style="color:var(--ok)">configured</span>'
+            : '<span class="nc-state" style="color:var(--text-muted)">not set up</span>';
+          var cmdId = 'nc-cmd-' + ++notifySnippetSeq;
+          return (
+            '<div class="nc">' +
+            '<div class="nc-head"><span class="nc-name">' +
+            esc(c.name) +
+            '</span>' +
+            stateHtml +
+            '</div>' +
+            '<div class="nc-what">' +
+            esc(c.what) +
+            '</div>' +
+            '<div class="cmd-box">' +
+            '<code id="' +
+            cmdId +
+            '">' +
+            esc(c.snippet) +
+            '</code>' +
+            '<button class="cmd-copy" type="button" data-copy-target="' +
+            cmdId +
+            '">Copy</button>' +
+            '</div>' +
+            '</div>'
+          );
+        }).join('');
+        el.innerHTML +=
+          '<div style="font-size:12px;color:var(--text-muted);margin-top:2px">' +
+          'Add the line inside the <code>"notifications"</code> object in ' +
+          '<code>~/.panguard-guard/config.json</code>, then restart Guard. ' +
+          'Without any channel, alerts still appear in this dashboard.</div>';
+      }
+      /* Read-only enforcement-policy (Protection-mode blast radius). Shows which
+         automatic destructive responses are armed, so enabling Protection is not
+         a black box. Configured in config.json, not here. */
+      function renderEnforcement(p) {
+        var el = document.getElementById('st-enforce-list');
+        if (!el) return;
+        if (!p) {
+          el.innerHTML =
+            '<div style="color:var(--text-muted)">Default — detections are logged and you are ' +
+            'notified; no automatic destructive action is taken.</div>';
+          return;
+        }
+        var acts = [
+          ['blockIPs', 'Block attacker IPs'],
+          ['killProcesses', 'Kill malicious processes'],
+          ['isolateFiles', 'Isolate / quarantine files'],
+          ['disableAccounts', 'Disable accounts'],
+        ];
+        el.innerHTML = acts
+          .map(function (a) {
+            var on = p[a[0]] && p[a[0]].enabled;
+            return (
+              '<div>' +
+              (on
+                ? '<span style="color:var(--danger)">● armed</span>'
+                : '<span style="color:var(--text-muted)">○ off</span>') +
+              ' &mdash; ' +
+              esc(a[1]) +
+              '</div>'
+            );
+          })
+          .join('');
+      }
       function loadSettings() {
+        // Reflect Layer C connected/off state when the tab is opened cold, from
+        // the last live status (the layer state rides on /api/status, not /api/config).
+        if (_lastStatus) renderLayerCSettings(_lastStatus.layers);
         af('/api/config')
           .then(function (r) {
             return r.json();
           })
           .then(function (cfg) {
             if (!cfg) return;
-            var mt = document.getElementById('st-mode-toggle');
-            var ml = document.getElementById('st-mode-label');
-            var isProt = cfg.mode === 'protection';
-            if (mt) {
-              if (isProt) mt.classList.add('on');
-              else mt.classList.remove('on');
-            }
-            if (ml) {
-              ml.textContent = isProt ? 'Protection' : 'Learning';
-              ml.style.color = isProt ? 'var(--ok)' : 'var(--warn)';
-            }
+            // Preserve the real mode — including report-only — instead of
+            // collapsing it to a binary on/off.
+            selectedMode =
+              cfg.mode === 'protection' || cfg.mode === 'report-only' || cfg.mode === 'learning'
+                ? cfg.mode
+                : 'learning';
+            renderModeSeg();
             var ep = document.getElementById('st-tc-endpoint');
             if (ep) ep.value = cfg.threatCloudEndpoint || '';
+            // Show the REAL port: the one this dashboard is actually served on
+            // (location.port) is the ground truth a user needs to reconnect, not
+            // a hard-coded fallback that can be flat wrong.
             var port = document.getElementById('st-port');
-            if (port) port.textContent = cfg.dashboardPort || 9999;
+            if (port) port.textContent = cfg.dashboardPort || location.port || '3100';
+            renderNotifyChannels(cfg.notifications || {});
+            renderEnforcement(cfg.enforcementPolicy);
           })
           .catch(function () {
             /* ignore */
           });
       }
-      function toggleMode() {
-        var t = document.getElementById('st-mode-toggle');
-        t.classList.toggle('on');
-        var l = document.getElementById('st-mode-label');
-        var isProt = t.classList.contains('on');
-        if (l) {
-          l.textContent = isProt ? 'Protection' : 'Learning';
-          l.style.color = isProt ? 'var(--ok)' : 'var(--warn)';
-        }
-      }
       function saveSettings() {
-        var modeOn = document.getElementById('st-mode-toggle').classList.contains('on');
+        var priorMode = selectedMode;
         var body = {
-          mode: modeOn ? 'protection' : 'learning',
+          mode: selectedMode,
           endpoint: document.getElementById('st-tc-endpoint').value || undefined,
         };
         af('/api/threat-cloud', {
@@ -2070,16 +4044,41 @@
           })
           .then(function (d) {
             if (d.success) {
-              toast('Settings saved — restart Guard to apply a mode change');
+              // The daemon now live-applies the change (detection re-arms at
+              // once), so loadSettings() re-reads the NEW mode — the control no
+              // longer snaps back. Protection mode's OS-level response actions
+              // still need a restart, so surface that as a pending state rather
+              // than implying nothing happened.
+              if (body.mode === 'protection') {
+                toast('Saved. Detection is live now; restart Guard to arm automatic responses.');
+                showModePendingRestart();
+              } else {
+                toast('Saved — applied immediately.');
+              }
               loadSettings();
             } else {
               toast(d.error || 'Save failed');
+              // Revert the optimistic selection only when the save was rejected.
+              selectMode(priorMode);
             }
           })
           .catch(function () {
             toast('Network error');
           });
       }
+      /* Keep the optimistic mode value and show a clear "pending restart" note
+         for the part that genuinely needs a restart (OS-level responses) —
+         never snap the control back to the old value. */
+      function showModePendingRestart() {
+        _modePendingRestart = true;
+        var d = document.getElementById('st-mode-desc');
+        if (d) {
+          d.innerHTML =
+            (MODE_INFO[selectedMode] ? 'This mode ' + esc(MODE_INFO[selectedMode].desc) : '') +
+            ' <span style="color:var(--warn)">Pending restart: automatic OS responses arm after ' +
+            'you restart Guard (<code>pga guard restart</code>).</span>';
+        }
+      }
 
       /* ============================================================ */
       /*  Event wiring (CSP-safe: no inline handlers)                  */
@@ -2088,12 +4087,165 @@
         var el = document.getElementById(id);
         if (el) el.addEventListener(ev, fn);
       }
+      function skillAction(act, idx) {
+        var s = skillsData[idx];
+        if (!s || !s.name) return;
+        var name = s.name;
+        if (
+          act === 'quarantine' &&
+          !window.confirm(
+            'Quarantine "' +
+              name +
+              '"?\n\n' +
+              'This moves the skill file out of your agent’s reach, so the agent can no longer use ' +
+              'it. The file is NOT deleted — it moves to ~/.panguard/quarantine and you can restore ' +
+              'it anytime from the Quarantined Files list below.'
+          )
+        ) {
+          return;
+        }
+        if (
+          act === 'whitelist' &&
+          !window.confirm(
+            'Mark "' +
+              name +
+              '" as safe?\n\n' +
+              'Guard will trust this skill and stop flagging it for behavior drift — this reduces ' +
+              'monitoring for it. Only do this for skills you installed and trust. You can undo it ' +
+              'later with Un-trust.'
+          )
+        ) {
+          return;
+        }
+        var EPMAP = {
+          quarantine: '/api/skills/quarantine',
+          whitelist: '/api/skills/whitelist',
+          unwhitelist: '/api/skills/unwhitelist',
+        };
+        var ep = EPMAP[act];
+        if (!ep) return;
+        af(ep, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name: name }),
+        })
+          .then(function (r) {
+            return r.json().then(function (d) {
+              return { ok: r.ok, d: d };
+            });
+          })
+          .then(function (res) {
+            if (res.ok && res.d && res.d.success) {
+              var msg =
+                act === 'quarantine'
+                  ? 'Quarantined ' + name + ' — moved out of the agent’s reach (restorable below).'
+                  : act === 'unwhitelist'
+                    ? 'Un-trusted ' + name + ' — Guard will evaluate it again like any unknown skill.'
+                    : 'Marked safe — Guard will stop flagging ' + name + '.';
+              toast(msg);
+              loadSkills();
+              loadQuarantined();
+            } else {
+              toast((res.d && res.d.error) || 'Action failed');
+            }
+          })
+          .catch(function () {
+            toast('Action failed');
+          });
+      }
+      /* Quarantined-files list + restore — honors the 'can be restored' promise
+         the quarantine dialog makes. Reads /api/skills/quarantined; Restore POSTs
+         /api/skills/restore. Hidden when nothing is quarantined. */
+      function loadQuarantined() {
+        var sec = document.getElementById('qz-section');
+        var tb = document.getElementById('qz-tb');
+        if (!sec || !tb) return;
+        af('/api/skills/quarantined')
+          .then(function (r) {
+            return r.json();
+          })
+          .then(function (d) {
+            var recs = (d && d.records) || [];
+            if (!recs.length) {
+              sec.style.display = 'none';
+              tb.innerHTML = '';
+              return;
+            }
+            sec.style.display = '';
+            tb.innerHTML = '';
+            recs.forEach(function (rec) {
+              var when = rec.quarantinedAt ? new Date(rec.quarantinedAt).toLocaleString() : '--';
+              var tr = document.createElement('tr');
+              tr.innerHTML =
+                '<td class="mono" style="font-size:12px">' +
+                esc(rec.originalPath || '') +
+                '</td>' +
+                '<td style="font-size:12px">' +
+                esc(rec.reason || '') +
+                '</td>' +
+                '<td style="font-size:12px">' +
+                esc(when) +
+                '</td>' +
+                '<td style="white-space:nowrap">' +
+                '<button type="button" class="act" data-restore-id="' +
+                esc(rec.id || '') +
+                '" style="padding:3px 9px;font-size:11px;border-radius:6px;cursor:pointer;' +
+                'background:transparent;border:0.5px solid var(--emerald,#34d399);' +
+                'color:var(--emerald,#34d399)">Restore</button></td>';
+              tb.appendChild(tr);
+            });
+          })
+          .catch(function () {
+            sec.style.display = 'none';
+          });
+      }
+      function restoreQuarantined(id) {
+        if (!id) return;
+        af('/api/skills/restore', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: id }),
+        })
+          .then(function (r) {
+            return r.json().then(function (d) {
+              return { ok: r.ok, d: d };
+            });
+          })
+          .then(function (res) {
+            if (res.ok && res.d && res.d.success) {
+              toast('Restored');
+              loadQuarantined();
+              loadSkills();
+            } else {
+              toast((res.d && res.d.error) || 'Restore failed');
+            }
+          })
+          .catch(function () {
+            toast('Restore failed');
+          });
+      }
       function wireEvents() {
         document.querySelectorAll('.fb').forEach(function (b) {
           b.addEventListener('click', function (e) {
             filterThreats(b.getAttribute('data-sev'), e);
           });
         });
+        var skTb = document.getElementById('sk-tb');
+        if (skTb) {
+          skTb.addEventListener('click', function (e) {
+            var btn = e.target && e.target.closest ? e.target.closest('button.act') : null;
+            if (!btn) return;
+            skillAction(btn.getAttribute('data-act'), parseInt(btn.getAttribute('data-idx'), 10));
+          });
+        }
+        var qzTb = document.getElementById('qz-tb');
+        if (qzTb) {
+          qzTb.addEventListener('click', function (e) {
+            var btn =
+              e.target && e.target.closest ? e.target.closest('button[data-restore-id]') : null;
+            if (btn) restoreQuarantined(btn.getAttribute('data-restore-id'));
+          });
+        }
         document.querySelectorAll('th[data-sort]').forEach(function (th) {
           th.addEventListener('click', function () {
             sortThreats(th.getAttribute('data-sort'));
@@ -2119,7 +4271,72 @@
           toast('Refreshing skills…');
         });
         on('tc-toggle', 'click', toggleUpload);
-        on('st-mode-toggle', 'click', toggleMode);
+        // The toggle is a role=switch — make it keyboard-operable (Space/Enter).
+        on('tc-toggle', 'keydown', function (e) {
+          if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            toggleUpload();
+          }
+        });
+        // Delegated copy-to-clipboard for every [data-copy-target] command box.
+        document.addEventListener('click', function (e) {
+          var btn = e.target && e.target.closest ? e.target.closest('[data-copy-target]') : null;
+          if (!btn) return;
+          var src = document.getElementById(btn.getAttribute('data-copy-target'));
+          if (!src) return;
+          copyText(src.textContent || '', btn);
+        });
+        var modeSeg = document.getElementById('st-mode-seg');
+        if (modeSeg) {
+          modeSeg.addEventListener('click', function (e) {
+            var btn = e.target && e.target.closest ? e.target.closest('button.seg-btn') : null;
+            if (btn) selectMode(btn.getAttribute('data-mode'));
+          });
+        }
+        var postureDed = document.getElementById('posture-deductions');
+        if (postureDed) {
+          postureDed.addEventListener('click', function (e) {
+            var btn = e.target && e.target.closest ? e.target.closest('button[data-goto]') : null;
+            if (btn) nav(btn.getAttribute('data-goto'));
+          });
+        }
+        on('conn-copy', 'click', function () {
+          copyText('pga up', document.getElementById('conn-copy'));
+        });
+        // Layer C CTA on Overview deep-links to the Settings section.
+        on('lc-cta-btn', 'click', function () {
+          nav('settings');
+          setTimeout(function () {
+            var s = document.getElementById('p-settings-layerc');
+            if (s) s.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }, 60);
+        });
+        // Welcome guide: "Got it"/X persist the dismissal; "Dismiss for now" returns
+        // next launch; the sidebar link reopens it. Its [data-goto] button is not
+        // covered by the posture-deductions handler, so delegate nav here.
+        on('welcome-done', 'click', function () {
+          hideWelcome(true);
+        });
+        on('welcome-x', 'click', function () {
+          hideWelcome(true);
+        });
+        on('welcome-later', 'click', function () {
+          hideWelcome(false);
+        });
+        on('welcome-reopen', 'click', reopenWelcome);
+        on('welcome-reopen', 'keydown', function (e) {
+          if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            reopenWelcome();
+          }
+        });
+        var wg = document.getElementById('welcome-guide');
+        if (wg) {
+          wg.addEventListener('click', function (e) {
+            var b = e.target && e.target.closest ? e.target.closest('button[data-goto]') : null;
+            if (b) nav(b.getAttribute('data-goto'));
+          });
+        }
         on('btn-save', 'click', saveSettings);
         on('btn-reload', 'click', loadSettings);
       }
@@ -2128,12 +4345,18 @@
       /*  Boot                                                         */
       /* ============================================================ */
       (function () {
+        setConnState('connecting');
         wireEvents();
         connectWS();
         loadStatus();
         loadThreats();
         // Mark default nav active
         nav('overview');
+        // Fallback: if neither the WS push nor the initial fetch yields a live
+        // status within a few seconds, Guard is almost certainly not running.
+        _connectTimer = setTimeout(function () {
+          if (_connState !== 'live' && !_unauthShown) setConnState('down');
+        }, 6000);
       })();
     </script>
   </body>