@mneme-ai/xray 2.163.0 → 2.174.0

package/public/index.html

@@ -66,11 +66,25 @@
   .g-C{background:linear-gradient(135deg,#eaa83a,#c9821a)} .g-D{background:linear-gradient(135deg,#f0742e,#d4571a)}
   .g-F{background:linear-gradient(135deg,#f43f5e,#be123c)}
   .top .repo{font-size:22px;font-weight:640;letter-spacing:-.02em;color:var(--ink);word-break:break-all;line-height:1.2}
+  .top .repobr{font-size:13px;font-weight:600;color:var(--a);background:var(--a-soft);border-radius:6px;padding:1px 7px;vertical-align:middle}
+  .top .repourl{display:inline-block;font-size:12.5px;color:var(--a);text-decoration:none;margin-top:3px;word-break:break-all;font-family:ui-monospace,Menlo,monospace}
+  .top .repourl:hover{text-decoration:underline}
   .top .head{color:var(--sub);font-size:14px;margin-top:4px}
   .trustbar{display:flex;align-items:center;gap:14px;padding:13px 30px;background:#f0fdf4;border-bottom:1px solid #dcfce7;flex-wrap:wrap}
   .hgauge{display:inline-flex;align-items:center;gap:8px;font-weight:680;color:#15803d;font-size:14px;white-space:nowrap}
   .hdot{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
   .htext{font-size:12.5px;color:#3f6b4e;line-height:1.5}.htext b{color:#14532d;font-weight:640}
+  .membrane{display:flex;border-bottom:1px solid #eef0f2;background:#fafbfc;flex-wrap:wrap}
+  .mp{flex:1;min-width:180px;padding:11px 18px;border-right:1px solid #eef0f2;display:flex;flex-direction:column;gap:3px}.mp:last-child{border-right:0}
+  .mpk{font-size:10.5px;letter-spacing:.06em;color:#8a909a;font-weight:700}
+  .mpv{font-size:12.5px;color:#2b2f36;font-weight:560;display:flex;align-items:center;gap:7px}
+  .triage{padding:14px 30px 4px}
+  .triage-h{font-size:13px;font-weight:680;color:#b45309;margin-bottom:9px}.triage-sub{font-weight:400;color:#9aa0a6;font-size:11.5px}
+  .triage.clearall{padding:13px 30px;color:#15803d;font-weight:560;font-size:13px;background:#f0fdf4;border-bottom:1px solid #dcfce7}
+  .ti{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-top:1px solid #f1f2f4}
+  .ti-sev{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;min-width:62px;text-align:center}
+  .ti.critical .ti-sev{background:#fee2e2;color:#b91c1c}.ti.warn .ti-sev{background:#fef3c7;color:#b45309}.ti.info .ti-sev{background:#e0e7ff;color:#4338ca}
+  .ti-body{flex:1;min-width:0}.ti-f{font-size:13px;color:#1f2329}.ti-p{font-size:11px;color:#9aa0a6;margin-top:2px;font-family:ui-monospace,Menlo,monospace}
   .rows{padding:6px 30px 16px}
   .row{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--line2);align-items:baseline}
   .row:last-child{border-bottom:0}
@@ -81,7 +95,8 @@
   .row .v .big{font-weight:660;color:var(--ink);font-size:16px}
   .muted{color:var(--sub)}
   .spark{font-family:ui-monospace,Menlo,monospace;letter-spacing:1px;color:var(--a)}
-  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:148px;overflow-y:auto}
+  .chips::-webkit-scrollbar{width:8px}.chips::-webkit-scrollbar-thumb{background:#d7dbe0;border-radius:8px}
   .chip{font-size:12px;padding:4px 10px;border-radius:8px;background:var(--soft);border:1px solid var(--line);color:#5c616b;font-weight:450}
   .chip.bad{background:#fff1f3;border-color:#ffe0e6;color:var(--red)}
   .chip.warn{background:#fff8ed;border-color:#fde6cc;color:#b45309}
@@ -131,6 +146,8 @@
   .listfoot{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 0;font-size:13px}
   .moreb{height:38px;padding:0 18px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;font-size:13px;font-weight:540;transition:border-color .15s}
   .moreb:hover{border-color:var(--ink)}
+  .moreb:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line)}
+  .pagenav{display:inline-flex;gap:8px}
   /* share + buttons */
   .share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:18px 30px;border-top:1px solid var(--line2)}
   .badgeimg{height:20px}
@@ -151,14 +168,50 @@
   .paste-hint{align-self:center;font-size:12.5px;color:var(--sub)}
   .paste-hint b{color:var(--ink2);font-weight:560}
   /* local bridge panel */
-  .localbox{max-width:560px;margin:22px auto 0;border:1px solid var(--line);border-radius:var(--rs);padding:18px 20px;background:var(--soft);display:none;text-align:left}
-  .localbox.on{display:block}
+  .localbox{max-width:560px;margin:22px auto 0;border:1px solid var(--line);border-radius:var(--rs);padding:18px 20px;background:var(--soft);display:block;text-align:left}
   .localbox .lh{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:560;color:var(--ink2)}
-  .localdot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.14)}
+  .localdot{width:9px;height:9px;border-radius:50%;background:#c8ccd2;box-shadow:0 0 0 3px rgba(140,140,150,.12)}
+  .localbox.connected .localdot{background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.14)}
+  .pickbtn{height:44px;padding:0 18px;border:1.5px solid var(--a);border-radius:10px;background:var(--a);color:#fff;cursor:pointer;font-size:13.5px;font-weight:600}
+  .cmdrow{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
+  .cmdrow code{background:#0b0b0f;color:#e6e6ea;border-radius:8px;padding:8px 12px;font-size:12.5px;font-family:ui-monospace,Menlo,monospace}
+  .orline{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--sub);font-size:12px}
+  .orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
   .localrow{display:flex;gap:8px;margin-top:12px}
   .localrow input{flex:1;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;font-family:ui-monospace,Menlo,monospace}
   .localrow button{height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--ink);color:#fff;cursor:pointer;font-size:13.5px}
-  .localhint{font-size:12px;color:var(--sub);margin-top:9px}
+  .localhint{font-size:12px;color:var(--sub);margin-top:9px;line-height:1.5}
+  .bridgebox{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
+  .bridgebox summary{cursor:pointer;font-size:12.5px;color:var(--a);font-weight:560;list-style:none}
+  .lscard{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px;text-align:left}
+  .lscard .lstop{display:flex;align-items:center;gap:14px;margin-bottom:8px}
+  .lscard .lsgrade{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:-.02em}
+  .lscard .lsh{font-size:15px;color:var(--ink)}
+  .lscard .lsrow{display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--line2);font-size:13px}
+  .lscard .lsk{width:110px;color:var(--sub);font-weight:560;flex-shrink:0}
+  .lscard .lsv{color:var(--ink2)} .lscard .lsv.bad{color:var(--red)} .lscard .lsv.ok{color:var(--green)}
+  .lscard .lshits{margin:6px 0;font-size:12px;color:var(--red);font-family:ui-monospace,Menlo,monospace;line-height:1.6}
+  .lscard .lsok{margin:6px 0;font-size:12.5px;color:var(--green)}
+  .lscard .pill{display:inline-block;font-size:11px;background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:1px 8px;color:var(--ink2)}
+  .lscard .lsnote{margin-top:10px;font-size:11.5px;color:var(--sub);line-height:1.5;border-top:1px solid var(--line2);padding-top:9px}
+  /* SHOWCASE — selling points; the graphic sits to the SIDE (grid areas, no markup move) */
+  .showcase{max-width:1060px;margin:64px auto 0;padding:0 20px;text-align:left;
+    display:grid;column-gap:36px;row-gap:18px;align-items:center;
+    grid-template-columns:1fr 360px;grid-template-areas:"title art" "sub art" "cards cards"}
+  .showcase .sctitle{grid-area:title;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0;line-height:1.2}
+  .showcase .sctitle .hl{color:var(--a)}
+  .showcase .scsub{grid-area:sub;font-size:15px;color:var(--sub);margin:0;line-height:1.6}
+  .showcase .bigart{grid-area:art;display:flex;justify-content:center;align-self:center;opacity:.95}
+  .showcase .sc3{grid-area:cards;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
+  .showcase .sccard{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:20px}
+  .showcase .scico{font-size:26px;margin-bottom:8px}
+  .showcase .sccard b{display:block;font-size:15px;color:var(--ink);margin-bottom:6px}
+  .showcase .sccard span{font-size:13px;color:var(--sub);line-height:1.55}
+  @media(max-width:820px){
+    .showcase{grid-template-columns:1fr;grid-template-areas:"title" "sub" "art" "cards"}
+    .showcase .sc3{grid-template-columns:1fr}
+    .showcase .bigart svg{width:300px;height:auto}
+  }
   .picker{display:none;margin-top:12px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
   .picker.on{display:block}
   .pkbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line2);font-size:12.5px}
@@ -169,6 +222,33 @@
   .pkrow:last-child{border-bottom:0}.pkrow:hover{background:var(--soft)}
   .pkrow .ic{width:18px;text-align:center}
   .pkrow .repobadge{margin-left:auto;font-size:10.5px;color:var(--a);background:var(--a-soft);border-radius:6px;padding:2px 7px;font-weight:600}
+  /* ── REAL-TIME TRACKING panel — clean + clear ── */
+  .track{max-width:760px;margin:18px auto 0;background:var(--soft);border:1px solid var(--line);border-top:2px solid var(--a);border-radius:var(--rs);padding:16px 18px;box-shadow:var(--sh-sm)}
+  .track .thead{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
+  .track .ticon{font-size:17px}
+  .track .tnew{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--a);background:var(--a-soft);border-radius:6px;padding:2px 7px}
+  .track .trow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
+  .track .tlabel{font-size:13px;color:var(--sub);font-weight:560}
+  .track select{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 12px;font-size:13.5px;background:#fff;color:var(--ink2);max-width:260px}
+  .track .tbtn{height:38px;padding:0 16px;border-radius:9px;border:1.5px solid var(--a);background:var(--a);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer}
+  .track .tbtn.off{background:#fff;color:var(--a)}
+  .track .tbtn.stop{border-color:var(--red);background:#fff;color:var(--red)}
+  .track .live{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--green);font-weight:600}
+  .track .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pulse 1.8s infinite}
+  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
+  .track .drift{margin-top:12px;border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:560;display:none}
+  .track .drift.degraded{background:#fff1f3;border:1px solid #fecdd6;color:var(--red)}
+  .track .drift.improved{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--green)}
+  .track .drift.changed,.track .drift.stable{background:var(--a-soft);border:1px solid #dfe2ff;color:var(--a)}
+  .track .tl{margin-top:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-family:ui-monospace,Menlo,monospace;font-size:12px}
+  .track .tl .pill{padding:2px 8px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--ink2)}
+  .track .tl .pill.deg{border-color:#fecdd6;color:var(--red)} .track .tl .pill.imp{border-color:#bbf7d0;color:var(--green)}
+  .track .thelp{margin-top:8px;font-size:12px;color:var(--sub);line-height:1.5}
+  .track .tfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
+  @media(max-width:620px){.track .tfeat{grid-template-columns:1fr}}
+  .track .tf{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px}
+  .track .tf b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:3px}
+  .track .tf span{color:var(--sub);line-height:1.45}
   footer{padding:40px 0 70px;text-align:center;color:#aab0b8;font-size:13px}
   .spin{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;
     border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px;margin-right:7px;opacity:.9}
@@ -198,8 +278,8 @@
 </style>
 </head>
 <body>
-<!-- grand meteor-impact illustration — desktop / iPad only, behind content -->
-<div class="comet comet-a" aria-hidden="true">
+<!-- grand meteor-impact illustration — moved to the bottom showcase -->
+<div class="comet comet-a" aria-hidden="true" style="display:none">
   <svg viewBox="0 0 360 420" width="360" height="420">
     <defs>
       <linearGradient id="mtail" x1="1" y1="0" x2="0" y2="1">
@@ -258,10 +338,10 @@
       <span><b>X-Ray</b> — instant health report: dependencies, secrets, risk &amp; who-to-ask.</span>
       <span><b>📦 AI Pack</b> — bundle the whole repo into one text to paste into any AI chat.</span>
     </div>
-    <p class="hint">Every number is <b>reproducible</b> from git, code &amp; package metadata and sealed with an <b>offline-verifiable</b> signature. <span class="muted">Private folder? run <code>npx @mneme-ai/xray bridge</code> and Browse below.</span></p>
+    <p class="hint">Every number is <b>reproducible</b> from git, code &amp; package metadata and sealed with an <b>offline-verifiable</b> signature. <span class="muted">Private repo or a local folder with no public URL? Run <code>npx @mneme-ai/xray bridge</code> on your machine — a <b>Scan a local folder</b> box appears here + your code never leaves your computer.</span></p>
     <details class="keybox">
       <summary>🔖 Optional — save your reports</summary>
-      <div class="keyhelp">A “key” is simply a password you make up (no sign-up). Use the same one any time to find your reports under <b>My repos</b>.</div>
+      <div class="keyhelp">A “key” is just a password you make up (no sign-up). <b>How it works:</b> ① type a key + Save · ② X-Ray any repo above — it's filed under your key automatically · ③ open <b>My repos</b> below to find it anytime, on any device with the same key.</div>
       <div class="keyrow">
         <input id="key" placeholder="make up a password — e.g. my-secret-123" autocomplete="off" />
         <button id="savekey" type="button">Save</button>
@@ -270,39 +350,145 @@
       <div id="keymsg" class="keymsg" style="display:none"></div>
     </details>
     <div class="localbox" id="localbox">
-      <div class="lh"><span class="localdot"></span>Local agent detected — scan a folder on <b>this machine</b> (source never leaves it)</div>
+      <div class="lh"><span class="localdot" id="localdot"></span><b>Or scan a folder on this computer</b> <span class="muted" id="localhead">— nothing is uploaded</span></div>
       <div class="localrow">
-        <input id="localpath" placeholder="/absolute/path/to/your/repo  (git or not)" autocomplete="off" spellcheck="false" />
-        <button id="localbrowse" type="button" class="ghostbtn">📂 Browse</button>
-        <button id="localgo" type="button">Scan</button>
-        <button id="localpack" type="button" class="ghostbtn">📦 Pack</button>
+        <button id="pickfolder" type="button" class="pickbtn">📂 Choose a folder…</button>
+        <span class="muted" id="picknote">No install, no terminal — your browser asks which folder, the scan runs right here (secrets · dependencies · size).</span>
       </div>
-      <div class="picker" id="picker"></div>
-      <div class="localhint">Not on git? No problem — Browse to any folder. It reads locally and shows the signed result here; nothing is uploaded.</div>
+      <div id="localout"></div>
+      <details class="bridgebox">
+        <summary>Want the FULL report on a local repo (git history, bus factor, vitality)?</summary>
+        <div class="localhint">Run this once on your machine — a tiny local agent reads git + files locally and shows the <b>signed</b> result here. Nothing is uploaded.
+          <div class="cmdrow"><code>npx @mneme-ai/xray bridge</code><button id="copybridge" type="button" class="ghostbtn">Copy</button></div>
+        </div>
+        <div class="localrow" id="bridgerow" style="display:none">
+          <input id="localpath" placeholder="/absolute/path/to/your/repo" autocomplete="off" spellcheck="false" />
+          <button id="localbrowse" type="button" class="ghostbtn">📂 Browse</button>
+          <button id="localgo" type="button">Scan</button>
+          <button id="localpack" type="button" class="ghostbtn">📦 Pack</button>
+        </div>
+        <div class="picker" id="picker"></div>
+      </details>
     </div>
     <p class="err" id="err" style="display:none"></p>
   </header>
 
   <div id="out"></div>
   <div id="packout"></div>
+  <div id="track" class="track" style="display:none"></div>
 
   <div class="board">
     <div class="tabs"><button id="tabBoard" class="tab on">Recently X-rayed</button><button id="tabMine" class="tab" style="display:none">My repos</button></div>
     <p class="boardnote" id="boardnote">🌍 <b>Public</b> — recent X-Rays of <b>public</b> repos, visible to everyone. Private repos never appear here.</p>
     <div id="board"></div>
   </div>
+
+  <!-- SHOWCASE — the selling points (real: this is what Live tracking does) + the grand graphic -->
+  <section class="showcase">
+    <h2 class="sctitle">From a one-shot check to an <span class="hl">AI Auditor for your team</span></h2>
+    <p class="scsub">Turn on Live tracking and X-Ray watches a branch 24/7 — every push, human or AI, is re-scanned and the drift surfaces here. No re-click.</p>
+    <div class="sc3">
+      <div class="sccard"><div class="scico">🛡</div><b>AI Code Drift Detection</b><span>The moment anyone — or an AI — pushes, catch a newly-leaked secret, a destructive CI command, or a grade drop. Malicious or off-architecture code is flagged on arrival.</span></div>
+      <div class="sccard"><div class="scico">🔁</div><b>Continuous Autonomous Audit</b><span>Re-checked on every push (or every 30s) — a 24/7 security &amp; health audit that runs itself. Nobody has to remember to click.</span></div>
+      <div class="sccard"><div class="scico">🕰</div><b>Time-Machine Indexing</b><span>A signed timeline of how code-health drifted, commit by commit — see exactly when a risk entered and who pushed it.</span></div>
+    </div>
+    <div class="bigart" aria-hidden="true">
+      <svg viewBox="0 0 360 420" width="440" height="513">
+        <defs>
+          <linearGradient id="mtail2" x1="1" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0b0b0f" stop-opacity=".5"/><stop offset="1" stop-color="#0b0b0f" stop-opacity="0"/></linearGradient>
+          <radialGradient id="dust2" cx="50%" cy="60%"><stop offset="0" stop-color="#5b5bf6" stop-opacity=".18"/><stop offset="1" stop-color="#5b5bf6" stop-opacity="0"/></radialGradient>
+          <linearGradient id="rock2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2b2c4a"/><stop offset="1" stop-color="#0b0b0f"/></linearGradient>
+        </defs>
+        <path d="M-20 322 Q90 300 150 330 Q175 344 200 330 Q280 300 380 320" fill="none" stroke="#5b5bf6" stroke-width="2" opacity=".4"/>
+        <ellipse cx="172" cy="332" rx="96" ry="24" fill="url(#dust2)"/>
+        <path d="M300 24 Q236 96 196 250 Q244 110 296 40 Z" fill="url(#mtail2)"/>
+        <g transform="translate(196 250)">
+          <polygon points="-34,-6 -18,-34 14,-40 36,-18 30,18 2,34 -28,22" fill="url(#rock2)"/>
+          <g stroke="#5b5bf6" stroke-width="1.3" opacity=".6" fill="none"><path d="M-18 -34 L2 -6 L36 -18"/><path d="M2 -6 L-28 22"/><path d="M2 -6 L2 34"/><path d="M2 -6 L30 18"/></g>
+          <polygon points="-18,-34 14,-40 2,-6" fill="#34356a"/>
+        </g>
+        <g>
+          <polygon points="86,178 110,150 128,170 116,210 92,206" fill="url(#rock2)"/><polygon points="248,170 276,150 296,184 272,206 250,194" fill="url(#rock2)"/>
+          <polygon points="150,128 168,104 186,124 178,156 154,152" fill="url(#rock2)"/>
+          <polygon points="44,256 64,242 74,266 56,278" fill="#0b0b0f"/><polygon points="300,250 318,238 326,262 306,272" fill="#0b0b0f"/>
+          <polygon points="208,150 222,134 234,150 226,170" fill="#0b0b0f" opacity=".82"/>
+        </g>
+        <g fill="#5b5bf6" opacity=".5"><polygon points="130,96 140,90 142,102 132,104"/><polygon points="232,108 242,102 244,114 234,116"/><polygon points="70,150 79,145 81,156 71,158"/><polygon points="286,138 295,133 297,144 287,146"/></g>
+      </svg>
+    </div>
+  </section>
 </div>
 <footer>Mneme — the trust &amp; cost layer for code. Deterministic · Signed · Local-first.<br/><span id="copyr">© Mneme</span></footer>
 
 <script src="/card.js"></script>
+<script src="/local-scan.js"></script>
 <script>
 const gC = g => "g-" + (("ABCDEF".includes(g)) ? g : "C");
 const esc = s => String(s==null?"":s).replace(/[&<>]/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;"}[c]));
 
-function render(signed){
+function renderCard(signed){
   document.getElementById("out").innerHTML = window.MnemeXRay.xrayCardHTML(signed, { share: true });
   mountShare(signed.report);
 }
+function render(signed){
+  renderCard(signed);
+  mountTracking(signed.report);
+}
+
+// ── REAL-TIME TRACKING (branch-aware · poll+webhook · live SSE · drift) ──
+const brank = n => /^(main)$/.test(n)?0 : /^(master)$/.test(n)?1 : /^(develop|dev)$/.test(n)?2 : 9;
+function mountTracking(r){
+  const panel = document.getElementById("track");
+  if(!r || r.subject.kind !== "git-url"){ panel.style.display="none"; return; }
+  const gitUrl = r.subject.ref;
+  panel.style.display="block";
+  panel.innerHTML = `<div class="thead"><span class="ticon">🛰</span><b>Live tracking</b><span class="tnew">new</span></div>
+  <div class="thelp">Pick a branch and press <b>Track live</b> — when you, a teammate, or an AI pushes, this report <b>re-scans itself</b> and shows what changed. No re-click. <span class="muted">(What you get → see “AI Auditor for your team” below.)</span></div>
+  <div class="trow">
+    <span class="tlabel">Branch</span>
+    <select id="tbranch"><option value="">loading branches…</option></select>
+    <button id="ttoggle" class="tbtn off">● Track live</button>
+    <span id="tstate" class="tlabel"></span>
+  </div>
+  <div id="tdrift" class="drift"></div>
+  <div id="ttl" class="tl"></div>
+  <div id="tnote" class="thelp" style="display:none"></div>`;
+  fetch("/api/branches?url="+encodeURIComponent(gitUrl)).then(x=>x.json()).then(d=>{
+    const sel=document.getElementById("tbranch"); if(!sel) return;
+    const names=((d&&d.branches)||[]).map(b=>b.name);
+    if(!names.length){ sel.innerHTML='<option value="">default branch</option>'; return; }
+    names.sort((a,b)=>brank(a)-brank(b)||a.localeCompare(b));
+    sel.innerHTML=names.map(n=>`<option value="${esc(n)}"${n===r.subject.branch?" selected":""}>${esc(n)}</option>`).join("");
+  }).catch(()=>{ const sel=document.getElementById("tbranch"); if(sel) sel.innerHTML='<option value="">default branch</option>'; });
+
+  let es=null; const history=[];
+  const toggle=document.getElementById("ttoggle");
+  const stateEl=()=>document.getElementById("tstate");
+  const noteEl=()=>document.getElementById("tnote");
+  function stop(){ if(es){es.close();es=null;} toggle.className="tbtn off"; toggle.textContent="● Track live"; stateEl().textContent="stopped"; const n=noteEl(); if(n) n.style.display="none"; const sel=document.getElementById("tbranch"); if(sel) sel.disabled=false; }
+  function showDrift(d){ const el=document.getElementById("tdrift"); if(!el||!d) return; el.className="drift "+d.drift; el.style.display="block"; el.textContent=((d.highlights&&d.highlights[0])||("changed → grade "+d.gradeTo))+"  ·  just now"; }
+  function pushTL(d){ history.push(d); const el=document.getElementById("ttl"); if(!el) return; el.innerHTML='<span class="tlabel">Timeline</span> '+history.slice(-14).map(h=>{const c=h.drift==="degraded"?"deg":h.drift==="improved"?"imp":""; return '<span class="pill '+c+'">'+esc(h.gradeTo)+(h.newSecretLeaks>0?" 🔴":"")+'</span>';}).join(" "); }
+  function startSSE(id, branch){
+    es=new EventSource("/api/track/"+id+"/stream");
+    toggle.className="tbtn stop"; toggle.textContent="Stop"; toggle.disabled=false;
+    const sel=document.getElementById("tbranch"); if(sel) sel.disabled=true; // lock branch while LIVE
+    stateEl().innerHTML='<span class="live"><span class="dot"></span>LIVE · '+esc(branch||"default")+'</span>';
+    const n=noteEl(); if(n){ n.style.display="block"; n.innerHTML='✓ <b>Now monitoring '+esc(branch||"the default branch")+'.</b> Leave this tab open to watch changes appear here live. The monitor keeps running on the server even if you close the tab — come back and X-Ray this same repo to reconnect. <span class="muted">Switching repo or branch starts a separate monitor; a refresh reconnects this view.</span>'; }
+    es.addEventListener("update", ev=>{ try{ const p=JSON.parse(ev.data); renderCard(p.signed); showDrift(p.delta); pushTL(p.delta);}catch{} });
+    // EventSource auto-reconnects on error; keep the LIVE state.
+  }
+  toggle.addEventListener("click", async ()=>{
+    if(es){ stop(); return; }
+    const branch=document.getElementById("tbranch").value||undefined;
+    toggle.disabled=true; toggle.textContent="starting…";
+    try{
+      const res=await fetch("/api/track",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({gitUrl,branch})});
+      const data=await res.json();
+      if(!res.ok){ stateEl().textContent=data.error||"failed"; toggle.disabled=false; toggle.textContent="● Track live"; return; }
+      startSSE(data.trackId, branch);
+    }catch(e){ stateEl().textContent=String(e); toggle.disabled=false; toggle.textContent="● Track live"; }
+  });
+}
 
 // share row: permalink + an embeddable badge (the viral loop)
 function mountShare(r){
@@ -367,7 +553,7 @@ document.getElementById("savekey").addEventListener("click", ()=>{
 });
 
 let tab="board", offset=0, loaded=[];
-const PAGE=20;
+const PAGE=5;
 function fmtDate(s){ if(!s) return "—"; const d=new Date(s); return isNaN(d)?"—":d.toLocaleDateString(undefined,{year:"numeric",month:"short",day:"numeric"}); }
 function rowHTML(b){
   const lock = b.visibility==="private" ? '<span class="lock" title="private — only you can open this">🔒</span>' : "";
@@ -397,16 +583,18 @@ async function loadList(reset=true){
   }
   try{
     const data=await fetchPage(offset);
-    loaded=loaded.concat(data.items||[]);
-    if(loaded.length===0){
-      el.innerHTML=`<div class="bitem muted">${tab==="mine"?"Nothing here yet — run an <b>X-Ray</b> or <b>📦 AI Pack</b> above and it appears here automatically. (Private folder? use the local Browse panel.)":"No reports yet — be the first."}</div>`;
+    const items=data.items||[];
+    if((data.total||0)===0){
+      el.innerHTML=`<div class="bitem muted">${tab==="mine"?"Nothing here yet — run an <b>X-Ray</b> or <b>📦 AI Pack</b> above and it appears here automatically. (Private folder? use the Choose-a-folder panel.)":"No reports yet — be the first."}</div>`;
       return;
     }
-    const more = (data.offset+data.limit) < data.total;
-    el.innerHTML = `<div class="listbox">${loaded.map(rowHTML).join("")}</div>`
-      + `<div class="listfoot"><span class="muted">${loaded.length} of ${data.total} repos</span>${more?'<button class="moreb" id="moreb">Load more</button>':""}</div>`;
+    const start=data.offset+1, end=data.offset+items.length;
+    const hasPrev=data.offset>0, hasNext=(data.offset+data.limit)<data.total;
+    el.innerHTML = `<div class="listbox">${items.map(rowHTML).join("")}</div>`
+      + `<div class="listfoot"><span class="muted">${start}–${end} of ${data.total} repos</span><span class="pagenav"><button class="moreb" id="prevb"${hasPrev?"":" disabled"}>← Prev</button><button class="moreb" id="nextb"${hasNext?"":" disabled"}>Next →</button></span></div>`;
     el.querySelectorAll(".bitem[data-fp]").forEach(n=>n.addEventListener("click",()=>openReport(n.dataset.fp, n.dataset.priv==="1")));
-    const mb=document.getElementById("moreb"); if(mb) mb.addEventListener("click",()=>{ offset+=PAGE; loadList(false); });
+    const pb=document.getElementById("prevb"); if(pb&&hasPrev) pb.addEventListener("click",()=>{ offset=Math.max(0,offset-PAGE); loadList(false); window.scrollTo({top:document.getElementById("board").offsetTop-80,behavior:"smooth"}); });
+    const nb=document.getElementById("nextb"); if(nb&&hasNext) nb.addEventListener("click",()=>{ offset+=PAGE; loadList(false); window.scrollTo({top:document.getElementById("board").offsetTop-80,behavior:"smooth"}); });
   }catch{ el.innerHTML='<div class="bitem muted">Could not load.</div>'; }
 }
 async function openReport(fp, isPrivate){
@@ -453,9 +641,51 @@ async function detectBridge(){
   try{
     const ctrl=new AbortController(); const t=setTimeout(()=>ctrl.abort(),1200);
     const r=await fetch(BRIDGE+"/bridge/ping",{signal:ctrl.signal}); clearTimeout(t);
-    if(r.ok){ document.getElementById("localbox").classList.add("on"); }
-  }catch{ /* no local agent — silent */ }
+    if(r.ok){ // full-report bridge is up → light up the green dot + the bridge row
+      document.getElementById("localbox").classList.add("connected");
+      const h=document.getElementById("localhead"); if(h) h.textContent="— local agent connected · full signed report available";
+      const br=document.getElementById("bridgerow"); if(br) br.style.display="flex";
+    }
+  }catch{ /* no local agent — the zero-install Choose-folder path still works */ }
+}
+// ---- ZERO-INSTALL local scan (File System Access API) — no terminal, no upload ----
+const copyBtn=document.getElementById("copybridge");
+if(copyBtn) copyBtn.addEventListener("click",async()=>{ try{ await navigator.clipboard.writeText("npx @mneme-ai/xray bridge"); const o=copyBtn.textContent; copyBtn.textContent="Copied ✓"; setTimeout(()=>copyBtn.textContent=o,1200);}catch{} });
+function renderLocalScan(r){
+  const s=r.summary, out=document.getElementById("localout"); if(!out) return;
+  const sec=s.secrets, secCls=sec.totalFindings>0?"bad":"ok";
+  const langs=s.langs.map(([e,n])=>`<span class="pill">${esc(e)} ${n}</span>`).join(" ");
+  const g=s.git, vit = !g.has ? "" : (s.dormantDays>365?"dormant":s.dormantDays>120?"slowing":"active");
+  const gitRows = g.has ? `
+    <div class="lsrow"><span class="lsk">Bus factor</span><span class="lsv ${g.authors===1?"bad":""}"><b>${g.authors}</b> author${g.authors===1?" — single point of failure":"s"} · top author ${Math.round(g.topShare*100)}% of ${g.commits} commits</span></div>
+    <div class="lsrow"><span class="lsk">Vitality</span><span class="lsv ${vit==="dormant"?"bad":""}"><b>${vit}</b> · ${s.ageDays}d span · last activity ${s.dormantDays}d ago</span></div>`
+    : `<div class="lsrow"><span class="lsk">Git history</span><span class="lsv muted">— no .git reflog in this folder (bus factor / vitality unavailable)</span></div>`;
+  out.innerHTML=`<div class="lscard">
+    <div class="lstop"><div class="lsgrade g-${("ABCDEF".includes(s.grade)?s.grade:"C")}">${esc(s.grade)}</div>
+      <div><div class="lsh"><b>📂 ${esc(r.folder)}</b></div><div class="muted" style="font-size:12px">scanned in your browser · ${r.files} files · nothing uploaded</div></div></div>
+    <div class="lsrow"><span class="lsk">Secrets</span><span class="lsv ${secCls}"><b>${sec.totalFindings}</b> in production code${sec.excludedTestHits?` · ${sec.excludedTestHits} in tests (excluded)`:""}</span></div>
+    ${sec.hits.length?`<div class="lshits">${sec.hits.slice(0,6).map(h=>`<div>🔴 ${esc(h.kind)} — ${esc(h.file)}:${h.line}</div>`).join("")}</div>`:`<div class="lsok">✓ no leaked credentials in production code</div>`}
+    ${gitRows}
+    <div class="lsrow"><span class="lsk">Dependencies</span><span class="lsv"><b>${s.deps.total}</b> total · ${s.deps.deps} deps · ${s.deps.devDeps} dev</span></div>
+    <div class="lsrow"><span class="lsk">Complexity</span><span class="lsv"><b>${(s.symbols||0).toLocaleString()}</b> symbols · ${s.filesScanned} files · ${s.loc.toLocaleString()} lines</span></div>
+    <div class="lsrow"><span class="lsk">Languages</span><span class="lsv">${langs||"—"}</span></div>
+    <div class="lsnote">Computed <b>in your browser</b> (unsigned, nothing uploaded). Secrets · dependencies · complexity from your files; bus factor &amp; vitality from <code>.git</code> reflog. The full <b>signed</b> report (dep mortality, hotspots, coupling) needs a public URL above or the bridge.</div>
+  </div>`;
 }
+const pick=document.getElementById("pickfolder");
+if(pick) pick.addEventListener("click", async ()=>{
+  const note=document.getElementById("picknote");
+  if(!window.MnemeLocalScan || !window.MnemeLocalScan.supported){
+    if(note) note.textContent="Your browser does not support in-page folder access (try Chrome or Edge), or use the FULL report option below.";
+    return;
+  }
+  pick.disabled=true; const o=pick.textContent; pick.innerHTML='<span class="spin"></span>Scanning locally…';
+  try{
+    const r=await window.MnemeLocalScan.pickAndScan();
+    renderLocalScan(r);
+  }catch(e){ if(String(e&&e.name)!=="AbortError" && String(e&&e.message)!=="UNSUPPORTED" && note) note.textContent="Couldn't read that folder: "+String(e&&e.message||e); }
+  finally{ pick.disabled=false; pick.textContent=o; }
+});
 document.getElementById("localgo").addEventListener("click", async ()=>{
   const p=document.getElementById("localpath").value.trim();
   const err=document.getElementById("err"), btn=document.getElementById("localgo");

package/public/local-scan.js

@@ -0,0 +1,153 @@
+/**
+ * In-browser LOCAL FOLDER scan — zero install, no terminal, NOTHING uploaded.
+ *
+ * A website cannot read your disk on its own (browser security). The File System
+ * Access API is the honest exception: the user clicks "Choose folder", the OS
+ * shows a native picker, and ONLY the folder they grant is readable — and only by
+ * code running in their own tab. We read the files in the browser, run the
+ * deterministic file-content analyzers (secrets · dependencies · size), and render
+ * the result locally. The bytes never leave the machine.
+ *
+ * Honest scope: git-history signals (bus factor · vitality · hotspots · coupling)
+ * need git, which a browser cannot run — those need the public URL or the bridge.
+ * This is the instant, no-install "what's in this folder" scan.
+ */
+(function (g) {
+  // ── pure, deterministic analyzers (unit-testable, no DOM) ──────────────────
+  const SECRET_PATTERNS = [
+    { kind: "AWS access key", re: /\bAKIA[0-9A-Z]{16}\b/ },
+    { kind: "AWS secret key", re: /\b[A-Za-z0-9/+]{40}\b(?=.*aws|.*secret)/i },
+    { kind: "GitHub token", re: /\bgh[pousr]_[A-Za-z0-9]{36,}\b/ },
+    { kind: "OpenAI key", re: /\bsk-[A-Za-z0-9]{20,}\b/ },
+    { kind: "Anthropic key", re: /\bsk-ant-[A-Za-z0-9_-]{20,}\b/ },
+    { kind: "Slack token", re: /\bxox[baprs]-[A-Za-z0-9-]{10,}\b/ },
+    { kind: "Google API key", re: /\bAIza[0-9A-Za-z_-]{35}\b/ },
+    { kind: "private key block", re: /-----BEGIN (?:RSA |EC |OPENSSH |DSA |PGP )?PRIVATE KEY-----/ },
+    { kind: "JWT", re: /\beyJ[A-Za-z0-9_-]{10,}\.[A-Za-z0-9_-]{10,}\.[A-Za-z0-9_-]{10,}\b/ },
+  ];
+  // test/fixture/doc files are sample data, not leaks — excluded from the count
+  const TEST_RE = /(^|\/)(test|tests|__tests__|fixtures?|examples?|docs?|spec|mocks?)(\/|$)|\.(test|spec)\.|\.md$|\.lock$/i;
+  const TEXT_EXT = /\.(ts|tsx|js|jsx|mjs|cjs|py|go|rs|java|c|h|cpp|cc|rb|php|cs|kt|swift|scala|sh|bash|env|json|ya?ml|toml|ini|cfg|xml|gradle|properties|tf|sql|vue|svelte)$/i;
+  const SKIP_DIR = /(^|\/)(node_modules|\.git|dist|build|vendor|\.next|coverage|__pycache__|\.venv|target)(\/|$)/;
+
+  function scanSecretsText(text, relPath) {
+    const isTest = TEST_RE.test(relPath || "");
+    const hits = [];
+    const lines = String(text).split("\n");
+    for (let i = 0; i < lines.length; i++) {
+      for (const p of SECRET_PATTERNS) {
+        if (p.re.test(lines[i])) { hits.push({ kind: p.kind, file: relPath, line: i + 1, isTest }); }
+      }
+    }
+    return hits;
+  }
+
+  function parseDeps(pkgJsonText) {
+    try {
+      const p = JSON.parse(pkgJsonText);
+      const d = Object.keys(p.dependencies || {});
+      const dev = Object.keys(p.devDependencies || {});
+      return { total: d.length + dev.length, deps: d.length, devDeps: dev.length, names: [...d, ...dev].slice(0, 60) };
+    } catch { return { total: 0, deps: 0, devDeps: 0, names: [] }; }
+  }
+
+  // structural complexity — count declared symbols (deterministic, regex-based)
+  const SYMBOL_RE = /\b(function\s+\w+|class\s+\w+|interface\s+\w+|def\s+\w+|func\s+\w+|fn\s+\w+|export\s+(?:const|function|class|default)|=>\s*[{(])/g;
+  function countSymbols(text) { const m = String(text).match(SYMBOL_RE); return m ? m.length : 0; }
+
+  // REAL git signals from .git/logs/HEAD (the reflog — plain text the browser can read).
+  // Each line: <old> <new> <Name> <email> <unixTs> <tz>\t<message>. Honest: this is
+  // HEAD-movement history (commits/resets/merges), a sound approximation of authorship
+  // + activity window without running git or parsing packfiles.
+  function parseGitLog(text) {
+    const authors = {}; let commits = 0, firstTs = 0, lastTs = 0;
+    for (const line of String(text || "").split("\n")) {
+      const m = line.match(/^[0-9a-f]+\s+[0-9a-f]+\s+(.+?)\s+<[^>]*>\s+(\d+)\s/);
+      if (!m) continue;
+      commits++;
+      authors[m[1]] = (authors[m[1]] || 0) + 1;
+      const ts = parseInt(m[2], 10) * 1000;
+      if (!firstTs || ts < firstTs) firstTs = ts;
+      if (ts > lastTs) lastTs = ts;
+    }
+    const names = Object.keys(authors);
+    const top = names.length ? Math.max(...names.map((n) => authors[n])) : 0;
+    return { commits, authors: names.length, topShare: commits ? top / commits : 0, firstTs, lastTs, has: commits > 0 };
+  }
+
+  const GRADES = ["A", "B", "C", "D", "F"];
+  /** A deterministic grade from the signals available IN-BROWSER. Honest: lighter
+   *  than the full server grade (no dep-mortality / hotspots), but real. */
+  function gradeLocal(s) {
+    let pen = 0;
+    if (s.secrets.totalFindings > 0) pen += s.secrets.totalFindings >= 3 ? 4 : s.secrets.totalFindings >= 1 ? 3 : 0; // a leaked secret is severe
+    if (s.git.has) { if (s.git.authors === 1) pen += 1; if (s.git.topShare > 0.8) pen += 1; if (s.ageDays > 0 && s.dormantDays > 365) pen += 1; }
+    return GRADES[Math.min(pen, 4)];
+  }
+
+  /** Compose a deterministic local report from already-read files + .git reflog. Pure. */
+  function summarize(files, gitLog, nowMs) {
+    // files: [{ rel, text }]
+    let loc = 0, scanned = 0, testHits = 0, symbols = 0;
+    const prodHits = [];
+    const langs = {};
+    let deps = { total: 0, deps: 0, devDeps: 0, names: [] };
+    for (const f of files) {
+      if (SKIP_DIR.test(f.rel)) continue;
+      if (/(^|\/)package\.json$/.test(f.rel) && !/node_modules/.test(f.rel)) deps = parseDeps(f.text);
+      if (!TEXT_EXT.test(f.rel)) continue;
+      scanned++;
+      loc += f.text.split("\n").length;
+      symbols += countSymbols(f.text);
+      const ext = (f.rel.match(/\.([a-z0-9]+)$/i) || [, "?"])[1].toLowerCase();
+      langs[ext] = (langs[ext] || 0) + 1;
+      for (const h of scanSecretsText(f.text, f.rel)) { if (h.isTest) testHits++; else prodHits.push(h); }
+    }
+    const git = parseGitLog(gitLog);
+    const now = nowMs || (git.lastTs || 0);
+    const ageDays = git.has && git.firstTs ? Math.max(0, Math.round((git.lastTs - git.firstTs) / 86400000)) : 0;
+    const dormantDays = git.has && git.lastTs && now ? Math.max(0, Math.round((now - git.lastTs) / 86400000)) : 0;
+    const s = {
+      filesScanned: scanned, loc, symbols, deps, git, ageDays, dormantDays,
+      secrets: { totalFindings: prodHits.length, excludedTestHits: testHits, hits: prodHits.slice(0, 20) },
+      langs: Object.entries(langs).sort((a, b) => b[1] - a[1]).slice(0, 8),
+    };
+    s.grade = gradeLocal(s);
+    return s;
+  }
+
+  g.MnemeLocalScan = { scanSecretsText, parseDeps, countSymbols, parseGitLog, gradeLocal, summarize, _patterns: SECRET_PATTERNS };
+
+  // ── File System Access glue (browser-only; needs a user gesture + HTTPS) ────
+  g.MnemeLocalScan.supported = typeof g.showDirectoryPicker === "function";
+
+  async function readDir(dirHandle, prefix, out, cap) {
+    for await (const [name, handle] of dirHandle.entries()) {
+      const rel = prefix ? prefix + "/" + name : name;
+      if (SKIP_DIR.test(rel) || name.startsWith(".")) continue;
+      if (out.length >= cap) return;
+      if (handle.kind === "directory") { await readDir(handle, rel, out, cap); }
+      else if (TEXT_EXT.test(rel) || /(^|\/)package\.json$/.test(rel)) {
+        try { const file = await handle.getFile(); if (file.size <= 2 * 1024 * 1024) out.push({ rel, text: await file.text() }); } catch { /* skip unreadable */ }
+      }
+    }
+  }
+
+  /** Open the OS folder picker, read text files in-browser, return the summary +
+   *  the folder name. Throws on user-cancel (caller catches). cap bounds the walk. */
+  g.MnemeLocalScan.pickAndScan = async function pickAndScan(cap = 4000) {
+    if (!g.MnemeLocalScan.supported) throw new Error("UNSUPPORTED");
+    const dir = await g.showDirectoryPicker(); // native picker — user grants ONE folder
+    const files = [];
+    await readDir(dir, "", files, cap);
+    // REAL git signals: read .git/logs/HEAD (plain text) for authors / commits / age
+    let gitLog = "";
+    try {
+      const gitDir = await dir.getDirectoryHandle(".git");
+      const logsDir = await gitDir.getDirectoryHandle("logs");
+      const headFile = await logsDir.getFileHandle("HEAD");
+      gitLog = await (await headFile.getFile()).text();
+    } catch { /* not a git repo, or no reflog — file signals only */ }
+    return { folder: dir.name || "folder", files: files.length, summary: summarize(files, gitLog, Date.now()) };
+  };
+})(typeof window !== "undefined" ? window : globalThis);

package/public/report.html

@@ -22,11 +22,22 @@
   .grade{width:72px;height:72px;border-radius:16px;display:grid;place-items:center;font-size:36px;font-weight:740;color:#fff;flex:none;box-shadow:inset 0 -2px 6px rgba(0,0,0,.12)}
   .g-A{background:linear-gradient(135deg,#1fb255,#15863f)}.g-B{background:linear-gradient(135deg,#7bb736,#5c8f1e)}
   .g-C{background:linear-gradient(135deg,#eaa83a,#c9821a)}.g-D{background:linear-gradient(135deg,#f0742e,#d4571a)}.g-F{background:linear-gradient(135deg,#f43f5e,#be123c)}
-  .top .repo{font-size:22px;font-weight:640;letter-spacing:-.02em;color:var(--ink);word-break:break-all;line-height:1.2}.top .head{color:var(--sub);font-size:14px;margin-top:4px}
+  .top .repo{font-size:22px;font-weight:640;letter-spacing:-.02em;color:var(--ink);word-break:break-all;line-height:1.2}.top .repobr{font-size:13px;font-weight:600;color:var(--a);background:var(--a-soft);border-radius:6px;padding:1px 7px;vertical-align:middle}.top .repourl{display:inline-block;font-size:12.5px;color:var(--a);text-decoration:none;margin-top:3px;word-break:break-all;font-family:ui-monospace,Menlo,monospace}.top .repourl:hover{text-decoration:underline}.top .head{color:var(--sub);font-size:14px;margin-top:4px}
   .trustbar{display:flex;align-items:center;gap:14px;padding:13px 30px;background:#f0fdf4;border-bottom:1px solid #dcfce7;flex-wrap:wrap}
   .hgauge{display:inline-flex;align-items:center;gap:8px;font-weight:680;color:#15803d;font-size:14px}
   .hdot{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
   .htext{font-size:12.5px;color:#3f6b4e;line-height:1.5}.htext b{color:#14532d;font-weight:640}
+  .membrane{display:flex;border-bottom:1px solid #eef0f2;background:#fafbfc}
+  .mp{flex:1;padding:11px 18px;border-right:1px solid #eef0f2;display:flex;flex-direction:column;gap:3px}.mp:last-child{border-right:0}
+  .mpk{font-size:10.5px;letter-spacing:.06em;color:#8a909a;font-weight:700}
+  .mpv{font-size:12.5px;color:#2b2f36;font-weight:560;display:flex;align-items:center;gap:7px}
+  .triage{padding:14px 30px 4px}
+  .triage-h{font-size:13px;font-weight:680;color:#b45309;margin-bottom:9px}.triage-sub{font-weight:400;color:#9aa0a6;font-size:11.5px}
+  .triage.clearall{padding:13px 30px;color:#15803d;font-weight:560;font-size:13px;background:#f0fdf4;border-bottom:1px solid #dcfce7}
+  .ti{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-top:1px solid #f1f2f4}
+  .ti-sev{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;min-width:62px;text-align:center}
+  .ti.critical .ti-sev{background:#fee2e2;color:#b91c1c}.ti.warn .ti-sev{background:#fef3c7;color:#b45309}.ti.info .ti-sev{background:#e0e7ff;color:#4338ca}
+  .ti-body{flex:1;min-width:0}.ti-f{font-size:13px;color:#1f2329}.ti-p{font-size:11px;color:#9aa0a6;margin-top:2px;font-family:ui-monospace,Menlo,monospace}
   .rows{padding:6px 30px 16px}
   .row{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--line2);align-items:baseline}.row:last-child{border-bottom:0}
   .row .k{width:138px;flex:none;display:flex;flex-direction:column;gap:4px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);font-weight:700}
@@ -34,7 +45,8 @@
   .spark{font-family:ui-monospace,Menlo,monospace;letter-spacing:1px;color:var(--a)}
   .muted{color:var(--sub)}
   .row .v{font-size:15px;color:var(--ink2)}.row .v .big{font-weight:660;color:var(--ink);font-size:16px}
-  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:148px;overflow-y:auto}
+  .chips::-webkit-scrollbar{width:8px}.chips::-webkit-scrollbar-thumb{background:#d7dbe0;border-radius:8px}
   .chip{font-size:12px;padding:4px 10px;border-radius:8px;background:var(--soft);border:1px solid var(--line);color:#5c616b}
   .chip.bad{background:#fff1f3;border-color:#ffe0e6;color:var(--red)}.chip.warn{background:#fff8ed;border-color:#fde6cc;color:#b45309}
   .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 30px;background:var(--soft);font-size:13px;color:var(--sub);flex-wrap:wrap}