postboy-tui 1.3.9 → 1.4.0

package/dist/cli.js

@@ -67534,7 +67534,7 @@ var useFocusManager = () => {
 };
 var use_focus_manager_default = useFocusManager;
 // src/ui/app/ui.tsx
-var import_react34 = __toESM(require_react(), 1);
+var import_react35 = __toESM(require_react(), 1);
 
 // src/utils/history.ts
 import { promises as fs2 } from "fs";
@@ -67626,7 +67626,7 @@ var historyManager = new HistoryManager;
 import http from "http";
 import https from "https";
 import { URL as URL2 } from "url";
-function sendRequest({ method, url, headers = {}, body }) {
+function sendRequest({ method, url, headers = {}, body, onProgress }) {
   return new Promise((resolve, reject) => {
     const urlObj = new URL2(url);
     const isHttps = urlObj.protocol === "https:";
@@ -67649,12 +67649,26 @@ function sendRequest({ method, url, headers = {}, body }) {
     const req = reqModule.request(options, (res) => {
       timings.ttfb = performance.now();
       let data = "";
+      let bytesReceived = 0;
+      const totalBytes = parseInt(res.headers["content-length"] || "0", 10);
+      const downloadStartTime = performance.now();
       res.on("data", (chunk) => {
         data += chunk;
+        bytesReceived += Buffer.byteLength(chunk);
+        if (onProgress) {
+          const elapsed = (performance.now() - downloadStartTime) / 1000;
+          const speed = elapsed > 0 ? bytesReceived / elapsed : 0;
+          onProgress({
+            bytesReceived,
+            totalBytes,
+            speed,
+            elapsed
+          });
+        }
       });
       res.on("end", () => {
         timings.end = performance.now();
-        const contentLength = parseInt(res.headers["content-length"] || "0", 10) || Buffer.byteLength(data, "utf8");
+        const contentLength = totalBytes || Buffer.byteLength(data, "utf8");
         const metrics = {
           dnsLookup: timings.dnsLookup - timings.start,
           tcpConnection: timings.tcpConnection - timings.dnsLookup,
@@ -69368,6 +69382,140 @@ var JsonSyntaxHighlight = import_react31.default.memo(({ jsonString, theme }) =>
 // src/ui/app/components/responsepanel.tsx
 var import_react32 = __toESM(require_react(), 1);
 var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+var StatusBadge = ({ status, statusText, theme }) => {
+  const [glowFrame, setGlowFrame] = import_react32.useState(0);
+  const statusNum = parseInt(status, 10);
+  import_react32.useEffect(() => {
+    const interval = setInterval(() => {
+      setGlowFrame((prev) => (prev + 1) % 4);
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
+  const getStatusIcon = () => {
+    if (statusNum >= 200 && statusNum < 300)
+      return ["✓", "✔", "☑", "✓"][glowFrame];
+    if (statusNum >= 300 && statusNum < 400)
+      return ["↪", "→", "⇒", "↪"][glowFrame];
+    if (statusNum >= 400 && statusNum < 500)
+      return ["⚠", "⚡", "⚠", "⚡"][glowFrame];
+    if (statusNum >= 500)
+      return ["✗", "✘", "☒", "✗"][glowFrame];
+    return "●";
+  };
+  const getBadgeStyle = () => {
+    if (statusNum >= 200 && statusNum < 300)
+      return { bg: theme.colors.success, icon: getStatusIcon(), label: "SUCCESS" };
+    if (statusNum >= 300 && statusNum < 400)
+      return { bg: theme.colors.accent, icon: getStatusIcon(), label: "REDIRECT" };
+    if (statusNum >= 400 && statusNum < 500)
+      return { bg: theme.colors.error, icon: getStatusIcon(), label: "CLIENT ERR" };
+    if (statusNum >= 500)
+      return { bg: theme.colors.error, icon: getStatusIcon(), label: "SERVER ERR" };
+    return { bg: theme.colors.muted, icon: "●", label: "UNKNOWN" };
+  };
+  const style = getBadgeStyle();
+  const glowChars = ["░", "▒", "▓", "▒"];
+  if (!status || status === "Error") {
+    return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+          color: theme.colors.error,
+          bold: true,
+          children: "✗ "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+          color: theme.colors.error,
+          children: statusText || "Error"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        color: style.bg,
+        dimColor: true,
+        children: glowChars[glowFrame]
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        backgroundColor: style.bg,
+        color: theme.colors.white,
+        bold: true,
+        children: [
+          " ",
+          style.icon,
+          " ",
+          status,
+          " "
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        color: style.bg,
+        dimColor: true,
+        children: glowChars[glowFrame]
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        color: theme.colors.muted,
+        children: " │ "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        color: style.bg,
+        bold: true,
+        children: style.label
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        color: theme.colors.muted,
+        children: " │ "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        color: theme.colors.white,
+        children: statusText
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var TypewriterText = ({ text, theme, speed = 2 }) => {
+  const [displayedLength, setDisplayedLength] = import_react32.useState(0);
+  const [cursorVisible, setCursorVisible] = import_react32.useState(true);
+  const previousTextRef = import_react32.useRef("");
+  import_react32.useEffect(() => {
+    if (text !== previousTextRef.current) {
+      setDisplayedLength(0);
+      previousTextRef.current = text;
+    }
+  }, [text]);
+  import_react32.useEffect(() => {
+    if (displayedLength < text.length) {
+      const charsToAdd = Math.min(speed, text.length - displayedLength);
+      const timeout = setTimeout(() => {
+        setDisplayedLength((prev) => Math.min(prev + charsToAdd, text.length));
+      }, 5);
+      return () => clearTimeout(timeout);
+    }
+  }, [displayedLength, text, speed]);
+  import_react32.useEffect(() => {
+    const interval = setInterval(() => {
+      setCursorVisible((prev) => !prev);
+    }, 400);
+    return () => clearInterval(interval);
+  }, []);
+  const displayedText = text.slice(0, displayedLength);
+  const isComplete = displayedLength >= text.length;
+  const cursor = !isComplete && cursorVisible ? "█" : !isComplete ? " " : "";
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(JsonSyntaxHighlight, {
+        jsonString: displayedText,
+        theme
+      }, undefined, false, undefined, this),
+      !isComplete && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        color: theme.colors.accent,
+        children: cursor
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
 var ResponsePanel = import_react32.default.memo(({ response, theme }) => {
   const [activeTab, setActiveTab] = import_react32.useState("body");
   const tabs = [{ name: "body", label: "Body" }, { name: "headers", label: "Headers" }];
@@ -69377,25 +69525,12 @@ var ResponsePanel = import_react32.default.memo(({ response, theme }) => {
     children: [
       /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
         marginBottom: 1,
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
-            width: 8,
-            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
-              color: theme.colors.primary,
-              children: "STATUS:"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
-            color: getStatusColor(response.status, theme),
-            bold: true,
-            children: [
-              response.status,
-              " ",
-              response.statustext
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
+        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(StatusBadge, {
+          status: response.status,
+          statusText: response.statustext,
+          theme
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Tabs, {
         tabs,
         activeTab,
@@ -69431,9 +69566,10 @@ var ResponsePanel = import_react32.default.memo(({ response, theme }) => {
             children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
               flexDirection: "column",
               flexGrow: 1,
-              children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(JsonSyntaxHighlight, {
-                jsonString: response.body,
-                theme
+              children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(TypewriterText, {
+                text: response.body,
+                theme,
+                speed: 50
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
@@ -69872,42 +70008,100 @@ class ThemeManager {
 var themeManager = new ThemeManager;
 
 // src/ui/app/components/metricspanel.tsx
+var import_react34 = __toESM(require_react(), 1);
 var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
-var MetricBar = ({ label, value, maxValue, color, theme }) => {
-  const barWidth = 40;
+var BAR_CHARS = ["▱", "▰"];
+var GLOW_FRAMES = ["◐", "◓", "◑", "◒"];
+var SPARK_CHARS = ["⚡", "✦", "✧", "⚡", "★", "☆"];
+var MetricBar = ({ label, value, maxValue, color, theme, delay }) => {
+  const barWidth = 30;
   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);
+  const targetFilled = Math.max(0, Math.min(barWidth, maxValue > 0 ? Math.round(safeValue / maxValue * barWidth) : 0));
+  const [animatedFilled, setAnimatedFilled] = import_react34.useState(0);
+  const [glowFrame, setGlowFrame] = import_react34.useState(0);
+  const [sparkle, setSparkle] = import_react34.useState(false);
+  import_react34.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (animatedFilled < targetFilled) {
+        const interval = setInterval(() => {
+          setAnimatedFilled((prev) => {
+            if (prev >= targetFilled) {
+              clearInterval(interval);
+              setSparkle(true);
+              setTimeout(() => setSparkle(false), 300);
+              return targetFilled;
+            }
+            return prev + 1;
+          });
+        }, 20);
+        return () => clearInterval(interval);
+      }
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [targetFilled, delay]);
+  import_react34.useEffect(() => {
+    const interval = setInterval(() => {
+      setGlowFrame((prev) => (prev + 1) % GLOW_FRAMES.length);
+    }, 150);
+    return () => clearInterval(interval);
+  }, []);
+  const filledBar = BAR_CHARS[1].repeat(animatedFilled);
+  const emptyBar = BAR_CHARS[0].repeat(barWidth - animatedFilled);
+  const indicator = animatedFilled > 0 && animatedFilled < targetFilled ? GLOW_FRAMES[glowFrame] : sparkle ? SPARK_CHARS[Math.floor(Math.random() * SPARK_CHARS.length)] : "";
   return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
     marginY: 0,
     children: [
       /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
-        width: 18,
+        width: 16,
         children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
-          color: theme.colors.muted,
+          color,
+          bold: true,
           children: label
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        color: theme.colors.muted,
+        children: "│"
+      }, 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)
+        width: barWidth + 3,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color,
+            children: filledBar
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color,
+            bold: true,
+            children: indicator
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.muted,
+            dimColor: true,
+            children: emptyBar
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+        color: theme.colors.muted,
+        children: "│"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
-        width: 12,
+        width: 10,
         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)
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.white,
+            bold: true,
+            children: safeValue.toFixed(1)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.muted,
+            dimColor: true,
+            children: "ms"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
@@ -69919,75 +70113,290 @@ var formatBytes = (bytes) => {
   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);
+var AnimatedValue = ({ value, suffix, color }) => {
+  const [displayValue, setDisplayValue] = import_react34.useState(0);
+  import_react34.useEffect(() => {
+    const duration = 500;
+    const steps = 20;
+    const increment = value / steps;
+    let current = 0;
+    const interval = setInterval(() => {
+      current += increment;
+      if (current >= value) {
+        setDisplayValue(value);
+        clearInterval(interval);
+      } else {
+        setDisplayValue(current);
+      }
+    }, duration / steps);
+    return () => clearInterval(interval);
+  }, [value]);
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+    color,
+    bold: true,
+    children: [
+      displayValue.toFixed(2),
+      " ",
+      suffix
+    ]
+  }, undefined, true, undefined, this);
+};
+var PulsingDot = ({ color }) => {
+  const [frame, setFrame] = import_react34.useState(0);
+  const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+  import_react34.useEffect(() => {
+    const interval = setInterval(() => {
+      setFrame((prev) => (prev + 1) % frames.length);
+    }, 80);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+    color,
+    children: frames[frame]
+  }, undefined, false, undefined, this);
+};
+var TimelineWaterfall = ({ metrics, theme }) => {
+  const [animationProgress, setAnimationProgress] = import_react34.useState(0);
+  const [pulseFrame, setPulseFrame] = import_react34.useState(0);
+  const totalWidth = 50;
+  const segments = [
+    { label: "DNS", value: Math.max(0, metrics.dnsLookup), color: theme.colors.cool, icon: "⚡" },
+    { label: "TCP", value: Math.max(0, metrics.tcpConnection), color: theme.colors.success, icon: "\uD83D\uDD0C" },
+    ...metrics.tlsHandshake > 0 ? [{ label: "TLS", value: Math.max(0, metrics.tlsHandshake), color: theme.colors.secondary, icon: "\uD83D\uDD10" }] : [],
+    { label: "TTFB", value: Math.max(0, metrics.ttfb), color: theme.colors.accent, icon: "⏱️" },
+    { label: "DL", value: Math.max(0, metrics.contentDownload), color: theme.colors.primary, icon: "\uD83D\uDCE5" }
+  ];
+  const totalTime = segments.reduce((sum, s) => sum + s.value, 0);
+  import_react34.useEffect(() => {
+    setAnimationProgress(0);
+    const interval = setInterval(() => {
+      setAnimationProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          return 100;
+        }
+        return prev + 2;
+      });
+    }, 15);
+    return () => clearInterval(interval);
+  }, [metrics]);
+  import_react34.useEffect(() => {
+    const interval = setInterval(() => {
+      setPulseFrame((prev) => (prev + 1) % 4);
+    }, 200);
+    return () => clearInterval(interval);
+  }, []);
+  const pulseChars = ["▁", "▂", "▃", "▄"];
+  const endCaps = ["◀", "▶"];
   return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
     flexDirection: "column",
-    paddingX: 1,
+    marginY: 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"
+            children: "⏳ Request Timeline"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
             color: theme.colors.muted,
-            children: "────────────────────────────────────────────────────────────"
+            children: [
+              " (",
+              totalTime.toFixed(0),
+              "ms total)"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.muted,
+            children: endCaps[0]
+          }, undefined, false, undefined, this),
+          segments.map((segment, idx) => {
+            const segmentWidth = Math.max(1, Math.round(segment.value / totalTime * totalWidth));
+            const animatedWidth = Math.round(animationProgress / 100 * segmentWidth);
+            const filledPart = "█".repeat(Math.max(0, animatedWidth));
+            const emptyPart = "░".repeat(Math.max(0, segmentWidth - animatedWidth));
+            return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+              children: [
+                /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                  color: segment.color,
+                  children: filledPart
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+                  color: segment.color,
+                  dimColor: true,
+                  children: emptyPart
+                }, undefined, false, undefined, this)
+              ]
+            }, idx, true, undefined, this);
+          }),
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.muted,
+            children: endCaps[1]
+          }, undefined, false, undefined, this),
+          animationProgress < 100 && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.accent,
+            children: [
+              " ",
+              pulseChars[pulseFrame]
+            ]
+          }, undefined, true, undefined, this),
+          animationProgress >= 100 && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+            color: theme.colors.success,
+            children: " ✓"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        marginTop: 1,
+        flexWrap: "wrap",
+        children: segments.map((segment, idx) => /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+          marginRight: 2,
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+              color: segment.color,
+              children: "■"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+              color: theme.colors.muted,
+              children: [
+                " ",
+                segment.label,
+                " "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+              color: theme.colors.white,
+              bold: true,
+              children: segment.value.toFixed(0)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+              color: theme.colors.muted,
+              dimColor: true,
+              children: "ms"
+            }, undefined, false, undefined, this)
+          ]
+        }, idx, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var MetricsPanel = ({ metrics, theme }) => {
+  const [showContent, setShowContent] = import_react34.useState(false);
+  import_react34.useEffect(() => {
+    if (metrics) {
+      setShowContent(false);
+      const timeout = setTimeout(() => setShowContent(true), 100);
+      return () => clearTimeout(timeout);
+    }
+  }, [metrics]);
+  if (!metrics) {
+    return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      flexDirection: "column",
+      padding: 1,
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+          marginBottom: 1,
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(PulsingDot, {
+              color: theme.colors.muted
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+              color: theme.colors.muted,
+              children: " Waiting for request..."
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          color: theme.colors.muted,
+          dimColor: true,
+          children: "Send a request to see metrics"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, 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);
+  if (!showContent) {
+    return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+      flexDirection: "column",
+      padding: 1,
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(PulsingDot, {
+          color: theme.colors.accent
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+          color: theme.colors.accent,
+          children: " Analyzing..."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+    flexDirection: "column",
+    paddingX: 1,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(TimelineWaterfall, {
+        metrics,
+        theme
+      }, undefined, false, 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, {
         flexDirection: "column",
         gap: 0,
         children: [
           /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
-            label: "\uD83D\uDD0D DNS Lookup",
+            label: "⚡ DNS",
             value: metrics.dnsLookup,
             maxValue: maxTime,
             color: theme.colors.cool,
-            theme
+            theme,
+            delay: 0
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
-            label: "\uD83D\uDD0C TCP Connect",
+            label: "\uD83D\uDD0C TCP",
             value: metrics.tcpConnection,
             maxValue: maxTime,
             color: theme.colors.success,
-            theme
+            theme,
+            delay: 100
           }, undefined, false, undefined, this),
           metrics.tlsHandshake > 0 && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
-            label: "\uD83D\uDD10 TLS Handshake",
+            label: "\uD83D\uDD10 TLS",
             value: metrics.tlsHandshake,
             maxValue: maxTime,
             color: theme.colors.secondary,
-            theme
+            theme,
+            delay: 200
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
             label: "⏱️  TTFB",
             value: metrics.ttfb,
             maxValue: maxTime,
             color: theme.colors.accent,
-            theme
+            theme,
+            delay: 300
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MetricBar, {
             label: "\uD83D\uDCE5 Download",
             value: metrics.contentDownload,
             maxValue: maxTime,
             color: theme.colors.primary,
-            theme
+            theme,
+            delay: 400
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
@@ -69996,7 +70405,7 @@ var MetricsPanel = ({ metrics, theme }) => {
         flexDirection: "column",
         children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           color: theme.colors.muted,
-          children: "────────────────────────────────────────────────────────────"
+          children: "┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
@@ -70007,30 +70416,25 @@ var MetricsPanel = ({ metrics, theme }) => {
           /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
             children: [
               /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
-                width: 18,
+                width: 12,
                 children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   color: theme.colors.accent,
-                  bold: true,
-                  children: "\uD83D\uDCCA Total Time"
+                  children: "⚡ Total"
                 }, 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)
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(AnimatedValue, {
+                value: metrics.total,
+                suffix: "ms",
+                color: theme.colors.white
+              }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
             children: [
               /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
-                width: 18,
+                width: 12,
                 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),
@@ -70044,10 +70448,9 @@ var MetricsPanel = ({ metrics, theme }) => {
           metrics.contentLength > 0 && metrics.contentDownload > 0 && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
             children: [
               /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
-                width: 18,
+                width: 12,
                 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),
@@ -70062,31 +70465,135 @@ var MetricsPanel = ({ metrics, theme }) => {
             ]
           }, undefined, true, undefined, this)
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
-        marginTop: 1,
-        flexDirection: "column",
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/ui/app/ui.tsx
+var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
+var formatBytes2 = (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 LiveByteCounter = ({ progress, theme }) => {
+  const [pulseFrame, setPulseFrame] = import_react35.useState(0);
+  const pulseChars = ["⣾", "⣽", "⣻", "⢿", "⡿", "⣟", "⣯", "⣷"];
+  const arrowFrames = ["↓", "⬇", "↓", "⇣"];
+  import_react35.useEffect(() => {
+    const interval = setInterval(() => {
+      setPulseFrame((prev) => (prev + 1) % pulseChars.length);
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
+  if (!progress)
+    return null;
+  const { bytesReceived, totalBytes, speed } = progress;
+  const percentage = totalBytes > 0 ? Math.round(bytesReceived / totalBytes * 100) : 0;
+  const progressBarWidth = 20;
+  const filledWidth = totalBytes > 0 ? Math.round(bytesReceived / totalBytes * progressBarWidth) : 0;
+  const filledBar = "█".repeat(filledWidth);
+  const emptyBar = "░".repeat(progressBarWidth - filledWidth);
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+    flexDirection: "column",
+    paddingX: 1,
+    paddingY: 1,
+    borderStyle: "round",
+    borderColor: theme.accent,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+        marginBottom: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
-            color: theme.colors.muted,
-            children: "────────────────────────────────────────────────────────────"
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+            color: theme.accent,
+            bold: true,
+            children: [
+              pulseChars[pulseFrame],
+              " "
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+            color: theme.primary,
+            bold: true,
+            children: "DOWNLOADING "
           }, 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)
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+            color: theme.accent,
+            children: arrowFrames[pulseFrame % arrowFrames.length]
           }, undefined, false, undefined, this)
         ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+            color: theme.success,
+            children: filledBar
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+            color: theme.muted,
+            dimColor: true,
+            children: emptyBar
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+            color: theme.white,
+            bold: true,
+            children: [
+              " ",
+              percentage,
+              "%"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+        marginTop: 1,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+            marginRight: 2,
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                color: theme.accent,
+                children: "\uD83D\uDCE6 "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                color: theme.white,
+                bold: true,
+                children: formatBytes2(bytesReceived)
+              }, undefined, false, undefined, this),
+              totalBytes > 0 && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                color: theme.muted,
+                children: [
+                  " / ",
+                  formatBytes2(totalBytes)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                color: theme.success,
+                children: "\uD83D\uDE80 "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                color: theme.success,
+                bold: true,
+                children: [
+                  formatBytes2(speed),
+                  "/s"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, 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) => {
@@ -70108,7 +70615,7 @@ 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_runtime13.jsxDEV(Box_default, {
+var RequestPanel = import_react35.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,
@@ -70159,29 +70666,31 @@ var RequestPanel = import_react34.default.memo(({ request, onMethodChange, onUrl
   ]
 }, undefined, true, undefined, this));
 var UI = () => {
-  const [theme, setTheme] = import_react34.useState(themes.catppuccin);
+  const [theme, setTheme] = import_react35.useState(themes.catppuccin);
   const { exit } = use_app_default();
-  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);
+  const [activeTab, setActiveTab] = import_react35.useState("request");
+  const [request, setRequest] = import_react35.useState({ method: "GET", url: "", headers: "", body: "" });
+  const [response, setResponse] = import_react35.useState({ statustext: "", status: "", headers: "", body: "", error: "" });
+  const [metrics, setMetrics] = import_react35.useState(null);
+  const [history, setHistory] = import_react35.useState([]);
+  const [loading, setLoading] = import_react35.useState(false);
+  const [downloadProgress, setDownloadProgress] = import_react35.useState(null);
+  const requestRef = import_react35.useRef(request);
   requestRef.current = request;
-  import_react34.useEffect(() => {
+  import_react35.useEffect(() => {
     const loadHistory = async () => setHistory((await historyManager.loadHistory()).entries);
     loadHistory();
   }, []);
-  import_react34.useEffect(() => {
+  import_react35.useEffect(() => {
     const loadTheme = async () => {
       const loadedTheme = await themeManager.loadCurrTheme();
       setTheme(loadedTheme);
     };
     loadTheme();
   }, []);
-  const handleSend = import_react34.useCallback(async () => {
+  const handleSend = import_react35.useCallback(async () => {
     setLoading(true);
+    setDownloadProgress(null);
     const startTime = Date.now();
     const currentRequest = requestRef.current;
     try {
@@ -70203,7 +70712,8 @@ var UI = () => {
         method: currentRequest.method,
         url: currentRequest.url,
         headers: parsedHeaders,
-        body: reqBody
+        body: reqBody,
+        onProgress: (progress) => setDownloadProgress(progress)
       });
       const responseTime = Date.now() - startTime;
       await historyManager.addEntry({ ...currentRequest }, res.status, responseTime);
@@ -70216,13 +70726,14 @@ var UI = () => {
       setActiveTab("response");
     } finally {
       setLoading(false);
+      setDownloadProgress(null);
     }
   }, []);
   const handleThemeChange = (theme2) => {
     themeManager.ChangeTheme(theme2);
     setTheme(theme2);
   };
-  const handleHistoryClick = import_react34.useCallback((item) => {
+  const handleHistoryClick = import_react35.useCallback((item) => {
     setRequest({
       method: item.method,
       url: item.url,
@@ -70233,9 +70744,9 @@ var UI = () => {
   }, []);
   const tabs = [{ name: "request", label: "Request" }, { name: "response", label: "Response" }];
   const activeIndex = tabs.findIndex((t) => t.name === activeTab);
-  const [showThemeSelector, setShowThemeSelector] = import_react34.useState(false);
-  const [showExportDialog, setShowExportDialog] = import_react34.useState(false);
-  const [inputFocused, setInputFocused] = import_react34.useState(false);
+  const [showThemeSelector, setShowThemeSelector] = import_react35.useState(false);
+  const [showExportDialog, setShowExportDialog] = import_react35.useState(false);
+  const [inputFocused, setInputFocused] = import_react35.useState(false);
   use_input_default((input, key) => {
     if (input === "q" && !showExportDialog)
       exit();
@@ -70254,10 +70765,10 @@ var UI = () => {
     if ((input === "e" || input === "E") && !key.ctrl && !key.meta && !inputFocused && !showThemeSelector)
       setShowExportDialog((prev) => !prev);
   }, { isActive: !showExportDialog });
-  const onMethodChange = import_react34.useCallback((method) => setRequest((r) => ({ ...r, method })), []);
-  const onUrlChange = import_react34.useCallback((url) => setRequest((r) => ({ ...r, url })), []);
-  const onHeadersChange = import_react34.useCallback((headers) => setRequest((r) => ({ ...r, headers })), []);
-  const onBodyChange = import_react34.useCallback((body) => setRequest((r) => ({ ...r, body })), []);
+  const onMethodChange = import_react35.useCallback((method) => setRequest((r) => ({ ...r, method })), []);
+  const onUrlChange = import_react35.useCallback((url) => setRequest((r) => ({ ...r, url })), []);
+  const onHeadersChange = import_react35.useCallback((headers) => setRequest((r) => ({ ...r, headers })), []);
+  const onBodyChange = import_react35.useCallback((body) => setRequest((r) => ({ ...r, body })), []);
   const historyUrls = Array.from(new Set(history.map((h) => h.url))).filter(Boolean);
   return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
     padding: 1,
@@ -70415,6 +70926,14 @@ var UI = () => {
                 onChange: setActiveTab,
                 theme
               }, undefined, false, undefined, this),
+              downloadProgress && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+                marginTop: 1,
+                justifyContent: "center",
+                children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(LiveByteCounter, {
+                  progress: downloadProgress,
+                  theme: theme.colors
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
                 marginTop: 1,
                 flexDirection: "column",
@@ -70663,7 +71182,7 @@ async function mockApis() {
 
 // src/index.ts
 var program2 = new Command;
-program2.version("1.3.9").description(import_chalk9.default.yellow("PostBoy CLI - Test your APIs with ease"));
+program2.version("1.4.0").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.9",
+  "version": "1.4.0",
   "main": "dist/cli.js",
   "bin": {
     "postboy-tui": "dist/cli.js"