brakit 0.8.7 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -3
- package/dist/api.d.ts +66 -46
- package/dist/api.js +727 -730
- package/dist/bin/brakit.js +294 -432
- package/dist/dashboard-client.global.js +345 -222
- package/dist/dashboard.html +390 -231
- package/dist/mcp/server.js +7 -15
- package/dist/runtime/index.js +1367 -1607
- package/package.json +1 -1
package/dist/dashboard.html
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
--red:#dc2626;
|
|
19
19
|
--cyan:#0891b2;
|
|
20
20
|
--green-bg:rgba(22,163,74,0.08);--green-bg-subtle:rgba(22,163,74,0.05);--green-border:rgba(22,163,74,0.2);--green-border-subtle:rgba(22,163,74,0.15);
|
|
21
|
+
--amber-bg:rgba(217,119,6,0.07);--red-bg:rgba(220,38,38,0.07);--blue-bg:rgba(37,99,235,0.08);--cyan-bg:rgba(8,145,178,0.07);
|
|
21
22
|
--sidebar-width:232px;--header-height:52px;
|
|
22
23
|
--radius:8px;--radius-sm:6px;
|
|
23
24
|
--shadow-sm:0 1px 2px rgba(0,0,0,0.05);
|
|
@@ -120,8 +121,8 @@ bk-toast{display:block;position:fixed;top:0;left:0;right:0;z-index:100;pointer-e
|
|
|
120
121
|
.flow-req-count{font-family:var(--mono);font-size:12px;color:var(--text-muted);flex-shrink:0;text-align:right}
|
|
121
122
|
.flow-badge-pill{font-size:11px;flex-shrink:0;font-family:var(--mono);font-weight:600;padding:2px 10px;border-radius:10px;text-align:center}
|
|
122
123
|
.flow-badge-pill.badge-clean{background:var(--green-bg);color:var(--green)}
|
|
123
|
-
.flow-badge-pill.badge-warn{background:
|
|
124
|
-
.flow-badge-pill.badge-error{background:
|
|
124
|
+
.flow-badge-pill.badge-warn{background:var(--amber-bg);color:var(--amber)}
|
|
125
|
+
.flow-badge-pill.badge-error{background:var(--red-bg);color:var(--red)}
|
|
125
126
|
.flow-duration{font-family:var(--mono);font-size:12px;color:var(--text-muted);flex-shrink:0;width:60px;text-align:right}
|
|
126
127
|
|
|
127
128
|
/* Flow expand panel */
|
|
@@ -140,23 +141,23 @@ bk-toast{display:block;position:fixed;top:0;left:0;right:0;z-index:100;pointer-e
|
|
|
140
141
|
/* Method badges */
|
|
141
142
|
.method-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:5px;font-size:10px;font-weight:700;font-family:var(--mono);letter-spacing:.3px;flex-shrink:0}
|
|
142
143
|
.method-badge-GET{background:var(--green-bg);color:var(--green)}
|
|
143
|
-
.method-badge-POST{background:
|
|
144
|
-
.method-badge-PUT,.method-badge-PATCH{background:
|
|
145
|
-
.method-badge-DELETE{background:
|
|
144
|
+
.method-badge-POST{background:var(--blue-bg);color:var(--blue)}
|
|
145
|
+
.method-badge-PUT,.method-badge-PATCH{background:var(--amber-bg);color:var(--amber)}
|
|
146
|
+
.method-badge-DELETE{background:var(--red-bg);color:var(--red)}
|
|
146
147
|
.method-badge-HEAD,.method-badge-OPTIONS{background:var(--bg-muted);color:var(--text-muted)}
|
|
147
148
|
|
|
148
149
|
/* Status pills */
|
|
149
150
|
.status-pill{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:600;font-family:var(--mono);flex-shrink:0}
|
|
150
151
|
.status-pill-2xx{background:var(--green-bg);color:var(--green)}
|
|
151
|
-
.status-pill-3xx{background:
|
|
152
|
-
.status-pill-4xx{background:
|
|
153
|
-
.status-pill-5xx{background:
|
|
152
|
+
.status-pill-3xx{background:var(--cyan-bg);color:var(--cyan)}
|
|
153
|
+
.status-pill-4xx{background:var(--amber-bg);color:var(--amber)}
|
|
154
|
+
.status-pill-5xx{background:var(--red-bg);color:var(--red)}
|
|
154
155
|
|
|
155
156
|
.traffic-card-path{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:500;font-size:13px}
|
|
156
157
|
.traffic-card-path.is-dup{color:var(--text-muted);font-weight:400}
|
|
157
158
|
.traffic-card-dur{color:var(--text-muted);font-size:12px;flex-shrink:0}
|
|
158
159
|
.traffic-card-size{color:var(--text-muted);font-size:11px;flex-shrink:0}
|
|
159
|
-
.traffic-card-dup{font-size:10px;color:var(--amber);flex-shrink:0;font-weight:600;background:
|
|
160
|
+
.traffic-card-dup{font-size:10px;color:var(--amber);flex-shrink:0;font-weight:600;background:var(--amber-bg);padding:1px 7px;border-radius:4px}
|
|
160
161
|
|
|
161
162
|
/* Body toggles */
|
|
162
163
|
.traffic-body{padding:0;margin-top:8px}
|
|
@@ -185,7 +186,7 @@ bk-toast{display:block;position:fixed;top:0;left:0;right:0;z-index:100;pointer-e
|
|
|
185
186
|
.flow-subreq .subreq-label.is-dup{color:var(--text-muted);font-weight:400}
|
|
186
187
|
.flow-subreq .subreq-status{flex-shrink:0}
|
|
187
188
|
.flow-subreq .subreq-dur{color:var(--text-muted);font-size:12px;text-align:right;flex-shrink:0}
|
|
188
|
-
.flow-subreq .subreq-dup-tag{font-size:10px;color:var(--amber);flex-shrink:0;font-weight:600;background:
|
|
189
|
+
.flow-subreq .subreq-dup-tag{font-size:10px;color:var(--amber);flex-shrink:0;font-weight:600;background:var(--amber-bg);padding:1px 7px;border-radius:4px}
|
|
189
190
|
.flow-subreq-detail{display:none;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
|
|
190
191
|
.flow-subreq-detail.open{display:block}
|
|
191
192
|
|
|
@@ -215,6 +216,41 @@ bk-toast{display:block;position:fixed;top:0;left:0;right:0;z-index:100;pointer-e
|
|
|
215
216
|
.strict-mode-dupe{opacity:0.55}
|
|
216
217
|
.strict-mode-banner{font-size:11px;color:var(--text-muted);padding:6px 0 0;font-family:var(--mono)}
|
|
217
218
|
|
|
219
|
+
/* Flow detail tabs */
|
|
220
|
+
.flow-detail-tabs{display:flex;gap:0;margin-bottom:14px;border-bottom:1px solid var(--border)}
|
|
221
|
+
.flow-tab{padding:8px 16px;font-size:12px;font-family:var(--mono);font-weight:600;color:var(--text-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;letter-spacing:.3px}
|
|
222
|
+
.flow-tab:hover{color:var(--text)}
|
|
223
|
+
.flow-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
|
|
224
|
+
|
|
225
|
+
/* Waterfall chart — request bars on time axis, sub-events as text rows */
|
|
226
|
+
.flow-waterfall{padding:0;font-family:var(--mono);font-size:11px}
|
|
227
|
+
.wf-time-axis{display:flex;justify-content:space-between;font-size:9px;color:var(--text-muted);padding:0 0 6px;margin-left:180px;margin-right:56px;border-bottom:1px solid var(--border);margin-bottom:2px}
|
|
228
|
+
.wf-rows{display:flex;flex-direction:column;gap:0}
|
|
229
|
+
|
|
230
|
+
/* Request group — request bar + its sub-events */
|
|
231
|
+
.wf-request-group{border-bottom:1px solid var(--border-subtle);padding:2px 0}
|
|
232
|
+
.wf-request-group:last-child{border-bottom:none}
|
|
233
|
+
|
|
234
|
+
/* Request row — label | bar on time axis | duration */
|
|
235
|
+
.wf-req-row{display:flex;align-items:center;gap:0;height:24px;transition:background .1s}
|
|
236
|
+
.wf-req-row:hover{background:var(--bg-hover)}
|
|
237
|
+
.wf-req-label{width:180px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:500;padding:0 10px 0 0;font-size:11px}
|
|
238
|
+
.wf-bar-track{flex:1;position:relative;height:14px;min-width:0;overflow:hidden}
|
|
239
|
+
.wf-bar{position:absolute;top:1px;height:12px;border-radius:3px;opacity:0.8;min-width:3px}
|
|
240
|
+
.wf-req-row:hover .wf-bar{opacity:1}
|
|
241
|
+
.wf-req-dur{width:56px;flex-shrink:0;text-align:right;color:var(--text-muted);font-size:10px;padding-left:8px}
|
|
242
|
+
|
|
243
|
+
/* Sub-event rows — same layout as request rows: label | bar track | duration */
|
|
244
|
+
.wf-sub-row{display:flex;align-items:center;gap:0;height:20px;transition:background .1s}
|
|
245
|
+
.wf-sub-row:hover{background:var(--bg-hover)}
|
|
246
|
+
.wf-sub-label{width:180px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:10px;padding-left:14px;display:flex;align-items:center;gap:6px}
|
|
247
|
+
.wf-sub-dot{width:6px;height:6px;border-radius:2px;flex-shrink:0}
|
|
248
|
+
.wf-sub-bar-sized{height:8px !important;top:3px !important;opacity:0.65}
|
|
249
|
+
.wf-sub-row:hover .wf-sub-bar-sized{opacity:0.9}
|
|
250
|
+
.wf-sub-dur{width:56px;flex-shrink:0;text-align:right;color:var(--text-dim);font-size:9px;padding-left:8px}
|
|
251
|
+
|
|
252
|
+
.wf-loading{color:var(--text-muted);padding:12px 0;font-size:11px;font-family:var(--mono)}
|
|
253
|
+
|
|
218
254
|
/* Request rows */
|
|
219
255
|
.req-row{display:flex;align-items:center;gap:16px;padding:12px 28px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .1s;font-family:var(--mono);font-size:14px}
|
|
220
256
|
.req-row:hover{background:var(--bg-hover)}
|
|
@@ -672,33 +708,33 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
672
708
|
<body>
|
|
673
709
|
<bk-dashboard></bk-dashboard>
|
|
674
710
|
<script>window.__BRAKIT_CONFIG__={port:{{PORT}},version:"{{VERSION}}"};</script>
|
|
675
|
-
<script>(function(){'use strict';var
|
|
676
|
-
\f\r]`,
|
|
677
|
-
\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,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,"""):""}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(`
|
|
678
|
-
`)}function X(
|
|
711
|
+
<script>(function(){'use strict';var Ls=Object.defineProperty;var Ms=Object.getOwnPropertyDescriptor;var h=(i,e,t,s)=>{for(var r=s>1?void 0:s?Ms(e,t):e,o=i.length-1,n;o>=0;o--)(n=i[o])&&(r=(s?n(e,t,r):n(r))||r);return s&&r&&Ls(e,t,r),r};var Lt=globalThis,kt=Lt.ShadowRoot&&(Lt.ShadyCSS===void 0||Lt.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Re=Symbol(),xe=new WeakMap,Mt=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(kt&&e===void 0){let s=t!==void 0&&t.length===1;s&&(e=xe.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),s&&xe.set(t,e));}return e}toString(){return this.cssText}},we=i=>new Mt(typeof i=="string"?i:i+"",void 0,Re);var Ae=(i,e)=>{if(kt)i.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(let t of e){let s=document.createElement("style"),r=Lt.litNonce;r!==void 0&&s.setAttribute("nonce",r),s.textContent=t.cssText,i.appendChild(s);}},Yt=kt?i=>i:i=>i instanceof CSSStyleSheet?(e=>{let t="";for(let s of e.cssRules)t+=s.cssText;return we(t)})(i):i;var{is:ks,defineProperty:Os,getOwnPropertyDescriptor:Ds,getOwnPropertyNames:Ns,getOwnPropertySymbols:Hs,getPrototypeOf:qs}=Object,D=globalThis,Ce=D.trustedTypes,Ps=Ce?Ce.emptyScript:"",Us=D.reactiveElementPolyfillSupport,ht=(i,e)=>i,mt={toAttribute(i,e){switch(e){case Boolean:i=i?Ps:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i);}return i},fromAttribute(i,e){let t=i;switch(e){case Boolean:t=i!==null;break;case Number:t=i===null?null:Number(i);break;case Object:case Array:try{t=JSON.parse(i);}catch{t=null;}}return t}},Ot=(i,e)=>!ks(i,e),Ie={attribute:true,type:String,converter:mt,reflect:false,useDefault:false,hasChanged:Ot};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),D.litPropertyMetadata??(D.litPropertyMetadata=new WeakMap);var k=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=Ie){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&&Os(this.prototype,e,r);}}static getPropertyDescriptor(e,t,s){let{get:r,set:o}=Ds(this.prototype,e)??{get(){return this[t]},set(n){this[t]=n;}};return {get:r,set(n){let l=r?.call(this);o?.call(this,n),this.requestUpdate(e,l,s);},configurable:true,enumerable:true}}static getPropertyOptions(e){return this.elementProperties.get(e)??Ie}static _$Ei(){if(this.hasOwnProperty(ht("elementProperties")))return;let e=qs(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties);}static finalize(){if(this.hasOwnProperty(ht("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(ht("properties"))){let t=this.properties,s=[...Ns(t),...Hs(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(Yt(r));}else e!==void 0&&t.push(Yt(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 Ae(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(true),this._$EO?.forEach(e=>e.hostConnected?.());}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.());}attributeChangedCallback(e,t,s){this._$AK(e,s);}_$ET(e,t){let s=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,s);if(r!==void 0&&s.reflect===true){let o=(s.converter?.toAttribute!==void 0?s.converter:mt).toAttribute(t,s.type);this._$Em=e,o==null?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null;}}_$AK(e,t){let s=this.constructor,r=s._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let o=s.getPropertyOptions(r),n=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:mt;this._$Em=r;let l=n.fromAttribute(t,o.type);this[r]=l??this._$Ej?.get(r)??l,this._$Em=null;}}requestUpdate(e,t,s,r=false,o){if(e!==void 0){let n=this.constructor;if(r===false&&(o=this[e]),s??(s=n.getPropertyOptions(e)),!((s.hasChanged??Ot)(o,t)||s.useDefault&&s.reflect&&o===this._$Ej?.get(e)&&!this.hasAttribute(n._$Eu(e,s))))return;this.C(e,t,s);}this.isUpdatePending===false&&(this._$ES=this._$EP());}C(e,t,{useDefault:s,reflect:r,wrapped:o},n){s&&!(this._$Ej??(this._$Ej=new Map)).has(e)&&(this._$Ej.set(e,n??t??this[e]),o!==true||n!==void 0)||(this._$AL.has(e)||(this.hasUpdated||s||(t=void 0),this._$AL.set(e,t)),r===true&&this._$Em!==e&&(this._$Eq??(this._$Eq=new Set)).add(e));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(let[r,o]of this._$Ep)this[r]=o;this._$Ep=void 0;}let s=this.constructor.elementProperties;if(s.size>0)for(let[r,o]of s){let{wrapped:n}=o,l=this[r];n!==true||this._$AL.has(r)||l===void 0||this.C(r,void 0,o,l);}}let e=false,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(s=>s.hostUpdate?.()),this.update(t)):this._$EM();}catch(s){throw e=false,this._$EM(),s}e&&this._$AE(t);}willUpdate(e){}_$AE(e){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(e)),this.updated(e);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return true}update(e){this._$Eq&&(this._$Eq=this._$Eq.forEach(t=>this._$ET(t,this[t]))),this._$EM();}updated(e){}firstUpdated(e){}};k.elementStyles=[],k.shadowRootOptions={mode:"open"},k[ht("elementProperties")]=new Map,k[ht("finalized")]=new Map,Us?.({ReactiveElement:k}),(D.reactiveElementVersions??(D.reactiveElementVersions=[])).push("2.1.2");var ft=globalThis,Le=i=>i,Dt=ft.trustedTypes,Me=Dt?Dt.createPolicy("lit-html",{createHTML:i=>i}):void 0,qe="$lit$",N=`lit$${Math.random().toFixed(9).slice(2)}$`,Pe="?"+N,Fs=`<${Pe}>`,j=document,gt=()=>j.createComment(""),bt=i=>i===null||typeof i!="object"&&typeof i!="function",ee=Array.isArray,Bs=i=>ee(i)||typeof i?.[Symbol.iterator]=="function",Xt=`[
|
|
712
|
+
\f\r]`,vt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ke=/-->/g,Oe=/>/g,G=RegExp(`>|${Xt}(?:([^\\s"'>=/]+)(${Xt}*=${Xt}*(?:[^
|
|
713
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),De=/'/g,Ne=/"/g,Ue=/^(?:script|style|textarea|title)$/i,se=i=>(e,...t)=>({_$litType$:i,strings:e,values:t}),a=se(1),Q=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),He=new WeakMap,W=j.createTreeWalker(j,129);function Fe(i,e){if(!ee(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return Me!==void 0?Me.createHTML(e):e}var Gs=(i,e)=>{let t=i.length-1,s=[],r,o=e===2?"<svg>":e===3?"<math>":"",n=vt;for(let l=0;l<t;l++){let c=i[l],p,u,m=-1,b=0;for(;b<c.length&&(n.lastIndex=b,u=n.exec(c),u!==null);)b=n.lastIndex,n===vt?u[1]==="!--"?n=ke:u[1]!==void 0?n=Oe:u[2]!==void 0?(Ue.test(u[2])&&(r=RegExp("</"+u[2],"g")),n=G):u[3]!==void 0&&(n=G):n===G?u[0]===">"?(n=r??vt,m=-1):u[1]===void 0?m=-2:(m=n.lastIndex-u[2].length,p=u[1],n=u[3]===void 0?G:u[3]==='"'?Ne:De):n===Ne||n===De?n=G:n===ke||n===Oe?n=vt:(n=G,r=void 0);let $=n===G&&i[l+1].startsWith("/>")?" ":"";o+=n===vt?c+Fs:m>=0?(s.push(p),c.slice(0,m)+qe+c.slice(m)+N+$):c+N+(m===-2?l:$);}return [Fe(i,o+(i[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),s]},Et=class i{constructor({strings:e,_$litType$:t},s){let r;this.parts=[];let o=0,n=0,l=e.length-1,c=this.parts,[p,u]=Gs(e,t);if(this.el=i.createElement(p,s),W.currentNode=this.el.content,t===2||t===3){let m=this.el.content.firstChild;m.replaceWith(...m.childNodes);}for(;(r=W.nextNode())!==null&&c.length<l;){if(r.nodeType===1){if(r.hasAttributes())for(let m of r.getAttributeNames())if(m.endsWith(qe)){let b=u[n++],$=r.getAttribute(m).split(N),v=/([.?@])?(.*)/.exec(b);c.push({type:1,index:o,name:v[2],strings:$,ctor:v[1]==="."?zt:v[1]==="?"?Jt:v[1]==="@"?Zt:tt}),r.removeAttribute(m);}else m.startsWith(N)&&(c.push({type:6,index:o}),r.removeAttribute(m));if(Ue.test(r.tagName)){let m=r.textContent.split(N),b=m.length-1;if(b>0){r.textContent=Dt?Dt.emptyScript:"";for(let $=0;$<b;$++)r.append(m[$],gt()),W.nextNode(),c.push({type:2,index:++o});r.append(m[b],gt());}}}else if(r.nodeType===8)if(r.data===Pe)c.push({type:2,index:o});else {let m=-1;for(;(m=r.data.indexOf(N,m+1))!==-1;)c.push({type:7,index:o}),m+=N.length-1;}o++;}}static createElement(e,t){let s=j.createElement("template");return s.innerHTML=e,s}};function Z(i,e,t=i,s){if(e===Q)return e;let r=s!==void 0?t._$Co?.[s]:t._$Cl,o=bt(e)?void 0:e._$litDirective$;return r?.constructor!==o&&(r?._$AO?.(false),o===void 0?r=void 0:(r=new o(i),r._$AT(i,t,s)),s!==void 0?(t._$Co??(t._$Co=[]))[s]=r:t._$Cl=r),r!==void 0&&(e=Z(i,r._$AS(i,e.values),r,s)),e}var Kt=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);W.currentNode=r;let o=W.nextNode(),n=0,l=0,c=s[0];for(;c!==void 0;){if(n===c.index){let p;c.type===2?p=new _t(o,o.nextSibling,this,e):c.type===1?p=new c.ctor(o,c.name,c.strings,this,e):c.type===6&&(p=new te(o,this,e)),this._$AV.push(p),c=s[++l];}n!==c?.index&&(o=W.nextNode(),n++);}return W.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++;}},_t=class i{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,s,r){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=s,this.options=r,this._$Cv=r?.isConnected??true;}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Z(this,e,t),bt(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):Bs(e)?this.k(e):this._(e);}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e));}_(e){this._$AH!==d&&bt(this._$AH)?this._$AA.nextSibling.data=e:this.T(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=Et.createElement(Fe(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===r)this._$AH.p(t);else {let o=new Kt(r,this),n=o.u(this.options);o.p(t),this.T(n),this._$AH=o;}}_$AC(e){let t=He.get(e.strings);return t===void 0&&He.set(e.strings,t=new Et(e)),t}k(e){ee(this._$AH)||(this._$AH=[],this._$AR());let t=this._$AH,s,r=0;for(let o of e)r===t.length?t.push(s=new i(this.O(gt()),this.O(gt()),this,this.options)):s=t[r],s._$AI(o),r++;r<t.length&&(this._$AR(s&&s._$AB.nextSibling,r),t.length=r);}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(false,true,t);e!==this._$AB;){let s=Le(e).nextSibling;Le(e).remove(),e=s;}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e));}},tt=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,s,r,o){this.type=1,this._$AH=d,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=o,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=d;}_$AI(e,t=this,s,r){let o=this.strings,n=false;if(o===void 0)e=Z(this,e,t,0),n=!bt(e)||e!==this._$AH&&e!==Q,n&&(this._$AH=e);else {let l=e,c,p;for(e=o[0],c=0;c<o.length-1;c++)p=Z(this,l[s+c],t,c),p===Q&&(p=this._$AH[c]),n||(n=!bt(p)||p!==this._$AH[c]),p===d?e=d:e!==d&&(e+=(p??"")+o[c+1]),this._$AH[c]=p;}n&&!r&&this.j(e);}j(e){e===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"");}},zt=class extends tt{constructor(){super(...arguments),this.type=3;}j(e){this.element[this.name]=e===d?void 0:e;}},Jt=class extends tt{constructor(){super(...arguments),this.type=4;}j(e){this.element.toggleAttribute(this.name,!!e&&e!==d);}},Zt=class extends tt{constructor(e,t,s,r,o){super(e,t,s,r,o),this.type=5;}_$AI(e,t=this){if((e=Z(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,o=e!==d&&(s===d||r);r&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,e),this._$AH=e;}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e);}},te=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){Z(this,e);}};var Ws=ft.litHtmlPolyfillSupport;Ws?.(Et,_t),(ft.litHtmlVersions??(ft.litHtmlVersions=[])).push("3.3.2");var Be=(i,e,t)=>{let s=t?.renderBefore??e,r=s._$litPart$;if(r===void 0){let o=t?.renderBefore??null;s._$litPart$=r=new _t(e.insertBefore(gt(),o),o,void 0,t??{});}return r._$AI(i),r};var St=globalThis,f=class extends k{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,St.litElementHydrateSupport?.({LitElement:f});var js=St.litElementPolyfillSupport;js?.({LitElement:f});(St.litElementVersions??(St.litElementVersions=[])).push("4.2.2");var g=i=>(e,t)=>{t!==void 0?t.addInitializer(()=>{customElements.define(i,e);}):customElements.define(i,e);};var Qs={attribute:true,type:String,converter:mt,reflect:false,hasChanged:Ot},Vs=(i=Qs,e,t)=>{let{kind:s,metadata:r}=t,o=globalThis.litPropertyMetadata.get(r);if(o===void 0&&globalThis.litPropertyMetadata.set(r,o=new Map),s==="setter"&&((i=Object.create(i)).wrapped=true),o.set(t.name,i),s==="accessor"){let{name:n}=t;return {set(l){let c=e.get.call(this);e.set.call(this,l),this.requestUpdate(n,c,i,true,l);},init(l){return l!==void 0&&this.C(n,void 0,i,l),l}}}if(s==="setter"){let{name:n}=t;return function(l){let c=this[n];e.call(this,l),this.requestUpdate(n,c,i,true,l);}}throw Error("Unsupported decorator location: "+s)};function T(i){return (e,t)=>typeof t=="object"?Vs(i,e,t):((s,r,o)=>{let n=r.hasOwnProperty(o);return r.constructor.createProperty(o,s),n?Object.getOwnPropertyDescriptor(r,o):void 0})(i,e,t)}function E(i){return T({...i,state:true,attribute:false})}var $t=class extends f{constructor(){super(...arguments);this.method="";}createRenderRoot(){return this}render(){let t=this.method.toUpperCase();return a`<span class="method-badge method-badge-${t}">${t}</span>`}};h([T()],$t.prototype,"method",2),$t=h([g("bk-method-badge")],$t);var I="/__brakit/api",O="/__brakit",y={flows:`${I}/flows`,requests:`${I}/requests`,events:`${I}/events`,clear:`${I}/clear`,fetches:`${I}/fetches`,errors:`${I}/errors`,logs:`${I}/logs`,queries:`${I}/queries`,metricsLive:`${I}/metrics/live`,insights:`${I}/insights`,tab:`${I}/tab`,activity:`${I}/activity`};var et="polling",Ht="static",Ys="auth-handshake",Xs="auth-check",Ks="middleware",Tt={[Ys]:1,[Xs]:1,[Ks]:1};var re="fetch";var ie="error_event",oe="query",ne="issues";var ae={overview:"Overview",queries:"Queries",requests:"Requests",actions:"Actions",errors:"Errors",security:"Security",fetches:"Fetches",logs:"Logs",performance:"Performance"};var yt={overview:"Overview",actions:"Actions",requests:"Requests",fetches:"Server Fetches",queries:"Queries",errors:"Errors",logs:"Logs",performance:"Performance",security:"Security"},le={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 de=100,V=300,Y=800,pe=2e3,ue=100,he=50,me=500;var H="__all__",Ft={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)"},fe=["#2563eb","#7c3aed","#16a34a","#d97706","#dc2626","#0891b2","#ea580c","#c026d3","#059669","#db2777"],xt={green:"#4ade80",amber:"#fbbf24",red:"#f87171"},Bt=[{max:de,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:Y,label:"OK",color:"var(--amber)",bg:"rgba(217,119,6,0.06)",border:"rgba(217,119,6,0.15)"},{max:pe,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)",ge="rgba(113,113,122,0.7)",Ze="10px monospace",be="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"]),q={critical:{icon:"\u2717",cls:"critical",sort:0},warning:{icon:"\u26A0",cls:"warning",sort:1},info:{icon:"\u2139",cls:"info",sort:2}};function S(i){return i<1e3?i+"ms":(i/1e3).toFixed(1)+"s"}function U(i){return !i||i===0?"":i<1024?i+"b":(i/1024).toFixed(1)+"kb"}function P(i){return i?i.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,"""):""}function st(i){return i>=500?"status-pill-5xx":i>=400?"status-pill-4xx":i>=300?"status-pill-3xx":"status-pill-2xx"}function as(i){return os[i]||(i>=500?"Server Error":i>=400?"Client Error":"OK")}function zs(i,e){if(is.has(i.toLowerCase())){let t=String(e);return t.length<=8?"****":t.slice(0,4)+"..."+t.slice(-4)+" ("+t.length+" chars)"}return String(e)}function rt(i){return !i||Object.keys(i).length===0?'<span style="color:var(--text-muted)">No headers</span>':Object.entries(i).map(([e,t])=>'<span class="json-key">'+P(e)+"</span>: "+P(zs(e,t))).join(`
|
|
714
|
+
`)}function X(i){if(!i)return '<span style="color:var(--text-muted)">No body</span>';try{let e=JSON.parse(i);return Js(JSON.stringify(e,null,2))}catch{return P(i)}}function Js(i){return P(i).replace(/("(?:[^"\\]|\\.)*")(\s*:)?|\b(true|false)\b|\bnull\b|(-?\d+\.?\d*(?:[eE][+-]?\d+)?)/g,(e,t,s,r,o)=>t?s?'<span class="json-key">'+t+"</span>"+s:'<span class="json-str">'+t+"</span>":r?'<span class="json-bool">'+e+"</span>":o?'<span class="json-num">'+e+"</span>":e==="null"?'<span class="json-null">null</span>':e)}var Rt=class extends f{constructor(){super(...arguments);this.code=0;}createRenderRoot(){return this}render(){let t=st(this.code);return a`<span class="status-pill ${t}">${this.code}</span>`}};h([T({type:Number})],Rt.prototype,"code",2),Rt=h([g("bk-status-pill")],Rt);var wt=class extends f{constructor(){super(...arguments);this.ms=0;}createRenderRoot(){return this}render(){return a`<span class="req-duration">${S(this.ms)}</span>`}};h([T({type:Number})],wt.prototype,"ms",2),wt=h([g("bk-duration-label")],wt);var it=class extends f{constructor(){super(...arguments);this.title="";this.subtitle="";}createRenderRoot(){return this}render(){return a`
|
|
679
715
|
<div class="empty">
|
|
680
716
|
<span class="empty-title">${this.title}</span>
|
|
681
717
|
<span class="empty-sub">${this.subtitle}</span>
|
|
682
718
|
</div>
|
|
683
|
-
`}};
|
|
719
|
+
`}};h([T()],it.prototype,"title",2),h([T()],it.prototype,"subtitle",2),it=h([g("bk-empty-state")],it);var C=class extends f{constructor(){super(...arguments);this.message="";this.visible=false;}createRenderRoot(){return this}static show(t){let s=document.querySelector("bk-toast");s&&s.showMessage(t);}showMessage(t){this.hideTimer&&clearTimeout(this.hideTimer),this.message=t,this.visible=true,this.hideTimer=setTimeout(()=>{this.visible=false;},2e3);}render(){return a`<div class="toast ${this.visible?"show":""}">${this.message}</div>`}};h([E()],C.prototype,"message",2),h([E()],C.prototype,"visible",2),C=h([g("bk-toast")],C);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),C.show(this.toastMessage);}catch{}}render(){return a`<button class="query-detail-copy" @click=${this.copy}>${this.label}</button>`}};h([T()],K.prototype,"text",2),h([T()],K.prototype,"label",2),h([T({attribute:"toast-message"})],K.prototype,"toastMessage",2),K=h([g("bk-copy-button")],K);var z=class extends f{constructor(){super(...arguments);this.value="";this.label="";this.color="";}createRenderRoot(){return this}render(){return a`
|
|
684
720
|
<div class="fetch-stat">
|
|
685
721
|
<span class="fetch-stat-value" style="color:${this.color}">${this.value}</span>
|
|
686
722
|
<span class="fetch-stat-label">${this.label}</span>
|
|
687
723
|
</div>
|
|
688
|
-
`}};
|
|
724
|
+
`}};h([T()],z.prototype,"value",2),h([T()],z.prototype,"label",2),h([T()],z.prototype,"color",2),z=h([g("bk-stat-card")],z);var F=class extends Event{constructor(e,t,s,r){super("context-request",{bubbles:true,composed:true}),this.context=e,this.contextTarget=t,this.callback=s,this.subscribe=r??false;}};var ot=class{constructor(e,t,s,r){if(this.subscribe=false,this.provided=false,this.value=void 0,this.t=(o,n)=>{this.unsubscribe&&(this.unsubscribe!==n&&(this.provided=false,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=o,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=true,this.callback&&this.callback(o,n)),this.unsubscribe=n;},this.host=e,t.context!==void 0){let o=t;this.context=o.context,this.callback=o.callback,this.subscribe=o.subscribe??false;}else this.context=t,this.callback=s,this.subscribe=r??false;this.host.addController(this);}hostConnected(){this.dispatchRequest();}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0);}dispatchRequest(){this.host.dispatchEvent(new F(this.context,this.host,this.t,this.subscribe));}};var Gt=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 Ee=class extends Event{constructor(e,t){super("context-provider",{bubbles:true,composed:true}),this.context=e,this.contextTarget=t;}},nt=class extends Gt{constructor(e,t,s){super(t.context!==void 0?t.initialValue:s),this.onContextRequest=r=>{if(r.context!==this.context)return;let o=r.contextTarget??r.composedPath()[0];o!==this.host&&(r.stopPropagation(),this.addCallback(r.callback,o,r.subscribe));},this.onProviderRequest=r=>{if(r.context!==this.context||(r.contextTarget??r.composedPath()[0])===this.host)return;let o=new Set;for(let[n,{consumerHost:l}]of this.subscriptions)o.has(n)||(o.add(n),l.dispatchEvent(new F(this.context,l,n,true)));r.stopPropagation();},this.host=e,t.context!==void 0?this.context=t.context:this.context=t,this.attachListeners(),this.host.addController?.(this);}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest);}hostConnected(){this.host.dispatchEvent(new Ee(this.context,this.host));}};function _e({context:i}){return (e,t)=>{let s=new WeakMap;if(typeof t=="object")return {get(){return e.get.call(this)},set(r){return s.get(this).setValue(r),e.set.call(this,r)},init(r){return s.set(this,new nt(this,{context:i,initialValue:r})),r}};{e.constructor.addInitializer((n=>{s.set(n,new nt(n,{context:i}));}));let r=Object.getOwnPropertyDescriptor(e,t),o;if(r===void 0){let n=new WeakMap;o={get(){return n.get(this)},set(l){s.get(this).setValue(l),n.set(this,l);},configurable:true,enumerable:true};}else {let n=r.set;o={...r,set(l){s.get(this).setValue(l),n?.call(this,l);}};}return void Object.defineProperty(e,t,o)}}}function R({context:i,subscribe:e}){return (t,s)=>{typeof s=="object"?s.addInitializer((function(){new ot(this,{context:i,callback:r=>{t.set.call(this,r);},subscribe:e});})):t.constructor.addInitializer((r=>{new ot(r,{context:i,callback:o=>{r[s]=o;},subscribe:e});}));}}var x="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 at=class extends f{constructor(){super(...arguments);this.expandedIdx=-1;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}toggleError(t){this.expandedIdx=this.expandedIdx===t?-1:t;}renderErrorRow(t,s){let r=new Date(t.timestamp).toLocaleTimeString(),o=this.expandedIdx===s;return a`
|
|
689
725
|
<div
|
|
690
|
-
class="req-row tel-clickable ${
|
|
726
|
+
class="req-row tel-clickable ${o?"expanded":""}"
|
|
691
727
|
@click=${()=>this.toggleError(s)}
|
|
692
728
|
>
|
|
693
729
|
<span class="tel-error-name" title=${t.name}>${t.name}</span>
|
|
694
730
|
<span class="tel-message" title=${t.message}>${t.message}</span>
|
|
695
731
|
<span class="tel-timestamp">${r}</span>
|
|
696
732
|
</div>
|
|
697
|
-
${
|
|
698
|
-
`}render(){let t=this.store.state.errors;return t.length===0?
|
|
733
|
+
${o&&t.stack?a`<div class="error-stack">${t.stack}</div>`:d}
|
|
734
|
+
`}render(){let t=this.store.state.errors;return t.length===0?a`<bk-empty-state
|
|
699
735
|
title="No errors"
|
|
700
736
|
subtitle="No errors have been captured yet"
|
|
701
|
-
></bk-empty-state>`:
|
|
737
|
+
></bk-empty-state>`:a`
|
|
702
738
|
<div class="col-header">
|
|
703
739
|
<span style="width:180px">Type</span>
|
|
704
740
|
<span style="flex:1">Message</span>
|
|
@@ -707,27 +743,27 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
707
743
|
<div id="error-list">
|
|
708
744
|
${t.map((s,r)=>this.renderErrorRow(s,r))}
|
|
709
745
|
</div>
|
|
710
|
-
`}};
|
|
746
|
+
`}};h([R({context:x})],at.prototype,"store",2),h([E()],at.prototype,"expandedIdx",2),at=h([g("bk-errors-view")],at);var At=class extends f{createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}renderAnalysis(e){if(e.length===0)return d;let t={error:0,warn:0,info:0,debug:0,log:0};for(let s of e)t[s.level]!==void 0&&t[s.level]++;return a`
|
|
711
747
|
<div id="log-analysis">
|
|
712
748
|
<div class="fetch-summary">
|
|
713
749
|
<bk-stat-card value=${String(e.length)} label="Total Logs"></bk-stat-card>
|
|
714
|
-
${t.error>0?
|
|
715
|
-
${t.warn>0?
|
|
750
|
+
${t.error>0?a`<bk-stat-card value=${String(t.error)} label="Errors" color="var(--red)"></bk-stat-card>`:d}
|
|
751
|
+
${t.warn>0?a`<bk-stat-card value=${String(t.warn)} label="Warnings" color="var(--amber)"></bk-stat-card>`:d}
|
|
716
752
|
<bk-stat-card value=${String(t.info)} label="Info"></bk-stat-card>
|
|
717
|
-
${t.debug>0?
|
|
718
|
-
${t.log>0?
|
|
753
|
+
${t.debug>0?a`<bk-stat-card value=${String(t.debug)} label="Debug"></bk-stat-card>`:d}
|
|
754
|
+
${t.log>0?a`<bk-stat-card value=${String(t.log)} label="Log"></bk-stat-card>`:d}
|
|
719
755
|
</div>
|
|
720
756
|
</div>
|
|
721
|
-
`}renderLogRow(e){let t=new Date(e.timestamp).toLocaleTimeString();return
|
|
757
|
+
`}renderLogRow(e){let t=new Date(e.timestamp).toLocaleTimeString();return a`
|
|
722
758
|
<div class="req-row">
|
|
723
759
|
<span class="tel-level tel-level-${e.level}">${e.level.toUpperCase()}</span>
|
|
724
760
|
<span class="tel-message tel-mono" title=${e.message}>${e.message}</span>
|
|
725
761
|
<span class="tel-timestamp">${t}</span>
|
|
726
762
|
</div>
|
|
727
|
-
`}render(){let e=this.store.state.logs;return e.length===0?
|
|
763
|
+
`}render(){let e=this.store.state.logs;return e.length===0?a`<bk-empty-state
|
|
728
764
|
title="No logs"
|
|
729
765
|
subtitle="No console output has been captured yet"
|
|
730
|
-
></bk-empty-state>`:
|
|
766
|
+
></bk-empty-state>`:a`
|
|
731
767
|
${this.renderAnalysis(e)}
|
|
732
768
|
<div class="col-header">
|
|
733
769
|
<span style="width:52px">Level</span>
|
|
@@ -737,28 +773,28 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
737
773
|
<div id="log-list">
|
|
738
774
|
${e.map(t=>this.renderLogRow(t))}
|
|
739
775
|
</div>
|
|
740
|
-
`}};
|
|
776
|
+
`}};h([R({context:x})],At.prototype,"store",2),At=h([g("bk-logs-view")],At);var tr=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 ls(i){let e=i.trim().match(/^(\w+)/);return e?e[1].toUpperCase():"?"}function cs(i){let e=i.replace(/\s+/g," ").trim(),t=e.match(/\bFROM\s+["'`]?(\w+)["'`]?/i);if(t)return t[1];let s=e.match(/\bINTO\s+["'`]?(\w+)["'`]?/i);if(s)return s[1];let r=e.match(/\bUPDATE\s+["'`]?(\w+)["'`]?/i);return r?r[1]:""}function ds(i){return P(i).replace(/\b\w+\b/g,e=>tr.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?ls(t.sql):"?")).toUpperCase(),r=t.table||t.model||(t.sql?cs(t.sql):""),o=t.sql||s+" "+r;return {op:s,table:r,sqlText:o}}renderQueryRow(t,s){let{op:r,table:o,sqlText:n}=this.getQueryInfo(t),l=Ft[r]||"var(--text-dim)",c=t.durationMs>ue,p=t.sql||r+" "+o,u=this.expandedIdx===s;return a`
|
|
741
777
|
<div>
|
|
742
778
|
<div
|
|
743
|
-
class="req-row query-row tel-clickable ${
|
|
779
|
+
class="req-row query-row tel-clickable ${u?"expanded":""}"
|
|
744
780
|
@click=${()=>this.toggleQuery(s)}
|
|
745
781
|
>
|
|
746
|
-
<span class="query-op" title=${r} style="color:${
|
|
747
|
-
<span class="query-table" title=${
|
|
748
|
-
<span class="query-preview" title=${
|
|
749
|
-
<span class="query-dur${
|
|
782
|
+
<span class="query-op" title=${r} style="color:${l}">${r}</span>
|
|
783
|
+
<span class="query-table" title=${o}>${o}</span>
|
|
784
|
+
<span class="query-preview" title=${p}>${p}</span>
|
|
785
|
+
<span class="query-dur${c?" query-slow":""}">${this.queryDuration(t.durationMs)}</span>
|
|
750
786
|
</div>
|
|
751
|
-
<div class="query-detail ${
|
|
752
|
-
${
|
|
753
|
-
<pre class="query-detail-sql" .innerHTML=${ds(
|
|
754
|
-
<bk-copy-button .text=${
|
|
787
|
+
<div class="query-detail ${u?"open":""}">
|
|
788
|
+
${u?a`
|
|
789
|
+
<pre class="query-detail-sql" .innerHTML=${ds(n)}></pre>
|
|
790
|
+
<bk-copy-button .text=${n} label="Copy"></bk-copy-button>
|
|
755
791
|
`:d}
|
|
756
792
|
</div>
|
|
757
793
|
</div>
|
|
758
|
-
`}render(){let t=this.store.state.queries;return t.length===0?
|
|
794
|
+
`}render(){let t=this.store.state.queries;return t.length===0?a`<bk-empty-state
|
|
759
795
|
title="No queries"
|
|
760
796
|
subtitle="No database queries have been captured yet"
|
|
761
|
-
></bk-empty-state>`:
|
|
797
|
+
></bk-empty-state>`:a`
|
|
762
798
|
<div class="col-header">
|
|
763
799
|
<span style="width:70px;border-right:1px solid var(--border);padding-right:16px">Operation</span>
|
|
764
800
|
<span style="width:170px;border-right:1px solid var(--border);padding-right:16px">Table</span>
|
|
@@ -768,35 +804,35 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
768
804
|
<div id="query-list">
|
|
769
805
|
${t.map((s,r)=>this.renderQueryRow(s,r))}
|
|
770
806
|
</div>
|
|
771
|
-
`}};
|
|
807
|
+
`}};h([R({context:x})],lt.prototype,"store",2),h([E()],lt.prototype,"expandedIdx",2),lt=h([g("bk-queries-view")],lt);function Se(i){return i.replace(/'/g,"'\\''")}function er(i,e){let t=Object.entries(i.headers||{}).filter(([o])=>!ns.has(o)).map(([o,n])=>`-H '${Se(o)}: ${Se(n)}'`).join(" "),s=i.requestBody?` -d '${Se(i.requestBody)}'`:"",r=e?`http://localhost:${e}`:"";return `curl -X ${i.method} ${t}${s} '${r}${i.url}'`}function ct(i){let e=window.__BRAKIT_CONFIG__?.port??"",t=er(i,e);navigator.clipboard.writeText(t).then(()=>C.show("Copied cURL command"));}var dt=class extends f{constructor(){super(...arguments);this.expandedId=null;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}toggleRequest(t){this.expandedId=this.expandedId===t?null:t;}handleCopyAsCurl(t,s){s.stopPropagation(),ct(t);}renderDetail(t){return a`
|
|
772
808
|
<div class="detail-meta">
|
|
773
809
|
<span><bk-method-badge .method=${t.method}></bk-method-badge> ${t.url}</span>
|
|
774
810
|
<span><bk-status-pill .code=${t.statusCode}></bk-status-pill></span>
|
|
775
811
|
<span>${t.durationMs}ms</span>
|
|
776
|
-
${t.responseSize?
|
|
812
|
+
${t.responseSize?a`<span>${U(t.responseSize)}</span>`:d}
|
|
777
813
|
</div>
|
|
778
814
|
<div class="request-timeline tl-hidden" data-request-id=${t.id} data-request-started=${String(t.startedAt)}></div>
|
|
779
815
|
<div class="detail-grid">
|
|
780
|
-
<div class="detail-section"><h4>Request Headers</h4><pre .innerHTML=${
|
|
781
|
-
<div class="detail-section"><h4>Response Headers</h4><pre .innerHTML=${
|
|
816
|
+
<div class="detail-section"><h4>Request Headers</h4><pre .innerHTML=${rt(t.headers)}></pre></div>
|
|
817
|
+
<div class="detail-section"><h4>Response Headers</h4><pre .innerHTML=${rt(t.responseHeaders)}></pre></div>
|
|
782
818
|
<div class="detail-section"><h4>Request Body</h4><pre .innerHTML=${X(t.requestBody)}></pre></div>
|
|
783
819
|
<div class="detail-section"><h4>Response Body</h4><pre .innerHTML=${X(t.responseBody)}></pre></div>
|
|
784
820
|
</div>
|
|
785
821
|
<div class="detail-actions">
|
|
786
822
|
<button class="btn btn-curl" @click=${s=>this.handleCopyAsCurl(t,s)}>Copy cURL</button>
|
|
787
823
|
</div>
|
|
788
|
-
`}renderRequestRow(t){let s=this.expandedId===t.id;return
|
|
824
|
+
`}renderRequestRow(t){let s=this.expandedId===t.id;return a`
|
|
789
825
|
<div class="req-row ${s?"expanded":""}" @click=${()=>this.toggleRequest(t.id)}>
|
|
790
826
|
<div class="req-summary">
|
|
791
827
|
<bk-method-badge .method=${t.method}></bk-method-badge>
|
|
792
828
|
<span class="req-url">${t.url}</span>
|
|
793
829
|
<bk-status-pill .code=${t.statusCode}></bk-status-pill>
|
|
794
830
|
<bk-duration-label .ms=${t.durationMs}></bk-duration-label>
|
|
795
|
-
<span class="req-size">${
|
|
831
|
+
<span class="req-size">${U(t.responseSize)}</span>
|
|
796
832
|
</div>
|
|
797
833
|
</div>
|
|
798
834
|
<div class="req-detail ${s?"open":""}">${s?this.renderDetail(t):d}</div>
|
|
799
|
-
`}render(){let t=this.store.state.requests.filter(s=>!s.path?.startsWith(O));return t.length===0?
|
|
835
|
+
`}render(){let t=this.store.state.requests.filter(s=>!s.path?.startsWith(O));return t.length===0?a`<bk-empty-state title="No requests" subtitle="No HTTP requests have been captured yet"></bk-empty-state>`:a`
|
|
800
836
|
<div class="col-header">
|
|
801
837
|
<span style="width:60px">Method</span>
|
|
802
838
|
<span style="flex:1">URL</span>
|
|
@@ -805,19 +841,19 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
805
841
|
<span style="width:60px;text-align:right">Size</span>
|
|
806
842
|
</div>
|
|
807
843
|
<div id="request-list">${t.map(s=>this.renderRequestRow(s))}</div>
|
|
808
|
-
`}};
|
|
844
|
+
`}};h([R({context:x})],dt.prototype,"store",2),h([E()],dt.prototype,"expandedId",2),dt=h([g("bk-requests-view")],dt);var Ct=class extends f{createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}buildGroups(e,t){let s=new Map;for(let o of t)s.set(o.id,o);let r={};for(let o of e){let n=o.method+" "+o.url;r[n]||(r[n]={method:o.method,url:o.url,count:0,totalDur:0,maxDur:0,errors:0,callers:{},statusCodes:{},firstTs:o.timestamp,lastTs:o.timestamp});let l=r[n];if(l.count++,l.totalDur+=o.durationMs,o.durationMs>l.maxDur&&(l.maxDur=o.durationMs),o.statusCode>=400&&l.errors++,l.statusCodes[o.statusCode]=(l.statusCodes[o.statusCode]||0)+1,o.timestamp<l.firstTs&&(l.firstTs=o.timestamp),o.timestamp>l.lastTs&&(l.lastTs=o.timestamp),o.parentRequestId){let c=s.get(o.parentRequestId);c&&(l.callers[c.method+" "+(c.path||c.url)]=1);}}return Object.values(r).sort((o,n)=>n.count-o.count)}renderSummary(e){let t=new Set,s=0,r=0;for(let n of e)t.add(n.url),n.statusCode>=400&&s++,r+=n.durationMs;let o=Math.round(r/e.length);return a`
|
|
809
845
|
<div class="fetch-summary">
|
|
810
846
|
<bk-stat-card value=${String(e.length)} label="Total Fetches"></bk-stat-card>
|
|
811
847
|
<bk-stat-card value=${String(t.size)} label="Unique URLs"></bk-stat-card>
|
|
812
848
|
<bk-stat-card value=${String(s)} label="Errors" color=${s>0?"var(--red)":""}></bk-stat-card>
|
|
813
|
-
<bk-stat-card value=${S(
|
|
849
|
+
<bk-stat-card value=${S(o)} label="Avg Duration"></bk-stat-card>
|
|
814
850
|
</div>
|
|
815
|
-
`}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),
|
|
851
|
+
`}formatTime(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}renderGroup(e){let t=Math.round(e.totalDur/e.count),s=e.count>0?Math.round(e.errors/e.count*100):0,r=Object.keys(e.callers),o=Object.entries(e.statusCodes),n=o.length>0?Number(o.sort((l,c)=>c[1]-l[1])[0][0]):0;return a`
|
|
816
852
|
<div class="fetch-group">
|
|
817
853
|
<div class="fetch-group-header">
|
|
818
854
|
<bk-method-badge .method=${e.method}></bk-method-badge>
|
|
819
855
|
<span class="fetch-group-url" title=${e.url}>${e.url}</span>
|
|
820
|
-
${
|
|
856
|
+
${n>0?a`<bk-status-pill .code=${n}></bk-status-pill>`:d}
|
|
821
857
|
<span class="fetch-group-count">${e.count}x</span>
|
|
822
858
|
</div>
|
|
823
859
|
<div class="fetch-group-meta">
|
|
@@ -825,30 +861,33 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
825
861
|
<span class="fetch-group-sep">\u00b7</span>
|
|
826
862
|
<span>max ${S(e.maxDur)}</span>
|
|
827
863
|
<span class="fetch-group-sep">\u00b7</span>
|
|
828
|
-
${s>0?
|
|
864
|
+
${s>0?a`<span class="fetch-group-err">${s}% errors</span>`:a`<span class="fetch-group-ok">0% errors</span>`}
|
|
829
865
|
</div>
|
|
830
|
-
${e.firstTs>0?
|
|
866
|
+
${e.firstTs>0?a`
|
|
831
867
|
<div class="fetch-group-timeline">
|
|
832
868
|
<span class="fetch-group-timeline-dot"></span>
|
|
833
869
|
<span class="fetch-group-timeline-range">
|
|
834
|
-
${this.formatTime(e.firstTs)}${e.firstTs!==e.lastTs?
|
|
870
|
+
${this.formatTime(e.firstTs)}${e.firstTs!==e.lastTs?a` \u2192 ${this.formatTime(e.lastTs)}`:d}
|
|
835
871
|
</span>
|
|
836
872
|
</div>`:d}
|
|
837
|
-
${r.length>0?
|
|
873
|
+
${r.length>0?a`
|
|
838
874
|
<div class="fetch-group-callers">
|
|
839
875
|
<span class="fetch-group-callers-label">Called by</span>
|
|
840
|
-
${r.map(
|
|
876
|
+
${r.map(l=>a`<span class="fetch-group-caller-pill">${l}</span>`)}
|
|
841
877
|
</div>`:d}
|
|
842
878
|
</div>
|
|
843
|
-
`}render(){let e=this.store.state.fetches,t=this.store.state.requests;if(e.length===0)return
|
|
879
|
+
`}render(){let e=this.store.state.fetches,t=this.store.state.requests;if(e.length===0)return a`<bk-empty-state title="No fetches" subtitle="No outbound HTTP calls have been captured yet"></bk-empty-state>`;let s=this.buildGroups(e,t);return a`
|
|
844
880
|
<div class="fetch-analysis" id="fetch-analysis">
|
|
845
881
|
${this.renderSummary(e)}
|
|
846
|
-
${s.length>0?
|
|
882
|
+
${s.length>0?a`
|
|
847
883
|
<div class="fetch-groups-title">Grouped by URL (${s.length})</div>
|
|
848
884
|
<div class="fetch-groups">${s.map(r=>this.renderGroup(r))}</div>
|
|
849
885
|
`:d}
|
|
850
886
|
</div>
|
|
851
|
-
`}};
|
|
887
|
+
`}};h([R({context:x})],Ct.prototype,"store",2),Ct=h([g("bk-fetches-view")],Ct);function ps(i,e){if(e>=400)return "var(--red)";switch(i){case "GET":return "var(--green)";case "POST":return "var(--blue)";case "PUT":case "PATCH":return "var(--amber)";case "DELETE":return "var(--red)";default:return "var(--text-muted)"}}function $e(i){return i==="query"?"var(--accent)":"var(--cyan)"}function or(i){return i.type==="query"||i.type==="fetch"}function nr(i){let e=(i.normalizedOp||i.operation||"QUERY").toUpperCase(),t=i.table||i.model||"";return {label:`${e} ${t}`,tooltip:i.sql||`${e} ${t}`}}function ar(i){return {label:`${i.method} ${i.url}`,tooltip:`${i.method} ${i.url}`}}function lr(i,e,t,s,r,o){let n=i.data.durationMs||0,l,c;if(o){let p=Math.max(i.timestamp-s,0);l=Math.min(p/r*100,95),c=Math.max(n/r*100,1.5);}else {let p=t[0].timestamp,m=t[t.length-1].timestamp-p;l=m>0?(i.timestamp-p)/m*85:e/Math.max(t.length-1,1)*85,c=Math.max(n/r*100,1.5);}return l+c>100&&(c=Math.max(100-l,1.5)),{leftPct:l,widthPct:c}}function cr(i,e){let t=i.timeline.filter(or);if(t.length===0)return [];let s=e.startedAt,r=e.durationMs||1,o=Math.abs(t[0].timestamp-s)<r*10;return t.map((n,l)=>{let c=n.data.durationMs||0,{leftPct:p,widthPct:u}=lr(n,l,t,s,r,o),m=n.type==="query"?nr(n.data):ar(n.data);return {type:n.type,label:m.label,durMs:c,durLabel:S(c),tooltip:m.tooltip,leftPct:p,widthPct:u}})}function hs(i,e){let t=i.requests.filter(l=>!l.isStrictModeDupe);if(t.length===0)return {rows:[],totalMs:0};let s=Math.min(...t.map(l=>l.startedAt)),o=Math.max(...t.map(l=>l.startedAt+l.durationMs))-s;return o===0?{rows:[],totalMs:0}:{rows:t.map(l=>{let c=(l.startedAt-s)/o*100,p=Math.max(l.durationMs/o*100,.5),u=e?.activities?.[l.id],m=u?cr(u,l):[];return {label:`${l.method} ${l.label}`,leftPct:c,widthPct:p,color:ps(l.method,l.statusCode),durMs:l.durationMs,durLabel:S(l.durationMs),tooltip:`${l.method} ${l.label} (${S(l.durationMs)})`,subEvents:m}}),totalMs:o}}function ms(i){let e=i.requests,t=[],s=[],r=[],o=[],n=new Map;for(let p of e){let u=p.label,m=p.pollingDurationMs||p.durationMs;if(!Tt[p.category||""]){if(p.isDuplicate){let b=n.get(u);b?(b.count++,b.wastedMs+=m):n.set(u,{name:u,count:2,wastedMs:m});continue}if(p.statusCode>=400){s.push(u+" ("+as(p.statusCode)+")");continue}p.responseSize>51200&&r.push("Large response: "+u+" returned "+U(p.responseSize)),t.push(u);}}for(let p of n.values())o.push(p);let l="";if(o.length>0){let p=o.map(m=>m.name).join(", "),u=o.reduce((m,b)=>m+b.wastedMs,0);l="Your app fetches "+p+" multiple times on this page. This wastes ~"+S(u)+". Try caching these calls, deduplicating with React Query/SWR, or moving them to a shared layout.";}else s.length>0&&(l="Some requests are failing. Check your API routes and make sure the endpoints exist.");let c=e.filter(p=>p.durationMs>2e3&&p.category!==et);return c.length>0&&!l&&(l=c.map(p=>p.label).join(", ")+` is taking over ${S(2e3)}. Consider adding caching or optimizing the backend query.`),{successes:t,errors:s,warnings:r,duplicates:o,tip:l}}var M=class extends f{constructor(){super(...arguments);this.expandedFlowIdx=-1;this.expandedSubReqIdx=-1;this.flowDetailTab="insights";this.flowTimeline=null;this.flowTimelineLoading=false;}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}get flows(){return this.store.state.flows}get viewMode(){return this.store.state.viewMode}flowDotClass(t){return t.hasErrors?"dot-error":t.redundancyPct>0?"dot-warn":"dot-clean"}flowBadgeInfo(t){if(t.hasErrors){let s=t.requests.filter(r=>r.statusCode>=400).length;return {text:s+" error"+(s!==1?"s":""),cls:"badge-error"}}return t.redundancyPct>0?{text:t.redundancyPct+"% redundant",cls:"badge-warn"}:{text:"clean",cls:"badge-clean"}}toggleFlow(t){this.expandedFlowIdx===t?this.expandedFlowIdx=-1:(this.expandedFlowIdx=t,this.expandedSubReqIdx=-1,this.flowDetailTab="insights",this.flowTimeline=null);}toggleSubReq(t,s){s.stopPropagation(),this.expandedSubReqIdx=this.expandedSubReqIdx===t?-1:t;}toggleBodyBlock(t){t.stopPropagation();let s=t.currentTarget,r=s.parentElement;if(!r)return;s.classList.toggle("open");let o=r.querySelector("pre");o&&o.classList.toggle("open");}switchTab(t,s,r){r.stopPropagation(),this.flowDetailTab=t,t==="timeline"&&!this.flowTimeline&&this.loadFlowTimeline(s);}async loadFlowTimeline(t){if(this.flowTimelineLoading)return;let s=t.requests.map(r=>r.id).filter(Boolean);if(s.length!==0){this.flowTimelineLoading=true;try{let r=await fetch(`${y.activity}?requestIds=${s.join(",")}`);if(!r.ok){this.flowTimelineLoading=!1;return}this.flowTimeline=await r.json();}catch{}this.flowTimelineLoading=false;}}loadTimelineForContainer(t){let s=t.querySelectorAll(".request-timeline");for(let r of s){let o=r.getAttribute("data-request-id");if(o&&!r.hasAttribute("data-loaded")){r.setAttribute("data-loaded","1");let n=document.createElement("bk-timeline-panel");n.setAttribute("request-id",o),n.setAttribute("request-started",r.getAttribute("data-request-started")||"0"),r.appendChild(n),r.classList.remove("tl-hidden");}}}updated(){if(this.expandedFlowIdx>=0&&this.flowDetailTab==="insights"){let t=this.querySelector(".flow-expand.open");t&&this.loadTimelineForContainer(t);}}render(){let t=this.flows;return t.length===0?a`<bk-empty-state
|
|
888
|
+
title="No actions yet"
|
|
889
|
+
subtitle="Start using your app to see user action flows here"
|
|
890
|
+
></bk-empty-state>`:a`
|
|
852
891
|
<div id="flow-col-header" class="col-header">
|
|
853
892
|
<span style="width:8px"></span>
|
|
854
893
|
<span style="flex:1">Action</span>
|
|
@@ -856,83 +895,203 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
856
895
|
<span style="width:120px;text-align:right">Status</span>
|
|
857
896
|
<span style="width:70px;text-align:right">Time</span>
|
|
858
897
|
</div>
|
|
859
|
-
<div id="flow-list"
|
|
860
|
-
|
|
861
|
-
|
|
898
|
+
<div id="flow-list">
|
|
899
|
+
${t.map((s,r)=>this.renderFlowRow(s,r))}
|
|
900
|
+
</div>
|
|
901
|
+
`}renderFlowRow(t,s){let r=this.expandedFlowIdx===s,o=this.flowDotClass(t),n=this.flowBadgeInfo(t);return a`
|
|
902
|
+
<div
|
|
903
|
+
class="flow-row ${r?"expanded":""}"
|
|
904
|
+
@click=${()=>this.toggleFlow(s)}
|
|
905
|
+
>
|
|
862
906
|
<div class="flow-summary-row">
|
|
863
|
-
<span class="flow-status-dot ${
|
|
907
|
+
<span class="flow-status-dot ${o}"></span>
|
|
864
908
|
<span class="flow-label">${t.label}</span>
|
|
865
|
-
<span class="flow-req-count"
|
|
866
|
-
|
|
867
|
-
|
|
909
|
+
<span class="flow-req-count"
|
|
910
|
+
>${t.requests.length}
|
|
911
|
+
req${t.requests.length!==1?"s":""}</span
|
|
912
|
+
>
|
|
913
|
+
<span class="flow-badge-pill ${n.cls}">${n.text}</span>
|
|
914
|
+
<span class="flow-duration"
|
|
915
|
+
>${S(t.totalDurationMs)}</span
|
|
916
|
+
>
|
|
868
917
|
</div>
|
|
869
918
|
</div>
|
|
870
919
|
<div class="flow-expand ${r?"open":""}">
|
|
871
|
-
${r?this.
|
|
920
|
+
${r?this.renderFlowDetail(t):d}
|
|
872
921
|
</div>
|
|
873
|
-
`}
|
|
874
|
-
<div>
|
|
875
|
-
<
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
922
|
+
`}renderFlowDetail(t){let s=this.viewMode==="simple"?"Insights":"Details";return a`
|
|
923
|
+
<div class="flow-detail-tabs">
|
|
924
|
+
<button
|
|
925
|
+
class="flow-tab ${this.flowDetailTab==="insights"?"active":""}"
|
|
926
|
+
@click=${r=>this.switchTab("insights",t,r)}
|
|
927
|
+
>
|
|
928
|
+
${s}
|
|
929
|
+
</button>
|
|
930
|
+
<button
|
|
931
|
+
class="flow-tab ${this.flowDetailTab==="timeline"?"active":""}"
|
|
932
|
+
@click=${r=>this.switchTab("timeline",t,r)}
|
|
933
|
+
>
|
|
934
|
+
Timeline
|
|
935
|
+
</button>
|
|
936
|
+
</div>
|
|
937
|
+
${this.flowDetailTab==="insights"?this.viewMode==="simple"?this.renderFlowInsights(t):this.renderFlowSubReqs(t):this.renderFlowWaterfall(t)}
|
|
938
|
+
`}renderFlowWaterfall(t){if(this.flowTimelineLoading)return a`<div class="wf-loading">Loading timeline...</div>`;let{rows:s,totalMs:r}=hs(t,this.flowTimeline);if(s.length===0)return d;let o=[];for(let n=0;n<=5;n++)o.push(S(r/5*n));return a`
|
|
939
|
+
<div class="flow-waterfall">
|
|
940
|
+
<div class="wf-time-axis">
|
|
941
|
+
${o.map(n=>a`<span>${n}</span>`)}
|
|
942
|
+
</div>
|
|
943
|
+
<div class="wf-rows">
|
|
944
|
+
${s.map(n=>this.renderWaterfallGroup(n))}
|
|
945
|
+
</div>
|
|
946
|
+
</div>
|
|
947
|
+
`}renderWaterfallGroup(t){return a`
|
|
948
|
+
<div class="wf-request-group">
|
|
949
|
+
<div class="wf-req-row" title="${t.tooltip}">
|
|
950
|
+
<div class="wf-req-label">${t.label}</div>
|
|
951
|
+
<div class="wf-bar-track">
|
|
952
|
+
<div
|
|
953
|
+
class="wf-bar"
|
|
954
|
+
style="left:${t.leftPct}%;width:${t.widthPct}%;background:${t.color}"
|
|
955
|
+
></div>
|
|
883
956
|
</div>
|
|
884
|
-
|
|
957
|
+
<div class="wf-req-dur">${t.durLabel}</div>
|
|
958
|
+
</div>
|
|
959
|
+
${t.subEvents.length>0?t.subEvents.map(s=>a`
|
|
960
|
+
<div class="wf-sub-row" title="${s.tooltip}">
|
|
961
|
+
<div class="wf-sub-label">
|
|
962
|
+
<span
|
|
963
|
+
class="wf-sub-dot"
|
|
964
|
+
style="background:${$e(s.type)}"
|
|
965
|
+
></span>
|
|
966
|
+
${s.label}
|
|
967
|
+
</div>
|
|
968
|
+
<div class="wf-bar-track">
|
|
969
|
+
<div
|
|
970
|
+
class="wf-bar wf-sub-bar-sized"
|
|
971
|
+
style="left:${t.leftPct+s.leftPct/100*t.widthPct}%;width:${s.widthPct/100*t.widthPct}%;background:${$e(s.type)}"
|
|
972
|
+
></div>
|
|
973
|
+
</div>
|
|
974
|
+
<div class="wf-sub-dur">${s.durLabel}</div>
|
|
975
|
+
</div>
|
|
976
|
+
`):d}
|
|
977
|
+
</div>
|
|
978
|
+
`}renderFlowInsights(t){let s=ms(t),r=s.errors.length>0||s.duplicates.length>0||s.warnings.length>0||!!s.tip;return a`
|
|
979
|
+
<div>
|
|
980
|
+
<div class="flow-traffic">
|
|
981
|
+
${t.requests.map(o=>this.renderTrafficCard(o))}
|
|
982
|
+
</div>
|
|
983
|
+
${r?a`
|
|
984
|
+
<div class="flow-divider"></div>
|
|
985
|
+
<div class="flow-insights">
|
|
986
|
+
${s.errors.map(o=>a`<div class="insight-line insight-error">
|
|
987
|
+
✗ ${o}
|
|
988
|
+
</div>`)}
|
|
989
|
+
${s.duplicates.map(o=>a`<div class="insight-line insight-warn">
|
|
990
|
+
⚠ ${o.name} — loaded ${o.count}x (wasting
|
|
991
|
+
~${S(o.wastedMs)})
|
|
992
|
+
</div>`)}
|
|
993
|
+
${s.warnings.map(o=>a`<div class="insight-line insight-warn">⚠ ${o}</div>`)}
|
|
994
|
+
${s.tip?a`<div class="insight-line insight-tip">
|
|
995
|
+
Tip: ${s.tip}
|
|
996
|
+
</div>`:d}
|
|
997
|
+
</div>
|
|
998
|
+
`:d}
|
|
885
999
|
</div>
|
|
886
|
-
`}renderTrafficCard(t){if(
|
|
887
|
-
<div
|
|
888
|
-
|
|
1000
|
+
`}renderTrafficCard(t){if(Tt[t.category||""])return d;let s=st(t.statusCode),r=S(t.pollingDurationMs||t.durationMs),o=!t.isDuplicate&&t.category!==Ht&&t.category!==et||t.requestBody&&t.method!=="GET"||!!t.responseBody;return a`
|
|
1001
|
+
<div
|
|
1002
|
+
class="traffic-card ${t.isStrictModeDupe?"strict-mode-dupe":""}"
|
|
1003
|
+
>
|
|
1004
|
+
<div class="traffic-card-header ${o?"has-details":""}">
|
|
889
1005
|
<bk-method-badge .method=${t.method}></bk-method-badge>
|
|
890
|
-
<span class="traffic-card-path ${t.isDuplicate?"is-dup":""}"
|
|
1006
|
+
<span class="traffic-card-path ${t.isDuplicate?"is-dup":""}"
|
|
1007
|
+
>${t.label}</span
|
|
1008
|
+
>
|
|
891
1009
|
<span class="status-pill ${s}">${t.statusCode}</span>
|
|
892
1010
|
<span class="traffic-card-dur">${r}</span>
|
|
893
|
-
${t.isDuplicate?
|
|
1011
|
+
${t.isDuplicate?a`<span class="traffic-card-dup">duplicate</span>`:a`<span class="traffic-card-size"
|
|
1012
|
+
>${U(t.responseSize)}</span
|
|
1013
|
+
>`}
|
|
894
1014
|
</div>
|
|
895
|
-
${t.isStrictModeDupe?
|
|
896
|
-
|
|
1015
|
+
${t.isStrictModeDupe?a`<div class="strict-mode-banner">
|
|
1016
|
+
React Strict Mode duplicate — does not happen in production
|
|
1017
|
+
</div>`:d}
|
|
1018
|
+
${!t.isDuplicate&&t.category!==Ht&&t.category!==et?a`<div
|
|
1019
|
+
class="request-timeline tl-hidden"
|
|
1020
|
+
data-request-id=${t.id}
|
|
1021
|
+
data-request-started=${String(t.startedAt)}
|
|
1022
|
+
></div>`:d}
|
|
897
1023
|
${t.requestBody&&t.method!=="GET"?this.renderBodyToggle("out","Request Body",t.requestBody):d}
|
|
898
1024
|
${t.responseBody?this.renderBodyToggle("in","Response Body",t.responseBody):d}
|
|
899
1025
|
</div>
|
|
900
|
-
`}renderBodyToggle(t,s,r){let
|
|
1026
|
+
`}renderBodyToggle(t,s,r){let o=t==="out"?"\u2192":"\u2190";return a`
|
|
901
1027
|
<div class="traffic-body">
|
|
902
1028
|
<button class="traffic-body-toggle" @click=${this.toggleBodyBlock}>
|
|
903
|
-
<span class="chevron"
|
|
1029
|
+
<span class="chevron">▸</span
|
|
1030
|
+
><span class="arrow-${t}">${o}</span> ${s}
|
|
904
1031
|
</button>
|
|
905
1032
|
<pre .innerHTML=${X(r)}></pre>
|
|
906
1033
|
</div>
|
|
907
|
-
`}renderFlowSubReqs(t){return
|
|
908
|
-
|
|
1034
|
+
`}renderFlowSubReqs(t){return a`<div class="flow-subreqs">
|
|
1035
|
+
${t.requests.map((s,r)=>this.renderSubReqRow(s,r))}
|
|
1036
|
+
</div>`}renderSubReqRow(t,s){let r=this.expandedSubReqIdx===s,o=st(t.statusCode),n=t.pollingDurationMs?S(t.pollingDurationMs):S(t.durationMs);return a`
|
|
1037
|
+
<div
|
|
1038
|
+
class="flow-subreq ${r?"expanded":""}"
|
|
1039
|
+
@click=${l=>this.toggleSubReq(s,l)}
|
|
1040
|
+
>
|
|
909
1041
|
<bk-method-badge .method=${t.method}></bk-method-badge>
|
|
910
|
-
<span class="subreq-label ${t.isDuplicate?"is-dup":""}"
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
1042
|
+
<span class="subreq-label ${t.isDuplicate?"is-dup":""}"
|
|
1043
|
+
>${t.path||t.url}</span
|
|
1044
|
+
>
|
|
1045
|
+
${t.isDuplicate?a`<span class="subreq-dup-tag">duplicate</span>`:d}
|
|
1046
|
+
<span class="status-pill ${o}">${t.statusCode}</span>
|
|
1047
|
+
<span class="subreq-dur">${n}</span>
|
|
914
1048
|
</div>
|
|
915
1049
|
<div class="flow-subreq-detail ${r?"open":""}">
|
|
916
1050
|
${r?this.renderSubReqDetail(t):d}
|
|
917
1051
|
</div>
|
|
918
|
-
`}renderSubReqDetail(t){let s=
|
|
1052
|
+
`}renderSubReqDetail(t){let s=st(t.statusCode);return a`
|
|
919
1053
|
<div class="detail-meta">
|
|
920
|
-
<span
|
|
921
|
-
|
|
1054
|
+
<span
|
|
1055
|
+
><bk-method-badge .method=${t.method}></bk-method-badge> ${P(t.url)}</span
|
|
1056
|
+
>
|
|
1057
|
+
<span
|
|
1058
|
+
><span class="status-pill ${s}">${t.statusCode}</span></span
|
|
1059
|
+
>
|
|
922
1060
|
<span>${t.durationMs}ms</span>
|
|
923
|
-
${t.responseSize?
|
|
1061
|
+
${t.responseSize?a`<span>${U(t.responseSize)}</span>`:d}
|
|
924
1062
|
</div>
|
|
925
|
-
<div
|
|
1063
|
+
<div
|
|
1064
|
+
class="request-timeline tl-hidden"
|
|
1065
|
+
data-request-id=${t.id}
|
|
1066
|
+
data-request-started=${String(t.startedAt)}
|
|
1067
|
+
></div>
|
|
926
1068
|
<div class="detail-grid">
|
|
927
|
-
<div class="detail-section"
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
1069
|
+
<div class="detail-section">
|
|
1070
|
+
<h4>Request Headers</h4>
|
|
1071
|
+
<pre .innerHTML=${rt(t.headers)}></pre>
|
|
1072
|
+
</div>
|
|
1073
|
+
<div class="detail-section">
|
|
1074
|
+
<h4>Response Headers</h4>
|
|
1075
|
+
<pre .innerHTML=${rt(t.responseHeaders)}></pre>
|
|
1076
|
+
</div>
|
|
1077
|
+
<div class="detail-section">
|
|
1078
|
+
<h4>Request Body</h4>
|
|
1079
|
+
<pre .innerHTML=${X(t.requestBody)}></pre>
|
|
1080
|
+
</div>
|
|
1081
|
+
<div class="detail-section">
|
|
1082
|
+
<h4>Response Body</h4>
|
|
1083
|
+
<pre .innerHTML=${X(t.responseBody)}></pre>
|
|
1084
|
+
</div>
|
|
931
1085
|
</div>
|
|
932
1086
|
<div class="detail-actions">
|
|
933
|
-
<button
|
|
1087
|
+
<button
|
|
1088
|
+
class="btn btn-curl"
|
|
1089
|
+
@click=${r=>{r.stopPropagation(),ct(t);}}
|
|
1090
|
+
>
|
|
1091
|
+
Copy cURL
|
|
1092
|
+
</button>
|
|
934
1093
|
</div>
|
|
935
|
-
`}};
|
|
1094
|
+
`}};h([R({context:x})],M.prototype,"store",2),h([E()],M.prototype,"expandedFlowIdx",2),h([E()],M.prototype,"expandedSubReqIdx",2),h([E()],M.prototype,"flowDetailTab",2),h([E()],M.prototype,"flowTimeline",2),h([E()],M.prototype,"flowTimelineLoading",2),M=h([g("bk-flows-view")],M);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(l=>l.state==="open"||l.state==="fixing"||l.state==="regressed"),s=e.filter(l=>l.state==="resolved");if(t.length===0&&s.length===0)return this.store.state.requests.length>0||this.store.state.logs.length>0||this.store.state.queries.length>0?a`
|
|
936
1095
|
<div class="sec-clear">
|
|
937
1096
|
<span class="sec-clear-icon">\u2713</span>
|
|
938
1097
|
<div class="sec-clear-text">
|
|
@@ -940,10 +1099,10 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
940
1099
|
<div class="sec-clear-sub">No security or quality issues detected this session</div>
|
|
941
1100
|
</div>
|
|
942
1101
|
</div>
|
|
943
|
-
`:
|
|
1102
|
+
`:a`<bk-empty-state title="Waiting for requests..." subtitle="Start using your app to see security findings here"></bk-empty-state>`;let r=0,o=0,n=0;for(let l of t){let c=l.issue.severity;c==="critical"?r++:c==="info"?n++:o++;}return a`
|
|
944
1103
|
<div id="security-content">
|
|
945
|
-
${this.renderSummary(t.length,s.length,r,
|
|
946
|
-
${t.length===0&&s.length>0?
|
|
1104
|
+
${this.renderSummary(t.length,s.length,r,o,n)}
|
|
1105
|
+
${t.length===0&&s.length>0?a`
|
|
947
1106
|
<div class="sec-clear">
|
|
948
1107
|
<span class="sec-clear-icon">\u2713</span>
|
|
949
1108
|
<div class="sec-clear-text">
|
|
@@ -955,105 +1114,105 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
955
1114
|
${t.length>0?this.renderOpenGroups(t):d}
|
|
956
1115
|
${s.length>0?this.renderResolved(s):d}
|
|
957
1116
|
</div>
|
|
958
|
-
`}renderSummary(e,t,s,r,
|
|
1117
|
+
`}renderSummary(e,t,s,r,o){return a`
|
|
959
1118
|
<div class="sec-summary">
|
|
960
1119
|
<div class="sec-summary-left">
|
|
961
1120
|
<span class="sec-summary-count">${e}</span>
|
|
962
1121
|
<span class="sec-summary-label">open issue${e!==1?"s":""}</span>
|
|
963
|
-
${t>0?
|
|
1122
|
+
${t>0?a`<span class="sec-resolved-badge">${t} resolved</span>`:d}
|
|
964
1123
|
</div>
|
|
965
1124
|
<div class="sec-summary-right">
|
|
966
|
-
${s>0?
|
|
967
|
-
${r>0?
|
|
968
|
-
${
|
|
1125
|
+
${s>0?a`<span class="sec-badge critical">${s} critical</span>`:d}
|
|
1126
|
+
${r>0?a`<span class="sec-badge warning">${r} warning</span>`:d}
|
|
1127
|
+
${o>0?a`<span class="sec-badge info">${o} info</span>`:d}
|
|
969
1128
|
</div>
|
|
970
1129
|
</div>
|
|
971
|
-
`}renderOpenGroups(e){let t={},s=[];for(let r of e){let
|
|
1130
|
+
`}renderOpenGroups(e){let t={},s=[];for(let r of e){let o=r.issue,n=o.rule||o.type;t[n]||(t[n]={rule:n,title:o.title,severity:o.severity,hint:o.hint,items:[]},s.push(n)),t[n].items.push(r);}return s.sort((r,o)=>{let n=q[t[r].severity]?.sort??2,l=q[t[o].severity]?.sort??2;return n!==l?n-l:t[o].items.length-t[r].items.length}),a`${s.map(r=>this.renderGroup(t[r]))}`}renderGroup(e){let t=q[e.severity]||q.info;return a`
|
|
972
1131
|
<div class="sec-group">
|
|
973
1132
|
<div class="sec-group-header">
|
|
974
1133
|
<span class="sec-group-icon ${t.cls}">${t.icon}</span>
|
|
975
1134
|
<span class="sec-group-title">${e.title}</span>
|
|
976
1135
|
<span class="sec-group-count">${e.items.length}</span>
|
|
977
1136
|
</div>
|
|
978
|
-
${e.hint?
|
|
1137
|
+
${e.hint?a`<div class="sec-hint">${e.hint}</div>`:d}
|
|
979
1138
|
<div class="sec-items">${e.items.map(s=>this.renderIssueItem(s))}</div>
|
|
980
1139
|
</div>
|
|
981
|
-
`}renderIssueItem(e){let t=e.issue;return
|
|
1140
|
+
`}renderIssueItem(e){let t=e.issue;return a`
|
|
982
1141
|
<div class="sec-item">
|
|
983
1142
|
<div class="sec-item-desc">${t.desc}</div>
|
|
984
|
-
${e.occurrences>1?
|
|
985
|
-
${e.state==="fixing"&&e.aiStatus==="fixed"?
|
|
986
|
-
${e.aiNotes?
|
|
1143
|
+
${e.occurrences>1?a`<span class="sec-item-count">${e.occurrences}x</span>`:d}
|
|
1144
|
+
${e.state==="fixing"&&e.aiStatus==="fixed"?a`<span class="sec-ai-badge sec-ai-fixing">AI fixed \u2014 awaiting verification</span>`:e.aiStatus==="wont_fix"?a`<span class="sec-ai-badge sec-ai-wontfix">AI: won\u2019t fix</span>`:e.state==="regressed"?a`<span class="sec-ai-badge sec-ai-fixing" style="background:var(--red)">regressed</span>`:d}
|
|
1145
|
+
${e.aiNotes?a`<div class="sec-ai-notes">${e.aiNotes}</div>`:d}
|
|
987
1146
|
</div>
|
|
988
|
-
`}renderResolved(e){return
|
|
1147
|
+
`}renderResolved(e){return a`
|
|
989
1148
|
<div class="sec-resolved-title">
|
|
990
1149
|
<span class="sec-resolved-check">\u2713</span> Resolved
|
|
991
1150
|
<span class="sec-resolved-count">${e.length}</span>
|
|
992
1151
|
</div>
|
|
993
1152
|
<div class="sec-group sec-group-resolved">
|
|
994
1153
|
<div class="sec-items">
|
|
995
|
-
${e.map(t=>
|
|
1154
|
+
${e.map(t=>a`
|
|
996
1155
|
<div class="sec-item sec-item-resolved">
|
|
997
1156
|
<span class="sec-resolved-item-icon">\u2713</span>
|
|
998
1157
|
<div class="sec-item-desc">${t.issue.title} \u2014 ${t.issue.endpoint||"global"}</div>
|
|
999
|
-
${t.aiStatus==="fixed"?
|
|
1000
|
-
${t.aiNotes?
|
|
1158
|
+
${t.aiStatus==="fixed"?a`<span class="sec-ai-badge sec-ai-verified">Verified fix</span>`:d}
|
|
1159
|
+
${t.aiNotes?a`<div class="sec-ai-notes">${t.aiNotes}</div>`:d}
|
|
1001
1160
|
</div>
|
|
1002
1161
|
`)}
|
|
1003
1162
|
</div>
|
|
1004
1163
|
</div>
|
|
1005
|
-
`}};
|
|
1164
|
+
`}};h([R({context:x})],It.prototype,"store",2),It=h([g("bk-security-view")],It);var pt=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 o=r.querySelector(".item-label");if(o&&o.textContent?.trim()===(yt[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 o=r.getAttribute("data-nav");o&&this.navigateToView(o);return}r=r.parentElement;}this.expandedCardIdx=this.expandedCardIdx===t?-1:t;}render(){let t=this.store.state,s=t.requests.filter(v=>!v.isStatic&&!v.isHealthCheck&&(!v.path||v.path.indexOf(O)!==0));if(!(s.length>0||t.queries.length>0||t.errors.length>0))return a`<bk-empty-state
|
|
1006
1165
|
title="Waiting for requests..."
|
|
1007
1166
|
subtitle="Start using your app to see insights here"
|
|
1008
|
-
></bk-empty-state>`;let
|
|
1167
|
+
></bk-empty-state>`;let o=s.filter(v=>v.statusCode>=400).length,n=new Set(["data-fetch","api-call","server-action","page-load"]),l=s.filter(v=>v.category&&n.has(v.category)),c=l.length>0?l:s,p=c.length>0?Math.round(c.reduce((v,L)=>v+L.durationMs,0)/c.length):0,u=t.issues||[],m=u.filter(v=>v.state==="open"||v.state==="regressed"),b=u.filter(v=>v.state==="fixing"),$=u.filter(v=>v.state==="resolved");return a`
|
|
1009
1168
|
<div class="ov-container" id="overview-content">
|
|
1010
|
-
${this.renderSummary(s.length,t.flows.length,
|
|
1011
|
-
${
|
|
1169
|
+
${this.renderSummary(s.length,t.flows.length,p,t.queries.length,o,t.fetches.length)}
|
|
1170
|
+
${m.length===0&&b.length===0&&$.length===0?a`<div class="ov-clear">
|
|
1012
1171
|
<span class="ov-clear-icon">\u2713</span>All clear \u2014 no issues detected
|
|
1013
1172
|
</div>`:d}
|
|
1014
|
-
${
|
|
1173
|
+
${m.length===0&&$.length>0?a`<div class="ov-clear">
|
|
1015
1174
|
<span class="ov-clear-icon">\u2713</span>All issues resolved \u2014
|
|
1016
|
-
${
|
|
1175
|
+
${$.length} finding${$.length!==1?"s were":" was"} detected and
|
|
1017
1176
|
fixed
|
|
1018
1177
|
</div>`:d}
|
|
1019
|
-
${
|
|
1020
|
-
${
|
|
1021
|
-
${
|
|
1178
|
+
${m.length>0?this.renderOpenIssues(m):d}
|
|
1179
|
+
${b.length>0?this.renderVerifying(b):d}
|
|
1180
|
+
${$.length>0?this.renderResolvedIssues($):d}
|
|
1022
1181
|
</div>
|
|
1023
|
-
`}renderSummary(t,s,r,
|
|
1182
|
+
`}renderSummary(t,s,r,o,n,l){return a`
|
|
1024
1183
|
<div class="ov-summary">
|
|
1025
1184
|
<div class="ov-stat"><span class="ov-stat-value">${t}</span><span class="ov-stat-label">Requests</span></div>
|
|
1026
1185
|
<div class="ov-stat"><span class="ov-stat-value">${s}</span><span class="ov-stat-label">Actions</span></div>
|
|
1027
1186
|
<div class="ov-stat"><span class="ov-stat-value">${S(r)}</span><span class="ov-stat-label">Avg Response</span></div>
|
|
1028
|
-
<div class="ov-stat"><span class="ov-stat-value">${
|
|
1029
|
-
<div class="ov-stat"><span class="ov-stat-value" style="color:${
|
|
1030
|
-
<div class="ov-stat"><span class="ov-stat-value">${
|
|
1187
|
+
<div class="ov-stat"><span class="ov-stat-value">${o}</span><span class="ov-stat-label">Queries</span></div>
|
|
1188
|
+
<div class="ov-stat"><span class="ov-stat-value" style="color:${n>0?"var(--red)":"var(--green)"}">${n}</span><span class="ov-stat-label">Errors</span></div>
|
|
1189
|
+
<div class="ov-stat"><span class="ov-stat-value">${l}</span><span class="ov-stat-label">Fetches</span></div>
|
|
1031
1190
|
</div>
|
|
1032
|
-
`}renderOpenIssues(t){return
|
|
1191
|
+
`}renderOpenIssues(t){return a`
|
|
1033
1192
|
<div class="ov-section-title">Issues Found <span class="ov-issue-count">${t.length}</span></div>
|
|
1034
1193
|
<div class="ov-cards">${t.map((s,r)=>this.renderIssueCard(s,r))}</div>
|
|
1035
|
-
`}renderIssueCard(t,s){let r=t.issue,
|
|
1036
|
-
<div class="ov-card ${
|
|
1037
|
-
<span class="ov-card-icon ${
|
|
1194
|
+
`}renderIssueCard(t,s){let r=t.issue,o=q[r.severity]||q.info,n=this.expandedCardIdx===s,l=t.aiStatus==="wont_fix"?a`<span class="sec-ai-badge sec-ai-wontfix">AI: won\u2019t fix</span>`:t.state==="regressed"?a`<span class="sec-ai-badge sec-ai-fixing" style="background:var(--red)">regressed</span>`:d,c=t.cleanHitsSinceLastSeen>0?a`<div class="ov-card-resolving">Resolving\u2026 ${t.cleanHitsSinceLastSeen}/${5} clean requests</div>`:d;return a`
|
|
1195
|
+
<div class="ov-card ${n?"expanded":""}" @click=${p=>this.toggleCard(s,p)}>
|
|
1196
|
+
<span class="ov-card-icon ${o.cls}">${o.icon}</span>
|
|
1038
1197
|
<div class="ov-card-body">
|
|
1039
|
-
<div class="ov-card-title">${r.title}${
|
|
1198
|
+
<div class="ov-card-title">${r.title}${l}</div>
|
|
1040
1199
|
<div class="ov-card-desc">${r.desc}</div>
|
|
1041
|
-
${
|
|
1042
|
-
<div class="ov-card-expand" style="display:${
|
|
1043
|
-
${r.detail?
|
|
1044
|
-
${r.hint?
|
|
1045
|
-
${r.nav?
|
|
1200
|
+
${c}
|
|
1201
|
+
<div class="ov-card-expand" style="display:${n?"block":"none"}">
|
|
1202
|
+
${r.detail?a`<div .innerHTML=${r.detail}></div>`:d}
|
|
1203
|
+
${r.hint?a`<div class="ov-card-hint">${r.hint}</div>`:d}
|
|
1204
|
+
${r.nav?a`<span class="ov-card-link" data-nav=${r.nav}>View in ${ae[r.nav]||r.nav} \u2192</span>`:d}
|
|
1046
1205
|
</div>
|
|
1047
1206
|
</div>
|
|
1048
|
-
<span class="ov-card-arrow">${
|
|
1207
|
+
<span class="ov-card-arrow">${n?"\u2193":"\u2192"}</span>
|
|
1049
1208
|
</div>
|
|
1050
|
-
`}renderVerifying(t){return
|
|
1209
|
+
`}renderVerifying(t){return a`
|
|
1051
1210
|
<div class="ov-section-title ov-resolved-title">
|
|
1052
1211
|
<span style="color:var(--yellow,#f5a623)">\u29d7</span> Awaiting Verification
|
|
1053
1212
|
<span class="ov-issue-count">${t.length}</span>
|
|
1054
1213
|
</div>
|
|
1055
1214
|
<div class="ov-cards">
|
|
1056
|
-
${t.map(s=>{let r=s.issue,
|
|
1215
|
+
${t.map(s=>{let r=s.issue,o=s.cleanHitsSinceLastSeen>0?a`<div class="ov-card-resolving">Verifying\u2026 ${s.cleanHitsSinceLastSeen}/${5} clean requests</div>`:d;return a`
|
|
1057
1216
|
<div class="ov-card ov-card-resolved">
|
|
1058
1217
|
<span class="ov-card-icon resolved">\u29d7</span>
|
|
1059
1218
|
<div class="ov-card-body">
|
|
@@ -1062,18 +1221,18 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
1062
1221
|
<span class="sec-ai-badge sec-ai-fixing">AI fixed \u2014 awaiting verification</span>
|
|
1063
1222
|
</div>
|
|
1064
1223
|
<div class="ov-card-desc">${r.desc}</div>
|
|
1065
|
-
${
|
|
1224
|
+
${o}
|
|
1066
1225
|
</div>
|
|
1067
1226
|
</div>
|
|
1068
1227
|
`})}
|
|
1069
1228
|
</div>
|
|
1070
|
-
`}renderResolvedIssues(t){return
|
|
1229
|
+
`}renderResolvedIssues(t){return a`
|
|
1071
1230
|
<div class="ov-section-title ov-resolved-title">
|
|
1072
1231
|
<span style="color:var(--green)">\u2713</span> Resolved
|
|
1073
1232
|
<span class="ov-issue-count">${t.length}</span>
|
|
1074
1233
|
</div>
|
|
1075
1234
|
<div class="ov-cards">
|
|
1076
|
-
${t.map(s=>
|
|
1235
|
+
${t.map(s=>a`
|
|
1077
1236
|
<div class="ov-card ov-card-resolved">
|
|
1078
1237
|
<span class="ov-card-icon resolved">\u2713</span>
|
|
1079
1238
|
<div class="ov-card-body">
|
|
@@ -1083,67 +1242,67 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
1083
1242
|
</div>
|
|
1084
1243
|
`)}
|
|
1085
1244
|
</div>
|
|
1086
|
-
`}};
|
|
1245
|
+
`}};h([R({context:x})],pt.prototype,"store",2),h([E()],pt.prototype,"expandedCardIdx",2),pt=h([g("bk-overview-view")],pt);function jt(i){return i<1?"<1ms":i<1e3?Math.round(i)+"ms":(i/1e3).toFixed(1)+"s"}function dr(i){return i<V?xt.green:i<Y?xt.amber:xt.red}function vs(i){return i.statusCode>=400?xt.red:dr(i.durationMs)}function fs(i){return [parseInt(i.slice(1,3),16),parseInt(i.slice(3,5),16),parseInt(i.slice(5,7),16)]}function gs(i){let e=i.getContext("2d");if(!e)return null;let t=window.devicePixelRatio||1,s=i.clientWidth,r=i.clientHeight;return i.width=s*t,i.height=r*t,e.scale(t,t),{ctx:e,w:s,h:r}}function bs(i,e,t,s,r){let[o,n,l]=fs(r);i.beginPath(),i.arc(e,t,s+2,0,Math.PI*2),i.fillStyle=`rgba(${o},${n},${l},0.25)`,i.fill(),i.beginPath(),i.arc(e,t,s,0,Math.PI*2),i.fillStyle=r,i.fill();}function Es(i,e,t,s,r,o){let[n,l,c]=fs(r);i.strokeStyle=`rgba(${n},${l},${c},0.3)`,i.lineWidth=o+2,i.beginPath(),i.moveTo(e-s,t-s),i.lineTo(e+s,t+s),i.moveTo(e+s,t-s),i.lineTo(e-s,t+s),i.stroke(),i.strokeStyle=r,i.lineWidth=o,i.beginPath(),i.moveTo(e-s,t-s),i.lineTo(e+s,t+s),i.moveTo(e+s,t-s),i.lineTo(e-s,t+s),i.stroke();}function _s(i,e){let t=[],s=gs(i);if(!s||e.length===0)return t;let{ctx:r,w:o,h:n}=s,l=es,c=o-l.left-l.right,p=n-l.top-l.bottom,u=0,m=e[0].timestamp,b=e[0].timestamp;for(let _ of e)_.durationMs>u&&(u=_.durationMs),_.timestamp<m&&(m=_.timestamp),_.timestamp>b&&(b=_.timestamp);u=Math.max(u,10),u=Math.ceil(u*1.15/10)*10;let $=b-m||1;r.strokeStyle=Je,r.lineWidth=1;let v=4;for(let _=0;_<=v;_++){let w=l.top+p-_/v*p;r.beginPath(),r.moveTo(l.left,w),r.lineTo(l.left+c,w),r.stroke(),r.fillStyle=ge,r.font=Ze,r.textAlign="right",r.fillText(jt(Math.round(_/v*u)),l.left-8,w+3);}for(let _ of [{ms:V},{ms:Y}]){if(_.ms>=u)continue;let w=l.top+p-_.ms/u*p;r.beginPath(),r.setLineDash([4,4]),r.strokeStyle="rgba(113,113,122,0.3)",r.lineWidth=1,r.moveTo(l.left,w),r.lineTo(l.left+c,w),r.stroke(),r.setLineDash([]),r.fillStyle="rgba(113,113,122,0.5)",r.font=be,r.textAlign="left",r.fillText(jt(_.ms),l.left+c+2,w+3);}for(let _=0;_<e.length;_++){let w=e[_],ut=e.length===1?l.left+c/2:l.left+(w.timestamp-m)/$*c,Vt=l.top+p-w.durationMs/u*p,ye=vs(w);t.push({x:ut,y:Vt,idx:_,r:w}),w.statusCode>=400?Es(r,ut,Vt,4,ye,2):bs(r,ut,Vt,4,ye);}r.fillStyle=ge,r.font=be,r.textAlign="center";let L=[m,m+$/2,b];for(let _=0;_<L.length;_++){let w=l.left+_/2*c,ut=new Date(L[_]);r.fillText(ut.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"}),w,l.top+p+14);}return t}function Ss(i,e){let t=gs(i);if(!t||e.length===0)return;let{ctx:s,w:r,h:o}=t,n=4,l=4,c=r-n*2,p=o-l*2,u=0,m=e[0].timestamp,b=e[0].timestamp;for(let v of e)v.durationMs>u&&(u=v.durationMs),v.timestamp<m&&(m=v.timestamp),v.timestamp>b&&(b=v.timestamp);u=Math.max(u,10),u=Math.ceil(u*1.15/10)*10;let $=b-m||1;for(let v of [V,Y]){if(v>=u)continue;let L=l+p-v/u*p;s.beginPath(),s.setLineDash([2,3]),s.strokeStyle="rgba(113,113,122,0.15)",s.lineWidth=1,s.moveTo(n,L),s.lineTo(n+c,L),s.stroke(),s.setLineDash([]);}for(let v of e){let L=e.length===1?n+c/2:n+(v.timestamp-m)/$*c,_=l+p-v.durationMs/u*p,w=vs(v);v.statusCode>=400?Es(s,L,_,2.5,w,1.5):bs(s,L,_,2.5,w);}s.fillStyle="rgba(113,113,122,0.5)",s.font=ts,s.textAlign="right",s.fillText(jt(u),r-2,l+8),s.fillText(jt(0),r-2,o-2);}var B=class extends f{constructor(){super(...arguments);this.selectedEndpoint=H;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(y.metricsLive)).json();this.graphData=s.endpoints||[],this.loadError=!1,(!this.selectedEndpoint||this.selectedEndpoint===H)&&(this.selectedEndpoint=H);}catch{this.loadError=true;}}healthGrade(t){for(let s of Bt)if(t<s.max)return s;return Bt[Bt.length-1]}fmtMs(t){return t<1?"<1ms":t<1e3?Math.round(t)+"ms":(t/1e3).toFixed(1)+"s"}renderScatterChart(t,s){this.scatterDots=_s(t,s),t.style.cursor="pointer",t.onclick=r=>{let o=t.getBoundingClientRect(),n=r.clientX-o.left,l=r.clientY-o.top,c=null,p=1/0;for(let u of this.scatterDots){let m=Math.sqrt((u.x-n)**2+(u.y-l)**2);m<p&&(p=m,c=u);}c&&p<16&&this.highlightRow(c.idx);};}highlightRow(t){let s=this.querySelector(".perf-hist-row-hl");s&&s.classList.remove("perf-hist-row-hl");let r=this.querySelector(`[data-req-idx="${t}"]`);r&&(r.classList.add("perf-hist-row-hl"),r.scrollIntoView({behavior:"smooth",block:"center"}));}updated(){if(this.selectedEndpoint===H)this.graphData.forEach((t,s)=>{if(t.requests.length===0)return;let r=this.querySelector(`#inline-scatter-${s}`);r&&Ss(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.renderScatterChart(t,s.requests);}}}render(){return !this.graphData||this.graphData.length===0?a`<bk-empty-state title="No performance data yet" subtitle="Hit some endpoints and data will appear here"></bk-empty-state>`:a`
|
|
1087
1246
|
<div id="graph-content">
|
|
1088
1247
|
${this.renderSelector()}
|
|
1089
|
-
${this.selectedEndpoint===
|
|
1248
|
+
${this.selectedEndpoint===H?this.renderOverview():this.renderDetail()}
|
|
1090
1249
|
</div>
|
|
1091
|
-
`}renderSelector(){return
|
|
1250
|
+
`}renderSelector(){return a`
|
|
1092
1251
|
<div class="perf-selector">
|
|
1093
|
-
<button class="perf-selector-btn ${this.selectedEndpoint===
|
|
1094
|
-
@click=${()=>{this.selectedEndpoint=
|
|
1095
|
-
${this.graphData.map((t,s)=>
|
|
1252
|
+
<button class="perf-selector-btn ${this.selectedEndpoint===H?"active":""}"
|
|
1253
|
+
@click=${()=>{this.selectedEndpoint=H;}}>Overview</button>
|
|
1254
|
+
${this.graphData.map((t,s)=>a`
|
|
1096
1255
|
<button class="perf-selector-btn ${t.endpoint===this.selectedEndpoint?"active":""}"
|
|
1097
1256
|
@click=${()=>{this.selectedEndpoint=t.endpoint;}}>
|
|
1098
|
-
<span class="perf-dot" style="background:${
|
|
1257
|
+
<span class="perf-dot" style="background:${fe[s%fe.length]}"></span>${t.endpoint}
|
|
1099
1258
|
</button>
|
|
1100
1259
|
`)}
|
|
1101
1260
|
</div>
|
|
1102
|
-
`}renderOverview(){return
|
|
1261
|
+
`}renderOverview(){return a`
|
|
1103
1262
|
<div class="perf-endpoint-list">
|
|
1104
1263
|
${this.graphData.map((t,s)=>t.requests.length===0?d:this.renderEndpointCard(t,s))}
|
|
1105
1264
|
</div>
|
|
1106
|
-
`}renderEndpointCard(t,s){let r=t.summary,
|
|
1265
|
+
`}renderEndpointCard(t,s){let r=t.summary,o=this.healthGrade(r.p95Ms),n=Math.round(r.errorRate*r.totalRequests),l=(r.avgQueryTimeMs||0)+(r.avgFetchTimeMs||0)+(r.avgAppTimeMs||0),c=d;if(l>0){let p=Math.round((r.avgQueryTimeMs||0)/l*100),u=Math.round((r.avgFetchTimeMs||0)/l*100),m=Math.max(0,100-p-u);c=a`
|
|
1107
1266
|
<div class="perf-breakdown-inline">
|
|
1108
1267
|
<div class="perf-breakdown-bar perf-breakdown-bar-sm">
|
|
1109
|
-
${
|
|
1110
|
-
${
|
|
1111
|
-
${
|
|
1268
|
+
${p>0?a`<div class="perf-breakdown-seg perf-breakdown-db" style="width:${p}%"></div>`:d}
|
|
1269
|
+
${u>0?a`<div class="perf-breakdown-seg perf-breakdown-fetch" style="width:${u}%"></div>`:d}
|
|
1270
|
+
${m>0?a`<div class="perf-breakdown-seg perf-breakdown-app" style="width:${m}%"></div>`:d}
|
|
1112
1271
|
</div>
|
|
1113
1272
|
<span class="perf-breakdown-labels">
|
|
1114
|
-
${
|
|
1115
|
-
${
|
|
1273
|
+
${p>0?a`<span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-db"></span>${this.fmtMs(r.avgQueryTimeMs||0)}</span>`:d}
|
|
1274
|
+
${u>0?a`<span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-fetch"></span>${this.fmtMs(r.avgFetchTimeMs||0)}</span>`:d}
|
|
1116
1275
|
<span class="perf-breakdown-lbl"><span class="perf-breakdown-dot perf-breakdown-app"></span>${this.fmtMs(r.avgAppTimeMs||0)}</span>
|
|
1117
1276
|
</span>
|
|
1118
1277
|
</div>
|
|
1119
|
-
`;}return
|
|
1278
|
+
`;}return a`
|
|
1120
1279
|
<div class="perf-endpoint-card" @click=${()=>{this.selectedEndpoint=t.endpoint;}}>
|
|
1121
1280
|
<div class="perf-ep-header">
|
|
1122
1281
|
<span class="perf-ep-name">${t.endpoint}</span>
|
|
1123
1282
|
<span class="perf-ep-stats">
|
|
1124
|
-
<span class="perf-ep-stat" style="color:${
|
|
1125
|
-
<span class="perf-ep-stat ${
|
|
1126
|
-
${r.avgQueryCount>0?
|
|
1283
|
+
<span class="perf-ep-stat" style="color:${o.color}">p95: ${this.fmtMs(r.p95Ms)}</span>
|
|
1284
|
+
<span class="perf-ep-stat ${n>0?"perf-ep-stat-err":""}">${n} err</span>
|
|
1285
|
+
${r.avgQueryCount>0?a`<span class="perf-ep-stat ${r.avgQueryCount>5?"perf-ep-stat-warn":""}">${r.avgQueryCount} q/req</span>`:d}
|
|
1127
1286
|
<span class="perf-ep-stat perf-ep-stat-muted">${r.totalRequests} req${r.totalRequests!==1?"s":""}</span>
|
|
1128
1287
|
</span>
|
|
1129
1288
|
</div>
|
|
1130
|
-
${
|
|
1289
|
+
${c}
|
|
1131
1290
|
<canvas id="inline-scatter-${s}" class="perf-inline-canvas"></canvas>
|
|
1132
1291
|
</div>
|
|
1133
|
-
`}renderDetail(){let t=this.graphData.find(
|
|
1292
|
+
`}renderDetail(){let t=this.graphData.find(n=>n.endpoint===this.selectedEndpoint);if(!t?.requests?.length)return a`<bk-empty-state subtitle="No data for this endpoint"></bk-empty-state>`;let s=t.summary,r=this.healthGrade(s.p95Ms),o=Math.round(s.errorRate*s.totalRequests);return a`
|
|
1134
1293
|
${this.renderDetailHeader(t,r)}
|
|
1135
|
-
${this.renderDetailMetrics(s,r,
|
|
1294
|
+
${this.renderDetailMetrics(s,r,o)}
|
|
1136
1295
|
${this.renderDetailBreakdown(s)}
|
|
1137
1296
|
${this.renderDetailChart()}
|
|
1138
1297
|
${this.renderDetailHistory(t)}
|
|
1139
|
-
`}renderDetailHeader(t,s){return
|
|
1298
|
+
`}renderDetailHeader(t,s){return a`
|
|
1140
1299
|
<div class="perf-detail-header">
|
|
1141
1300
|
<div class="perf-detail-title">
|
|
1142
1301
|
<span class="perf-badge perf-badge-lg" style="color:${s.color};background:${s.bg};border-color:${s.border}">${s.label}</span>
|
|
1143
1302
|
<span>${t.endpoint}</span>
|
|
1144
1303
|
</div>
|
|
1145
1304
|
</div>
|
|
1146
|
-
`}renderDetailMetrics(t,s,r){return
|
|
1305
|
+
`}renderDetailMetrics(t,s,r){return a`
|
|
1147
1306
|
<div class="perf-metric-row">
|
|
1148
1307
|
<div class="perf-metric-card">
|
|
1149
1308
|
<span class="perf-metric-label">P95</span>
|
|
@@ -1160,26 +1319,26 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
1160
1319
|
<span class="perf-metric-value" style="color:${t.avgQueryCount>5?"var(--amber)":"var(--text)"}">${t.avgQueryCount}</span>
|
|
1161
1320
|
</div>
|
|
1162
1321
|
</div>
|
|
1163
|
-
`}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),
|
|
1322
|
+
`}renderDetailBreakdown(t){let s=(t.avgQueryTimeMs||0)+(t.avgFetchTimeMs||0)+(t.avgAppTimeMs||0);if(s<=0)return d;let r=Math.round((t.avgQueryTimeMs||0)/s*100),o=Math.round((t.avgFetchTimeMs||0)/s*100),n=Math.max(0,100-r-o);return a`
|
|
1164
1323
|
<div class="perf-breakdown">
|
|
1165
1324
|
<div class="perf-section-title">Time Breakdown</div>
|
|
1166
1325
|
<div class="perf-breakdown-bar">
|
|
1167
|
-
${r>0?
|
|
1168
|
-
${
|
|
1169
|
-
${
|
|
1326
|
+
${r>0?a`<div class="perf-breakdown-seg perf-breakdown-db" style="width:${r}%"></div>`:d}
|
|
1327
|
+
${o>0?a`<div class="perf-breakdown-seg perf-breakdown-fetch" style="width:${o}%"></div>`:d}
|
|
1328
|
+
${n>0?a`<div class="perf-breakdown-seg perf-breakdown-app" style="width:${n}%"></div>`:d}
|
|
1170
1329
|
</div>
|
|
1171
1330
|
<div class="perf-breakdown-legend">
|
|
1172
1331
|
<span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-db"></span>DB ${this.fmtMs(t.avgQueryTimeMs||0)} (${r}%)</span>
|
|
1173
|
-
<span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-fetch"></span>Fetch ${this.fmtMs(t.avgFetchTimeMs||0)} (${
|
|
1174
|
-
<span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-app"></span>App ${this.fmtMs(t.avgAppTimeMs||0)} (${
|
|
1332
|
+
<span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-fetch"></span>Fetch ${this.fmtMs(t.avgFetchTimeMs||0)} (${o}%)</span>
|
|
1333
|
+
<span class="perf-breakdown-item"><span class="perf-breakdown-dot perf-breakdown-app"></span>App ${this.fmtMs(t.avgAppTimeMs||0)} (${n}%)</span>
|
|
1175
1334
|
</div>
|
|
1176
1335
|
</div>
|
|
1177
|
-
`}renderDetailChart(){return
|
|
1336
|
+
`}renderDetailChart(){return a`
|
|
1178
1337
|
<div class="perf-chart-wrap">
|
|
1179
1338
|
<div class="perf-section-title">Response Time</div>
|
|
1180
1339
|
<canvas id="perf-detail-canvas" class="perf-canvas" style="width:100%;height:240px"></canvas>
|
|
1181
1340
|
</div>
|
|
1182
|
-
`}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
|
|
1341
|
+
`}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 a`
|
|
1183
1342
|
<div class="perf-history-wrap">
|
|
1184
1343
|
<div class="col-header">
|
|
1185
1344
|
<span class="perf-col perf-col-date">Time</span>
|
|
@@ -1191,88 +1350,88 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
1191
1350
|
</div>
|
|
1192
1351
|
${s.map(r=>this.renderHistoryRow(r.r,r.origIdx))}
|
|
1193
1352
|
</div>
|
|
1194
|
-
`}renderHistoryRow(t,s){let r=this.healthGrade(t.durationMs),
|
|
1195
|
-
<div class="perf-hist-row ${
|
|
1196
|
-
<span class="perf-col perf-col-date">${
|
|
1353
|
+
`}renderHistoryRow(t,s){let r=this.healthGrade(t.durationMs),o=new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"}),n=t.statusCode>=400,l=t.queryTimeMs||0,c=t.fetchTimeMs||0,p=Math.max(0,t.durationMs-l-c);return a`
|
|
1354
|
+
<div class="perf-hist-row ${n?"perf-hist-row-err":""}" data-req-idx=${s}>
|
|
1355
|
+
<span class="perf-col perf-col-date">${o}</span>
|
|
1197
1356
|
<span class="perf-col perf-col-health">
|
|
1198
1357
|
<span class="perf-badge perf-badge-sm" style="color:${r.color};background:${r.bg};border-color:${r.border}">${r.label}</span>
|
|
1199
1358
|
</span>
|
|
1200
1359
|
<span class="perf-col perf-col-avg">${this.fmtMs(t.durationMs)}</span>
|
|
1201
1360
|
<span class="perf-col perf-col-breakdown">
|
|
1202
|
-
${
|
|
1203
|
-
${
|
|
1204
|
-
<span class="perf-bd-tag perf-bd-tag-app">App ${this.fmtMs(
|
|
1361
|
+
${l>0?a`<span class="perf-bd-tag perf-bd-tag-db">DB ${this.fmtMs(l)}</span>`:d}
|
|
1362
|
+
${c>0?a`<span class="perf-bd-tag perf-bd-tag-fetch">Fetch ${this.fmtMs(c)}</span>`:d}
|
|
1363
|
+
<span class="perf-bd-tag perf-bd-tag-app">App ${this.fmtMs(p)}</span>
|
|
1205
1364
|
</span>
|
|
1206
|
-
<span class="perf-col perf-col-status" style="color:${
|
|
1365
|
+
<span class="perf-col perf-col-status" style="color:${n?"var(--red)":"var(--text-muted)"}">${t.statusCode}</span>
|
|
1207
1366
|
<span class="perf-col perf-col-qpr">${t.queryCount}</span>
|
|
1208
1367
|
</div>
|
|
1209
|
-
`}};
|
|
1368
|
+
`}};h([R({context:x})],B.prototype,"store",2),h([E()],B.prototype,"selectedEndpoint",2),h([E()],B.prototype,"graphData",2),h([E()],B.prototype,"loadError",2),B=h([g("bk-performance-view")],B);function pr(i){return i===0?"<1ms":S(i)}var A=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=A.cache.get(this.requestId);if(t){this.data=t;return}this.loading=true;try{let s=await fetch(`${y.activity}?requestId=${this.requestId}`);if(!s.ok){this.failed=!0,this.loading=!1;return}let r=await s.json();if(A.cache.size>=he){let o=A.cache.keys().next().value;o!==void 0&&A.cache.delete(o);}A.cache.set(this.requestId,r),this.data=r,this.loading=!1;}catch(s){console.debug("[brakit] timeline load failed:",s),this.failed=true,this.loading=false;}}toggleSql(t,s){s.stopPropagation(),this.expandedSqlIdx=this.expandedSqlIdx===t?-1:t;}copySql(t,s){s.stopPropagation(),navigator.clipboard.writeText(t).then(()=>C.show("SQL copied")).catch(()=>C.show("Copy failed"));}render(){if(this.loading)return a`<div class="tl-loading">Loading activity...</div>`;if(this.failed||!this.data||this.data.total===0)return d;let t=this.data,s=t.timeline[0]?.timestamp??0;return a`
|
|
1210
1369
|
<div class="tl-header">
|
|
1211
1370
|
<span class="tl-title">Activity Timeline</span>
|
|
1212
1371
|
<span class="tl-counts">
|
|
1213
|
-
${t.counts.queries>0?
|
|
1214
|
-
${t.counts.fetches>0?
|
|
1215
|
-
${t.counts.logs>0?
|
|
1216
|
-
${t.counts.errors>0?
|
|
1372
|
+
${t.counts.queries>0?a`<span class="tl-count tl-count-query">${t.counts.queries} quer${t.counts.queries===1?"y":"ies"}</span>`:d}
|
|
1373
|
+
${t.counts.fetches>0?a`<span class="tl-count tl-count-fetch">${t.counts.fetches} fetch${t.counts.fetches===1?"":"es"}</span>`:d}
|
|
1374
|
+
${t.counts.logs>0?a`<span class="tl-count tl-count-log">${t.counts.logs} log${t.counts.logs===1?"":"s"}</span>`:d}
|
|
1375
|
+
${t.counts.errors>0?a`<span class="tl-count tl-count-error">${t.counts.errors} error${t.counts.errors===1?"":"s"}</span>`:d}
|
|
1217
1376
|
</span>
|
|
1218
1377
|
</div>
|
|
1219
1378
|
<div class="tl-events">${this.renderTimeline(t.timeline,s)}</div>
|
|
1220
|
-
`}renderTimeline(t,s){let r=new Map,
|
|
1221
|
-
${this.renderEvent(c,
|
|
1379
|
+
`}renderTimeline(t,s){let r=new Map,o=[];for(let l of t){let c=l.type==="query"?l.data.parentFetchId:void 0;if(l.type==="query"&&c){let p=r.get(c);p||(p=[],r.set(c,p)),p.push(l);}else o.push(l);}let n=0;return o.map(l=>{let c=n++,p=l.type==="fetch"?l.data.fetchId:void 0,u=p?r.get(p):void 0;if(u&&u.length>0){let m=u.length;return a`
|
|
1380
|
+
${this.renderEvent(l,c,s)}
|
|
1222
1381
|
<div class="tl-nested">
|
|
1223
|
-
<span class="tl-nested-label">${
|
|
1224
|
-
${
|
|
1382
|
+
<span class="tl-nested-label">${m} nested quer${m===1?"y":"ies"}</span>
|
|
1383
|
+
${u.map(b=>{let $=n++;return this.renderEvent(b,$,s,true)})}
|
|
1225
1384
|
</div>
|
|
1226
|
-
`}return this.renderEvent(c,
|
|
1227
|
-
<div class="tl-event ${
|
|
1228
|
-
style="${
|
|
1229
|
-
@click=${
|
|
1230
|
-
<span class="tl-event-time">${
|
|
1231
|
-
<span class="tl-event-type" style="color:${
|
|
1385
|
+
`}return this.renderEvent(l,c,s)})}renderEvent(t,s,r,o=false){let n=ss[t.type]||"var(--text-dim)",l=rs[t.type]||t.type,c="+"+S(Math.round(t.timestamp-r)),p=t.type==="query"?t.data.sql:void 0,u=!!p,m=this.expandedSqlIdx===s;return a`
|
|
1386
|
+
<div class="tl-event ${u?"tl-clickable":""} ${o?"tl-nested-event":""}"
|
|
1387
|
+
style="${u?"":`border-left-color:${n}`}"
|
|
1388
|
+
@click=${u?b=>this.toggleSql(s,b):d}>
|
|
1389
|
+
<span class="tl-event-time">${c}</span>
|
|
1390
|
+
<span class="tl-event-type" style="color:${n}">${l}</span>
|
|
1232
1391
|
${this.renderEventContent(t)}
|
|
1233
|
-
${
|
|
1234
|
-
<div class="tl-event-sql ${
|
|
1235
|
-
<button class="tl-sql-copy" @click=${
|
|
1236
|
-
${
|
|
1392
|
+
${p?a`
|
|
1393
|
+
<div class="tl-event-sql ${m?"open":""}">
|
|
1394
|
+
<button class="tl-sql-copy" @click=${b=>this.copySql(p,b)}>Copy</button>
|
|
1395
|
+
${p}
|
|
1237
1396
|
</div>`:d}
|
|
1238
1397
|
</div>
|
|
1239
|
-
`}renderEventContent(t){switch(t.type){case "fetch":{let s=t.data,r=s.statusCode>=400;return
|
|
1398
|
+
`}renderEventContent(t){switch(t.type){case "fetch":{let s=t.data,r=s.statusCode>=400;return a`
|
|
1240
1399
|
<span class="tl-event-summary">${s.method} ${s.url}</span>
|
|
1241
1400
|
<span class="tl-event-status" style="${r?"color:var(--red)":""}">${s.statusCode}</span>
|
|
1242
1401
|
<span class="tl-event-dur">${S(s.durationMs)}</span>
|
|
1243
|
-
`}case "query":{let s=t.data,r=(s.normalizedOp||s.operation||"?").toUpperCase(),
|
|
1244
|
-
<span class="tl-event-summary"><span style="color:${
|
|
1245
|
-
<span class="tl-event-dur">${
|
|
1246
|
-
`}case "log":{let s=t.data,r=ze[s.level]||"var(--text-dim)";return
|
|
1402
|
+
`}case "query":{let s=t.data,r=(s.normalizedOp||s.operation||"?").toUpperCase(),o=s.table||s.model||"",n=Ft[r]||"var(--text-dim)";return a`
|
|
1403
|
+
<span class="tl-event-summary"><span style="color:${n};font-weight:600">${r}</span> ${o}</span>
|
|
1404
|
+
<span class="tl-event-dur">${pr(s.durationMs)}</span>
|
|
1405
|
+
`}case "log":{let s=t.data,r=ze[s.level]||"var(--text-dim)";return a`<span class="tl-event-summary"><span style="color:${r}">${s.level.toUpperCase()}</span> ${s.message}</span>`}case "error":{let s=t.data;return a`<span class="tl-event-summary" style="color:var(--red)">${s.name}: ${s.message}</span>`}default:return d}}};A.cache=new Map,h([R({context:x})],A.prototype,"store",2),h([T({attribute:"request-id"})],A.prototype,"requestId",2),h([T({attribute:"request-started",type:Number})],A.prototype,"requestStarted",2),h([E()],A.prototype,"data",2),h([E()],A.prototype,"loading",2),h([E()],A.prototype,"failed",2),h([E()],A.prototype,"expandedSqlIdx",2),A=h([g("bk-timeline-panel")],A);var Qt=class{constructor(e,t){this.host=e;this.store=t;this.retryCount=0;e.addController(this);}hostConnected(){this.connect();}hostDisconnected(){this.eventSource?.close(),clearTimeout(this.reloadTimer),clearTimeout(this.perfReloadTimer),clearTimeout(this.reconnectTimer);}connect(){this.eventSource?.close(),this.eventSource=new EventSource(y.events),this.eventSource.onopen=()=>{this.retryCount=0;},this.eventSource.onerror=()=>{this.eventSource?.close(),this.scheduleReconnect();},this.eventSource.onmessage=e=>{let t=JSON.parse(e.data);t.path?.startsWith(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(),me)));},this.eventSource.addEventListener(re,e=>{this.store.prependFetch(JSON.parse(e.data));}),this.eventSource.addEventListener("log",e=>{this.store.prependLog(JSON.parse(e.data));}),this.eventSource.addEventListener(ie,e=>{this.store.prependError(JSON.parse(e.data));}),this.eventSource.addEventListener(oe,e=>{this.store.prependQuery(JSON.parse(e.data));}),this.eventSource.addEventListener(ne,e=>{this.store.setIssues(JSON.parse(e.data));});}scheduleReconnect(){if(this.retryCount>=10)return;let e=Math.min(1e3*2**this.retryCount,3e4);this.retryCount++,this.reconnectTimer=setTimeout(()=>this.connect(),e);}async reloadFlows(){try{let t=await(await fetch(y.flows)).json();this.store.setFlows(t.flows);}catch{}}async reloadMetrics(){try{let t=await(await fetch(y.metricsLive)).json();this.store.setMetrics(t.endpoints||[]);}catch{}}};function $s(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 Ts(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`}function ys(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 xs(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>`}function Rs(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`}function ws(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`}function As(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`}function Cs(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`}function Is(){return a`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>`}var J=class extends f{constructor(){super(...arguments);this.store=new Wt;this.activeView="overview";this.viewMode="simple";this.sse=new Qt(this,this.store);}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.loadInitialData(),this.store.addEventListener("state-changed",()=>this.requestUpdate());}async loadInitialData(){try{let[t,s]=await Promise.all([fetch(y.flows),fetch(y.requests)]),[r,o]=await Promise.all([t.json(),s.json()]);this.store.setFlows(r.flows),this.store.setRequests(o.requests);}catch(t){console.warn("[brakit]",t);}try{let[t,s,r,o,n]=await Promise.all([fetch(y.fetches),fetch(y.errors),fetch(y.logs),fetch(y.queries),fetch(y.metricsLive)]),[l,c,p,u,m]=await Promise.all([t.json(),s.json(),r.json(),o.json(),n.json()]);this.store.setFetches(l.entries),this.store.setErrors(c.entries),this.store.setLogs(p.entries),this.store.setQueries(u.entries),this.store.setMetrics(m.endpoints||[]);}catch(t){console.warn("[brakit]",t);}try{let s=await(await fetch(y.insights)).json();this.store.setIssues(s.issues||[]);}catch(t){console.warn("[brakit]",t);}}switchView(t){t!==this.activeView&&(this.activeView=t,this.store.setActiveView(t),fetch(`${y.tab}?tab=${encodeURIComponent(t)}`).catch(()=>{}),t==="performance"&&this.sse.reloadMetrics());}async handleClear(){confirm("This will clear all data including performance metrics history. Continue?")&&(await fetch(y.clear,{method:"POST"}),this.store.clearAll(),C.show("Cleared"));}handleCopyAsCurl(t){ct(t);}render(){let t=this.store.state,s=t.requests.filter(c=>!c.path?.startsWith(O)),r=s.filter(c=>c.statusCode>=400).length,o=s.length>0?Math.round(s.reduce((c,p)=>c+p.durationMs,0)/s.length):0,n=(t.issues||[]).filter(c=>c.state!=="resolved"&&c.state!=="stale").length,l=window.__BRAKIT_CONFIG__;return a`
|
|
1247
1406
|
<div class="app" id="app">
|
|
1248
1407
|
<aside class="sidebar">
|
|
1249
1408
|
<div class="sidebar-logo">
|
|
1250
1409
|
<span class="logo-text">brakit</span>
|
|
1251
|
-
<span class="logo-version">v${
|
|
1410
|
+
<span class="logo-version">v${l?.version??""}</span>
|
|
1252
1411
|
</div>
|
|
1253
1412
|
<nav class="sidebar-nav">
|
|
1254
|
-
${this.renderSidebarItem("overview","Overview"
|
|
1413
|
+
${this.renderSidebarItem("overview","Overview",$s(),void 0)}
|
|
1255
1414
|
<div class="sidebar-section">Monitor</div>
|
|
1256
|
-
${this.renderSidebarItem("actions","Actions",
|
|
1257
|
-
${this.renderSidebarItem("requests","Requests",
|
|
1258
|
-
${this.renderSidebarItem("fetches","Fetches",
|
|
1415
|
+
${this.renderSidebarItem("actions","Actions",Ts(),t.flows.length)}
|
|
1416
|
+
${this.renderSidebarItem("requests","Requests",ys(),s.length)}
|
|
1417
|
+
${this.renderSidebarItem("fetches","Fetches",xs(),t.fetches.length)}
|
|
1259
1418
|
<div class="sidebar-section">Insights</div>
|
|
1260
|
-
${this.renderSidebarItem("queries","Queries",
|
|
1261
|
-
${this.renderSidebarItem("errors","Errors",
|
|
1262
|
-
${this.renderSidebarItem("logs","Logs",
|
|
1263
|
-
${this.renderSidebarItem("security","Security",
|
|
1264
|
-
${this.renderSidebarItem("performance","Performance",
|
|
1419
|
+
${this.renderSidebarItem("queries","Queries",Rs(),t.queries.length)}
|
|
1420
|
+
${this.renderSidebarItem("errors","Errors",ws(),t.errors.length)}
|
|
1421
|
+
${this.renderSidebarItem("logs","Logs",As(),t.logs.length)}
|
|
1422
|
+
${this.renderSidebarItem("security","Security",Cs(),n,n===0)}
|
|
1423
|
+
${this.renderSidebarItem("performance","Performance",Is(),void 0)}
|
|
1265
1424
|
</nav>
|
|
1266
|
-
<div class="sidebar-footer">:${
|
|
1425
|
+
<div class="sidebar-footer">:${l?.port??""}</div>
|
|
1267
1426
|
</aside>
|
|
1268
1427
|
<div class="main-panel">
|
|
1269
1428
|
<div class="header">
|
|
1270
1429
|
<div class="header-left">
|
|
1271
|
-
<span class="header-title" id="header-title">${
|
|
1272
|
-
<span class="header-sub" id="header-sub">${
|
|
1430
|
+
<span class="header-title" id="header-title">${yt[this.activeView]||this.activeView}</span>
|
|
1431
|
+
<span class="header-sub" id="header-sub">${le[this.activeView]||""}</span>
|
|
1273
1432
|
</div>
|
|
1274
1433
|
<div class="header-right">
|
|
1275
|
-
${this.activeView==="actions"?
|
|
1434
|
+
${this.activeView==="actions"?a`
|
|
1276
1435
|
<div class="segmented-control" id="mode-toggle">
|
|
1277
1436
|
<button class="segmented-btn ${this.viewMode==="simple"?"active":""}" @click=${()=>{this.viewMode="simple",this.store.setViewMode("simple");}}>Quick</button>
|
|
1278
1437
|
<button class="segmented-btn ${this.viewMode==="detailed"?"active":""}" @click=${()=>{this.viewMode="detailed",this.store.setViewMode("detailed");}}>Detailed</button>
|
|
@@ -1314,18 +1473,18 @@ span.perf-breakdown-dot.perf-breakdown-app{background:var(--breakdown-app)}
|
|
|
1314
1473
|
<span id="stat-total">${s.length} request${s.length!==1?"s":""}</span>
|
|
1315
1474
|
<span id="stat-flows">${t.flows.length} action${t.flows.length!==1?"s":""}</span>
|
|
1316
1475
|
<span id="stat-errors" class="error-count">${r} error${r!==1?"s":""}</span>
|
|
1317
|
-
<span id="stat-avg">Avg: ${
|
|
1476
|
+
<span id="stat-avg">Avg: ${o}ms</span>
|
|
1318
1477
|
</div>
|
|
1319
1478
|
</div>
|
|
1320
1479
|
</div>
|
|
1321
1480
|
<bk-toast></bk-toast>
|
|
1322
|
-
`}renderSidebarItem(t,s,r,
|
|
1481
|
+
`}renderSidebarItem(t,s,r,o,n=false){return a`
|
|
1323
1482
|
<button class="sidebar-item ${this.activeView===t?"active":""}" @click=${()=>this.switchView(t)}>
|
|
1324
1483
|
<span class="item-icon">${r}</span>
|
|
1325
1484
|
<span class="item-label">${s}</span>
|
|
1326
|
-
${
|
|
1485
|
+
${o!==void 0?a`<span class="item-count" style="display:${n?"none":""}">${o}</span>`:d}
|
|
1327
1486
|
</button>
|
|
1328
|
-
`}};
|
|
1487
|
+
`}};h([_e({context:x})],J.prototype,"store",2),h([E()],J.prototype,"activeView",2),h([E()],J.prototype,"viewMode",2),J=h([g("bk-dashboard")],J);
|
|
1329
1488
|
/*! Bundled license information:
|
|
1330
1489
|
|
|
1331
1490
|
@lit/reactive-element/css-tag.js:
|