brakit 0.8.5 → 0.8.7

package/dist/dashboard.html

@@ -94,6 +94,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)}
@@ -267,17 +272,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)}
@@ -438,9 +449,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,2188 +475,905 @@ 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 $s=Object.defineProperty;var ys=Object.getOwnPropertyDescriptor;var u=(o,e,t,s)=>{for(var r=s>1?void 0:s?ys(e,t):e,i=o.length-1,a;i>=0;i--)(a=o[i])&&(r=(s?a(e,t,r):a(r))||r);return s&&r&&$s(e,t,r),r};var Mt=globalThis,Dt=Mt.ShadowRoot&&(Mt.ShadyCSS===void 0||Mt.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Re=Symbol(),Te=new WeakMap,Ot=class{constructor(e,t,s){if(this._$cssResult$=true,s!==Re)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(Dt&&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}},we=o=>new Ot(typeof o=="string"?o:o+"",void 0,Re);var Ce=(o,e)=>{if(Dt)o.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,o.appendChild(s);}},zt=Dt?o=>o:o=>o instanceof CSSStyleSheet?(e=>{let t="";for(let s of e.cssRules)t+=s.cssText;return we(t)})(o):o;var{is:Ss,defineProperty:_s,getOwnPropertyDescriptor:xs,getOwnPropertyNames:Ts,getOwnPropertySymbols:Rs,getPrototypeOf:ws}=Object,D=globalThis,Ae=D.trustedTypes,Cs=Ae?Ae.emptyScript:"",As=D.reactiveElementPolyfillSupport,vt=(o,e)=>o,ft={toAttribute(o,e){switch(e){case Boolean:o=o?Cs:null;break;case Object:case Array:o=o==null?o:JSON.stringify(o);}return o},fromAttribute(o,e){let t=o;switch(e){case Boolean:t=o!==null;break;case Number:t=o===null?null:Number(o);break;case Object:case Array:try{t=JSON.parse(o);}catch{t=null;}}return t}},Nt=(o,e)=>!Ss(o,e),ke={attribute:true,type:String,converter:ft,reflect:false,useDefault:false,hasChanged:Nt};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),D.litPropertyMetadata??(D.litPropertyMetadata=new WeakMap);var M=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=ke){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&&_s(this.prototype,e,r);}}static getPropertyDescriptor(e,t,s){let{get:r,set:i}=xs(this.prototype,e)??{get(){return this[t]},set(a){this[t]=a;}};return {get:r,set(a){let c=r?.call(this);i?.call(this,a),this.requestUpdate(e,c,s);},configurable:true,enumerable:true}}static getPropertyOptions(e){return this.elementProperties.get(e)??ke}static _$Ei(){if(this.hasOwnProperty(vt("elementProperties")))return;let e=ws(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties);}static finalize(){if(this.hasOwnProperty(vt("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(vt("properties"))){let t=this.properties,s=[...Ts(t),...Rs(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(zt(r));}else e!==void 0&&t.push(zt(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 Ce(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 i=(s.converter?.toAttribute!==void 0?s.converter:ft).toAttribute(t,s.type);this._$Em=e,i==null?this.removeAttribute(r):this.setAttribute(r,i),this._$Em=null;}}_$AK(e,t){let s=this.constructor,r=s._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let i=s.getPropertyOptions(r),a=typeof i.converter=="function"?{fromAttribute:i.converter}:i.converter?.fromAttribute!==void 0?i.converter:ft;this._$Em=r;let c=a.fromAttribute(t,i.type);this[r]=c??this._$Ej?.get(r)??c,this._$Em=null;}}requestUpdate(e,t,s,r=false,i){if(e!==void 0){let a=this.constructor;if(r===false&&(i=this[e]),s??(s=a.getPropertyOptions(e)),!((s.hasChanged??Nt)(i,t)||s.useDefault&&s.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(a._$Eu(e,s))))return;this.C(e,t,s);}this.isUpdatePending===false&&(this._$ES=this._$EP());}C(e,t,{useDefault:s,reflect:r,wrapped:i},a){s&&!(this._$Ej??(this._$Ej=new Map)).has(e)&&(this._$Ej.set(e,a??t??this[e]),i!==true||a!==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,i]of this._$Ep)this[r]=i;this._$Ep=void 0;}let s=this.constructor.elementProperties;if(s.size>0)for(let[r,i]of s){let{wrapped:a}=i,c=this[r];a!==true||this._$AL.has(r)||c===void 0||this.C(r,void 0,i,c);}}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){}};M.elementStyles=[],M.shadowRootOptions={mode:"open"},M[vt("elementProperties")]=new Map,M[vt("finalized")]=new Map,As?.({ReactiveElement:M}),(D.reactiveElementVersions??(D.reactiveElementVersions=[])).push("2.1.2");var bt=globalThis,Le=o=>o,qt=bt.trustedTypes,Ie=qt?qt.createPolicy("lit-html",{createHTML:o=>o}):void 0,He="$lit$",N=`lit$${Math.random().toFixed(9).slice(2)}$`,Pe="?"+N,ks=`<${Pe}>`,j=document,Et=()=>j.createComment(""),$t=o=>o===null||typeof o!="object"&&typeof o!="function",ie=Array.isArray,Ls=o=>ie(o)||typeof o?.[Symbol.iterator]=="function",Jt=`[ 	
+\f\r]`,gt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Me=/-->/g,Oe=/>/g,B=RegExp(`>|${Jt}(?:([^\\s"'>=/]+)(${Jt}*=${Jt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),De=/'/g,Ne=/"/g,Ue=/^(?:script|style|textarea|title)$/i,oe=o=>(e,...t)=>({_$litType$:o,strings:e,values:t}),n=oe(1),Q=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),qe=new WeakMap,G=j.createTreeWalker(j,129);function Fe(o,e){if(!ie(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return Ie!==void 0?Ie.createHTML(e):e}var Is=(o,e)=>{let t=o.length-1,s=[],r,i=e===2?"<svg>":e===3?"<math>":"",a=gt;for(let c=0;c<t;c++){let l=o[c],h,m,p=-1,v=0;for(;v<l.length&&(a.lastIndex=v,m=a.exec(l),m!==null);)v=a.lastIndex,a===gt?m[1]==="!--"?a=Me:m[1]!==void 0?a=Oe:m[2]!==void 0?(Ue.test(m[2])&&(r=RegExp("</"+m[2],"g")),a=B):m[3]!==void 0&&(a=B):a===B?m[0]===">"?(a=r??gt,p=-1):m[1]===void 0?p=-2:(p=a.lastIndex-m[2].length,h=m[1],a=m[3]===void 0?B:m[3]==='"'?Ne:De):a===Ne||a===De?a=B:a===Me||a===Oe?a=gt:(a=B,r=void 0);let E=a===B&&o[c+1].startsWith("/>")?" ":"";i+=a===gt?l+ks:p>=0?(s.push(h),l.slice(0,p)+He+l.slice(p)+N+E):l+N+(p===-2?c:E);}return [Fe(o,i+(o[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),s]},yt=class o{constructor({strings:e,_$litType$:t},s){let r;this.parts=[];let i=0,a=0,c=e.length-1,l=this.parts,[h,m]=Is(e,t);if(this.el=o.createElement(h,s),G.currentNode=this.el.content,t===2||t===3){let p=this.el.content.firstChild;p.replaceWith(...p.childNodes);}for(;(r=G.nextNode())!==null&&l.length<c;){if(r.nodeType===1){if(r.hasAttributes())for(let p of r.getAttributeNames())if(p.endsWith(He)){let v=m[a++],E=r.getAttribute(p).split(N),C=/([.?@])?(.*)/.exec(v);l.push({type:1,index:i,name:C[2],strings:E,ctor:C[1]==="."?te:C[1]==="?"?ee:C[1]==="@"?se:st}),r.removeAttribute(p);}else p.startsWith(N)&&(l.push({type:6,index:i}),r.removeAttribute(p));if(Ue.test(r.tagName)){let p=r.textContent.split(N),v=p.length-1;if(v>0){r.textContent=qt?qt.emptyScript:"";for(let E=0;E<v;E++)r.append(p[E],Et()),G.nextNode(),l.push({type:2,index:++i});r.append(p[v],Et());}}}else if(r.nodeType===8)if(r.data===Pe)l.push({type:2,index:i});else {let p=-1;for(;(p=r.data.indexOf(N,p+1))!==-1;)l.push({type:7,index:i}),p+=N.length-1;}i++;}}static createElement(e,t){let s=j.createElement("template");return s.innerHTML=e,s}};function et(o,e,t=o,s){if(e===Q)return e;let r=s!==void 0?t._$Co?.[s]:t._$Cl,i=$t(e)?void 0:e._$litDirective$;return r?.constructor!==i&&(r?._$AO?.(false),i===void 0?r=void 0:(r=new i(o),r._$AT(o,t,s)),s!==void 0?(t._$Co??(t._$Co=[]))[s]=r:t._$Cl=r),r!==void 0&&(e=et(o,r._$AS(o,e.values),r,s)),e}var Zt=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??j).importNode(t,true);G.currentNode=r;let i=G.nextNode(),a=0,c=0,l=s[0];for(;l!==void 0;){if(a===l.index){let h;l.type===2?h=new St(i,i.nextSibling,this,e):l.type===1?h=new l.ctor(i,l.name,l.strings,this,e):l.type===6&&(h=new re(i,this,e)),this._$AV.push(h),l=s[++c];}a!==l?.index&&(i=G.nextNode(),a++);}return G.currentNode=j,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++;}},St=class o{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=et(this,e,t),$t(e)?e===d||e==null||e===""?(this._$AH!==d&&this._$AR(),this._$AH=d):e!==this._$AH&&e!==Q&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Ls(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&&$t(this._$AH)?this._$AA.nextSibling.data=e:this.T(j.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=yt.createElement(Fe(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===r)this._$AH.p(t);else {let i=new Zt(r,this),a=i.u(this.options);i.p(t),this.T(a),this._$AH=i;}}_$AC(e){let t=qe.get(e.strings);return t===void 0&&qe.set(e.strings,t=new yt(e)),t}k(e){ie(this._$AH)||(this._$AH=[],this._$AR());let t=this._$AH,s,r=0;for(let i of e)r===t.length?t.push(s=new o(this.O(Et()),this.O(Et()),this,this.options)):s=t[r],s._$AI(i),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=Le(e).nextSibling;Le(e).remove(),e=s;}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e));}},st=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,s,r,i){this.type=1,this._$AH=d,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,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 i=this.strings,a=false;if(i===void 0)e=et(this,e,t,0),a=!$t(e)||e!==this._$AH&&e!==Q,a&&(this._$AH=e);else {let c=e,l,h;for(e=i[0],l=0;l<i.length-1;l++)h=et(this,c[s+l],t,l),h===Q&&(h=this._$AH[l]),a||(a=!$t(h)||h!==this._$AH[l]),h===d?e=d:e!==d&&(e+=(h??"")+i[l+1]),this._$AH[l]=h;}a&&!r&&this.j(e);}j(e){e===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"");}},te=class extends st{constructor(){super(...arguments),this.type=3;}j(e){this.element[this.name]=e===d?void 0:e;}},ee=class extends st{constructor(){super(...arguments),this.type=4;}j(e){this.element.toggleAttribute(this.name,!!e&&e!==d);}},se=class extends st{constructor(e,t,s,r,i){super(e,t,s,r,i),this.type=5;}_$AI(e,t=this){if((e=et(this,e,t,0)??d)===Q)return;let s=this._$AH,r=e===d&&s!==d||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,i=e!==d&&(s===d||r);r&&this.element.removeEventListener(this.name,this,s),i&&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);}},re=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){et(this,e);}};var Ms=bt.litHtmlPolyfillSupport;Ms?.(yt,St),(bt.litHtmlVersions??(bt.litHtmlVersions=[])).push("3.3.2");var Be=(o,e,t)=>{let s=t?.renderBefore??e,r=s._$litPart$;if(r===void 0){let i=t?.renderBefore??null;s._$litPart$=r=new St(e.insertBefore(Et(),i),i,void 0,t??{});}return r._$AI(o),r};var _t=globalThis,f=class extends M{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=Be(t,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return Q}};f._$litElement$=true,f.finalized=true,_t.litElementHydrateSupport?.({LitElement:f});var Os=_t.litElementPolyfillSupport;Os?.({LitElement:f});(_t.litElementVersions??(_t.litElementVersions=[])).push("4.2.2");var g=o=>(e,t)=>{t!==void 0?t.addInitializer(()=>{customElements.define(o,e);}):customElements.define(o,e);};var Ds={attribute:true,type:String,converter:ft,reflect:false,hasChanged:Nt},Ns=(o=Ds,e,t)=>{let{kind:s,metadata:r}=t,i=globalThis.litPropertyMetadata.get(r);if(i===void 0&&globalThis.litPropertyMetadata.set(r,i=new Map),s==="setter"&&((o=Object.create(o)).wrapped=true),i.set(t.name,o),s==="accessor"){let{name:a}=t;return {set(c){let l=e.get.call(this);e.set.call(this,c),this.requestUpdate(a,l,o,true,c);},init(c){return c!==void 0&&this.C(a,void 0,o,c),c}}}if(s==="setter"){let{name:a}=t;return function(c){let l=this[a];e.call(this,c),this.requestUpdate(a,l,o,true,c);}}throw Error("Unsupported decorator location: "+s)};function y(o){return (e,t)=>typeof t=="object"?Ns(o,e,t):((s,r,i)=>{let a=r.hasOwnProperty(i);return r.constructor.createProperty(i,s),a?Object.getOwnPropertyDescriptor(r,i):void 0})(o,e,t)}function $(o){return y({...o,state:true,attribute:false})}var xt=class extends f{constructor(){super(...arguments);this.method="";}createRenderRoot(){return this}render(){let t=this.method.toUpperCase();return n`<span class="method-badge method-badge-${t}">${t}</span>`}};u([y()],xt.prototype,"method",2),xt=u([g("bk-method-badge")],xt);var L="/__brakit/api",O="/__brakit",R={flows:`${L}/flows`,requests:`${L}/requests`,events:`${L}/events`,clear:`${L}/clear`,fetches:`${L}/fetches`,errors:`${L}/errors`,logs:`${L}/logs`,queries:`${L}/queries`,metricsLive:`${L}/metrics/live`,insights:`${L}/insights`,tab:`${L}/tab`,activity:`${L}/activity`};var Tt="polling",Pt="static",qs="auth-handshake",Hs="auth-check",Ps="middleware",Ut={[qs]:1,[Hs]:1,[Ps]:1};var ne="fetch";var ae="error_event",ce="query",le="issues";var de={overview:"Overview",queries:"Queries",requests:"Requests",actions:"Actions",errors:"Errors",security:"Security",fetches:"Fetches",logs:"Logs",performance:"Performance"};var Rt={overview:"Overview",actions:"Actions",requests:"Requests",fetches:"Server Fetches",queries:"Queries",errors:"Errors",logs:"Logs",performance:"Performance",security:"Security"},pe={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 he=100,V=300,W=800,me=2e3,ve=100,fe=50,ge=500;var q="__all__",jt={SELECT:"var(--blue)",INSERT:"var(--green)",UPDATE:"var(--amber)",DELETE:"var(--red)",COUNT:"var(--text-muted)"},ze={error:"var(--red)",warn:"var(--amber)",info:"var(--blue)",debug:"var(--text-muted)",log:"var(--text-dim)"},be=["#2563eb","#7c3aed","#16a34a","#d97706","#dc2626","#0891b2","#ea580c","#c026d3","#059669","#db2777"],wt={green:"#4ade80",amber:"#fbbf24",red:"#f87171"},Qt=[{max:he,label:"Fast",color:"var(--green)",bg:"rgba(22,163,74,0.08)",border:"rgba(22,163,74,0.2)"},{max:V,label:"Good",color:"var(--green)",bg:"rgba(22,163,74,0.06)",border:"rgba(22,163,74,0.15)"},{max:W,label:"OK",color:"var(--amber)",bg:"rgba(217,119,6,0.06)",border:"rgba(217,119,6,0.15)"},{max:me,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)"}],Je="rgba(228,228,231,0.8)",Ee="rgba(113,113,122,0.7)",Ze="10px monospace",$e="9px monospace",ts="8px monospace",es={top:16,right:16,bottom:28,left:52},ss={fetch:"var(--blue)",log:"var(--text-muted)",error:"var(--red)",query:"var(--accent)"},rs={fetch:"FETCH",log:"LOG",error:"ERROR",query:"QUERY"},is=new Set(["cookie","set-cookie","authorization","proxy-authorization","x-api-key","x-auth-token"]),os={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"},ns=new Set(["host","connection","accept-encoding"]),H={critical:{icon:"\u2717",cls:"critical",sort:0},warning:{icon:"\u26A0",cls:"warning",sort:1},info:{icon:"\u2139",cls:"info",sort:2}};function S(o){return o<1e3?o+"ms":(o/1e3).toFixed(1)+"s"}function Y(o){return !o||o===0?"":o<1024?o+"b":(o/1024).toFixed(1)+"kb"}function P(o){return o?o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"):""}function rt(o){return o>=500?"status-pill-5xx":o>=400?"status-pill-4xx":o>=300?"status-pill-3xx":"status-pill-2xx"}function as(o){return os[o]||(o>=500?"Server Error":o>=400?"Client Error":"OK")}function Us(o,e){if(is.has(o.toLowerCase())){let t=String(e);return t.length<=8?"****":t.slice(0,4)+"..."+t.slice(-4)+" ("+t.length+" chars)"}return String(e)}function it(o){return !o||Object.keys(o).length===0?'<span style="color:var(--text-muted)">No headers</span>':Object.entries(o).map(([e,t])=>'<span class="json-key">'+P(e)+"</span>: "+P(Us(e,t))).join(`
+`)}function X(o){if(!o)return '<span style="color:var(--text-muted)">No body</span>';try{let e=JSON.parse(o);return Fs(JSON.stringify(e,null,2))}catch{return P(o)}}function Fs(o){return P(o).replace(/("(?:[^"\\]|\\.)*")(\s*:)?|\b(true|false)\b|\bnull\b|(-?\d+\.?\d*(?:[eE][+-]?\d+)?)/g,(e,t,s,r,i)=>t?s?'<span class="json-key">'+t+"</span>"+s:'<span class="json-str">'+t+"</span>":r?'<span class="json-bool">'+e+"</span>":i?'<span class="json-num">'+e+"</span>":e==="null"?'<span class="json-null">null</span>':e)}var Ct=class extends f{constructor(){super(...arguments);this.code=0;}createRenderRoot(){return this}render(){let t=rt(this.code);return n`<span class="status-pill ${t}">${this.code}</span>`}};u([y({type:Number})],Ct.prototype,"code",2),Ct=u([g("bk-status-pill")],Ct);var At=class extends f{constructor(){super(...arguments);this.ms=0;}createRenderRoot(){return this}render(){return n`<span class="req-duration">${S(this.ms)}</span>`}};u([y({type:Number})],At.prototype,"ms",2),At=u([g("bk-duration-label")],At);var ot=class extends f{constructor(){super(...arguments);this.title="";this.subtitle="";}createRenderRoot(){return this}render(){return n`
+      <div class="empty">
+        <span class="empty-title">${this.title}</span>
+        <span class="empty-sub">${this.subtitle}</span>
+      </div>
+    `}};u([y()],ot.prototype,"title",2),u([y()],ot.prototype,"subtitle",2),ot=u([g("bk-empty-state")],ot);var k=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 n`<div class="toast ${this.visible?"show":""}">${this.message}</div>`}};u([$()],k.prototype,"message",2),u([$()],k.prototype,"visible",2),k=u([g("bk-toast")],k);var K=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),k.show(this.toastMessage);}catch{}}render(){return n`<button class="query-detail-copy" @click=${this.copy}>${this.label}</button>`}};u([y()],K.prototype,"text",2),u([y()],K.prototype,"label",2),u([y({attribute:"toast-message"})],K.prototype,"toastMessage",2),K=u([g("bk-copy-button")],K);var z=class extends f{constructor(){super(...arguments);this.value="";this.label="";this.color="";}createRenderRoot(){return this}render(){return n`
+      <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>
-      <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>
+    `}};u([y()],z.prototype,"value",2),u([y()],z.prototype,"label",2),u([y()],z.prototype,"color",2),z=u([g("bk-stat-card")],z);var U=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 nt=class{constructor(e,t,s,r){if(this.subscribe=false,this.provided=false,this.value=void 0,this.t=(i,a)=>{this.unsubscribe&&(this.unsubscribe!==a&&(this.provided=false,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=i,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=true,this.callback&&this.callback(i,a)),this.unsubscribe=a;},this.host=e,t.context!==void 0){let i=t;this.context=i.context,this.callback=i.callback,this.subscribe=i.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 U(this.context,this.host,this.t,this.subscribe));}};var Vt=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 ye=class extends Event{constructor(e,t){super("context-provider",{bubbles:true,composed:true}),this.context=e,this.contextTarget=t;}},at=class extends Vt{constructor(e,t,s){super(t.context!==void 0?t.initialValue:s),this.onContextRequest=r=>{if(r.context!==this.context)return;let i=r.contextTarget??r.composedPath()[0];i!==this.host&&(r.stopPropagation(),this.addCallback(r.callback,i,r.subscribe));},this.onProviderRequest=r=>{if(r.context!==this.context||(r.contextTarget??r.composedPath()[0])===this.host)return;let i=new Set;for(let[a,{consumerHost:c}]of this.subscriptions)i.has(a)||(i.add(a),c.dispatchEvent(new U(this.context,c,a,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 ye(this.context,this.host));}};function Se({context:o}){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 at(this,{context:o,initialValue:r})),r}};{e.constructor.addInitializer((a=>{s.set(a,new at(a,{context:o}));}));let r=Object.getOwnPropertyDescriptor(e,t),i;if(r===void 0){let a=new WeakMap;i={get(){return a.get(this)},set(c){s.get(this).setValue(c),a.set(this,c);},configurable:true,enumerable:true};}else {let a=r.set;i={...r,set(c){s.get(this).setValue(c),a?.call(this,c);}};}return void Object.defineProperty(e,t,i)}}}function T({context:o,subscribe:e}){return (t,s)=>{typeof s=="object"?s.addInitializer((function(){new nt(this,{context:o,callback:r=>{t.set.call(this,r);},subscribe:e});})):t.constructor.addInitializer((r=>{new nt(r,{context:o,callback:i=>{r[s]=i;},subscribe:e});}));}}var _="dashboard-store",Wt=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 ct=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(),i=this.expandedIdx===s;return n`
+      <div
+        class="req-row tel-clickable ${i?"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>
+      ${i&&t.stack?n`<div class="error-stack">${t.stack}</div>`:d}
+    `}render(){let t=this.store.state.errors;return t.length===0?n`<bk-empty-state
+        title="No errors"
+        subtitle="No errors have been captured yet"
+      ></bk-empty-state>`:n`
+      <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([T({context:_})],ct.prototype,"store",2),u([$()],ct.prototype,"expandedIdx",2),ct=u([g("bk-errors-view")],ct);var kt=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 n`
+      <div id="log-analysis">
+        <div class="fetch-summary">
+          <bk-stat-card value=${String(e.length)} label="Total Logs"></bk-stat-card>
+          ${t.error>0?n`<bk-stat-card value=${String(t.error)} label="Errors" color="var(--red)"></bk-stat-card>`:d}
+          ${t.warn>0?n`<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?n`<bk-stat-card value=${String(t.debug)} label="Debug"></bk-stat-card>`:d}
+          ${t.log>0?n`<bk-stat-card value=${String(t.log)} label="Log"></bk-stat-card>`:d}
         </div>
-        <button class="btn btn-danger" id="clear-btn">Clear</button>
       </div>
-    </div>
-    <div class="main-content">
-      <div id="overview-container">
-        <div class="ov-container" id="overview-content"></div>
+    `}renderLogRow(e){let t=new Date(e.timestamp).toLocaleTimeString();return n`
+      <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?n`<bk-empty-state
+        title="No logs"
+        subtitle="No console output has been captured yet"
+      ></bk-empty-state>`:n`
+      ${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 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>
+      <div id="log-list">
+        ${e.map(t=>this.renderLogRow(t))}
+      </div>
+    `}};u([T({context:_})],kt.prototype,"store",2),kt=u([g("bk-logs-view")],kt);var Gs=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 cs(o){let e=o.trim().match(/^(\w+)/);return e?e[1].toUpperCase():"?"}function ls(o){let e=o.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 ds(o){return P(o).replace(/\b\w+\b/g,e=>Gs.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":S(t)}getQueryInfo(t){let s=(t.normalizedOp||t.operation||(t.sql?cs(t.sql):"?")).toUpperCase(),r=t.table||t.model||(t.sql?ls(t.sql):""),i=t.sql||s+" "+r;return {op:s,table:r,sqlText:i}}renderQueryRow(t,s){let{op:r,table:i,sqlText:a}=this.getQueryInfo(t),c=jt[r]||"var(--text-dim)",l=t.durationMs>ve,h=t.sql||r+" "+i,m=this.expandedIdx===s;return n`
+      <div>
+        <div
+          class="req-row query-row tel-clickable ${m?"expanded":""}"
+          @click=${()=>this.toggleQuery(s)}
+        >
+          <span class="query-op" title=${r} style="color:${c}">${r}</span>
+          <span class="query-table" title=${i}>${i}</span>
+          <span class="query-preview" title=${h}>${h}</span>
+          <span class="query-dur${l?" query-slow":""}">${this.queryDuration(t.durationMs)}</span>
+        </div>
+        <div class="query-detail ${m?"open":""}">
+          ${m?n`
+                <pre class="query-detail-sql" .innerHTML=${ds(a)}></pre>
+                <bk-copy-button .text=${a} label="Copy"></bk-copy-button>
+              `:d}
         </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>
+    `}render(){let t=this.store.state.queries;return t.length===0?n`<bk-empty-state
+        title="No queries"
+        subtitle="No database queries have been captured yet"
+      ></bk-empty-state>`:n`
+      <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([T({context:_})],lt.prototype,"store",2),u([$()],lt.prototype,"expandedIdx",2),lt=u([g("bk-queries-view")],lt);function _e(o){return o.replace(/'/g,"'\\''")}function js(o,e){let t=Object.entries(o.headers||{}).filter(([i])=>!ns.has(i)).map(([i,a])=>`-H '${_e(i)}: ${_e(a)}'`).join(" "),s=o.requestBody?` -d '${_e(o.requestBody)}'`:"",r=e?`http://localhost:${e}`:"";return `curl -X ${o.method} ${t}${s} '${r}${o.url}'`}function dt(o){let e=window.__BRAKIT_CONFIG__?.port??"",t=js(o,e);navigator.clipboard.writeText(t).then(()=>k.show("Copied cURL command"));}var pt=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(),dt(t);}renderDetail(t){return n`
+      <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?n`<span>${Y(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=${it(t.headers)}></pre></div>
+        <div class="detail-section"><h4>Response Headers</h4><pre .innerHTML=${it(t.responseHeaders)}></pre></div>
+        <div class="detail-section"><h4>Request Body</h4><pre .innerHTML=${X(t.requestBody)}></pre></div>
+        <div class="detail-section"><h4>Response Body</h4><pre .innerHTML=${X(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 n`
+      <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">${Y(t.responseSize)}</span>
+        </div>
+      </div>
+      <div class="req-detail ${s?"open":""}">${s?this.renderDetail(t):d}</div>
+    `}render(){let t=this.store.state.requests.filter(s=>!s.path?.startsWith(O));return t.length===0?n`<bk-empty-state title="No requests" subtitle="No HTTP requests have been captured yet"></bk-empty-state>`:n`
+      <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([T({context:_})],pt.prototype,"store",2),u([$()],pt.prototype,"expandedId",2),pt=u([g("bk-requests-view")],pt);var Lt=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 i of t)s.set(i.id,i);let r={};for(let i of e){let a=i.method+" "+i.url;r[a]||(r[a]={method:i.method,url:i.url,count:0,totalDur:0,maxDur:0,errors:0,callers:{},statusCodes:{},firstTs:i.timestamp,lastTs:i.timestamp});let c=r[a];if(c.count++,c.totalDur+=i.durationMs,i.durationMs>c.maxDur&&(c.maxDur=i.durationMs),i.statusCode>=400&&c.errors++,c.statusCodes[i.statusCode]=(c.statusCodes[i.statusCode]||0)+1,i.timestamp<c.firstTs&&(c.firstTs=i.timestamp),i.timestamp>c.lastTs&&(c.lastTs=i.timestamp),i.parentRequestId){let l=s.get(i.parentRequestId);l&&(c.callers[l.method+" "+(l.path||l.url)]=1);}}return Object.values(r).sort((i,a)=>a.count-i.count)}renderSummary(e){let t=new Set,s=0,r=0;for(let a of e)t.add(a.url),a.statusCode>=400&&s++,r+=a.durationMs;let i=Math.round(r/e.length);return n`
+      <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=${S(i)} 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),i=Object.entries(e.statusCodes),a=i.length>0?Number(i.sort((c,l)=>l[1]-c[1])[0][0]):0;return n`
+      <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>
+          ${a>0?n`<bk-status-pill .code=${a}></bk-status-pill>`:d}
+          <span class="fetch-group-count">${e.count}x</span>
+        </div>
+        <div class="fetch-group-meta">
+          <span>avg ${S(t)}</span>
+          <span class="fetch-group-sep">\u00b7</span>
+          <span>max ${S(e.maxDur)}</span>
+          <span class="fetch-group-sep">\u00b7</span>
+          ${s>0?n`<span class="fetch-group-err">${s}% errors</span>`:n`<span class="fetch-group-ok">0% errors</span>`}
+        </div>
+        ${e.firstTs>0?n`
+          <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?n` \u2192 ${this.formatTime(e.lastTs)}`:d}
+            </span>
+          </div>`:d}
+        ${r.length>0?n`
+          <div class="fetch-group-callers">
+            <span class="fetch-group-callers-label">Called by</span>
+            ${r.map(c=>n`<span class="fetch-group-caller-pill">${c}</span>`)}
+          </div>`:d}
+      </div>
+    `}render(){let e=this.store.state.fetches,t=this.store.state.requests;if(e.length===0)return n`<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 n`
+      <div class="fetch-analysis" id="fetch-analysis">
+        ${this.renderSummary(e)}
+        ${s.length>0?n`
+          <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([T({context:_})],Lt.prototype,"store",2),Lt=u([g("bk-fetches-view")],Lt);var J=class extends f{constructor(){super(...arguments);this.expandedFlowIdx=-1;this.expandedSubReqIdx=-1;}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"}}analyzeFlow(t){let s=t.requests,r=[],i=[],a=[],c=[],l=new Map;for(let p of s){let v=p.label,E=p.pollingDurationMs||p.durationMs;if(!Ut[p.category||""]){if(p.isDuplicate){let C=l.get(v);C?(C.count++,C.wastedMs+=E):l.set(v,{name:v,count:2,wastedMs:E});continue}if(p.statusCode>=400){i.push(v+" ("+as(p.statusCode)+")");continue}p.responseSize>51200&&a.push("Large response: "+v+" returned "+Y(p.responseSize)),r.push(v);}}for(let p of l.values())c.push(p);let h="";if(c.length>0){let p=c.map(E=>E.name).join(", "),v=c.reduce((E,C)=>E+C.wastedMs,0);h="Your app fetches "+p+" multiple times on this page. This wastes ~"+S(v)+". Try caching these calls, deduplicating with React Query/SWR, or moving them to a shared layout.";}else i.length>0&&(h="Some requests are failing. Check your API routes and make sure the endpoints exist.");let m=s.filter(p=>p.durationMs>2e3&&p.category!==Tt);return m.length>0&&!h&&(h=m.map(p=>p.label).join(", ")+` is taking over ${S(2e3)}. Consider adding caching or optimizing the backend query.`),{successes:r,errors:i,warnings:a,duplicates:c,tip:h}}toggleFlow(t){this.expandedFlowIdx===t?this.expandedFlowIdx=-1:(this.expandedFlowIdx=t,this.expandedSubReqIdx=-1);}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 i=r.querySelector("pre");i&&i.classList.toggle("open");}loadTimelineForContainer(t){let s=t.querySelectorAll(".request-timeline");for(let r of s){let i=r.getAttribute("data-request-id");if(i&&!r.hasAttribute("data-loaded")){r.setAttribute("data-loaded","1");let a=document.createElement("bk-timeline-panel");a.setAttribute("request-id",i),a.setAttribute("request-started",r.getAttribute("data-request-started")||"0"),r.appendChild(a),r.classList.remove("tl-hidden");}}}updated(){if(this.expandedFlowIdx>=0){let t=this.querySelector(".flow-expand.open");t&&this.loadTimelineForContainer(t);}}render(){let t=this.flows;return t.length===0?n`<bk-empty-state title="No actions yet" subtitle="Start using your app to see user action flows here"></bk-empty-state>`:n`
+      <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,i=this.flowDotClass(t),a=this.flowBadgeInfo(t);return n`
+      <div class="flow-row ${r?"expanded":""}" @click=${()=>this.toggleFlow(s)}>
+        <div class="flow-summary-row">
+          <span class="flow-status-dot ${i}"></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 ${a.cls}">${a.text}</span>
+          <span class="flow-duration">${S(t.totalDurationMs)}</span>
+        </div>
+      </div>
+      <div class="flow-expand ${r?"open":""}">
+        ${r?this.viewMode==="simple"?this.renderFlowInsights(t):this.renderFlowSubReqs(t):d}
+      </div>
+    `}renderFlowInsights(t){let s=this.analyzeFlow(t),r=s.errors.length>0||s.duplicates.length>0||s.warnings.length>0||!!s.tip;return n`
+      <div>
+        <div class="flow-traffic">${t.requests.map(i=>this.renderTrafficCard(i))}</div>
+        ${r?n`
+          <div class="flow-divider"></div>
+          <div class="flow-insights">
+            ${s.errors.map(i=>n`<div class="insight-line insight-error">\u2717 ${i}</div>`)}
+            ${s.duplicates.map(i=>n`<div class="insight-line insight-warn">\u26A0 ${i.name} \u2014 loaded ${i.count}x (wasting ~${S(i.wastedMs)})</div>`)}
+            ${s.warnings.map(i=>n`<div class="insight-line insight-warn">\u26A0 ${i}</div>`)}
+            ${s.tip?n`<div class="insight-line insight-tip">Tip: ${s.tip}</div>`:d}
           </div>
+        `:d}
+      </div>
+    `}renderTrafficCard(t){if(Ut[t.category||""])return d;let s=rt(t.statusCode),r=S(t.pollingDurationMs||t.durationMs),i=!t.isDuplicate&&t.category!==Pt&&t.category!==Tt||t.requestBody&&t.method!=="GET"||!!t.responseBody;return n`
+      <div class="traffic-card ${t.isStrictModeDupe?"strict-mode-dupe":""}">
+        <div class="traffic-card-header ${i?"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?n`<span class="traffic-card-dup">duplicate</span>`:n`<span class="traffic-card-size">${Y(t.responseSize)}</span>`}
         </div>
+        ${t.isStrictModeDupe?n`<div class="strict-mode-banner">React Strict Mode duplicate \u2014 does not happen in production</div>`:d}
+        ${!t.isDuplicate&&t.category!==Pt&&t.category!==Tt?n`<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>
-      <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>
+    `}renderBodyToggle(t,s,r){let i=t==="out"?"\u2192":"\u2190";return n`
+      <div class="traffic-body">
+        <button class="traffic-body-toggle" @click=${this.toggleBodyBlock}>
+          <span class="chevron">\u25B8</span><span class="arrow-${t}">${i}</span> ${s}
+        </button>
+        <pre .innerHTML=${X(r)}></pre>
+      </div>
+    `}renderFlowSubReqs(t){return n`<div class="flow-subreqs">${t.requests.map((s,r)=>this.renderSubReqRow(s,r))}</div>`}renderSubReqRow(t,s){let r=this.expandedSubReqIdx===s,i=rt(t.statusCode),a=t.pollingDurationMs?S(t.pollingDurationMs):S(t.durationMs);return n`
+      <div class="flow-subreq ${r?"expanded":""}" @click=${c=>this.toggleSubReq(s,c)}>
+        <bk-method-badge .method=${t.method}></bk-method-badge>
+        <span class="subreq-label ${t.isDuplicate?"is-dup":""}">${t.path||t.url}</span>
+        ${t.isDuplicate?n`<span class="subreq-dup-tag">duplicate</span>`:d}
+        <span class="status-pill ${i}">${t.statusCode}</span>
+        <span class="subreq-dur">${a}</span>
+      </div>
+      <div class="flow-subreq-detail ${r?"open":""}">
+        ${r?this.renderSubReqDetail(t):d}
+      </div>
+    `}renderSubReqDetail(t){let s=rt(t.statusCode);return n`
+      <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?n`<span>${Y(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=${it(t.headers)}></pre></div>
+        <div class="detail-section"><h4>Response Headers</h4><pre .innerHTML=${it(t.responseHeaders)}></pre></div>
+        <div class="detail-section"><h4>Request Body</h4><pre .innerHTML=${X(t.requestBody)}></pre></div>
+        <div class="detail-section"><h4>Response Body</h4><pre .innerHTML=${X(t.responseBody)}></pre></div>
+      </div>
+      <div class="detail-actions">
+        <button class="btn btn-curl" @click=${r=>{r.stopPropagation(),dt(t);}}>Copy cURL</button>
+      </div>
+    `}};u([T({context:_})],J.prototype,"store",2),u([$()],J.prototype,"expandedFlowIdx",2),u([$()],J.prototype,"expandedSubReqIdx",2),J=u([g("bk-flows-view")],J);var It=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(c=>c.state==="open"||c.state==="fixing"||c.state==="regressed"),s=e.filter(c=>c.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?n`
+        <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>
+      `:n`<bk-empty-state title="Waiting for requests..." subtitle="Start using your app to see security findings here"></bk-empty-state>`;let r=0,i=0,a=0;for(let c of t){let l=c.issue.severity;l==="critical"?r++:l==="info"?a++:i++;}return n`
+      <div id="security-content">
+        ${this.renderSummary(t.length,s.length,r,i,a)}
+        ${t.length===0&&s.length>0?n`
+          <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,i){return n`
+      <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?n`<span class="sec-resolved-badge">${t} resolved</span>`:d}
         </div>
-        <div id="request-list"></div>
+        <div class="sec-summary-right">
+          ${s>0?n`<span class="sec-badge critical">${s} critical</span>`:d}
+          ${r>0?n`<span class="sec-badge warning">${r} warning</span>`:d}
+          ${i>0?n`<span class="sec-badge info">${i} info</span>`:d}
+        </div>
+      </div>
+    `}renderOpenGroups(e){let t={},s=[];for(let r of e){let i=r.issue,a=i.rule||i.type;t[a]||(t[a]={rule:a,title:i.title,severity:i.severity,hint:i.hint,items:[]},s.push(a)),t[a].items.push(r);}return s.sort((r,i)=>{let a=H[t[r].severity]?.sort??2,c=H[t[i].severity]?.sort??2;return a!==c?a-c:t[i].items.length-t[r].items.length}),n`${s.map(r=>this.renderGroup(t[r]))}`}renderGroup(e){let t=H[e.severity]||H.info;return n`
+      <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?n`<div class="sec-hint">${e.hint}</div>`:d}
+        <div class="sec-items">${e.items.map(s=>this.renderIssueItem(s))}</div>
       </div>
-      <div class="view-telemetry" id="fetch-container" style="display:none">
-        <div class="fetch-analysis" id="fetch-analysis"></div>
+    `}renderIssueItem(e){let t=e.issue;return n`
+      <div class="sec-item">
+        <div class="sec-item-desc">${t.desc}</div>
+        ${e.occurrences>1?n`<span class="sec-item-count">${e.occurrences}x</span>`:d}
+        ${e.state==="fixing"&&e.aiStatus==="fixed"?n`<span class="sec-ai-badge sec-ai-fixing">AI fixed \u2014 awaiting verification</span>`:e.aiStatus==="wont_fix"?n`<span class="sec-ai-badge sec-ai-wontfix">AI: won\u2019t fix</span>`:e.state==="regressed"?n`<span class="sec-ai-badge sec-ai-fixing" style="background:var(--red)">regressed</span>`:d}
+        ${e.aiNotes?n`<div class="sec-ai-notes">${e.aiNotes}</div>`:d}
       </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>
+    `}renderResolved(e){return n`
+      <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=>n`
+            <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"?n`<span class="sec-ai-badge sec-ai-verified">Verified fix</span>`:d}
+              ${t.aiNotes?n`<div class="sec-ai-notes">${t.aiNotes}</div>`:d}
+            </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>
+    `}};u([T({context:_})],It.prototype,"store",2),It=u([g("bk-security-view")],It);var ut=class extends f{constructor(){super(...arguments);this.expandedCardIdx=-1;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}navigateToView(t){let s=document.querySelectorAll(".sidebar-item");for(let r of s){let i=r.querySelector(".item-label");if(i&&i.textContent?.trim()===(Rt[t]||t)){r.click();return}}}toggleCard(t,s){let r=s.target;for(;r&&r!==s.currentTarget;){if(r.classList?.contains("ov-card-link")){let i=r.getAttribute("data-nav");i&&this.navigateToView(i);return}r=r.parentElement;}this.expandedCardIdx=this.expandedCardIdx===t?-1:t;}render(){let t=this.store.state,s=t.requests.filter(p=>!p.isStatic&&(!p.path||p.path.indexOf(O)!==0));if(!(s.length>0||t.queries.length>0||t.errors.length>0))return n`<bk-empty-state
+        title="Waiting for requests..."
+        subtitle="Start using your app to see insights here"
+      ></bk-empty-state>`;let i=s.filter(p=>p.statusCode>=400).length,a=s.length>0?Math.round(s.reduce((p,v)=>p+v.durationMs,0)/s.length):0,c=t.issues||[],l=c.filter(p=>p.state==="open"||p.state==="regressed"),h=c.filter(p=>p.state==="fixing"),m=c.filter(p=>p.state==="resolved");return n`
+      <div class="ov-container" id="overview-content">
+        ${this.renderSummary(s.length,t.flows.length,a,t.queries.length,i,t.fetches.length)}
+        ${l.length===0&&h.length===0&&m.length===0?n`<div class="ov-clear">
+              <span class="ov-clear-icon">\u2713</span>All clear \u2014 no issues detected
+            </div>`:d}
+        ${l.length===0&&m.length>0?n`<div class="ov-clear">
+              <span class="ov-clear-icon">\u2713</span>All issues resolved \u2014
+              ${m.length} finding${m.length!==1?"s were":" was"} detected and
+              fixed
+            </div>`:d}
+        ${l.length>0?this.renderOpenIssues(l):d}
+        ${h.length>0?this.renderVerifying(h):d}
+        ${m.length>0?this.renderResolvedIssues(m):d}
+      </div>
+    `}renderSummary(t,s,r,i,a,c){return n`
+      <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">${S(r)}</span><span class="ov-stat-label">Avg Response</span></div>
+        <div class="ov-stat"><span class="ov-stat-value">${i}</span><span class="ov-stat-label">Queries</span></div>
+        <div class="ov-stat"><span class="ov-stat-value" style="color:${a>0?"var(--red)":"var(--green)"}">${a}</span><span class="ov-stat-label">Errors</span></div>
+        <div class="ov-stat"><span class="ov-stat-value">${c}</span><span class="ov-stat-label">Fetches</span></div>
+      </div>
+    `}renderOpenIssues(t){return n`
+      <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,i=H[r.severity]||H.info,a=this.expandedCardIdx===s,c=t.aiStatus==="wont_fix"?n`<span class="sec-ai-badge sec-ai-wontfix">AI: won\u2019t fix</span>`:t.state==="regressed"?n`<span class="sec-ai-badge sec-ai-fixing" style="background:var(--red)">regressed</span>`:d,l=t.cleanHitsSinceLastSeen>0?n`<div class="ov-card-resolving">Resolving\u2026 ${t.cleanHitsSinceLastSeen}/${5} clean requests</div>`:d;return n`
+      <div class="ov-card ${a?"expanded":""}" @click=${h=>this.toggleCard(s,h)}>
+        <span class="ov-card-icon ${i.cls}">${i.icon}</span>
+        <div class="ov-card-body">
+          <div class="ov-card-title">${r.title}${c}</div>
+          <div class="ov-card-desc">${r.desc}</div>
+          ${l}
+          <div class="ov-card-expand" style="display:${a?"block":"none"}">
+            ${r.detail?n`<div .innerHTML=${r.detail}></div>`:d}
+            ${r.hint?n`<div class="ov-card-hint">${r.hint}</div>`:d}
+            ${r.nav?n`<span class="ov-card-link" data-nav=${r.nav}>View in ${de[r.nav]||r.nav} \u2192</span>`:d}
+          </div>
+        </div>
+        <span class="ov-card-arrow">${a?"\u2193":"\u2192"}</span>
+      </div>
+    `}renderVerifying(t){return n`
+      <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,i=s.cleanHitsSinceLastSeen>0?n`<div class="ov-card-resolving">Verifying\u2026 ${s.cleanHitsSinceLastSeen}/${5} clean requests</div>`:d;return n`
+            <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>
+                ${i}
+              </div>
+            </div>
+          `})}
+      </div>
+    `}renderResolvedIssues(t){return n`
+      <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=>n`
+          <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([T({context:_})],ut.prototype,"store",2),u([$()],ut.prototype,"expandedCardIdx",2),ut=u([g("bk-overview-view")],ut);var F=class extends f{constructor(){super(...arguments);this.selectedEndpoint=q;this.graphData=[];this.loadError=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(R.metricsLive)).json();this.graphData=s.endpoints||[],this.loadError=!1,(!this.selectedEndpoint||this.selectedEndpoint===q)&&(this.selectedEndpoint=q);}catch{this.loadError=true;}}healthGrade(t){for(let s of Qt)if(t<s.max)return s;return Qt[Qt.length-1]}fmtMs(t){return t<1?"<1ms":t<1e3?Math.round(t)+"ms":(t/1e3).toFixed(1)+"s"}dotColor(t){return t<V?wt.green:t<W?wt.amber:wt.red}reqDotColor(t){return t.statusCode>=400?wt.red:this.dotColor(t.durationMs)}parseHex(t){return [parseInt(t.slice(1,3),16),parseInt(t.slice(3,5),16),parseInt(t.slice(5,7),16)]}setupCanvas(t){let s=t.getContext("2d");if(!s)return null;let r=window.devicePixelRatio||1,i=t.clientWidth,a=t.clientHeight;return t.width=i*r,t.height=a*r,s.scale(r,r),{ctx:s,w:i,h:a}}drawDot(t,s,r,i,a){let[c,l,h]=this.parseHex(a);t.beginPath(),t.arc(s,r,i+2,0,Math.PI*2),t.fillStyle=`rgba(${c},${l},${h},0.25)`,t.fill(),t.beginPath(),t.arc(s,r,i,0,Math.PI*2),t.fillStyle=a,t.fill();}drawErrorX(t,s,r,i,a,c){let[l,h,m]=this.parseHex(a);t.strokeStyle=`rgba(${l},${h},${m},0.3)`,t.lineWidth=c+2,t.beginPath(),t.moveTo(s-i,r-i),t.lineTo(s+i,r+i),t.moveTo(s+i,r-i),t.lineTo(s-i,r+i),t.stroke(),t.strokeStyle=a,t.lineWidth=c,t.beginPath(),t.moveTo(s-i,r-i),t.lineTo(s+i,r+i),t.moveTo(s+i,r-i),t.lineTo(s-i,r+i),t.stroke();}drawScatterChart(t,s){this.scatterDots=[];let r=this.setupCanvas(t);if(!r||s.length===0)return;let{ctx:i,w:a,h:c}=r,l=es,h=a-l.left-l.right,m=c-l.top-l.bottom,p=0,v=s[0].timestamp,E=s[0].timestamp;for(let b of s)b.durationMs>p&&(p=b.durationMs),b.timestamp<v&&(v=b.timestamp),b.timestamp>E&&(E=b.timestamp);p=Math.max(p,10),p=Math.ceil(p*1.15/10)*10;let C=E-v||1;i.strokeStyle=Je,i.lineWidth=1;let ht=4;for(let b=0;b<=ht;b++){let x=l.top+m-b/ht*m;i.beginPath(),i.moveTo(l.left,x),i.lineTo(l.left+h,x),i.stroke(),i.fillStyle=Ee,i.font=Ze,i.textAlign="right",i.fillText(this.fmtMs(Math.round(b/ht*p)),l.left-8,x+3);}for(let b of [{ms:V},{ms:W}]){if(b.ms>=p)continue;let x=l.top+m-b.ms/p*m;i.beginPath(),i.setLineDash([4,4]),i.strokeStyle="rgba(113,113,122,0.3)",i.lineWidth=1,i.moveTo(l.left,x),i.lineTo(l.left+h,x),i.stroke(),i.setLineDash([]),i.fillStyle="rgba(113,113,122,0.5)",i.font=$e,i.textAlign="left",i.fillText(this.fmtMs(b.ms),l.left+h+2,x+3);}for(let b=0;b<s.length;b++){let x=s[b],I=s.length===1?l.left+h/2:l.left+(x.timestamp-v)/C*h,mt=l.top+m-x.durationMs/p*m,tt=this.reqDotColor(x);this.scatterDots.push({x:I,y:mt,idx:b,r:x}),x.statusCode>=400?this.drawErrorX(i,I,mt,4,tt,2):this.drawDot(i,I,mt,4,tt);}i.fillStyle=Ee,i.font=$e,i.textAlign="center";let A=[v,v+C/2,E];for(let b=0;b<A.length;b++){let x=l.left+b/2*h,I=new Date(A[b]);i.fillText(I.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"}),x,l.top+m+14);}t.style.cursor="pointer",t.onclick=b=>{let x=t.getBoundingClientRect(),I=b.clientX-x.left,mt=b.clientY-x.top,tt=null,Xt=1/0;for(let Kt of this.scatterDots){let xe=Math.sqrt((Kt.x-I)**2+(Kt.y-mt)**2);xe<Xt&&(Xt=xe,tt=Kt);}tt&&Xt<16&&this.highlightRow(tt.idx);};}drawInlineScatter(t,s){let r=this.setupCanvas(t);if(!r||s.length===0)return;let{ctx:i,w:a,h:c}=r,l=4,h=4,m=a-l*2,p=c-h*2,v=0,E=s[0].timestamp,C=s[0].timestamp;for(let A of s)A.durationMs>v&&(v=A.durationMs),A.timestamp<E&&(E=A.timestamp),A.timestamp>C&&(C=A.timestamp);v=Math.max(v,10),v=Math.ceil(v*1.15/10)*10;let ht=C-E||1;for(let A of [V,W]){if(A>=v)continue;let b=h+p-A/v*p;i.beginPath(),i.setLineDash([2,3]),i.strokeStyle="rgba(113,113,122,0.15)",i.lineWidth=1,i.moveTo(l,b),i.lineTo(l+m,b),i.stroke(),i.setLineDash([]);}for(let A of s){let b=s.length===1?l+m/2:l+(A.timestamp-E)/ht*m,x=h+p-A.durationMs/v*p,I=this.reqDotColor(A);A.statusCode>=400?this.drawErrorX(i,b,x,2.5,I,1.5):this.drawDot(i,b,x,2.5,I);}i.fillStyle="rgba(113,113,122,0.5)",i.font=ts,i.textAlign="right",i.fillText(this.fmtMs(v),a-2,h+8),i.fillText(this.fmtMs(0),a-2,c-2);}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===q)this.graphData.forEach((t,s)=>{if(t.requests.length===0)return;let r=this.querySelector(`#inline-scatter-${s}`);r&&this.drawInlineScatter(r,t.requests);});else {let t=this.querySelector("#perf-detail-canvas");if(t){let s=this.graphData.find(r=>r.endpoint===this.selectedEndpoint);s&&this.drawScatterChart(t,s.requests);}}}render(){return !this.graphData||this.graphData.length===0?n`<bk-empty-state title="No performance data yet" subtitle="Hit some endpoints and data will appear here"></bk-empty-state>`:n`
+      <div id="graph-content">
+        ${this.renderSelector()}
+        ${this.selectedEndpoint===q?this.renderOverview():this.renderDetail()}
+      </div>
+    `}renderSelector(){return n`
+      <div class="perf-selector">
+        <button class="perf-selector-btn ${this.selectedEndpoint===q?"active":""}"
+          @click=${()=>{this.selectedEndpoint=q;}}>Overview</button>
+        ${this.graphData.map((t,s)=>n`
+          <button class="perf-selector-btn ${t.endpoint===this.selectedEndpoint?"active":""}"
+            @click=${()=>{this.selectedEndpoint=t.endpoint;}}>
+            <span class="perf-dot" style="background:${be[s%be.length]}"></span>${t.endpoint}
+          </button>
+        `)}
+      </div>
+    `}renderOverview(){return n`
+      <div class="perf-endpoint-list">
+        ${this.graphData.map((t,s)=>t.requests.length===0?d:this.renderEndpointCard(t,s))}
+      </div>
+    `}renderEndpointCard(t,s){let r=t.summary,i=this.healthGrade(r.p95Ms),a=Math.round(r.errorRate*r.totalRequests),c=(r.avgQueryTimeMs||0)+(r.avgFetchTimeMs||0)+(r.avgAppTimeMs||0),l=d;if(c>0){let h=Math.round((r.avgQueryTimeMs||0)/c*100),m=Math.round((r.avgFetchTimeMs||0)/c*100),p=Math.max(0,100-h-m);l=n`
+        <div class="perf-breakdown-inline">
+          <div class="perf-breakdown-bar perf-breakdown-bar-sm">
+            ${h>0?n`<div class="perf-breakdown-seg perf-breakdown-db" style="width:${h}%"></div>`:d}
+            ${m>0?n`<div class="perf-breakdown-seg perf-breakdown-fetch" style="width:${m}%"></div>`:d}
+            ${p>0?n`<div class="perf-breakdown-seg perf-breakdown-app" style="width:${p}%"></div>`:d}
+          </div>
+          <span class="perf-breakdown-labels">
+            ${h>0?n`<span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-db"></span>${this.fmtMs(r.avgQueryTimeMs||0)}</span>`:d}
+            ${m>0?n`<span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-fetch"></span>${this.fmtMs(r.avgFetchTimeMs||0)}</span>`:d}
+            <span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-app"></span>${this.fmtMs(r.avgAppTimeMs||0)}</span>
+          </span>
+        </div>
+      `;}return n`
+      <div class="perf-endpoint-card" @click=${()=>{this.selectedEndpoint=t.endpoint;}}>
+        <div class="perf-ep-header">
+          <span class="perf-ep-name">${t.endpoint}</span>
+          <span class="perf-ep-stats">
+            <span class="perf-ep-stat" style="color:${i.color}">p95: ${this.fmtMs(r.p95Ms)}</span>
+            <span class="perf-ep-stat ${a>0?"perf-ep-stat-err":""}">${a} err</span>
+            ${r.avgQueryCount>0?n`<span class="perf-ep-stat ${r.avgQueryCount>5?"perf-ep-stat-warn":""}">${r.avgQueryCount} q/req</span>`:d}
+            <span class="perf-ep-stat perf-ep-stat-muted">${r.totalRequests} req${r.totalRequests!==1?"s":""}</span>
+          </span>
+        </div>
+        ${l}
+        <canvas id="inline-scatter-${s}" class="perf-inline-canvas"></canvas>
+      </div>
+    `}renderDetail(){let t=this.graphData.find(a=>a.endpoint===this.selectedEndpoint);if(!t?.requests?.length)return n`<bk-empty-state subtitle="No data for this endpoint"></bk-empty-state>`;let s=t.summary,r=this.healthGrade(s.p95Ms),i=Math.round(s.errorRate*s.totalRequests);return n`
+      ${this.renderDetailHeader(t,r)}
+      ${this.renderDetailMetrics(s,r,i)}
+      ${this.renderDetailBreakdown(s)}
+      ${this.renderDetailChart()}
+      ${this.renderDetailHistory(t)}
+    `}renderDetailHeader(t,s){return n`
+      <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>
+        </div>
+      </div>
+    `}renderDetailMetrics(t,s,r){return n`
+      <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}">${this.fmtMs(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>
+    `}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),i=Math.round((t.avgFetchTimeMs||0)/s*100),a=Math.max(0,100-r-i);return n`
+      <div class="perf-breakdown">
+        <div class="perf-section-title">Time Breakdown</div>
+        <div class="perf-breakdown-bar">
+          ${r>0?n`<div class="perf-breakdown-seg perf-breakdown-db" style="width:${r}%"></div>`:d}
+          ${i>0?n`<div class="perf-breakdown-seg perf-breakdown-fetch" style="width:${i}%"></div>`:d}
+          ${a>0?n`<div class="perf-breakdown-seg perf-breakdown-app" style="width:${a}%"></div>`:d}
+        </div>
+        <div class="perf-breakdown-legend">
+          <span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-db"></span>DB ${this.fmtMs(t.avgQueryTimeMs||0)} (${r}%)</span>
+          <span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-fetch"></span>Fetch ${this.fmtMs(t.avgFetchTimeMs||0)} (${i}%)</span>
+          <span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-app"></span>App ${this.fmtMs(t.avgAppTimeMs||0)} (${a}%)</span>
         </div>
-        <div id="error-list"></div>
       </div>
-      <div class="view-telemetry" id="log-container" style="display:none">
-        <div id="log-analysis"></div>
+    `}renderDetailChart(){return n`
+      <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({r:t.requests[r],origIdx:r});return n`
+      <div class="perf-history-wrap">
         <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>
+          <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>
         </div>
-        <div id="log-list"></div>
+        ${s.map(r=>this.renderHistoryRow(r.r,r.origIdx))}
+      </div>
+    `}renderHistoryRow(t,s){let r=this.healthGrade(t.durationMs),i=new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"}),a=t.statusCode>=400,c=t.queryTimeMs||0,l=t.fetchTimeMs||0,h=Math.max(0,t.durationMs-c-l);return n`
+      <div class="perf-hist-row ${a?"perf-hist-row-err":""}" data-req-idx=${s}>
+        <span class="perf-col perf-col-date">${i}</span>
+        <span class="perf-col perf-col-health">
+          <span class="perf-badge perf-badge-sm" style="color:${r.color};background:${r.bg};border-color:${r.border}">${r.label}</span>
+        </span>
+        <span class="perf-col perf-col-avg">${this.fmtMs(t.durationMs)}</span>
+        <span class="perf-col perf-col-breakdown">
+          ${c>0?n`<span class="perf-bd-tag perf-bd-tag-db">DB ${this.fmtMs(c)}</span>`:d}
+          ${l>0?n`<span class="perf-bd-tag perf-bd-tag-fetch">Fetch ${this.fmtMs(l)}</span>`:d}
+          <span class="perf-bd-tag perf-bd-tag-app">App ${this.fmtMs(h)}</span>
+        </span>
+        <span class="perf-col perf-col-status" style="color:${a?"var(--red)":"var(--text-muted)"}">${t.statusCode}</span>
+        <span class="perf-col perf-col-qpr">${t.queryCount}</span>
       </div>
-      <div class="view-telemetry" id="security-container" style="display:none">
-        <div class="sec-container" id="security-content"></div>
+    `}};u([T({context:_})],F.prototype,"store",2),u([$()],F.prototype,"selectedEndpoint",2),u([$()],F.prototype,"graphData",2),u([$()],F.prototype,"loadError",2),F=u([g("bk-performance-view")],F);function Qs(o){return o===0?"<1ms":S(o)}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(`${R.activity}?requestId=${this.requestId}`);if(!s.ok){this.failed=!0,this.loading=!1;return}let r=await s.json();if(w.cache.size>=fe){let i=w.cache.keys().next().value;i!==void 0&&w.cache.delete(i);}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(()=>k.show("SQL copied")).catch(()=>k.show("Copy failed"));}render(){if(this.loading)return n`<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 n`
+      <div class="tl-header">
+        <span class="tl-title">Activity Timeline</span>
+        <span class="tl-counts">
+          ${t.counts.queries>0?n`<span class="tl-count tl-count-query">${t.counts.queries} quer${t.counts.queries===1?"y":"ies"}</span>`:d}
+          ${t.counts.fetches>0?n`<span class="tl-count tl-count-fetch">${t.counts.fetches} fetch${t.counts.fetches===1?"":"es"}</span>`:d}
+          ${t.counts.logs>0?n`<span class="tl-count tl-count-log">${t.counts.logs} log${t.counts.logs===1?"":"s"}</span>`:d}
+          ${t.counts.errors>0?n`<span class="tl-count tl-count-error">${t.counts.errors} error${t.counts.errors===1?"":"s"}</span>`:d}
+        </span>
       </div>
-      <div class="view-telemetry" id="performance-container" style="display:none">
-        <div id="graph-content"></div>
+      <div class="tl-events">${this.renderTimeline(t.timeline,s)}</div>
+    `}renderTimeline(t,s){let r=new Map,i=[];for(let c of t){let l=c.type==="query"?c.data.parentFetchId:void 0;if(c.type==="query"&&l){let h=r.get(l);h||(h=[],r.set(l,h)),h.push(c);}else i.push(c);}let a=0;return i.map(c=>{let l=a++,h=c.type==="fetch"?c.data.fetchId:void 0,m=h?r.get(h):void 0;if(m&&m.length>0){let p=m.length;return n`
+          ${this.renderEvent(c,l,s)}
+          <div class="tl-nested">
+            <span class="tl-nested-label">${p} nested quer${p===1?"y":"ies"}</span>
+            ${m.map(v=>{let E=a++;return this.renderEvent(v,E,s,true)})}
+          </div>
+        `}return this.renderEvent(c,l,s)})}renderEvent(t,s,r,i=false){let a=ss[t.type]||"var(--text-dim)",c=rs[t.type]||t.type,l="+"+S(Math.round(t.timestamp-r)),h=t.type==="query"?t.data.sql:void 0,m=!!h,p=this.expandedSqlIdx===s;return n`
+      <div class="tl-event ${m?"tl-clickable":""} ${i?"tl-nested-event":""}"
+        style="${m?"":`border-left-color:${a}`}"
+        @click=${m?v=>this.toggleSql(s,v):d}>
+        <span class="tl-event-time">${l}</span>
+        <span class="tl-event-type" style="color:${a}">${c}</span>
+        ${this.renderEventContent(t)}
+        ${h?n`
+          <div class="tl-event-sql ${p?"open":""}">
+            <button class="tl-sql-copy" @click=${v=>this.copySql(h,v)}>Copy</button>
+            ${h}
+          </div>`:d}
+      </div>
+    `}renderEventContent(t){switch(t.type){case "fetch":{let s=t.data,r=s.statusCode>=400;return n`
+          <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">${S(s.durationMs)}</span>
+        `}case "query":{let s=t.data,r=(s.normalizedOp||s.operation||"?").toUpperCase(),i=s.table||s.model||"",a=jt[r]||"var(--text-dim)";return n`
+          <span class="tl-event-summary"><span style="color:${a};font-weight:600">${r}</span> ${i}</span>
+          <span class="tl-event-dur">${Qs(s.durationMs)}</span>
+        `}case "log":{let s=t.data,r=ze[s.level]||"var(--text-dim)";return n`<span class="tl-event-summary"><span style="color:${r}">${s.level.toUpperCase()}</span> ${s.message}</span>`}case "error":{let s=t.data;return n`<span class="tl-event-summary" style="color:var(--red)">${s.name}: ${s.message}</span>`}default:return d}}};w.cache=new Map,u([T({context:_})],w.prototype,"store",2),u([y({attribute:"request-id"})],w.prototype,"requestId",2),u([y({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 Yt=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(R.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(O)||(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(),ge)));},this.eventSource.addEventListener(ne,e=>{this.store.prependFetch(JSON.parse(e.data));}),this.eventSource.addEventListener("log",e=>{this.store.prependLog(JSON.parse(e.data));}),this.eventSource.addEventListener(ae,e=>{this.store.prependError(JSON.parse(e.data));}),this.eventSource.addEventListener(ce,e=>{this.store.prependQuery(JSON.parse(e.data));}),this.eventSource.addEventListener(le,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(R.flows)).json();this.store.setFlows(t.flows);}catch{}}async reloadMetrics(){try{let t=await(await fetch(R.metricsLive)).json();this.store.setMetrics(t.endpoints||[]);}catch{}}};function ps(){return n`<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 us(){return n`<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 hs(){return n`<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 ms(){return n`<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 vs(){return n`<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 fs(){return n`<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 gs(){return n`<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 bs(){return n`<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 Es(){return n`<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 Z=class extends f{constructor(){super(...arguments);this.store=new Wt;this.activeView="overview";this.viewMode="simple";this.sse=new Yt(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(R.flows),fetch(R.requests)]),[r,i]=await Promise.all([t.json(),s.json()]);this.store.setFlows(r.flows),this.store.setRequests(i.requests);}catch(t){console.warn("[brakit]",t);}try{let[t,s,r,i,a]=await Promise.all([fetch(R.fetches),fetch(R.errors),fetch(R.logs),fetch(R.queries),fetch(R.metricsLive)]),[c,l,h,m,p]=await Promise.all([t.json(),s.json(),r.json(),i.json(),a.json()]);this.store.setFetches(c.entries),this.store.setErrors(l.entries),this.store.setLogs(h.entries),this.store.setQueries(m.entries),this.store.setMetrics(p.endpoints||[]);}catch(t){console.warn("[brakit]",t);}try{let s=await(await fetch(R.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(`${R.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(R.clear,{method:"POST"}),this.store.clearAll(),k.show("Cleared"));}handleCopyAsCurl(t){dt(t);}render(){let t=this.store.state,s=t.requests.filter(l=>!l.path?.startsWith(O)),r=s.filter(l=>l.statusCode>=400).length,i=s.length>0?Math.round(s.reduce((l,h)=>l+h.durationMs,0)/s.length):0,a=(t.issues||[]).filter(l=>l.state!=="resolved"&&l.state!=="stale").length,c=window.__BRAKIT_CONFIG__;return n`
+      <div class="app" id="app">
+        <aside class="sidebar">
+          <div class="sidebar-logo">
+            <span class="logo-text">brakit</span>
+            <span class="logo-version">v${c?.version??""}</span>
+          </div>
+          <nav class="sidebar-nav">
+            ${this.renderSidebarItem("overview","Overview",ps(),void 0)}
+            <div class="sidebar-section">Monitor</div>
+            ${this.renderSidebarItem("actions","Actions",us(),t.flows.length)}
+            ${this.renderSidebarItem("requests","Requests",hs(),s.length)}
+            ${this.renderSidebarItem("fetches","Fetches",ms(),t.fetches.length)}
+            <div class="sidebar-section">Insights</div>
+            ${this.renderSidebarItem("queries","Queries",vs(),t.queries.length)}
+            ${this.renderSidebarItem("errors","Errors",fs(),t.errors.length)}
+            ${this.renderSidebarItem("logs","Logs",gs(),t.logs.length)}
+            ${this.renderSidebarItem("security","Security",bs(),a,a===0)}
+            ${this.renderSidebarItem("performance","Performance",Es(),void 0)}
+          </nav>
+          <div class="sidebar-footer">:${c?.port??""}</div>
+        </aside>
+        <div class="main-panel">
+          <div class="header">
+            <div class="header-left">
+              <span class="header-title" id="header-title">${Rt[this.activeView]||this.activeView}</span>
+              <span class="header-sub" id="header-sub">${pe[this.activeView]||""}</span>
+            </div>
+            <div class="header-right">
+              ${this.activeView==="actions"?n`
+                <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: ${i}ms</span>
+          </div>
+        </div>
       </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.insights || [];
-    var open = all.filter(function(si) { return si.state === 'open' || si.state === 'fixing'; });
-    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 insight = si.insight;
-          var card = document.createElement('div');
-          card.className = 'ov-card';
-
-          var sevCfg = SEV[insight.severity];
-          var iconCls = sevCfg.cls;
-          var iconChar = sevCfg.icon;
-
-          var expandHtml = '';
-          if (insight.detail) expandHtml += insight.detail;
-          if (insight.hint) expandHtml += '<div class="ov-card-hint">' + escHtml(insight.hint) + '</div>';
-          expandHtml += '<span class="ov-card-link" data-nav="' + insight.nav + '">View in ' + (NAV_LABELS[insight.nav] || insight.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>';
-          }
-
-          card.innerHTML =
-            '<span class="ov-card-icon ' + iconCls + '">' + iconChar + '</span>' +
-            '<div class="ov-card-body">' +
-              '<div class="ov-card-title">' + escHtml(insight.title) + aiBadge + '</div>' +
-              '<div class="ov-card-desc">' + insight.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 rInsight = resolved[ri].insight;
-        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(rInsight.title) + '</div>' +
-            '<div class="ov-card-desc">' + rInsight.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.findings || []).slice();
-    var insightsList = state.insights || [];
-    for (var ix = 0; ix < insightsList.length; ix++) {
-      var si = insightsList[ix];
-      all.push({
-        findingId: si.key,
-        state: si.state,
-        aiStatus: si.aiStatus,
-        aiNotes: si.aiNotes,
-        finding: {
-          severity: si.insight.severity,
-          rule: 'insight-' + si.insight.type,
-          title: si.insight.title,
-          desc: si.insight.desc,
-          hint: si.insight.hint,
-          endpoint: si.insight.nav || 'global',
-          count: 1
-        }
-      });
-    }
-    var open = all.filter(function(f) { return f.state === 'open' || f.state === 'fixing'; });
-    var resolved = all.filter(function(f) { return f.state === 'resolved'; });
-
-    if (open.length === 0 && resolved.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].finding.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.finding;
-        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.finding;
-          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>';
-          }
-          var aiNotes = sf2.aiNotes ? '<div class="sec-ai-notes">' + escHtml(sf2.aiNotes) + '</div>' : '';
-          row.innerHTML =
-            '<div class="sec-item-desc">' + escHtml(item.desc) + '</div>' +
-            (item.count > 1 ? '<span class="sec-item-count">' + item.count + 'x</span>' : '') +
-            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.finding;
-        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) + '</div>' +
-          verifiedBadge + rNotes;
-        resolvedItems.appendChild(rRow);
-      }
-      resolvedGroup.appendChild(resolvedItems);
-      container.appendChild(resolvedGroup);
-    }
-  }
-  
-  
-  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.insights = data3.insights || [];
-    } catch(e) { console.warn('[brakit]', e); }
-
-    try {
-      var res4 = await fetch('/__brakit/api/security');
-      var data4 = await res4.json();
-      state.findings = data4.findings || [];
-    } 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('insights', function(e) {
-      state.insights = JSON.parse(e.data);
-      if (state.activeView === 'overview') renderOverview();
-      if (state.activeView === 'security') renderSecurity();
-      updateStats();
-    });
-
-    events.addEventListener('security', function(e) {
-      state.findings = JSON.parse(e.data);
-      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 numFindings = (state.findings || []).filter(function(f) { return f.state !== 'resolved'; }).length;
-      secCount.textContent = numFindings;
-      secCount.style.display = numFindings > 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.insights = []; state.findings = [];
-    graphData = []; selectedEndpoint = '__all__'; timelineCache = {};
-    renderFlows(); renderRequests(); renderFetches(); renderErrors(); renderLogs(); renderQueries(); renderGraph(); renderOverview(); renderSecurity(); updateStats();
-    showToast('Cleared');
-  });
-
-  init();
-  
-})();
-</script>
+      <bk-toast></bk-toast>
+    `}renderSidebarItem(t,s,r,i,a=false){return n`
+      <button class="sidebar-item ${this.activeView===t?"active":""}" @click=${()=>this.switchView(t)}>
+        <span class="item-icon">${r}</span>
+        <span class="item-label">${s}</span>
+        ${i!==void 0?n`<span class="item-count" style="display:${a?"none":""}">${i}</span>`:d}
+      </button>
+    `}};u([Se({context:_})],Z.prototype,"store",2),u([$()],Z.prototype,"activeView",2),u([$()],Z.prototype,"viewMode",2),Z=u([g("bk-dashboard")],Z);
+/*! 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>