@inspectr/ui 0.0.2 → 0.0.3

package/dist/inspectr-ui.umd.js

@@ -0,0 +1,41 @@
+(function(k,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],l):(k=typeof globalThis<"u"?globalThis:k||self,l(k.InspectrUI={},k.React))})(this,function(k,l){"use strict";var ge={exports:{}},se={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Se;function ct(){if(Se)return se;Se=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(o,s,i){var d=null;if(i!==void 0&&(d=""+i),s.key!==void 0&&(d=""+s.key),"key"in s){i={};for(var f in s)f!=="key"&&(i[f]=s[f])}else i=s;return s=i.ref,{$$typeof:e,type:o,key:d,ref:s!==void 0?s:null,props:i}}return se.Fragment=r,se.jsx=n,se.jsxs=n,se}var ie={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Oe;function ut(){return Oe||(Oe=1,process.env.NODE_ENV!=="production"&&function(){function e(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===K?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case E:return"Fragment";case C:return"Portal";case G:return"Profiler";case w:return"StrictMode";case X:return"Suspense";case $:return"SuspenseList"}if(typeof t=="object")switch(typeof t.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case v:return(t.displayName||"Context")+".Provider";case S:return(t._context.displayName||"Context")+".Consumer";case W:var c=t.render;return t=t.displayName,t||(t=c.displayName||c.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case U:return c=t.displayName||null,c!==null?c:e(t.type)||"Memo";case g:c=t._payload,t=t._init;try{return e(t(c))}catch{}}return null}function r(t){return""+t}function n(t){try{r(t);var c=!1}catch{c=!0}if(c){c=console;var u=c.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return u.call(c,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),r(t)}}function o(){}function s(){if(F===0){Y=console.log,$e=console.info,Ke=console.warn,et=console.error,tt=console.group,rt=console.groupCollapsed,nt=console.groupEnd;var t={configurable:!0,enumerable:!0,value:o,writable:!0};Object.defineProperties(console,{info:t,log:t,warn:t,error:t,group:t,groupCollapsed:t,groupEnd:t})}F++}function i(){if(F--,F===0){var t={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:h({},t,{value:Y}),info:h({},t,{value:$e}),warn:h({},t,{value:Ke}),error:h({},t,{value:et}),group:h({},t,{value:tt}),groupCollapsed:h({},t,{value:rt}),groupEnd:h({},t,{value:nt})})}0>F&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}function d(t){if(Ee===void 0)try{throw Error()}catch(u){var c=u.stack.trim().match(/\n( *(at )?)/);Ee=c&&c[1]||"",ot=-1<u.stack.indexOf(`
+    at`)?" (<anonymous>)":-1<u.stack.indexOf("@")?"@unknown:0:0":""}return`
+`+Ee+t+ot}function f(t,c){if(!t||Ce)return"";var u=Ne.get(t);if(u!==void 0)return u;Ce=!0,u=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var b=null;b=J.H,J.H=null,s();try{var M={DetermineComponentFrameRoot:function(){try{if(c){var ee=function(){throw Error()};if(Object.defineProperty(ee.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(ee,[])}catch(_){var xe=_}Reflect.construct(t,[],ee)}else{try{ee.call()}catch(_){xe=_}t.call(ee.prototype)}}else{try{throw Error()}catch(_){xe=_}(ee=t())&&typeof ee.catch=="function"&&ee.catch(function(){})}}catch(_){if(_&&xe&&typeof _.stack=="string")return[_.stack,xe.stack]}return[null,null]}};M.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var y=Object.getOwnPropertyDescriptor(M.DetermineComponentFrameRoot,"name");y&&y.configurable&&Object.defineProperty(M.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var m=M.DetermineComponentFrameRoot(),V=m[0],ae=m[1];if(V&&ae){var L=V.split(`
+`),ne=ae.split(`
+`);for(m=y=0;y<L.length&&!L[y].includes("DetermineComponentFrameRoot");)y++;for(;m<ne.length&&!ne[m].includes("DetermineComponentFrameRoot");)m++;if(y===L.length||m===ne.length)for(y=L.length-1,m=ne.length-1;1<=y&&0<=m&&L[y]!==ne[m];)m--;for(;1<=y&&0<=m;y--,m--)if(L[y]!==ne[m]){if(y!==1||m!==1)do if(y--,m--,0>m||L[y]!==ne[m]){var fe=`
+`+L[y].replace(" at new "," at ");return t.displayName&&fe.includes("<anonymous>")&&(fe=fe.replace("<anonymous>",t.displayName)),typeof t=="function"&&Ne.set(t,fe),fe}while(1<=y&&0<=m);break}}}finally{Ce=!1,J.H=b,i(),Error.prepareStackTrace=u}return L=(L=t?t.displayName||t.name:"")?d(L):"",typeof t=="function"&&Ne.set(t,L),L}function p(t){if(t==null)return"";if(typeof t=="function"){var c=t.prototype;return f(t,!(!c||!c.isReactComponent))}if(typeof t=="string")return d(t);switch(t){case X:return d("Suspense");case $:return d("SuspenseList")}if(typeof t=="object")switch(t.$$typeof){case W:return t=f(t.render,!1),t;case U:return p(t.type);case g:c=t._payload,t=t._init;try{return p(t(c))}catch{}}return""}function x(){var t=J.A;return t===null?null:t.getOwner()}function N(t){if(ve.call(t,"key")){var c=Object.getOwnPropertyDescriptor(t,"key").get;if(c&&c.isReactWarning)return!1}return t.key!==void 0}function R(t,c){function u(){at||(at=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",c))}u.isReactWarning=!0,Object.defineProperty(t,"key",{get:u,configurable:!0})}function te(){var t=e(this.type);return st[t]||(st[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),t=this.props.ref,t!==void 0?t:null}function Q(t,c,u,b,M,y){return u=y.ref,t={$$typeof:q,type:t,key:c,props:y,_owner:M},(u!==void 0?u:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:te}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function B(t,c,u,b,M,y){if(typeof t=="string"||typeof t=="function"||t===E||t===G||t===w||t===X||t===$||t===j||typeof t=="object"&&t!==null&&(t.$$typeof===g||t.$$typeof===U||t.$$typeof===v||t.$$typeof===S||t.$$typeof===W||t.$$typeof===A||t.getModuleId!==void 0)){var m=c.children;if(m!==void 0)if(b)if(O(m)){for(b=0;b<m.length;b++)z(m[b],t);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else z(m,t)}else m="",(t===void 0||typeof t=="object"&&t!==null&&Object.keys(t).length===0)&&(m+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),t===null?b="null":O(t)?b="array":t!==void 0&&t.$$typeof===q?(b="<"+(e(t.type)||"Unknown")+" />",m=" Did you accidentally export a JSX literal instead of a component?"):b=typeof t,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",b,m);if(ve.call(c,"key")){m=e(t);var V=Object.keys(c).filter(function(L){return L!=="key"});b=0<V.length?"{key: someKey, "+V.join(": ..., ")+": ...}":"{key: someKey}",it[m+b]||(V=0<V.length?"{"+V.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,b,m,V,m),it[m+b]=!0)}if(m=null,u!==void 0&&(n(u),m=""+u),N(c)&&(n(c.key),m=""+c.key),"key"in c){u={};for(var ae in c)ae!=="key"&&(u[ae]=c[ae])}else u=c;return m&&R(u,typeof t=="function"?t.displayName||t.name||"Unknown":t),Q(t,m,y,M,x(),u)}function z(t,c){if(typeof t=="object"&&t&&t.$$typeof!==jr){if(O(t))for(var u=0;u<t.length;u++){var b=t[u];P(b)&&H(b,c)}else if(P(t))t._store&&(t._store.validated=1);else if(t===null||typeof t!="object"?u=null:(u=D&&t[D]||t["@@iterator"],u=typeof u=="function"?u:null),typeof u=="function"&&u!==t.entries&&(u=u.call(t),u!==t))for(;!(t=u.next()).done;)P(t.value)&&H(t.value,c)}}function P(t){return typeof t=="object"&&t!==null&&t.$$typeof===q}function H(t,c){if(t._store&&!t._store.validated&&t.key==null&&(t._store.validated=1,c=T(c),!lt[c])){lt[c]=!0;var u="";t&&t._owner!=null&&t._owner!==x()&&(u=null,typeof t._owner.tag=="number"?u=e(t._owner.type):typeof t._owner.name=="string"&&(u=t._owner.name),u=" It was passed a child from "+u+".");var b=J.getCurrentStack;J.getCurrentStack=function(){var M=p(t.type);return b&&(M+=b()||""),M},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',c,u),J.getCurrentStack=b}}function T(t){var c="",u=x();return u&&(u=e(u.type))&&(c=`
+
+Check the render method of \``+u+"`."),c||(t=e(t))&&(c=`
+
+Check the top-level render call using <`+t+">."),c}var re=l,q=Symbol.for("react.transitional.element"),C=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),w=Symbol.for("react.strict_mode"),G=Symbol.for("react.profiler"),S=Symbol.for("react.consumer"),v=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),$=Symbol.for("react.suspense_list"),U=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),j=Symbol.for("react.offscreen"),D=Symbol.iterator,K=Symbol.for("react.client.reference"),J=re.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ve=Object.prototype.hasOwnProperty,h=Object.assign,A=Symbol.for("react.client.reference"),O=Array.isArray,F=0,Y,$e,Ke,et,tt,rt,nt;o.__reactDisabledLog=!0;var Ee,ot,Ce=!1,Ne=new(typeof WeakMap=="function"?WeakMap:Map),jr=Symbol.for("react.client.reference"),at,st={},it={},lt={};ie.Fragment=E,ie.jsx=function(t,c,u,b,M){return B(t,c,u,!1,b,M)},ie.jsxs=function(t,c,u,b,M){return B(t,c,u,!0,b,M)}}()),ie}var Re;function dt(){return Re||(Re=1,process.env.NODE_ENV==="production"?ge.exports=ct():ge.exports=ut()),ge.exports}var a=dt();const je=e=>e>=200&&e<300?"bg-green-200 text-green-800":e>=300&&e<400?"bg-blue-200 text-blue-800":e>=400&&e<500?"bg-orange-600 text-orange-200":e>=500?"bg-red-800 text-red-100":"bg-gray-200 text-gray-800",ft=["bg-blue-100","border-l-4","border-blue-700"].join(" "),Pe=({request:e,reqId:r,onSelect:n,onRemove:o,selected:s})=>{const i=d=>{n(d)};return a.jsx("li",{className:`flex items-center cursor-pointer hover:bg-gray-200 ${s?ft:""}`,onClick:()=>{i(e)},children:a.jsxs("div",{className:"flex items-center p-2 w-full",children:[a.jsx("div",{className:"w-16 flex justify-center",children:a.jsx("span",{className:`inline-flex px-3 py-1 text-xs font-semibold rounded-full ${je(e.response.status)}`,children:e.response.status||"N/A"})}),a.jsx("div",{className:"w-20 text-center font-medium",children:e.request.method||"GET"}),a.jsx("div",{className:"flex-grow truncate text-left",children:e.endpoint||e.url}),a.jsxs("div",{className:"w-20 text-gray-500 text-center",children:[e.latency,"ms"]}),a.jsx("button",{className:"w-8 h-8 flex items-center justify-center text-red-500 hover:text-red-700",onClick:d=>{d.stopPropagation(),o(r)},children:"✕"})]})})},Te=({requests:e,onSelect:r,onRemove:n,clearRequests:o,selectedRequest:s})=>a.jsxs("div",{className:"flex flex-col h-full",children:[a.jsxs("div",{className:"p-4 flex justify-between items-center",children:[a.jsxs("span",{className:"font-bold text-xl",children:["Requests (",e.length,")"]}),a.jsx("button",{className:"px-3 py-1 bg-red-500 text-white rounded text-xs",onClick:o,children:"Clear All"})]}),a.jsxs("div",{className:"flex items-center bg-gray-200 p-2 border-b border-gray-300 text-sm font-bold",children:[a.jsx("div",{className:"w-16 text-center",children:"Status"}),a.jsx("div",{className:"w-20 text-center",children:"Method"}),a.jsx("div",{className:"flex-grow text-left",children:"URL"}),a.jsx("div",{className:"w-20 text-center",children:"Duration"}),a.jsx("div",{className:"w-10"})]}),a.jsx("ul",{className:"overflow-y-auto flex-grow",style:{maxHeight:"calc(100vh - 40px - 100px)"},children:e.map((i,d)=>{const f=i.id||d;return a.jsx(Pe,{reqId:f,request:i,onSelect:r,onRemove:n,selected:s&&s.id===f},f)})})]}),Me=({request:e})=>{const r=n=>{if(!n)return"N/A";const o=new Date(n),s=o.toLocaleDateString("en-CA",{year:"numeric",month:"2-digit",day:"2-digit"}),i=o.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});return`${s} at ${i}`};return a.jsxs("div",{className:"mb-4 p-4 bg-white rounded shadow",children:[a.jsx("h2",{className:"font-bold text-lg mb-2",children:"Request Details"}),a.jsxs("div",{className:"flex flex-col space-y-1",children:[a.jsxs("div",{className:"flex items-center space-x-2 font-mono text-lg",children:[a.jsx("span",{className:"font-bold",children:e.request.method}),a.jsx("span",{className:"text-blue-600",children:e.endpoint}),a.jsx("span",{className:`inline-flex px-3 py-1 text-xs font-semibold rounded-full ${je(e.response.status)}`,children:e.response.status})]}),a.jsx("div",{className:"text-gray-600",children:e.url}),a.jsxs("div",{className:"text-gray-500 text-xs",children:["Received on ",r(e.timestamp)," • Took ",e.latency,"ms to respond"]})]})]})};function gt(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function ke(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),n.push.apply(n,o)}return n}function Le(e){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?ke(Object(n),!0).forEach(function(o){gt(e,o,n[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ke(Object(n)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(n,o))})}return e}function pt(e,r){if(e==null)return{};var n={},o=Object.keys(e),s,i;for(i=0;i<o.length;i++)s=o[i],!(r.indexOf(s)>=0)&&(n[s]=e[s]);return n}function mt(e,r){if(e==null)return{};var n=pt(e,r),o,s;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(s=0;s<i.length;s++)o=i[s],!(r.indexOf(o)>=0)&&Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}function ht(e,r){return bt(e)||vt(e,r)||xt(e,r)||jt()}function bt(e){if(Array.isArray(e))return e}function vt(e,r){if(!(typeof Symbol>"u"||!(Symbol.iterator in Object(e)))){var n=[],o=!0,s=!1,i=void 0;try{for(var d=e[Symbol.iterator](),f;!(o=(f=d.next()).done)&&(n.push(f.value),!(r&&n.length===r));o=!0);}catch(p){s=!0,i=p}finally{try{!o&&d.return!=null&&d.return()}finally{if(s)throw i}}return n}}function xt(e,r){if(e){if(typeof e=="string")return Qe(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);if(n==="Object"&&e.constructor&&(n=e.constructor.name),n==="Map"||n==="Set")return Array.from(e);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Qe(e,r)}}function Qe(e,r){(r==null||r>e.length)&&(r=e.length);for(var n=0,o=new Array(r);n<r;n++)o[n]=e[n];return o}function jt(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function At(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function Ie(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),n.push.apply(n,o)}return n}function Be(e){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?Ie(Object(n),!0).forEach(function(o){At(e,o,n[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Ie(Object(n)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(n,o))})}return e}function yt(){for(var e=arguments.length,r=new Array(e),n=0;n<e;n++)r[n]=arguments[n];return function(o){return r.reduceRight(function(s,i){return i(s)},o)}}function le(e){return function r(){for(var n=this,o=arguments.length,s=new Array(o),i=0;i<o;i++)s[i]=arguments[i];return s.length>=e.length?e.apply(this,s):function(){for(var d=arguments.length,f=new Array(d),p=0;p<d;p++)f[p]=arguments[p];return r.apply(n,[].concat(s,f))}}}function pe(e){return{}.toString.call(e).includes("Object")}function wt(e){return!Object.keys(e).length}function ce(e){return typeof e=="function"}function Et(e,r){return Object.prototype.hasOwnProperty.call(e,r)}function Ct(e,r){return pe(r)||Z("changeType"),Object.keys(r).some(function(n){return!Et(e,n)})&&Z("changeField"),r}function Nt(e){ce(e)||Z("selectorType")}function St(e){ce(e)||pe(e)||Z("handlerType"),pe(e)&&Object.values(e).some(function(r){return!ce(r)})&&Z("handlersType")}function Ot(e){e||Z("initialIsRequired"),pe(e)||Z("initialType"),wt(e)&&Z("initialContent")}function Rt(e,r){throw new Error(e[r]||e.default)}var Pt={initialIsRequired:"initial state is required",initialType:"initial state should be an object",initialContent:"initial state shouldn't be an empty object",handlerType:"handler should be an object or a function",handlersType:"all handlers should be a functions",selectorType:"selector should be a function",changeType:"provided value of changes should be an object",changeField:'it seams you want to change a field in the state which is not specified in the "initial" state',default:"an unknown error accured in `state-local` package"},Z=le(Rt)(Pt),me={changes:Ct,selector:Nt,handler:St,initial:Ot};function Tt(e){var r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};me.initial(e),me.handler(r);var n={current:e},o=le(Lt)(n,r),s=le(kt)(n),i=le(me.changes)(e),d=le(Mt)(n);function f(){var x=arguments.length>0&&arguments[0]!==void 0?arguments[0]:function(N){return N};return me.selector(x),x(n.current)}function p(x){yt(o,s,i,d)(x)}return[f,p]}function Mt(e,r){return ce(r)?r(e.current):r}function kt(e,r){return e.current=Be(Be({},e.current),r),r}function Lt(e,r,n){return ce(r)?r(e.current):Object.keys(n).forEach(function(o){var s;return(s=r[o])===null||s===void 0?void 0:s.call(r,e.current[o])}),n}var Qt={create:Tt},It={paths:{vs:"https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs"}};function Bt(e){return function r(){for(var n=this,o=arguments.length,s=new Array(o),i=0;i<o;i++)s[i]=arguments[i];return s.length>=e.length?e.apply(this,s):function(){for(var d=arguments.length,f=new Array(d),p=0;p<d;p++)f[p]=arguments[p];return r.apply(n,[].concat(s,f))}}}function zt(e){return{}.toString.call(e).includes("Object")}function Jt(e){return e||Je("configIsRequired"),zt(e)||Je("configType"),e.urls?(qt(),{paths:{vs:e.urls.monacoBase}}):e}function qt(){console.warn(ze.deprecation)}function Dt(e,r){throw new Error(e[r]||e.default)}var ze={configIsRequired:"the configuration object is required",configType:"the configuration object should be an object",default:"an unknown error accured in `@monaco-editor/loader` package",deprecation:`Deprecation warning!
+    You are using deprecated way of configuration.
+
+    Instead of using
+      monaco.config({ urls: { monacoBase: '...' } })
+    use
+      monaco.config({ paths: { vs: '...' } })
+
+    For more please check the link https://github.com/suren-atoyan/monaco-loader#config
+  `},Je=Bt(Dt)(ze),Ft={config:Jt},Wt=function(){for(var r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return function(s){return n.reduceRight(function(i,d){return d(i)},s)}};function qe(e,r){return Object.keys(r).forEach(function(n){r[n]instanceof Object&&e[n]&&Object.assign(r[n],qe(e[n],r[n]))}),Le(Le({},e),r)}var Ht={type:"cancelation",msg:"operation is manually canceled"};function Ae(e){var r=!1,n=new Promise(function(o,s){e.then(function(i){return r?s(Ht):o(i)}),e.catch(s)});return n.cancel=function(){return r=!0},n}var Ut=Qt.create({config:It,isInitialized:!1,resolve:null,reject:null,monaco:null}),De=ht(Ut,2),ue=De[0],he=De[1];function Yt(e){var r=Ft.config(e),n=r.monaco,o=mt(r,["monaco"]);he(function(s){return{config:qe(s.config,o),monaco:n}})}function Vt(){var e=ue(function(r){var n=r.monaco,o=r.isInitialized,s=r.resolve;return{monaco:n,isInitialized:o,resolve:s}});if(!e.isInitialized){if(he({isInitialized:!0}),e.monaco)return e.resolve(e.monaco),Ae(ye);if(window.monaco&&window.monaco.editor)return Fe(window.monaco),e.resolve(window.monaco),Ae(ye);Wt(_t,Gt)(Xt)}return Ae(ye)}function _t(e){return document.body.appendChild(e)}function Zt(e){var r=document.createElement("script");return e&&(r.src=e),r}function Gt(e){var r=ue(function(o){var s=o.config,i=o.reject;return{config:s,reject:i}}),n=Zt("".concat(r.config.paths.vs,"/loader.js"));return n.onload=function(){return e()},n.onerror=r.reject,n}function Xt(){var e=ue(function(n){var o=n.config,s=n.resolve,i=n.reject;return{config:o,resolve:s,reject:i}}),r=window.require;r.config(e.config),r(["vs/editor/editor.main"],function(n){Fe(n),e.resolve(n)},function(n){e.reject(n)})}function Fe(e){ue().monaco||he({monaco:e})}function $t(){return ue(function(e){var r=e.monaco;return r})}var ye=new Promise(function(e,r){return he({resolve:e,reject:r})}),We={config:Yt,init:Vt,__getMonacoInstance:$t},Kt={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}},we=Kt,er={container:{display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"}},tr=er;function rr({children:e}){return l.createElement("div",{style:tr.container},e)}var nr=rr,or=nr;function ar({width:e,height:r,isEditorReady:n,loading:o,_ref:s,className:i,wrapperProps:d}){return l.createElement("section",{style:{...we.wrapper,width:e,height:r},...d},!n&&l.createElement(or,null,o),l.createElement("div",{ref:s,style:{...we.fullWidth,...!n&&we.hide},className:i}))}var sr=ar,He=l.memo(sr);function ir(e){l.useEffect(e,[])}var Ue=ir;function lr(e,r,n=!0){let o=l.useRef(!0);l.useEffect(o.current||!n?()=>{o.current=!1}:e,r)}var I=lr;function de(){}function oe(e,r,n,o){return cr(e,o)||ur(e,r,n,o)}function cr(e,r){return e.editor.getModel(Ye(e,r))}function ur(e,r,n,o){return e.editor.createModel(r,n,o?Ye(e,o):void 0)}function Ye(e,r){return e.Uri.parse(r)}function dr({original:e,modified:r,language:n,originalLanguage:o,modifiedLanguage:s,originalModelPath:i,modifiedModelPath:d,keepCurrentOriginalModel:f=!1,keepCurrentModifiedModel:p=!1,theme:x="light",loading:N="Loading...",options:R={},height:te="100%",width:Q="100%",className:B,wrapperProps:z={},beforeMount:P=de,onMount:H=de}){let[T,re]=l.useState(!1),[q,C]=l.useState(!0),E=l.useRef(null),w=l.useRef(null),G=l.useRef(null),S=l.useRef(H),v=l.useRef(P),W=l.useRef(!1);Ue(()=>{let g=We.init();return g.then(j=>(w.current=j)&&C(!1)).catch(j=>(j==null?void 0:j.type)!=="cancelation"&&console.error("Monaco initialization: error:",j)),()=>E.current?U():g.cancel()}),I(()=>{if(E.current&&w.current){let g=E.current.getOriginalEditor(),j=oe(w.current,e||"",o||n||"text",i||"");j!==g.getModel()&&g.setModel(j)}},[i],T),I(()=>{if(E.current&&w.current){let g=E.current.getModifiedEditor(),j=oe(w.current,r||"",s||n||"text",d||"");j!==g.getModel()&&g.setModel(j)}},[d],T),I(()=>{let g=E.current.getModifiedEditor();g.getOption(w.current.editor.EditorOption.readOnly)?g.setValue(r||""):r!==g.getValue()&&(g.executeEdits("",[{range:g.getModel().getFullModelRange(),text:r||"",forceMoveMarkers:!0}]),g.pushUndoStop())},[r],T),I(()=>{var g,j;(j=(g=E.current)==null?void 0:g.getModel())==null||j.original.setValue(e||"")},[e],T),I(()=>{let{original:g,modified:j}=E.current.getModel();w.current.editor.setModelLanguage(g,o||n||"text"),w.current.editor.setModelLanguage(j,s||n||"text")},[n,o,s],T),I(()=>{var g;(g=w.current)==null||g.editor.setTheme(x)},[x],T),I(()=>{var g;(g=E.current)==null||g.updateOptions(R)},[R],T);let X=l.useCallback(()=>{var D;if(!w.current)return;v.current(w.current);let g=oe(w.current,e||"",o||n||"text",i||""),j=oe(w.current,r||"",s||n||"text",d||"");(D=E.current)==null||D.setModel({original:g,modified:j})},[n,r,s,e,o,i,d]),$=l.useCallback(()=>{var g;!W.current&&G.current&&(E.current=w.current.editor.createDiffEditor(G.current,{automaticLayout:!0,...R}),X(),(g=w.current)==null||g.editor.setTheme(x),re(!0),W.current=!0)},[R,x,X]);l.useEffect(()=>{T&&S.current(E.current,w.current)},[T]),l.useEffect(()=>{!q&&!T&&$()},[q,T,$]);function U(){var j,D,K,J;let g=(j=E.current)==null?void 0:j.getModel();f||((D=g==null?void 0:g.original)==null||D.dispose()),p||((K=g==null?void 0:g.modified)==null||K.dispose()),(J=E.current)==null||J.dispose()}return l.createElement(He,{width:Q,height:te,isEditorReady:T,loading:N,_ref:G,className:B,wrapperProps:z})}var fr=dr;l.memo(fr);function gr(e){let r=l.useRef();return l.useEffect(()=>{r.current=e},[e]),r.current}var pr=gr,be=new Map;function mr({defaultValue:e,defaultLanguage:r,defaultPath:n,value:o,language:s,path:i,theme:d="light",line:f,loading:p="Loading...",options:x={},overrideServices:N={},saveViewState:R=!0,keepCurrentModel:te=!1,width:Q="100%",height:B="100%",className:z,wrapperProps:P={},beforeMount:H=de,onMount:T=de,onChange:re,onValidate:q=de}){let[C,E]=l.useState(!1),[w,G]=l.useState(!0),S=l.useRef(null),v=l.useRef(null),W=l.useRef(null),X=l.useRef(T),$=l.useRef(H),U=l.useRef(),g=l.useRef(o),j=pr(i),D=l.useRef(!1),K=l.useRef(!1);Ue(()=>{let h=We.init();return h.then(A=>(S.current=A)&&G(!1)).catch(A=>(A==null?void 0:A.type)!=="cancelation"&&console.error("Monaco initialization: error:",A)),()=>v.current?ve():h.cancel()}),I(()=>{var A,O,F,Y;let h=oe(S.current,e||o||"",r||s||"",i||n||"");h!==((A=v.current)==null?void 0:A.getModel())&&(R&&be.set(j,(O=v.current)==null?void 0:O.saveViewState()),(F=v.current)==null||F.setModel(h),R&&((Y=v.current)==null||Y.restoreViewState(be.get(i))))},[i],C),I(()=>{var h;(h=v.current)==null||h.updateOptions(x)},[x],C),I(()=>{!v.current||o===void 0||(v.current.getOption(S.current.editor.EditorOption.readOnly)?v.current.setValue(o):o!==v.current.getValue()&&(K.current=!0,v.current.executeEdits("",[{range:v.current.getModel().getFullModelRange(),text:o,forceMoveMarkers:!0}]),v.current.pushUndoStop(),K.current=!1))},[o],C),I(()=>{var A,O;let h=(A=v.current)==null?void 0:A.getModel();h&&s&&((O=S.current)==null||O.editor.setModelLanguage(h,s))},[s],C),I(()=>{var h;f!==void 0&&((h=v.current)==null||h.revealLine(f))},[f],C),I(()=>{var h;(h=S.current)==null||h.editor.setTheme(d)},[d],C);let J=l.useCallback(()=>{var h;if(!(!W.current||!S.current)&&!D.current){$.current(S.current);let A=i||n,O=oe(S.current,o||e||"",r||s||"",A||"");v.current=(h=S.current)==null?void 0:h.editor.create(W.current,{model:O,automaticLayout:!0,...x},N),R&&v.current.restoreViewState(be.get(A)),S.current.editor.setTheme(d),f!==void 0&&v.current.revealLine(f),E(!0),D.current=!0}},[e,r,n,o,s,i,x,N,R,d,f]);l.useEffect(()=>{C&&X.current(v.current,S.current)},[C]),l.useEffect(()=>{!w&&!C&&J()},[w,C,J]),g.current=o,l.useEffect(()=>{var h,A;C&&re&&((h=U.current)==null||h.dispose(),U.current=(A=v.current)==null?void 0:A.onDidChangeModelContent(O=>{K.current||re(v.current.getValue(),O)}))},[C,re]),l.useEffect(()=>{if(C){let h=S.current.editor.onDidChangeMarkers(A=>{var F;let O=(F=v.current.getModel())==null?void 0:F.uri;if(O&&A.find(Y=>Y.path===O.path)){let Y=S.current.editor.getModelMarkers({resource:O});q==null||q(Y)}});return()=>{h==null||h.dispose()}}return()=>{}},[C,q]);function ve(){var h,A;(h=U.current)==null||h.dispose(),te?R&&be.set(i,v.current.saveViewState()):(A=v.current.getModel())==null||A.dispose(),v.current.dispose()}return l.createElement(He,{width:Q,height:B,isEditorReady:C,loading:p,_ref:W,className:z,wrapperProps:P})}var hr=mr,br=l.memo(hr),Ve=br;const _e=({request:e})=>{const[r,n]=l.useState(!1),[o,s]=l.useState(!1),i=x=>Object.entries(x||{}).map(([N,R])=>a.jsxs("tr",{children:[a.jsx("td",{className:"border border-slate-200 px-2 py-1 font-mono text-slate-500 text-xs",children:N}),a.jsx("td",{className:"border border-slate-200 px-2 py-1 font-mono text-xs",children:R})]},N)),d=e.request.payload,f=!d||typeof d=="object"&&Object.keys(d).length===0||typeof d=="string"&&(d.trim()===""||d.trim()==="{}"),p=x=>{try{const N=JSON.parse(x);return JSON.stringify(N,null,2)}catch{return x}};return a.jsxs("div",{children:[a.jsxs("div",{className:"mb-4",children:[a.jsxs("button",{className:"w-full p-2 text-left font-bold bg-gray-200",onClick:()=>n(!r),children:["Query Parameters (",Object.keys(e.request.queryParams||{}).length,")"]}),r&&a.jsx("div",{className:"p-0",children:a.jsxs("table",{className:"w-full border-collapse border border-gray-300",children:[a.jsx("thead",{children:a.jsxs("tr",{className:"bg-gray-100",children:[a.jsx("th",{className:"border border-slate-200 px-2 py-1 w-1/4 text-left",children:"Key"}),a.jsx("th",{className:"border border-slate-200 px-2 py-1 text-left",children:"Value"})]})}),a.jsx("tbody",{children:i(e.request.queryParams)})]})})]}),a.jsxs("div",{className:"mb-4",children:[a.jsxs("button",{className:"w-full p-2 text-left font-bold bg-gray-200",onClick:()=>s(!o),children:["Headers (",Object.keys(e.request.headers||{}).length,")"]}),o&&a.jsx("div",{className:"p-0",children:a.jsxs("table",{className:"w-full border-collapse border border-gray-300",children:[a.jsx("thead",{children:a.jsxs("tr",{className:"bg-gray-100",children:[a.jsx("th",{className:"border border-slate-200 px-2 py-1 w-1/4 text-left",children:"Header"}),a.jsx("th",{className:"border border-slate-200 px-2 py-1 text-left",children:"Value"})]})}),a.jsx("tbody",{children:i(e.request.headers)})]})})]}),a.jsxs("div",{children:[a.jsx("button",{className:"w-full p-2 text-left font-bold bg-gray-200",children:"Request Body"}),f?a.jsx("div",{className:"hidden"}):a.jsx("div",{className:"bg-white rounded-b shadow p-0 h-100",children:a.jsx(Ve,{height:"100%",defaultLanguage:"json",value:p(d),options:{readOnly:!0,minimap:{enabled:!1},automaticLayout:!0,fontFamily:'"Cascadia Code", "Jetbrains Mono", "Fira Code", "Menlo", "Consolas", monospace',tabSize:2,scrollBeyondLastLine:!1}})})]})]})},Ze=({request:e})=>{const[r,n]=l.useState(!1),o=f=>Object.entries(f||{}).map(([p,x])=>a.jsxs("tr",{children:[a.jsx("td",{className:"border border-slate-200 px-2 py-1 font-mono text-slate-500 text-xs",children:p}),a.jsx("td",{className:"border border-slate-200 px-2 py-1 font-mono text-xs",children:x})]},p)),s=e.response.payload,i=!s||typeof s=="object"&&Object.keys(s).length===0||typeof s=="string"&&(s.trim()===""||s.trim()==="{}"),d=f=>{try{const p=JSON.parse(f);return JSON.stringify(p,null,2)}catch{return f}};return a.jsxs("div",{children:[a.jsxs("div",{className:"mb-4",children:[a.jsxs("button",{className:"w-full p-2 text-left font-bold bg-gray-200",onClick:()=>n(!r),children:["Headers (",Object.keys(e.response.headers||{}).length,")"]}),r&&a.jsx("div",{className:"p-0",children:a.jsxs("table",{className:"w-full border-collapse border border-gray-300",children:[a.jsx("thead",{children:a.jsxs("tr",{className:"bg-gray-100",children:[a.jsx("th",{className:"border border-slate-200 px-2 py-1 w-1/4 text-left",children:"Header"}),a.jsx("th",{className:"border border-slate-200 px-2 py-1 text-left",children:"Value"})]})}),a.jsx("tbody",{children:o(e.response.headers)})]})})]}),a.jsxs("div",{children:[a.jsx("button",{className:"w-full p-2 text-left font-bold bg-gray-200",children:"Response Body"}),i?a.jsx("div",{className:"hidden"}):a.jsx("div",{className:"bg-white rounded-b shadow p-0 h-100",children:a.jsx(Ve,{height:"100%",defaultLanguage:"json",value:d(s),options:{readOnly:!0,minimap:{enabled:!1},automaticLayout:!0,fontFamily:'"Cascadia Code", "Jetbrains Mono", "Fira Code", "Menlo", "Consolas", monospace',tabSize:2,scrollBeyondLastLine:!1}})})]})]})},Ge=({request:e,currentTab:r,setCurrentTab:n})=>e?a.jsxs("div",{children:[a.jsx(Me,{request:e}),a.jsxs("div",{className:"flex space-x-2",children:[a.jsx("button",{className:`px-4 py-2 rounded-t ${r==="request"?"bg-blue-600 text-white":"bg-gray-200 text-gray-700"}`,onClick:()=>n("request"),children:"Request"}),a.jsx("button",{className:`px-4 py-2 rounded-t ${r==="response"?"bg-blue-600 text-white":"bg-gray-200 text-gray-700"}`,onClick:()=>n("response"),children:"Response"})]}),a.jsx("div",{className:"p-4 bg-white rounded-b shadow",children:r==="request"?a.jsx(_e,{request:e}):a.jsx(Ze,{request:e})})]}):a.jsx("div",{className:"text-gray-500",children:"No request selected."}),vr="data:image/png;base64,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",Xe=({sseEndpoint:e,setSseEndpoint:r,isConnected:n})=>{const[o,s]=l.useState(!1),[i,d]=l.useState(e);l.useEffect(()=>{if(typeof window<"u"){const p=localStorage.getItem("sseEndpoint");!e&&p&&(d(p),r(p))}},[e,r]);const f=()=>{typeof window<"u"&&localStorage.setItem("sseEndpoint",i),r(i),s(!1)};return a.jsxs("div",{className:"fixed bottom-0 left-0 w-full",children:[a.jsxs("div",{className:"flex items-center justify-between bg-gray-200 px-4 py-2 w-full cursor-pointer select-none",onClick:()=>s(p=>!p),children:[a.jsx("div",{className:"flex items-center gap-4",children:a.jsxs("span",{className:`px-2 py-1 rounded-full text-xs font-semibold flex items-center ${n?"bg-green-500":"bg-red-500"}`,children:[a.jsx("span",{className:`w-2 h-2 rounded-full mr-1 ${n?"bg-green-800":"bg-red-800"}`}),n?"Connected":"Disconnected"]})}),a.jsxs("a",{href:"https://github.com/thim81/inspectr",target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-2",children:[a.jsx("img",{src:vr,alt:"Inspectr Logo",className:"h-6"}),a.jsx("span",{className:"text-gray-700 font-semibold text-sm",children:"Inspectr"})]})]}),a.jsx("div",{className:`bg-gray-100 border-t border-gray-300 transition-all duration-300 overflow-hidden ${o?"max-h-40 opacity-100 py-4":"max-h-0 opacity-0 py-0"}`,children:a.jsxs("div",{className:"px-6",children:[a.jsxs("div",{className:"grid grid-cols-2 gap-4 items-center",children:[a.jsx("div",{children:a.jsx("h2",{className:"text-lg font-semibold text-gray-800 mb-4",children:"Configuration"})}),a.jsxs("div",{className:"flex items-center gap-2",children:[a.jsx("label",{className:"text-gray-700 font-semibold whitespace-nowrap",children:"SSE Endpoint:"}),a.jsx("input",{type:"text",value:i,onChange:p=>d(p.target.value),className:"border p-2 rounded flex-1 bg-white",placeholder:"Enter SSE Endpoint..."})]})]}),a.jsx("div",{className:"flex justify-end mt-4",children:a.jsx("button",{onClick:f,className:"bg-green-600 text-white px-4 py-2 rounded-md",children:"Apply"})})]})})]})},xr=({sseEndpoint:e})=>{const[r,n]=l.useState([]),[o,s]=l.useState(null),[i,d]=l.useState("request"),[f,p]=l.useState("/api/sse"),[x,N]=l.useState(!1);l.useEffect(()=>{if(typeof window<"u"){const Q=localStorage.getItem("sseEndpoint");!e&&Q&&p(Q)}},[f]),l.useEffect(()=>{const Q=()=>`req-${Math.random().toString(36).substr(2,9)}`,B=new EventSource(f);return console.log(`EventSource created with URL: ${f}`),B.onopen=()=>{console.log("SSE connection opened"),N(!0)},B.onmessage=z=>{try{const P=JSON.parse(z.data);P.id||(P.id=Q()),n(H=>(H.length===0&&s(P),[P,...H]))}catch(P){console.error("Error parsing SSE data:",P)}},B.onerror=z=>{console.error("SSE error:",z),N(!1)},()=>{console.log("Closing EventSource"),B.close(),N(!1)}},[f]);const R=()=>{n([]),s(null)},te=Q=>{n(B=>B.filter((z,P)=>z.id?z.id!==Q:P!==Q)),o&&(o.id||"")===Q&&s(null)};return a.jsxs("div",{className:"flex flex-col h-screen",children:[a.jsxs("div",{className:"flex flex-grow",children:[a.jsx("div",{className:"w-1/3 border-r border-gray-300 overflow-y-auto",children:a.jsx(Te,{requests:r,onSelect:s,onRemove:te,clearRequests:R,selectedRequest:o})}),a.jsx("div",{className:"w-2/3 p-4",children:a.jsx(Ge,{request:o,currentTab:i,setCurrentTab:d})})]}),a.jsx(Xe,{sseEndpoint:f,setSseEndpoint:p,isConnected:x})]})};k.InspectrApp=xr,k.RequestContent=_e,k.RequestDetail=Me,k.RequestDetailsPanel=Ge,k.RequestList=Te,k.RequestListItem=Pe,k.ResponseContent=Ze,k.SettingsPanel=Xe,k.getStatusClass=je,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@inspectr/ui",
   "description": "React UI components for Inspectr",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "Tim Haselaars",
   "homepage": "https://github.com/thim81/inspectr#readme",
   "bugs": "https://github.com/thim81/inspectr-ui/issues",
@@ -10,14 +10,15 @@
     "type": "git",
     "url": "git+https://github.com/thim81/inspectr-ui.git"
   },
-  "main": "src/index.js",
-  "module": "src/index.js",
+  "main": "dist/inspectr-ui.umd.js",
+  "module": "dist/inspectr-ui.es.js",
   "types": "index.d.ts",
   "files": [
-    "src",
+    "dist",
     "index.d.ts"
   ],
   "scripts": {
+    "build": "vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "release": "npx np --branch main",
@@ -28,14 +29,12 @@
     "tailwindcss": "^4.0.5"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@tailwindcss/postcss": "^4.0.5",
     "postcss": "^8.5.1",
-    "@tailwindcss/postcss": "^4.0.5"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
     "@chromatic-com/storybook": "^3.2.4",
     "@storybook/addon-essentials": "^8.5.3",
     "@storybook/addon-interactions": "^8.5.3",
@@ -45,7 +44,11 @@
     "@storybook/react-vite": "^8.5.3",
     "@storybook/test": "^8.5.3",
     "@tailwindcss/vite": "^4.0.5",
-    "storybook": "^8.5.3"
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "storybook": "^8.5.3",
+    "vite": "^6.1.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/InspectrApp.jsx

@@ -1,113 +0,0 @@
-// src/components/InspectrApp.jsx
-import React, { useState, useEffect } from 'react';
-import RequestList from './RequestList';
-import RequestDetailsPanel from './RequestDetailsPanel';
-import SettingsPanel from "./SettingsPanel";
-
-const InspectrApp = ({ sseEndpoint: propSseEndpoint }) => {
-    const [requests, setRequests] = useState([]);
-    const [selectedRequest, setSelectedRequest] = useState(null);
-    const [currentTab, setCurrentTab] = useState('request');
-    const [sseEndpoint, setSseEndpoint] = useState('/api/sse');
-    const [isConnected, setIsConnected] = useState(false); // Track connection status
-
-    // Ensure localStorage is only accessed on the client
-    useEffect(() => {
-        if (typeof window !== "undefined") {
-            const storedSseEndpoint = localStorage.getItem("sseEndpoint");
-            if (!propSseEndpoint && storedSseEndpoint) {
-                setSseEndpoint(storedSseEndpoint);
-            }
-        }
-    }, [sseEndpoint]);
-
-    // Connect to SSE when the component mounts.
-    useEffect(() => {
-        const generateId = () => `req-${Math.random().toString(36).substr(2, 9)}`;
-
-        const eventSource = new EventSource(sseEndpoint);
-        console.log(`EventSource created with URL: ${sseEndpoint}`);
-
-        eventSource.onopen = () => {
-            console.log('SSE connection opened');
-            setIsConnected(true);
-        };
-
-        eventSource.onmessage = (e) => {
-            try {
-                const data = JSON.parse(e.data);
-                // console.log('Received event:', data);
-                // Update the list and, if it's the first event, select it.
-                if (!data.id) data.id = generateId();
-                setRequests((prev) => {
-                    if (prev.length === 0) {
-                        setSelectedRequest(data);
-                    }
-                    return [data, ...prev];
-                });
-            } catch (error) {
-                console.error('Error parsing SSE data:', error);
-            }
-        };
-
-        eventSource.onerror = (err) => {
-            console.error('SSE error:', err);
-            setIsConnected(false);
-            // The EventSource object will try to reconnect automatically.
-        };
-
-        return () => {
-            console.log('Closing EventSource');
-            eventSource.close();
-            setIsConnected(false);
-        };
-    }, [sseEndpoint]); // Run only once on mount
-
-    const clearRequests = () => {
-        setRequests([]);
-        setSelectedRequest(null);
-    };
-
-    const removeRequest = (reqId) => {
-        setRequests((prev) =>
-            prev.filter((req, i) => (req.id ? req.id !== reqId : i !== reqId))
-        );
-        if (selectedRequest && (selectedRequest.id || '') === reqId) {
-            setSelectedRequest(null);
-        }
-    };
-
-    return (
-        <div className="flex flex-col h-screen">
-            <div className="flex flex-grow">
-                {/* Left Panel */}
-                <div className="w-1/3 border-r border-gray-300 overflow-y-auto">
-                    <RequestList
-                        requests={requests}
-                        onSelect={setSelectedRequest}
-                        onRemove={removeRequest}
-                        clearRequests={clearRequests}
-                        selectedRequest={selectedRequest}
-                    />
-                </div>
-
-                {/* Right Panel */}
-                <div className="w-2/3 p-4">
-                    <RequestDetailsPanel
-                        request={selectedRequest}
-                        currentTab={currentTab}
-                        setCurrentTab={setCurrentTab}
-                    />
-                </div>
-            </div>
-            {/* Bottom Panel */}
-            <SettingsPanel
-                sseEndpoint={sseEndpoint}
-                setSseEndpoint={setSseEndpoint}
-                isConnected={isConnected}
-            />
-        </div>
-    );
-};
-
-export default InspectrApp;

package/src/components/RequestContent.jsx

@@ -1,113 +0,0 @@
-// src/components/RequestContent.jsx
-import React, { useState } from 'react';
-import Editor from '@monaco-editor/react';
-
-const RequestContent = ({ request }) => {
-    const [showQueryParams, setShowQueryParams] = useState(false);
-    const [showRequestHeaders, setShowRequestHeaders] = useState(false);
-
-    const renderTableRows = (data) =>
-        Object.entries(data || {}).map(([key, value]) => (
-            <tr key={key}>
-                <td className="border border-slate-200 px-2 py-1 font-mono text-slate-500 text-xs">
-                    {key}
-                </td>
-                <td className="border border-slate-200 px-2 py-1 font-mono text-xs">{value}</td>
-            </tr>
-        ));
-
-    // Check if the request body has content.
-    const payload = request.request.payload;
-    const isEmptyPayload =
-        !payload ||
-        (typeof payload === 'object' && Object.keys(payload).length === 0) ||
-        (typeof payload === 'string' &&
-            (payload.trim() === '' || payload.trim() === '{}'));
-
-    const formatPayload = (payload) => {
-        try {
-            const parsed = JSON.parse(payload);
-            return JSON.stringify(parsed, null, 2);
-        } catch (e) {
-            return payload;
-        }
-    }
-
-    return (
-        <div>
-            {/* Query Parameters Section */}
-            <div className="mb-4">
-                <button
-                    className="w-full p-2 text-left font-bold bg-gray-200"
-                    onClick={() => setShowQueryParams(!showQueryParams)}
-                >
-                    Query Parameters ({Object.keys(request.request.queryParams || {}).length})
-                </button>
-                {showQueryParams && (
-                    <div className="p-0">
-                        <table className="w-full border-collapse border border-gray-300">
-                            <thead>
-                            <tr className="bg-gray-100">
-                                <th className="border border-slate-200 px-2 py-1 w-1/4 text-left">Key</th>
-                                <th className="border border-slate-200 px-2 py-1 text-left">Value</th>
-                            </tr>
-                            </thead>
-                            <tbody>{renderTableRows(request.request.queryParams)}</tbody>
-                        </table>
-                    </div>
-                )}
-            </div>
-
-            {/* Request Headers Section */}
-            <div className="mb-4">
-                <button
-                    className="w-full p-2 text-left font-bold bg-gray-200"
-                    onClick={() => setShowRequestHeaders(!showRequestHeaders)}
-                >
-                    Headers ({Object.keys(request.request.headers || {}).length})
-                </button>
-                {showRequestHeaders && (
-                    <div className="p-0">
-                        <table className="w-full border-collapse border border-gray-300">
-                            <thead>
-                            <tr className="bg-gray-100">
-                                <th className="border border-slate-200 px-2 py-1 w-1/4 text-left">Header</th>
-                                <th className="border border-slate-200 px-2 py-1 text-left">Value</th>
-                            </tr>
-                            </thead>
-                            <tbody>{renderTableRows(request.request.headers)}</tbody>
-                        </table>
-                    </div>
-                )}
-            </div>
-
-            {/* Request Body Section */}
-            <div>
-                <button className="w-full p-2 text-left font-bold bg-gray-200">
-                    Request Body
-                </button>
-                {isEmptyPayload ? (
-                    <div className="hidden"></div>
-                ) : (
-                    <div className="bg-white rounded-b shadow p-0 h-100">
-                        <Editor
-                            height="100%"
-                            defaultLanguage="json"
-                            value={formatPayload(payload)}
-                            options={{
-                                readOnly: true,
-                                minimap: { enabled: false },
-                                automaticLayout: true,
-                                fontFamily: '"Cascadia Code", "Jetbrains Mono", "Fira Code", "Menlo", "Consolas", monospace',
-                                tabSize: 2,
-                                scrollBeyondLastLine: false
-                            }}
-                        />
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default RequestContent;

package/src/components/RequestDetail.jsx

@@ -1,51 +0,0 @@
-// src/components/RequestDetail.jsx
-import React from 'react';
-import {getStatusClass} from "../utils/getStatusClass.js";
-
-const RequestDetail = ({ request }) => {
-
-    const formatTimestamp = (isoString) => {
-        if (!isoString) return "N/A"; // Handle missing timestamp
-        const date = new Date(isoString);
-
-        const formattedDate = date.toLocaleDateString("en-CA", { // YYYY-MM-DD format
-            year: "numeric",
-            month: "2-digit",
-            day: "2-digit",
-        });
-
-        const formattedTime = date.toLocaleTimeString([], { // HH:MM:SS in local time
-            hour: "2-digit",
-            minute: "2-digit",
-            second: "2-digit",
-            hour12: false, // 24-hour format
-        });
-
-        return `${formattedDate} at ${formattedTime}`;
-    };
-
-    return (
-        <div className="mb-4 p-4 bg-white rounded shadow">
-            <h2 className="font-bold text-lg mb-2">Request Details</h2>
-            <div className="flex flex-col space-y-1">
-                <div className="flex items-center space-x-2 font-mono text-lg">
-                    <span className="font-bold">{request.request.method}</span>
-                    <span className="text-blue-600">{request.endpoint}</span>
-                    <span
-                        className={`inline-flex px-3 py-1 text-xs font-semibold rounded-full ${getStatusClass(
-                            request.response.status
-                        )}`}
-                    >
-            {request.response.status}
-          </span>
-                </div>
-                <div className="text-gray-600">{request.url}</div>
-                <div className="text-gray-500 text-xs">
-                    Received on {formatTimestamp(request.timestamp)} • Took {request.latency}ms to respond
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default RequestDetail;

package/src/components/RequestDetailsPanel.jsx

@@ -1,52 +0,0 @@
-// src/components/RequestDetailsPanel.jsx
-import React from 'react';
-import RequestDetail from './RequestDetail';
-import RequestContent from './RequestContent';
-import ResponseContent from './ResponseContent';
-
-const RequestDetailsPanel = ({ request, currentTab, setCurrentTab }) => {
-    if (!request) {
-        return <div className="text-gray-500">No request selected.</div>;
-    }
-
-    return (
-        <div>
-            <RequestDetail request={request} />
-
-            {/* Tabs for Request and Response */}
-            <div className="flex space-x-2">
-                <button
-                    className={`px-4 py-2 rounded-t ${
-                        currentTab === 'request'
-                            ? 'bg-blue-600 text-white'
-                            : 'bg-gray-200 text-gray-700'
-                    }`}
-                    onClick={() => setCurrentTab('request')}
-                >
-                    Request
-                </button>
-                <button
-                    className={`px-4 py-2 rounded-t ${
-                        currentTab === 'response'
-                            ? 'bg-blue-600 text-white'
-                            : 'bg-gray-200 text-gray-700'
-                    }`}
-                    onClick={() => setCurrentTab('response')}
-                >
-                    Response
-                </button>
-            </div>
-
-            {/* Tab Content */}
-            <div className="p-4 bg-white rounded-b shadow">
-                {currentTab === 'request' ? (
-                    <RequestContent request={request} />
-                ) : (
-                    <ResponseContent request={request} />
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default RequestDetailsPanel;

package/src/components/RequestList.jsx

@@ -1,48 +0,0 @@
-// src/components/RequestList.jsx
-import React, {useState} from 'react';
-import RequestListItem from './RequestListItem';
-
-const RequestList = ({requests, onSelect, onRemove, clearRequests, selectedRequest}) => {
-    return (
-        <div className="flex flex-col h-full">
-            <div className="p-4 flex justify-between items-center">
-                <span className="font-bold text-xl">
-                  Requests ({requests.length})
-                </span>
-                <button
-                    className="px-3 py-1 bg-red-500 text-white rounded text-xs"
-                    onClick={clearRequests}
-                >
-                    Clear All
-                </button>
-            </div>
-
-            {/* Table Header */}
-            <div className="flex items-center bg-gray-200 p-2 border-b border-gray-300 text-sm font-bold">
-                <div className="w-16 text-center">Status</div>
-                <div className="w-20 text-center">Method</div>
-                <div className="flex-grow text-left">URL</div>
-                <div className="w-20 text-center">Duration</div>
-                <div className="w-10"></div>
-            </div>
-
-            <ul className="overflow-y-auto flex-grow" style={{ maxHeight: "calc(100vh - 40px - 100px)" }}>
-                {requests.map((req, index) => {
-                    const reqId = req.id || index;
-                    return (
-                        <RequestListItem
-                            key={reqId}
-                            reqId={reqId}
-                            request={req}
-                            onSelect={onSelect}
-                            onRemove={onRemove}
-                            selected={selectedRequest && selectedRequest.id === reqId}
-                        />
-                    );
-                })}
-            </ul>
-        </div>
-    );
-};
-
-export default RequestList;

package/src/components/RequestListItem.jsx

@@ -1,52 +0,0 @@
-// src/components/RequestListItem.jsx
-import React from 'react';
-import {getStatusClass} from "../utils/getStatusClass.js";
-
-const selectedClass = ["bg-blue-100", "border-l-4", "border-blue-700"].join(" ");
-
-const RequestListItem = ({request, reqId, onSelect, onRemove, selected}) => {
-    const handleSelect = (request) => {
-        onSelect(request);
-    };
-
-    return (
-        <li
-            className={`flex items-center cursor-pointer hover:bg-gray-200 ${selected ? selectedClass : ""}`}
-            onClick={() => {
-                handleSelect(request);
-            }}
-        >
-            <div className="flex items-center p-2 w-full">
-                <div className="w-16 flex justify-center">
-                  <span
-                      className={`inline-flex px-3 py-1 text-xs font-semibold rounded-full ${getStatusClass(
-                          request.response.status
-                      )}`}
-                  >
-                    {request.response.status || 'N/A'}
-                  </span>
-                </div>
-                <div className="w-20 text-center font-medium">
-                    {request.request.method || 'GET'}
-                </div>
-                <div className="flex-grow truncate text-left">
-                    {request.endpoint || request.url}
-                </div>
-                <div className="w-20 text-gray-500 text-center">
-                    {request.latency}ms
-                </div>
-                <button
-                    className="w-8 h-8 flex items-center justify-center text-red-500 hover:text-red-700"
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        onRemove(reqId);
-                    }}
-                >
-                    ✕
-                </button>
-            </div>
-        </li>
-    );
-};
-
-export default RequestListItem;