npm - @slack/radar-mcp - Versions diffs - 1.3.0 → 1.5.0 - Mend

@slack/radar-mcp 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md +25 -14
package/dist/mcp/index.js +565 -374
package/dist/mcp/tools.js +135 -10
package/dist/shared/android.d.ts +11 -2
package/dist/shared/android.js +17 -6
package/dist/shared/constants.d.ts +20 -0
package/dist/shared/constants.js +20 -0
package/dist/shared/db.d.ts +75 -0
package/dist/shared/db.js +403 -0
package/dist/shared/screen.d.ts +132 -0
package/dist/shared/screen.js +576 -0
package/dist/web/bin.js +64 -30
package/dist/web/log-session.d.ts +89 -0
package/dist/web/log-session.js +144 -0
package/dist/web/public/index.html +1065 -712
package/dist/web/server.d.ts +29 -0
package/dist/web/server.js +900 -28
package/dist/web/spec.d.ts +91 -0
package/dist/web/spec.js +153 -0
package/package.json +2 -1

package/dist/web/public/index.html CHANGED Viewed

@@ -1,729 +1,1082 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>Slack Radar</title>
-  <style>
-    * { box-sizing: border-box; }
-    html, body {
-      margin: 0;
-      padding: 0;
-      height: 100%;
-      overflow: hidden;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
-      font-size: 13px;
-      background: #ffffff;
-      color: #1d1c1d;
-      display: flex;
-      flex-direction: column;
-    }
-    header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 10px 16px;
-      background: #f8f8f8;
-      border-bottom: 1px solid #e0e0e0;
-    }
-    header h1 {
-      margin: 0;
-      font-size: 15px;
-      font-weight: 600;
-      color: #1d1c1d;
-    }
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 11px;
-      color: #616061;
-      padding: 3px 10px;
-      background: #eeeeee;
-      border-radius: 10px;
-    }
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #e01e5a;
-    }
-    .status-dot.connected { background: #2bac76; }
-    .status-dot.paused { background: #de9f19; }
-    .tabs {
-      display: flex;
-      background: #f8f8f8;
-      border-bottom: 1px solid #e0e0e0;
-    }
-    .tab {
-      padding: 10px 16px;
-      cursor: pointer;
-      color: #616061;
-      border-bottom: 2px solid transparent;
-      user-select: none;
-      font-weight: 500;
-    }
-    .tab:hover { color: #1d1c1d; }
-    .tab.active {
-      color: #1d1c1d;
-      border-bottom-color: #1264a3;
-    }
-    .tab .count {
-      margin-left: 6px;
-      font-size: 11px;
-      color: #868686;
-    }
-    .toolbar {
-      display: flex;
-      gap: 8px;
-      padding: 8px 16px;
-      background: #ffffff;
-      border-bottom: 1px solid #e0e0e0;
-      align-items: center;
-    }
-    .toolbar input, .toolbar button, .toolbar select {
-      padding: 6px 10px;
-      border: 1px solid #d0d0d0;
-      border-radius: 4px;
-      background: #ffffff;
-      color: #1d1c1d;
-      font-size: 12px;
-      font-family: inherit;
-    }
-    .toolbar input { flex: 1; }
-    .toolbar input:focus { outline: none; border-color: #1264a3; }
-    .toolbar button {
-      cursor: pointer;
-      user-select: none;
-    }
-    .toolbar button:hover { background: #f0f0f0; }
-    .toolbar button.active { background: #1264a3; border-color: #1264a3; color: #fff; }
-    .main {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      overflow: hidden;
-    }
-    .list {
-      flex: 1;
-      min-height: 0;
-      overflow-y: auto;
-      background: #ffffff;
-    }
-    .row {
-      display: grid;
-      grid-template-columns: 90px 60px 1fr 120px;
-      gap: 12px;
-      padding: 6px 16px;
-      border-bottom: 1px solid #f0f0f0;
-      cursor: pointer;
-      font-family: "SF Mono", Menlo, monospace;
-      font-size: 12px;
-      align-items: center;
-    }
-    .row:hover { background: #f7f7f7; }
-    .row.selected { background: #e3f1fa; }
-    .row .time { color: #868686; }
-    .row .status { text-align: right; color: #868686; }
-    .row .status.ok { color: #2bac76; }
-    .row .status.err { color: #e01e5a; }
-    .row .status.warn { color: #de9f19; }
-    .row .main-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .row .method, .row .direction {
-      font-weight: 600;
-      color: #616061;
-    }
-    .row .method.POST { color: #1264a3; }
-    .row .method.GET { color: #2bac76; }
-    .row .method.PUT { color: #de9f19; }
-    .row .method.DELETE { color: #e01e5a; }
-    .row .direction.IN { color: #2bac76; }
-    .row .direction.OUT { color: #1264a3; }
-    .detail {
-      flex: 1;
-      min-height: 0;
-      overflow-y: auto;
-      background: #fafafa;
-      border-left: 1px solid #e0e0e0;
-      padding: 16px;
-      font-family: "SF Mono", Menlo, monospace;
-      font-size: 12px;
-      white-space: pre-wrap;
-      word-break: break-word;
-      color: #1d1c1d;
-    }
-    .detail .placeholder {
-      color: #868686;
-      font-family: inherit;
-      font-style: italic;
-    }
-    .detail h3 {
-      margin: 12px 0 6px 0;
-      font-family: inherit;
-      font-size: 12px;
-      font-weight: 600;
-      color: #616061;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    .detail h3:first-child { margin-top: 0; }
-    .detail-actions {
-      position: sticky;
-      top: 0;
-      background: #fafafa;
-      padding: 4px 0 8px;
-      z-index: 1;
-      display: flex;
-      gap: 6px;
-    }
-    .detail-actions button {
-      font-size: 11px;
-      padding: 3px 10px;
-      cursor: pointer;
-      background: #e8e8e8;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      color: #333;
-    }
-    .detail-actions button:hover { background: #ddd; }
-    .detail-actions button.copied { background: #2bac76; color: #fff; border-color: #2bac76; }
-    .empty {
-      padding: 40px 16px;
-      text-align: center;
-      color: #868686;
-    }
-    .marker {
-      padding: 6px 16px;
-      color: #868686;
-      font-style: italic;
-      font-size: 11px;
-      text-align: center;
-      border-top: 1px dashed #d0d0d0;
-      border-bottom: 1px dashed #d0d0d0;
-      background: #fafafa;
-    }
-    .tab-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
-    .tab-panel.active { display: flex; }
-  </style>
-</head>
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"/>
+<title>Slack Radar Dashboard</title>
+<style>
+  :root { color-scheme: dark; } * { box-sizing: border-box; }
+  body { margin:0; font:15px/1.4 ui-monospace,Menlo,Consolas,monospace; background:#0b0f14; color:#dfe7ef; padding:28px; }
+  h1 { font-size:15px; font-weight:600; color:#8aa0b4; margin:0 0 14px; letter-spacing:.04em; }
+  .live { color:#39d98a; }
+  .conn { font-size:13px; font-weight:600; }
+  .conn.connected { color:#39d98a; }
+  .conn.waiting { color:#ffb454; }
+  .reconnect { background:#3a2a10; border:1px solid #ffb454; color:#ffb454; border-radius:8px; padding:4px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; margin-left:8px; }
+  .reconnect:hover { background:#4a360f; } .reconnect:disabled { opacity:.6; cursor:default; }
+  .modebar { display:flex; gap:6px; margin:10px 0 6px; flex-wrap:wrap; }
+  .modebtn { background:#121925; border:1px solid #243244; color:#8aa0b4; border-radius:8px; padding:6px 14px; font:inherit; font-size:12.5px; cursor:pointer; }
+  .modebtn:hover { border-color:#39d98a; color:#dfe7ef; }
+  .modebtn.active { background:#1c3a2a; border-color:#39d98a; color:#39d98a; font-weight:600; }
+  .modebtn.custom { margin-left:10px; border-style:dashed; color:#b39ddb; } .modebtn.custom:hover { border-color:#b39ddb; color:#d6c8f0; }
+  .modebtn.custom.active { background:#241c3a; border-color:#b39ddb; color:#d6c8f0; }
+  .status { font-size:12px; color:#5f7186; margin-bottom:18px; min-height:16px; }
+  .status.err { color:#ff7b72; } .status.think { color:#ffd479; } .status.ready { color:#39d98a; }
+  .sub { margin-bottom:22px; }
+  .sub .summary { display:block; color:#dfe7ef; font-size:15px; font-weight:600; margin-bottom:4px; }
+  .sub .tech { display:block; color:#5f7186; font-size:11.5px; }
+  .filters { max-width:1100px; margin-bottom:18px; background:#0e151e; border:1px solid #1e2a3a; border-radius:10px; padding:6px 14px; }
+  .filters summary { cursor:pointer; color:#8aa0b4; font-size:12px; font-weight:600; padding:6px 0; }
+  .filters .fsec { color:#5f7186; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; margin:12px 0 6px; }
+  .filters .frow { display:flex; gap:8px; align-items:center; margin:6px 0; }
+  .filters .frow label { color:#5f7186; font-size:12px; min-width:96px; }
+  .filters input, .filters select { background:#121925; border:1px solid #243244; border-radius:7px; color:#e8f0f8; padding:6px 9px; font:inherit; font-size:12px; }
+  .filters input { flex:1; min-width:0; } .filters input:focus, .filters select:focus { outline:none; border-color:#39d98a; }
+  .filters .matchrow .f_mk { flex:0 0 130px; } .filters .matchrow .f_mvwrap { flex:1; display:flex; } .filters .matchrow .f_mv { flex:1; width:100%; }
+  .combo { position:relative; flex:1; display:flex; }
+  .combo .f_mv { flex:1; padding-right:24px; }
+  .combocaret { position:absolute; right:8px; top:50%; transform:translateY(-50%); color:#5f7186; font-size:10px; cursor:pointer; }
+  .combolist { display:none; position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:2px; max-height:200px; overflow:auto; background:#121925; border:1px solid #2c3e52; border-radius:7px; box-shadow:0 6px 18px rgba(0,0,0,.5); }
+  .combolist.open { display:block; }
+  .comboitem { padding:6px 10px; font-size:12px; color:#dfe7ef; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .comboitem:hover { background:#1d2c3e; color:#39d98a; }
+  .meta { color:#5f7186; font-size:11.5px; margin-bottom:8px; }
+  .filters .fdel { background:none; border:none; color:#ff6b60; cursor:pointer; font-size:13px; padding:0 4px; }
+  .filters .fadd { background:none; border:1px dashed #2c3e52; color:#8aa0b4; border-radius:7px; padding:5px 10px; font:inherit; font-size:11.5px; cursor:pointer; margin-top:4px; }
+  .filters .fapply { background:#1c3a2a; border:1px solid #39d98a; color:#39d98a; border-radius:8px; padding:7px 16px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
+  .filters .fmsg { color:#5f7186; font-size:12px; } .filters .fhint { color:#5f7186; font-size:11.5px; font-style:italic; }
+  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,190px)); gap:14px; max-width:none; align-items:start; }
+  .card { background:#121925; border:1px solid #1e2a3a; border-radius:12px; padding:12px 16px; }
+  .label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#5f7186; margin-bottom:8px; }
+  .big { font-size:36px; font-weight:700; color:#e8f0f8; font-variant-numeric:tabular-nums; line-height:1; }
+  .unit { font-size:12px; color:#5f7186; margin-left:5px; }
+  .graphcard { grid-column:1/-1; background:#121925; border:1px solid #1e2a3a; border-radius:12px; padding:14px 18px; }
+  .graphcard svg { width:100%; height:180px; display:block; background:#0e151e; border-radius:8px; margin-top:8px; }
+  .graphcard .legend { margin-top:8px; font-size:12px; }
+  .graphcard .legend span { margin-right:14px; }
+  .spark { display:flex; align-items:flex-end; gap:3px; height:60px; }
+  .bar { width:8px; background:#39d98a; border-radius:2px 2px 0 0; min-height:2px; transition:height .2s; }
+  .stage { display:flex; gap:18px; max-width:none; margin-top:18px; align-items:flex-start; }
+  .stage.split { flex-wrap:wrap; }
+  .stage.haswidth #feedwrap { flex:2 1 380px; }
+  .stage.haswidth .inspector { flex:1 1 300px; max-width:520px; }
+  .feed { background:#121925; border:1px solid #1e2a3a; border-radius:12px; padding:14px 18px; max-height:calc(100vh - 230px); overflow-y:auto; }
+  .feedbar { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
+  .feedbar input { flex:1; background:#0e151e; border:1px solid #243244; border-radius:8px; color:#e8f0f8; padding:7px 10px; font:inherit; font-size:12.5px; }
+  .feedbar input:focus { outline:none; border-color:#39d98a; }
+  .ffilterwrap { position:relative; flex:1; display:flex; }
+  .ffilterwrap input { flex:1; padding-right:26px; }
+  .ffilterclear { position:absolute; right:8px; top:50%; transform:translateY(-50%); cursor:pointer; color:#7e8ea0; background:#1c2737; border-radius:50%; width:16px; height:16px; line-height:14px; text-align:center; font-size:10px; }
+  .ffilterclear:hover { color:#fff; background:#ff5b50; }
+  .feedbar button { background:#1c2a3a; border:1px solid #2c3e52; border-radius:8px; color:#dfe7ef; padding:6px 10px; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
+  .feedbar button:hover { border-color:#39d98a; }
+  .feedbar button.paused { color:#ffb454; border-color:#ffb454; }
+  .fcount { color:#5f7186; font-size:11.5px; white-space:nowrap; }
+  .fsortlbl { color:#5f7186; font-size:12px; display:flex; align-items:center; gap:5px; white-space:nowrap; }
+  .feedbar select { background:#1c2a3a; border:1px solid #2c3e52; border-radius:8px; color:#dfe7ef; padding:6px 8px; font:inherit; font-size:12px; cursor:pointer; max-width:200px; }
+  .feedbar select:focus { outline:none; border-color:#39d98a; }
+  #fpkg { color:#7d9bd6; }
+  .chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
+  .chip { display:inline-flex; align-items:center; gap:7px; background:#141d2b; border:1px solid #2c3e52; color:#cfe0f0; border-radius:999px; padding:4px 6px 4px 11px; font-size:12px; }
+  .chip b { color:#7d9bd6; font-weight:600; } .chip .v { color:#e8f0f8; }
+  .chip .x { cursor:pointer; color:#7e8ea0; background:#1c2737; border-radius:50%; width:16px; height:16px; line-height:14px; text-align:center; font-size:11px; }
+  .chip .x:hover { color:#fff; background:#ff5b50; }
+  .row.hidden { display:none; }
+  .row { display:flex; gap:14px; padding:5px 0; border-bottom:1px solid #16202c; font-size:12.5px; }
+  .row:last-child{border-bottom:none}
+  .row.clickable{ cursor:pointer; border-radius:6px; padding-left:8px; margin-left:-8px; }
+  .row.clickable:hover{ background:#172230; }
+  .row.sel{ background:#1d2c3e; }
+  .row.breach{ background:rgba(255,59,48,.14); box-shadow:inset 3px 0 #ff3b30; }
+  .row.breach span:nth-child(3){ color:#ff6b60; font-weight:600; }
+  .breachbadge{ margin-left:auto; background:#3a1513; color:#ff8077; font-weight:700; font-size:11.5px; padding:2px 9px; border-radius:999px; white-space:nowrap; }
+  .tchip{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border-radius:4px; }
+  .t-network{ background:#13314a; color:#6cb6ff; } .t-rtm{ background:#2c1f47; color:#c39bff; } .t-clog{ background:#10332a; color:#39d98a; } .t-log{ background:#2a2a2a; color:#b0b0b0; }
+  .lvl{ font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px; }
+  .lvl-ERROR,.lvl-FATAL{ background:#3a1513; color:#ff6b60; } .lvl-WARN{ background:#3a2f10; color:#ffd479; } .lvl-INFO{ background:#10283a; color:#6cb6ff; } .lvl-DEBUG,.lvl-VERBOSE{ background:#222; color:#8aa0b4; }
+  .logpkg{ color:#7d9bd6; background:#141d2b; font-size:10.5px; padding:1px 6px; border-radius:4px; white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
+  .logtag{ color:#8aa0b4; font-weight:600; } .logmsg{ color:#cfd8e3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .t { color:#5f7186; } .dir-OUTGOING{color:#6cb6ff} .dir-INCOMING{color:#c39bff}
+  .chan { color:#8aa0b4; } .pulse{animation:p .4s} @keyframes p{from{color:#39d98a}to{}}
+  .extract { color:#ffd479; font-weight:600; margin-left:auto; max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  #flash { position:fixed; inset:0; background:#ff3b30; opacity:0; pointer-events:none; z-index:50; transition:opacity .08s; }
+  #flash.on { opacity:.38; }
+  #alertbanner { position:fixed; top:0; left:0; right:0; z-index:60; display:none; text-align:center; background:#ff3b30; color:#fff; font-weight:700; padding:10px; letter-spacing:.04em; box-shadow:0 2px 12px rgba(0,0,0,.4); }
+  #alertbanner.on { display:block; animation:slidein .15s; }
+  @keyframes slidein { from{transform:translateY(-100%)} to{transform:translateY(0)} }
+  .inspector { flex:1 1 340px; min-width:280px; background:#0e151e; border:1px solid #1e2a3a; border-radius:12px; padding:14px 18px; max-height:calc(100vh - 32px); overflow:auto; position:sticky; top:16px; align-self:flex-start; }
+  .inspector .label{ margin-bottom:10px; }
+  .inspector pre { margin:0; white-space:pre-wrap; word-break:break-word; font-size:12px; color:#cfe3d6; }
+  .inspector .empty{ color:#5f7186; font-size:12.5px; }
+  .copybar { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
+  .copybtn { background:#172a1f; border:1px solid #2c5a3e; color:#7fd6a3; border-radius:6px; padding:3px 9px; font:inherit; font-size:11.5px; cursor:pointer; }
+  .copybtn:hover { border-color:#39d98a; color:#39d98a; }
+  /* DB browser (source:"db") */
+  .dbview { display:flex; gap:16px; max-width:1180px; margin-top:8px; height:72vh; }
+  .dbside { flex:0 0 260px; overflow:auto; border:1px solid #1e2a3a; border-radius:10px; padding:12px; }
+  .dbsec { color:#5f7186; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; margin:6px 0 6px; }
+  .dbsec:not(:first-child){ margin-top:14px; }
+  .dbitem { padding:6px 9px; border-radius:7px; cursor:pointer; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .dbitem:hover { background:#172230; } .dbitem.sel { background:#1d2c3e; color:#39d98a; }
+  .dbitem .rows { float:right; color:#5f7186; font-size:11px; }
+  .dbmain { flex:1; min-width:0; display:flex; flex-direction:column; }
+  .dbqbar { display:flex; gap:8px; margin-bottom:8px; }
+  .dbqbar input { flex:1; background:#121925; border:1px solid #243244; border-radius:8px; color:#e8f0f8; padding:8px 11px; font:inherit; font-size:12.5px; }
+  .dbqbar input:focus { outline:none; border-color:#39d98a; }
+  .dbqbar button { background:#1c3a2a; border:1px solid #39d98a; color:#39d98a; border-radius:8px; padding:0 16px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
+  .dbmeta { color:#5f7186; font-size:11.5px; margin-bottom:8px; }
+  .dbprivacy { background:#2a2112; border:1px solid #6b5320; color:#e8c879; border-radius:8px; padding:8px 11px; font-size:11.5px; line-height:1.5; margin-bottom:10px; }
+  .dbprofile { color:#7d9bd6; font-size:11.5px; margin-bottom:8px; }
+  .dbprofile b { color:#cfe0f0; }
+  .dbprofcap { color:#5f7186; text-transform:uppercase; letter-spacing:.06em; font-size:10px; }
+  .dbprofile select { background:#121925; border:1px solid #243244; border-radius:6px; color:#e8f0f8; padding:3px 6px; font:inherit; font-size:11px; margin-left:4px; }
+  .dbrefresh { background:#1c2a3a; border:1px solid #2c3e52; border-radius:6px; color:#8aa0b4; padding:2px 8px; font:inherit; font-size:11px; cursor:pointer; margin-left:8px; }
+  .dbrefresh:hover { border-color:#39d98a; color:#39d98a; }
+  .dbout { flex:1; overflow:auto; border:1px solid #1e2a3a; border-radius:10px; }
+  .dbout table { border-collapse:collapse; width:100%; font-size:12px; }
+  .dbout th { position:sticky; top:0; background:#121925; color:#8aa0b4; text-align:left; padding:7px 10px; border-bottom:1px solid #1e2a3a; white-space:nowrap; }
+  .dbout td { padding:6px 10px; border-bottom:1px solid #16202c; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .dbout tr:hover td { background:#10161f; }
+  .msg { color:#5f7186; font-size:12px; padding:10px; }
+  .msg.err { color:#ff6b60; }
+  /* Screen overlay: a global panel docked to the right, available over any tab. */
+  .screenbtn { background:#121925; border:1px solid #243244; color:#8aa0b4; border-radius:8px; padding:5px 12px; font:inherit; font-size:12.5px; cursor:pointer; margin-left:8px; }
+  .screenbtn:hover { border-color:#39d98a; color:#dfe7ef; }
+  .screenbtn.on { background:#1c3a2a; border-color:#39d98a; color:#39d98a; }
+  #screenpanel { position:fixed; top:0; right:0; bottom:0; width:340px; background:#0b1016; border-left:1px solid #1e2a3a; z-index:40; display:none; flex-direction:column; padding:12px; box-shadow:-4px 0 16px rgba(0,0,0,.4); overflow:auto; }
+  #screenpanel.on { display:flex; }
+  body.screenopen { padding-right:356px; }
+  #screenpanel .schead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
+  #screenpanel .schead .sctitle { font-size:12.5px; color:#dfe7ef; font-weight:600; flex:1; }
+  #screenpanel .scbtn { background:#121925; border:1px solid #243244; color:#8aa0b4; border-radius:6px; padding:3px 9px; font:inherit; font-size:11.5px; cursor:pointer; }
+  #screenpanel .scbtn:hover { border-color:#39d98a; color:#dfe7ef; }
+  #screenpanel .scbtn.rec { color:#ff6b60; border-color:#5a2c2c; }
+  #screenimg { width:100%; border:1px solid #1e2a3a; border-radius:8px; background:#000; min-height:120px; }
+  #schint { font-size:11.5px; color:#5f7186; margin-top:8px; line-height:1.5; }
+  .scconsent { background:#161b22; border:1px solid #2c3a4a; border-radius:8px; padding:12px; font-size:12px; color:#cfd8e3; line-height:1.55; }
+  .scconsent b { color:#ffd479; }
+  .scconsent .scaccept { background:#1c3a2a; border:1px solid #39d98a; color:#39d98a; border-radius:6px; padding:6px 14px; font:inherit; font-size:12px; cursor:pointer; margin-top:10px; }
+  .scconsent .scaccept:hover { background:#24492f; }
+  .scinstall { background:#0e151e; border:1px solid #1e2a3a; border-radius:6px; padding:8px 10px; margin-top:8px; font-size:11.5px; color:#cfe3d6; }
+  .scinstall code { color:#7fd6a3; }
+  .scinstall .sccopy { background:#172a1f; border:1px solid #2c5a3e; color:#7fd6a3; border-radius:5px; padding:2px 8px; font:inherit; font-size:11px; cursor:pointer; margin-left:6px; }
+</style></head>
 <body>
-  <header>
-    <h1>Slack Radar</h1>
-    <span class="badge"><span id="status-dot" class="status-dot"></span> <span id="status-text">connecting</span></span>
-    <span class="badge" id="uptime-badge"></span>
-    <button id="extend-btn" style="display: none; font-size: 11px; padding: 2px 8px; margin-left: 4px; cursor: pointer; background: #2bac76; color: #fff; border: none; border-radius: 10px;">Extend 5m</button>
-  </header>
-  <div class="tabs">
-    <div class="tab active" data-tab="network">Network <span class="count" id="network-count">0</span></div>
-    <div class="tab" data-tab="rtm">RTM <span class="count" id="rtm-count">0</span></div>
-    <div class="tab" data-tab="clog">Clogs <span class="count" id="clog-count">0</span></div>
+  <div id="flash"></div>
+  <div id="alertbanner"></div>
+  <h1>SLACK RADAR DASHBOARD  <span class="conn waiting" id="conn">&#9679; connecting…</span> <button id="reconnect" class="reconnect" style="display:none">⟳ Reconnect Radar</button> <button id="screenbtn" class="screenbtn" title="Mirror the live device screen">▣ Screen</button></h1>
+  <div id="screenpanel">
+    <div class="schead">
+      <span class="sctitle">Device screen</span>
+      <button class="scbtn" id="screenshot" title="Full-resolution screenshot">📷</button>
+      <button class="scbtn" id="screenrec" title="Record to mp4">● rec</button>
+      <button class="scbtn" id="screenredetect" title="Re-detect the active display">⟳</button>
+      <button class="scbtn" id="screenclose" title="Close">✕</button>
+    </div>
+    <div id="screenbody"></div>
+    <div id="schint"></div>
   </div>
-  <div class="toolbar">
-    <input type="text" id="filter" placeholder="Filter by URL, channel, event name, payload..." />
-    <span id="profile-label" style="display: none; font-size: 12px; color: #616061; margin-right: 4px;"></span>
-    <button id="enable-btn" style="display: none;">Enable Radar</button>
-    <button id="disconnect-btn" style="display: none;">Disconnect</button>
-    <button id="pause-btn">Pause</button>
-    <button id="clear-btn">Clear</button>
+  <div class="modebar" id="modebar"></div>
+  <div class="status" id="status"></div>
+  <div class="sub" id="sub"></div>
+  <details class="filters" id="filterpanel" style="display:none">
+    <summary>Filters</summary>
+    <div id="filterbody"></div>
+  </details>
+  <div class="grid" id="cards"></div>
+  <div class="stage" id="stage">
+    <div class="feedwrap" id="feedwrap" style="flex:1; min-width:0;">
+      <div class="feedbar" id="feedbar" style="display:none">
+        <span class="ffilterwrap"><input id="ffilter" placeholder="filter rows…" autocomplete="off"/><span class="ffilterclear" id="ffilterclear" title="clear filter" style="display:none">✕</span></span>
+        <label class="fsortlbl" id="fpkgwrap" style="display:none">app <select id="fpkg" title="show only one app's log lines"></select></label>
+        <label class="fsortlbl">sort <select id="fsort"></select></label>
+        <button id="fpause" title="pause stream">⏸ live</button>
+        <span id="fcount" class="fcount"></span>
+      </div>
+      <div class="chips" id="chips" style="display:none"></div>
+      <div class="feed" id="feed"></div>
+    </div>
+    <div class="inspector" id="inspector" style="display:none"></div>
   </div>
-  <div class="main">
-    <div class="list" id="list"></div>
-    <div class="detail" id="detail">
-      <div class="placeholder">Select a row to see the full payload.</div>
+  <div class="dbview" id="dbview" style="display:none">
+    <div class="dbside"><div class="dbsec">databases</div><div id="db_dbs" class="msg">loading…</div><div class="dbsec">tables</div><div id="db_tbls" class="msg">pick a database</div></div>
+    <div class="dbmain">
+      <div class="dbprivacy">Privacy: opening a database copies the on-device Slack store (message text, request/response bodies, user, channel, and team IDs) in plaintext to a temp file on this machine. The copy is read-only and auto-deleted when this dashboard stops. Review before sharing anything from here.</div>
+      <div class="dbqbar"><input id="db_sql" placeholder="SELECT * FROM table LIMIT 100   (read-only)" autocomplete="off"/><button id="db_run">Run</button></div>
+      <div class="dbmeta" id="db_meta"></div>
+      <div class="dbout" id="db_out"><div class="msg">pick a database, then a table</div></div>
     </div>
   </div>
+<script>
+// The web page is just pre-built dashboard TABS over the device Radar stream. No in-page
+// Claude. Customization happens in a terminal Claude Code session (via the
+// open_radar_dashboard MCP tool -> /setspec); when a pushed spec does not match any
+// pre-built tab, a "Custom" tab appears and selects. The page polls /spec and renders
+// whichever preset (or custom spec) is active.
+const statusEl=document.getElementById('status');
+function setStatus(state,msg){ statusEl.className='status '+(state==='error'?'err':state==='ready'?'ready':''); statusEl.textContent = msg||''; }
+document.getElementById('reconnect').onclick=doReconnect;
-  <script>
-    const state = {
-      tab: "network",
-      filter: "",
-      paused: false,
-      connected: false,
-      hadConnection: false, // true once we've ever connected successfully
-      selected: null, // { type, id }
-      buffers: {
-        network: [],
-        rtm: [],
-        clog: [],
-      },
-      MAX_BUFFER: 1000,
-    };
-    const listEl = document.getElementById("list");
-    const detailEl = document.getElementById("detail");
-    const filterEl = document.getElementById("filter");
-    const enableBtn = document.getElementById("enable-btn");
-    const profileLabel = document.getElementById("profile-label");
-    const disconnectBtn = document.getElementById("disconnect-btn");
-    const pauseBtn = document.getElementById("pause-btn");
-    const clearBtn = document.getElementById("clear-btn");
-    const statusDot = document.getElementById("status-dot");
-    const statusText = document.getElementById("status-text");
-    const uptimeBadge = document.getElementById("uptime-badge");
-    // --- Tabs ---
-    document.querySelectorAll(".tab").forEach((el) => {
-      el.addEventListener("click", () => {
-        state.tab = el.dataset.tab;
-        document.querySelectorAll(".tab").forEach((t) => t.classList.toggle("active", t === el));
-        state.selected = null;
-        renderList();
-        renderDetail();
-      });
-    });
-    // --- Toolbar ---
-    filterEl.addEventListener("input", () => {
-      state.filter = filterEl.value.toLowerCase();
-      renderList();
-    });
-    pauseBtn.addEventListener("click", () => {
-      state.paused = !state.paused;
-      pauseBtn.textContent = state.paused ? "Resume" : "Pause";
-      pauseBtn.classList.toggle("active", state.paused);
-      statusDot.classList.toggle("paused", state.paused);
-      statusText.textContent = state.paused ? "paused" : (state.connected ? "connected" : "disconnected");
-    });
-    clearBtn.addEventListener("click", async () => {
-      state.buffers.network = [];
-      state.buffers.rtm = [];
-      state.buffers.clog = [];
-      state.selected = null;
-      try {
-        await fetch("/api/clear");
-      } catch (e) {
-        // Ignore — device may have shut down
-      }
-      updateCounts();
-      renderList();
-      renderDetail();
-    });
-    enableBtn.addEventListener("click", async () => {
-      enableBtn.disabled = true;
-      enableBtn.textContent = "Enabling…";
-      try {
-        const res = await fetch("/_control/activate", { method: "POST" });
-        const data = await res.json();
-        if (!data.ok) {
-          statusText.textContent = "enable failed";
-          alert(data.error || "Failed to enable radar");
-        } else {
-          statusText.textContent = "connecting";
-          // Device-side server needs a moment to start after the broadcast.
-          // Without this delay, the SSE connect races the server startup and
-          // gets connection-refused, snapping back to disconnected instantly.
-          await new Promise((r) => setTimeout(r, 1500));
-          connectStream();
-          return; // skip the finally reset — stay in "connecting" state
-        }
-      } catch (e) {
-        alert("Failed to reach server: " + e.message);
-      }
-      enableBtn.disabled = false;
-      enableBtn.textContent = "Enable Radar";
-    });
-    async function fetchProfiles() {
-      try {
-        const res = await fetch("/_control/profiles");
-        const data = await res.json();
-        const profiles = data.profiles || [];
-        const activeId = data.active_user_id;
-        if (activeId && profiles.length >= 1) {
-          const active = profiles.find((p) => p.userId === activeId) ?? profiles[0];
-          profileLabel.textContent = active.label;
-          profileLabel.style.display = "";
-        } else if (profiles.length >= 1) {
-          profileLabel.textContent = profiles[0].label;
-          profileLabel.style.display = "";
-        } else {
-          profileLabel.style.display = "none";
-        }
-      } catch {
-        profileLabel.style.display = "none";
-      }
-    }
-    function setDisconnectedUi(disconnected) {
-      enableBtn.style.display = disconnected ? "" : "none";
-      disconnectBtn.style.display = disconnected ? "none" : "";
-      if (disconnected) {
-        uptimeBadge.textContent = "";
-        extendBtn.style.display = "none";
-      }
-      fetchProfiles();
-    }
-    disconnectBtn.addEventListener("click", () => {
-      if (activeStream) {
-        activeStream.close();
-        activeStream = null;
-      }
-      state.connected = false;
-      statusDot.classList.remove("connected");
-      statusText.textContent = "disconnected";
-      enableBtn.disabled = false;
-      enableBtn.textContent = "Enable Radar";
-      setDisconnectedUi(true);
-      renderList();
-    });
-    // --- SSE ---
-    function insertReconnectMarker() {
-      const marker = {
-        __marker: true,
-        timestamp: Date.now(),
-        label: `reconnected @ ${new Date().toLocaleTimeString("en-US", { hour12: false })}`,
-      };
-      const buffers = state.buffers;
-      for (const type of ["network", "rtm", "clog"]) {
-        const buf = buffers[type];
-        if (buf.length > 0) buf.push({ ...marker }); // avoid empty-list markers
-      }
-    }
-    let activeStream = null;
-    function connectStream() {
-      const es = new EventSource("/api/stream");
-      activeStream = es;
-      es.onopen = () => {
-        const wasDisconnected = !state.connected && state.hadConnection;
-        state.connected = true;
-        state.hadConnection = true;
-        if (wasDisconnected) insertReconnectMarker();
-        statusDot.classList.add("connected");
-        statusText.textContent = state.paused ? "paused" : "connected";
-        setDisconnectedUi(false);
-        renderList();
-      };
-      es.onmessage = (ev) => {
-        if (state.paused) return;
-        try {
-          const parsed = JSON.parse(ev.data);
-          ingest(parsed.type, parsed.event);
-        } catch (e) {
-          // Skip malformed
-        }
-      };
-      es.onerror = () => {
-        state.connected = false;
-        statusDot.classList.remove("connected");
-        statusText.textContent = "disconnected";
-        enableBtn.disabled = false;
-        enableBtn.textContent = "Enable Radar";
-        setDisconnectedUi(true);
-        renderList();
-        es.close();
-      };
-    }
-    function ingest(type, event) {
-      // Attribute incoming events to whichever profile is currently active.
-      // There is a small misattribution window right at a switch boundary
-      // (a few events in flight may land in the wrong bucket), which is an
-      // acceptable cost relative to server-side event tagging.
-      const buffers = state.buffers;
-      const buf = buffers[type];
-      if (!buf) return;
-      buf.push(event);
-      if (buf.length > state.MAX_BUFFER) buf.shift();
-      updateCounts();
-      if (state.tab === type) renderList();
-    }
-    function updateCounts() {
-      const buffers = state.buffers;
-      document.getElementById("network-count").textContent = buffers.network.length;
-      document.getElementById("rtm-count").textContent = buffers.rtm.length;
-      document.getElementById("clog-count").textContent = buffers.clog.length;
-    }
-    // --- Rendering ---
-    function filterRows(rows) {
-      if (!state.filter) return rows;
-      return rows.filter((r) => {
-        if (r.__marker) return true; // always keep markers so history stays anchored
-        return JSON.stringify(r).toLowerCase().includes(state.filter);
-      });
-    }
-    function renderList() {
-      const rows = filterRows(state.buffers[state.tab]);
-      // Count real (non-marker) rows when deciding empty-state
-      const nonMarkerCount = rows.filter((r) => !r.__marker).length;
-      if (nonMarkerCount === 0) {
-        let msg;
-        if (state.filter) {
-          msg = "No matches. Clear the filter or try a different query.";
-        } else if (!state.connected) {
-          msg = "Radar is not connected. Click Enable Radar in the toolbar to activate.";
-        } else {
-          msg = `No ${state.tab} events yet. Interact with the app to capture events.`;
-        }
-        listEl.innerHTML = `<div class="empty">${msg}</div>`;
-        return;
-      }
-      // Newest first
-      const html = rows.slice().reverse().map((row) => {
-        if (row.__marker) return `<div class="marker">─── ${row.label} ───</div>`;
-        return renderRow(state.tab, row);
-      }).join("");
-      listEl.innerHTML = html;
-      listEl.querySelectorAll(".row").forEach((el) => {
-        el.addEventListener("click", () => {
-          const id = Number(el.dataset.id);
-          state.selected = { type: state.tab, id };
-          listEl.querySelectorAll(".row").forEach((r) => r.classList.toggle("selected", r === el));
-          renderDetail();
-        });
-      });
-    }
+// The live dashboard spec. Hoisted above the first renderModes() call so markActiveMode()
+// can read it before build() first assigns it, without a TDZ ReferenceError. Reassigned by
+// build(spec); the engine section below treats this as its single source of truth.
+let SPEC=null;
-    function renderRow(type, row) {
-      const time = new Date(row.timestamp).toLocaleTimeString("en-US", { hour12: false });
-      const selected = state.selected && state.selected.type === type && state.selected.id === row.id ? "selected" : "";
-      if (type === "network") {
-        const statusClass = row.status_code >= 500 ? "err" : row.status_code >= 400 ? "warn" : "ok";
-        return `
-          <div class="row ${selected}" data-id="${row.id}">
-            <span class="time">${time}</span>
-            <span class="method ${row.method}">${row.method}</span>
-            <span class="main-col">${escapeHtml(row.url)}</span>
-            <span class="status ${statusClass}">${row.status_code} · ${row.duration_ms}ms</span>
-          </div>`;
-      }
-      if (type === "rtm") {
-        return `
-          <div class="row ${selected}" data-id="${row.id}">
-            <span class="time">${time}</span>
-            <span class="direction ${row.direction === "INCOMING" ? "IN" : "OUT"}">${row.direction === "INCOMING" ? "←" : "→"}</span>
-            <span class="main-col">${escapeHtml(row.event_type ?? "(no type)")}${row.channel ? " · " + escapeHtml(row.channel) : ""}</span>
-            <span class="status"></span>
-          </div>`;
-      }
-      // clog
-      return `
-        <div class="row ${selected}" data-id="${row.id}">
-          <span class="time">${time}</span>
-          <span></span>
-          <span class="main-col">${escapeHtml(row.event_name ?? "(unknown)")}</span>
-          <span class="status"></span>
-        </div>`;
-    }
-    let lastDetailData = null;
+// ---- pre-built dashboards: the product. one tab each. ----
+// Presets use only generic placeholders. The dashboard learns the real endpoints,
+// channels, and event names LIVE from the device stream; nothing internal is baked in.
+const MODES=[
+  {key:'all',  label:'Live',     spec:{title:'Live',summary:'Live: network, RTM, analytics clogs, and Slack-app logcat in one timeline. (Logs filtered to the Slack app; clear the package chip for all apps.)',source:'all',viz:['counter','rate','sparkline','feed','inspector'],match:{package:'com.Slack.internal.debug'}}},
+  {key:'network',label:'Network',spec:{title:'Network',summary:'Network calls per second vs average response time, every call listed, slow ones flagged.',source:'network',viz:['counter','rate','graph','feed','inspector'],series:[{metric:'ratePerSec',label:'calls/s',unit:'/s'},{metric:'avg',field:'duration_ms',label:'avg ms',unit:'ms'}],highlight:{field:'duration_ms',op:'>',value:800,label:'slow (>800ms)'},rateWindowSec:10}},
+  {key:'rtm',  label:'RTM',      spec:{title:'RTM',summary:'Real-time websocket events as they happen.',source:'rtm',viz:['counter','rate','feed','inspector']}},
+  {key:'clog', label:'Clogs',    spec:{title:'Clogs',summary:'Analytics clog events, click any to see its full payload.',source:'clog',viz:['counter','rate','feed','inspector']}},
+  {key:'log',  label:'Logs',     spec:{title:'Device Logs',summary:'Live Slack app logcat, color-coded by level. Clear the package chip for all apps, or switch app with the dropdown.',source:'log',viz:['counter','feed','inspector'],match:{package:'com.Slack.internal.debug'}}},
+  {key:'db',   label:'Database', spec:{title:'Device DB',summary:'Browse the on-device SQLite databases (read-only snapshot).',source:'db'}},
+];
+// A spec is "custom" when it did NOT come from a MODES preset — i.e. a terminal Claude
+// session pushed it via the open_radar_dashboard MCP tool. We detect that by comparing
+// the live spec to the presets; a non-match shows the Custom tab.
+let CUSTOM_ACTIVE=false;          // is the live spec the custom (Claude-pushed) one RIGHT NOW?
+let lastCustomSpec=null;          // the most-recent custom spec; keeps the Custom tab present
+                                  // until a page refresh, so you can flip back to it.
+// A spec pushed by THIS browser (a Filters-panel Apply, or a tab click) is a local edit, not
+// a Claude-pushed custom dashboard — so it must NOT spawn a "Custom" tab. localPushKey holds
+// the JSON of the next spec we expect back from /spec because we just pushed it; pollSpec sees
+// it match and treats it as a local edit (stays on the current tab). Only a non-preset spec we
+// did NOT push (an MCP open_radar_dashboard) becomes the Custom tab.
+let localPushKey=null;
+function markLocalPush(spec){ localPushKey=JSON.stringify(spec); }
+function specMatchesMode(spec){ if(!spec||spec.blank) return null;
+  return MODES.find(m=>JSON.stringify(m.spec)===JSON.stringify(spec))?.key || null; }
+function renderModes(){ const bar=document.getElementById('modebar'); if(!bar) return;
+  let html=MODES.map(m=>'<button class="modebtn" data-k="'+m.key+'">'+m.label+'</button>').join('');
+  // Custom tab persists once a custom spec has been pushed this page-load (lastCustomSpec),
+  // not just while it is the live spec — so switching to a pre-built tab does not lose it.
+  if(lastCustomSpec) html+='<button class="modebtn custom" data-k="__custom__" title="'+esc(lastCustomSpec.title||'custom')+' — pushed from a terminal Claude Code session; persists until refresh">✎ '+esc(lastCustomSpec.title||'Custom')+'</button>';
+  bar.innerHTML=html;
+  bar.querySelectorAll('.modebtn').forEach(b=>b.onclick=async()=>{
+    const k=b.dataset.k;
+    const spec = k==='__custom__' ? lastCustomSpec : MODES.find(x=>x.key===k)?.spec;
+    if(!spec) return;
+    setStatus('', k==='__custom__' ? 'showing: '+(lastCustomSpec.title||'Custom') : 'showing: '+MODES.find(x=>x.key===k).label);
+    try{ const r=await (await fetch('/setspec',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(spec)})).json();
+      if(!r.ok) setStatus('error','⚠ '+(r.error||'failed')); }catch{ setStatus('error','switch failed'); } });
+  markActiveMode();
+}
+function markActiveMode(){ const bar=document.getElementById('modebar'); if(!bar) return;
+  const activeKey = CUSTOM_ACTIVE ? '__custom__' : specMatchesMode(SPEC);
+  bar.querySelectorAll('.modebtn').forEach(b=>b.classList.toggle('active', b.dataset.k===activeKey)); }
+renderModes();
-    async function renderDetail() {
-      if (!state.selected) {
-        lastDetailData = null;
-        detailEl.innerHTML = '<div class="placeholder">Select a row to see the full payload.</div>';
-        return;
-      }
-      const { type, id } = state.selected;
-      detailEl.innerHTML = '<div class="placeholder">Loading…</div>';
-      try {
-        const endpoint = type === "network" ? "/api/network/" : type === "rtm" ? "/api/rtm/" : "/api/clogs/";
-        const res = await fetch(endpoint + id);
-        const data = await res.json();
-        lastDetailData = data;
-        detailEl.innerHTML = detailActions() + formatDetail(type, data);
-        wireDetailActions();
-      } catch (e) {
-        lastDetailData = null;
-        detailEl.innerHTML = '<div class="placeholder">Failed to load detail: ' + escapeHtml(e.message) + '</div>';
-      }
-    }
-    function detailActions() {
-      const isNetwork = state.selected && state.selected.type === "network";
-      return `<div class="detail-actions">
-        <button id="copy-json-btn">Copy JSON</button>
-        <button id="copy-body-btn">Copy Body</button>
-        ${isNetwork ? '<button id="copy-curl-btn">Copy cURL</button>' : ''}
-      </div>`;
-    }
-    function wireDetailActions() {
-      const copyJsonBtn = document.getElementById("copy-json-btn");
-      const copyBodyBtn = document.getElementById("copy-body-btn");
-      if (copyJsonBtn) {
-        copyJsonBtn.addEventListener("click", () => {
-          if (!lastDetailData) return;
-          navigator.clipboard.writeText(JSON.stringify(lastDetailData, null, 2));
-          copyJsonBtn.textContent = "Copied!";
-          copyJsonBtn.classList.add("copied");
-          setTimeout(() => { copyJsonBtn.textContent = "Copy JSON"; copyJsonBtn.classList.remove("copied"); }, 1500);
-        });
-      }
-      if (copyBodyBtn) {
-        copyBodyBtn.addEventListener("click", () => {
-          if (!lastDetailData) return;
-          const body = lastDetailData.response_body ?? lastDetailData.data ?? lastDetailData.request_body ?? "";
-          const text = tryPretty(body);
-          navigator.clipboard.writeText(text);
-          copyBodyBtn.textContent = "Copied!";
-          copyBodyBtn.classList.add("copied");
-          setTimeout(() => { copyBodyBtn.textContent = "Copy Body"; copyBodyBtn.classList.remove("copied"); }, 1500);
-        });
-      }
-      const copyCurlBtn = document.getElementById("copy-curl-btn");
-      if (copyCurlBtn) {
-        copyCurlBtn.addEventListener("click", () => {
-          if (!lastDetailData) return;
-          navigator.clipboard.writeText(buildCurl(lastDetailData));
-          copyCurlBtn.textContent = "Copied!";
-          copyCurlBtn.classList.add("copied");
-          setTimeout(() => { copyCurlBtn.textContent = "Copy cURL"; copyCurlBtn.classList.remove("copied"); }, 1500);
-        });
-      }
-    }
-    function shellEscape(s) {
-      if (!s) return "''";
-      return "'" + s.replace(/'/g, "'\\''") + "'";
-    }
-    function buildCurl(d) {
-      const parts = [`curl -X ${d.method} ${shellEscape(d.url)}`];
-      const headers = d.request_headers ?? {};
-      let hasAuth = false;
-      for (const [k, v] of Object.entries(headers)) {
-        const lower = k.toLowerCase();
-        if (lower === "accept-encoding" || lower === "host" || lower === "content-length") continue;
-        if (lower === "authorization" || lower === "cookie") hasAuth = true;
-        parts.push(`  -H ${shellEscape(k + ": " + v)}`);
-      }
-      if (d.request_body) {
-        parts.push(`  --data-raw ${shellEscape(d.request_body)}`);
-      }
-      let cmd = parts.join(" \\\n");
-      if (!hasAuth) {
-        cmd += "\n# Note: auth cookies are injected by OkHttp after the app interceptor and are not captured. Add -b 'cookie=...' manually to replay.";
-      }
-      return cmd;
-    }
-    function formatDetail(type, data) {
-      if (type === "network") {
-        return `
-          <h3>Request</h3>
-${escapeHtml(data.method)} ${escapeHtml(data.url)}
-<h3>Request Headers</h3>
-${escapeHtml(JSON.stringify(data.request_headers ?? {}, null, 2))}
-<h3>Request Body</h3>
-${escapeHtml(data.request_body ?? "(none)")}
-<h3>Response · ${data.status_code} · ${data.duration_ms}ms</h3>
-<h3>Response Headers</h3>
-${escapeHtml(JSON.stringify(data.response_headers ?? {}, null, 2))}
-<h3>Response Body</h3>
-${escapeHtml(tryPretty(data.response_body))}
-`;
-      }
-      if (type === "rtm") {
-        return `
-          <h3>${escapeHtml(data.direction)} · ${escapeHtml(data.event_type ?? "(no type)")}</h3>
-Channel: ${escapeHtml(data.channel ?? "(none)")}
-Timestamp: ${new Date(data.timestamp).toISOString()}
-Base64: ${data.is_base64}
-<h3>Payload</h3>
-${escapeHtml(tryPretty(data.data))}
-`;
-      }
-      // clog
-      return `
-        <h3>${escapeHtml(data.event_name)}</h3>
-Timestamp: ${new Date(data.timestamp).toISOString()}
-<h3>Payload</h3>
-${escapeHtml(tryPretty(data.data))}
-`;
-    }
-    function tryPretty(s) {
-      if (!s) return "(empty)";
-      try {
-        return JSON.stringify(JSON.parse(s), null, 2);
-      } catch {
-        return s;
-      }
-    }
-    function escapeHtml(s) {
-      return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
-    }
+// ---- keyboard navigation ----
+// Up/Down (or vim j/k) move the selected feed row; Home/End jump to first/last.
+// Left/Right (or vim h/l) switch tabs. All clamp at the ends — no wrap.
+// Reuses inspect() for selection and the existing .modebtn click for tab switches,
+// and reads the live DOM each press so it survives stream-driven re-renders.
+function visibleRows(){
+  // feed is null on tabs without a feed viz; guard.
+  return feed ? [...feed.children].filter(r=>r.classList.contains('row') && !r.classList.contains('hidden')) : [];
+}
+function pickRow(r){
+  if(!r) return;
+  // inspect() toggles selection OFF when called on the already-selected row, so skip it.
+  if(!r.classList.contains('sel')) inspect(r,r._ev);
+  r.scrollIntoView({block:'nearest'});
+}
+function moveRow(dir){ // dir: -1 up, +1 down, 'first', 'last'
+  const rows=visibleRows();
+  if(rows.length===0) return;
+  if(dir==='first') return pickRow(rows[0]);
+  if(dir==='last') return pickRow(rows[rows.length-1]);
+  const cur=rows.findIndex(r=>r.classList.contains('sel'));
+  if(cur===-1) return pickRow(dir>0?rows[0]:rows[rows.length-1]);
+  const next=Math.max(0,Math.min(rows.length-1,cur+dir)); // clamp
+  pickRow(rows[next]);
+}
+function moveTab(dir){ // dir: -1 left, +1 right; clamp
+  const btns=[...document.querySelectorAll('#modebar .modebtn')];
+  if(btns.length===0) return;
+  let cur=btns.findIndex(b=>b.classList.contains('active'));
+  if(cur===-1) cur=0;
+  const next=Math.max(0,Math.min(btns.length-1,cur+dir));
+  if(next!==cur) btns[next].click(); // fires existing onclick → /setspec → rebuild
+}
+document.addEventListener('keydown',(e)=>{
+  const t=e.target;
+  if(t && (t.tagName==='INPUT' || t.tagName==='TEXTAREA' || t.isContentEditable)) return;
+  switch(e.key){
+    case 'ArrowDown': case 'j': moveRow(+1); break;
+    case 'ArrowUp': case 'k': moveRow(-1); break;
+    case 'ArrowRight': case 'l': moveTab(+1); break;
+    case 'ArrowLeft': case 'h': moveTab(-1); break;
+    case 'Home': moveRow('first'); break;
+    case 'End': moveRow('last'); break;
+    default: return;
+  }
+  e.preventDefault(); // stop the list/page from also scrolling
+});
-    // --- Uptime ping ---
-    const extendBtn = document.getElementById("extend-btn");
+// ---- poll /spec; rebuild when it changes, and show/hide the Custom tab accordingly ----
+let specKey='';
+async function pollSpec(){ try{ const spec=await (await fetch('/spec')).json(); const key=JSON.stringify(spec); if(key===specKey) return; specKey=key;
+  // A non-blank spec that matches no preset is a Claude-pushed custom dashboard — UNLESS this
+  // browser just pushed it (a Filters-panel Apply or a tab click), which is a local edit and
+  // must stay on the current tab, not spawn a Custom tab.
+  const isLocalEdit = key===localPushKey; if(isLocalEdit) localPushKey=null;
+  CUSTOM_ACTIVE = !isLocalEdit && !!spec && !spec.blank && specMatchesMode(spec)===null;
+  let needRerender=false;
+  if(CUSTOM_ACTIVE){ // remember it so the tab persists; re-render if it's new/changed
+    if(!lastCustomSpec || JSON.stringify(lastCustomSpec)!==JSON.stringify(spec)){ lastCustomSpec=spec; needRerender=true; }
+  }
+  if(needRerender) renderModes();   // add or update the Custom tab (label = its title)
+  build(spec);
+  if(CUSTOM_ACTIVE) setStatus('ready','Custom dashboard (pushed from a Claude Code session): '+(spec.title||''));
+  else { const k=specMatchesMode(spec); const m=MODES.find(x=>x.key===k); if(m) setStatus('','showing: '+m.label); }
+  markActiveMode();
+}catch{} }
+setInterval(pollSpec,700);
+// Default to the Live dashboard on load (instead of a blank canvas).
+async function bootDefault(){ try{ const cur=await (await fetch('/spec')).json();
+  if(!cur||cur.blank){ const live=MODES[0]; await fetch('/setspec',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(live.spec)}).catch(()=>{}); }
+}catch{} }
+bootDefault();
+// Connection dot driven by an always-on device health check, independent of whether
+// a dashboard is built (a blank dashboard has no stream, so the dot was otherwise dead).
+let lastEventTs=0, healthMisses=0;
+// Clear a stale red "device unreachable / backfill failed" status once health is back. These
+// errors are set once (e.g. at build/backfill time) and were otherwise sticky until a tab
+// switch — so a transient blip left the red banner up long after the device recovered.
+function clearStaleError(){ if(statusEl.classList.contains('err')) setStatus('',''); }
+async function pollHealth(){
+  // Recent stream activity proves liveness without a /health round-trip.
+  if(Date.now()-lastEventTs<6000){ healthMisses=0; setConn('connected',''); clearStaleError(); return; }
+  try{ const h=await (await fetch('/health')).json();
+    if(h.device){ healthMisses=0; setConn('connected',''); clearStaleError(); }
+    // Require TWO consecutive misses before flipping the dot — a single slow/missed poll
+    // (while the stream is otherwise fine) should not flash "connecting".
+    else if(++healthMisses>=2){ setConn('waiting','device offline, retrying…'); }
+  }catch{ if(++healthMisses>=2) setConn('waiting','reconnecting…'); } }
+pollHealth(); setInterval(pollHealth,2000);
-    function formatUptime(ms) {
-      const totalSec = Math.floor(ms / 1000);
-      const h = Math.floor(totalSec / 3600);
-      const m = Math.floor((totalSec % 3600) / 60);
-      const s = totalSec % 60;
-      if (h > 0) return `up ${h}h ${m}m`;
-      if (m > 0) return `up ${m}m ${s}s`;
-      return `up ${s}s`;
+// ---- the dashboard engine: build(spec) tears down and rebuilds widgets live ----
+let es=null, tickTimer=null;
+let total=0, times=[], perSec=[], counterEl=null, rateEl=null, sparkEl=null, feed=null, cards=null, GRAPH=null;
+// liveMatches counts ONLY genuine live arrivals (not backfilled/replayed history), so the
+// alert {at:N} "fire once at the Nth match" threshold is measured from when the dashboard
+// opened — independent of how many matching events the device buffer already held. `total`
+// stays history-inclusive because the counter widget should show every event seen.
+let liveMatches=0;
+function has(v){ return SPEC.viz.includes(v); }
+function showInspector(){ return has('feed') || has('inspector'); }
+function build(spec){
+  SPEC=spec; total=0; liveMatches=0; times=[]; perSec=new Array(30).fill(0);
+  markActiveMode();
+  cards=document.getElementById('cards'); cards.innerHTML=''; feed=document.getElementById('feed'); feed.innerHTML='';
+  counterEl=rateEl=sparkEl=null;
+  const insp=document.getElementById('inspector'), stage=document.getElementById('stage');
+  if(es){ es.close(); es=null; } if(tickTimer){ clearInterval(tickTimer); tickTimer=null; }
+  const dbv=document.getElementById('dbview');
+  const fp=document.getElementById('filterpanel');
+  if(SPEC.blank){ document.getElementById('sub').textContent='Pick a dashboard above (Live, Network, RTM, Clogs, Logs, Database). For a custom view, ask a Claude Code session in your terminal to build one — it appears here as a Custom tab.'; insp.style.display='none'; stage.classList.remove('split'); if(fp) fp.style.display='none'; stage.style.display='flex'; if(dbv) dbv.style.display='none'; return; }
+  if(SPEC.source==='db'){
+    // The DB browser is a distinct, point-in-time view (no stream/widgets/filters). Hide the
+    // streaming UI + the Filters panel, show the db list -> tables -> query grid.
+    stage.style.display='none'; cards.style.display='none'; insp.style.display='none';
+    if(fp) fp.style.display='none';
+    const subEl=document.getElementById('sub');
+    subEl.innerHTML='<span class="summary">'+esc(SPEC.summary||'Device database browser')+'</span><span class="tech">source=db (on-device SQLite snapshot, read-only)</span>';
+    if(dbv) dbv.style.display='flex';
+    buildDbView(SPEC);
+    return;
+  }
+  if(dbv) dbv.style.display='none';
+  document.getElementById('stage').style.display='flex'; cards.style.display='grid';
+  if(showInspector()){ insp.style.display='block'; insp.innerHTML='<div class="label">inspector</div><div class="empty">click a row to see its full detail</div>'; }
+  else { insp.style.display='none'; }
+  const split = showInspector();
+  stage.classList.toggle('split', split); stage.classList.toggle('haswidth', split);
+  setupFeedControls();
+  const subEl=document.getElementById('sub');
+  const tech=describeConstraints(SPEC);
+  subEl.innerHTML = SPEC.summary
+    ? '<span class="summary">'+esc(SPEC.summary)+'</span><span class="tech">'+esc(tech)+'</span>'
+    : esc(SPEC.title+' — '+tech);
+  renderFilters();
+  if(has('counter')){ const c=card('total matched', big('0','counterEl')); c.querySelector('.label').id='counterLabel'; cards.appendChild(c); }
+  if(has('rate')){ cards.appendChild(card('rate ('+(SPEC.rateWindowSec||10)+'s)', big('0','rateEl','/'+(SPEC.rateWindowSec||10)+'s'))); }
+  if(has('sparkline')){ const c=card('per second',''); const s=document.createElement('div'); s.className='spark'; s.id='spark'; c.appendChild(s); cards.appendChild(c); }
+  counterEl=document.getElementById('counterEl'); rateEl=document.getElementById('rateEl'); sparkEl=document.getElementById('spark');
+  GRAPH=null;
+  if(has('graph') && Array.isArray(SPEC.series)){
+    const N=60;
+    GRAPH={ series: SPEC.series.map(s=>({def:s, buckets:new Array(N).fill(0), counts:new Array(N).fill(0)})), N };
+    const wrap=document.createElement('div'); wrap.className='graphcard';
+    wrap.innerHTML='<div class="label">'+esc(SPEC.series.map(s=>s.label||s.metric).join('  vs  '))+'</div><svg id="graph" viewBox="0 0 640 200"></svg><div class="legend" id="legend"></div>';
+    cards.appendChild(wrap);
+  }
+  if(es) es.close();
+  es=new EventSource('/stream'); es.onmessage=onEvent;
+  es.onerror=()=>{ setConn('waiting','reconnecting…'); };
+  if(tickTimer) clearInterval(tickTimer); tickTimer=setInterval(tick,1000);
+  replayCache();  // instant: everything seen this session for this source (incl logs)
+  backfill();     // device ring-buffer history from before this session; dedup avoids double-count
+}
+// Pre-populate a freshly-built tab from the device ring-buffer (the source of truth), so
+// switching tabs shows recent data immediately instead of resetting to nothing. Logcat is
+// host-side (no device buffer) so "log"-only tabs have nothing to backfill — they still
+// stream live. Each replayed frame goes through onEvent with live=false, so it populates
+// widgets but does not fire alerts (those are reserved for genuine /stream arrivals).
+let backfillToken=0;
+async function backfill(){
+  const myToken=++backfillToken; const src=SPEC.source;
+  if(!src) return;
+  if(src==='log'){ setStatus('','live device logs — history is not buffered on-device, so this tab fills as new lines arrive'); return; }
+  try{ const r=await (await fetch('/backfill?source='+encodeURIComponent(src)+'&limit=200')).json();
+    if(myToken!==backfillToken) return;
+    const frames=(r&&r.frames)||[];
+    // live=false: backfilled frames are device HISTORY (events from before this tab opened),
+    // so they count toward widgets but must NOT fire alerts — only genuine /stream arrivals do.
+    for(const f of frames) onEvent({data:JSON.stringify(f)}, false);
+    if(frames.length===0){
+      try{ const h=await (await fetch('/health')).json();
+        if(!h.device) setStatus('error','no history loaded — device unreachable. Wake/replug the phone, then ⟳ Reconnect Radar');
+        else setStatus('','no recent '+src+' activity buffered on the device yet — interact with Slack and it will stream in');
+      }catch{ setStatus('error','no history loaded — device unreachable. ⟳ Reconnect Radar'); }
     }
+  }catch{ setStatus('error','backfill failed — device unreachable?'); }
+}
+function matches(ev){ if(!SPEC.match) return true;
+  return Object.entries(SPEC.match).every(([k,v])=>{
+    // the package field only exists on LOG events. In the unified "all" timeline, applying
+    // it to network/rtm/clog (which have no package) would wrongly drop them — they already
+    // come from the Slack app. So a package filter constrains log rows only; others pass.
+    if(k==='package' && ev._type && ev._type!=='log') return true;
+    return String(ev[k]??'').toLowerCase().includes(String(v).toLowerCase());
+  }); }
-    async function extendSession() {
-      try {
-        await fetch("/api/ping?timeout_minutes=5");
-      } catch {}
+// ---- hand-editable Filters panel: renders the current spec's filters as form controls,
+// edits POST back to /setspec, engine rebuilds live ----
+const MATCH_FIELDS={ network:['url','method','status_code'], rtm:['event_type','direction','channel'], clog:['event_name'],
+  log:['tag','level','message','pid','package'], all:['url','method','status_code','event_type','direction','channel','event_name','tag','level','message','pid','package'] };
+const FIELD_VALUES={ direction:['OUTGOING','INCOMING'], level:['VERBOSE','DEBUG','INFO','WARN','ERROR','FATAL'], method:['GET','POST','PUT','DELETE','PATCH'] };
+function candidatesFor(field){
+  if(FIELD_VALUES[field]) return FIELD_VALUES[field].slice();
+  const seen=SEEN[field]; return seen ? [...seen].sort() : [];
+}
+function valueControlHTML(field,val){
+  const n=candidatesFor(field).length;
+  const ph = FIELD_VALUES[field] ? 'pick or type…' : (n? 'type or pick ('+n+' seen)' : 'contains…');
+  return '<span class="combo"><input class="f_mv" autocomplete="off" data-field="'+esc(field)+'" value="'+esc(String(val).trim())+'" placeholder="'+ph+'"/><span class="combocaret">▾</span><div class="combolist"></div></span>';
+}
+function renderFilters(){
+  const panel=document.getElementById('filterpanel'), bodyEl=document.getElementById('filterbody');
+  if(!panel||SPEC.blank){ if(panel) panel.style.display='none'; return; }
+  if(!panel._wired){ panel._wired=true; panel.addEventListener('toggle',()=>{ if(panel.open) renderFilters(); }); }
+  panel.style.display='block';
+  const fields=MATCH_FIELDS[SPEC.source]||[];
+  const m=SPEC.match&&typeof SPEC.match==='object'?SPEC.match:{};
+  let h='';
+  h+='<div class="frow"><label>source</label><select id="f_source">'+
+     ['rtm','network','clog','log','all'].map(s=>'<option'+(s===SPEC.source?' selected':'')+'>'+s+'</option>').join('')+'</select></div>';
+  h+='<div class="fsec">match (all must hold)</div><div id="f_matchrows">';
+  const entries=Object.entries(m); if(!entries.length) h+='<div class="fhint">no match filter — showing everything</div>';
+  for(const [k,v] of entries){ h+=matchRow(k,v,fields); }
+  h+='</div><button class="fadd" id="f_addmatch">+ add match field</button>';
+  if(SPEC.source==='network'||SPEC.source==='all')
+    h+='<div class="frow"><label>body contains</label><input id="f_body" value="'+esc(SPEC.bodyContains||'')+'" placeholder="substring in request/response body"/></div>';
+  const hl=SPEC.highlight||{};
+  h+='<div class="fsec">highlight (flag rows)</div><div class="frow">'+
+     '<input id="f_hlfield" value="'+esc(hl.field||'')+'" placeholder="field e.g. duration_ms" style="flex:2"/>'+
+     '<select id="f_hlop">'+['>','>=','<','<=','=='].map(o=>'<option'+(o===(hl.op||'>')?' selected':'')+'>'+o+'</option>').join('')+'</select>'+
+     '<input id="f_hlval" value="'+(hl.value!=null?hl.value:'')+'" placeholder="value" style="flex:1"/></div>';
+  h+='<div class="frow"><label>rate window (s)</label><input id="f_rate" type="number" value="'+(SPEC.rateWindowSec||10)+'" style="flex:1"/></div>';
+  h+='<div class="frow"><button class="fapply" id="f_apply">Apply changes</button><span id="f_msg" class="fmsg"></span></div>';
+  bodyEl.innerHTML=h;
+  bodyEl.querySelectorAll('.matchrow').forEach(wireMatchRow);
+  document.getElementById('f_addmatch').onclick=()=>{ const d=document.createElement('div'); d.innerHTML=matchRow(fields[0]||'','',fields); const row=d.firstChild; document.getElementById('f_matchrows').appendChild(row); wireMatchRow(row); };
+  document.getElementById('f_apply').onclick=applyFilters;
+}
+function matchRow(k,v,fields){
+  const opts=fields.map(f=>'<option'+(f===k?' selected':'')+'>'+f+'</option>').join('');
+  return '<div class="frow matchrow"><select class="f_mk">'+opts+(fields.includes(k)?'':'<option selected>'+esc(k)+'</option>')+
+    '</select><span class="f_mvwrap">'+valueControlHTML(k,v)+'</span><button class="fdel">✕</button></div>';
+}
+function wireMatchRow(row){
+  const mk=row.querySelector('.f_mk'), wrap=row.querySelector('.f_mvwrap');
+  mk.onchange=()=>{ wrap.innerHTML=valueControlHTML(mk.value,''); wireCombo(wrap.querySelector('.combo')); };
+  row.querySelector('.fdel').onclick=()=>row.remove();
+  wireCombo(wrap.querySelector('.combo'));
+}
+function wireCombo(combo){
+  if(!combo) return;
+  const input=combo.querySelector('.f_mv'), caret=combo.querySelector('.combocaret'), list=combo.querySelector('.combolist');
+  const field=input.getAttribute('data-field');
+  const openList=()=>{ const q=input.value.trim().toLowerCase();
+    const cands=candidatesFor(field).filter(v=>!q||String(v).toLowerCase().includes(q)).slice(0,50);
+    if(!cands.length){ list.classList.remove('open'); return; }
+    list.innerHTML=cands.map(v=>'<div class="comboitem">'+esc(v)+'</div>').join('');
+    list.classList.add('open');
+    list.querySelectorAll('.comboitem').forEach(it=>it.onmousedown=(e)=>{ e.preventDefault(); input.value=it.textContent; list.classList.remove('open'); });
+  };
+  input.onfocus=openList; input.oninput=openList;
+  caret.onmousedown=(e)=>{ e.preventDefault(); if(list.classList.contains('open')) list.classList.remove('open'); else { input.focus(); openList(); } };
+  input.onblur=()=>setTimeout(()=>list.classList.remove('open'),120);
+}
+async function applyFilters(){
+  const g=id=>document.getElementById(id);
+  const spec=JSON.parse(JSON.stringify(SPEC));
+  spec.source=g('f_source').value;
+  const match={}; document.querySelectorAll('#f_matchrows .matchrow').forEach(r=>{ const k=r.querySelector('.f_mk').value.trim(); const v=r.querySelector('.f_mv').value.trim(); if(k&&v) match[k]=v; });
+  spec.match=match;
+  const body=g('f_body'); if(body){ const bv=body.value.trim(); if(bv) spec.bodyContains=bv; else delete spec.bodyContains; }
+  const hf=g('f_hlfield').value.trim(), hv=g('f_hlval').value.trim();
+  if(hf&&hv!==''&&!isNaN(Number(hv))) spec.highlight={field:hf,op:g('f_hlop').value,value:Number(hv),label:(SPEC.highlight&&SPEC.highlight.label)||hf}; else delete spec.highlight;
+  const rw=Number(g('f_rate').value); if(rw>0) spec.rateWindowSec=rw;
+  const msg=g('f_msg'); msg.textContent='applying…';
+  markLocalPush(spec); // a hand-edit of the current view, not a Claude-pushed Custom dashboard
+  try{ const r=await (await fetch('/setspec',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(spec)})).json();
+    msg.textContent = r.ok?'applied ✓':('⚠ '+(r.error||'rejected')); }
+  catch{ msg.textContent='⚠ failed'; }
+}
+function pluck(o,p){ return p.split('.').reduce((x,k)=>(x==null?undefined:x[k]),o); }
+async function enrich(ev){ if(!SPEC.extract||ev.id==null) return null; try{ const kind=SPEC.extract.kind||SPEC.source; const d=await (await fetch('/detail?kind='+kind+'&id='+ev.id)).json(); let src=d[SPEC.extract.parse||'response_body']; if(typeof src==='string'){ try{src=JSON.parse(src);}catch{} } return pluck(src,SPEC.extract.field); }catch{ return null; } }
+function setConn(state,msg){ const d=document.getElementById('conn'); if(!d) return; d.className='conn '+state; d.textContent=(state==='connected'?'● live':'● '+(msg||'reconnecting…'));
+  const rc=document.getElementById('reconnect'); if(rc && !rc._busy) rc.style.display = state==='connected' ? 'none' : 'inline-block'; }
+async function doReconnect(){ const rc=document.getElementById('reconnect'); if(!rc) return; rc._busy=true; rc.disabled=true; rc.textContent='⟳ enabling…';
+  try{ await fetch('/enable',{method:'POST'}); }catch{}
+  rc._busy=false; rc.disabled=false; rc.textContent='⟳ Reconnect Radar'; pollHealth(); pollSpec(); }
+// live defaults true so the SSE handler (es.onmessage=onEvent) keeps firing alerts on
+// genuine arrivals; backfill() passes live=false so replayed device HISTORY counts toward
+// widgets without triggering alerts for events that already happened.
+function onEvent(m, live){ if(live===undefined) live=true; let f; try{f=JSON.parse(m.data);}catch{return;}
+  if(f.type==='_status'){ setConn(f.event.state, f.event.msg); return; }
+  if(f.type==='_error'){ setConn('waiting', f.event.msg); return; }
+  // Server-replayed log history is tagged replay:true. Treat it as history (live=false)
+  // so it never fires alerts or pulses, even on a fresh browser whose own cache is empty
+  // (the server log ring outlives/outsizes the client cache, so reconnect replay can carry
+  // frames the client never saw). Live frames are unaffected.
+  if(f.replay) live=false;
+  if(!['network','rtm','clog','log'].includes(f.type)) return;
+  lastEventTs=Date.now(); setConn('connected','');
+  const ev=f.event||{}; ev._type=f.type;
+  // Cache EVERY frame (all types, before the current-tab filter) so a tab switch can
+  // replay history — including logs, which the device cannot backfill. Dedup: a frame
+  // already cached (re-delivered by a stream reconnect or present in backfill) is not
+  // re-counted. cacheFrame() also learns dropdown values via observe().
+  const isNew=cacheFrame(f.type,ev);
+  if(SPEC.source!=='all' && f.type!==SPEC.source) return;  // not for the current tab's widgets
+  if(!isNew) return;                                       // already rendered/counted this frame
+  if(!matches(ev)) return;
+  if(SPEC.bodyContains){ bodyMatches(ev).then(ok=>{ if(ok) acceptEvent(ev,live); }); return; }
+  acceptEvent(ev,live);
+}
+async function bodyMatches(ev){ if(ev.id==null || ev._type==='clog') return false; const needle=String(SPEC.bodyContains).toLowerCase();
+  try{ const d=await (await fetch('/detail?kind='+(ev._type||SPEC.source)+'&id='+ev.id)).json();
+    return ((d.request_body||'')+(d.response_body||'')).toLowerCase().includes(needle); }catch{ return false; } }
+const SEEN={};
+const SUGGEST_FIELDS=['event_type','event_name','tag','status_code','channel','url','package'];
+function observe(ev){ for(const f of SUGGEST_FIELDS){ let v=ev[f]; if(v==null||v==='') continue;
+  if(f==='url'){ try{ v=new URL(v).pathname.replace('/api/',''); }catch{} }
+  v=String(v); if(v.length>80) continue;
+  (SEEN[f]||(SEEN[f]=new Set())).add(v);
+  const cap = f==='package' ? Infinity : 500;
+  while(SEEN[f].size>cap){ const it=SEEN[f].values().next().value; SEEN[f].delete(it); } } }
+// Session cache: every frame seen this browser session, across ALL tabs, keyed for
+// dedup. Switching tabs replays from here so events (and logs, which the device cannot
+// backfill) persist instead of the stream restarting from zero.
+// EVICTION (two bounds, whichever hits first, so memory is bounded on a long-lived tab):
+//   1. COUNT  — at most CACHE_CAP frames (FIFO drop oldest).
+//   2. AGE    — frames older than CACHE_TTL_MS are dropped on each insert + on a timer.
+// The dedup Set is kept in lockstep with the array (evicted keys are deleted) so it can
+// never grow unbounded. evictCache() also runs on a 30s timer to age out an idle tab.
+const CACHE=[]; const CACHE_KEYS=new Set(); const CACHE_CAP=8000; const CACHE_TTL_MS=15*60*1000;
+function frameKey(type,ev){ return type+':'+(ev.id!=null?ev.id:(ev.log_ts||'')+'|'+(ev.pid||'')+'|'+(ev.message||ev.event_type||ev.event_name||'')); }
+function dropFront(){ const old=CACHE.shift(); if(old) CACHE_KEYS.delete(frameKey(old.type,old.ev)); }
+function evictCache(){ const cutoff=Date.now()-CACHE_TTL_MS;
+  while(CACHE.length && CACHE[0].ts<cutoff) dropFront();      // age bound
+  while(CACHE.length>CACHE_CAP) dropFront();                  // count bound
+}
+setInterval(evictCache,30000); // age out an idle tab even with no new frames arriving
+// Add a frame to the cache. Returns true if NEW (not a dup re-delivery). Learns
+// dropdown values here so suggestions reflect everything seen, not just rendered.
+function cacheFrame(type,ev){ const k=frameKey(type,ev); if(CACHE_KEYS.has(k)) return false;
+  CACHE_KEYS.add(k); CACHE.push({type,ev,ts:ev.timestamp||Date.now()}); observe(ev);
+  evictCache();
+  return true; }
+// Replay the cache into the freshly-built tab, filtered to the current source, in
+// chronological order. Counters/rate/sparkline/graph all reflect it because acceptEvent
+// buckets by each event's REAL timestamp. Like backfill, this is HISTORY: it passes
+// live=false so alerts do not fire — only genuine /stream arrivals (onEvent default) do.
+// Replay applies matches() but NOT bodyContains: the body filter is live-only by design.
+// Honoring it here would mean one /detail fetch per cached row on every tab switch (a
+// fetch storm up to the full cache). Replay shows what you already saw; the body filter
+// stays a live-only refinement.
+function replayCache(){
+  const rows=CACHE.filter(c=> (SPEC.source==='all'||c.type===SPEC.source));
+  for(const c of rows){ const ev=c.ev; ev._type=c.type; if(matches(ev)) acceptEvent(ev,false); }
+}
+// Rebuild the FEED rows from the session cache for the current FEED.filter, WITHOUT
+// touching counters/graph (those already counted every event). Needed because addRow now
+// drops non-matching rows from the DOM entirely (not insert-then-hide), so changing or
+// clearing the feed filter cannot just un-hide rows that are no longer there — it must
+// re-add the matching ones from the cache.
+function rebuildFeedFromCache(){
+  if(!feed) return;
+  feed.innerHTML='';
+  const rows=CACHE.filter(c=> (SPEC.source==='all'||c.type===SPEC.source));
+  for(const c of rows){ const ev=c.ev; ev._type=c.type;
+    if(!matches(ev)) continue;
+    const r=addRow(ev, ev.timestamp||Date.now());
+    if(r && SPEC.extract) enrich(ev).then(val=>{ if(val!=null&&r) appendExtract(r,val); });
+  }
+  if(FEED.sort!=='newest') applyFeedControls(); else updateFeedCount();
+}
+// accept an event into the widgets. live=true for stream arrivals (fires alerts, enrich,
+// pulse); live=false for cache replay (silent, time-accurate). Buckets by the event's own
+// timestamp so replayed history lands in the right second of the rate/sparkline/graph.
+function acceptEvent(ev, live){ if(live===undefined) live=true; const now=Date.now(); const ets=ev.timestamp||now;
+  const ageSec=Math.max(0,Math.floor((now-ets)/1000));
+  total++; times.push(ets);
+  const si=perSec.length-1-ageSec; if(si>=0&&si<perSec.length) perSec[si]++;
+  if(GRAPH){ const gi=GRAPH.N-1-ageSec; if(gi>=0&&gi<GRAPH.N){ for(const s of GRAPH.series){ const d=s.def;
+    if(d.metric==='ratePerSec') s.buckets[gi]++;
+    else if(d.metric==='count') s.buckets[gi]++;
+    else if(d.metric==='avg'){ const v=Number(ev[d.field]); if(!isNaN(v)){ s.buckets[gi]+=v; s.counts[gi]++; } }
+    else if(d.metric==='errorRate'){ s.counts[gi]++; if(Number(ev.status_code)>=400) s.buckets[gi]++; }
+  } } }
+  if(counterEl){ syncCounter(); if(live){ counterEl.classList.remove('pulse'); void counterEl.offsetWidth; counterEl.classList.add('pulse'); } }
+  const row=FEED.paused?null:addRow(ev,ets); if(row && live && SPEC.extract) enrich(ev).then(val=>{ if(val!=null&&row) appendExtract(row,val); });
+  if(live){ liveMatches++;
+    if(SPEC.alert){ const at=Number(SPEC.alert.at)||0;
+      // at:N fires once on the Nth LIVE match (liveMatches), not the Nth event overall —
+      // device history replayed at build time must not consume the threshold.
+      if(at>0){ if(liveMatches===at) fireAlert(ev, 'reached '+at); }
+      else fireAlert(ev);
     }
+  }
+}
+let audioCtx=null;
+function beep(){ try{ audioCtx=audioCtx||new (window.AudioContext||window.webkitAudioContext)(); const o=audioCtx.createOscillator(), g=audioCtx.createGain(); o.type='sine'; o.frequency.value=880; o.connect(g); g.connect(audioCtx.destination); g.gain.setValueAtTime(0.0001,audioCtx.currentTime); g.gain.exponentialRampToValueAtTime(0.25,audioCtx.currentTime+0.01); g.gain.exponentialRampToValueAtTime(0.0001,audioCtx.currentTime+0.25); o.start(); o.stop(audioCtx.currentTime+0.26); }catch{} }
+let alertTimer=null;
+function dismissAlert(){ const b=document.getElementById('alertbanner'); b.classList.remove('on'); if(alertTimer){ clearTimeout(alertTimer); alertTimer=null; } }
+function fireAlert(ev, note){ const a=SPEC.alert||{};
+  if(a.flash!==false){ const f=document.getElementById('flash'); f.classList.add('on'); setTimeout(()=>f.classList.remove('on'),140); }
+  if(a.sound!==false) beep();
+  const tail = note ? note : esc(ev.event_type||ev.event_name||shortUrl(ev.url)||'');
+  const b=document.getElementById('alertbanner'); b.innerHTML='<span>'+esc(a.say||'ALERT')+'  —  '+tail+'</span><span class="x">dismiss ✕</span>'; b.classList.add('on');
+  if(!alertTimer) alertTimer=setTimeout(dismissAlert,2500);
+}
+function tick(){ const now=Date.now(), w=(SPEC.rateWindowSec||10)*1000; while(times.length&&times[0]<now-w) times.shift(); if(rateEl) rateEl.textContent=times.length; perSec.push(0); if(perSec.length>30) perSec.shift(); if(sparkEl){ const mx=Math.max(1,...perSec); sparkEl.innerHTML=perSec.map(n=>'<div class="bar" style="height:'+(2+n/mx*56)+'px"></div>').join(''); }
+  if(GRAPH){ drawGraph(); for(const s of GRAPH.series){ s.buckets.push(0); s.buckets.shift(); s.counts.push(0); s.counts.shift(); } }
+  if((SPEC.source==='log'||SPEC.source==='all') && document.activeElement!==document.getElementById('fpkg')) refreshPkgOptions();
+}
+const GCOLORS=['#39d98a','#ffd479'];
+function unitFor(def){
+  if(def.unit) return def.unit;
+  if(def.metric==='ratePerSec') return '/s';
+  if(def.metric==='avg') return (def.field&&/ms|duration/i.test(def.field))?'ms':'';
+  if(def.metric==='errorRate') return '%';
+  if(def.metric==='count') return '';
+  return '';
+}
+function fmtNum(v){ if(v==null) return '—'; const a=Math.abs(v); return a>=100?Math.round(v):a>=10?Math.round(v*10)/10:Math.round(v*100)/100; }
+function seriesValues(s){
+  if(s.def.metric==='count'){ let run=0; return s.buckets.map(b=>run+=b); }
+  if(s.def.metric==='avg') return s.buckets.map((b,i)=> s.counts[i]? b/s.counts[i] : null);
+  if(s.def.metric==='errorRate') return s.buckets.map((b,i)=> s.counts[i]? b/s.counts[i] : null);
+  return s.buckets.slice();
+}
+function drawGraph(){ const svg=document.getElementById('graph'); if(!svg) return;
+  const VB_W=640, VB_H=200, N=GRAPH.N;
+  const L=46, R=GRAPH.series.length>1?52:14, T=10, B=26;
+  const x0=L, x1=VB_W-R, y0=T, y1=VB_H-B, pw=x1-x0, ph=y1-y0;
+  let out='', legend='';
+  out+='<rect x="'+x0+'" y="'+y0+'" width="'+pw+'" height="'+ph+'" fill="none" stroke="#1e2a3a"/>';
+  for(let k=0;k<=4;k++){ const fx=x0+(k/4)*pw; const secsAgo=Math.round((1-k/4)*N); const lbl=secsAgo===0?'now':'-'+secsAgo+'s';
+    out+='<line x1="'+fx.toFixed(1)+'" y1="'+y1+'" x2="'+fx.toFixed(1)+'" y2="'+(y1+4)+'" stroke="#33455c"/>';
+    out+='<text x="'+fx.toFixed(1)+'" y="'+(y1+16)+'" fill="#5f7186" font-size="10" text-anchor="middle">'+lbl+'</text>'; }
+  GRAPH.series.forEach((s,si)=>{ const raw=seriesValues(s);
+    const scale = s.def.metric==='errorRate'?100:1;
+    let last=null; const vals=raw.map(v=>{ v=(v==null?null:v*scale); if(v!=null){ last=v; return v; } return last; });
+    const real=vals.filter(v=>v!=null); const mx=Math.max(1,...real);
+    const col=GCOLORS[si], unit=unitFor(s.def);
+    const axX = si===0 ? x0 : x1; const anchor = si===0?'end':'start'; const tx = si===0 ? x0-6 : x1+6;
+    for(let k=0;k<=2;k++){ const val=mx*k/2; const fy=y1-(k/2)*ph;
+      out+='<text x="'+tx+'" y="'+(fy+3).toFixed(1)+'" fill="'+col+'" font-size="10" text-anchor="'+anchor+'">'+fmtNum(val)+'</text>'; }
+    out+='<text x="'+axX+'" y="'+(y0-1)+'" fill="'+col+'" font-size="9" text-anchor="'+(si===0?'start':'end')+'">'+esc(unit||s.def.metric)+'</text>';
+    const pts=vals.map((v,i)=>{ if(v==null) return null; const px=x0+(i/(N-1))*pw; const py=y1-(v/mx)*ph; return px.toFixed(1)+','+py.toFixed(1); }).filter(Boolean).join(' ');
+    if(pts) out+='<polyline fill="none" stroke="'+col+'" stroke-width="2" points="'+pts+'"/>';
+    const h=SPEC.highlight;
+    if(h && s.def.field && h.field===s.def.field && h.value<=mx){ const ty=y1-(h.value/mx)*ph;
+      out+='<line x1="'+x0+'" y1="'+ty.toFixed(1)+'" x2="'+x1+'" y2="'+ty.toFixed(1)+'" stroke="#ff3b30" stroke-width="1" stroke-dasharray="4 3"/>';
+      out+='<text x="'+(x0+4)+'" y="'+(ty-3).toFixed(1)+'" fill="#ff6b60" font-size="9">'+esc(h.label||('>'+h.value))+' '+esc(unit||'')+'</text>'; }
+    const shown=fmtNum(last)+(unit?(' '+unit):'');
+    legend+='<span style="color:'+col+'">■ '+esc(s.def.label||s.def.metric)+': '+shown+'</span>  ';
+  });
+  svg.innerHTML=out; const lg=document.getElementById('legend'); if(lg) lg.innerHTML=legend+' <span style="color:#5f7186">x: time (last '+N+'s, right=now)</span>';
+}
+function shortUrl(u){ try{ return new URL(u).pathname.replace('/api/',''); }catch{ return u||''; } }
+function shortPkg(p){ if(!p) return ''; const parts=String(p).split('.'); return parts.length<=2?p:parts.slice(-2).join('.'); }
+function addRow(ev,now){ if(!has('feed')) return null; const r=document.createElement('div'); r.className='row'; const ts=new Date(ev.timestamp||now).toLocaleTimeString();
+  const typeChip = (SPEC.source==='all' && ev._type) ? '<span class="tchip t-'+ev._type+'">'+ev._type+'</span>' : '';
+  if((ev._type||SPEC.source)==='log'){
+    const lv=(ev.level||'').toUpperCase();
+    const pkg = ev.package ? '<span class="logpkg" title="'+esc(ev.package)+'">'+esc(shortPkg(ev.package))+'</span>' : '';
+    r.innerHTML='<span class="t">'+ts+'</span>'+typeChip+'<span class="lvl lvl-'+lv+'">'+esc(lv||'LOG')+'</span>'+pkg+'<span class="logtag">'+esc(ev.tag||'')+'</span><span class="logmsg">'+esc(ev.message||'')+'</span>';
+  } else {
+    r.innerHTML='<span class="t">'+ts+'</span>'+typeChip+'<span class="dir-'+(ev.direction||'')+'">'+(ev.direction||ev.method||'')+'</span><span>'+esc(ev.event_type||ev.event_name||shortUrl(ev.url))+'</span>'+(ev.channel?'<span class="chan">'+esc(ev.channel)+'</span>':'');
+  }
+  if(showInspector()){ r.classList.add('clickable'); r._ev=ev; r.onclick=()=>inspect(r,ev); }
+  if(breaches(ev)){ r.classList.add('breach'); const h=SPEC.highlight; const v=Number(ev[h.field]);
+    const unit = /ms|duration/i.test(h.field)?'ms' : (h.field==='status_code'?'':'');
+    const b=document.createElement('span'); b.className='breachbadge'; b.textContent=fmtNum(v)+unit+'  '+(h.op||'>')+' '+h.value+unit;
+    r.appendChild(b); }
+  r._search=(r.textContent||'').toLowerCase(); r._ev=ev; r._ts=ev.timestamp||now;
+  // When the feed text filter is active, DROP non-matching rows entirely instead of
+  // inserting-then-hiding them. The 200-row DOM cap below counts every child, so hidden
+  // non-matching rows would otherwise flood the cap and evict the matching rows the user
+  // is watching for (filtered rows flash in, then vanish as unmatched rows push them out).
+  if(FEED.filter && !r._search.includes(FEED.filter)) return null;
+  const atTop = feed.scrollTop <= 4;
+  feed.insertBefore(r,feed.firstChild); while(feed.children.length>200) feed.removeChild(feed.lastChild);
+  if(!atTop){ feed.scrollTop += r.offsetHeight; }
+  if(FEED.sort!=='newest') applyFeedControls(); else updateFeedCount();
+  return r; }
+const LOG_LEVEL_RANK={ FATAL:5, ERROR:4, WARN:3, INFO:2, DEBUG:1, VERBOSE:0 };
+const TYPE_RANK={ network:0, rtm:1, clog:2, log:3 };
+function sortOptionsFor(spec){
+  const src=spec.source, opts=[{key:'newest',label:'newest first',get:r=>r._ts,dir:'desc'},{key:'oldest',label:'oldest first',get:r=>r._ts,dir:'asc'}];
+  if(src==='all'){
+    opts.push({key:'type',label:'group by type',get:r=>TYPE_RANK[r._ev._type]??9,dir:'asc'});
+    return opts;
+  }
+  if(src==='network'){
+    opts.push({key:'slow',label:'slowest (response time)',get:r=>Number(r._ev.duration_ms),dir:'desc'});
+    opts.push({key:'status',label:'status code (high→low)',get:r=>Number(r._ev.status_code),dir:'desc'});
+  }
+  if(src==='log') opts.push({key:'severity',label:'severity (errors first)',get:r=>LOG_LEVEL_RANK[(r._ev.level||'').toUpperCase()]??-1,dir:'desc'});
+  if(src==='rtm') opts.push({key:'evtype',label:'event type (A→Z)',get:r=>r._ev.event_type||'',dir:'asc'});
+  if(src==='clog') opts.push({key:'name',label:'clog name (A→Z)',get:r=>r._ev.event_name||'',dir:'asc'});
+  if(spec.highlight && spec.highlight.field && !opts.some(o=>o.key===spec.highlight.field))
+    opts.push({key:spec.highlight.field,label:spec.highlight.field+' (high→low)',get:r=>Number(r._ev[spec.highlight.field]),dir:'desc'});
+  return opts;
+}
+function breaches(ev){ const h=SPEC.highlight; if(!h) return false; const v=Number(ev[h.field]); if(isNaN(v)) return false;
+  const op=h.op||'>'; return op==='>'?v>h.value:op==='>='?v>=h.value:op==='<'?v<h.value:op==='<='?v<=h.value:v===h.value; }
-    extendBtn.addEventListener("click", async () => {
-      extendBtn.disabled = true;
-      extendBtn.textContent = "Extending…";
-      await extendSession();
-      await pollPing();
-      extendBtn.disabled = false;
-      extendBtn.textContent = "Extend 5m";
-    });
+// ---- feed controls: instant filter, pause, dynamic sort (operate on rendered rows) ----
+let FEED={ filter:'', sort:'newest', paused:false, opts:[] };
+function setupFeedControls(){
+  const opts=sortOptionsFor(SPEC);
+  const stickySort = opts.some(o=>o.key===FEED.sort) ? FEED.sort : 'newest';
+  FEED={ filter:FEED.filter||'', sort:stickySort, paused:false, opts };
+  const bar=document.getElementById('feedbar'); if(!bar) return;
+  bar.style.display = has('feed') ? 'flex' : 'none';
+  const fi=document.getElementById('ffilter'), fs=document.getElementById('fsort'), fp=document.getElementById('fpause');
+  fi.value=FEED.filter; fp.textContent='⏸ live'; fp.classList.remove('paused');
+  fs.innerHTML=FEED.opts.map(o=>'<option value="'+o.key+'">'+o.label+'</option>').join('');
+  fs.value=FEED.sort;
+  const fx=document.getElementById('ffilterclear');
+  const syncClear=()=>{ if(fx) fx.style.display = fi.value ? 'block' : 'none'; };
+  const clearFilterBox=()=>{ fi.value=''; FEED.filter=''; syncClear(); rebuildFeedFromCache(); fi.focus(); };
+  syncClear();
+  // Rebuild from cache (not just hide/show) because addRow drops non-matching rows from
+  // the DOM, so a filter change must re-add matching rows that are no longer present.
+  // Debounced: oninput fires per keystroke, and rebuild re-runs enrich() per matching row
+  // on extract dashboards, so an undebounced rebuild-per-keystroke can fan out /detail
+  // fetches. Settle ~180ms after the last keystroke before rebuilding.
+  let filterTimer=null;
+  fi.oninput=()=>{ FEED.filter=fi.value.trim().toLowerCase(); syncClear();
+    if(filterTimer) clearTimeout(filterTimer); filterTimer=setTimeout(rebuildFeedFromCache,180); };
+  fi.onkeydown=(e)=>{ if(e.key==='Escape') clearFilterBox(); };
+  if(fx) fx.onclick=clearFilterBox;
+  fs.onchange=()=>{ FEED.sort=fs.value; applyFeedControls(); };
+  fp.onclick=()=>{ FEED.paused=!FEED.paused; fp.textContent=FEED.paused?'▶ paused':'⏸ live'; fp.classList.toggle('paused',FEED.paused); };
+  setupPkgControl();
+  renderChips();
+}
+function renderChips(){
+  const wrap=document.getElementById('chips'); if(!wrap) return;
+  if(!SPEC||SPEC.blank||!has('feed')){ wrap.style.display='none'; return; }
+  const m=(SPEC.match&&typeof SPEC.match==='object')?SPEC.match:{};
+  const items=Object.entries(m).map(([k,v])=>({k,v,kind:'match'}));
+  if(SPEC.bodyContains) items.push({k:'body contains',v:SPEC.bodyContains,kind:'body'});
+  if(!items.length){ wrap.style.display='none'; return; }
+  wrap.style.display='flex';
+  wrap.innerHTML=items.map((it,i)=>'<span class="chip"><b>'+esc(it.k)+':</b><span class="v">'+esc(String(it.v))+'</span><span class="x" data-i="'+i+'">✕</span></span>').join('');
+  wrap.querySelectorAll('.x').forEach(x=>x.onclick=()=>{ const it=items[Number(x.dataset.i)]; clearFilter(it); });
+}
+async function clearFilter(it){
+  const spec=JSON.parse(JSON.stringify(SPEC));
+  if(it.kind==='body') delete spec.bodyContains;
+  else { if(spec.match) delete spec.match[it.k]; if(spec.match&&!Object.keys(spec.match).length) delete spec.match; }
+  await fetch('/setspec',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(spec)}).catch(()=>{});
+}
+function setupPkgControl(){
+  const wrap=document.getElementById('fpkgwrap'), sel=document.getElementById('fpkg');
+  if(!wrap||!sel) return;
+  const isLogish = SPEC.source==='log'||SPEC.source==='all';
+  wrap.style.display = isLogish ? 'flex' : 'none';
+  if(!isLogish) return;
+  refreshPkgOptions();
+  sel.onchange=async()=>{ const v=sel.value;
+    const spec=JSON.parse(JSON.stringify(SPEC)); spec.match=spec.match||{};
+    if(v==='__all__') delete spec.match.package; else spec.match.package=v;
+    if(!Object.keys(spec.match).length) delete spec.match;
+    await fetch('/setspec',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(spec)}).catch(()=>{});
+  };
+}
+// Package options are learned live from the stream (observed in SEEN.package). No internal
+// package list is baked in; the running debug build surfaces as soon as it emits a line.
+function refreshPkgOptions(){
+  const sel=document.getElementById('fpkg'); if(!sel) return;
+  const cur=(SPEC.match&&SPEC.match.package)||'__all__';
+  const observed=[...(SEEN.package||new Set())].sort();
+  let pkgs=observed.slice();
+  if(cur!=='__all__'&&!pkgs.includes(cur)) pkgs.unshift(cur);
+  const opts=['<option value="__all__">all apps</option>'].concat(pkgs.map(p=>'<option value="'+esc(p)+'"'+(p===cur?' selected':'')+'>'+esc(shortPkg(p))+'</option>'));
+  sel.innerHTML=opts.join(''); sel.value=cur;
+}
+function applyFeedControls(){ if(!feed) return; const rows=[...feed.children];
+  let shown=0; for(const r of rows){ const hide = FEED.filter && !(r._search||'').includes(FEED.filter); r.classList.toggle('hidden',hide); if(!hide) shown++; }
+  const opt=FEED.opts.find(o=>o.key===FEED.sort)||FEED.opts[0];
+  const val=(r)=>{ const v=opt.get(r); return (v==null||(typeof v==='number'&&isNaN(v)))?null:v; };
+  rows.sort((a,b)=>{ const va=val(a), vb=val(b); if(va==null&&vb==null) return 0; if(va==null) return 1; if(vb==null) return -1;
+    if(va<vb) return opt.dir==='asc'?-1:1; if(va>vb) return opt.dir==='asc'?1:-1; return 0; });
+  for(const r of rows) feed.appendChild(r);
+  updateFeedCount(shown);
+}
+function updateFeedCount(shown){ const c=document.getElementById('fcount'); if(!c||!feed) return;
+  const total=feed.children.length; if(shown==null) shown=[...feed.children].filter(r=>!r.classList.contains('hidden')).length;
+  c.textContent = FEED.filter ? (shown+' / '+total+' shown') : (total+' rows');
+  syncCounter(shown); }
+function syncCounter(shown){
+  if(!counterEl) return;
+  const label=document.getElementById('counterLabel');
+  if(FEED && FEED.filter){
+    if(shown==null) shown=[...feed.children].filter(r=>!r.classList.contains('hidden')).length;
+    counterEl.textContent=shown;
+    if(label) label.textContent = total>feed.children.length ? 'matching "'+FEED.filter+'" (recent)' : 'matching "'+FEED.filter+'"';
+  } else {
+    counterEl.textContent=total;
+    if(label) label.textContent='total matched';
+  }
+}
+let inspectToken=0;
+async function inspect(row,ev){
+  const insp=document.getElementById('inspector');
+  if(row.classList.contains('sel')){ row.classList.remove('sel'); insp.innerHTML='<div class="label">inspector</div><div class="empty">click a row to see its full detail</div>'; inspectToken++; return; }
+  document.querySelectorAll('.row.sel').forEach(x=>x.classList.remove('sel')); row.classList.add('sel');
+  const myToken=++inspectToken;
+  insp.innerHTML='<div class="label">inspector</div><div class="empty">loading…</div>';
+  let detail=ev;
+  const kind=ev._type||SPEC.source;
+  if(ev.id!=null && kind!=='clog' && kind!=='log'){ try{ detail=await (await fetch('/detail?kind='+kind+'&id='+ev.id)).json(); }catch{} }
+  if(myToken!==inspectToken) return;
+  const shown=JSON.parse(JSON.stringify(detail));
+  for(const k of ['response_body','request_body','data']){ if(typeof shown[k]==='string'){ try{ shown[k]=JSON.parse(shown[k]); }catch{} } }
+  INSPECTED=detail; // raw detail for the copy actions
+  // Copy actions: JSON always; Body + cURL when this is a network call (has url/method).
+  const isNet=(kind==='network')||detail.url!=null||detail.method!=null;
+  let btns='<button class="copybtn" data-c="json">Copy JSON</button>';
+  if(isNet) btns+='<button class="copybtn" data-c="body">Copy body</button><button class="copybtn" data-c="curl">Copy cURL</button>';
+  insp.innerHTML='<div class="label">inspector — '+esc(ev.event_name||ev.event_type||shortUrl(ev.url)||'detail')+'</div><div class="copybar">'+btns+'</div><pre>'+esc(JSON.stringify(shown,null,2))+'</pre>';
+  insp.querySelectorAll('.copybtn').forEach(b=>b.onclick=()=>copyInspected(b.dataset.c,b));
+}
+let INSPECTED=null;
+function copyInspected(kind,btn){ const d=INSPECTED||{}; let text='';
+  if(kind==='json') text=JSON.stringify(d,null,2);
+  else if(kind==='body') text=String(d.response_body??d.request_body??'');
+  else if(kind==='curl') text=toCurl(d);
+  navigator.clipboard?.writeText(text).then(()=>{ const o=btn.textContent; btn.textContent='copied ✓'; setTimeout(()=>btn.textContent=o,1200); }).catch(()=>{});
+}
+// Build a runnable curl from a captured network call. Headers + method + body if present.
+function toCurl(d){ if(!d.url) return ''; const parts=["curl -i"];
+  if(d.method && d.method!=='GET') parts.push("-X "+d.method);
+  const h=d.request_headers||d.requestHeaders||{};
+  for(const k of Object.keys(h)) parts.push("-H "+shq(k+": "+h[k]));
+  const body=d.request_body||d.requestBody; if(body) parts.push("--data "+shq(typeof body==='string'?body:JSON.stringify(body)));
+  parts.push(shq(d.url));
+  return parts.join(" \\\n  ");
+}
+function shq(s){ return "'"+String(s).replace(/'/g,"'\\''")+"'"; }
+function appendExtract(row,val){ const s=document.createElement('span'); s.className='extract'; s.textContent=(SPEC.extract.label?SPEC.extract.label+': ':'')+val; row.appendChild(s); }
+// Escapes the five HTML-significant chars. Quotes are included because esc() output is
+// interpolated into double-quoted ATTRIBUTES (title="...", value="..."), not just text
+// content — a spec-authored title/value containing a quote would otherwise break out of the
+// attribute and inject an event handler (DOM-XSS with no < or > needed). All esc() call
+// sites in this file feed HTML, so escaping quotes is safe everywhere.
+function esc(s){ return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+// Human-readable one-line summary of a spec's actual filters + constraints, so every tab
+// (the Custom one especially) explains what it is showing rather than just "source=X".
+// Covers the fields the old "source=X match={}" line dropped: highlight, bodyContains,
+// alert, graph series, rate window. Returns a "·"-joined clause string.
+function describeConstraints(spec){
+  const parts=['source '+spec.source];
+  if(spec.match && Object.keys(spec.match).length)
+    parts.push('where '+Object.entries(spec.match).map(([k,v])=>k+'='+v).join(', '));
+  if(spec.bodyContains) parts.push('body contains "'+spec.bodyContains+'"');
+  if(spec.highlight && spec.highlight.field)
+    parts.push('flag '+spec.highlight.field+' '+(spec.highlight.op||'>')+' '+spec.highlight.value+(spec.highlight.label?' ('+spec.highlight.label+')':''));
+  if(Array.isArray(spec.series) && spec.series.length)
+    parts.push('graph '+spec.series.map(s=>s.label||s.metric+(s.field?' of '+s.field:'')).join(' vs '));
+  if(spec.extract && spec.extract.field) parts.push('extract '+spec.extract.field);
+  if(spec.alert){ const a=spec.alert; parts.push('alert'+(a.at?' at '+a.at:'')+(a.say?' "'+a.say+'"':'')); }
+  if(spec.rateWindowSec) parts.push('rate window '+spec.rateWindowSec+'s');
+  return parts.join('  ·  ');
+}
+function card(label,inner){ const d=document.createElement('div'); d.className='card'; d.innerHTML='<div class="label">'+label+'</div>'+inner; return d; }
+function big(v,id,unit){ return '<div class="big"><span id="'+id+'">'+v+'</span>'+(unit?'<span class="unit">'+unit+'</span>':'')+'</div>'; }
-    async function pollPing() {
-      if (!state.connected) return;
-      try {
-        const res = await fetch("/api/ping");
-        const data = await res.json();
-        if (data.uptime_ms != null) {
-          const remaining = data.remaining_minutes ?? 0;
-          const timerLabel = remaining >= 4 ? "active" : `${remaining}m left`;
-          uptimeBadge.textContent = `${formatUptime(data.uptime_ms)} · ${timerLabel}`;
-          extendBtn.style.display = state.connected ? "" : "none";
-          extendBtn.style.background = remaining < 4 ? "#de9f19" : "#2bac76";
-          if (remaining <= 1 && state.connected) {
-            await extendSession();
-          }
-        }
-      } catch {
-        uptimeBadge.textContent = "";
-        extendBtn.style.display = "none";
-      }
+// ---- DB browser view (source:"db"): db list -> tables -> read-only query grid ----
+let DBV={ db:null, user:null };
+// Build the ?user= suffix so every db call targets the profile the operator picked
+// (or the dashboard's bound profile). Keeps list / pull / query on the same store.
+function dbUserQS(){ return DBV.user!=null ? '&user='+encodeURIComponent(DBV.user) : ''; }
+async function buildDbView(spec){
+  const dbsEl=document.getElementById('db_dbs'), tblsEl=document.getElementById('db_tbls');
+  document.getElementById('db_run').onclick=dbRun;
+  document.getElementById('db_sql').onkeydown=e=>{ if(e.key==='Enter') dbRun(); };
+  tblsEl.innerHTML='<div class="msg">pick a database</div>';
+  document.getElementById('db_out').innerHTML='<div class="msg">pick a database, then a table</div>';
+  document.getElementById('db_meta').textContent='';
+  dbsEl.innerHTML='<div class="msg">loading…</div>';
+  await loadDbList(spec);
+}
+function profileLabel(u){ return u===''||u==null ? 'device' : (u==='0' ? 'personal (user 0)' : 'secondary (user '+esc(u)+')'); }
+async function loadDbList(spec){
+  const dbsEl=document.getElementById('db_dbs');
+  try{ const r=await (await fetch('/dbs?'+dbUserQS().slice(1))).json();
+    if(r.error){ dbsEl.innerHTML='<div class="msg err">'+esc(r.error)+'</div>'; return; }
+    if(!r.names||!r.names.length){ dbsEl.innerHTML='<div class="msg">no databases (device unreachable, or debug build not installed)</div>'; return; }
+    DBV.user = r.user;
+    // Which profile's store this is. With more than one profile, show ONLY a switcher
+    // (the dropdown's selected option already names the profile — no redundant text line).
+    // With a single profile, show it as plain text.
+    const avail=r.availableUsers||[];
+    let head;
+    if(avail.length>1){
+      head='<div class="dbprofile"><span class="dbprofcap">profile</span> <select id="db_userpick" title="which profile\'s on-device store to browse">'+
+        avail.map(u=>'<option value="'+esc(u)+'"'+(u===r.user?' selected':'')+'>'+profileLabel(u)+'</option>').join('')+'</select></div>';
+    } else {
+      head='<div class="dbprofile">profile: <b>'+profileLabel(r.user)+'</b></div>';
     }
-    // pollPing runs on interval; skips when not connected.
-    setInterval(pollPing, 5000);
+    dbsEl.innerHTML=head+r.names.map(n=>'<div class="dbitem" data-n="'+esc(n)+'">'+esc(n)+'</div>').join('');
+    dbsEl.querySelectorAll('.dbitem').forEach(d=>d.onclick=()=>dbSelectDb(d.dataset.n,d));
+    const pick=document.getElementById('db_userpick');
+    if(pick) pick.onchange=()=>{ DBV.user=pick.value; DBV.db=null;
+      document.getElementById('db_tbls').innerHTML='<div class="msg">pick a database</div>';
+      document.getElementById('db_out').innerHTML='<div class="msg">pick a database, then a table</div>';
+      document.getElementById('db_meta').textContent=''; loadDbList(spec); };
+    if(spec&&spec.db){ const el=[...dbsEl.querySelectorAll('.dbitem')].find(x=>x.dataset.n===spec.db); if(el) dbSelectDb(spec.db,el,spec.table,spec.sql); }
+  }catch(e){ dbsEl.innerHTML='<div class="msg err">'+esc(String(e))+'</div>'; }
+}
+async function dbSelectDb(name,el,wantTable,wantSql,refresh){ DBV.db=name;
+  document.querySelectorAll('#db_dbs .dbitem').forEach(x=>x.classList.remove('sel')); if(el) el.classList.add('sel');
+  // clear stale SQL/results so a leftover table query can't run against the newly-picked db
+  document.getElementById('db_sql').value=''; document.getElementById('db_out').innerHTML='<div class="msg">pick a table or write a query</div>';
+  const tblsEl=document.getElementById('db_tbls'); tblsEl.innerHTML='<div class="msg">'+(refresh?'re-pulling':'pulling')+' + reading…</div>';
+  try{ const r=await (await fetch('/dbtables?db='+encodeURIComponent(name)+dbUserQS()+(refresh?'&refresh=1':''))).json();
+    if(r.error){ tblsEl.innerHTML='<div class="msg err">'+esc(r.error)+'</div>'; return; }
+    tblsEl.innerHTML=r.tables.map(t=>'<div class="dbitem" data-t="'+esc(t.name)+'">'+esc(t.name)+'<span class="rows">'+esc(String(t.rows))+'</span></div>').join('');
+    tblsEl.querySelectorAll('.dbitem').forEach(d=>d.onclick=()=>dbSelectTbl(d.dataset.t,d));
+    document.getElementById('db_meta').innerHTML=esc(name)+' — '+((r.sizeBytes/1024)|0)+' KB snapshot, '+r.tables.length+' tables · '+esc(profileLabel(DBV.user))+' <button class="dbrefresh" id="db_refresh" title="re-pull the latest from the device">↻ refresh</button>';
+    const rb=document.getElementById('db_refresh'); if(rb) rb.onclick=()=>dbSelectDb(name,el,null,null,true);
+    if(wantSql){ document.getElementById('db_sql').value=wantSql; dbRun(); }
+    else if(wantTable){ const te=[...tblsEl.querySelectorAll('.dbitem')].find(x=>x.dataset.t===wantTable); if(te) dbSelectTbl(wantTable,te); }
+  }catch(e){ tblsEl.innerHTML='<div class="msg err">'+esc(String(e))+'</div>'; }
+}
+function dbSelectTbl(t,el){ document.querySelectorAll('#db_tbls .dbitem').forEach(x=>x.classList.remove('sel')); if(el) el.classList.add('sel');
+  document.getElementById('db_sql').value='SELECT * FROM "'+t+'" LIMIT 100'; dbRun(); }
+async function dbRun(){ if(!DBV.db) return; const sql=document.getElementById('db_sql').value;
+  const out=document.getElementById('db_out'); out.innerHTML='<div class="msg">running…</div>';
+  try{ const r=await (await fetch('/dbquery?db='+encodeURIComponent(DBV.db)+'&sql='+encodeURIComponent(sql)+dbUserQS())).json();
+    if(r.error){ out.innerHTML='<div class="msg err">'+esc(r.error)+'</div>'; return; }
+    if(!r.rows||!r.rows.length){ out.innerHTML='<div class="msg">0 rows</div>'; document.getElementById('db_meta').textContent=DBV.db+' — 0 rows'; return; }
+    const cols=Object.keys(r.rows[0]);
+    let h='<table><thead><tr>'+cols.map(c=>'<th>'+esc(c)+'</th>').join('')+'</tr></thead><tbody>';
+    for(const row of r.rows){ h+='<tr>'+cols.map(c=>'<td title="'+esc(String(row[c]??''))+'">'+esc(String(row[c]??''))+'</td>').join('')+'</tr>'; }
+    h+='</tbody></table>'; out.innerHTML=h;
+    document.getElementById('db_meta').textContent=DBV.db+' — '+r.rows.length+' rows';
+  }catch(e){ out.innerHTML='<div class="msg err">'+esc(String(e))+'</div>'; }
+}
+// ---- Screen overlay: a global panel that mirrors the live device screen. -----
+// OFF by default. The live screen shows real DMs and message content, so the panel
+// opens to a consent gate first; only after the user accepts does it request frames.
+// Consent is granted server-side (per process) and the stream/record routes enforce it.
+const SCREEN={ on:false, consent:false, recording:false, caps:null };
+function scCopy(text,btn){ navigator.clipboard?.writeText(text).then(()=>{ if(btn){ const t=btn.textContent; btn.textContent='copied'; setTimeout(()=>btn.textContent=t,1200); } }).catch(()=>{}); }
+async function scLoadCaps(){ try{ SCREEN.caps=await (await fetch('/screen/caps')).json(); SCREEN.consent=!!SCREEN.caps.consent; }catch{ SCREEN.caps=null; } }
+function scRenderConsent(){
+  const body=document.getElementById('screenbody'); const hint=document.getElementById('schint');
+  hint.textContent='';
+  body.innerHTML='<div class="scconsent">This mirrors the <b>live device screen</b>. It shows whatever is on the phone right now, including open DMs, message content, and notifications. Review what is on screen before sharing it. Frames are not requested until you accept, and the mirror stays on until you restart the dashboard. If you <b>record</b>, the clip is saved to a file on this computer (owner-only, removed when the dashboard restarts).<button class="scaccept" id="scaccept">Show the screen</button></div>';
+  document.getElementById('scaccept').onclick=async()=>{ try{ await fetch('/screen/consent',{method:'POST'}); SCREEN.consent=true; scRenderLive(); }catch{ hint.textContent='consent failed'; } };
+}
+function scRenderLive(){
+  const body=document.getElementById('screenbody'); const hint=document.getElementById('schint');
+  const caps=SCREEN.caps||{};
+  if(caps.liveCast){
+    body.innerHTML='<img id="screenimg" alt="device screen"/>';
+    document.getElementById('screenimg').src='/screen/stream?fps=20&t='+Date.now();
+    hint.textContent='capturing first frame (~3s on a foldable)…';
+    setTimeout(()=>{ if(SCREEN.on) hint.textContent='live. ▣ Screen again to close.'; },3500);
+  } else {
+    // No ffmpeg: live cast is unavailable. Screenshot still works (pure screencap).
+    // Show the platform install command (copy only — never auto-installed) + scrcpy hint.
+    const cmd=esc(caps.installHint||'install ffmpeg');
+    let html='<div class="scinstall">Live mirroring needs <b>ffmpeg</b>, which is not installed. Install it, then reopen this panel:<br><br><code>'+cmd+'</code><button class="sccopy" id="scffcopy">copy</button></div>';
+    html+='<div class="scinstall">📷 Screenshot works without ffmpeg — use the button above.</div>';
+    if(caps.scrcpy) html+='<div class="scinstall">scrcpy is installed; for a native mirror window run <code>scrcpy</code> in a terminal.</div>';
+    body.innerHTML=html;
+    const c=document.getElementById('scffcopy'); if(c) c.onclick=()=>scCopy(caps.installHint||'',c);
+    hint.textContent='live mirroring unavailable (no ffmpeg); screenshot still works.';
+  }
+}
+async function scOpen(){
+  SCREEN.on=true; document.getElementById('screenpanel').classList.add('on');
+  document.body.classList.add('screenopen'); document.getElementById('screenbtn').classList.add('on');
+  await scLoadCaps();
+  if(SCREEN.consent) scRenderLive(); else scRenderConsent();
+}
+function scClose(){
+  SCREEN.on=false; document.getElementById('screenpanel').classList.remove('on');
+  document.body.classList.remove('screenopen'); document.getElementById('screenbtn').classList.remove('on');
+  const img=document.getElementById('screenimg'); if(img) img.src=''; // drop the stream viewer
+  if(SCREEN.recording){ fetch('/screen/record/stop',{method:'POST'}).catch(()=>{}); SCREEN.recording=false; document.getElementById('screenrec').textContent='● rec'; }
+}
+document.getElementById('screenbtn').onclick=()=>{ SCREEN.on?scClose():scOpen(); };
+document.getElementById('screenclose').onclick=scClose;
+document.getElementById('screenshot').onclick=async()=>{
+  if(!SCREEN.consent){ document.getElementById('schint').textContent='accept the notice first'; return; }
+  // Blob download (not a bare <a href> navigation), so taking a screenshot cannot cancel
+  // the in-flight /screen/stream connection and drop the live <img>.
+  try{ const blob=await (await fetch('/screen/shot?t='+Date.now())).blob(); const u=URL.createObjectURL(blob);
+    const a=document.createElement('a'); a.href=u; a.download='radar-screen-'+Date.now()+'.png'; document.body.appendChild(a); a.click(); a.remove();
+    setTimeout(()=>URL.revokeObjectURL(u),10000);
+  }catch{ document.getElementById('schint').textContent='screenshot failed'; }
+};
+document.getElementById('screenrec').onclick=async()=>{
+  if(!SCREEN.consent || !(SCREEN.caps&&SCREEN.caps.liveCast)){ document.getElementById('schint').textContent='recording needs ffmpeg + consent'; return; }
+  const rec=document.getElementById('screenrec');
+  if(!SCREEN.recording){ SCREEN.recording=true; rec.textContent='■ stop'; rec.classList.add('rec'); await fetch('/screen/record/start',{method:'POST'}).catch(()=>{}); }
+  else { rec.textContent='saving…'; const r=await (await fetch('/screen/record/stop',{method:'POST'})).json().catch(()=>({})); SCREEN.recording=false; rec.classList.remove('rec'); rec.textContent='● rec';
+    if(r.download){
+      // Fetch the mp4 as a blob and download via an object URL. A bare <a href=/screen/download>
+      // click is a same-origin navigation that the browser can use to cancel the in-flight
+      // /screen/stream connection, which silently kills the live <img> (server keeps casting).
+      // A blob download touches no navigation and leaves the stream connection alone.
+      try{ const blob=await (await fetch(r.download)).blob(); const u=URL.createObjectURL(blob);
+        const a=document.createElement('a'); a.href=u; a.download=(r.file||'radar-screen.mp4'); document.body.appendChild(a); a.click(); a.remove();
+        setTimeout(()=>URL.revokeObjectURL(u),10000);
+      }catch{ document.getElementById('schint').textContent='recording saved on host: '+(r.file||''); }
+      // Belt-and-suspenders: re-arm the live <img> in case the browser still dropped it.
+      const img=document.getElementById('screenimg'); if(img) img.src='/screen/stream?fps=20&t='+Date.now();
+    } }
+};
+document.getElementById('screenredetect').onclick=async()=>{
+  document.getElementById('schint').textContent='re-detecting active panel…';
+  const r=await (await fetch('/screen/redetect')).json().catch(()=>({}));
+  if(SCREEN.on && SCREEN.consent && SCREEN.caps&&SCREEN.caps.liveCast){ const img=document.getElementById('screenimg'); if(img) img.src='/screen/stream?fps=20&t='+Date.now(); }
+  document.getElementById('schint').textContent='display: '+(r.display||'default');
+};
-    // --- Go ---
-    // Start in disconnected state. User picks a profile and clicks Enable.
-    // connectStream() is called after Enable succeeds.
-    setDisconnectedUi(true);
-    updateCounts();
-    renderList();
-  </script>
-</body>
-</html>
+pollSpec(); // initial build
+</script></body></html>