postboy-tui 1.3.7 → 1.3.9

package/dist/cli.js

@@ -67630,6 +67630,14 @@ function sendRequest({ method, url, headers = {}, body }) {
   return new Promise((resolve, reject) => {
     const urlObj = new URL2(url);
     const isHttps = urlObj.protocol === "https:";
+    const timings = {
+      start: performance.now(),
+      dnsLookup: 0,
+      tcpConnection: 0,
+      tlsHandshake: 0,
+      ttfb: 0,
+      end: 0
+    };
     const options = {
       method,
       hostname: urlObj.hostname,
@@ -67639,21 +67647,41 @@ function sendRequest({ method, url, headers = {}, body }) {
     };
     const reqModule = isHttps ? https : http;
     const req = reqModule.request(options, (res) => {
+      timings.ttfb = performance.now();
       let data = "";
       res.on("data", (chunk) => {
         data += chunk;
       });
       res.on("end", () => {
-        try {
-          resolve({
-            status: res.statusCode || 0,
-            statusText: res.statusMessage || "",
-            headers: Object.fromEntries(Object.entries(res.headers).map(([k, v]) => [k, Array.isArray(v) ? v.join(", ") : v || ""])),
-            body: data
-          });
-        } catch (err) {
-          reject(err);
-        }
+        timings.end = performance.now();
+        const contentLength = parseInt(res.headers["content-length"] || "0", 10) || Buffer.byteLength(data, "utf8");
+        const metrics = {
+          dnsLookup: timings.dnsLookup - timings.start,
+          tcpConnection: timings.tcpConnection - timings.dnsLookup,
+          tlsHandshake: isHttps ? timings.tlsHandshake - timings.tcpConnection : 0,
+          ttfb: timings.ttfb - timings.start,
+          contentDownload: timings.end - timings.ttfb,
+          total: timings.end - timings.start,
+          contentLength
+        };
+        resolve({
+          status: res.statusCode || 0,
+          statusText: res.statusMessage || "",
+          headers: Object.fromEntries(Object.entries(res.headers).map(([k, v]) => [k, Array.isArray(v) ? v.join(", ") : v || ""])),
+          body: data,
+          metrics
+        });
+      });
+    });
+    req.on("socket", (socket) => {
+      socket.on("lookup", () => {
+        timings.dnsLookup = performance.now();
+      });
+      socket.on("connect", () => {
+        timings.tcpConnection = performance.now();
+      });
+      socket.on("secureConnect", () => {
+        timings.tlsHandshake = performance.now();
       });
     });
     req.on("error", reject);
@@ -69342,7 +69370,7 @@ var import_react32 = __toESM(require_react(), 1);
 var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
 var ResponsePanel = import_react32.default.memo(({ response, theme }) => {
   const [activeTab, setActiveTab] = import_react32.useState("body");
-  const tabs = [{ name: "headers", label: "Headers" }, { name: "body", label: "Body" }];
+  const tabs = [{ name: "body", label: "Body" }, { name: "headers", label: "Headers" }];
   return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
     flexDirection: "column",
     flexGrow: 1,
@@ -69843,22 +69871,236 @@ class ThemeManager {
 }
 var themeManager = new ThemeManager;
 
-// src/ui/app/ui.tsx
+// src/ui/app/components/metricspanel.tsx
 var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
+var MetricBar = ({ label, value, maxValue, color, theme }) => {
+  const barWidth = 40;
+  const safeValue = Math.max(0, value);
+  const filledWidth = Math.max(0, Math.min(barWidth, maxValue > 0 ? Math.round(safeValue / maxValue * barWidth) : 0));
+  const emptyWidth = barWidth - filledWidth;
+  const bar = "█".repeat(filledWidth) + "░".repeat(emptyWidth);
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+    marginY: 0,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        width: 18,
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          color: theme.colors.muted,
+          children: label
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        width: barWidth + 2,
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          color,
+          children: bar
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        width: 12,
+        justifyContent: "flex-end",
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          color: theme.colors.white,
+          bold: true,
+          children: [
+            safeValue.toFixed(1),
+            "ms"
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var formatBytes = (bytes) => {
+  if (bytes === 0)
+    return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+};
+var MetricsPanel = ({ metrics, theme }) => {
+  if (!metrics) {
+    return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      flexDirection: "column",
+      padding: 1,
+      children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        color: theme.colors.muted,
+        children: "No metrics available. Send a request first."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const maxTime = Math.max(Math.max(0, metrics.dnsLookup), Math.max(0, metrics.tcpConnection), Math.max(0, metrics.tlsHandshake), Math.max(0, metrics.ttfb), Math.max(0, metrics.contentDownload), 1);
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+    flexDirection: "column",
+    paddingX: 1,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        marginBottom: 1,
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.accent,
+            bold: true,
+            children: "⚡ Performance Breakdown"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.muted,
+            children: "────────────────────────────────────────────────────────────"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        flexDirection: "column",
+        gap: 0,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
+            label: "\uD83D\uDD0D DNS Lookup",
+            value: metrics.dnsLookup,
+            maxValue: maxTime,
+            color: theme.colors.cool,
+            theme
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
+            label: "\uD83D\uDD0C TCP Connect",
+            value: metrics.tcpConnection,
+            maxValue: maxTime,
+            color: theme.colors.success,
+            theme
+          }, undefined, false, undefined, this),
+          metrics.tlsHandshake > 0 && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
+            label: "\uD83D\uDD10 TLS Handshake",
+            value: metrics.tlsHandshake,
+            maxValue: maxTime,
+            color: theme.colors.secondary,
+            theme
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
+            label: "⏱️  TTFB",
+            value: metrics.ttfb,
+            maxValue: maxTime,
+            color: theme.colors.accent,
+            theme
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
+            label: "\uD83D\uDCE5 Download",
+            value: metrics.contentDownload,
+            maxValue: maxTime,
+            color: theme.colors.primary,
+            theme
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        marginTop: 1,
+        flexDirection: "column",
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          color: theme.colors.muted,
+          children: "────────────────────────────────────────────────────────────"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        marginTop: 1,
+        flexDirection: "column",
+        gap: 0,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+                width: 18,
+                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                  color: theme.colors.accent,
+                  bold: true,
+                  children: "\uD83D\uDCCA Total Time"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                color: theme.colors.white,
+                bold: true,
+                children: [
+                  metrics.total.toFixed(2),
+                  " ms"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+                width: 18,
+                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                  color: theme.colors.accent,
+                  bold: true,
+                  children: "\uD83D\uDCE6 Size"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                color: theme.colors.white,
+                bold: true,
+                children: formatBytes(metrics.contentLength)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          metrics.contentLength > 0 && metrics.contentDownload > 0 && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+                width: 18,
+                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                  color: theme.colors.accent,
+                  bold: true,
+                  children: "\uD83D\uDE80 Speed"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                color: theme.colors.success,
+                bold: true,
+                children: [
+                  formatBytes(metrics.contentLength / (metrics.contentDownload / 1000)),
+                  "/s"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        marginTop: 1,
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.muted,
+            children: "────────────────────────────────────────────────────────────"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+            marginTop: 1,
+            children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+              color: theme.colors.muted,
+              dimColor: true,
+              children: "TTFB = Time To First Byte (DNS + TCP + TLS + Server Processing)"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/ui/app/ui.tsx
+var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
 var SendButton = ({ onPress, loading, theme }) => {
   const { isFocused } = use_focus_default();
   use_input_default((_, key) => {
     if (isFocused && key.return)
       onPress();
   });
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
     borderStyle: "round",
     paddingX: 2,
     borderTopDimColor: true,
     borderColor: isFocused ? theme.accent : theme.primary,
-    children: loading ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Spinner, {
+    children: loading ? /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Spinner, {
       theme
-    }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+    }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
       bold: true,
       color: isFocused ? theme.accent : theme.white,
       children: "\uD83D\uDE80 Send"
@@ -69866,12 +70108,12 @@ var SendButton = ({ onPress, loading, theme }) => {
   }, undefined, false, undefined, this);
 };
 var HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS", "HEAD"];
-var RequestPanel = import_react34.default.memo(({ request, onMethodChange, onUrlChange, onHeadersChange, onBodyChange, onSend, loading, theme, historyUrls = [], onInputFocus }) => /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+var RequestPanel = import_react34.default.memo(({ request, onMethodChange, onUrlChange, onHeadersChange, onBodyChange, onSend, loading, theme, historyUrls = [], onInputFocus }) => /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
   flexDirection: "column",
   gap: 1,
   flexGrow: 1,
   children: [
-    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(FormField, {
+    /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FormField, {
       label: "Method",
       value: request.method,
       onChange: onMethodChange,
@@ -69880,7 +70122,7 @@ var RequestPanel = import_react34.default.memo(({ request, onMethodChange, onUrl
       suggestions: HTTP_METHODS,
       onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(FormField, {
+    /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(FormField, {
       label: "URL",
       value: request.url,
       onChange: onUrlChange,
@@ -69889,7 +70131,7 @@ var RequestPanel = import_react34.default.memo(({ request, onMethodChange, onUrl
       suggestions: historyUrls,
       onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(KeyValueField, {
+    /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(KeyValueField, {
       label: "Headers",
       value: request.headers,
       onChange: onHeadersChange,
@@ -69897,7 +70139,7 @@ var RequestPanel = import_react34.default.memo(({ request, onMethodChange, onUrl
       theme,
       onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(KeyValueField, {
+    /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(KeyValueField, {
       label: "Body",
       value: request.body,
       onChange: onBodyChange,
@@ -69905,10 +70147,10 @@ var RequestPanel = import_react34.default.memo(({ request, onMethodChange, onUrl
       theme,
       onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+    /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
       marginTop: 1,
       justifyContent: "center",
-      children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(SendButton, {
+      children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(SendButton, {
         onPress: onSend,
         loading,
         theme
@@ -69922,6 +70164,7 @@ var UI = () => {
   const [activeTab, setActiveTab] = import_react34.useState("request");
   const [request, setRequest] = import_react34.useState({ method: "GET", url: "", headers: "", body: "" });
   const [response, setResponse] = import_react34.useState({ statustext: "", status: "", headers: "", body: "", error: "" });
+  const [metrics, setMetrics] = import_react34.useState(null);
   const [history, setHistory] = import_react34.useState([]);
   const [loading, setLoading] = import_react34.useState(false);
   const requestRef = import_react34.useRef(request);
@@ -69965,6 +70208,7 @@ var UI = () => {
       const responseTime = Date.now() - startTime;
       await historyManager.addEntry({ ...currentRequest }, res.status, responseTime);
       setHistory((await historyManager.loadHistory()).entries);
+      setMetrics(res.metrics);
       setResponse({ statustext: res.statusText, status: res.status.toString(), headers: JSON.stringify(res.headers), body: res.body, error: res.status >= 200 && res.status < 400 ? "" : `Error: ${res.statusText}` });
       setActiveTab("response");
     } catch (error) {
@@ -70015,89 +70259,89 @@ var UI = () => {
   const onHeadersChange = import_react34.useCallback((headers) => setRequest((r) => ({ ...r, headers })), []);
   const onBodyChange = import_react34.useCallback((body) => setRequest((r) => ({ ...r, body })), []);
   const historyUrls = Array.from(new Set(history.map((h) => h.url))).filter(Boolean);
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
     padding: 1,
     flexDirection: "column",
     flexGrow: 1,
     children: [
-      showThemeSelector && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      showThemeSelector && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
         flexDirection: "row",
         justifyContent: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ThemeSelector, {
+        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(ThemeSelector, {
           theme,
           onThemeChange: (themeName) => {
             handleThemeChange(themes[themeName]);
           }
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      showExportDialog && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      showExportDialog && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
         flexDirection: "row",
         justifyContent: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ExportDialog, {
+        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(ExportDialog, {
           request,
           onClose: () => setShowExportDialog(false),
           theme: theme.colors
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
           color: theme.colors.accent,
           bold: true,
           children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
           color: theme.colors.primary,
           bold: true,
           children: `┃   \uD83D\uDEF0️  Welcome to PostBoy — The Modern Terminal API Client   ┃`
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
           color: theme.colors.accent,
           bold: true,
           children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
         flexGrow: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
             width: "40%",
             borderColor: theme.colors.muted,
             flexDirection: "column",
             marginRight: 1,
             children: [
-              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                 borderTopColor: "grey",
                 borderColor: theme.colors.secondary,
                 paddingX: 1,
                 alignSelf: "center",
-                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: "\uD83D\uDCDC History"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                 flexDirection: "column",
                 flexGrow: 1,
                 borderRightColor: "grey",
@@ -70106,22 +70350,43 @@ var UI = () => {
                 borderLeft: false,
                 borderBottom: false,
                 paddingY: 1,
-                children: history.length === 0 ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+                children: history.length === 0 ? /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                   padding: 1,
-                  children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                  children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                     color: theme.colors.muted,
                     children: "No requests yet..."
                   }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(HistoryList, {
+                }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(HistoryList, {
                   history,
                   onItemClick: handleHistoryClick,
                   theme
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+                flexDirection: "column",
+                borderStyle: "round",
+                borderColor: theme.colors.muted,
+                marginX: 1,
+                children: [
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+                    alignSelf: "center",
+                    paddingX: 1,
+                    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                      color: theme.colors.accent,
+                      bold: true,
+                      children: "⚡ Metrics"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(MetricsPanel, {
+                    metrics,
+                    theme
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
@@ -70129,36 +70394,36 @@ var UI = () => {
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
             width: "60%",
             borderColor: theme.colors.muted,
             padding: 1,
             flexDirection: "column",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Tabs, {
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Tabs, {
                 tabs,
                 activeTab,
                 onChange: setActiveTab,
                 theme
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                 marginTop: 1,
                 flexDirection: "column",
                 flexGrow: 1,
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                     display: activeTab === "request" ? "flex" : "none",
                     flexGrow: 1,
-                    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(RequestPanel, {
+                    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(RequestPanel, {
                       request,
                       onMethodChange,
                       onUrlChange,
@@ -70171,20 +70436,20 @@ var UI = () => {
                       onInputFocus: setInputFocused
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                     display: activeTab === "response" ? "flex" : "none",
                     flexGrow: 1,
-                    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ResponsePanel, {
+                    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(ResponsePanel, {
                       response,
                       theme
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
@@ -70194,7 +70459,7 @@ var UI = () => {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Footer, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Footer, {
         theme: theme.colors
       }, undefined, false, undefined, this)
     ]
@@ -70203,14 +70468,14 @@ var UI = () => {
 var ui_default = UI;
 
 // src/ui/app/app.tsx
-var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
 function App2() {
-  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(ui_default, {}, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(ui_default, {}, undefined, false, undefined, this);
 }
 
 // src/commands/ui.tsx
 var import_chalk6 = __toESM(require_source(), 1);
-var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
 var UIWrapper = () => {
   const { exit } = use_app_default();
   use_input_default((input) => {
@@ -70218,18 +70483,18 @@ var UIWrapper = () => {
       exit();
     }
   });
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(Text, {
         children: import_chalk6.default.cyanBright(`PostBoy \uD83D\uDC8C`)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(App2, {}, undefined, false, undefined, this)
+      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(App2, {}, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
 var uiCommand = () => {
-  render_default(/* @__PURE__ */ jsx_dev_runtime14.jsxDEV(UIWrapper, {}, undefined, false, undefined, this));
+  render_default(/* @__PURE__ */ jsx_dev_runtime15.jsxDEV(UIWrapper, {}, undefined, false, undefined, this));
 };
 
 // src/commands/test.ts
@@ -70398,7 +70663,7 @@ async function mockApis() {
 
 // src/index.ts
 var program2 = new Command;
-program2.version("1.3.7").description(import_chalk9.default.yellow("PostBoy CLI - Test your APIs with ease"));
+program2.version("1.3.9").description(import_chalk9.default.yellow("PostBoy CLI - Test your APIs with ease"));
 program2.command("run").description("Run a test API request").action(testCommand);
 program2.command("mock-list").description("List the mock API servers").action(mockApis);
 program2.command("ui").description("UI for PostBoy").action(uiCommand);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postboy-tui",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "main": "dist/cli.js",
   "bin": {
     "postboy-tui": "dist/cli.js"