brakit 0.8.6 → 0.9.0

package/dist/dashboard.html

@@ -18,11 +18,13 @@
   --red:#dc2626;
   --cyan:#0891b2;
   --green-bg:rgba(22,163,74,0.08);--green-bg-subtle:rgba(22,163,74,0.05);--green-border:rgba(22,163,74,0.2);--green-border-subtle:rgba(22,163,74,0.15);
+  --amber-bg:rgba(217,119,6,0.07);--red-bg:rgba(220,38,38,0.07);--blue-bg:rgba(37,99,235,0.08);--cyan-bg:rgba(8,145,178,0.07);
   --sidebar-width:232px;--header-height:52px;
   --radius:8px;--radius-sm:6px;
-  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
-  --shadow-md:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
-  --shadow-lg:0 4px 12px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04);
+  --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.03);
+  --shadow-md:0 2px 6px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.04);
+  --shadow-lg:0 4px 16px rgba(0,0,0,0.1),0 2px 6px rgba(0,0,0,0.05);
+  --transition:0.15s ease;
   --breakdown-db:#6366f1;--breakdown-fetch:#f59e0b;--breakdown-app:#94a3b8;
   --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
   --sans:Inter,system-ui,-apple-system,sans-serif;
@@ -94,6 +96,11 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--s
 
 /* Content */
 .main-content{flex:1;overflow-y:auto}
+bk-dashboard{display:contents}
+bk-overview-view,bk-flows-view,bk-requests-view,bk-fetches-view,bk-queries-view,bk-errors-view,bk-logs-view,bk-security-view,bk-performance-view,bk-timeline-panel,bk-empty-state{display:block}
+bk-method-badge,bk-status-pill,bk-duration-label,bk-copy-button{display:inline-flex;flex-shrink:0}
+bk-stat-card{display:inline-flex}
+bk-toast{display:block;position:fixed;top:0;left:0;right:0;z-index:100;pointer-events:none}
 
 /* Column headers */
 .col-header{display:flex;align-items:center;gap:16px;padding:8px 28px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);border-bottom:1px solid var(--border);background:var(--bg-sidebar);position:sticky;top:0;z-index:2;font-family:var(--mono)}
@@ -115,8 +122,8 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--s
 .flow-req-count{font-family:var(--mono);font-size:12px;color:var(--text-muted);flex-shrink:0;text-align:right}
 .flow-badge-pill{font-size:11px;flex-shrink:0;font-family:var(--mono);font-weight:600;padding:2px 10px;border-radius:10px;text-align:center}
 .flow-badge-pill.badge-clean{background:var(--green-bg);color:var(--green)}
-.flow-badge-pill.badge-warn{background:rgba(217,119,6,0.07);color:var(--amber)}
-.flow-badge-pill.badge-error{background:rgba(220,38,38,0.07);color:var(--red)}
+.flow-badge-pill.badge-warn{background:var(--amber-bg);color:var(--amber)}
+.flow-badge-pill.badge-error{background:var(--red-bg);color:var(--red)}
 .flow-duration{font-family:var(--mono);font-size:12px;color:var(--text-muted);flex-shrink:0;width:60px;text-align:right}
 
 /* Flow expand panel */
@@ -135,23 +142,23 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--s
 /* Method badges */
 .method-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:5px;font-size:10px;font-weight:700;font-family:var(--mono);letter-spacing:.3px;flex-shrink:0}
 .method-badge-GET{background:var(--green-bg);color:var(--green)}
-.method-badge-POST{background:rgba(37,99,235,0.08);color:var(--blue)}
-.method-badge-PUT,.method-badge-PATCH{background:rgba(217,119,6,0.08);color:var(--amber)}
-.method-badge-DELETE{background:rgba(220,38,38,0.08);color:var(--red)}
+.method-badge-POST{background:var(--blue-bg);color:var(--blue)}
+.method-badge-PUT,.method-badge-PATCH{background:var(--amber-bg);color:var(--amber)}
+.method-badge-DELETE{background:var(--red-bg);color:var(--red)}
 .method-badge-HEAD,.method-badge-OPTIONS{background:var(--bg-muted);color:var(--text-muted)}
 
 /* Status pills */
 .status-pill{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:600;font-family:var(--mono);flex-shrink:0}
 .status-pill-2xx{background:var(--green-bg);color:var(--green)}
-.status-pill-3xx{background:rgba(8,145,178,0.07);color:var(--cyan)}
-.status-pill-4xx{background:rgba(217,119,6,0.07);color:var(--amber)}
-.status-pill-5xx{background:rgba(220,38,38,0.07);color:var(--red)}
+.status-pill-3xx{background:var(--cyan-bg);color:var(--cyan)}
+.status-pill-4xx{background:var(--amber-bg);color:var(--amber)}
+.status-pill-5xx{background:var(--red-bg);color:var(--red)}
 
 .traffic-card-path{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:500;font-size:13px}
 .traffic-card-path.is-dup{color:var(--text-muted);font-weight:400}
 .traffic-card-dur{color:var(--text-muted);font-size:12px;flex-shrink:0}
 .traffic-card-size{color:var(--text-muted);font-size:11px;flex-shrink:0}
-.traffic-card-dup{font-size:10px;color:var(--amber);flex-shrink:0;font-weight:600;background:rgba(217,119,6,0.07);padding:1px 7px;border-radius:4px}
+.traffic-card-dup{font-size:10px;color:var(--amber);flex-shrink:0;font-weight:600;background:var(--amber-bg);padding:1px 7px;border-radius:4px}
 
 /* Body toggles */
 .traffic-body{padding:0;margin-top:8px}
@@ -180,7 +187,7 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--s
 .flow-subreq .subreq-label.is-dup{color:var(--text-muted);font-weight:400}
 .flow-subreq .subreq-status{flex-shrink:0}
 .flow-subreq .subreq-dur{color:var(--text-muted);font-size:12px;text-align:right;flex-shrink:0}
-.flow-subreq .subreq-dup-tag{font-size:10px;color:var(--amber);flex-shrink:0;font-weight:600;background:rgba(217,119,6,0.07);padding:1px 7px;border-radius:4px}
+.flow-subreq .subreq-dup-tag{font-size:10px;color:var(--amber);flex-shrink:0;font-weight:600;background:var(--amber-bg);padding:1px 7px;border-radius:4px}
 .flow-subreq-detail{display:none;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
 .flow-subreq-detail.open{display:block}
 
@@ -210,6 +217,41 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--s
 .strict-mode-dupe{opacity:0.55}
 .strict-mode-banner{font-size:11px;color:var(--text-muted);padding:6px 0 0;font-family:var(--mono)}
 
+/* Flow detail tabs */
+.flow-detail-tabs{display:flex;gap:0;margin-bottom:14px;border-bottom:1px solid var(--border)}
+.flow-tab{padding:8px 16px;font-size:12px;font-family:var(--mono);font-weight:600;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;letter-spacing:.3px}
+.flow-tab:hover{color:var(--text)}
+.flow-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
+
+/* Waterfall chart — request bars on time axis, sub-events as text rows */
+.flow-waterfall{padding:0;font-family:var(--mono);font-size:11px}
+.wf-time-axis{display:flex;justify-content:space-between;font-size:9px;color:var(--text-muted);padding:0 0 6px;margin-left:180px;margin-right:56px;border-bottom:1px solid var(--border);margin-bottom:2px}
+.wf-rows{display:flex;flex-direction:column;gap:0}
+
+/* Request group — request bar + its sub-events */
+.wf-request-group{border-bottom:1px solid var(--border-subtle);padding:2px 0}
+.wf-request-group:last-child{border-bottom:none}
+
+/* Request row — label | bar on time axis | duration */
+.wf-req-row{display:flex;align-items:center;gap:0;height:24px;transition:background .1s}
+.wf-req-row:hover{background:var(--bg-hover)}
+.wf-req-label{width:180px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:500;padding:0 10px 0 0;font-size:11px}
+.wf-bar-track{flex:1;position:relative;height:14px;min-width:0;overflow:hidden}
+.wf-bar{position:absolute;top:1px;height:12px;border-radius:3px;opacity:0.8;min-width:3px}
+.wf-req-row:hover .wf-bar{opacity:1}
+.wf-req-dur{width:56px;flex-shrink:0;text-align:right;color:var(--text-muted);font-size:10px;padding-left:8px}
+
+/* Sub-event rows — same layout as request rows: label | bar track | duration */
+.wf-sub-row{display:flex;align-items:center;gap:0;height:20px;transition:background .1s}
+.wf-sub-row:hover{background:var(--bg-hover)}
+.wf-sub-label{width:180px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:10px;padding-left:14px;display:flex;align-items:center;gap:6px}
+.wf-sub-dot{width:6px;height:6px;border-radius:2px;flex-shrink:0}
+.wf-sub-bar-sized{height:8px !important;top:3px !important;opacity:0.65}
+.wf-sub-row:hover .wf-sub-bar-sized{opacity:0.9}
+.wf-sub-dur{width:56px;flex-shrink:0;text-align:right;color:var(--text-dim);font-size:9px;padding-left:8px}
+
+.wf-loading{color:var(--text-muted);padding:12px 0;font-size:11px;font-family:var(--mono)}
+
 /* Request rows */
 .req-row{display:flex;align-items:center;gap:16px;padding:12px 28px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .1s;font-family:var(--mono);font-size:14px}
 .req-row:hover{background:var(--bg-hover)}
@@ -267,17 +309,23 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--s
 .fetch-stat-value{font-size:17px;font-weight:700;font-family:var(--mono);color:var(--text)}
 .fetch-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-weight:600}
 .fetch-groups-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:10px}
-.fetch-groups{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
-.fetch-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow-sm);transition:all .15s}
+.fetch-groups{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
+.fetch-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px;box-shadow:var(--shadow-sm);transition:all .15s}
 .fetch-group:hover{border-color:var(--border-light);box-shadow:var(--shadow-md)}
 .fetch-group-header{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px}
 .fetch-group-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--text)}
 .fetch-group-count{font-size:12px;color:var(--text-muted);flex-shrink:0;background:var(--bg-muted);padding:2px 8px;border-radius:10px}
-.fetch-group-meta{display:flex;gap:16px;margin-top:8px;font-size:11px;color:var(--text-dim);font-family:var(--mono)}
+.fetch-group-meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11px;color:var(--text-dim);font-family:var(--mono)}
 .fetch-group-meta span{display:flex;align-items:center;gap:4px}
-.fetch-group-callers{margin-top:6px;font-size:11px;color:var(--text-muted)}
-.fetch-group-callers strong{color:var(--text-dim);font-weight:500}
+.fetch-group-sep{color:var(--text-muted);font-size:9px}
+.fetch-group-ok{color:var(--green)}
 .fetch-group-err{color:var(--red)}
+.fetch-group-timeline{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10px;color:var(--text-muted);font-family:var(--mono)}
+.fetch-group-timeline-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.5;flex-shrink:0}
+.fetch-group-timeline-range{letter-spacing:.3px}
+.fetch-group-callers{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10px;flex-wrap:wrap}
+.fetch-group-callers-label{color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
+.fetch-group-caller-pill{background:var(--bg-muted);border:1px solid var(--border);color:var(--text-dim);padding:1px 8px;border-radius:10px;font-family:var(--mono);font-size:10px;white-space:nowrap}
 
 /* Performance tab */
 .perf-selector{display:flex;gap:6px;flex-wrap:wrap;padding:16px 28px;border-bottom:1px solid var(--border-subtle)}
@@ -291,22 +339,39 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--s
 .perf-badge-lg{padding:4px 12px;font-size:13px;border-radius:var(--radius-sm)}
 .perf-badge-sm{padding:1px 6px;font-size:9px}
 
-/* Overview: endpoint list with inline scatter charts */
-.perf-endpoint-list{padding:16px 28px;display:flex;flex-direction:column;gap:8px}
-.perf-endpoint-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px 8px;cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm)}
-.perf-endpoint-card:hover{background:var(--bg-hover);border-color:var(--border-light);box-shadow:var(--shadow-md)}
-.perf-ep-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
-.perf-ep-name{flex:1;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}
-.perf-ep-stats{display:flex;align-items:center;gap:14px;flex-shrink:0}
-.perf-ep-stat{font-size:11px;font-family:var(--mono);color:var(--text-muted)}
-.perf-ep-stat-err{color:var(--red)}
-.perf-ep-stat-warn{color:var(--amber)}
-.perf-ep-stat-muted{color:var(--text-dim)}
-.perf-inline-canvas{width:100%;height:88px;border-radius:var(--radius-sm);background:var(--bg-muted);border:1px solid var(--border);display:block}
+/* Overview: summary cards */
+.perf-overview{padding:16px 28px}
+.perf-summary-row{display:flex;gap:8px;margin-bottom:16px}
+.perf-summary-card{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-sm)}
+.perf-summary-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-family:var(--sans);font-weight:600}
+.perf-summary-value{font-size:20px;font-weight:700;font-family:var(--mono);color:var(--text)}
+.perf-summary-value-sm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* Shared table styles */
+.perf-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
+.perf-table thead th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-weight:600;font-family:var(--sans);padding:10px 14px;border-bottom:2px solid var(--border);white-space:nowrap}
+.perf-table tbody td{padding:11px 14px;border-bottom:1px solid var(--border-subtle);color:var(--text)}
+.perf-table-row{cursor:pointer;transition:background var(--transition, .15s ease)}
+.perf-table-row:hover{background:var(--bg-hover)}
+.perf-table tbody tr:last-child td{border-bottom:none}
+.perf-th-right{text-align:right !important}
+.perf-th-center{text-align:center !important}
+.perf-td-right{text-align:right}
+.perf-td-center{text-align:center}
+.perf-td-name{font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.perf-td-muted{color:var(--text-dim)}
+.perf-row-err{background:var(--red-bg)}
+.perf-row-err:hover{background:rgba(220,38,38,0.1)}
+
+/* Heat map table wrapper */
+.perf-heatmap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
+.perf-hm-p95{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;border:1px solid}
+.perf-hm-split-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--bg-muted);width:100%;min-width:80px}
 
 /* Detail view */
 .perf-detail-header{padding:20px 28px 16px;border-bottom:1px solid var(--border-subtle)}
 .perf-detail-title{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--text);font-family:var(--mono)}
+.perf-baseline-hint{font-size:11px;font-weight:400;color:var(--text-muted);padding:2px 8px;background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius-sm)}
 .perf-metric-row{display:flex;gap:4px;padding:16px 28px;border-bottom:1px solid var(--border-subtle)}
 .perf-metric-card{flex:1;background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;display:flex;flex-direction:column;gap:4px}
 .perf-metric-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-family:var(--sans);font-weight:600}
@@ -341,30 +406,51 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
 .perf-canvas{border-radius:var(--radius);background:var(--bg-muted);border:1px solid var(--border)}
 .perf-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:10px}
 
-/* Request history table */
+/* Request history */
 .perf-history-wrap{padding:0 28px 20px}
-.perf-history-wrap .col-header{padding:8px 0;margin:0;position:static;background:var(--bg);gap:0}
-.perf-hist-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-subtle);font-family:var(--mono);font-size:12px}
-.perf-hist-row:hover{background:var(--bg-hover);margin:0 -28px;padding-left:28px;padding-right:28px}
-.perf-hist-row-err{background:rgba(220,38,38,0.04)}
-.perf-hist-row-err:hover{background:rgba(220,38,38,0.08)}
-.perf-hist-row-hl{background:rgba(37,99,235,0.1);margin:0 -28px;padding-left:28px;padding-right:28px;border-left:3px solid #4ade80}
-.perf-hist-row-hl.perf-hist-row-err{background:rgba(220,38,38,0.12);border-left-color:#f87171}
-.perf-col{flex-shrink:0;border-right:1px solid var(--border-subtle);padding-right:16px;margin-right:16px}
-.perf-col:last-child{border-right:none;padding-right:0;margin-right:0}
-.perf-col-date{width:100px;color:var(--text-dim)}
-.perf-col-health{width:60px;display:flex;align-items:center}
-.perf-col-avg{width:70px;color:var(--text)}
-.perf-col-status{width:50px;text-align:center}
-.perf-col-qpr{width:60px;text-align:right;color:var(--text-dim)}
+.perf-hist-row-hl{background:rgba(37,99,235,0.1) !important;border-left:3px solid #4ade80}
+
+/* Callers section */
+.perf-callers{padding:16px 28px;border-bottom:1px solid var(--border-subtle)}
+.perf-callers-list{display:flex;flex-direction:column;gap:0}
+.perf-caller-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border-subtle);font-family:var(--mono);font-size:12px}
+.perf-caller-row:last-child{border-bottom:none}
+.perf-caller-name{flex:1;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.perf-caller-count{color:var(--text-muted);font-size:11px;flex-shrink:0}
+.perf-caller-avg{color:var(--text-dim);font-size:11px;flex-shrink:0}
+
+/* Query breakdown section */
+.perf-queries{padding:16px 28px;border-bottom:1px solid var(--border-subtle)}
+.perf-queries-loading{font-size:11px;color:var(--text-muted);font-family:var(--mono)}
+.perf-queries-list{display:flex;flex-direction:column;gap:0}
+.perf-query-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border-subtle);font-family:var(--mono);font-size:12px}
+.perf-query-row:last-child{border-bottom:none}
+.perf-query-label{flex:1;font-weight:500;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.perf-query-avg{color:var(--text-muted);font-size:11px;flex-shrink:0}
+.perf-query-count{color:var(--text-dim);font-size:11px;flex-shrink:0}
+
+/* Session trends */
+.perf-trends{padding:16px 28px;border-bottom:1px solid var(--border-subtle)}
+.perf-trends-list{display:flex;flex-direction:column;gap:0}
+.perf-trend-row{display:flex;align-items:center;gap:14px;padding:8px 12px;border-bottom:1px solid var(--border-subtle);font-family:var(--mono);font-size:12px}
+.perf-trend-row:last-child{border-bottom:none}
+.perf-trend-current{background:var(--bg-muted);border-radius:var(--radius-sm);font-weight:600}
+.perf-trend-time{width:80px;color:var(--text-dim);font-size:11px;flex-shrink:0}
+.perf-trend-p95{flex-shrink:0}
+.perf-trend-reqs{color:var(--text-muted);font-size:11px;flex-shrink:0}
+.perf-trend-errs{font-size:11px;flex-shrink:0}
+.perf-trend-arrow{font-size:10px;font-weight:600;flex-shrink:0}
+.perf-trend-slower{color:var(--red)}
+.perf-trend-faster{color:var(--green)}
 
 /* Overview */
 .ov-container{padding:24px 28px}
 
 /* Summary banner */
-.ov-summary{display:flex;gap:24px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
-.ov-stat{display:flex;flex-direction:column;gap:2px}
-.ov-stat-value{font-size:19px;font-weight:700;font-family:var(--mono);color:var(--text)}
+.ov-summary{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
+.ov-stat{display:flex;flex-direction:column;gap:4px;flex:1;min-width:100px;padding:16px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition, .15s ease)}
+.ov-stat:hover{box-shadow:var(--shadow-md)}
+.ov-stat-value{font-size:22px;font-weight:700;font-family:var(--mono);color:var(--text);line-height:1.2}
 .ov-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-weight:600}
 
 /* Section header */
@@ -373,8 +459,8 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
 
 /* Insight cards */
 .ov-cards{display:flex;flex-direction:column;gap:8px}
-.ov-card{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm)}
-.ov-card:hover{background:var(--bg-hover);border-color:var(--border-light);box-shadow:var(--shadow-md)}
+.ov-card{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition, .15s ease);box-shadow:var(--shadow-sm)}
+.ov-card:hover{background:var(--bg-hover);border-color:var(--border-light);box-shadow:var(--shadow-md);transform:translateY(-1px)}
 .ov-card-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;border-radius:50%;margin-top:2px}
 .ov-card-icon.critical{background:rgba(220,38,38,.08);color:var(--red)}
 .ov-card-icon.warning{background:rgba(217,119,6,.08);color:var(--amber)}
@@ -383,6 +469,7 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
 .ov-card-body{flex:1;min-width:0}
 .ov-card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
 .ov-card-desc{font-size:12px;color:var(--text-dim);line-height:1.5}
+.ov-card-detail{font-size:11px;font-family:var(--mono);color:var(--text-muted);margin-top:6px;padding:8px 10px;background:var(--bg-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);line-height:1.5}
 .ov-card-desc strong{color:var(--text);font-family:var(--mono);font-weight:600}
 .ov-card-arrow{color:var(--text-muted);font-size:12px;flex-shrink:0;margin-top:2px;font-family:var(--mono);transition:transform .15s}
 
@@ -438,9 +525,8 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
 .sec-hint{padding:8px 16px;font-size:11px;color:var(--text-muted);background:var(--bg-muted);border-bottom:1px solid var(--border)}
 
 /* Items */
-.sec-items{padding:4px 0}
-.sec-item{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;font-size:12px;transition:background .1s}
-.sec-item:hover{background:var(--bg-hover)}
+.sec-items{padding:2px 0}
+.sec-item{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:12px;flex-wrap:wrap}
 .sec-item-desc{color:var(--text-dim);line-height:1.5;flex:1;min-width:0}
 .sec-item-desc strong{color:var(--text);font-family:var(--mono);font-weight:600}
 .sec-item-count{font-size:10px;font-family:var(--mono);color:var(--text-muted);flex-shrink:0;margin-left:12px}
@@ -465,2189 +551,1103 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
 .sec-ai-verified{background:rgba(22,163,74,.1);color:var(--green)}
 .sec-ai-notes{font-size:11px;color:var(--text-muted);font-style:italic;margin-top:2px;padding-left:0}
 
-/* Timeline */
-.request-timeline{margin-top:8px;background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;overflow:hidden}
-.request-timeline.tl-hidden{display:none}
-.tl-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 8px}
-.tl-title{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-weight:600}
-.tl-counts{display:flex;gap:10px;font-family:var(--mono);font-size:10px}
-.tl-count{color:var(--text-dim)}
-.tl-count-query{color:var(--accent)}
-.tl-count-fetch{color:var(--blue)}
-.tl-count-error{color:var(--red)}
-.tl-count-log{color:var(--text-muted)}
-.tl-loading{color:var(--text-muted);padding:4px 0;font-size:10px;font-family:var(--mono)}
-.tl-events{position:relative;padding-left:4px}
-.tl-event{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;padding:4px 0 4px 12px;border-left:2px solid var(--border);position:relative;flex-wrap:wrap}
-.tl-event-time{width:48px;color:var(--text-muted);font-size:10px;flex-shrink:0;text-align:right}
-.tl-event-type{width:44px;font-weight:700;font-size:9px;letter-spacing:.5px;flex-shrink:0}
-.tl-event-summary{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
-.tl-event-status{width:32px;text-align:right;font-weight:600;flex-shrink:0}
-.tl-event-dur{width:48px;text-align:right;color:var(--text-muted);flex-shrink:0;font-size:10px}
-.tl-event.tl-clickable{cursor:pointer;border-radius:6px;margin-left:-4px;padding:6px 12px;border-left:none;border:1px solid var(--border);background:var(--bg-card)}
-.tl-event.tl-clickable:hover{background:var(--bg-hover);border-color:var(--border-light)}
-.tl-event-sql{width:100%;display:none;margin:4px 0 2px 0;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:10px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text-dim);overflow-x:auto;max-height:150px;overflow-y:auto;position:relative}
-.tl-event-sql.open{display:block}
-.tl-sql-copy{position:absolute;top:6px;right:6px;padding:2px 8px;font-size:9px;font-family:var(--mono);background:var(--bg-muted);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all .15s}
-.tl-sql-copy:hover{background:var(--bg-hover);color:var(--text);border-color:var(--border-light)}
+.request-timeline {
+  margin-top: 8px;
+  background: var(--bg-muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  overflow: hidden;
+}
+
+.request-timeline.tl-hidden { display: none; }
+
+.tl-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 8px;
+}
+
+.tl-title {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: .8px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.tl-counts {
+  display: flex;
+  gap: 10px;
+  font-family: var(--mono);
+  font-size: 10px;
+}
+
+.tl-count       { color: var(--text-dim); }
+.tl-count-query { color: var(--accent); }
+.tl-count-fetch { color: var(--blue); }
+.tl-count-error { color: var(--red); }
+.tl-count-log   { color: var(--text-muted); }
+
+.tl-loading {
+  color: var(--text-muted);
+  padding: 4px 0;
+  font-size: 10px;
+  font-family: var(--mono);
+}
+
+.tl-events {
+  position: relative;
+  padding-left: 4px;
+}
+
+.tl-event {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--mono);
+  font-size: 11px;
+  padding: 4px 0 4px 12px;
+  border-left: 2px solid var(--border);
+  position: relative;
+  flex-wrap: wrap;
+}
+
+.tl-event-time {
+  width: 48px;
+  color: var(--text-muted);
+  font-size: 10px;
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.tl-event-type {
+  width: 44px;
+  font-weight: 700;
+  font-size: 9px;
+  letter-spacing: .5px;
+  flex-shrink: 0;
+}
+
+.tl-event-summary {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+
+.tl-event-status {
+  width: 32px;
+  text-align: right;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.tl-event-dur {
+  width: 48px;
+  text-align: right;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  font-size: 10px;
+}
+
+.tl-event.tl-clickable {
+  cursor: pointer;
+  border-radius: 6px;
+  margin-left: -4px;
+  padding: 6px 12px;
+  border-left: none;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+}
+
+.tl-event.tl-clickable:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-light);
+}
+
+.tl-event-sql {
+  width: 100%;
+  display: none;
+  margin: 4px 0 2px 0;
+  padding: 8px 10px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 10px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-dim);
+  overflow-x: auto;
+  max-height: 150px;
+  overflow-y: auto;
+  position: relative;
+}
+
+.tl-event-sql.open { display: block; }
+
+.tl-sql-copy {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  padding: 2px 8px;
+  font-size: 9px;
+  font-family: var(--mono);
+  background: var(--bg-muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all .15s;
+}
+
+.tl-sql-copy:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+  border-color: var(--border-light);
+}
+
+.tl-nested {
+  margin-left: 24px;
+  padding-left: 10px;
+  border-left: 2px dashed var(--blue);
+  margin-top: 2px;
+  margin-bottom: 2px;
+  position: relative;
+}
+
+.tl-nested::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: -2px;
+  width: 8px;
+  height: 0;
+  border-top: 2px dashed var(--blue);
+}
+
+.tl-nested-label {
+  display: block;
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--blue);
+  letter-spacing: .3px;
+  padding: 2px 0 4px;
+  opacity: .7;
+}
+
+.tl-nested-event {
+  opacity: .9;
+  font-size: 10px;
+}
 </style>
 </head>
 <body>
-
-<div class="app" id="app">
-  <aside class="sidebar">
-    <div class="sidebar-logo">
-      <span class="logo-text">brakit</span>
-      <span class="logo-version">v0.0.0</span>
-    </div>
-    <nav class="sidebar-nav">
-      <button class="sidebar-item active" data-view="overview">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></span>
-        <span class="item-label">Overview</span>
-      </button>
-      <div class="sidebar-section">Monitor</div>
-      <button class="sidebar-item" data-view="actions">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></span>
-        <span class="item-label">Actions</span>
-        <span class="item-count" id="sidebar-count-actions">0</span>
-      </button>
-      <button class="sidebar-item" data-view="requests">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span>
-        <span class="item-label">Requests</span>
-        <span class="item-count" id="sidebar-count-requests">0</span>
-      </button>
-      <button class="sidebar-item" data-view="fetches">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span>
-        <span class="item-label">Fetches</span>
-        <span class="item-count" id="sidebar-count-fetches">0</span>
-      </button>
-      <div class="sidebar-section">Insights</div>
-      <button class="sidebar-item" data-view="queries">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg></span>
-        <span class="item-label">Queries</span>
-        <span class="item-count" id="sidebar-count-queries">0</span>
-      </button>
-      <button class="sidebar-item" data-view="errors">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></span>
-        <span class="item-label">Errors</span>
-        <span class="item-count" id="sidebar-count-errors">0</span>
-      </button>
-      <button class="sidebar-item" data-view="logs">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>
-        <span class="item-label">Logs</span>
-        <span class="item-count" id="sidebar-count-logs">0</span>
-      </button>
-      <button class="sidebar-item" data-view="security">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
-        <span class="item-label">Security</span>
-        <span class="item-count" id="sidebar-count-security" style="display:none">0</span>
-      </button>
-      <button class="sidebar-item" data-view="performance">
-        <span class="item-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></span>
-        <span class="item-label">Performance</span>
-      </button>
-    </nav>
-    <div class="sidebar-footer">:{{PORT}}</div>
-  </aside>
-  <div class="main-panel">
-    <div class="header">
-      <div class="header-left">
-        <span class="header-title" id="header-title">Overview</span>
-        <span class="header-sub" id="header-sub">Live summary of your application</span>
+<bk-dashboard></bk-dashboard>
+<script>window.__BRAKIT_CONFIG__={port:{{PORT}},version:"{{VERSION}}"};</script>
+<script>(function(){'use strict';var Rs=Object.defineProperty;var ws=Object.getOwnPropertyDescriptor;var u=(i,e,t,s)=>{for(var r=s>1?void 0:s?ws(e,t):e,o=i.length-1,n;o>=0;o--)(n=i[o])&&(r=(s?n(e,t,r):n(r))||r);return s&&r&&Rs(e,t,r),r};var Mt=globalThis,Ot=Mt.ShadowRoot&&(Mt.ShadyCSS===void 0||Mt.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,xe=Symbol(),Te=new WeakMap,Lt=class{constructor(e,t,s){if(this._$cssResult$=true,s!==xe)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t;}get styleSheet(){let e=this.o,t=this.t;if(Ot&&e===void 0){let s=t!==void 0&&t.length===1;s&&(e=Te.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),s&&Te.set(t,e));}return e}toString(){return this.cssText}},Re=i=>new Lt(typeof i=="string"?i:i+"",void 0,xe);var we=(i,e)=>{if(Ot)i.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(let t of e){let s=document.createElement("style"),r=Mt.litNonce;r!==void 0&&s.setAttribute("nonce",r),s.textContent=t.cssText,i.appendChild(s);}},Qt=Ot?i=>i:i=>i instanceof CSSStyleSheet?(e=>{let t="";for(let s of e.cssRules)t+=s.cssText;return Re(t)})(i):i;var{is:As,defineProperty:Cs,getOwnPropertyDescriptor:Is,getOwnPropertyNames:Ms,getOwnPropertySymbols:Ls,getPrototypeOf:Os}=Object,N=globalThis,Ae=N.trustedTypes,ks=Ae?Ae.emptyScript:"",Ns=N.reactiveElementPolyfillSupport,ht=(i,e)=>i,mt={toAttribute(i,e){switch(e){case Boolean:i=i?ks:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i);}return i},fromAttribute(i,e){let t=i;switch(e){case Boolean:t=i!==null;break;case Number:t=i===null?null:Number(i);break;case Object:case Array:try{t=JSON.parse(i);}catch{t=null;}}return t}},kt=(i,e)=>!As(i,e),Ce={attribute:true,type:String,converter:mt,reflect:false,useDefault:false,hasChanged:kt};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),N.litPropertyMetadata??(N.litPropertyMetadata=new WeakMap);var O=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??(this.l=[])).push(e);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=Ce){if(t.state&&(t.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=true),this.elementProperties.set(e,t),!t.noAccessor){let s=Symbol(),r=this.getPropertyDescriptor(e,s,t);r!==void 0&&Cs(this.prototype,e,r);}}static getPropertyDescriptor(e,t,s){let{get:r,set:o}=Is(this.prototype,e)??{get(){return this[t]},set(n){this[t]=n;}};return {get:r,set(n){let l=r?.call(this);o?.call(this,n),this.requestUpdate(e,l,s);},configurable:true,enumerable:true}}static getPropertyOptions(e){return this.elementProperties.get(e)??Ce}static _$Ei(){if(this.hasOwnProperty(ht("elementProperties")))return;let e=Os(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties);}static finalize(){if(this.hasOwnProperty(ht("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(ht("properties"))){let t=this.properties,s=[...Ms(t),...Ls(t)];for(let r of s)this.createProperty(r,t[r]);}let e=this[Symbol.metadata];if(e!==null){let t=litPropertyMetadata.get(e);if(t!==void 0)for(let[s,r]of t)this.elementProperties.set(s,r);}this._$Eh=new Map;for(let[t,s]of this.elementProperties){let r=this._$Eu(t,s);r!==void 0&&this._$Eh.set(r,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let s=new Set(e.flat(1/0).reverse());for(let r of s)t.unshift(Qt(r));}else e!==void 0&&t.push(Qt(e));return t}static _$Eu(e,t){let s=t.attribute;return s===false?void 0:typeof s=="string"?s:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this));}addController(e){(this._$EO??(this._$EO=new Set)).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.();}removeController(e){this._$EO?.delete(e);}_$E_(){let e=new Map,t=this.constructor.elementProperties;for(let s of t.keys())this.hasOwnProperty(s)&&(e.set(s,this[s]),delete this[s]);e.size>0&&(this._$Ep=e);}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return we(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(true),this._$EO?.forEach(e=>e.hostConnected?.());}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.());}attributeChangedCallback(e,t,s){this._$AK(e,s);}_$ET(e,t){let s=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,s);if(r!==void 0&&s.reflect===true){let o=(s.converter?.toAttribute!==void 0?s.converter:mt).toAttribute(t,s.type);this._$Em=e,o==null?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null;}}_$AK(e,t){let s=this.constructor,r=s._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let o=s.getPropertyOptions(r),n=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:mt;this._$Em=r;let l=n.fromAttribute(t,o.type);this[r]=l??this._$Ej?.get(r)??l,this._$Em=null;}}requestUpdate(e,t,s,r=false,o){if(e!==void 0){let n=this.constructor;if(r===false&&(o=this[e]),s??(s=n.getPropertyOptions(e)),!((s.hasChanged??kt)(o,t)||s.useDefault&&s.reflect&&o===this._$Ej?.get(e)&&!this.hasAttribute(n._$Eu(e,s))))return;this.C(e,t,s);}this.isUpdatePending===false&&(this._$ES=this._$EP());}C(e,t,{useDefault:s,reflect:r,wrapped:o},n){s&&!(this._$Ej??(this._$Ej=new Map)).has(e)&&(this._$Ej.set(e,n??t??this[e]),o!==true||n!==void 0)||(this._$AL.has(e)||(this.hasUpdated||s||(t=void 0),this._$AL.set(e,t)),r===true&&this._$Em!==e&&(this._$Eq??(this._$Eq=new Set)).add(e));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(let[r,o]of this._$Ep)this[r]=o;this._$Ep=void 0;}let s=this.constructor.elementProperties;if(s.size>0)for(let[r,o]of s){let{wrapped:n}=o,l=this[r];n!==true||this._$AL.has(r)||l===void 0||this.C(r,void 0,o,l);}}let e=false,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(s=>s.hostUpdate?.()),this.update(t)):this._$EM();}catch(s){throw e=false,this._$EM(),s}e&&this._$AE(t);}willUpdate(e){}_$AE(e){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(e)),this.updated(e);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return  true}update(e){this._$Eq&&(this._$Eq=this._$Eq.forEach(t=>this._$ET(t,this[t]))),this._$EM();}updated(e){}firstUpdated(e){}};O.elementStyles=[],O.shadowRootOptions={mode:"open"},O[ht("elementProperties")]=new Map,O[ht("finalized")]=new Map,Ns?.({ReactiveElement:O}),(N.reactiveElementVersions??(N.reactiveElementVersions=[])).push("2.1.2");var ft=globalThis,Ie=i=>i,Nt=ft.trustedTypes,Me=Nt?Nt.createPolicy("lit-html",{createHTML:i=>i}):void 0,He="$lit$",D=`lit$${Math.random().toFixed(9).slice(2)}$`,qe="?"+D,Ds=`<${qe}>`,W=document,gt=()=>W.createComment(""),bt=i=>i===null||typeof i!="object"&&typeof i!="function",Zt=Array.isArray,Hs=i=>Zt(i)||typeof i?.[Symbol.iterator]=="function",Vt=`[ 	
+\f\r]`,vt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Le=/-->/g,Oe=/>/g,B=RegExp(`>|${Vt}(?:([^\\s"'>=/]+)(${Vt}*=${Vt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),ke=/'/g,Ne=/"/g,Pe=/^(?:script|style|textarea|title)$/i,te=i=>(e,...t)=>({_$litType$:i,strings:e,values:t}),a=te(1),j=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),De=new WeakMap,G=W.createTreeWalker(W,129);function Ue(i,e){if(!Zt(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return Me!==void 0?Me.createHTML(e):e}var qs=(i,e)=>{let t=i.length-1,s=[],r,o=e===2?"<svg>":e===3?"<math>":"",n=vt;for(let l=0;l<t;l++){let c=i[l],p,h,m=-1,b=0;for(;b<c.length&&(n.lastIndex=b,h=n.exec(c),h!==null);)b=n.lastIndex,n===vt?h[1]==="!--"?n=Le:h[1]!==void 0?n=Oe:h[2]!==void 0?(Pe.test(h[2])&&(r=RegExp("</"+h[2],"g")),n=B):h[3]!==void 0&&(n=B):n===B?h[0]===">"?(n=r??vt,m=-1):h[1]===void 0?m=-2:(m=n.lastIndex-h[2].length,p=h[1],n=h[3]===void 0?B:h[3]==='"'?Ne:ke):n===Ne||n===ke?n=B:n===Le||n===Oe?n=vt:(n=B,r=void 0);let $=n===B&&i[l+1].startsWith("/>")?" ":"";o+=n===vt?c+Ds:m>=0?(s.push(p),c.slice(0,m)+He+c.slice(m)+D+$):c+D+(m===-2?l:$);}return [Ue(i,o+(i[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),s]},Et=class i{constructor({strings:e,_$litType$:t},s){let r;this.parts=[];let o=0,n=0,l=e.length-1,c=this.parts,[p,h]=qs(e,t);if(this.el=i.createElement(p,s),G.currentNode=this.el.content,t===2||t===3){let m=this.el.content.firstChild;m.replaceWith(...m.childNodes);}for(;(r=G.nextNode())!==null&&c.length<l;){if(r.nodeType===1){if(r.hasAttributes())for(let m of r.getAttributeNames())if(m.endsWith(He)){let b=h[n++],$=r.getAttribute(m).split(D),E=/([.?@])?(.*)/.exec(b);c.push({type:1,index:o,name:E[2],strings:$,ctor:E[1]==="."?Xt:E[1]==="?"?Kt:E[1]==="@"?zt:z}),r.removeAttribute(m);}else m.startsWith(D)&&(c.push({type:6,index:o}),r.removeAttribute(m));if(Pe.test(r.tagName)){let m=r.textContent.split(D),b=m.length-1;if(b>0){r.textContent=Nt?Nt.emptyScript:"";for(let $=0;$<b;$++)r.append(m[$],gt()),G.nextNode(),c.push({type:2,index:++o});r.append(m[b],gt());}}}else if(r.nodeType===8)if(r.data===qe)c.push({type:2,index:o});else {let m=-1;for(;(m=r.data.indexOf(D,m+1))!==-1;)c.push({type:7,index:o}),m+=D.length-1;}o++;}}static createElement(e,t){let s=W.createElement("template");return s.innerHTML=e,s}};function K(i,e,t=i,s){if(e===j)return e;let r=s!==void 0?t._$Co?.[s]:t._$Cl,o=bt(e)?void 0:e._$litDirective$;return r?.constructor!==o&&(r?._$AO?.(false),o===void 0?r=void 0:(r=new o(i),r._$AT(i,t,s)),s!==void 0?(t._$Co??(t._$Co=[]))[s]=r:t._$Cl=r),r!==void 0&&(e=K(i,r._$AS(i,e.values),r,s)),e}var Yt=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:s}=this._$AD,r=(e?.creationScope??W).importNode(t,true);G.currentNode=r;let o=G.nextNode(),n=0,l=0,c=s[0];for(;c!==void 0;){if(n===c.index){let p;c.type===2?p=new _t(o,o.nextSibling,this,e):c.type===1?p=new c.ctor(o,c.name,c.strings,this,e):c.type===6&&(p=new Jt(o,this,e)),this._$AV.push(p),c=s[++l];}n!==c?.index&&(o=G.nextNode(),n++);}return G.currentNode=W,r}p(e){let t=0;for(let s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(e,s,t),t+=s.strings.length-2):s._$AI(e[t])),t++;}},_t=class i{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,s,r){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=s,this.options=r,this._$Cv=r?.isConnected??true;}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=K(this,e,t),bt(e)?e===d||e==null||e===""?(this._$AH!==d&&this._$AR(),this._$AH=d):e!==this._$AH&&e!==j&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Hs(e)?this.k(e):this._(e);}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e));}_(e){this._$AH!==d&&bt(this._$AH)?this._$AA.nextSibling.data=e:this.T(W.createTextNode(e)),this._$AH=e;}$(e){let{values:t,_$litType$:s}=e,r=typeof s=="number"?this._$AC(e):(s.el===void 0&&(s.el=Et.createElement(Ue(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===r)this._$AH.p(t);else {let o=new Yt(r,this),n=o.u(this.options);o.p(t),this.T(n),this._$AH=o;}}_$AC(e){let t=De.get(e.strings);return t===void 0&&De.set(e.strings,t=new Et(e)),t}k(e){Zt(this._$AH)||(this._$AH=[],this._$AR());let t=this._$AH,s,r=0;for(let o of e)r===t.length?t.push(s=new i(this.O(gt()),this.O(gt()),this,this.options)):s=t[r],s._$AI(o),r++;r<t.length&&(this._$AR(s&&s._$AB.nextSibling,r),t.length=r);}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(false,true,t);e!==this._$AB;){let s=Ie(e).nextSibling;Ie(e).remove(),e=s;}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e));}},z=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,s,r,o){this.type=1,this._$AH=d,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=o,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=d;}_$AI(e,t=this,s,r){let o=this.strings,n=false;if(o===void 0)e=K(this,e,t,0),n=!bt(e)||e!==this._$AH&&e!==j,n&&(this._$AH=e);else {let l=e,c,p;for(e=o[0],c=0;c<o.length-1;c++)p=K(this,l[s+c],t,c),p===j&&(p=this._$AH[c]),n||(n=!bt(p)||p!==this._$AH[c]),p===d?e=d:e!==d&&(e+=(p??"")+o[c+1]),this._$AH[c]=p;}n&&!r&&this.j(e);}j(e){e===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"");}},Xt=class extends z{constructor(){super(...arguments),this.type=3;}j(e){this.element[this.name]=e===d?void 0:e;}},Kt=class extends z{constructor(){super(...arguments),this.type=4;}j(e){this.element.toggleAttribute(this.name,!!e&&e!==d);}},zt=class extends z{constructor(e,t,s,r,o){super(e,t,s,r,o),this.type=5;}_$AI(e,t=this){if((e=K(this,e,t,0)??d)===j)return;let s=this._$AH,r=e===d&&s!==d||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,o=e!==d&&(s===d||r);r&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,e),this._$AH=e;}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e);}},Jt=class{constructor(e,t,s){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(e){K(this,e);}};var Ps=ft.litHtmlPolyfillSupport;Ps?.(Et,_t),(ft.litHtmlVersions??(ft.litHtmlVersions=[])).push("3.3.2");var Fe=(i,e,t)=>{let s=t?.renderBefore??e,r=s._$litPart$;if(r===void 0){let o=t?.renderBefore??null;s._$litPart$=r=new _t(e.insertBefore(gt(),o),o,void 0,t??{});}return r._$AI(i),r};var St=globalThis,f=class extends O{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t;let e=super.createRenderRoot();return (t=this.renderOptions).renderBefore??(t.renderBefore=e.firstChild),e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=Fe(t,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return j}};f._$litElement$=true,f.finalized=true,St.litElementHydrateSupport?.({LitElement:f});var Us=St.litElementPolyfillSupport;Us?.({LitElement:f});(St.litElementVersions??(St.litElementVersions=[])).push("4.2.2");var g=i=>(e,t)=>{t!==void 0?t.addInitializer(()=>{customElements.define(i,e);}):customElements.define(i,e);};var Fs={attribute:true,type:String,converter:mt,reflect:false,hasChanged:kt},Bs=(i=Fs,e,t)=>{let{kind:s,metadata:r}=t,o=globalThis.litPropertyMetadata.get(r);if(o===void 0&&globalThis.litPropertyMetadata.set(r,o=new Map),s==="setter"&&((i=Object.create(i)).wrapped=true),o.set(t.name,i),s==="accessor"){let{name:n}=t;return {set(l){let c=e.get.call(this);e.set.call(this,l),this.requestUpdate(n,c,i,true,l);},init(l){return l!==void 0&&this.C(n,void 0,i,l),l}}}if(s==="setter"){let{name:n}=t;return function(l){let c=this[n];e.call(this,l),this.requestUpdate(n,c,i,true,l);}}throw Error("Unsupported decorator location: "+s)};function T(i){return (e,t)=>typeof t=="object"?Bs(i,e,t):((s,r,o)=>{let n=r.hasOwnProperty(o);return r.constructor.createProperty(o,s),n?Object.getOwnPropertyDescriptor(r,o):void 0})(i,e,t)}function _(i){return T({...i,state:true,attribute:false})}var $t=class extends f{constructor(){super(...arguments);this.method="";}createRenderRoot(){return this}render(){let t=this.method.toUpperCase();return a`<span class="method-badge method-badge-${t}">${t}</span>`}};u([T()],$t.prototype,"method",2),$t=u([g("bk-method-badge")],$t);var I="/__brakit/api",k="/__brakit",y={flows:`${I}/flows`,requests:`${I}/requests`,events:`${I}/events`,clear:`${I}/clear`,fetches:`${I}/fetches`,errors:`${I}/errors`,logs:`${I}/logs`,queries:`${I}/queries`,metricsLive:`${I}/metrics/live`,insights:`${I}/insights`,tab:`${I}/tab`,activity:`${I}/activity`};var J="polling",Ht="static",Gs="auth-handshake",Ws="auth-check",js="middleware",yt={[Gs]:1,[Ws]:1,[js]:1};var ee="fetch";var se="error_event",re="query",oe="issues";var ie={overview:"Overview",actions:"Actions",requests:"Requests",fetches:"Server Fetches",queries:"Queries",errors:"Errors",logs:"Logs",performance:"Performance",security:"Security"},ne={overview:"Live summary of your application",actions:"User actions captured as sequences of HTTP requests",requests:"All HTTP requests proxied through brakit",fetches:"Outbound HTTP calls made by your server to external services",queries:"Database queries executed during request handling",errors:"Unhandled exceptions and errors thrown by your application",logs:"Console output from your application",performance:"Endpoint health and response time trends",security:"Security findings and recommendations"};var le=100,Z=300,tt=800,ce=2e3,de=100,pe=50,ue=500;var H="__all__",Ft={SELECT:"var(--blue)",INSERT:"var(--green)",UPDATE:"var(--amber)",DELETE:"var(--red)",COUNT:"var(--text-muted)"},Ke={error:"var(--red)",warn:"var(--amber)",info:"var(--blue)",debug:"var(--text-muted)",log:"var(--text-dim)"},me=["#2563eb","#7c3aed","#16a34a","#d97706","#dc2626","#0891b2","#ea580c","#c026d3","#059669","#db2777"],Tt={green:"#4ade80",amber:"#fbbf24",red:"#f87171"},et=[{max:le,label:"Fast",color:"var(--green)",bg:"rgba(22,163,74,0.08)",border:"rgba(22,163,74,0.2)"},{max:Z,label:"Good",color:"var(--green)",bg:"rgba(22,163,74,0.06)",border:"rgba(22,163,74,0.15)"},{max:tt,label:"OK",color:"var(--amber)",bg:"rgba(217,119,6,0.06)",border:"rgba(217,119,6,0.15)"},{max:ce,label:"Slow",color:"var(--red)",bg:"rgba(220,38,38,0.06)",border:"rgba(220,38,38,0.15)"},{max:1/0,label:"Critical",color:"var(--red)",bg:"rgba(220,38,38,0.08)",border:"rgba(220,38,38,0.2)"}],ze="rgba(228,228,231,0.8)",ve="rgba(113,113,122,0.7)",Je="10px monospace",fe="9px monospace";var Ze={top:16,right:16,bottom:28,left:52},ts={fetch:"var(--blue)",log:"var(--text-muted)",error:"var(--red)",query:"var(--accent)"},es={fetch:"FETCH",log:"LOG",error:"ERROR",query:"QUERY"},ss=new Set(["cookie","set-cookie","authorization","proxy-authorization","x-api-key","x-auth-token"]),rs={400:"Bad Request",401:"Unauthorized",403:"Forbidden",404:"Not Found",405:"Method Not Allowed",408:"Timeout",409:"Conflict",422:"Unprocessable",429:"Too Many Requests",500:"Internal Server Error",502:"Bad Gateway",503:"Service Unavailable",504:"Gateway Timeout"},os=new Set(["host","connection","accept-encoding"]),q={critical:{icon:"\u2717",cls:"critical",sort:0},warning:{icon:"\u26A0",cls:"warning",sort:1},info:{icon:"\u2139",cls:"info",sort:2}};function v(i){return i<1e3?i+"ms":(i/1e3).toFixed(1)+"s"}function U(i){return !i||i===0?"":i<1024?i+"b":(i/1024).toFixed(1)+"kb"}function P(i){return i?i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"):""}function st(i){return i>=500?"status-pill-5xx":i>=400?"status-pill-4xx":i>=300?"status-pill-3xx":"status-pill-2xx"}function is(i){return rs[i]||(i>=500?"Server Error":i>=400?"Client Error":"OK")}function Qs(i,e){if(ss.has(i.toLowerCase())){let t=String(e);return t.length<=8?"****":t.slice(0,4)+"..."+t.slice(-4)+" ("+t.length+" chars)"}return String(e)}function rt(i){return !i||Object.keys(i).length===0?'<span style="color:var(--text-muted)">No headers</span>':Object.entries(i).map(([e,t])=>'<span class="json-key">'+P(e)+"</span>: "+P(Qs(e,t))).join(`
+`)}function Q(i){if(!i)return '<span style="color:var(--text-muted)">No body</span>';try{let e=JSON.parse(i);return Vs(JSON.stringify(e,null,2))}catch{return P(i)}}function Vs(i){return P(i).replace(/("(?:[^"\\]|\\.)*")(\s*:)?|\b(true|false)\b|\bnull\b|(-?\d+\.?\d*(?:[eE][+-]?\d+)?)/g,(e,t,s,r,o)=>t?s?'<span class="json-key">'+t+"</span>"+s:'<span class="json-str">'+t+"</span>":r?'<span class="json-bool">'+e+"</span>":o?'<span class="json-num">'+e+"</span>":e==="null"?'<span class="json-null">null</span>':e)}var xt=class extends f{constructor(){super(...arguments);this.code=0;}createRenderRoot(){return this}render(){let t=st(this.code);return a`<span class="status-pill ${t}">${this.code}</span>`}};u([T({type:Number})],xt.prototype,"code",2),xt=u([g("bk-status-pill")],xt);var Rt=class extends f{constructor(){super(...arguments);this.ms=0;}createRenderRoot(){return this}render(){return a`<span class="req-duration">${v(this.ms)}</span>`}};u([T({type:Number})],Rt.prototype,"ms",2),Rt=u([g("bk-duration-label")],Rt);var ot=class extends f{constructor(){super(...arguments);this.title="";this.subtitle="";}createRenderRoot(){return this}render(){return a`
+      <div class="empty">
+        <span class="empty-title">${this.title}</span>
+        <span class="empty-sub">${this.subtitle}</span>
+      </div>
+    `}};u([T()],ot.prototype,"title",2),u([T()],ot.prototype,"subtitle",2),ot=u([g("bk-empty-state")],ot);var C=class extends f{constructor(){super(...arguments);this.message="";this.visible=false;}createRenderRoot(){return this}static show(t){let s=document.querySelector("bk-toast");s&&s.showMessage(t);}showMessage(t){this.hideTimer&&clearTimeout(this.hideTimer),this.message=t,this.visible=true,this.hideTimer=setTimeout(()=>{this.visible=false;},2e3);}render(){return a`<div class="toast ${this.visible?"show":""}">${this.message}</div>`}};u([_()],C.prototype,"message",2),u([_()],C.prototype,"visible",2),C=u([g("bk-toast")],C);var V=class extends f{constructor(){super(...arguments);this.text="";this.label="Copy";this.toastMessage="Copied";}createRenderRoot(){return this}async copy(t){t.stopPropagation();try{await navigator.clipboard.writeText(this.text),C.show(this.toastMessage);}catch{}}render(){return a`<button class="query-detail-copy" @click=${this.copy}>${this.label}</button>`}};u([T()],V.prototype,"text",2),u([T()],V.prototype,"label",2),u([T({attribute:"toast-message"})],V.prototype,"toastMessage",2),V=u([g("bk-copy-button")],V);var Y=class extends f{constructor(){super(...arguments);this.value="";this.label="";this.color="";}createRenderRoot(){return this}render(){return a`
+      <div class="fetch-stat">
+        <span class="fetch-stat-value" style="color:${this.color}">${this.value}</span>
+        <span class="fetch-stat-label">${this.label}</span>
+      </div>
+    `}};u([T()],Y.prototype,"value",2),u([T()],Y.prototype,"label",2),u([T()],Y.prototype,"color",2),Y=u([g("bk-stat-card")],Y);var F=class extends Event{constructor(e,t,s,r){super("context-request",{bubbles:true,composed:true}),this.context=e,this.contextTarget=t,this.callback=s,this.subscribe=r??false;}};var it=class{constructor(e,t,s,r){if(this.subscribe=false,this.provided=false,this.value=void 0,this.t=(o,n)=>{this.unsubscribe&&(this.unsubscribe!==n&&(this.provided=false,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=o,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=true,this.callback&&this.callback(o,n)),this.unsubscribe=n;},this.host=e,t.context!==void 0){let o=t;this.context=o.context,this.callback=o.callback,this.subscribe=o.subscribe??false;}else this.context=t,this.callback=s,this.subscribe=r??false;this.host.addController(this);}hostConnected(){this.dispatchRequest();}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0);}dispatchRequest(){this.host.dispatchEvent(new F(this.context,this.host,this.t,this.subscribe));}};var Bt=class{get value(){return this.o}set value(e){this.setValue(e);}setValue(e,t=false){let s=t||!Object.is(e,this.o);this.o=e,s&&this.updateObservers();}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[t,{disposer:s}]of this.subscriptions)t(this.o,s);},e!==void 0&&(this.value=e);}addCallback(e,t,s){if(!s)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e);},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r);}clearCallbacks(){this.subscriptions.clear();}};var ge=class extends Event{constructor(e,t){super("context-provider",{bubbles:true,composed:true}),this.context=e,this.contextTarget=t;}},nt=class extends Bt{constructor(e,t,s){super(t.context!==void 0?t.initialValue:s),this.onContextRequest=r=>{if(r.context!==this.context)return;let o=r.contextTarget??r.composedPath()[0];o!==this.host&&(r.stopPropagation(),this.addCallback(r.callback,o,r.subscribe));},this.onProviderRequest=r=>{if(r.context!==this.context||(r.contextTarget??r.composedPath()[0])===this.host)return;let o=new Set;for(let[n,{consumerHost:l}]of this.subscriptions)o.has(n)||(o.add(n),l.dispatchEvent(new F(this.context,l,n,true)));r.stopPropagation();},this.host=e,t.context!==void 0?this.context=t.context:this.context=t,this.attachListeners(),this.host.addController?.(this);}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest);}hostConnected(){this.host.dispatchEvent(new ge(this.context,this.host));}};function be({context:i}){return (e,t)=>{let s=new WeakMap;if(typeof t=="object")return {get(){return e.get.call(this)},set(r){return s.get(this).setValue(r),e.set.call(this,r)},init(r){return s.set(this,new nt(this,{context:i,initialValue:r})),r}};{e.constructor.addInitializer((n=>{s.set(n,new nt(n,{context:i}));}));let r=Object.getOwnPropertyDescriptor(e,t),o;if(r===void 0){let n=new WeakMap;o={get(){return n.get(this)},set(l){s.get(this).setValue(l),n.set(this,l);},configurable:true,enumerable:true};}else {let n=r.set;o={...r,set(l){s.get(this).setValue(l),n?.call(this,l);}};}return void Object.defineProperty(e,t,o)}}}function R({context:i,subscribe:e}){return (t,s)=>{typeof s=="object"?s.addInitializer((function(){new it(this,{context:i,callback:r=>{t.set.call(this,r);},subscribe:e});})):t.constructor.addInitializer((r=>{new it(r,{context:i,callback:o=>{r[s]=o;},subscribe:e});}));}}var x="dashboard-store",Gt=class extends EventTarget{constructor(){super(...arguments);this._state={flows:[],requests:[],fetches:[],errors:[],logs:[],queries:[],issues:[],metrics:[],viewMode:"simple",activeView:"overview"};}get state(){return this._state}setFlows(t){this._state={...this._state,flows:t},this.notify("flows");}setRequests(t){this._state={...this._state,requests:t},this.notify("requests");}setFetches(t){this._state={...this._state,fetches:t},this.notify("fetches");}setErrors(t){this._state={...this._state,errors:t},this.notify("errors");}setLogs(t){this._state={...this._state,logs:t},this.notify("logs");}setQueries(t){this._state={...this._state,queries:t},this.notify("queries");}setIssues(t){this._state={...this._state,issues:t},this.notify("issues");}setMetrics(t){this._state={...this._state,metrics:t},this.notify("metrics");}prependRequest(t){let s=[t,...this._state.requests.slice(0,999)];this._state={...this._state,requests:s},this.notify("requests");}prependFetch(t){this._state={...this._state,fetches:[t,...this._state.fetches]},this.notify("fetches");}prependError(t){this._state={...this._state,errors:[t,...this._state.errors]},this.notify("errors");}prependLog(t){this._state={...this._state,logs:[t,...this._state.logs]},this.notify("logs");}prependQuery(t){this._state={...this._state,queries:[t,...this._state.queries]},this.notify("queries");}setActiveView(t){this._state={...this._state,activeView:t},this.notify("activeView");}setViewMode(t){this._state={...this._state,viewMode:t},this.notify("viewMode");}clearAll(){this._state={...this._state,flows:[],requests:[],fetches:[],errors:[],logs:[],queries:[],issues:[],metrics:[]},this.notify("all");}notify(t){this.dispatchEvent(new CustomEvent("state-changed",{detail:t}));}};var at=class extends f{constructor(){super(...arguments);this.expandedIdx=-1;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}toggleError(t){this.expandedIdx=this.expandedIdx===t?-1:t;}renderErrorRow(t,s){let r=new Date(t.timestamp).toLocaleTimeString(),o=this.expandedIdx===s;return a`
+      <div
+        class="req-row tel-clickable ${o?"expanded":""}"
+        @click=${()=>this.toggleError(s)}
+      >
+        <span class="tel-error-name" title=${t.name}>${t.name}</span>
+        <span class="tel-message" title=${t.message}>${t.message}</span>
+        <span class="tel-timestamp">${r}</span>
+      </div>
+      ${o&&t.stack?a`<div class="error-stack">${t.stack}</div>`:d}
+    `}render(){let t=this.store.state.errors;return t.length===0?a`<bk-empty-state
+        title="No errors"
+        subtitle="No errors have been captured yet"
+      ></bk-empty-state>`:a`
+      <div class="col-header">
+        <span style="width:180px">Type</span>
+        <span style="flex:1">Message</span>
+        <span style="width:130px;text-align:right">Time</span>
+      </div>
+      <div id="error-list">
+        ${t.map((s,r)=>this.renderErrorRow(s,r))}
+      </div>
+    `}};u([R({context:x})],at.prototype,"store",2),u([_()],at.prototype,"expandedIdx",2),at=u([g("bk-errors-view")],at);var wt=class extends f{createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}renderAnalysis(e){if(e.length===0)return d;let t={error:0,warn:0,info:0,debug:0,log:0};for(let s of e)t[s.level]!==void 0&&t[s.level]++;return a`
+      <div id="log-analysis">
+        <div class="fetch-summary">
+          <bk-stat-card value=${String(e.length)} label="Total Logs"></bk-stat-card>
+          ${t.error>0?a`<bk-stat-card value=${String(t.error)} label="Errors" color="var(--red)"></bk-stat-card>`:d}
+          ${t.warn>0?a`<bk-stat-card value=${String(t.warn)} label="Warnings" color="var(--amber)"></bk-stat-card>`:d}
+          <bk-stat-card value=${String(t.info)} label="Info"></bk-stat-card>
+          ${t.debug>0?a`<bk-stat-card value=${String(t.debug)} label="Debug"></bk-stat-card>`:d}
+          ${t.log>0?a`<bk-stat-card value=${String(t.log)} label="Log"></bk-stat-card>`:d}
+        </div>
+      </div>
+    `}renderLogRow(e){let t=new Date(e.timestamp).toLocaleTimeString();return a`
+      <div class="req-row">
+        <span class="tel-level tel-level-${e.level}">${e.level.toUpperCase()}</span>
+        <span class="tel-message tel-mono" title=${e.message}>${e.message}</span>
+        <span class="tel-timestamp">${t}</span>
+      </div>
+    `}render(){let e=this.store.state.logs;return e.length===0?a`<bk-empty-state
+        title="No logs"
+        subtitle="No console output has been captured yet"
+      ></bk-empty-state>`:a`
+      ${this.renderAnalysis(e)}
+      <div class="col-header">
+        <span style="width:52px">Level</span>
+        <span style="flex:1">Message</span>
+        <span style="width:130px;text-align:right">Time</span>
+      </div>
+      <div id="log-list">
+        ${e.map(t=>this.renderLogRow(t))}
+      </div>
+    `}};u([R({context:x})],wt.prototype,"store",2),wt=u([g("bk-logs-view")],wt);var Xs=new Set(["SELECT","FROM","WHERE","AND","OR","INSERT","INTO","VALUES","UPDATE","SET","DELETE","JOIN","LEFT","RIGHT","INNER","OUTER","ON","GROUP","BY","ORDER","HAVING","LIMIT","OFFSET","AS","IN","NOT","NULL","IS","LIKE","BETWEEN","EXISTS","CASE","WHEN","THEN","ELSE","END","COUNT","SUM","AVG","MIN","MAX","DISTINCT","UNION","ALL","CREATE","TABLE","ALTER","DROP","INDEX","RETURNING","WITH","RECURSIVE","OVER","PARTITION","WINDOW","FETCH","NEXT","ROWS","ONLY","CAST","COALESCE","NULLIF","EXTRACT","INTERVAL","TRUE","FALSE","ASC","DESC","USING","NATURAL","CROSS","FULL","ROLLBACK","COMMIT","BEGIN","TRANSACTION","SAVEPOINT","RELEASE"]);function ns(i){let e=i.trim().match(/^(\w+)/);return e?e[1].toUpperCase():"?"}function as(i){let e=i.replace(/\s+/g," ").trim(),t=e.match(/\bFROM\s+["'`]?(\w+)["'`]?/i);if(t)return t[1];let s=e.match(/\bINTO\s+["'`]?(\w+)["'`]?/i);if(s)return s[1];let r=e.match(/\bUPDATE\s+["'`]?(\w+)["'`]?/i);return r?r[1]:""}function ls(i){return P(i).replace(/\b\w+\b/g,e=>Xs.has(e.toUpperCase())?'<span class="sql-kw">'+e+"</span>":e)}var lt=class extends f{constructor(){super(...arguments);this.expandedIdx=-1;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}toggleQuery(t){this.expandedIdx=this.expandedIdx===t?-1:t;}queryDuration(t){return t===0?"<1ms":v(t)}getQueryInfo(t){let s=(t.normalizedOp||t.operation||(t.sql?ns(t.sql):"?")).toUpperCase(),r=t.table||t.model||(t.sql?as(t.sql):""),o=t.sql||s+" "+r;return {op:s,table:r,sqlText:o}}renderQueryRow(t,s){let{op:r,table:o,sqlText:n}=this.getQueryInfo(t),l=Ft[r]||"var(--text-dim)",c=t.durationMs>de,p=t.sql||r+" "+o,h=this.expandedIdx===s;return a`
+      <div>
+        <div
+          class="req-row query-row tel-clickable ${h?"expanded":""}"
+          @click=${()=>this.toggleQuery(s)}
+        >
+          <span class="query-op" title=${r} style="color:${l}">${r}</span>
+          <span class="query-table" title=${o}>${o}</span>
+          <span class="query-preview" title=${p}>${p}</span>
+          <span class="query-dur${c?" query-slow":""}">${this.queryDuration(t.durationMs)}</span>
+        </div>
+        <div class="query-detail ${h?"open":""}">
+          ${h?a`
+                <pre class="query-detail-sql" .innerHTML=${ls(n)}></pre>
+                <bk-copy-button .text=${n} label="Copy"></bk-copy-button>
+              `:d}
+        </div>
+      </div>
+    `}render(){let t=this.store.state.queries;return t.length===0?a`<bk-empty-state
+        title="No queries"
+        subtitle="No database queries have been captured yet"
+      ></bk-empty-state>`:a`
+      <div class="col-header">
+        <span style="width:70px;border-right:1px solid var(--border);padding-right:16px">Operation</span>
+        <span style="width:170px;border-right:1px solid var(--border);padding-right:16px">Table</span>
+        <span style="flex:1;border-right:1px solid var(--border);padding-right:16px">Query</span>
+        <span style="width:60px;text-align:right">Time</span>
+      </div>
+      <div id="query-list">
+        ${t.map((s,r)=>this.renderQueryRow(s,r))}
+      </div>
+    `}};u([R({context:x})],lt.prototype,"store",2),u([_()],lt.prototype,"expandedIdx",2),lt=u([g("bk-queries-view")],lt);function Ee(i){return i.replace(/'/g,"'\\''")}function Ks(i,e){let t=Object.entries(i.headers||{}).filter(([o])=>!os.has(o)).map(([o,n])=>`-H '${Ee(o)}: ${Ee(n)}'`).join(" "),s=i.requestBody?` -d '${Ee(i.requestBody)}'`:"",r=e?`http://localhost:${e}`:"";return `curl -X ${i.method} ${t}${s} '${r}${i.url}'`}function ct(i){let e=window.__BRAKIT_CONFIG__?.port??"",t=Ks(i,e);navigator.clipboard.writeText(t).then(()=>C.show("Copied cURL command"));}var dt=class extends f{constructor(){super(...arguments);this.expandedId=null;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}toggleRequest(t){this.expandedId=this.expandedId===t?null:t;}handleCopyAsCurl(t,s){s.stopPropagation(),ct(t);}renderDetail(t){return a`
+      <div class="detail-meta">
+        <span><bk-method-badge .method=${t.method}></bk-method-badge> ${t.url}</span>
+        <span><bk-status-pill .code=${t.statusCode}></bk-status-pill></span>
+        <span>${t.durationMs}ms</span>
+        ${t.responseSize?a`<span>${U(t.responseSize)}</span>`:d}
+      </div>
+      <div class="request-timeline tl-hidden" data-request-id=${t.id} data-request-started=${String(t.startedAt)}></div>
+      <div class="detail-grid">
+        <div class="detail-section"><h4>Request Headers</h4><pre .innerHTML=${rt(t.headers)}></pre></div>
+        <div class="detail-section"><h4>Response Headers</h4><pre .innerHTML=${rt(t.responseHeaders)}></pre></div>
+        <div class="detail-section"><h4>Request Body</h4><pre .innerHTML=${Q(t.requestBody)}></pre></div>
+        <div class="detail-section"><h4>Response Body</h4><pre .innerHTML=${Q(t.responseBody)}></pre></div>
+      </div>
+      <div class="detail-actions">
+        <button class="btn btn-curl" @click=${s=>this.handleCopyAsCurl(t,s)}>Copy cURL</button>
+      </div>
+    `}renderRequestRow(t){let s=this.expandedId===t.id;return a`
+      <div class="req-row ${s?"expanded":""}" @click=${()=>this.toggleRequest(t.id)}>
+        <div class="req-summary">
+          <bk-method-badge .method=${t.method}></bk-method-badge>
+          <span class="req-url">${t.url}</span>
+          <bk-status-pill .code=${t.statusCode}></bk-status-pill>
+          <bk-duration-label .ms=${t.durationMs}></bk-duration-label>
+          <span class="req-size">${U(t.responseSize)}</span>
+        </div>
       </div>
-      <div class="header-right">
-        <div class="segmented-control" id="mode-toggle" style="display:none">
-          <button class="segmented-btn active" id="mode-simple">Quick</button>
-          <button class="segmented-btn" id="mode-detailed">Detailed</button>
+      <div class="req-detail ${s?"open":""}">${s?this.renderDetail(t):d}</div>
+    `}render(){let t=this.store.state.requests.filter(s=>!s.path?.startsWith(k));return t.length===0?a`<bk-empty-state title="No requests" subtitle="No HTTP requests have been captured yet"></bk-empty-state>`:a`
+      <div class="col-header">
+        <span style="width:60px">Method</span>
+        <span style="flex:1">URL</span>
+        <span style="width:36px;text-align:right">Status</span>
+        <span style="width:70px;text-align:right">Time</span>
+        <span style="width:60px;text-align:right">Size</span>
+      </div>
+      <div id="request-list">${t.map(s=>this.renderRequestRow(s))}</div>
+    `}};u([R({context:x})],dt.prototype,"store",2),u([_()],dt.prototype,"expandedId",2),dt=u([g("bk-requests-view")],dt);var At=class extends f{createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}buildGroups(e,t){let s=new Map;for(let o of t)s.set(o.id,o);let r={};for(let o of e){let n=o.method+" "+o.url;r[n]||(r[n]={method:o.method,url:o.url,count:0,totalDur:0,maxDur:0,errors:0,callers:{},statusCodes:{},firstTs:o.timestamp,lastTs:o.timestamp});let l=r[n];if(l.count++,l.totalDur+=o.durationMs,o.durationMs>l.maxDur&&(l.maxDur=o.durationMs),o.statusCode>=400&&l.errors++,l.statusCodes[o.statusCode]=(l.statusCodes[o.statusCode]||0)+1,o.timestamp<l.firstTs&&(l.firstTs=o.timestamp),o.timestamp>l.lastTs&&(l.lastTs=o.timestamp),o.parentRequestId){let c=s.get(o.parentRequestId);c&&(l.callers[c.method+" "+(c.path||c.url)]=1);}}return Object.values(r).sort((o,n)=>n.count-o.count)}renderSummary(e){let t=new Set,s=0,r=0;for(let n of e)t.add(n.url),n.statusCode>=400&&s++,r+=n.durationMs;let o=Math.round(r/e.length);return a`
+      <div class="fetch-summary">
+        <bk-stat-card value=${String(e.length)} label="Total Fetches"></bk-stat-card>
+        <bk-stat-card value=${String(t.size)} label="Unique URLs"></bk-stat-card>
+        <bk-stat-card value=${String(s)} label="Errors" color=${s>0?"var(--red)":""}></bk-stat-card>
+        <bk-stat-card value=${v(o)} label="Avg Duration"></bk-stat-card>
+      </div>
+    `}formatTime(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}renderGroup(e){let t=Math.round(e.totalDur/e.count),s=e.count>0?Math.round(e.errors/e.count*100):0,r=Object.keys(e.callers),o=Object.entries(e.statusCodes),n=o.length>0?Number(o.sort((l,c)=>c[1]-l[1])[0][0]):0;return a`
+      <div class="fetch-group">
+        <div class="fetch-group-header">
+          <bk-method-badge .method=${e.method}></bk-method-badge>
+          <span class="fetch-group-url" title=${e.url}>${e.url}</span>
+          ${n>0?a`<bk-status-pill .code=${n}></bk-status-pill>`:d}
+          <span class="fetch-group-count">${e.count}x</span>
+        </div>
+        <div class="fetch-group-meta">
+          <span>avg ${v(t)}</span>
+          <span class="fetch-group-sep">\u00b7</span>
+          <span>max ${v(e.maxDur)}</span>
+          <span class="fetch-group-sep">\u00b7</span>
+          ${s>0?a`<span class="fetch-group-err">${s}% errors</span>`:a`<span class="fetch-group-ok">0% errors</span>`}
+        </div>
+        ${e.firstTs>0?a`
+          <div class="fetch-group-timeline">
+            <span class="fetch-group-timeline-dot"></span>
+            <span class="fetch-group-timeline-range">
+              ${this.formatTime(e.firstTs)}${e.firstTs!==e.lastTs?a` \u2192 ${this.formatTime(e.lastTs)}`:d}
+            </span>
+          </div>`:d}
+        ${r.length>0?a`
+          <div class="fetch-group-callers">
+            <span class="fetch-group-callers-label">Called by</span>
+            ${r.map(l=>a`<span class="fetch-group-caller-pill">${l}</span>`)}
+          </div>`:d}
+      </div>
+    `}render(){let e=this.store.state.fetches,t=this.store.state.requests;if(e.length===0)return a`<bk-empty-state title="No fetches" subtitle="No outbound HTTP calls have been captured yet"></bk-empty-state>`;let s=this.buildGroups(e,t);return a`
+      <div class="fetch-analysis" id="fetch-analysis">
+        ${this.renderSummary(e)}
+        ${s.length>0?a`
+          <div class="fetch-groups-title">Grouped by URL (${s.length})</div>
+          <div class="fetch-groups">${s.map(r=>this.renderGroup(r))}</div>
+        `:d}
+      </div>
+    `}};u([R({context:x})],At.prototype,"store",2),At=u([g("bk-fetches-view")],At);function cs(i,e){if(e>=400)return "var(--red)";switch(i){case "GET":return "var(--green)";case "POST":return "var(--blue)";case "PUT":case "PATCH":return "var(--amber)";case "DELETE":return "var(--red)";default:return "var(--text-muted)"}}function _e(i){return i==="query"?"var(--accent)":"var(--cyan)"}function tr(i){return i.type==="query"||i.type==="fetch"}function er(i){let e=(i.normalizedOp||i.operation||"QUERY").toUpperCase(),t=i.table||i.model||"";return {label:`${e} ${t}`,tooltip:i.sql||`${e} ${t}`}}function sr(i){return {label:`${i.method} ${i.url}`,tooltip:`${i.method} ${i.url}`}}function rr(i,e,t,s,r,o){let n=i.data.durationMs||0,l,c;if(o){let p=Math.max(i.timestamp-s,0);l=Math.min(p/r*100,95),c=Math.max(n/r*100,1.5);}else {let p=t[0].timestamp,m=t[t.length-1].timestamp-p;l=m>0?(i.timestamp-p)/m*85:e/Math.max(t.length-1,1)*85,c=Math.max(n/r*100,1.5);}return l+c>100&&(c=Math.max(100-l,1.5)),{leftPct:l,widthPct:c}}function or(i,e){let t=i.timeline.filter(tr);if(t.length===0)return [];let s=e.startedAt,r=e.durationMs||1,o=Math.abs(t[0].timestamp-s)<r*10;return t.map((n,l)=>{let c=n.data.durationMs||0,{leftPct:p,widthPct:h}=rr(n,l,t,s,r,o),m=n.type==="query"?er(n.data):sr(n.data);return {type:n.type,label:m.label,durMs:c,durLabel:v(c),tooltip:m.tooltip,leftPct:p,widthPct:h}})}function ps(i,e){let t=i.requests.filter(l=>!l.isStrictModeDupe);if(t.length===0)return {rows:[],totalMs:0};let s=Math.min(...t.map(l=>l.startedAt)),o=Math.max(...t.map(l=>l.startedAt+l.durationMs))-s;return o===0?{rows:[],totalMs:0}:{rows:t.map(l=>{let c=(l.startedAt-s)/o*100,p=Math.max(l.durationMs/o*100,.5),h=e?.activities?.[l.id],m=h?or(h,l):[];return {label:`${l.method} ${l.label}`,leftPct:c,widthPct:p,color:cs(l.method,l.statusCode),durMs:l.durationMs,durLabel:v(l.durationMs),tooltip:`${l.method} ${l.label} (${v(l.durationMs)})`,subEvents:m}}),totalMs:o}}function us(i){let e=i.requests,t=[],s=[],r=[],o=[],n=new Map;for(let p of e){let h=p.label,m=p.pollingDurationMs||p.durationMs;if(!yt[p.category||""]){if(p.isDuplicate){let b=n.get(h);b?(b.count++,b.wastedMs+=m):n.set(h,{name:h,count:2,wastedMs:m});continue}if(p.statusCode>=400){s.push(h+" ("+is(p.statusCode)+")");continue}p.responseSize>51200&&r.push("Large response: "+h+" returned "+U(p.responseSize)),t.push(h);}}for(let p of n.values())o.push(p);let l="";if(o.length>0){let p=o.map(m=>m.name).join(", "),h=o.reduce((m,b)=>m+b.wastedMs,0);l="Your app fetches "+p+" multiple times on this page. This wastes ~"+v(h)+". Try caching these calls, deduplicating with React Query/SWR, or moving them to a shared layout.";}else s.length>0&&(l="Some requests are failing. Check your API routes and make sure the endpoints exist.");let c=e.filter(p=>p.durationMs>2e3&&p.category!==J);return c.length>0&&!l&&(l=c.map(p=>p.label).join(", ")+` is taking over ${v(2e3)}. Consider adding caching or optimizing the backend query.`),{successes:t,errors:s,warnings:r,duplicates:o,tip:l}}var M=class extends f{constructor(){super(...arguments);this.expandedFlowIdx=-1;this.expandedSubReqIdx=-1;this.flowDetailTab="insights";this.flowTimeline=null;this.flowTimelineLoading=false;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}get flows(){return this.store.state.flows}get viewMode(){return this.store.state.viewMode}flowDotClass(t){return t.hasErrors?"dot-error":t.redundancyPct>0?"dot-warn":"dot-clean"}flowBadgeInfo(t){if(t.hasErrors){let s=t.requests.filter(r=>r.statusCode>=400).length;return {text:s+" error"+(s!==1?"s":""),cls:"badge-error"}}return t.redundancyPct>0?{text:t.redundancyPct+"% redundant",cls:"badge-warn"}:{text:"clean",cls:"badge-clean"}}toggleFlow(t){this.expandedFlowIdx===t?this.expandedFlowIdx=-1:(this.expandedFlowIdx=t,this.expandedSubReqIdx=-1,this.flowDetailTab="insights",this.flowTimeline=null);}toggleSubReq(t,s){s.stopPropagation(),this.expandedSubReqIdx=this.expandedSubReqIdx===t?-1:t;}toggleBodyBlock(t){t.stopPropagation();let s=t.currentTarget,r=s.parentElement;if(!r)return;s.classList.toggle("open");let o=r.querySelector("pre");o&&o.classList.toggle("open");}switchTab(t,s,r){r.stopPropagation(),this.flowDetailTab=t,t==="timeline"&&!this.flowTimeline&&this.loadFlowTimeline(s);}async loadFlowTimeline(t){if(this.flowTimelineLoading)return;let s=t.requests.map(r=>r.id).filter(Boolean);if(s.length!==0){this.flowTimelineLoading=true;try{let r=await fetch(`${y.activity}?requestIds=${s.join(",")}`);if(!r.ok){this.flowTimelineLoading=!1;return}this.flowTimeline=await r.json();}catch{}this.flowTimelineLoading=false;}}loadTimelineForContainer(t){let s=t.querySelectorAll(".request-timeline");for(let r of s){let o=r.getAttribute("data-request-id");if(o&&!r.hasAttribute("data-loaded")){r.setAttribute("data-loaded","1");let n=document.createElement("bk-timeline-panel");n.setAttribute("request-id",o),n.setAttribute("request-started",r.getAttribute("data-request-started")||"0"),r.appendChild(n),r.classList.remove("tl-hidden");}}}updated(){if(this.expandedFlowIdx>=0&&this.flowDetailTab==="insights"){let t=this.querySelector(".flow-expand.open");t&&this.loadTimelineForContainer(t);}}render(){let t=this.flows;return t.length===0?a`<bk-empty-state
+        title="No actions yet"
+        subtitle="Start using your app to see user action flows here"
+      ></bk-empty-state>`:a`
+      <div id="flow-col-header" class="col-header">
+        <span style="width:8px"></span>
+        <span style="flex:1">Action</span>
+        <span style="width:60px;text-align:right">Reqs</span>
+        <span style="width:120px;text-align:right">Status</span>
+        <span style="width:70px;text-align:right">Time</span>
+      </div>
+      <div id="flow-list">
+        ${t.map((s,r)=>this.renderFlowRow(s,r))}
+      </div>
+    `}renderFlowRow(t,s){let r=this.expandedFlowIdx===s,o=this.flowDotClass(t),n=this.flowBadgeInfo(t);return a`
+      <div
+        class="flow-row ${r?"expanded":""}"
+        @click=${()=>this.toggleFlow(s)}
+      >
+        <div class="flow-summary-row">
+          <span class="flow-status-dot ${o}"></span>
+          <span class="flow-label">${t.label}</span>
+          <span class="flow-req-count"
+            >${t.requests.length}
+            req${t.requests.length!==1?"s":""}</span
+          >
+          <span class="flow-badge-pill ${n.cls}">${n.text}</span>
+          <span class="flow-duration"
+            >${v(t.totalDurationMs)}</span
+          >
+        </div>
+      </div>
+      <div class="flow-expand ${r?"open":""}">
+        ${r?this.renderFlowDetail(t):d}
+      </div>
+    `}renderFlowDetail(t){let s=this.viewMode==="simple"?"Insights":"Details";return a`
+      <div class="flow-detail-tabs">
+        <button
+          class="flow-tab ${this.flowDetailTab==="insights"?"active":""}"
+          @click=${r=>this.switchTab("insights",t,r)}
+        >
+          ${s}
+        </button>
+        <button
+          class="flow-tab ${this.flowDetailTab==="timeline"?"active":""}"
+          @click=${r=>this.switchTab("timeline",t,r)}
+        >
+          Timeline
+        </button>
+      </div>
+      ${this.flowDetailTab==="insights"?this.viewMode==="simple"?this.renderFlowInsights(t):this.renderFlowSubReqs(t):this.renderFlowWaterfall(t)}
+    `}renderFlowWaterfall(t){if(this.flowTimelineLoading)return a`<div class="wf-loading">Loading timeline...</div>`;let{rows:s,totalMs:r}=ps(t,this.flowTimeline);if(s.length===0)return d;let o=[];for(let n=0;n<=5;n++)o.push(v(r/5*n));return a`
+      <div class="flow-waterfall">
+        <div class="wf-time-axis">
+          ${o.map(n=>a`<span>${n}</span>`)}
+        </div>
+        <div class="wf-rows">
+          ${s.map(n=>this.renderWaterfallGroup(n))}
+        </div>
+      </div>
+    `}renderWaterfallGroup(t){return a`
+      <div class="wf-request-group">
+        <div class="wf-req-row" title="${t.tooltip}">
+          <div class="wf-req-label">${t.label}</div>
+          <div class="wf-bar-track">
+            <div
+              class="wf-bar"
+              style="left:${t.leftPct}%;width:${t.widthPct}%;background:${t.color}"
+            ></div>
+          </div>
+          <div class="wf-req-dur">${t.durLabel}</div>
+        </div>
+        ${t.subEvents.length>0?t.subEvents.map(s=>a`
+                <div class="wf-sub-row" title="${s.tooltip}">
+                  <div class="wf-sub-label">
+                    <span
+                      class="wf-sub-dot"
+                      style="background:${_e(s.type)}"
+                    ></span>
+                    ${s.label}
+                  </div>
+                  <div class="wf-bar-track">
+                    <div
+                      class="wf-bar wf-sub-bar-sized"
+                      style="left:${t.leftPct+s.leftPct/100*t.widthPct}%;width:${s.widthPct/100*t.widthPct}%;background:${_e(s.type)}"
+                    ></div>
+                  </div>
+                  <div class="wf-sub-dur">${s.durLabel}</div>
+                </div>
+              `):d}
+      </div>
+    `}renderFlowInsights(t){let s=us(t),r=s.errors.length>0||s.duplicates.length>0||s.warnings.length>0||!!s.tip;return a`
+      <div>
+        <div class="flow-traffic">
+          ${t.requests.map(o=>this.renderTrafficCard(o))}
+        </div>
+        ${r?a`
+              <div class="flow-divider"></div>
+              <div class="flow-insights">
+                ${s.errors.map(o=>a`<div class="insight-line insight-error">
+                      ✗ ${o}
+                    </div>`)}
+                ${s.duplicates.map(o=>a`<div class="insight-line insight-warn">
+                      ⚠ ${o.name} — loaded ${o.count}x (wasting
+                      ~${v(o.wastedMs)})
+                    </div>`)}
+                ${s.warnings.map(o=>a`<div class="insight-line insight-warn">⚠ ${o}</div>`)}
+                ${s.tip?a`<div class="insight-line insight-tip">
+                      Tip: ${s.tip}
+                    </div>`:d}
+              </div>
+            `:d}
+      </div>
+    `}renderTrafficCard(t){if(yt[t.category||""])return d;let s=st(t.statusCode),r=v(t.pollingDurationMs||t.durationMs),o=!t.isDuplicate&&t.category!==Ht&&t.category!==J||t.requestBody&&t.method!=="GET"||!!t.responseBody;return a`
+      <div
+        class="traffic-card ${t.isStrictModeDupe?"strict-mode-dupe":""}"
+      >
+        <div class="traffic-card-header ${o?"has-details":""}">
+          <bk-method-badge .method=${t.method}></bk-method-badge>
+          <span class="traffic-card-path ${t.isDuplicate?"is-dup":""}"
+            >${t.label}</span
+          >
+          <span class="status-pill ${s}">${t.statusCode}</span>
+          <span class="traffic-card-dur">${r}</span>
+          ${t.isDuplicate?a`<span class="traffic-card-dup">duplicate</span>`:a`<span class="traffic-card-size"
+                >${U(t.responseSize)}</span
+              >`}
+        </div>
+        ${t.isStrictModeDupe?a`<div class="strict-mode-banner">
+              React Strict Mode duplicate — does not happen in production
+            </div>`:d}
+        ${!t.isDuplicate&&t.category!==Ht&&t.category!==J?a`<div
+              class="request-timeline tl-hidden"
+              data-request-id=${t.id}
+              data-request-started=${String(t.startedAt)}
+            ></div>`:d}
+        ${t.requestBody&&t.method!=="GET"?this.renderBodyToggle("out","Request Body",t.requestBody):d}
+        ${t.responseBody?this.renderBodyToggle("in","Response Body",t.responseBody):d}
+      </div>
+    `}renderBodyToggle(t,s,r){let o=t==="out"?"\u2192":"\u2190";return a`
+      <div class="traffic-body">
+        <button class="traffic-body-toggle" @click=${this.toggleBodyBlock}>
+          <span class="chevron">▸</span
+          ><span class="arrow-${t}">${o}</span> ${s}
+        </button>
+        <pre .innerHTML=${Q(r)}></pre>
+      </div>
+    `}renderFlowSubReqs(t){return a`<div class="flow-subreqs">
+      ${t.requests.map((s,r)=>this.renderSubReqRow(s,r))}
+    </div>`}renderSubReqRow(t,s){let r=this.expandedSubReqIdx===s,o=st(t.statusCode),n=t.pollingDurationMs?v(t.pollingDurationMs):v(t.durationMs);return a`
+      <div
+        class="flow-subreq ${r?"expanded":""}"
+        @click=${l=>this.toggleSubReq(s,l)}
+      >
+        <bk-method-badge .method=${t.method}></bk-method-badge>
+        <span class="subreq-label ${t.isDuplicate?"is-dup":""}"
+          >${t.path||t.url}</span
+        >
+        ${t.isDuplicate?a`<span class="subreq-dup-tag">duplicate</span>`:d}
+        <span class="status-pill ${o}">${t.statusCode}</span>
+        <span class="subreq-dur">${n}</span>
+      </div>
+      <div class="flow-subreq-detail ${r?"open":""}">
+        ${r?this.renderSubReqDetail(t):d}
+      </div>
+    `}renderSubReqDetail(t){let s=st(t.statusCode);return a`
+      <div class="detail-meta">
+        <span
+          ><bk-method-badge .method=${t.method}></bk-method-badge> ${P(t.url)}</span
+        >
+        <span
+          ><span class="status-pill ${s}">${t.statusCode}</span></span
+        >
+        <span>${t.durationMs}ms</span>
+        ${t.responseSize?a`<span>${U(t.responseSize)}</span>`:d}
+      </div>
+      <div
+        class="request-timeline tl-hidden"
+        data-request-id=${t.id}
+        data-request-started=${String(t.startedAt)}
+      ></div>
+      <div class="detail-grid">
+        <div class="detail-section">
+          <h4>Request Headers</h4>
+          <pre .innerHTML=${rt(t.headers)}></pre>
+        </div>
+        <div class="detail-section">
+          <h4>Response Headers</h4>
+          <pre .innerHTML=${rt(t.responseHeaders)}></pre>
+        </div>
+        <div class="detail-section">
+          <h4>Request Body</h4>
+          <pre .innerHTML=${Q(t.requestBody)}></pre>
+        </div>
+        <div class="detail-section">
+          <h4>Response Body</h4>
+          <pre .innerHTML=${Q(t.responseBody)}></pre>
+        </div>
+      </div>
+      <div class="detail-actions">
+        <button
+          class="btn btn-curl"
+          @click=${r=>{r.stopPropagation(),ct(t);}}
+        >
+          Copy cURL
+        </button>
+      </div>
+    `}};u([R({context:x})],M.prototype,"store",2),u([_()],M.prototype,"expandedFlowIdx",2),u([_()],M.prototype,"expandedSubReqIdx",2),u([_()],M.prototype,"flowDetailTab",2),u([_()],M.prototype,"flowTimeline",2),u([_()],M.prototype,"flowTimelineLoading",2),M=u([g("bk-flows-view")],M);var Ct=class extends f{createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}render(){let e=(this.store.state.issues||[]).slice(),t=e.filter(l=>l.state==="open"||l.state==="fixing"||l.state==="regressed"),s=e.filter(l=>l.state==="resolved");if(t.length===0&&s.length===0)return this.store.state.requests.length>0||this.store.state.logs.length>0||this.store.state.queries.length>0?a`
+        <div class="sec-clear">
+          <span class="sec-clear-icon">\u2713</span>
+          <div class="sec-clear-text">
+            <div class="sec-clear-title">All clear</div>
+            <div class="sec-clear-sub">No security or quality issues detected this session</div>
+          </div>
+        </div>
+      `:a`<bk-empty-state title="Waiting for requests..." subtitle="Start using your app to see security findings here"></bk-empty-state>`;let r=0,o=0,n=0;for(let l of t){let c=l.issue.severity;c==="critical"?r++:c==="info"?n++:o++;}return a`
+      <div id="security-content">
+        ${this.renderSummary(t.length,s.length,r,o,n)}
+        ${t.length===0&&s.length>0?a`
+          <div class="sec-clear">
+            <span class="sec-clear-icon">\u2713</span>
+            <div class="sec-clear-text">
+              <div class="sec-clear-title">All issues resolved</div>
+              <div class="sec-clear-sub">${s.length} finding${s.length!==1?"s were":" was"} detected and fixed</div>
+            </div>
+          </div>
+        `:d}
+        ${t.length>0?this.renderOpenGroups(t):d}
+        ${s.length>0?this.renderResolved(s):d}
+      </div>
+    `}renderSummary(e,t,s,r,o){return a`
+      <div class="sec-summary">
+        <div class="sec-summary-left">
+          <span class="sec-summary-count">${e}</span>
+          <span class="sec-summary-label">open issue${e!==1?"s":""}</span>
+          ${t>0?a`<span class="sec-resolved-badge">${t} resolved</span>`:d}
         </div>
-        <button class="btn btn-danger" id="clear-btn">Clear</button>
+        <div class="sec-summary-right">
+          ${s>0?a`<span class="sec-badge critical">${s} critical</span>`:d}
+          ${r>0?a`<span class="sec-badge warning">${r} warning</span>`:d}
+          ${o>0?a`<span class="sec-badge info">${o} info</span>`:d}
+        </div>
+      </div>
+    `}renderOpenGroups(e){let t={},s=[];for(let r of e){let o=r.issue,n=o.rule||o.type;t[n]||(t[n]={rule:n,title:o.title,severity:o.severity,hint:o.hint,items:[]},s.push(n)),t[n].items.push(r);}return s.sort((r,o)=>{let n=q[t[r].severity]?.sort??2,l=q[t[o].severity]?.sort??2;return n!==l?n-l:t[o].items.length-t[r].items.length}),a`${s.map(r=>this.renderGroup(t[r]))}`}renderGroup(e){let t=q[e.severity]||q.info;return a`
+      <div class="sec-group">
+        <div class="sec-group-header">
+          <span class="sec-group-icon ${t.cls}">${t.icon}</span>
+          <span class="sec-group-title">${e.title}</span>
+          <span class="sec-group-count">${e.items.length}</span>
+        </div>
+        ${e.hint?a`<div class="sec-hint">${e.hint}</div>`:d}
+        <div class="sec-items">${e.items.map(s=>this.renderIssueItem(s))}</div>
       </div>
-    </div>
-    <div class="main-content">
-      <div id="overview-container">
-        <div class="ov-container" id="overview-content"></div>
+    `}renderIssueItem(e){let t=e.issue;return a`
+      <div class="sec-item">
+        <div class="sec-item-desc">${t.desc}</div>
+        ${e.occurrences>1?a`<span class="sec-item-count">${e.occurrences}x</span>`:d}
+        ${e.state==="fixing"&&e.aiStatus==="fixed"?a`<span class="sec-ai-badge sec-ai-fixing">AI fixed \u2014 awaiting verification</span>`:e.aiStatus==="wont_fix"?a`<span class="sec-ai-badge sec-ai-wontfix">AI: won\u2019t fix</span>`:e.state==="regressed"?a`<span class="sec-ai-badge sec-ai-fixing" style="background:var(--red)">regressed</span>`:d}
+        ${e.aiNotes?a`<div class="sec-ai-notes">${e.aiNotes}</div>`:d}
       </div>
-      <div class="view-flows" id="flow-container" style="display:none">
-        <div class="col-header" id="flow-col-header">
-          <span style="width:8px"></span>
-          <span style="flex:1">Action</span>
-          <span style="width:60px;text-align:right">Reqs</span>
-          <span style="width:120px;text-align:right">Status</span>
-          <span style="width:70px;text-align:right">Time</span>
+    `}renderResolved(e){return a`
+      <div class="sec-resolved-title">
+        <span class="sec-resolved-check">\u2713</span> Resolved
+        <span class="sec-resolved-count">${e.length}</span>
+      </div>
+      <div class="sec-group sec-group-resolved">
+        <div class="sec-items">
+          ${e.map(t=>a`
+            <div class="sec-item sec-item-resolved">
+              <span class="sec-resolved-item-icon">\u2713</span>
+              <div class="sec-item-desc">${t.issue.title} \u2014 ${t.issue.endpoint||"global"}</div>
+              ${t.aiStatus==="fixed"?a`<span class="sec-ai-badge sec-ai-verified">Verified fix</span>`:d}
+              ${t.aiNotes?a`<div class="sec-ai-notes">${t.aiNotes}</div>`:d}
+            </div>
+          `)}
         </div>
-        <div id="flow-list">
-          <div class="empty" id="empty-flows">
-            <span class="empty-title">Waiting for requests...</span>
-            <span class="empty-sub">Use your app and actions will appear here</span>
+      </div>
+    `}};u([R({context:x})],Ct.prototype,"store",2),Ct=u([g("bk-security-view")],Ct);var pt=class extends f{constructor(){super(...arguments);this.expandedCardIdx=-1;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}toggleCard(t){this.expandedCardIdx=this.expandedCardIdx===t?-1:t;}render(){let t=this.store.state,s=t.requests.filter(E=>!E.isStatic&&!E.isHealthCheck&&(!E.path||E.path.indexOf(k)!==0));if(!(s.length>0||t.queries.length>0||t.errors.length>0))return a`<bk-empty-state
+        title="Waiting for requests..."
+        subtitle="Start using your app to see insights here"
+      ></bk-empty-state>`;let o=s.filter(E=>E.statusCode>=400).length,n=new Set(["data-fetch","api-call","server-action","page-load"]),l=s.filter(E=>E.category&&n.has(E.category)),c=l.length>0?l:s,p=c.length>0?Math.round(c.reduce((E,It)=>E+It.durationMs,0)/c.length):0,h=t.issues||[],m=h.filter(E=>E.state==="open"||E.state==="regressed"),b=h.filter(E=>E.state==="fixing"),$=h.filter(E=>E.state==="resolved");return a`
+      <div class="ov-container" id="overview-content">
+        ${this.renderSummary(s.length,t.flows.length,p,t.queries.length,o,t.fetches.length)}
+        ${m.length===0&&b.length===0&&$.length===0?a`<div class="ov-clear">
+              <span class="ov-clear-icon">\u2713</span>All clear \u2014 no issues detected
+            </div>`:d}
+        ${m.length===0&&$.length>0?a`<div class="ov-clear">
+              <span class="ov-clear-icon">\u2713</span>All issues resolved \u2014
+              ${$.length} finding${$.length!==1?"s were":" was"} detected and
+              fixed
+            </div>`:d}
+        ${m.length>0?this.renderOpenIssues(m):d}
+        ${b.length>0?this.renderVerifying(b):d}
+        ${$.length>0?this.renderResolvedIssues($):d}
+      </div>
+    `}renderSummary(t,s,r,o,n,l){return a`
+      <div class="ov-summary">
+        <div class="ov-stat"><span class="ov-stat-value">${t}</span><span class="ov-stat-label">Requests</span></div>
+        <div class="ov-stat"><span class="ov-stat-value">${s}</span><span class="ov-stat-label">Actions</span></div>
+        <div class="ov-stat"><span class="ov-stat-value">${v(r)}</span><span class="ov-stat-label">Avg Response</span></div>
+        <div class="ov-stat"><span class="ov-stat-value">${o}</span><span class="ov-stat-label">Queries</span></div>
+        <div class="ov-stat"><span class="ov-stat-value" style="color:${n>0?"var(--red)":"var(--green)"}">${n}</span><span class="ov-stat-label">Errors</span></div>
+        <div class="ov-stat"><span class="ov-stat-value">${l}</span><span class="ov-stat-label">Fetches</span></div>
+      </div>
+    `}renderOpenIssues(t){return a`
+      <div class="ov-section-title">Issues Found <span class="ov-issue-count">${t.length}</span></div>
+      <div class="ov-cards">${t.map((s,r)=>this.renderIssueCard(s,r))}</div>
+    `}renderIssueCard(t,s){let r=t.issue,o=q[r.severity]||q.info,n=this.expandedCardIdx===s,l=t.aiStatus==="wont_fix"?a`<span class="sec-ai-badge sec-ai-wontfix">AI: won\u2019t fix</span>`:t.state==="regressed"?a`<span class="sec-ai-badge sec-ai-fixing" style="background:var(--red)">regressed</span>`:d,c=t.cleanHitsSinceLastSeen>0?a`<div class="ov-card-resolving">Resolving\u2026 ${t.cleanHitsSinceLastSeen}/${5} clean requests</div>`:d;return a`
+      <div class="ov-card ${n?"expanded":""}" @click=${()=>this.toggleCard(s)}>
+        <span class="ov-card-icon ${o.cls}">${o.icon}</span>
+        <div class="ov-card-body">
+          <div class="ov-card-title">${r.title}${l}</div>
+          <div class="ov-card-desc">${r.desc}</div>
+          ${r.detail?a`<div class="ov-card-detail">${r.detail}</div>`:d}
+          ${c}
+          ${n&&r.hint?a`<div class="ov-card-hint">${r.hint}</div>`:d}
+        </div>
+        ${r.hint?a`<span class="ov-card-arrow">${n?"\u2193":"\u2192"}</span>`:d}
+      </div>
+    `}renderVerifying(t){return a`
+      <div class="ov-section-title ov-resolved-title">
+        <span style="color:var(--yellow,#f5a623)">\u29d7</span> Awaiting Verification
+        <span class="ov-issue-count">${t.length}</span>
+      </div>
+      <div class="ov-cards">
+        ${t.map(s=>{let r=s.issue,o=s.cleanHitsSinceLastSeen>0?a`<div class="ov-card-resolving">Verifying\u2026 ${s.cleanHitsSinceLastSeen}/${5} clean requests</div>`:d;return a`
+            <div class="ov-card ov-card-resolved">
+              <span class="ov-card-icon resolved">\u29d7</span>
+              <div class="ov-card-body">
+                <div class="ov-card-title" style="color:var(--text-muted)">
+                  ${r.title}
+                  <span class="sec-ai-badge sec-ai-fixing">AI fixed \u2014 awaiting verification</span>
+                </div>
+                <div class="ov-card-desc">${r.desc}</div>
+                ${o}
+              </div>
+            </div>
+          `})}
+      </div>
+    `}renderResolvedIssues(t){return a`
+      <div class="ov-section-title ov-resolved-title">
+        <span style="color:var(--green)">\u2713</span> Resolved
+        <span class="ov-issue-count">${t.length}</span>
+      </div>
+      <div class="ov-cards">
+        ${t.map(s=>a`
+          <div class="ov-card ov-card-resolved">
+            <span class="ov-card-icon resolved">\u2713</span>
+            <div class="ov-card-body">
+              <div class="ov-card-title" style="text-decoration:line-through;color:var(--text-muted)">${s.issue.title}</div>
+              <div class="ov-card-desc">${s.issue.desc}</div>
+            </div>
+          </div>
+        `)}
+      </div>
+    `}};u([R({context:x})],pt.prototype,"store",2),u([_()],pt.prototype,"expandedCardIdx",2),pt=u([g("bk-overview-view")],pt);function hs(i){return i<1?"<1ms":i<1e3?Math.round(i)+"ms":(i/1e3).toFixed(1)+"s"}function ir(i){return i<Z?Tt.green:i<tt?Tt.amber:Tt.red}function nr(i){return i.statusCode>=400?Tt.red:ir(i.durationMs)}function ms(i){return [parseInt(i.slice(1,3),16),parseInt(i.slice(3,5),16),parseInt(i.slice(5,7),16)]}function ar(i){let e=i.getContext("2d");if(!e)return null;let t=window.devicePixelRatio||1,s=i.clientWidth,r=i.clientHeight;return i.width=s*t,i.height=r*t,e.scale(t,t),{ctx:e,w:s,h:r}}function lr(i,e,t,s,r){let[o,n,l]=ms(r);i.beginPath(),i.arc(e,t,s+2,0,Math.PI*2),i.fillStyle=`rgba(${o},${n},${l},0.25)`,i.fill(),i.beginPath(),i.arc(e,t,s,0,Math.PI*2),i.fillStyle=r,i.fill();}function cr(i,e,t,s,r,o){let[n,l,c]=ms(r);i.strokeStyle=`rgba(${n},${l},${c},0.3)`,i.lineWidth=o+2,i.beginPath(),i.moveTo(e-s,t-s),i.lineTo(e+s,t+s),i.moveTo(e+s,t-s),i.lineTo(e-s,t+s),i.stroke(),i.strokeStyle=r,i.lineWidth=o,i.beginPath(),i.moveTo(e-s,t-s),i.lineTo(e+s,t+s),i.moveTo(e+s,t-s),i.lineTo(e-s,t+s),i.stroke();}function vs(i,e){let t=[],s=ar(i);if(!s||e.length===0)return t;let{ctx:r,w:o,h:n}=s,l=Ze,c=o-l.left-l.right,p=n-l.top-l.bottom,h=0,m=e[0].timestamp,b=e[0].timestamp;for(let S of e)S.durationMs>h&&(h=S.durationMs),S.timestamp<m&&(m=S.timestamp),S.timestamp>b&&(b=S.timestamp);h=Math.max(h,10),h=Math.ceil(h*1.15/10)*10;let $=b-m||1;r.strokeStyle=ze,r.lineWidth=1;let E=4;for(let S=0;S<=E;S++){let A=l.top+p-S/E*p;r.beginPath(),r.moveTo(l.left,A),r.lineTo(l.left+c,A),r.stroke(),r.fillStyle=ve,r.font=Je,r.textAlign="right",r.fillText(hs(Math.round(S/E*h)),l.left-8,A+3);}for(let S of [{ms:Z},{ms:tt}]){if(S.ms>=h)continue;let A=l.top+p-S.ms/h*p;r.beginPath(),r.setLineDash([4,4]),r.strokeStyle="rgba(113,113,122,0.3)",r.lineWidth=1,r.moveTo(l.left,A),r.lineTo(l.left+c,A),r.stroke(),r.setLineDash([]),r.fillStyle="rgba(113,113,122,0.5)",r.font=fe,r.textAlign="left",r.fillText(hs(S.ms),l.left+c+2,A+3);}for(let S=0;S<e.length;S++){let A=e[S],ut=e.length===1?l.left+c/2:l.left+(A.timestamp-m)/$*c,jt=l.top+p-A.durationMs/h*p,ye=nr(A);t.push({x:ut,y:jt,idx:S,r:A}),A.statusCode>=400?cr(r,ut,jt,4,ye,2):lr(r,ut,jt,4,ye);}r.fillStyle=ve,r.font=fe,r.textAlign="center";let It=[m,m+$/2,b];for(let S=0;S<It.length;S++){let A=l.left+S/2*c,ut=new Date(It[S]);r.fillText(ut.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"}),A,l.top+p+14);}return t}var vr={max:1/0,label:"Pending",color:"var(--text-muted)",bg:"var(--bg-muted)",border:"var(--border)"};function fs(i,e,t){return t>=20?i:e}function $e(i,e){if(!e||e<=0)return vr;let t=i/e;return t<.7?et[0]:t<1.2?et[1]:t<2?et[2]:t<3?et[3]:et[4]}var L=class extends f{constructor(){super(...arguments);this.selectedEndpoint=H;this.graphData=[];this.loadError=false;this.queryBreakdown=[];this.queryBreakdownLoading=false;this.scatterDots=[];}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate()),this.loadMetrics();}async loadMetrics(){try{let s=await(await fetch(y.metricsLive)).json();this.graphData=s.endpoints||[],this.loadError=!1,(!this.selectedEndpoint||this.selectedEndpoint===H)&&(this.selectedEndpoint=H);}catch{this.loadError=true;}}healthGradeForEndpoint(t){let s=fs(t.summary.p95Ms,t.summary.medianMs,t.summary.totalRequests);return $e(s,t.baselineP95Ms)}healthGradeForDuration(t,s){return $e(t,s)}getCallers(t){let s=this.store.state.flows,r=new Map;for(let o of s)for(let n of o.requests)if(`${n.method} ${n.path}`===t||this.normalizeEndpoint(n)===t){let c=r.get(o.label);c?(c.count++,c.totalMs+=n.durationMs):r.set(o.label,{count:1,totalMs:n.durationMs});}return [...r.entries()].map(([o,n])=>({label:o,count:n.count,avgMs:Math.round(n.totalMs/n.count)})).sort((o,n)=>n.count-o.count)}normalizeEndpoint(t){let s=t.path.replace(/\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/gi,"/:id").replace(/\/\d+/g,"/:id");return `${t.method} ${s}`}async loadQueryBreakdown(t){if(this.queryBreakdownLoading)return;let r=this.store.state.requests.filter(o=>`${o.method} ${o.path}`===t||this.normalizeEndpoint(o)===t).slice(-20).map(o=>o.id).filter(Boolean);if(r.length===0){this.queryBreakdown=[];return}this.queryBreakdownLoading=true;try{let o=await fetch(`${y.activity}?requestIds=${r.join(",")}`);if(!o.ok){this.queryBreakdownLoading=!1;return}let n=await o.json(),l=new Map;for(let c of Object.values(n.activities))for(let p of c.timeline){if(p.type!=="query")continue;let h=p.data,m=(h.normalizedOp||h.operation||"QUERY").toUpperCase(),b=h.table||h.model||"",$=`${m} ${b}`.trim(),E=l.get($);E?(E.totalMs+=h.durationMs,E.count++):l.set($,{label:$,totalMs:h.durationMs,count:1});}this.queryBreakdown=[...l.values()].map(c=>({...c,avgMs:Math.round(c.totalMs/c.count)})).sort((c,p)=>p.totalMs-c.totalMs);}catch{}this.queryBreakdownLoading=false;}renderScatterChart(t,s){this.scatterDots=vs(t,s),t.style.cursor="pointer",t.onclick=r=>{let o=t.getBoundingClientRect(),n=r.clientX-o.left,l=r.clientY-o.top,c=null,p=1/0;for(let h of this.scatterDots){let m=Math.sqrt((h.x-n)**2+(h.y-l)**2);m<p&&(p=m,c=h);}c&&p<16&&this.highlightRow(c.idx);};}highlightRow(t){let s=this.querySelector(".perf-hist-row-hl");s&&s.classList.remove("perf-hist-row-hl");let r=this.querySelector(`[data-req-idx="${t}"]`);r&&(r.classList.add("perf-hist-row-hl"),r.scrollIntoView({behavior:"smooth",block:"center"}));}updated(){if(this.selectedEndpoint===H)return;let t=this.querySelector("#perf-detail-canvas");if(t){let s=this.graphData.find(r=>r.endpoint===this.selectedEndpoint);s&&this.renderScatterChart(t,s.requests);}}render(){return !this.graphData||this.graphData.length===0?a`<bk-empty-state title="No performance data yet" subtitle="Hit some endpoints and data will appear here"></bk-empty-state>`:a`
+      <div id="graph-content">
+        ${this.renderSelector()}
+        ${this.selectedEndpoint===H?this.renderOverview():this.renderDetail()}
+      </div>
+    `}renderSelector(){return a`
+      <div class="perf-selector">
+        <button class="perf-selector-btn ${this.selectedEndpoint===H?"active":""}"
+          @click=${()=>{this.selectedEndpoint=H;}}>Overview</button>
+        ${this.graphData.map((t,s)=>a`
+          <button class="perf-selector-btn ${t.endpoint===this.selectedEndpoint?"active":""}"
+            @click=${()=>{this.selectedEndpoint=t.endpoint,this.queryBreakdown=[],this.loadQueryBreakdown(t.endpoint);}}>
+            <span class="perf-dot" style="background:${me[s%me.length]}"></span>${t.endpoint}
+          </button>
+        `)}
+      </div>
+    `}renderOverview(){let t=this.graphData.filter(c=>c.requests.length>0);if(t.length===0)return d;let s=t.reduce((c,p)=>c+p.summary.totalRequests,0),r=s>0?Math.round(t.reduce((c,p)=>c+p.summary.p95Ms*p.summary.totalRequests,0)/s):0,o=t.reduce((c,p)=>c+Math.round(p.summary.errorRate*p.summary.totalRequests),0),n=s>0?o/s:0,l=t[0];return a`
+      <div class="perf-overview">
+        <div class="perf-summary-row">
+          <div class="perf-summary-card">
+            <span class="perf-summary-label">Total Requests</span>
+            <span class="perf-summary-value">${s}</span>
+          </div>
+          <div class="perf-summary-card">
+            <span class="perf-summary-label">Avg P95</span>
+            <span class="perf-summary-value" style="color:${this.healthGradeForDuration(r).color}">${v(r)}</span>
+          </div>
+          <div class="perf-summary-card">
+            <span class="perf-summary-label">Error Rate</span>
+            <span class="perf-summary-value" style="color:${o>0?"var(--red)":"var(--green)"}">${Math.round(n*100)}%</span>
+          </div>
+          <div class="perf-summary-card">
+            <span class="perf-summary-label">Slowest</span>
+            <span class="perf-summary-value perf-summary-value-sm">${l?.endpoint??"-"}</span>
           </div>
         </div>
+
+        <table class="perf-table perf-heatmap">
+          <thead>
+            <tr>
+              <th>Endpoint</th>
+              <th class="perf-th-right">Calls</th>
+              <th class="perf-th-center">P95</th>
+              <th class="perf-th-center">Errors</th>
+              <th class="perf-th-center">Q/Req</th>
+              <th>Time Split</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${t.map(c=>this.renderHeatmapRow(c))}
+          </tbody>
+        </table>
       </div>
-      <div class="view-requests" id="request-container">
-        <div class="col-header">
-          <span style="width:60px">Method</span>
-          <span style="flex:1">URL</span>
-          <span style="width:36px;text-align:right">Status</span>
-          <span style="width:70px;text-align:right">Time</span>
-          <span style="width:60px;text-align:right">Size</span>
+    `}renderHeatmapRow(t){let s=t.summary,r=this.healthGradeForEndpoint(t),o=Math.round(s.errorRate*s.totalRequests),n=(s.avgQueryTimeMs||0)+(s.avgFetchTimeMs||0)+(s.avgAppTimeMs||0),l=0,c=0,p=100;return n>0&&(l=Math.round((s.avgQueryTimeMs||0)/n*100),c=Math.round((s.avgFetchTimeMs||0)/n*100),p=Math.max(0,100-l-c)),a`
+      <tr class="perf-table-row" @click=${()=>{this.selectedEndpoint=t.endpoint,this.queryBreakdown=[],this.loadQueryBreakdown(t.endpoint);}}>
+        <td class="perf-td-name">${t.endpoint}</td>
+        <td class="perf-td-right">${s.totalRequests}</td>
+        <td class="perf-td-center">
+          <span class="perf-hm-p95" style="color:${r.color};background:${r.bg};border-color:${r.border}">${v(s.p95Ms)}</span>
+        </td>
+        <td class="perf-td-center" style="color:${o>0?"var(--red)":"var(--text-muted)"}">${o>0?o:"-"}</td>
+        <td class="perf-td-center" style="color:${s.avgQueryCount>5?"var(--amber)":"var(--text-muted)"}">${s.avgQueryCount}</td>
+        <td>
+          <span class="perf-hm-split-bar">
+            ${l>0?a`<span class="perf-breakdown-seg perf-breakdown-db" style="width:${l}%"></span>`:d}
+            ${c>0?a`<span class="perf-breakdown-seg perf-breakdown-fetch" style="width:${c}%"></span>`:d}
+            ${p>0?a`<span class="perf-breakdown-seg perf-breakdown-app" style="width:${p}%"></span>`:d}
+          </span>
+        </td>
+      </tr>
+    `}renderDetail(){let t=this.graphData.find(n=>n.endpoint===this.selectedEndpoint);if(!t?.requests?.length)return a`<bk-empty-state subtitle="No data for this endpoint"></bk-empty-state>`;let s=t.summary,r=this.healthGradeForEndpoint(t),o=Math.round(s.errorRate*s.totalRequests);return a`
+      ${this.renderDetailHeader(t,r)}
+      ${this.renderDetailMetrics(s,r,o)}
+      ${this.renderDetailBreakdown(s)}
+      ${this.renderCallers(t.endpoint)}
+      ${this.renderQueryBreakdown()}
+      ${this.renderTrends(t)}
+      ${this.renderDetailChart()}
+      ${this.renderDetailHistory(t)}
+    `}renderDetailHeader(t,s){return a`
+      <div class="perf-detail-header">
+        <div class="perf-detail-title">
+          <span class="perf-badge perf-badge-lg" style="color:${s.color};background:${s.bg};border-color:${s.border}">${s.label}</span>
+          <span>${t.endpoint}</span>
+          ${t.baselineP95Ms?a`<span class="perf-baseline-hint">Baseline: ${v(t.baselineP95Ms)}</span>`:d}
         </div>
-        <div id="request-list"></div>
       </div>
-      <div class="view-telemetry" id="fetch-container" style="display:none">
-        <div class="fetch-analysis" id="fetch-analysis"></div>
+    `}renderDetailMetrics(t,s,r){return a`
+      <div class="perf-metric-row">
+        <div class="perf-metric-card">
+          <span class="perf-metric-label">P95</span>
+          <span class="perf-metric-value" style="color:${s.color}">${v(t.p95Ms)}</span>
+        </div>
+        <div class="perf-metric-card">
+          <span class="perf-metric-label">Errors</span>
+          <span class="perf-metric-value" style="color:${r>0?"var(--red)":"var(--green)"}">
+            ${r>0?r+" ("+Math.round(t.errorRate*100)+"%)":"0"}
+          </span>
+        </div>
+        <div class="perf-metric-card">
+          <span class="perf-metric-label">Queries/req</span>
+          <span class="perf-metric-value" style="color:${t.avgQueryCount>5?"var(--amber)":"var(--text)"}">${t.avgQueryCount}</span>
+        </div>
       </div>
-      <div class="view-telemetry" id="query-container" style="display:none">
-        <div class="col-header">
-          <span style="width:70px;border-right:1px solid var(--border);padding-right:16px">Operation</span>
-          <span style="width:170px;border-right:1px solid var(--border);padding-right:16px">Table</span>
-          <span style="flex:1;border-right:1px solid var(--border);padding-right:16px">Query</span>
-          <span style="width:60px;text-align:right">Time</span>
+    `}renderDetailBreakdown(t){let s=(t.avgQueryTimeMs||0)+(t.avgFetchTimeMs||0)+(t.avgAppTimeMs||0);if(s<=0)return d;let r=Math.round((t.avgQueryTimeMs||0)/s*100),o=Math.round((t.avgFetchTimeMs||0)/s*100),n=Math.max(0,100-r-o);return a`
+      <div class="perf-breakdown">
+        <div class="perf-section-title">Time Breakdown</div>
+        <div class="perf-breakdown-bar">
+          ${r>0?a`<div class="perf-breakdown-seg perf-breakdown-db" style="width:${r}%"></div>`:d}
+          ${o>0?a`<div class="perf-breakdown-seg perf-breakdown-fetch" style="width:${o}%"></div>`:d}
+          ${n>0?a`<div class="perf-breakdown-seg perf-breakdown-app" style="width:${n}%"></div>`:d}
+        </div>
+        <div class="perf-breakdown-legend">
+          <span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-db"></span>DB ${v(t.avgQueryTimeMs||0)} (${r}%)</span>
+          <span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-fetch"></span>Fetch ${v(t.avgFetchTimeMs||0)} (${o}%)</span>
+          <span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-app"></span>App ${v(t.avgAppTimeMs||0)} (${n}%)</span>
+        </div>
+      </div>
+    `}renderCallers(t){let s=this.getCallers(t);return s.length===0?d:a`
+      <div class="perf-callers">
+        <div class="perf-section-title">Called By</div>
+        <div class="perf-callers-list">
+          ${s.map(r=>a`
+            <div class="perf-caller-row">
+              <span class="perf-caller-name">${r.label}</span>
+              <span class="perf-caller-count">${r.count} call${r.count!==1?"s":""}</span>
+              <span class="perf-caller-avg">avg ${v(r.avgMs)}</span>
+            </div>
+          `)}
         </div>
-        <div id="query-list"></div>
       </div>
-      <div class="view-telemetry" id="error-container" style="display:none">
-        <div class="col-header">
-          <span style="width:180px">Type</span>
-          <span style="flex:1">Message</span>
-          <span style="width:130px;text-align:right">Time</span>
+    `}renderQueryBreakdown(){return this.queryBreakdownLoading?a`<div class="perf-queries"><div class="perf-section-title">DB Queries</div><div class="perf-queries-loading">Loading...</div></div>`:this.queryBreakdown.length===0?d:a`
+      <div class="perf-queries">
+        <div class="perf-section-title">DB Queries</div>
+        <div class="perf-queries-list">
+          ${this.queryBreakdown.map(t=>a`
+            <div class="perf-query-row">
+              <span class="perf-query-label">${t.label}</span>
+              <span class="perf-query-avg">avg ${v(t.avgMs)}</span>
+              <span class="perf-query-count">${t.count} call${t.count!==1?"s":""}</span>
+            </div>
+          `)}
         </div>
-        <div id="error-list"></div>
       </div>
-      <div class="view-telemetry" id="log-container" style="display:none">
-        <div id="log-analysis"></div>
-        <div class="col-header">
-          <span style="width:52px">Level</span>
-          <span style="flex:1">Message</span>
-          <span style="width:130px;text-align:right">Time</span>
+    `}renderTrends(t){let s=t.sessions;if(!s||s.length===0)return d;let r=s.slice(-10);return a`
+      <div class="perf-trends">
+        <div class="perf-section-title">Session Trend</div>
+        <div class="perf-trends-list">
+          ${r.map((o,n)=>{let l=n>0?r[n-1].p95DurationMs:null,c=l!==null?o.p95DurationMs>l*1.2?"slower":o.p95DurationMs<l*.8?"faster":"":"",p=this.formatTimeAgo(o.startedAt),h=n===r.length-1,m=this.healthGradeForDuration(o.p95DurationMs,t.baselineP95Ms);return a`
+              <div class="perf-trend-row ${h?"perf-trend-current":""}">
+                <span class="perf-trend-time">${h?"Current":p}</span>
+                <span class="perf-trend-p95">
+                  <span class="perf-hm-p95" style="color:${m.color};background:${m.bg};border-color:${m.border}">
+                    p95: ${v(o.p95DurationMs)}
+                  </span>
+                </span>
+                <span class="perf-trend-reqs">${o.requestCount} req${o.requestCount!==1?"s":""}</span>
+                <span class="perf-trend-errs" style="color:${o.errorCount>0?"var(--red)":"var(--text-dim)"}">${o.errorCount} err${o.errorCount!==1?"s":""}</span>
+                ${c?a`<span class="perf-trend-arrow ${c==="slower"?"perf-trend-slower":"perf-trend-faster"}">${c==="slower"?"\u2191 slower":"\u2193 faster"}</span>`:d}
+              </div>
+            `})}
         </div>
-        <div id="log-list"></div>
       </div>
-      <div class="view-telemetry" id="security-container" style="display:none">
-        <div class="sec-container" id="security-content"></div>
+    `}formatTimeAgo(t){let s=Date.now()-t,r=Math.round(s/6e4);if(r<1)return "just now";if(r<60)return `${r}m ago`;let o=Math.round(r/60);return o<24?`${o}h ago`:`${Math.round(o/24)}d ago`}renderDetailChart(){return a`
+      <div class="perf-chart-wrap">
+        <div class="perf-section-title">Response Time</div>
+        <canvas id="perf-detail-canvas" class="perf-canvas" style="width:100%;height:240px"></canvas>
+      </div>
+    `}renderDetailHistory(t){if(t.requests.length===0)return d;let s=[];for(let r=t.requests.length-1;r>=0&&s.length<50;r--)s.push({point:t.requests[r],originalIndex:r});return a`
+      <div class="perf-history-wrap">
+        <table class="perf-table">
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Health</th>
+              <th>Duration</th>
+              <th>Breakdown</th>
+              <th class="perf-th-center">Status</th>
+              <th class="perf-th-right">Queries</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${s.map(r=>this.renderHistoryRow(r.point,r.originalIndex,t.baselineP95Ms))}
+          </tbody>
+        </table>
       </div>
-      <div class="view-telemetry" id="performance-container" style="display:none">
-        <div id="graph-content"></div>
+    `}renderHistoryRow(t,s,r){let o=this.healthGradeForDuration(t.durationMs,r),n=new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"}),l=t.statusCode>=400,c=t.queryTimeMs||0,p=t.fetchTimeMs||0,h=Math.max(0,t.durationMs-c-p);return a`
+      <tr class="perf-table-row ${l?"perf-row-err":""}" data-req-idx=${s}>
+        <td class="perf-td-muted">${n}</td>
+        <td>
+          <span class="perf-badge perf-badge-sm" style="color:${o.color};background:${o.bg};border-color:${o.border}">${o.label}</span>
+        </td>
+        <td>${v(t.durationMs)}</td>
+        <td>
+          ${c>0?a`<span class="perf-bd-tag perf-bd-tag-db">DB ${v(c)}</span>`:d}
+          ${p>0?a`<span class="perf-bd-tag perf-bd-tag-fetch">Fetch ${v(p)}</span>`:d}
+          <span class="perf-bd-tag perf-bd-tag-app">App ${v(h)}</span>
+        </td>
+        <td class="perf-td-center" style="color:${l?"var(--red)":"var(--text-muted)"}">${t.statusCode}</td>
+        <td class="perf-td-right perf-td-muted">${t.queryCount}</td>
+      </tr>
+    `}};u([R({context:x})],L.prototype,"store",2),u([_()],L.prototype,"selectedEndpoint",2),u([_()],L.prototype,"graphData",2),u([_()],L.prototype,"loadError",2),u([_()],L.prototype,"queryBreakdown",2),u([_()],L.prototype,"queryBreakdownLoading",2),L=u([g("bk-performance-view")],L);function _r(i){return i===0?"<1ms":v(i)}var w=class extends f{constructor(){super(...arguments);this.requestId="";this.requestStarted=0;this.data=null;this.loading=false;this.failed=false;this.expandedSqlIdx=-1;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate()),this.requestId&&this.loadTimeline();}async loadTimeline(){if(!this.requestId)return;let t=w.cache.get(this.requestId);if(t){this.data=t;return}this.loading=true;try{let s=await fetch(`${y.activity}?requestId=${this.requestId}`);if(!s.ok){this.failed=!0,this.loading=!1;return}let r=await s.json();if(w.cache.size>=pe){let o=w.cache.keys().next().value;o!==void 0&&w.cache.delete(o);}w.cache.set(this.requestId,r),this.data=r,this.loading=!1;}catch(s){console.debug("[brakit] timeline load failed:",s),this.failed=true,this.loading=false;}}toggleSql(t,s){s.stopPropagation(),this.expandedSqlIdx=this.expandedSqlIdx===t?-1:t;}copySql(t,s){s.stopPropagation(),navigator.clipboard.writeText(t).then(()=>C.show("SQL copied")).catch(()=>C.show("Copy failed"));}render(){if(this.loading)return a`<div class="tl-loading">Loading activity...</div>`;if(this.failed||!this.data||this.data.total===0)return d;let t=this.data,s=t.timeline[0]?.timestamp??0;return a`
+      <div class="tl-header">
+        <span class="tl-title">Activity Timeline</span>
+        <span class="tl-counts">
+          ${t.counts.queries>0?a`<span class="tl-count tl-count-query">${t.counts.queries} quer${t.counts.queries===1?"y":"ies"}</span>`:d}
+          ${t.counts.fetches>0?a`<span class="tl-count tl-count-fetch">${t.counts.fetches} fetch${t.counts.fetches===1?"":"es"}</span>`:d}
+          ${t.counts.logs>0?a`<span class="tl-count tl-count-log">${t.counts.logs} log${t.counts.logs===1?"":"s"}</span>`:d}
+          ${t.counts.errors>0?a`<span class="tl-count tl-count-error">${t.counts.errors} error${t.counts.errors===1?"":"s"}</span>`:d}
+        </span>
       </div>
-    </div>
-    <div class="footer">
-      <span id="stat-total">0 requests</span>
-      <span id="stat-flows">0 actions</span>
-      <span id="stat-errors" class="error-count">0 errors</span>
-      <span id="stat-avg">Avg: 0ms</span>
-    </div>
-  </div>
-</div>
-<div class="toast" id="toast"></div>
-
-<script>
-(function(){
-  var PORT = {{PORT}};
-  var state = { flows: [], requests: [], fetches: [], errors: [], logs: [], queries: [], insights: [], findings: [], viewMode: 'simple', activeView: 'overview' };
-
-  var appEl = document.getElementById('app');
-  var flowListEl = document.getElementById('flow-list');
-  var reqListEl = document.getElementById('request-list');
-  var emptyFlows = document.getElementById('empty-flows');
-  var toastEl = document.getElementById('toast');
-
-  
-  function formatDuration(ms) {
-    if (ms < 1000) return ms + 'ms';
-    return (ms / 1000).toFixed(1) + 's';
-  }
-  function formatSize(bytes) {
-    if (!bytes || bytes === 0) return '';
-    if (bytes < 1024) return bytes + 'b';
-    return (bytes / 1024).toFixed(1) + 'kb';
-  }
-  function escHtml(s) {
-    if (!s) return '';
-    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-  }
-
-  function statusPillClass(code) {
-    if (code >= 500) return 'status-pill-5xx';
-    if (code >= 400) return 'status-pill-4xx';
-    if (code >= 300) return 'status-pill-3xx';
-    return 'status-pill-2xx';
-  }
-
-  function statusIcon(code) {
-    if (code >= 500) return { icon: '\u2717', cls: 'status-error', tip: code + ' Server Error' };
-    if (code >= 400) return { icon: '\u2717', cls: 'status-fail', tip: code + ' ' + httpStatus(code) };
-    if (code >= 300) return { icon: '\u2713', cls: 'status-ok', tip: code + ' Redirect' };
-    return { icon: '\u2713', cls: 'status-ok', tip: code + ' OK' };
-  }
-
-  function httpStatus(code) {
-    var map = {400:'Bad Request',401:'Unauthorized',403:'Forbidden',404:'Not Found',405:'Method Not Allowed',408:'Timeout',409:'Conflict',422:'Unprocessable',429:'Too Many Requests',500:'Internal Server Error',502:'Bad Gateway',503:'Service Unavailable',504:'Gateway Timeout'};
-    return map[code] || (code >= 500 ? 'Server Error' : code >= 400 ? 'Client Error' : 'OK');
-  }
-
-  var SENSITIVE = new Set(['cookie','set-cookie','authorization','proxy-authorization','x-api-key','x-auth-token']);
-  function maskValue(k, v) {
-    if (SENSITIVE.has(k.toLowerCase())) {
-      var s = String(v);
-      if (s.length <= 8) return '****';
-      return s.slice(0, 4) + '...' + s.slice(-4) + ' (' + s.length + ' chars)';
-    }
-    return String(v);
-  }
-  function formatHeaders(headers) {
-    if (!headers || Object.keys(headers).length === 0) return '<span style="color:var(--text-muted)">No headers</span>';
-    return Object.entries(headers).map(function(e) { return '<span class="json-key">' + escHtml(e[0]) + '</span>: ' + escHtml(maskValue(e[0], e[1])); }).join('\n');
-  }
-
-  function buildBodyToggle(direction, label, body) {
-    var block = document.createElement('div');
-    block.className = 'traffic-body';
-    var toggle = document.createElement('button');
-    toggle.className = 'traffic-body-toggle';
-    toggle.innerHTML = '<span class="chevron">\u25B8</span><span class="arrow-' + direction + '">' + (direction === 'out' ? '\u2192' : '\u2190') + '</span> ' + label;
-    var pre = document.createElement('pre');
-    pre.innerHTML = formatJsonBody(body);
-    toggle.addEventListener('click', function(e) {
-      e.stopPropagation();
-      toggle.classList.toggle('open');
-      pre.classList.toggle('open');
-    });
-    block.appendChild(toggle);
-    block.appendChild(pre);
-    return block;
-  }
-
-  function formatJsonBody(body) {
-    if (!body) return '<span style="color:var(--text-muted)">No body</span>';
-    try {
-      var parsed = JSON.parse(body);
-      return highlightJson(JSON.stringify(parsed, null, 2));
-    } catch(e) { return escHtml(body); }
-  }
-  function highlightJson(json) {
-    return escHtml(json).replace(
-      /("(?:[^"\\\\]|\\\\.)*")(\\s*:)?|\\b(true|false)\\b|\\bnull\\b|(-?\\d+\\.?\\d*(?:[eE][+-]?\\d+)?)/g,
-      function(m, str, colon, bool, num) {
-        if (str) return colon ? '<span class="json-key">' + str + '</span>' + colon : '<span class="json-str">' + str + '</span>';
-        if (bool) return '<span class="json-bool">' + m + '</span>';
-        if (num) return '<span class="json-num">' + m + '</span>';
-        if (m === 'null') return '<span class="json-null">null</span>';
-        return m;
-      }
-    );
-  }
-
-  function showToast(msg) {
-    toastEl.textContent = msg;
-    toastEl.classList.add('show');
-    setTimeout(function() { toastEl.classList.remove('show'); }, 2000);
-  }
-
-  function collapseAll(rowSelector, detailSelector) {
-    document.querySelectorAll(rowSelector + '.expanded').forEach(function(r) { r.classList.remove('expanded'); });
-    document.querySelectorAll(detailSelector + '.open').forEach(function(d) { d.classList.remove('open'); });
-  }
-  
-  
-  function createTelemetryView(listId, buildRowFn) {
-    return {
-      render: function(items) {
-        var list = document.getElementById(listId);
-        if (!list) return;
-        list.innerHTML = '';
-        items.forEach(function(item) { list.appendChild(buildRowFn(item)); });
-      },
-      prepend: function(item) {
-        var list = document.getElementById(listId);
-        if (!list) return;
-        list.insertBefore(buildRowFn(item), list.firstChild);
-      }
-    };
-  }
-  
-  
-  var QUERY_OP_COLORS = { SELECT: 'var(--blue)', INSERT: 'var(--green)', UPDATE: 'var(--amber)', DELETE: 'var(--red)', COUNT: 'var(--text-muted)' };
-
-  function truncateSQL(sql, max) {
-    if (!sql) return '';
-    var clean = sql.replace(/"public"\./g, '').replace(/"/g, '');
-    if (clean.length <= max) return clean;
-    return clean.substring(0, max) + '...';
-  }
-
-  function queryDuration(ms) {
-    if (ms === 0) return '<1ms';
-    return formatDuration(ms);
-  }
-  
-  
-  var flowColHeader = document.getElementById('flow-col-header');
-  function renderFlows() {
-    flowListEl.innerHTML = '';
-    if (state.flows.length === 0) {
-      flowListEl.appendChild(emptyFlows);
-      emptyFlows.style.display = 'flex';
-      if (flowColHeader) flowColHeader.style.display = 'none';
-      return;
-    }
-    emptyFlows.style.display = 'none';
-    if (flowColHeader) flowColHeader.style.display = 'flex';
-    for (var i = 0; i < state.flows.length; i++) {
-      var result = createFlowRow(state.flows[i]);
-      flowListEl.appendChild(result.row);
-      flowListEl.appendChild(result.expand);
-    }
-  }
-
-  function flowDotClass(flow) {
-    if (flow.hasErrors) return 'dot-error';
-    if (flow.redundancyPct > 0) return 'dot-warn';
-    return 'dot-clean';
-  }
-
-  function flowBadgeInfo(flow) {
-    if (flow.hasErrors) {
-      var errCount = flow.requests.filter(function(r){ return r.statusCode >= 400; }).length;
-      return { text: errCount + ' error' + (errCount !== 1 ? 's' : ''), cls: 'badge-error' };
-    }
-    if (flow.redundancyPct > 0) {
-      return { text: flow.redundancyPct + '% redundant', cls: 'badge-warn' };
-    }
-    return { text: 'clean', cls: 'badge-clean' };
-  }
-
-  function createFlowRow(flow) {
-    var row = document.createElement('div');
-    row.className = 'flow-row';
-    var summary = document.createElement('div');
-    summary.className = 'flow-summary-row';
-    var dot = document.createElement('span');
-    dot.className = 'flow-status-dot ' + flowDotClass(flow);
-    var label = document.createElement('span');
-    label.className = 'flow-label';
-    label.textContent = flow.label;
-    var count = document.createElement('span');
-    count.className = 'flow-req-count';
-    count.textContent = flow.requests.length + ' req' + (flow.requests.length !== 1 ? 's' : '');
-    var badgeInfo = flowBadgeInfo(flow);
-    var badge = document.createElement('span');
-    badge.className = 'flow-badge-pill ' + badgeInfo.cls;
-    badge.textContent = badgeInfo.text;
-    var dur = document.createElement('span');
-    dur.className = 'flow-duration';
-    dur.textContent = formatDuration(flow.totalDurationMs);
-    summary.appendChild(dot);
-    summary.appendChild(label);
-    summary.appendChild(count);
-    summary.appendChild(badge);
-    summary.appendChild(dur);
-    row.appendChild(summary);
-
-    var expand = document.createElement('div');
-    expand.className = 'flow-expand';
-
-    row.addEventListener('click', function() {
-      var wasOpen = row.classList.contains('expanded');
-      collapseAll('.flow-row', '.flow-expand');
-      if (!wasOpen) {
-        row.classList.add('expanded');
-        expand.classList.add('open');
-        expand.innerHTML = '';
-        if (state.viewMode === 'simple') {
-          expand.appendChild(createFlowInsights(flow));
-        } else {
-          expand.appendChild(createFlowSubReqs(flow));
-        }
-        var tlEls = expand.querySelectorAll('.request-timeline');
-        for (var ti = 0; ti < tlEls.length; ti++) {
-          var tlItem = tlEls[ti];
-          var rid = tlItem.getAttribute('data-request-id');
-          if (rid) loadTimeline(rid, tlItem, 0);
-        }
-      }
-    });
-
-    return { row: row, expand: expand };
-  }
-
-  
-  var skipCats = { 'auth-handshake': 1, 'auth-check': 1, 'middleware': 1 };
-
-  function createFlowInsights(flow) {
-    var container = document.createElement('div');
-    var traffic = document.createElement('div');
-    traffic.className = 'flow-traffic';
-
-    for (var i = 0; i < flow.requests.length; i++) {
-      var req = flow.requests[i];
-      if (skipCats[req.category]) continue;
-      var sClass = statusPillClass(req.statusCode);
-
-      var card = document.createElement('div');
-      card.className = 'traffic-card';
-
-      var header = document.createElement('div');
-      header.className = 'traffic-card-header';
-
-      var mEl = document.createElement('span');
-      mEl.className = 'method-badge method-badge-' + escHtml(req.method);
-      mEl.textContent = req.method;
-
-      var pEl = document.createElement('span');
-      pEl.className = 'traffic-card-path' + (req.isDuplicate ? ' is-dup' : '');
-      pEl.textContent = req.label;
-
-      var stEl = document.createElement('span');
-      stEl.className = 'status-pill ' + sClass;
-      stEl.textContent = String(req.statusCode);
-
-      var dEl = document.createElement('span');
-      dEl.className = 'traffic-card-dur';
-      dEl.textContent = formatDuration(req.pollingDurationMs || req.durationMs);
-
-      header.appendChild(mEl);
-      header.appendChild(pEl);
-      header.appendChild(stEl);
-      header.appendChild(dEl);
-
-      if (req.isDuplicate) {
-        var dupEl = document.createElement('span');
-        dupEl.className = 'traffic-card-dup';
-        dupEl.textContent = 'duplicate';
-        header.appendChild(dupEl);
-      } else {
-        var szEl = document.createElement('span');
-        szEl.className = 'traffic-card-size';
-        szEl.textContent = formatSize(req.responseSize);
-        header.appendChild(szEl);
-      }
-
-      card.appendChild(header);
-
-      if (req.isStrictModeDupe) {
-        card.classList.add('strict-mode-dupe');
-        var smBanner = document.createElement('div');
-        smBanner.className = 'strict-mode-banner';
-        smBanner.textContent = 'React Strict Mode duplicate \u2014 does not happen in production';
-        card.appendChild(smBanner);
-      }
-
-      var hasDetails = false;
-      if (!req.isDuplicate && req.category !== 'static' && req.category !== 'polling') {
-        var tlEl = document.createElement('div');
-        tlEl.className = 'request-timeline tl-hidden';
-        tlEl.setAttribute('data-request-id', req.id);
-        tlEl.setAttribute('data-request-started', String(req.startedAt));
-        card.appendChild(tlEl);
-        hasDetails = true;
-      }
-      if (req.requestBody && req.method !== 'GET') {
-        card.appendChild(buildBodyToggle('out', 'Request Body', req.requestBody));
-        hasDetails = true;
-      }
-      if (req.responseBody) {
-        card.appendChild(buildBodyToggle('in', 'Response Body', req.responseBody));
-        hasDetails = true;
-      }
-
-      if (hasDetails) header.classList.add('has-details');
-
-      traffic.appendChild(card);
-    }
-
-    container.appendChild(traffic);
-
-    var insights = analyzeFlow(flow);
-    var hasIssues = insights.errors.length > 0 || insights.duplicates.length > 0 || insights.warnings.length > 0 || !!insights.tip;
-    if (hasIssues) {
-      var divider = document.createElement('div');
-      divider.className = 'flow-divider';
-      container.appendChild(divider);
-      var insightsEl = document.createElement('div');
-      insightsEl.className = 'flow-insights';
-      for (var ei = 0; ei < insights.errors.length; ei++) {
-        var errLine = document.createElement('div');
-        errLine.className = 'insight-line insight-error';
-        errLine.textContent = '\u2717 ' + insights.errors[ei];
-        insightsEl.appendChild(errLine);
-      }
-      for (var di = 0; di < insights.duplicates.length; di++) {
-        var dup = insights.duplicates[di];
-        var dupLine = document.createElement('div');
-        dupLine.className = 'insight-line insight-warn';
-        dupLine.textContent = '\u26A0 ' + dup.name + ' \u2014 loaded ' + dup.count + 'x (wasting ~' + formatDuration(dup.wastedMs) + ')';
-        insightsEl.appendChild(dupLine);
-      }
-      for (var wi = 0; wi < insights.warnings.length; wi++) {
-        var warnLine = document.createElement('div');
-        warnLine.className = 'insight-line insight-warn';
-        warnLine.textContent = '\u26A0 ' + insights.warnings[wi];
-        insightsEl.appendChild(warnLine);
-      }
-      if (insights.tip) {
-        var tipLine = document.createElement('div');
-        tipLine.className = 'insight-line insight-tip';
-        tipLine.textContent = 'Tip: ' + insights.tip;
-        insightsEl.appendChild(tipLine);
-      }
-      container.appendChild(insightsEl);
-    }
-
-    return container;
-  }
-
-  function analyzeFlow(flow) {
-    var reqs = flow.requests;
-    var successes = [];
-    var errors = [];
-    var warnings = [];
-    var duplicates = [];
-    var seen = new Map();
-    var totalMs = 0;
-    for (var i = 0; i < reqs.length; i++) {
-      var req = reqs[i];
-      var label = req.label;
-      var dur = req.pollingDurationMs || req.durationMs;
-      totalMs += dur;
-
-      if (skipCats[req.category]) {
-        continue;
-      }
-
-      if (req.isDuplicate) {
-        var ex = seen.get(label);
-        if (ex) { ex.count++; ex.wastedMs += dur; }
-        else seen.set(label, { name: label, count: 2, wastedMs: dur });
-        continue;
-      }
-      if (req.statusCode >= 400) {
-        errors.push(label + ' (' + httpStatus(req.statusCode) + ')');
-        continue;
-      }
-
-      if (req.responseSize > 51200) {
-        warnings.push('Large response: ' + label + ' returned ' + formatSize(req.responseSize));
-      }
-
-      successes.push(label);
-    }
-
-    for (var d of seen.values()) duplicates.push(d);
-    var tip = '';
-    if (duplicates.length > 0) {
-      var names = duplicates.map(function(d) { return d.name; }).join(', ');
-      var totalWaste = duplicates.reduce(function(s, d) { return s + d.wastedMs; }, 0);
-      tip = 'Your app fetches ' + names + ' multiple times on this page. This wastes ~' + formatDuration(totalWaste) + '. Try caching these calls, deduplicating with React Query/SWR, or moving them to a shared layout.';
-    } else if (errors.length > 0) {
-      tip = 'Some requests are failing. Check your API routes and make sure the endpoints exist.';
-    }
-    var slow = reqs.filter(function(r) { return r.durationMs > 2000 && r.category !== 'polling'; });
-    if (slow.length > 0 && !tip) {
-      tip = slow.map(function(r) { return r.label; }).join(', ') + ' is taking over 2 seconds. Consider adding caching or optimizing the backend query.';
-    }
-    return { successes: successes, errors: errors, warnings: warnings, duplicates: duplicates, tip: tip };
-  }
-  
-  
-  function createFlowSubReqs(flow) {
-    var container = document.createElement('div');
-    container.className = 'flow-subreqs';
-    flow.requests.forEach(function(req) {
-      var isDup = req.isDuplicate;
-      var sClass = statusPillClass(req.statusCode);
-      var subRow = document.createElement('div');
-      subRow.className = 'flow-subreq';
-      var safeMethod = escHtml(req.method);
-      var methodEl = document.createElement('span');
-      methodEl.className = 'method-badge method-badge-' + safeMethod;
-      methodEl.textContent = req.method;
-      var labelEl = document.createElement('span');
-      labelEl.className = 'subreq-label' + (isDup ? ' is-dup' : '');
-      labelEl.textContent = req.path || req.url;
-      var statusEl = document.createElement('span');
-      statusEl.className = 'status-pill ' + sClass;
-      statusEl.textContent = String(req.statusCode);
-      var durEl = document.createElement('span');
-      durEl.className = 'subreq-dur';
-      durEl.textContent = req.pollingDurationMs ? formatDuration(req.pollingDurationMs) : formatDuration(req.durationMs);
-      subRow.appendChild(methodEl);
-      subRow.appendChild(labelEl);
-      if (isDup) {
-        var dupTag = document.createElement('span');
-        dupTag.className = 'subreq-dup-tag';
-        dupTag.textContent = 'duplicate';
-        subRow.appendChild(dupTag);
-      }
-      subRow.appendChild(statusEl);
-      subRow.appendChild(durEl);
-
-      var detail = document.createElement('div');
-      detail.className = 'flow-subreq-detail';
-      subRow.addEventListener('click', function(e) {
-        e.stopPropagation();
-        var wasOpen = detail.classList.contains('open');
-        container.querySelectorAll('.flow-subreq-detail.open').forEach(function(d){ d.classList.remove('open'); });
-        container.querySelectorAll('.flow-subreq.expanded').forEach(function(r){ r.classList.remove('expanded'); });
-        if (!wasOpen) {
-          subRow.classList.add('expanded');
-          detail.classList.add('open');
-          detail.innerHTML = renderDetail(req);
-          var curlBtn = detail.querySelector('.btn-curl');
-          if (curlBtn) curlBtn.addEventListener('click', function(ev) { ev.stopPropagation(); copyAsCurl(req); });
-          var tlEl = detail.querySelector('.request-timeline');
-          if (tlEl) loadTimeline(tlEl.getAttribute('data-request-id'), tlEl, 0);
-        }
-      });
-      container.appendChild(subRow);
-      container.appendChild(detail);
-    });
-    return container;
-  }
-
-  function renderDetail(req) {
-    var sClass = statusPillClass(req.statusCode);
-    var sm = escHtml(req.method);
-    var h = '<div class="detail-meta">';
-    h += '<span><span class="method-badge method-badge-' + sm + '">' + sm + '</span> ' + escHtml(req.url) + '</span>';
-    h += '<span><span class="status-pill ' + sClass + '">' + req.statusCode + '</span></span>';
-    h += '<span>' + req.durationMs + 'ms</span>';
-    if (req.responseSize) h += '<span>' + formatSize(req.responseSize) + '</span>';
-    h += '</div>';
-    h += '<div class="request-timeline tl-hidden" data-request-id="' + escHtml(req.id) + '" data-request-started="' + escHtml(String(req.startedAt)) + '"></div>';
-    h += '<div class="detail-grid">';
-    h += '<div class="detail-section"><h4>Request Headers</h4><pre>' + formatHeaders(req.headers) + '</pre></div>';
-    h += '<div class="detail-section"><h4>Response Headers</h4><pre>' + formatHeaders(req.responseHeaders) + '</pre></div>';
-    h += '<div class="detail-section"><h4>Request Body</h4><pre>' + formatJsonBody(req.requestBody) + '</pre></div>';
-    h += '<div class="detail-section"><h4>Response Body</h4><pre>' + formatJsonBody(req.responseBody) + '</pre></div>';
-    h += '</div>';
-    h += '<div class="detail-actions"><button class="btn btn-curl">Copy cURL</button></div>';
-    return h;
-  }
-  
-  
-  
-  function renderRequests() {
-    reqListEl.innerHTML = '';
-    for (var i = 0; i < state.requests.length; i++) {
-      var req = state.requests[i];
-      if (req.path && req.path.startsWith('/__brakit')) continue;
-      appendRequestRow(req);
-    }
-  }
-
-  function prependRequestRow(req) {
-    var result = createReqRow(req);
-    reqListEl.prepend(result.detail);
-    reqListEl.prepend(result.row);
-  }
-
-  function appendRequestRow(req) {
-    var result = createReqRow(req);
-    reqListEl.appendChild(result.row);
-    reqListEl.appendChild(result.detail);
-  }
-
-  function createReqRow(req) {
-    var row = document.createElement('div');
-    row.className = 'req-row';
-    var sClass = statusPillClass(req.statusCode);
-    var safeMethod = escHtml(req.method);
-    row.innerHTML =
-      '<div class="req-summary">' +
-        '<span class="method-badge method-badge-' + safeMethod + '">' + safeMethod + '</span>' +
-        '<span class="req-url">' + escHtml(req.url) + '</span>' +
-        '<span class="status-pill ' + sClass + '">' + req.statusCode + '</span>' +
-        '<span class="req-duration">' + req.durationMs + 'ms</span>' +
-        '<span class="req-size">' + formatSize(req.responseSize) + '</span>' +
-      '</div>';
-    var detail = document.createElement('div');
-    detail.className = 'req-detail';
-    row.addEventListener('click', function() {
-      var wasOpen = row.classList.contains('expanded');
-      collapseAll('.req-row', '.req-detail');
-      if (!wasOpen) {
-        row.classList.add('expanded');
-        detail.classList.add('open');
-        detail.innerHTML = renderDetail(req);
-        var curlBtn = detail.querySelector('.btn-curl');
-        if (curlBtn) curlBtn.addEventListener('click', function(e) { e.stopPropagation(); copyAsCurl(req); });
-        var tlEl = detail.querySelector('.request-timeline');
-        if (tlEl) loadTimeline(tlEl.getAttribute('data-request-id'), tlEl, 0);
-      }
-    });
-    return { row: row, detail: detail };
-  }
-  
-  
-  function buildFetchAnalysis() {
-    var container = document.getElementById('fetch-analysis');
-    if (!container) return;
-    container.innerHTML = '';
-
-    var fetches = state.fetches;
-    if (fetches.length === 0) {
-      container.style.display = 'none';
-      return;
-    }
-    container.style.display = 'block';
-
-    var uniqueUrls = {};
-    var errCount = 0;
-    var totalDur = 0;
-    for (var i = 0; i < fetches.length; i++) {
-      uniqueUrls[fetches[i].url] = 1;
-      if (fetches[i].statusCode >= 400) errCount++;
-      totalDur += fetches[i].durationMs;
-    }
-    var uniqueCount = Object.keys(uniqueUrls).length;
-    var avgDur = Math.round(totalDur / fetches.length);
-
-    var summary = document.createElement('div');
-    summary.className = 'fetch-summary';
-    summary.innerHTML =
-      '<div class="fetch-stat"><span class="fetch-stat-value">' + fetches.length + '</span><span class="fetch-stat-label">Total Fetches</span></div>' +
-      '<div class="fetch-stat"><span class="fetch-stat-value">' + uniqueCount + '</span><span class="fetch-stat-label">Unique URLs</span></div>' +
-      '<div class="fetch-stat"><span class="fetch-stat-value"' + (errCount > 0 ? ' style="color:var(--red)"' : '') + '>' + errCount + '</span><span class="fetch-stat-label">Errors</span></div>' +
-      '<div class="fetch-stat"><span class="fetch-stat-value">' + formatDuration(avgDur) + '</span><span class="fetch-stat-label">Avg Duration</span></div>';
-    container.appendChild(summary);
-
-    var groups = {};
-    for (var gi = 0; gi < fetches.length; gi++) {
-      var f = fetches[gi];
-      var key = f.method + ' ' + f.url;
-      if (!groups[key]) groups[key] = { method: f.method, url: f.url, count: 0, totalDur: 0, maxDur: 0, errors: 0, callers: {} };
-      var g = groups[key];
-      g.count++;
-      g.totalDur += f.durationMs;
-      if (f.durationMs > g.maxDur) g.maxDur = f.durationMs;
-      if (f.statusCode >= 400) g.errors++;
-      if (f.parentRequestId) {
-        for (var ri = 0; ri < state.requests.length; ri++) {
-          if (state.requests[ri].id === f.parentRequestId) {
-            var callerLabel = state.requests[ri].method + ' ' + (state.requests[ri].path || state.requests[ri].url);
-            g.callers[callerLabel] = 1;
-            break;
-          }
-        }
-      }
-    }
-
-    var groupEntries = [];
-    for (var gk in groups) groupEntries.push(groups[gk]);
-    groupEntries.sort(function(a, b) { return b.count - a.count; });
-
-    if (groupEntries.length > 0) {
-      var title = document.createElement('div');
-      title.className = 'fetch-groups-title';
-      title.textContent = 'Grouped by URL (' + groupEntries.length + ')';
-      container.appendChild(title);
-
-      var groupsDiv = document.createElement('div');
-      groupsDiv.className = 'fetch-groups';
-
-      for (var gei = 0; gei < groupEntries.length; gei++) {
-        var ge = groupEntries[gei];
-        var card = document.createElement('div');
-        card.className = 'fetch-group';
-
-        var avgMs = Math.round(ge.totalDur / ge.count);
-        var errRate = ge.count > 0 ? Math.round((ge.errors / ge.count) * 100) : 0;
-
-        var headerHtml =
-          '<div class="fetch-group-header">' +
-            '<span class="method-badge method-badge-' + escHtml(ge.method) + '">' + escHtml(ge.method) + '</span>' +
-            '<span class="fetch-group-url" title="' + escHtml(ge.url) + '">' + escHtml(ge.url) + '</span>' +
-            '<span class="fetch-group-count">' + ge.count + 'x</span>' +
-          '</div>';
-
-        var metaHtml = '<div class="fetch-group-meta">' +
-          '<span>Avg ' + formatDuration(avgMs) + '</span>' +
-          '<span>Max ' + formatDuration(ge.maxDur) + '</span>' +
-          (errRate > 0 ? '<span class="fetch-group-err">' + errRate + '% errors</span>' : '<span style="color:var(--green)">0% errors</span>') +
-          '</div>';
-
-        var callerKeys = Object.keys(ge.callers);
-        var callerHtml = '';
-        if (callerKeys.length > 0) {
-          callerHtml = '<div class="fetch-group-callers">Called by: <strong>' + callerKeys.map(function(c) { return escHtml(c); }).join('</strong>, <strong>') + '</strong></div>';
-        }
-
-        card.innerHTML = headerHtml + metaHtml + callerHtml;
-        groupsDiv.appendChild(card);
-      }
-
-      container.appendChild(groupsDiv);
-    }
-  }
-
-  function renderFetches() {
-    buildFetchAnalysis();
-  }
-
-  function prependFetchRow(f) {
-    buildFetchAnalysis();
-  }
-
-  async function loadFetches() {
-    try {
-      var res = await fetch('/__brakit/api/fetches');
-      var data = await res.json();
-      state.fetches = data.entries;
-      renderFetches();
-    } catch(e) { console.warn('[brakit]', e); }
-  }
-  
-  
-  function buildErrorRow(e) {
-    var row = document.createElement('div');
-    row.className = 'req-row tel-clickable';
-    var ts = new Date(e.timestamp).toLocaleTimeString();
-    row.innerHTML =
-      '<span class="tel-error-name" title="' + escHtml(e.name) + '">' + escHtml(e.name) + '</span>' +
-      '<span class="tel-message" title="' + escHtml(e.message) + '">' + escHtml(e.message) + '</span>' +
-      '<span class="tel-timestamp">' + ts + '</span>';
-    row.addEventListener('click', function() {
-      row.classList.toggle('expanded');
-      var existing = row.nextElementSibling;
-      if (existing && existing.classList.contains('error-stack')) {
-        existing.remove();
-        return;
-      }
-      if (e.stack) {
-        var stackEl = document.createElement('div');
-        stackEl.className = 'error-stack';
-        stackEl.textContent = e.stack;
-        row.parentNode.insertBefore(stackEl, row.nextSibling);
-      }
-    });
-    return row;
-  }
-
-  var errorView = createTelemetryView('error-list', buildErrorRow);
-  function renderErrors() { errorView.render(state.errors); }
-  function prependErrorRow(e) { errorView.prepend(e); }
-
-  async function loadErrors() {
-    try {
-      var res = await fetch('/__brakit/api/errors');
-      var data = await res.json();
-      state.errors = data.entries;
-      renderErrors();
-    } catch(e) { console.warn('[brakit]', e); }
-  }
-  
-  
-  function buildLogRow(l) {
-    var row = document.createElement('div');
-    row.className = 'req-row';
-    var ts = new Date(l.timestamp).toLocaleTimeString();
-    row.innerHTML =
-      '<span class="tel-level tel-level-' + l.level + '">' + l.level.toUpperCase() + '</span>' +
-      '<span class="tel-message tel-mono" title="' + escHtml(l.message) + '">' + escHtml(l.message) + '</span>' +
-      '<span class="tel-timestamp">' + ts + '</span>';
-    return row;
-  }
-
-  function buildLogAnalysis() {
-    var container = document.getElementById('log-analysis');
-    if (!container) return;
-    container.innerHTML = '';
-
-    var logs = state.logs;
-    if (logs.length === 0) {
-      container.style.display = 'none';
-      return;
-    }
-    container.style.display = 'block';
-
-    var counts = { error: 0, warn: 0, info: 0, debug: 0, log: 0 };
-    for (var i = 0; i < logs.length; i++) {
-      var lvl = logs[i].level;
-      if (counts[lvl] !== undefined) counts[lvl]++;
-    }
-
-    var summary = document.createElement('div');
-    summary.className = 'fetch-summary';
-    summary.innerHTML =
-      '<div class="fetch-stat"><span class="fetch-stat-value">' + logs.length + '</span><span class="fetch-stat-label">Total Logs</span></div>' +
-      (counts.error > 0 ? '<div class="fetch-stat"><span class="fetch-stat-value" style="color:var(--red)">' + counts.error + '</span><span class="fetch-stat-label">Errors</span></div>' : '') +
-      (counts.warn > 0 ? '<div class="fetch-stat"><span class="fetch-stat-value" style="color:var(--amber)">' + counts.warn + '</span><span class="fetch-stat-label">Warnings</span></div>' : '') +
-      '<div class="fetch-stat"><span class="fetch-stat-value">' + counts.info + '</span><span class="fetch-stat-label">Info</span></div>' +
-      (counts.debug > 0 ? '<div class="fetch-stat"><span class="fetch-stat-value">' + counts.debug + '</span><span class="fetch-stat-label">Debug</span></div>' : '') +
-      (counts.log > 0 ? '<div class="fetch-stat"><span class="fetch-stat-value">' + counts.log + '</span><span class="fetch-stat-label">Log</span></div>' : '');
-    container.appendChild(summary);
-  }
-
-  var logView = createTelemetryView('log-list', buildLogRow);
-
-  function renderLogs() {
-    buildLogAnalysis();
-    logView.render(state.logs);
-  }
-
-  function prependLogRow(l) {
-    buildLogAnalysis();
-    logView.prepend(l);
-  }
-
-  async function loadLogs() {
-    try {
-      var res = await fetch('/__brakit/api/logs');
-      var data = await res.json();
-      state.logs = data.entries;
-      renderLogs();
-    } catch(e) { console.warn('[brakit]', e); }
-  }
-  
-  
-  function buildQueryRow(q) {
-    var wrapper = document.createElement('div');
-    var row = document.createElement('div');
-    row.className = 'req-row query-row tel-clickable';
-
-    var info = { op: (q.normalizedOp || q.operation || '?').toUpperCase(), table: q.table || q.model || '' };
-    var opColor = QUERY_OP_COLORS[info.op] || 'var(--text-dim)';
-    var slowCls = q.durationMs > 100 ? ' query-slow' : '';
-    var preview = q.sql || (info.op + ' ' + info.table);
-
-    row.innerHTML =
-      '<span class="query-op" title="' + escHtml(info.op) + '" style="color:' + opColor + '">' + escHtml(info.op) + '</span>' +
-      '<span class="query-table" title="' + escHtml(info.table) + '">' + escHtml(info.table) + '</span>' +
-      '<span class="query-preview" title="' + escHtml(preview) + '">' + escHtml(preview) + '</span>' +
-      '<span class="query-dur' + slowCls + '">' + queryDuration(q.durationMs) + '</span>';
-
-    var sqlText = q.sql || (info.op + ' ' + info.table);
-    var detail = document.createElement('div');
-    detail.className = 'query-detail';
-    detail.innerHTML = '<pre class="query-detail-sql">' + escHtml(sqlText) + '</pre><button class="query-detail-copy">Copy</button>';
-
-    row.addEventListener('click', function() {
-      var wasOpen = detail.classList.contains('open');
-      if (wasOpen) {
-        detail.classList.remove('open');
-        row.classList.remove('expanded');
-      } else {
-        detail.classList.add('open');
-        row.classList.add('expanded');
-      }
-    });
-
-    detail.querySelector('.query-detail-copy').addEventListener('click', function(e) {
-      e.stopPropagation();
-      navigator.clipboard.writeText(sqlText).then(function() { showToast('SQL copied'); });
-    });
-
-    wrapper.appendChild(row);
-    wrapper.appendChild(detail);
-    return wrapper;
-  }
-
-  var queryView = createTelemetryView('query-list', buildQueryRow);
-  function renderQueries() { queryView.render(state.queries); }
-  function prependQueryRow(q) { queryView.prepend(q); }
-
-  async function loadQueries() {
-    try {
-      var res = await fetch('/__brakit/api/queries');
-      var data = await res.json();
-      state.queries = data.entries;
-      renderQueries();
-    } catch(e) { console.warn('[brakit]', e); }
-  }
-  
-  
-  var TL_TYPE_COLORS = { fetch: 'var(--blue)', log: 'var(--text-muted)', error: 'var(--red)', query: 'var(--accent)' };
-  var TL_TYPE_LABELS = { fetch: 'FETCH', log: 'LOG', error: 'ERROR', query: 'QUERY' };
-  var LOG_LEVEL_COLORS = { error: 'var(--red)', warn: 'var(--amber)', info: 'var(--blue)', debug: 'var(--text-muted)', log: 'var(--text-dim)' };
-
-  var timelineCache = {};
-  var TIMELINE_CACHE_MAX = 50;
-
-  async function loadTimeline(requestId, container, requestStartedAt) {
-    if (timelineCache[requestId]) {
-      renderTimelineContent(timelineCache[requestId], container, requestStartedAt);
-      return;
-    }
-
-    container.classList.remove('tl-hidden');
-    container.innerHTML = '<div class="tl-loading">Loading activity...</div>';
-
-    try {
-      var res = await fetch('/__brakit/api/activity?requestId=' + requestId);
-      var data = await res.json();
-
-      var keys = Object.keys(timelineCache);
-      if (keys.length >= TIMELINE_CACHE_MAX) delete timelineCache[keys[0]];
-      timelineCache[requestId] = data;
-
-      renderTimelineContent(data, container, requestStartedAt);
-    } catch(ex) {
-      container.innerHTML = '';
-      container.classList.add('tl-hidden');
-    }
-  }
-
-  function renderTimelineContent(data, container, requestStartedAt) {
-    if (data.total === 0) {
-      container.innerHTML = '';
-      container.classList.add('tl-hidden');
-      return;
-    }
-    container.classList.remove('tl-hidden');
-
-    var h = '<div class="tl-header">';
-    h += '<span class="tl-title">Activity Timeline</span>';
-    h += '<span class="tl-counts">';
-    if (data.counts.queries > 0) h += '<span class="tl-count tl-count-query">' + data.counts.queries + ' quer' + (data.counts.queries === 1 ? 'y' : 'ies') + '</span>';
-    if (data.counts.fetches > 0) h += '<span class="tl-count tl-count-fetch">' + data.counts.fetches + ' fetch' + (data.counts.fetches === 1 ? '' : 'es') + '</span>';
-    if (data.counts.logs > 0) h += '<span class="tl-count tl-count-log">' + data.counts.logs + ' log' + (data.counts.logs === 1 ? '' : 's') + '</span>';
-    if (data.counts.errors > 0) h += '<span class="tl-count tl-count-error">' + data.counts.errors + ' error' + (data.counts.errors === 1 ? '' : 's') + '</span>';
-    h += '</span></div>';
-    h += '<div class="tl-events">';
-
-    var baseTs = data.timeline[0].timestamp;
-
-    for (var i = 0; i < data.timeline.length; i++) {
-      var evt = data.timeline[i];
-      var color = TL_TYPE_COLORS[evt.type] || 'var(--text-dim)';
-      var label = TL_TYPE_LABELS[evt.type] || evt.type;
-      var relMs = Math.round(evt.timestamp - baseTs);
-      var relStr = '+' + formatDuration(relMs);
-      var isQuery = evt.type === 'query' && evt.data && evt.data.sql;
-
-      h += '<div class="tl-event' + (isQuery ? ' tl-clickable' : '') + '"' + (isQuery ? '' : ' style="border-left-color:' + color + '"') + '>';
-      h += '<span class="tl-event-time">' + relStr + '</span>';
-      h += '<span class="tl-event-type" style="color:' + color + '">' + label + '</span>';
-      h += renderTimelineEvent(evt);
-      if (isQuery) {
-        h += '<div class="tl-event-sql" data-sql="' + escHtml(evt.data.sql) + '"><button class="tl-sql-copy">Copy</button>' + escHtml(evt.data.sql) + '</div>';
-      }
-      h += '</div>';
-    }
-
-    h += '</div>';
-    container.innerHTML = h;
-
-    container.querySelectorAll('.tl-clickable').forEach(function(el) {
-      el.addEventListener('click', function(e) {
-        e.stopPropagation();
-        var sqlEl = el.querySelector('.tl-event-sql');
-        if (sqlEl) sqlEl.classList.toggle('open');
-      });
-    });
-    container.querySelectorAll('.tl-sql-copy').forEach(function(btn) {
-      btn.addEventListener('click', function(e) {
-        e.stopPropagation();
-        var sqlEl = btn.closest('.tl-event-sql');
-        if (sqlEl) {
-          navigator.clipboard.writeText(sqlEl.getAttribute('data-sql')).then(function() { showToast('SQL copied'); });
-        }
-      });
-    });
-  }
-
-  function renderTimelineEvent(evt) {
-    var d = evt.data;
-    if (evt.type === 'fetch') {
-      var sCls = d.statusCode >= 400 ? ' style="color:var(--red)"' : '';
-      return '<span class="tl-event-summary">' + escHtml(d.method) + ' ' + escHtml(d.url) + '</span>' +
-             '<span class="tl-event-status"' + sCls + '>' + d.statusCode + '</span>' +
-             '<span class="tl-event-dur">' + formatDuration(d.durationMs) + '</span>';
-    }
-    if (evt.type === 'query') {
-      var info = { op: (d.normalizedOp || d.operation || '?').toUpperCase(), table: d.table || d.model || '' };
-      var opColor = QUERY_OP_COLORS[info.op] || 'var(--text-dim)';
-      return '<span class="tl-event-summary"><span style="color:' + opColor + ';font-weight:600">' + escHtml(info.op) + '</span> ' + escHtml(info.table) + '</span>' +
-             '<span class="tl-event-dur">' + queryDuration(d.durationMs) + '</span>';
-    }
-    if (evt.type === 'log') {
-      var lColor = LOG_LEVEL_COLORS[d.level] || 'var(--text-dim)';
-      return '<span class="tl-event-summary"><span style="color:' + lColor + '">' + d.level.toUpperCase() + '</span> ' + escHtml(d.message) + '</span>';
-    }
-    if (evt.type === 'error') {
-      return '<span class="tl-event-summary" style="color:var(--red)">' + escHtml(d.name) + ': ' + escHtml(d.message) + '</span>';
-    }
-    return '';
-  }
-
-  function invalidateTimelineCache(requestId) {
-    delete timelineCache[requestId];
-  }
-
-  function refreshVisibleTimeline(requestId) {
-    var el = document.querySelector('.request-timeline[data-request-id="' + requestId + '"]');
-    if (el && el.closest('.flow-expand.open, .req-detail.open')) {
-      loadTimeline(requestId, el, 0);
-    }
-  }
-
-  var timelineObserver = null;
-  if (window.IntersectionObserver) {
-    timelineObserver = new IntersectionObserver(function(entries) {
-      entries.forEach(function(entry) {
-        if (entry.isIntersecting) {
-          var el = entry.target;
-          var rid = el.getAttribute('data-request-id');
-          var started = parseFloat(el.getAttribute('data-request-started'));
-          if (rid && !el.hasAttribute('data-loaded')) {
-            el.setAttribute('data-loaded', '1');
-            loadTimeline(rid, el, started);
-          }
-          timelineObserver.unobserve(el);
-        }
-      });
-    }, { rootMargin: '200px' });
-  }
-
-  function observeTimeline(el) {
-    if (timelineObserver) {
-      timelineObserver.observe(el);
-    } else {
-      var rid = el.getAttribute('data-request-id');
-      var started = parseFloat(el.getAttribute('data-request-started'));
-      loadTimeline(rid, el, started);
-    }
-  }
-  
-  
-  var graphData = null;
-  var selectedEndpoint = '__all__';
-
-  var GRAPH_COLORS = ['#2563eb','#7c3aed','#16a34a','#d97706','#dc2626','#0891b2','#ea580c','#c026d3','#059669','#db2777'];
-
-  
-  var HEALTH_GRADES = [
-  { max: 100, label: 'Fast', color: 'var(--green)', bg: 'rgba(22,163,74,0.08)', border: 'rgba(22,163,74,0.2)' },
-  { max: 300, label: 'Good', color: 'var(--green)', bg: 'rgba(22,163,74,0.06)', border: 'rgba(22,163,74,0.15)' },
-  { max: 800, label: 'OK', color: 'var(--amber)', bg: 'rgba(217,119,6,0.06)', border: 'rgba(217,119,6,0.15)' },
-  { max: 2000, label: 'Slow', color: 'var(--red)', bg: 'rgba(220,38,38,0.06)', border: 'rgba(220,38,38,0.15)' },
-  { max: Infinity, label: 'Critical', color: 'var(--red)', bg: 'rgba(220,38,38,0.08)', border: 'rgba(220,38,38,0.2)' }
-];
-  var DOT_COLORS = { green: '#4ade80', amber: '#fbbf24', red: '#f87171' };
-
-  function healthGrade(ms) {
-    for (var i = 0; i < HEALTH_GRADES.length; i++) {
-      if (ms < HEALTH_GRADES[i].max) return HEALTH_GRADES[i];
-    }
-    return HEALTH_GRADES[HEALTH_GRADES.length - 1];
-  }
-
-  function fmtMs(ms) {
-    if (ms < 1) return '<1ms';
-    if (ms < 1000) return Math.round(ms) + 'ms';
-    return (ms / 1000).toFixed(1) + 's';
-  }
-
-  function dotColor(ms) {
-    if (ms < 300) return DOT_COLORS.green;
-    if (ms < 800) return DOT_COLORS.amber;
-    return DOT_COLORS.red;
-  }
-
-  function buildMetricCard(label, value, color) {
-    return '<div class="perf-metric-card">' +
-      '<span class="perf-metric-label">' + label + '</span>' +
-      '<span class="perf-metric-value" style="color:' + color + '">' + value + '</span>' +
-      '</div>';
-  }
-  
-  
-  var HIGH_QUERY_THRESHOLD = 5;
-
-  function renderPerfOverview(container) {
-    var list = document.createElement('div');
-    list.className = 'perf-endpoint-list';
-
-    graphData.forEach(function(ep, idx) {
-      if (ep.requests.length === 0) return;
-      var s = ep.summary;
-      var g = healthGrade(s.p95Ms);
-      var errors = Math.round(s.errorRate * s.totalRequests);
-
-      var card = document.createElement('div');
-      card.className = 'perf-endpoint-card';
-      card.addEventListener('click', function() { selectedEndpoint = ep.endpoint; renderGraph(); });
-
-      var statsHtml =
-        '<span class="perf-ep-stat" style="color:' + g.color + '">p95: ' + fmtMs(s.p95Ms) + '</span>' +
-        '<span class="perf-ep-stat' + (errors > 0 ? ' perf-ep-stat-err' : '') + '">' + errors + ' err</span>' +
-        (s.avgQueryCount > 0 ? '<span class="perf-ep-stat' + (s.avgQueryCount > HIGH_QUERY_THRESHOLD ? ' perf-ep-stat-warn' : '') + '">' + s.avgQueryCount + ' q/req</span>' : '') +
-        '<span class="perf-ep-stat perf-ep-stat-muted">' + s.totalRequests + ' req' + (s.totalRequests !== 1 ? 's' : '') + '</span>';
-
-      var ovTotal = (s.avgQueryTimeMs || 0) + (s.avgFetchTimeMs || 0) + (s.avgAppTimeMs || 0);
-      var ovBarHtml = '';
-      if (ovTotal > 0) {
-        var ovDbPct = Math.round((s.avgQueryTimeMs || 0) / ovTotal * 100);
-        var ovFetchPct = Math.round((s.avgFetchTimeMs || 0) / ovTotal * 100);
-        var ovAppPct = Math.max(0, 100 - ovDbPct - ovFetchPct);
-        ovBarHtml =
-          '<div class="perf-breakdown-inline">' +
-            '<div class="perf-breakdown-bar perf-breakdown-bar-sm">' +
-              (ovDbPct > 0 ? '<div class="perf-breakdown-seg perf-breakdown-db" style="width:' + ovDbPct + '%"></div>' : '') +
-              (ovFetchPct > 0 ? '<div class="perf-breakdown-seg perf-breakdown-fetch" style="width:' + ovFetchPct + '%"></div>' : '') +
-              (ovAppPct > 0 ? '<div class="perf-breakdown-seg perf-breakdown-app" style="width:' + ovAppPct + '%"></div>' : '') +
-            '</div>' +
-            '<span class="perf-breakdown-labels">' +
-              (ovDbPct > 0 ? '<span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-db"></span>' + fmtMs(s.avgQueryTimeMs || 0) + '</span>' : '') +
-              (ovFetchPct > 0 ? '<span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-fetch"></span>' + fmtMs(s.avgFetchTimeMs || 0) + '</span>' : '') +
-              '<span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-app"></span>' + fmtMs(s.avgAppTimeMs || 0) + '</span>' +
-            '</span>' +
-          '</div>';
-      }
-
-      var chartId = 'inline-scatter-' + idx;
-
-      card.innerHTML =
-        '<div class="perf-ep-header">' +
-          '<span class="perf-ep-name">' + escHtml(ep.endpoint) + '</span>' +
-          '<span class="perf-ep-stats">' + statsHtml + '</span>' +
-        '</div>' +
-        ovBarHtml +
-        '<canvas id="' + chartId + '" class="perf-inline-canvas"></canvas>';
-
-      list.appendChild(card);
-
-      setTimeout(function() {
-        var c = document.getElementById(chartId);
-        if (c) drawInlineScatter(c, ep.requests);
-      }, 0);
-    });
-
-    container.appendChild(list);
-  }
-  
-  
-  function renderEndpointDetail(container) {
-    var ep = graphData.find(function(e) { return e.endpoint === selectedEndpoint; });
-    if (!ep || !ep.requests || ep.requests.length === 0) {
-      container.innerHTML += '<div class="empty"><span class="empty-sub">No data for this endpoint</span></div>';
-      return;
-    }
-
-    var s = ep.summary;
-    var g = healthGrade(s.p95Ms);
-    var errors = Math.round(s.errorRate * s.totalRequests);
-
-    var header = document.createElement('div');
-    header.className = 'perf-detail-header';
-    header.innerHTML =
-      '<div class="perf-detail-title">' +
-        '<span class="perf-badge perf-badge-lg" style="color:' + g.color + ';background:' + g.bg + ';border-color:' + g.border + '">' + g.label + '</span>' +
-        '<span>' + escHtml(ep.endpoint) + '</span>' +
-      '</div>';
-    container.appendChild(header);
-
-    var metrics = document.createElement('div');
-    metrics.className = 'perf-metric-row';
-    metrics.innerHTML =
-      buildMetricCard('P95', fmtMs(s.p95Ms), g.color) +
-      buildMetricCard('Errors', errors > 0 ? errors + ' (' + Math.round(s.errorRate * 100) + '%)' : '0', errors > 0 ? 'var(--red)' : 'var(--green)') +
-      buildMetricCard('Queries/req', String(s.avgQueryCount), s.avgQueryCount > 5 ? 'var(--amber)' : 'var(--text)');
-    container.appendChild(metrics);
-
-    var totalAvg = (s.avgQueryTimeMs || 0) + (s.avgFetchTimeMs || 0) + (s.avgAppTimeMs || 0);
-    if (totalAvg > 0) {
-      var dbPct = Math.round((s.avgQueryTimeMs || 0) / totalAvg * 100);
-      var fetchPct = Math.round((s.avgFetchTimeMs || 0) / totalAvg * 100);
-      var appPct = Math.max(0, 100 - dbPct - fetchPct);
-
-      var breakdown = document.createElement('div');
-      breakdown.className = 'perf-breakdown';
-
-      var breakdownLabel = document.createElement('div');
-      breakdownLabel.className = 'perf-section-title';
-      breakdownLabel.textContent = 'Time Breakdown';
-      breakdown.appendChild(breakdownLabel);
-
-      var bar = document.createElement('div');
-      bar.className = 'perf-breakdown-bar';
-      if (dbPct > 0) bar.innerHTML += '<div class="perf-breakdown-seg perf-breakdown-db" style="width:' + dbPct + '%"></div>';
-      if (fetchPct > 0) bar.innerHTML += '<div class="perf-breakdown-seg perf-breakdown-fetch" style="width:' + fetchPct + '%"></div>';
-      if (appPct > 0) bar.innerHTML += '<div class="perf-breakdown-seg perf-breakdown-app" style="width:' + appPct + '%"></div>';
-      breakdown.appendChild(bar);
-
-      var legend = document.createElement('div');
-      legend.className = 'perf-breakdown-legend';
-      legend.innerHTML =
-        '<span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-db"></span>DB ' + fmtMs(s.avgQueryTimeMs || 0) + ' (' + dbPct + '%)</span>' +
-        '<span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-fetch"></span>Fetch ' + fmtMs(s.avgFetchTimeMs || 0) + ' (' + fetchPct + '%)</span>' +
-        '<span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-app"></span>App ' + fmtMs(s.avgAppTimeMs || 0) + ' (' + appPct + '%)</span>';
-      breakdown.appendChild(legend);
-
-      container.appendChild(breakdown);
-    }
-
-    var chartWrap = document.createElement('div');
-    chartWrap.className = 'perf-chart-wrap';
-    var chartLabel = document.createElement('div');
-    chartLabel.className = 'perf-section-title';
-    chartLabel.textContent = 'Response Time';
-    chartWrap.appendChild(chartLabel);
-
-    var canvas = document.createElement('canvas');
-    canvas.width = 800;
-    canvas.height = 240;
-    canvas.style.cssText = 'width:100%;height:240px';
-    canvas.className = 'perf-canvas';
-    chartWrap.appendChild(canvas);
-    container.appendChild(chartWrap);
-
-    drawScatterChart(canvas, ep.requests);
-
-    if (ep.requests.length > 0) {
-      var tableWrap = document.createElement('div');
-      tableWrap.className = 'perf-history-wrap';
-
-      var colHeader = document.createElement('div');
-      colHeader.className = 'col-header';
-      colHeader.innerHTML =
-        '<span class="perf-col perf-col-date">Time</span>' +
-        '<span class="perf-col perf-col-health">Health</span>' +
-        '<span class="perf-col perf-col-avg">Duration</span>' +
-        '<span class="perf-col perf-col-breakdown">Breakdown</span>' +
-        '<span class="perf-col perf-col-status">Status</span>' +
-        '<span class="perf-col perf-col-qpr">Queries</span>';
-      tableWrap.appendChild(colHeader);
-
-      var recentWithIdx = [];
-      for (var ri = ep.requests.length - 1; ri >= 0 && recentWithIdx.length < 50; ri--) {
-        recentWithIdx.push({ r: ep.requests[ri], origIdx: ri });
-      }
-      recentWithIdx.forEach(function(item) {
-        var r = item.r;
-        var rg = healthGrade(r.durationMs);
-        var date = new Date(r.timestamp);
-        var timeStr = date.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'});
-        var isError = r.statusCode >= 400;
-
-        var row = document.createElement('div');
-        row.className = 'perf-hist-row' + (isError ? ' perf-hist-row-err' : '');
-        row.setAttribute('data-req-idx', item.origIdx);
-        var rDbMs = r.queryTimeMs || 0;
-        var rFetchMs = r.fetchTimeMs || 0;
-        var rAppMs = Math.max(0, r.durationMs - rDbMs - rFetchMs);
-        var breakdownParts = [];
-        if (rDbMs > 0) breakdownParts.push('<span class="perf-bd-tag perf-bd-tag-db">DB ' + fmtMs(rDbMs) + '</span>');
-        if (rFetchMs > 0) breakdownParts.push('<span class="perf-bd-tag perf-bd-tag-fetch">Fetch ' + fmtMs(rFetchMs) + '</span>');
-        breakdownParts.push('<span class="perf-bd-tag perf-bd-tag-app">App ' + fmtMs(rAppMs) + '</span>');
-        var breakdownHtml = breakdownParts.join('');
-
-        row.innerHTML =
-          '<span class="perf-col perf-col-date">' + timeStr + '</span>' +
-          '<span class="perf-col perf-col-health"><span class="perf-badge perf-badge-sm" style="color:' + rg.color + ';background:' + rg.bg + ';border-color:' + rg.border + '">' + rg.label + '</span></span>' +
-          '<span class="perf-col perf-col-avg">' + fmtMs(r.durationMs) + '</span>' +
-          '<span class="perf-col perf-col-breakdown">' + breakdownHtml + '</span>' +
-          '<span class="perf-col perf-col-status" style="color:' + (isError ? 'var(--red)' : 'var(--text-muted)') + '">' + r.statusCode + '</span>' +
-          '<span class="perf-col perf-col-qpr">' + r.queryCount + '</span>';
-        tableWrap.appendChild(row);
-      });
-      container.appendChild(tableWrap);
-    }
-  }
-  
-  
-  var THRESHOLD_GOOD = 300;
-  var THRESHOLD_OK = 800;
-  var CHART_PAD = { top: 16, right: 16, bottom: 28, left: 52 };
-
-  var scatterDots = [];
-
-  function setupCanvas(canvas) {
-    var ctx = canvas.getContext('2d');
-    if (!ctx) return null;
-    var dpr = window.devicePixelRatio || 1;
-    var w = canvas.clientWidth;
-    var h = canvas.clientHeight;
-    canvas.width = w * dpr;
-    canvas.height = h * dpr;
-    ctx.scale(dpr, dpr);
-    return { ctx: ctx, w: w, h: h };
-  }
-
-  function reqDotColor(r) {
-    if (r.statusCode >= 400) return DOT_COLORS.red;
-    return dotColor(r.durationMs);
-  }
-
-  function drawDot(ctx, x, y, radius, color) {
-    var r = parseInt(color.slice(1,3),16), g = parseInt(color.slice(3,5),16), b = parseInt(color.slice(5,7),16);
-    ctx.beginPath();
-    ctx.arc(x, y, radius + 2, 0, Math.PI * 2);
-    ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',0.25)';
-    ctx.fill();
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, Math.PI * 2);
-    ctx.fillStyle = color;
-    ctx.fill();
-  }
-
-  function drawErrorX(ctx, x, y, size, color, lineWidth) {
-    var r = parseInt(color.slice(1,3),16), g = parseInt(color.slice(3,5),16), b = parseInt(color.slice(5,7),16);
-    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',0.3)';
-    ctx.lineWidth = lineWidth + 2;
-    ctx.beginPath();
-    ctx.moveTo(x - size, y - size); ctx.lineTo(x + size, y + size);
-    ctx.moveTo(x + size, y - size); ctx.lineTo(x - size, y + size);
-    ctx.stroke();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = lineWidth;
-    ctx.beginPath();
-    ctx.moveTo(x - size, y - size); ctx.lineTo(x + size, y + size);
-    ctx.moveTo(x + size, y - size); ctx.lineTo(x - size, y + size);
-    ctx.stroke();
-  }
-
-  // Maps time → x-axis, duration → y-axis as a scatter plot
-  function drawScatterChart(canvas, requests) {
-    scatterDots = [];
-    var setup = setupCanvas(canvas);
-    if (!setup) return;
-    var ctx = setup.ctx, w = setup.w, h = setup.h;
-    if (requests.length === 0) return;
-
-    var pad = CHART_PAD;
-    var cw = w - pad.left - pad.right;
-    var ch = h - pad.top - pad.bottom;
-
-    var maxVal = 0;
-    var minTime = requests[0].timestamp, maxTime = requests[0].timestamp;
-    requests.forEach(function(r) {
-      if (r.durationMs > maxVal) maxVal = r.durationMs;
-      if (r.timestamp < minTime) minTime = r.timestamp;
-      if (r.timestamp > maxTime) maxTime = r.timestamp;
-    });
-    maxVal = Math.max(maxVal, 10);
-    maxVal = Math.ceil(maxVal * 1.15 / 10) * 10;
-    var timeRange = maxTime - minTime || 1;
-
-    ctx.strokeStyle = 'rgba(228,228,231,0.8)';
-    ctx.lineWidth = 1;
-    var gridLines = 4;
-    for (var gi = 0; gi <= gridLines; gi++) {
-      var gy = pad.top + ch - (gi / gridLines) * ch;
-      ctx.beginPath();
-      ctx.moveTo(pad.left, gy);
-      ctx.lineTo(pad.left + cw, gy);
-      ctx.stroke();
-      ctx.fillStyle = 'rgba(113,113,122,0.7)';
-      ctx.font = '10px monospace';
-      ctx.textAlign = 'right';
-      ctx.fillText(fmtMs(Math.round((gi / gridLines) * maxVal)), pad.left - 8, gy + 3);
-    }
-
-    var thresholds = [
-      { ms: THRESHOLD_GOOD, label: fmtMs(THRESHOLD_GOOD) },
-      { ms: THRESHOLD_OK, label: fmtMs(THRESHOLD_OK) }
-    ];
-    thresholds.forEach(function(t) {
-      if (t.ms >= maxVal) return;
-      var ty = pad.top + ch - (t.ms / maxVal) * ch;
-      ctx.beginPath();
-      ctx.setLineDash([4, 4]);
-      ctx.strokeStyle = 'rgba(113,113,122,0.3)';
-      ctx.lineWidth = 1;
-      ctx.moveTo(pad.left, ty);
-      ctx.lineTo(pad.left + cw, ty);
-      ctx.stroke();
-      ctx.setLineDash([]);
-      ctx.fillStyle = 'rgba(113,113,122,0.5)';
-      ctx.font = '9px monospace';
-      ctx.textAlign = 'left';
-      ctx.fillText(t.label, pad.left + cw + 2, ty + 3);
-    });
-
-    requests.forEach(function(r, idx) {
-      var x = requests.length === 1 ? pad.left + cw / 2 : pad.left + ((r.timestamp - minTime) / timeRange) * cw;
-      var y = pad.top + ch - (r.durationMs / maxVal) * ch;
-      var color = reqDotColor(r);
-
-      scatterDots.push({ x: x, y: y, idx: idx, r: r });
-
-      if (r.statusCode >= 400) {
-        drawErrorX(ctx, x, y, 4, color, 2);
-      } else {
-        drawDot(ctx, x, y, 4, color);
-      }
-    });
-
-    ctx.fillStyle = 'rgba(113,113,122,0.7)';
-    ctx.font = '9px monospace';
-    ctx.textAlign = 'center';
-    var timePoints = [minTime, minTime + timeRange / 2, maxTime];
-    timePoints.forEach(function(t, i) {
-      var x = pad.left + (i / 2) * cw;
-      var d = new Date(t);
-      ctx.fillText(d.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'}), x, pad.top + ch + 14);
-    });
-
-    canvas.style.cursor = 'pointer';
-    canvas.onclick = function(e) {
-      var rect = canvas.getBoundingClientRect();
-      var mx = e.clientX - rect.left;
-      var my = e.clientY - rect.top;
-      var closest = null, closestDist = Infinity;
-      scatterDots.forEach(function(d) {
-        var dist = Math.sqrt((d.x - mx) * (d.x - mx) + (d.y - my) * (d.y - my));
-        if (dist < closestDist) { closestDist = dist; closest = d; }
-      });
-      if (closest && closestDist < 16) {
-        highlightRow(closest.idx);
-      }
-    };
-  }
-
-  function highlightRow(reqIdx) {
-    var prev = document.querySelector('.perf-hist-row-hl');
-    if (prev) prev.classList.remove('perf-hist-row-hl');
-    var row = document.querySelector('[data-req-idx="' + reqIdx + '"]');
-    if (row) {
-      row.classList.add('perf-hist-row-hl');
-      row.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-  }
-
-  function drawInlineScatter(canvas, requests) {
-    var setup = setupCanvas(canvas);
-    if (!setup) return;
-    var ctx = setup.ctx, w = setup.w, h = setup.h;
-    if (requests.length === 0) return;
-
-    var padX = 4, padY = 4;
-    var cw = w - padX * 2;
-    var ch = h - padY * 2;
-
-    var maxVal = 0, minVal = Infinity;
-    var minTime = requests[0].timestamp, maxTime = requests[0].timestamp;
-    requests.forEach(function(r) {
-      if (r.durationMs > maxVal) maxVal = r.durationMs;
-      if (r.durationMs < minVal) minVal = r.durationMs;
-      if (r.timestamp < minTime) minTime = r.timestamp;
-      if (r.timestamp > maxTime) maxTime = r.timestamp;
-    });
-    maxVal = Math.max(maxVal, 10);
-    maxVal = Math.ceil(maxVal * 1.15 / 10) * 10;
-    var timeRange = maxTime - minTime || 1;
-
-    [THRESHOLD_GOOD, THRESHOLD_OK].forEach(function(ms) {
-      if (ms >= maxVal) return;
-      var ty = padY + ch - (ms / maxVal) * ch;
-      ctx.beginPath();
-      ctx.setLineDash([2, 3]);
-      ctx.strokeStyle = 'rgba(113,113,122,0.15)';
-      ctx.lineWidth = 1;
-      ctx.moveTo(padX, ty);
-      ctx.lineTo(padX + cw, ty);
-      ctx.stroke();
-      ctx.setLineDash([]);
-    });
-
-    requests.forEach(function(r) {
-      var x = requests.length === 1 ? padX + cw / 2 : padX + ((r.timestamp - minTime) / timeRange) * cw;
-      var y = padY + ch - (r.durationMs / maxVal) * ch;
-      var color = reqDotColor(r);
-
-      if (r.statusCode >= 400) {
-        drawErrorX(ctx, x, y, 2.5, color, 1.5);
-      } else {
-        drawDot(ctx, x, y, 2.5, color);
-      }
-    });
-
-    ctx.fillStyle = 'rgba(113,113,122,0.5)';
-    ctx.font = '8px monospace';
-    ctx.textAlign = 'right';
-    ctx.fillText(fmtMs(maxVal), w - 2, padY + 8);
-    ctx.fillText(fmtMs(0), w - 2, h - 2);
-  }
-  
-
-  function renderGraph() {
-    var container = document.getElementById('graph-content');
-    if (!container) return;
-    container.innerHTML = '';
-
-    if (!graphData || graphData.length === 0) {
-      container.innerHTML = '<div class="empty" style="height:300px"><span class="empty-title">No performance data yet</span><span class="empty-sub">Hit some endpoints and data will appear here</span></div>';
-      return;
-    }
-
-    var selector = document.createElement('div');
-    selector.className = 'perf-selector';
-
-    var allBtn = document.createElement('button');
-    allBtn.className = 'perf-selector-btn' + (selectedEndpoint === '__all__' ? ' active' : '');
-    allBtn.textContent = 'Overview';
-    allBtn.addEventListener('click', function() { selectedEndpoint = '__all__'; renderGraph(); });
-    selector.appendChild(allBtn);
-
-    graphData.forEach(function(ep, idx) {
-      var btn = document.createElement('button');
-      var color = GRAPH_COLORS[idx % GRAPH_COLORS.length];
-      btn.className = 'perf-selector-btn' + (ep.endpoint === selectedEndpoint ? ' active' : '');
-      btn.innerHTML = '<span class="perf-dot" style="background:' + color + '"></span>' + escHtml(ep.endpoint);
-      btn.addEventListener('click', function() { selectedEndpoint = ep.endpoint; renderGraph(); });
-      selector.appendChild(btn);
-    });
-
-    container.appendChild(selector);
-
-    if (selectedEndpoint === '__all__') {
-      renderPerfOverview(container);
-    } else {
-      renderEndpointDetail(container);
-    }
-  }
-
-  async function loadMetrics() {
-    try {
-      var res = await fetch('/__brakit/api/metrics/live');
-      var data = await res.json();
-      graphData = data.endpoints || [];
-      if (!selectedEndpoint || selectedEndpoint === '__all__') {
-        selectedEndpoint = '__all__';
-      }
-      renderGraph();
-    } catch(e) { console.warn('[brakit]', e); }
-  }
-  
-  
-  function renderOverview() {
-    var container = document.getElementById('overview-content');
-    if (!container) return;
-    container.innerHTML = '';
-
-    var nonStatic = state.requests.filter(function(r) {
-      return !r.isStatic && (!r.path || r.path.indexOf('/__brakit') !== 0);
-    });
-
-    var hasData = nonStatic.length > 0 || state.queries.length > 0 || state.errors.length > 0;
-
-    if (!hasData) {
-      container.innerHTML = '<div class="empty"><span class="empty-title">Waiting for requests...</span><span class="empty-sub">Start using your app to see insights here</span></div>';
-      return;
-    }
-
-    var errCount = nonStatic.filter(function(r) { return r.statusCode >= 400; }).length;
-    var avgMs = nonStatic.length > 0 ? Math.round(nonStatic.reduce(function(s, r) { return s + r.durationMs; }, 0) / nonStatic.length) : 0;
-
-    var summary = document.createElement('div');
-    summary.className = 'ov-summary';
-    summary.innerHTML =
-      '<div class="ov-stat"><span class="ov-stat-value">' + nonStatic.length + '</span><span class="ov-stat-label">Requests</span></div>' +
-      '<div class="ov-stat"><span class="ov-stat-value">' + state.flows.length + '</span><span class="ov-stat-label">Actions</span></div>' +
-      '<div class="ov-stat"><span class="ov-stat-value">' + formatDuration(avgMs) + '</span><span class="ov-stat-label">Avg Response</span></div>' +
-      '<div class="ov-stat"><span class="ov-stat-value">' + state.queries.length + '</span><span class="ov-stat-label">Queries</span></div>' +
-      (errCount > 0
-        ? '<div class="ov-stat"><span class="ov-stat-value" style="color:var(--red)">' + errCount + '</span><span class="ov-stat-label">Errors</span></div>'
-        : '<div class="ov-stat"><span class="ov-stat-value" style="color:var(--green)">' + errCount + '</span><span class="ov-stat-label">Errors</span></div>') +
-      '<div class="ov-stat"><span class="ov-stat-value">' + state.fetches.length + '</span><span class="ov-stat-label">Fetches</span></div>';
-    container.appendChild(summary);
-
-    var all = state.issues || [];
-    var open = all.filter(function(si) { return si.state === 'open' || si.state === 'fixing' || si.state === 'regressed'; });
-    var resolved = all.filter(function(si) { return si.state === 'resolved'; });
-
-    if (open.length === 0 && resolved.length === 0) {
-      var clear = document.createElement('div');
-      clear.className = 'ov-clear';
-      clear.innerHTML = '<span class="ov-clear-icon">\u2713</span>All clear — no issues detected';
-      container.appendChild(clear);
-      return;
-    }
-
-    if (open.length === 0 && resolved.length > 0) {
-      var allFixed = document.createElement('div');
-      allFixed.className = 'ov-clear';
-      allFixed.innerHTML = '<span class="ov-clear-icon">\u2713</span>All issues resolved — ' + resolved.length + ' finding' + (resolved.length !== 1 ? 's were' : ' was') + ' detected and fixed';
-      container.appendChild(allFixed);
-    }
-
-    var NAV_LABELS = { queries: 'Queries', requests: 'Requests', actions: 'Actions', errors: 'Errors', security: 'Security', fetches: 'Fetches', logs: 'Logs', performance: 'Performance' };
-    var SEV = { critical: { icon: '\u2717', cls: 'critical', sort: 0 }, warning: { icon: '\u26A0', cls: 'warning', sort: 1 }, info: { icon: '\u2139', cls: 'info', sort: 2 } };
-
-    if (open.length > 0) {
-      var title = document.createElement('div');
-      title.className = 'ov-section-title';
-      title.innerHTML = 'Issues Found <span class="ov-issue-count">' + open.length + '</span>';
-      container.appendChild(title);
-
-      var cards = document.createElement('div');
-      cards.className = 'ov-cards';
-
-      for (var i = 0; i < open.length; i++) {
-        (function(si) {
-          var issue = si.issue;
-          var card = document.createElement('div');
-          card.className = 'ov-card';
-
-          var sevCfg = SEV[issue.severity];
-          var iconCls = sevCfg.cls;
-          var iconChar = sevCfg.icon;
-
-          var expandHtml = '';
-          if (issue.detail) expandHtml += issue.detail;
-          if (issue.hint) expandHtml += '<div class="ov-card-hint">' + escHtml(issue.hint) + '</div>';
-          if (issue.nav) expandHtml += '<span class="ov-card-link" data-nav="' + issue.nav + '">View in ' + (NAV_LABELS[issue.nav] || issue.nav) + ' \u2192</span>';
-
-          var aiBadge = '';
-          if (si.state === 'fixing' && si.aiStatus === 'fixed') {
-            aiBadge = '<span class="sec-ai-badge sec-ai-fixing">AI fixed \u2014 awaiting verification</span>';
-          } else if (si.aiStatus === 'wont_fix') {
-            aiBadge = '<span class="sec-ai-badge sec-ai-wontfix">AI: won\u2019t fix</span>';
-          } else if (si.state === 'regressed') {
-            aiBadge = '<span class="sec-ai-badge sec-ai-fixing" style="background:var(--red)">regressed</span>';
-          }
-
-          var occBadge = si.occurrences > 1 ? ' <span class="sec-item-count">' + si.occurrences + 'x</span>' : '';
-
-          card.innerHTML =
-            '<span class="ov-card-icon ' + iconCls + '">' + iconChar + '</span>' +
-            '<div class="ov-card-body">' +
-              '<div class="ov-card-title">' + escHtml(issue.title) + occBadge + aiBadge + '</div>' +
-              '<div class="ov-card-desc">' + issue.desc + '</div>' +
-              '<div class="ov-card-expand">' + expandHtml + '</div>' +
-            '</div>' +
-            '<span class="ov-card-arrow">\u2192</span>';
-
-          card.addEventListener('click', function(e) {
-            var target = e.target;
-            while (target && target !== card) {
-              if (target.classList && target.classList.contains('ov-card-link')) {
-                var navView = target.getAttribute('data-nav');
-                var sidebarItem = document.querySelector('.sidebar-item[data-view="' + navView + '"]');
-                if (sidebarItem) sidebarItem.click();
-                return;
-              }
-              target = target.parentElement;
-            }
-            var expand = card.querySelector('.ov-card-expand');
-            var arrow = card.querySelector('.ov-card-arrow');
-            if (card.classList.contains('expanded')) {
-              card.classList.remove('expanded');
-              expand.style.display = 'none';
-              arrow.textContent = '\u2192';
-            } else {
-              card.classList.add('expanded');
-              expand.style.display = 'block';
-              arrow.textContent = '\u2193';
-            }
-          });
-
-          cards.appendChild(card);
-        })(open[i]);
-      }
-
-      container.appendChild(cards);
-    }
-
-    if (resolved.length > 0) {
-      var resolvedTitle = document.createElement('div');
-      resolvedTitle.className = 'ov-section-title ov-resolved-title';
-      resolvedTitle.innerHTML = '<span style="color:var(--green)">\u2713</span> Resolved <span class="ov-issue-count">' + resolved.length + '</span>';
-      container.appendChild(resolvedTitle);
-
-      var resolvedCards = document.createElement('div');
-      resolvedCards.className = 'ov-cards';
-
-      for (var ri = 0; ri < resolved.length; ri++) {
-        var rIssue = resolved[ri].issue;
-        var rCard = document.createElement('div');
-        rCard.className = 'ov-card ov-card-resolved';
-        rCard.innerHTML =
-          '<span class="ov-card-icon resolved">\u2713</span>' +
-          '<div class="ov-card-body">' +
-            '<div class="ov-card-title" style="text-decoration:line-through;color:var(--text-muted)">' + escHtml(rIssue.title) + '</div>' +
-            '<div class="ov-card-desc">' + rIssue.desc + '</div>' +
-          '</div>';
-        resolvedCards.appendChild(rCard);
-      }
-
-      container.appendChild(resolvedCards);
-    }
-  }
-  
-  
-  function renderSecurity() {
-    var container = document.getElementById('security-content');
-    if (!container) return;
-    container.innerHTML = '';
-    var SEV = { critical: { icon: '\u2717', cls: 'critical', sort: 0 }, warning: { icon: '\u26A0', cls: 'warning', sort: 1 }, info: { icon: '\u2139', cls: 'info', sort: 2 } };
-
-    var all = (state.issues || []).slice();
-    var open = all.filter(function(f) { return f.state === 'open' || f.state === 'fixing' || f.state === 'regressed'; });
-    var resolved = all.filter(function(f) { return f.state === 'resolved'; });
-    var stale = all.filter(function(f) { return f.state === 'stale'; });
-
-    if (open.length === 0 && resolved.length === 0 && stale.length === 0) {
-      var hasData = state.requests.length > 0 || state.logs.length > 0 || state.queries.length > 0;
-      if (!hasData) {
-        container.innerHTML = '<div class="empty"><span class="empty-title">Waiting for requests...</span><span class="empty-sub">Start using your app to see security findings here</span></div>';
-      } else {
-        container.innerHTML = '<div class="sec-clear"><span class="sec-clear-icon">\u2713</span><div class="sec-clear-text"><div class="sec-clear-title">All clear</div><div class="sec-clear-sub">No security or quality issues detected this session</div></div></div>';
-      }
-      return;
-    }
-
-    var critCount = 0, warnCount = 0, infoCount = 0;
-    for (var ci = 0; ci < open.length; ci++) {
-      var sev = open[ci].issue.severity;
-      if (sev === 'critical') critCount++;
-      else if (sev === 'info') infoCount++;
-      else warnCount++;
-    }
-
-    var summaryEl = document.createElement('div');
-    summaryEl.className = 'sec-summary';
-    summaryEl.innerHTML =
-      '<div class="sec-summary-left">' +
-        '<span class="sec-summary-count">' + open.length + '</span>' +
-        '<span class="sec-summary-label">open issue' + (open.length !== 1 ? 's' : '') + '</span>' +
-        (resolved.length > 0 ? '<span class="sec-resolved-badge">' + resolved.length + ' resolved</span>' : '') +
-      '</div>' +
-      '<div class="sec-summary-right">' +
-        (critCount > 0 ? '<span class="sec-badge critical">' + critCount + ' critical</span>' : '') +
-        (warnCount > 0 ? '<span class="sec-badge warning">' + warnCount + ' warning</span>' : '') +
-        (infoCount > 0 ? '<span class="sec-badge info">' + infoCount + ' info</span>' : '') +
-      '</div>';
-    container.appendChild(summaryEl);
-
-    if (open.length === 0 && resolved.length > 0) {
-      var allFixed = document.createElement('div');
-      allFixed.className = 'sec-clear';
-      allFixed.innerHTML = '<span class="sec-clear-icon">\u2713</span><div class="sec-clear-text"><div class="sec-clear-title">All issues resolved</div><div class="sec-clear-sub">' + resolved.length + ' finding' + (resolved.length !== 1 ? 's were' : ' was') + ' detected and fixed</div></div>';
-      container.appendChild(allFixed);
-    }
-
-    if (open.length > 0) {
-      var groups = {};
-      var groupOrder = [];
-      for (var gi = 0; gi < open.length; gi++) {
-        var sf = open[gi];
-        var f = sf.issue;
-        if (!groups[f.rule]) {
-          groups[f.rule] = { rule: f.rule, title: f.title, severity: f.severity, hint: f.hint, items: [] };
-          groupOrder.push(f.rule);
-        }
-        groups[f.rule].items.push(sf);
-      }
-
-      groupOrder.sort(function(a, b) {
-        var sa = SEV[groups[a].severity].sort;
-        var sb = SEV[groups[b].severity].sort;
-        if (sa !== sb) return sa - sb;
-        return groups[b].items.length - groups[a].items.length;
-      });
-
-      for (var oi = 0; oi < groupOrder.length; oi++) {
-        var group = groups[groupOrder[oi]];
-        var section = document.createElement('div');
-        section.className = 'sec-group';
-
-        var sevCfg = SEV[group.severity];
-        var iconCls = sevCfg.cls;
-        var iconChar = sevCfg.icon;
-
-        var header = document.createElement('div');
-        header.className = 'sec-group-header';
-        header.innerHTML =
-          '<span class="sec-group-icon ' + iconCls + '">' + iconChar + '</span>' +
-          '<span class="sec-group-title">' + escHtml(group.title) + '</span>' +
-          '<span class="sec-group-count">' + group.items.length + '</span>';
-        section.appendChild(header);
-
-        if (group.hint) {
-          var hintEl = document.createElement('div');
-          hintEl.className = 'sec-hint';
-          hintEl.textContent = group.hint;
-          section.appendChild(hintEl);
-        }
-
-        var list = document.createElement('div');
-        list.className = 'sec-items';
-        for (var ii = 0; ii < group.items.length; ii++) {
-          var sf2 = group.items[ii];
-          var item = sf2.issue;
-          var row = document.createElement('div');
-          row.className = 'sec-item';
-          var aiBadge = '';
-          if (sf2.state === 'fixing' && sf2.aiStatus === 'fixed') {
-            aiBadge = '<span class="sec-ai-badge sec-ai-fixing">AI fixed \u2014 awaiting verification</span>';
-          } else if (sf2.aiStatus === 'wont_fix') {
-            aiBadge = '<span class="sec-ai-badge sec-ai-wontfix">AI: won\u2019t fix</span>';
-          } else if (sf2.state === 'regressed') {
-            aiBadge = '<span class="sec-ai-badge sec-ai-fixing" style="background:var(--red)">regressed</span>';
-          }
-          var aiNotes = sf2.aiNotes ? '<div class="sec-ai-notes">' + escHtml(sf2.aiNotes) + '</div>' : '';
-          var occBadge = sf2.occurrences > 1 ? '<span class="sec-item-count">' + sf2.occurrences + 'x</span>' : '';
-          row.innerHTML =
-            '<div class="sec-item-desc">' + escHtml(item.desc) + '</div>' +
-            occBadge +
-            aiBadge + aiNotes;
-          list.appendChild(row);
-        }
-        section.appendChild(list);
-        container.appendChild(section);
-      }
-    }
-
-    if (resolved.length > 0) {
-      var resolvedTitle = document.createElement('div');
-      resolvedTitle.className = 'sec-resolved-title';
-      resolvedTitle.innerHTML = '<span class="sec-resolved-check">\u2713</span> Resolved <span class="sec-resolved-count">' + resolved.length + '</span>';
-      container.appendChild(resolvedTitle);
-
-      var resolvedGroup = document.createElement('div');
-      resolvedGroup.className = 'sec-group sec-group-resolved';
-      var resolvedItems = document.createElement('div');
-      resolvedItems.className = 'sec-items';
-      for (var ri = 0; ri < resolved.length; ri++) {
-        var rsf = resolved[ri];
-        var rf = rsf.issue;
-        var rRow = document.createElement('div');
-        rRow.className = 'sec-item sec-item-resolved';
-        var verifiedBadge = rsf.aiStatus === 'fixed' ? '<span class="sec-ai-badge sec-ai-verified">Verified fix</span>' : '';
-        var rNotes = rsf.aiNotes ? '<div class="sec-ai-notes">' + escHtml(rsf.aiNotes) + '</div>' : '';
-        rRow.innerHTML =
-          '<span class="sec-resolved-item-icon">\u2713</span>' +
-          '<div class="sec-item-desc">' + escHtml(rf.title) + ' \u2014 ' + escHtml(rf.endpoint || 'global') + '</div>' +
-          verifiedBadge + rNotes;
-        resolvedItems.appendChild(rRow);
-      }
-      resolvedGroup.appendChild(resolvedItems);
-      container.appendChild(resolvedGroup);
-    }
-
-    if (stale.length > 0) {
-      var staleTitle = document.createElement('div');
-      staleTitle.className = 'sec-resolved-title';
-      staleTitle.innerHTML = '<span style="color:var(--text-muted)">\u23F8</span> Stale <span class="sec-resolved-count">' + stale.length + '</span>';
-      container.appendChild(staleTitle);
-
-      var staleGroup = document.createElement('div');
-      staleGroup.className = 'sec-group sec-group-resolved';
-      var staleItems = document.createElement('div');
-      staleItems.className = 'sec-items';
-      for (var sti = 0; sti < stale.length; sti++) {
-        var ssf = stale[sti];
-        var sf3 = ssf.issue;
-        var sRow = document.createElement('div');
-        sRow.className = 'sec-item sec-item-resolved';
-        sRow.innerHTML =
-          '<span style="color:var(--text-muted)">\u23F8</span>' +
-          '<div class="sec-item-desc" style="color:var(--text-muted)">' + escHtml(sf3.title) + ' \u2014 endpoint inactive</div>';
-        staleItems.appendChild(sRow);
-      }
-      staleGroup.appendChild(staleItems);
-      container.appendChild(staleGroup);
-    }
-  }
-  
-  
-  var VIEW_CONTAINERS = {
-  overview: 'overview-container',
-  actions: 'flow-container',
-  requests: 'request-container',
-  fetches: 'fetch-container',
-  queries: 'query-container',
-  errors: 'error-container',
-  logs: 'log-container',
-  performance: 'performance-container',
-  security: 'security-container'
-};
-  var VIEW_TITLES = {
-  overview: 'Overview',
-  actions: 'Actions',
-  requests: 'Requests',
-  fetches: 'Server Fetches',
-  queries: 'Queries',
-  errors: 'Errors',
-  logs: 'Logs',
-  performance: 'Performance',
-  security: 'Security'
-};
-  var VIEW_SUBTITLES = {
-  overview: 'Live summary of your application',
-  actions: 'User actions captured as sequences of HTTP requests',
-  requests: 'All HTTP requests proxied through brakit',
-  fetches: 'Outbound HTTP calls made by your server to external services',
-  queries: 'Database queries executed during request handling',
-  errors: 'Unhandled exceptions and errors thrown by your application',
-  logs: 'Console output from your application',
-  performance: 'Endpoint health and response time trends',
-  security: 'Security findings and recommendations'
-};
-
-  async function init() {
-    try {
-      var res = await fetch('/__brakit/api/flows');
-      var data = await res.json();
-      state.flows = data.flows;
-      renderFlows();
-    } catch(e) { console.error('Failed to load flows', e); }
-
-    try {
-      var res2 = await fetch('/__brakit/api/requests');
-      var data2 = await res2.json();
-      state.requests = data2.requests;
-      renderRequests();
-    } catch(e) { console.warn('[brakit]', e); }
-
-    await Promise.all([loadFetches(), loadErrors(), loadLogs(), loadQueries(), loadMetrics()]);
-
-    try {
-      var res3 = await fetch('/__brakit/api/insights');
-      var data3 = await res3.json();
-      state.issues = data3.issues || [];
-    } catch(e) { console.warn('[brakit]', e); }
-
-    updateStats();
-    renderOverview();
-
-    var events = new EventSource('/__brakit/api/events');
-    var reloadTimer = null;
-    var perfReloadTimer = null;
-    events.onmessage = function(e) {
-      var req = JSON.parse(e.data);
-      if (req.path && req.path.startsWith('/__brakit')) return;
-      state.requests.unshift(req);
-      if (state.requests.length > 1000) state.requests.pop();
-      clearTimeout(reloadTimer);
-      reloadTimer = setTimeout(reloadFlows, 300);
-      prependRequestRow(req);
-      updateStats();
-      if (state.activeView === 'performance') {
-        clearTimeout(perfReloadTimer);
-        perfReloadTimer = setTimeout(loadMetrics, 500);
-      }
-    };
-
-    function registerTelemetryListener(eventName, stateKey, prependFn) {
-      events.addEventListener(eventName, function(e) {
-        var item = JSON.parse(e.data);
-        state[stateKey].unshift(item);
-        if (state[stateKey].length > 1000) state[stateKey].pop();
-        prependFn(item);
-        updateStats();
-        if (item.parentRequestId) { invalidateTimelineCache(item.parentRequestId); refreshVisibleTimeline(item.parentRequestId); }
-      });
-    }
-    registerTelemetryListener('fetch', 'fetches', prependFetchRow);
-    registerTelemetryListener('log', 'logs', prependLogRow);
-    registerTelemetryListener('error_event', 'errors', prependErrorRow);
-    registerTelemetryListener('query', 'queries', prependQueryRow);
-
-    events.addEventListener('issues', function(e) {
-      state.issues = JSON.parse(e.data);
-      if (state.activeView === 'overview') renderOverview();
-      if (state.activeView === 'security') renderSecurity();
-      updateStats();
-    });
-
-    window.addEventListener('beforeunload', function() {
-      events.close();
-      clearTimeout(reloadTimer);
-      clearTimeout(perfReloadTimer);
-    });
-  }
-
-  async function reloadFlows() {
-    try {
-      var res = await fetch('/__brakit/api/flows');
-      var data = await res.json();
-      state.flows = data.flows;
-      renderFlows();
-      updateStats();
-    } catch(e) { console.warn('[brakit]', e); }
-  }
-
-  function switchView(view) {
-    Object.keys(VIEW_CONTAINERS).forEach(function(v) {
-      var el = document.getElementById(VIEW_CONTAINERS[v]);
-      if (el) el.style.display = v === view ? 'block' : 'none';
-    });
-  }
-
-  var sidebarItems = document.querySelectorAll('.sidebar-item:not(.disabled)');
-  sidebarItems.forEach(function(item) {
-    item.addEventListener('click', function() {
-      var view = item.getAttribute('data-view');
-      if (!view || view === state.activeView) return;
-      sidebarItems.forEach(function(i) { i.classList.remove('active'); });
-      item.classList.add('active');
-      state.activeView = view;
-      fetch('/__brakit/api/tab?tab=' + encodeURIComponent(view)).catch(function(){});
-      document.getElementById('header-title').textContent = VIEW_TITLES[view] || view;
-      document.getElementById('header-sub').textContent = VIEW_SUBTITLES[view] || '';
-      document.getElementById('mode-toggle').style.display = view === 'actions' ? 'flex' : 'none';
-      if (view === 'overview') renderOverview();
-      if (view === 'security') renderSecurity();
-      if (view === 'performance') loadMetrics();
-      switchView(view);
-    });
-  });
-
-  document.getElementById('mode-simple').addEventListener('click', function() {
-    state.viewMode = 'simple';
-    document.getElementById('mode-simple').classList.add('active');
-    document.getElementById('mode-detailed').classList.remove('active');
-    collapseAll('.flow-row', '.flow-expand');
-  });
-  document.getElementById('mode-detailed').addEventListener('click', function() {
-    state.viewMode = 'detailed';
-    document.getElementById('mode-detailed').classList.add('active');
-    document.getElementById('mode-simple').classList.remove('active');
-    collapseAll('.flow-row', '.flow-expand');
-  });
-
-  function updateStats() {
-    var reqs = state.requests.filter(function(r) { return !r.path || !r.path.startsWith('/__brakit'); });
-    var errors = reqs.filter(function(r) { return r.statusCode >= 400; }).length;
-    var avg = reqs.length > 0 ? Math.round(reqs.reduce(function(s,r) { return s + r.durationMs; }, 0) / reqs.length) : 0;
-    document.getElementById('stat-total').textContent = reqs.length + ' request' + (reqs.length !== 1 ? 's' : '');
-    document.getElementById('stat-flows').textContent = state.flows.length + ' action' + (state.flows.length !== 1 ? 's' : '');
-    document.getElementById('stat-errors').textContent = errors + ' error' + (errors !== 1 ? 's' : '');
-    document.getElementById('stat-avg').textContent = 'Avg: ' + avg + 'ms';
-    var actionCount = document.getElementById('sidebar-count-actions');
-    var requestCount = document.getElementById('sidebar-count-requests');
-    var fetchCount = document.getElementById('sidebar-count-fetches');
-    var errorCount = document.getElementById('sidebar-count-errors');
-    var logCount = document.getElementById('sidebar-count-logs');
-    var queryCount = document.getElementById('sidebar-count-queries');
-    if (actionCount) actionCount.textContent = state.flows.length;
-    if (requestCount) requestCount.textContent = reqs.length;
-    if (fetchCount) fetchCount.textContent = state.fetches.length;
-    if (errorCount) errorCount.textContent = state.errors.length;
-    if (logCount) logCount.textContent = state.logs.length;
-    if (queryCount) queryCount.textContent = state.queries.length;
-    var secCount = document.getElementById('sidebar-count-security');
-    if (secCount) {
-      var numIssues = (state.issues || []).filter(function(f) { return f.state !== 'resolved' && f.state !== 'stale'; }).length;
-      secCount.textContent = numIssues;
-      secCount.style.display = numIssues > 0 ? '' : 'none';
-    }
-  }
-
-  function copyAsCurl(req) {
-    var headers = Object.entries(req.headers || {})
-      .filter(function(e) { return ['host', 'connection', 'accept-encoding'].indexOf(e[0]) === -1; })
-      .map(function(e) { return "-H '" + e[0] + ": " + e[1] + "'"; })
-      .join(' ');
-    var body = req.requestBody ? " -d '" + req.requestBody.replace(/'/g, "'\\''") + "'" : '';
-    var curl = "curl -X " + req.method + " " + headers + body + " 'http://localhost:" + PORT + req.url + "'";
-    navigator.clipboard.writeText(curl).then(function() { showToast('Copied cURL command'); });
-  }
-
-  document.getElementById('clear-btn').addEventListener('click', async function() {
-    if (!confirm('This will clear all data including performance metrics history. Continue?')) return;
-    await fetch('/__brakit/api/clear', {method: 'POST'});
-    state.flows = []; state.requests = []; state.fetches = []; state.errors = []; state.logs = []; state.queries = [];
-    state.issues = [];
-    graphData = []; selectedEndpoint = '__all__'; timelineCache = {};
-    renderFlows(); renderRequests(); renderFetches(); renderErrors(); renderLogs(); renderQueries(); renderGraph(); renderOverview(); renderSecurity(); updateStats();
-    showToast('Cleared');
-  });
-
-  init();
-  
-})();
-</script>
+      <div class="tl-events">${this.renderTimeline(t.timeline,s)}</div>
+    `}renderTimeline(t,s){let r=new Map,o=[];for(let l of t){let c=l.type==="query"?l.data.parentFetchId:void 0;if(l.type==="query"&&c){let p=r.get(c);p||(p=[],r.set(c,p)),p.push(l);}else o.push(l);}let n=0;return o.map(l=>{let c=n++,p=l.type==="fetch"?l.data.fetchId:void 0,h=p?r.get(p):void 0;if(h&&h.length>0){let m=h.length;return a`
+          ${this.renderEvent(l,c,s)}
+          <div class="tl-nested">
+            <span class="tl-nested-label">${m} nested quer${m===1?"y":"ies"}</span>
+            ${h.map(b=>{let $=n++;return this.renderEvent(b,$,s,true)})}
+          </div>
+        `}return this.renderEvent(l,c,s)})}renderEvent(t,s,r,o=false){let n=ts[t.type]||"var(--text-dim)",l=es[t.type]||t.type,c="+"+v(Math.round(t.timestamp-r)),p=t.type==="query"?t.data.sql:void 0,h=!!p,m=this.expandedSqlIdx===s;return a`
+      <div class="tl-event ${h?"tl-clickable":""} ${o?"tl-nested-event":""}"
+        style="${h?"":`border-left-color:${n}`}"
+        @click=${h?b=>this.toggleSql(s,b):d}>
+        <span class="tl-event-time">${c}</span>
+        <span class="tl-event-type" style="color:${n}">${l}</span>
+        ${this.renderEventContent(t)}
+        ${p?a`
+          <div class="tl-event-sql ${m?"open":""}">
+            <button class="tl-sql-copy" @click=${b=>this.copySql(p,b)}>Copy</button>
+            ${p}
+          </div>`:d}
+      </div>
+    `}renderEventContent(t){switch(t.type){case "fetch":{let s=t.data,r=s.statusCode>=400;return a`
+          <span class="tl-event-summary">${s.method} ${s.url}</span>
+          <span class="tl-event-status" style="${r?"color:var(--red)":""}">${s.statusCode}</span>
+          <span class="tl-event-dur">${v(s.durationMs)}</span>
+        `}case "query":{let s=t.data,r=(s.normalizedOp||s.operation||"?").toUpperCase(),o=s.table||s.model||"",n=Ft[r]||"var(--text-dim)";return a`
+          <span class="tl-event-summary"><span style="color:${n};font-weight:600">${r}</span> ${o}</span>
+          <span class="tl-event-dur">${_r(s.durationMs)}</span>
+        `}case "log":{let s=t.data,r=Ke[s.level]||"var(--text-dim)";return a`<span class="tl-event-summary"><span style="color:${r}">${s.level.toUpperCase()}</span> ${s.message}</span>`}case "error":{let s=t.data;return a`<span class="tl-event-summary" style="color:var(--red)">${s.name}: ${s.message}</span>`}default:return d}}};w.cache=new Map,u([R({context:x})],w.prototype,"store",2),u([T({attribute:"request-id"})],w.prototype,"requestId",2),u([T({attribute:"request-started",type:Number})],w.prototype,"requestStarted",2),u([_()],w.prototype,"data",2),u([_()],w.prototype,"loading",2),u([_()],w.prototype,"failed",2),u([_()],w.prototype,"expandedSqlIdx",2),w=u([g("bk-timeline-panel")],w);var Wt=class{constructor(e,t){this.host=e;this.store=t;this.retryCount=0;e.addController(this);}hostConnected(){this.connect();}hostDisconnected(){this.eventSource?.close(),clearTimeout(this.reloadTimer),clearTimeout(this.perfReloadTimer),clearTimeout(this.reconnectTimer);}connect(){this.eventSource?.close(),this.eventSource=new EventSource(y.events),this.eventSource.onopen=()=>{this.retryCount=0;},this.eventSource.onerror=()=>{this.eventSource?.close(),this.scheduleReconnect();},this.eventSource.onmessage=e=>{let t=JSON.parse(e.data);t.path?.startsWith(k)||(this.store.prependRequest(t),clearTimeout(this.reloadTimer),this.reloadTimer=setTimeout(()=>this.reloadFlows(),300),this.store.state.activeView==="performance"&&(clearTimeout(this.perfReloadTimer),this.perfReloadTimer=setTimeout(()=>this.reloadMetrics(),ue)));},this.eventSource.addEventListener(ee,e=>{this.store.prependFetch(JSON.parse(e.data));}),this.eventSource.addEventListener("log",e=>{this.store.prependLog(JSON.parse(e.data));}),this.eventSource.addEventListener(se,e=>{this.store.prependError(JSON.parse(e.data));}),this.eventSource.addEventListener(re,e=>{this.store.prependQuery(JSON.parse(e.data));}),this.eventSource.addEventListener(oe,e=>{this.store.setIssues(JSON.parse(e.data));});}scheduleReconnect(){if(this.retryCount>=10)return;let e=Math.min(1e3*2**this.retryCount,3e4);this.retryCount++,this.reconnectTimer=setTimeout(()=>this.connect(),e);}async reloadFlows(){try{let t=await(await fetch(y.flows)).json();this.store.setFlows(t.flows);}catch{}}async reloadMetrics(){try{let t=await(await fetch(y.metricsLive)).json();this.store.setMetrics(t.endpoints||[]);}catch{}}};function gs(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>`}function bs(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`}function Es(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>`}function _s(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>`}function Ss(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`}function $s(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`}function ys(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`}function Ts(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`}function xs(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>`}var X=class extends f{constructor(){super(...arguments);this.store=new Gt;this.activeView="overview";this.viewMode="simple";this.sse=new Wt(this,this.store);}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.loadInitialData(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}async loadInitialData(){try{let[t,s]=await Promise.all([fetch(y.flows),fetch(y.requests)]),[r,o]=await Promise.all([t.json(),s.json()]);this.store.setFlows(r.flows),this.store.setRequests(o.requests);}catch(t){console.warn("[brakit]",t);}try{let[t,s,r,o,n]=await Promise.all([fetch(y.fetches),fetch(y.errors),fetch(y.logs),fetch(y.queries),fetch(y.metricsLive)]),[l,c,p,h,m]=await Promise.all([t.json(),s.json(),r.json(),o.json(),n.json()]);this.store.setFetches(l.entries),this.store.setErrors(c.entries),this.store.setLogs(p.entries),this.store.setQueries(h.entries),this.store.setMetrics(m.endpoints||[]);}catch(t){console.warn("[brakit]",t);}try{let s=await(await fetch(y.insights)).json();this.store.setIssues(s.issues||[]);}catch(t){console.warn("[brakit]",t);}}switchView(t){t!==this.activeView&&(this.activeView=t,this.store.setActiveView(t),fetch(`${y.tab}?tab=${encodeURIComponent(t)}`).catch(()=>{}),t==="performance"&&this.sse.reloadMetrics());}async handleClear(){confirm("This will clear all data including performance metrics history. Continue?")&&(await fetch(y.clear,{method:"POST"}),this.store.clearAll(),C.show("Cleared"));}handleCopyAsCurl(t){ct(t);}render(){let t=this.store.state,s=t.requests.filter(c=>!c.path?.startsWith(k)),r=s.filter(c=>c.statusCode>=400).length,o=s.length>0?Math.round(s.reduce((c,p)=>c+p.durationMs,0)/s.length):0,n=(t.issues||[]).filter(c=>c.state!=="resolved"&&c.state!=="stale").length,l=window.__BRAKIT_CONFIG__;return a`
+      <div class="app" id="app">
+        <aside class="sidebar">
+          <div class="sidebar-logo">
+            <span class="logo-text">brakit</span>
+            <span class="logo-version">v${l?.version??""}</span>
+          </div>
+          <nav class="sidebar-nav">
+            ${this.renderSidebarItem("overview","Overview",gs(),void 0)}
+            <div class="sidebar-section">Monitor</div>
+            ${this.renderSidebarItem("actions","Actions",bs(),t.flows.length)}
+            ${this.renderSidebarItem("requests","Requests",Es(),s.length)}
+            ${this.renderSidebarItem("fetches","Fetches",_s(),t.fetches.length)}
+            <div class="sidebar-section">Insights</div>
+            ${this.renderSidebarItem("queries","Queries",Ss(),t.queries.length)}
+            ${this.renderSidebarItem("errors","Errors",$s(),t.errors.length)}
+            ${this.renderSidebarItem("logs","Logs",ys(),t.logs.length)}
+            ${this.renderSidebarItem("security","Security",Ts(),n,n===0)}
+            ${this.renderSidebarItem("performance","Performance",xs(),void 0)}
+          </nav>
+          <div class="sidebar-footer">:${l?.port??""}</div>
+        </aside>
+        <div class="main-panel">
+          <div class="header">
+            <div class="header-left">
+              <span class="header-title" id="header-title">${ie[this.activeView]||this.activeView}</span>
+              <span class="header-sub" id="header-sub">${ne[this.activeView]||""}</span>
+            </div>
+            <div class="header-right">
+              ${this.activeView==="actions"?a`
+                <div class="segmented-control" id="mode-toggle">
+                  <button class="segmented-btn ${this.viewMode==="simple"?"active":""}" @click=${()=>{this.viewMode="simple",this.store.setViewMode("simple");}}>Quick</button>
+                  <button class="segmented-btn ${this.viewMode==="detailed"?"active":""}" @click=${()=>{this.viewMode="detailed",this.store.setViewMode("detailed");}}>Detailed</button>
+                </div>
+              `:d}
+              <button class="btn btn-danger" @click=${this.handleClear}>Clear</button>
+            </div>
+          </div>
+          <div class="main-content">
+            <div id="overview-container" style="display:${this.activeView==="overview"?"block":"none"}">
+              <bk-overview-view></bk-overview-view>
+            </div>
+            <div class="view-flows" id="flow-container" style="display:${this.activeView==="actions"?"block":"none"}">
+              <bk-flows-view></bk-flows-view>
+            </div>
+            <div class="view-requests" id="request-container" style="display:${this.activeView==="requests"?"block":"none"}">
+              <bk-requests-view></bk-requests-view>
+            </div>
+            <div class="view-telemetry" id="fetch-container" style="display:${this.activeView==="fetches"?"block":"none"}">
+              <bk-fetches-view></bk-fetches-view>
+            </div>
+            <div class="view-telemetry" id="query-container" style="display:${this.activeView==="queries"?"block":"none"}">
+              <bk-queries-view></bk-queries-view>
+            </div>
+            <div class="view-telemetry" id="error-container" style="display:${this.activeView==="errors"?"block":"none"}">
+              <bk-errors-view></bk-errors-view>
+            </div>
+            <div class="view-telemetry" id="log-container" style="display:${this.activeView==="logs"?"block":"none"}">
+              <bk-logs-view></bk-logs-view>
+            </div>
+            <div class="view-telemetry" id="security-container" style="display:${this.activeView==="security"?"block":"none"}">
+              <bk-security-view></bk-security-view>
+            </div>
+            <div class="view-telemetry" id="performance-container" style="display:${this.activeView==="performance"?"block":"none"}">
+              <bk-performance-view></bk-performance-view>
+            </div>
+          </div>
+          <div class="footer">
+            <span id="stat-total">${s.length} request${s.length!==1?"s":""}</span>
+            <span id="stat-flows">${t.flows.length} action${t.flows.length!==1?"s":""}</span>
+            <span id="stat-errors" class="error-count">${r} error${r!==1?"s":""}</span>
+            <span id="stat-avg">Avg: ${o}ms</span>
+          </div>
+        </div>
+      </div>
+      <bk-toast></bk-toast>
+    `}renderSidebarItem(t,s,r,o,n=false){return a`
+      <button class="sidebar-item ${this.activeView===t?"active":""}" @click=${()=>this.switchView(t)}>
+        <span class="item-icon">${r}</span>
+        <span class="item-label">${s}</span>
+        ${o!==void 0?a`<span class="item-count" style="display:${n?"none":""}">${o}</span>`:d}
+      </button>
+    `}};u([be({context:x})],X.prototype,"store",2),u([_()],X.prototype,"activeView",2),u([_()],X.prototype,"viewMode",2),X=u([g("bk-dashboard")],X);
+/*! Bundled license information:
+
+@lit/reactive-element/css-tag.js:
+  (**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/reactive-element.js:
+lit-html/lit-html.js:
+lit-element/lit-element.js:
+@lit/reactive-element/decorators/custom-element.js:
+@lit/reactive-element/decorators/property.js:
+@lit/reactive-element/decorators/state.js:
+@lit/reactive-element/decorators/event-options.js:
+@lit/reactive-element/decorators/base.js:
+@lit/reactive-element/decorators/query.js:
+@lit/reactive-element/decorators/query-all.js:
+@lit/reactive-element/decorators/query-async.js:
+@lit/reactive-element/decorators/query-assigned-nodes.js:
+@lit/context/lib/decorators/provide.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/is-server.js:
+@lit/context/lib/decorators/consume.js:
+  (**
+   * @license
+   * Copyright 2022 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/decorators/query-assigned-elements.js:
+@lit/context/lib/context-request-event.js:
+@lit/context/lib/create-context.js:
+@lit/context/lib/controllers/context-consumer.js:
+@lit/context/lib/value-notifier.js:
+@lit/context/lib/controllers/context-provider.js:
+@lit/context/lib/context-root.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/})();</script>
 </body>
 </html>