postboy-tui 1.3.5 → 1.3.6

package/dist/cli.js

@@ -67534,7 +67534,7 @@ var useFocusManager = () => {
 };
 var use_focus_manager_default = useFocusManager;
 // src/ui/app/ui.tsx
-var import_react32 = __toESM(require_react(), 1);
+var import_react33 = __toESM(require_react(), 1);
 
 // src/utils/history.ts
 import { promises as fs2 } from "fs";
@@ -68423,7 +68423,7 @@ var Footer = import_react27.default.memo(({ theme }) => {
           color: theme.primary,
           children: "PostBoy"
         }, undefined, false, undefined, this),
-        " — [Q] Quit | [Ctrl+Enter] Send | [Ctrl+L/H] Switch Tabs | [T] Theme Menu | [Tab] Navigate"
+        " — [Q] Quit | [Ctrl+Enter] Send | [Ctrl+L/H] Switch Tabs | [T] Theme | [E] Export | [Tab] Navigate"
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
@@ -68765,6 +68765,332 @@ var ResponsePanel = import_react31.default.memo(({ response, theme }) => {
   }, undefined, true, undefined, this);
 });
 
+// src/ui/app/components/exportdialog.tsx
+var import_react32 = __toESM(require_react(), 1);
+
+// src/utils/export.ts
+import { writeFile, mkdir } from "fs";
+import { spawn } from "child_process";
+import { promisify } from "util";
+import { dirname } from "path";
+var writeFileAsync = promisify(writeFile);
+var mkdirAsync = promisify(mkdir);
+var toCurl = (request) => {
+  const parts = ["curl"];
+  parts.push(`-X ${request.method}`);
+  parts.push(`'${request.url}'`);
+  try {
+    const headers = JSON.parse(request.headers || "{}");
+    Object.entries(headers).forEach(([key, value]) => {
+      parts.push(`-H '${key}: ${value}'`);
+    });
+  } catch {}
+  if (request.body && request.method !== "GET") {
+    parts.push(`-d '${request.body}'`);
+  }
+  return parts.join(" \\\n  ");
+};
+var toFetch = (request) => {
+  const options = {
+    method: request.method
+  };
+  try {
+    const headers = JSON.parse(request.headers || "{}");
+    if (Object.keys(headers).length > 0) {
+      options.headers = headers;
+    }
+  } catch {}
+  if (request.body && request.method !== "GET") {
+    options.body = request.body;
+  }
+  const optionsStr = JSON.stringify(options, null, 2);
+  return `fetch('${request.url}', ${optionsStr})
+  .then(response => response.json())
+  .then(data => console.log(data))
+  .catch(error => console.error('Error:', error));`;
+};
+var copyToClipboard = async (text) => {
+  return new Promise((resolve) => {
+    const platform2 = process.platform;
+    const clipboardCmds = platform2 === "darwin" ? [{ cmd: "pbcopy", args: [] }] : platform2 === "win32" ? [{ cmd: "clip", args: [] }] : [
+      { cmd: "wl-copy", args: [] },
+      { cmd: "xclip", args: ["-selection", "clipboard"] },
+      { cmd: "xsel", args: ["--clipboard", "--input"] }
+    ];
+    const tryClipboard = (index) => {
+      if (index >= clipboardCmds.length) {
+        resolve(false);
+        return;
+      }
+      const item = clipboardCmds[index];
+      try {
+        const proc = spawn(item.cmd, item.args, { stdio: ["pipe", "ignore", "ignore"] });
+        proc.stdin.write(text);
+        proc.stdin.end();
+        proc.on("close", (code) => {
+          if (code === 0) {
+            resolve(true);
+          } else {
+            tryClipboard(index + 1);
+          }
+        });
+        proc.on("error", () => tryClipboard(index + 1));
+      } catch {
+        tryClipboard(index + 1);
+      }
+    };
+    tryClipboard(0);
+  });
+};
+var saveToFile = async (content, filePath) => {
+  try {
+    const dir = dirname(filePath);
+    await mkdirAsync(dir, { recursive: true });
+    await writeFileAsync(filePath, content, "utf-8");
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// src/ui/app/components/exportdialog.tsx
+var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+var EXPORT_DIR = `${process.env.HOME}/.postboy/exports`;
+var ExportDialog = ({ request, onClose, theme }) => {
+  const [format, setFormat] = import_react32.useState("curl");
+  const [action, setAction] = import_react32.useState("copy");
+  const [showSavePrompt, setShowSavePrompt] = import_react32.useState(false);
+  const [filePath, setFilePath] = import_react32.useState("");
+  const [message, setMessage] = import_react32.useState("");
+  const [activeField, setActiveField] = import_react32.useState("format");
+  const getExportContent = () => {
+    return format === "curl" ? toCurl(request) : toFetch(request);
+  };
+  const handleExport = async () => {
+    const content = getExportContent();
+    if (action === "copy") {
+      const success = await copyToClipboard(content);
+      setMessage(success ? "Copied to clipboard!" : "Failed to copy. Try saving to file.");
+      setTimeout(onClose, 1500);
+    } else {
+      setShowSavePrompt(true);
+      setActiveField("path");
+    }
+  };
+  const handleSave = async () => {
+    if (!filePath.trim()) {
+      setMessage("Please enter a file path");
+      return;
+    }
+    const content = getExportContent();
+    const ext = format === "curl" ? ".sh" : ".js";
+    const fileName = filePath.endsWith(ext) ? filePath : filePath + ext;
+    const finalPath = `${EXPORT_DIR}/${fileName}`;
+    const success = await saveToFile(content, finalPath);
+    setMessage(success ? `✓ File saved to:
+${finalPath}` : "Failed to save file");
+    setTimeout(onClose, 3000);
+  };
+  use_input_default((input, key) => {
+    if (key.escape) {
+      if (showSavePrompt) {
+        setShowSavePrompt(false);
+        setActiveField("action");
+      } else {
+        onClose();
+      }
+      return;
+    }
+    if (showSavePrompt) {
+      if (key.return) {
+        handleSave();
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setFilePath((p) => p.slice(0, -1));
+        return;
+      }
+      if (!key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow && !key.tab) {
+        setFilePath((p) => p + input);
+      }
+      return;
+    }
+    if (key.tab) {
+      setActiveField((f) => f === "format" ? "action" : "format");
+      return;
+    }
+    if (key.return) {
+      handleExport();
+      return;
+    }
+    if (activeField === "format") {
+      if (key.leftArrow || key.rightArrow || input === "h" || input === "l") {
+        setFormat((f) => f === "curl" ? "fetch" : "curl");
+      }
+    } else if (activeField === "action") {
+      if (key.leftArrow || key.rightArrow || input === "h" || input === "l") {
+        setAction((a) => a === "copy" ? "save" : "copy");
+      }
+    }
+  });
+  const preview = getExportContent();
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+    flexDirection: "column",
+    borderStyle: "double",
+    borderColor: theme.accent,
+    padding: 1,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+        marginBottom: 1,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            color: theme.accent,
+            bold: true,
+            children: "Export Request"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            color: theme.muted,
+            children: " (Tab: switch, ←→: select, Enter: confirm, Esc: cancel)"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      message ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+        padding: 1,
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: theme.success,
+        children: message.split(`
+`).map((line, i) => /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+          color: theme.success,
+          bold: true,
+          children: line
+        }, i, false, undefined, this))
+      }, undefined, false, undefined, this) : showSavePrompt ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+        flexDirection: "column",
+        gap: 1,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                color: theme.primary,
+                children: "File path: "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                borderStyle: "round",
+                borderColor: theme.accent,
+                paddingX: 1,
+                flexGrow: 1,
+                children: [
+                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                    color: theme.white,
+                    children: filePath
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                    color: theme.accent,
+                    children: "▌"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+            color: theme.muted,
+            children: [
+              "Extension .",
+              format === "curl" ? "sh" : "js",
+              " will be added if not specified"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+        flexDirection: "column",
+        gap: 1,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            gap: 2,
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                color: theme.primary,
+                children: "Format: "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                borderStyle: "round",
+                borderColor: activeField === "format" && format === "curl" ? theme.accent : theme.muted,
+                paddingX: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  color: format === "curl" ? theme.accent : theme.muted,
+                  bold: format === "curl",
+                  children: "cURL"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                borderStyle: "round",
+                borderColor: activeField === "format" && format === "fetch" ? theme.accent : theme.muted,
+                paddingX: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  color: format === "fetch" ? theme.accent : theme.muted,
+                  bold: format === "fetch",
+                  children: "Fetch"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            gap: 2,
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                color: theme.primary,
+                children: "Action: "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                borderStyle: "round",
+                borderColor: activeField === "action" && action === "copy" ? theme.accent : theme.muted,
+                paddingX: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  color: action === "copy" ? theme.accent : theme.muted,
+                  bold: action === "copy",
+                  children: "Copy to Clipboard"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                borderStyle: "round",
+                borderColor: activeField === "action" && action === "save" ? theme.accent : theme.muted,
+                paddingX: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  color: action === "save" ? theme.accent : theme.muted,
+                  bold: action === "save",
+                  children: "Save to File"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+            flexDirection: "column",
+            marginTop: 1,
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                color: theme.primary,
+                children: "Preview:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                borderStyle: "round",
+                borderColor: theme.muted,
+                padding: 1,
+                flexDirection: "column",
+                children: preview.split(`
+`).map((line, i) => /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  color: theme.white,
+                  children: line
+                }, i, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
 // src/utils/themeManager.ts
 import { promises as fs3 } from "fs";
 import path2 from "path";
@@ -68868,21 +69194,21 @@ class ThemeManager {
 var themeManager = new ThemeManager;
 
 // src/ui/app/ui.tsx
-var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime12 = __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_runtime11.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
     borderStyle: "round",
     paddingX: 2,
     borderTopDimColor: true,
     borderColor: isFocused ? theme.accent : theme.primary,
-    children: loading ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Spinner, {
+    children: loading ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Spinner, {
       theme
-    }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+    }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
       bold: true,
       color: isFocused ? theme.accent : theme.white,
       children: "\uD83D\uDE80 Send"
@@ -68890,12 +69216,12 @@ var SendButton = ({ onPress, loading, theme }) => {
   }, undefined, false, undefined, this);
 };
 var HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS", "HEAD"];
-var RequestPanel = import_react32.default.memo(({ request, onMethodChange, onUrlChange, onHeadersChange, onBodyChange, onSend, loading, theme, historyUrls = [], onInputFocus }) => /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+var RequestPanel = import_react33.default.memo(({ request, onMethodChange, onUrlChange, onHeadersChange, onBodyChange, onSend, loading, theme, historyUrls = [], onInputFocus }) => /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
   flexDirection: "column",
   gap: 1,
   flexGrow: 1,
   children: [
-    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(FormField, {
+    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(FormField, {
       label: "Method",
       value: request.method,
       onChange: onMethodChange,
@@ -68904,7 +69230,7 @@ var RequestPanel = import_react32.default.memo(({ request, onMethodChange, onUrl
       suggestions: HTTP_METHODS,
       onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(FormField, {
+    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(FormField, {
       label: "URL",
       value: request.url,
       onChange: onUrlChange,
@@ -68913,7 +69239,7 @@ var RequestPanel = import_react32.default.memo(({ request, onMethodChange, onUrl
       suggestions: historyUrls,
       onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(KeyValueField, {
+    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(KeyValueField, {
       label: "Headers",
       value: request.headers,
       onChange: onHeadersChange,
@@ -68921,7 +69247,7 @@ var RequestPanel = import_react32.default.memo(({ request, onMethodChange, onUrl
       theme,
       onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(KeyValueField, {
+    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(KeyValueField, {
       label: "Body",
       value: request.body,
       onChange: onBodyChange,
@@ -68929,10 +69255,10 @@ var RequestPanel = import_react32.default.memo(({ request, onMethodChange, onUrl
       theme,
       onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+    /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
       marginTop: 1,
       justifyContent: "center",
-      children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(SendButton, {
+      children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(SendButton, {
         onPress: onSend,
         loading,
         theme
@@ -68941,27 +69267,27 @@ var RequestPanel = import_react32.default.memo(({ request, onMethodChange, onUrl
   ]
 }, undefined, true, undefined, this));
 var UI = () => {
-  const [theme, setTheme] = import_react32.useState(themes.catppuccin);
+  const [theme, setTheme] = import_react33.useState(themes.catppuccin);
   const { exit } = use_app_default();
-  const [activeTab, setActiveTab] = import_react32.useState("request");
-  const [request, setRequest] = import_react32.useState({ method: "GET", url: "", headers: "", body: "" });
-  const [response, setResponse] = import_react32.useState({ statustext: "", status: "", headers: "", body: "", error: "" });
-  const [history, setHistory] = import_react32.useState([]);
-  const [loading, setLoading] = import_react32.useState(false);
-  const requestRef = import_react32.useRef(request);
+  const [activeTab, setActiveTab] = import_react33.useState("request");
+  const [request, setRequest] = import_react33.useState({ method: "GET", url: "", headers: "", body: "" });
+  const [response, setResponse] = import_react33.useState({ statustext: "", status: "", headers: "", body: "", error: "" });
+  const [history, setHistory] = import_react33.useState([]);
+  const [loading, setLoading] = import_react33.useState(false);
+  const requestRef = import_react33.useRef(request);
   requestRef.current = request;
-  import_react32.useEffect(() => {
+  import_react33.useEffect(() => {
     const loadHistory = async () => setHistory((await historyManager.loadHistory()).entries);
     loadHistory();
   }, []);
-  import_react32.useEffect(() => {
+  import_react33.useEffect(() => {
     const loadTheme = async () => {
       const loadedTheme = await themeManager.loadCurrTheme();
       setTheme(loadedTheme);
     };
     loadTheme();
   }, []);
-  const handleSend = import_react32.useCallback(async () => {
+  const handleSend = import_react33.useCallback(async () => {
     setLoading(true);
     const startTime = Date.now();
     const currentRequest = requestRef.current;
@@ -69002,7 +69328,7 @@ var UI = () => {
     themeManager.ChangeTheme(theme2);
     setTheme(theme2);
   };
-  const handleHistoryClick = import_react32.useCallback((item) => {
+  const handleHistoryClick = import_react33.useCallback((item) => {
     setRequest({
       method: item.method,
       url: item.url,
@@ -69013,10 +69339,11 @@ var UI = () => {
   }, []);
   const tabs = [{ name: "request", label: "Request" }, { name: "response", label: "Response" }];
   const activeIndex = tabs.findIndex((t) => t.name === activeTab);
-  const [showThemeSelector, setShowThemeSelector] = import_react32.useState(false);
-  const [inputFocused, setInputFocused] = import_react32.useState(false);
+  const [showThemeSelector, setShowThemeSelector] = import_react33.useState(false);
+  const [showExportDialog, setShowExportDialog] = import_react33.useState(false);
+  const [inputFocused, setInputFocused] = import_react33.useState(false);
   use_input_default((input, key) => {
-    if (input === "q")
+    if (input === "q" && !showExportDialog)
       exit();
     if (key.ctrl && key.return)
       handleSend();
@@ -69026,87 +69353,101 @@ var UI = () => {
       setActiveTab(tabs[(activeIndex - 1 + tabs.length) % tabs.length]?.name ?? "request");
     if (key.escape && showThemeSelector)
       setShowThemeSelector(false);
-    if ((input === "t" || input === "T") && !key.ctrl && !key.meta && !inputFocused)
+    if (key.escape && showExportDialog)
+      setShowExportDialog(false);
+    if ((input === "t" || input === "T") && !key.ctrl && !key.meta && !inputFocused && !showExportDialog)
       setShowThemeSelector((prev) => !prev);
-  }, { isActive: true });
-  const onMethodChange = import_react32.useCallback((method) => setRequest((r) => ({ ...r, method })), []);
-  const onUrlChange = import_react32.useCallback((url) => setRequest((r) => ({ ...r, url })), []);
-  const onHeadersChange = import_react32.useCallback((headers) => setRequest((r) => ({ ...r, headers })), []);
-  const onBodyChange = import_react32.useCallback((body) => setRequest((r) => ({ ...r, body })), []);
+    if ((input === "e" || input === "E") && !key.ctrl && !key.meta && !inputFocused && !showThemeSelector)
+      setShowExportDialog((prev) => !prev);
+  }, { isActive: !showExportDialog });
+  const onMethodChange = import_react33.useCallback((method) => setRequest((r) => ({ ...r, method })), []);
+  const onUrlChange = import_react33.useCallback((url) => setRequest((r) => ({ ...r, url })), []);
+  const onHeadersChange = import_react33.useCallback((headers) => setRequest((r) => ({ ...r, headers })), []);
+  const onBodyChange = import_react33.useCallback((body) => setRequest((r) => ({ ...r, body })), []);
   const historyUrls = Array.from(new Set(history.map((h) => h.url))).filter(Boolean);
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
     padding: 1,
     flexDirection: "column",
     flexGrow: 1,
     children: [
-      showThemeSelector && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      showThemeSelector && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         flexDirection: "row",
         justifyContent: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(ThemeSelector, {
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ThemeSelector, {
           theme,
           onThemeChange: (themeName) => {
             handleThemeChange(themes[themeName]);
           }
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      showExportDialog && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+        flexDirection: "row",
+        justifyContent: "center",
+        marginBottom: 1,
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ExportDialog, {
+          request,
+          onClose: () => setShowExportDialog(false),
+          theme: theme.colors
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           color: theme.colors.accent,
           bold: true,
           children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime12.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_runtime11.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
           color: theme.colors.accent,
           bold: true,
           children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
         flexGrow: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
             width: "40%",
             borderColor: theme.colors.muted,
             flexDirection: "column",
             marginRight: 1,
             children: [
-              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 borderTopColor: "grey",
                 borderColor: theme.colors.secondary,
                 paddingX: 1,
                 alignSelf: "center",
-                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: "\uD83D\uDCDC History"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 flexDirection: "column",
                 flexGrow: 1,
                 borderRightColor: "grey",
@@ -69115,22 +69456,22 @@ var UI = () => {
                 borderLeft: false,
                 borderBottom: false,
                 paddingY: 1,
-                children: history.length === 0 ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                children: history.length === 0 ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                   padding: 1,
-                  children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                  children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                     color: theme.colors.muted,
                     children: "No requests yet..."
                   }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(HistoryList, {
+                }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(HistoryList, {
                   history,
                   onItemClick: handleHistoryClick,
                   theme
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
@@ -69138,36 +69479,36 @@ var UI = () => {
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
             width: "60%",
             borderColor: theme.colors.muted,
             padding: 1,
             flexDirection: "column",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Tabs, {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Tabs, {
                 tabs,
                 activeTab,
                 onChange: setActiveTab,
                 theme
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 marginTop: 1,
                 flexDirection: "column",
                 flexGrow: 1,
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                     display: activeTab === "request" ? "flex" : "none",
                     flexGrow: 1,
-                    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(RequestPanel, {
+                    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(RequestPanel, {
                       request,
                       onMethodChange,
                       onUrlChange,
@@ -69180,20 +69521,20 @@ var UI = () => {
                       onInputFocus: setInputFocused
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                     display: activeTab === "response" ? "flex" : "none",
                     flexGrow: 1,
-                    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(ResponsePanel, {
+                    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ResponsePanel, {
                       response,
                       theme
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
@@ -69203,7 +69544,7 @@ var UI = () => {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Footer, {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Footer, {
         theme: theme.colors
       }, undefined, false, undefined, this)
     ]
@@ -69212,14 +69553,14 @@ var UI = () => {
 var ui_default = UI;
 
 // src/ui/app/app.tsx
-var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
 function App2() {
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ui_default, {}, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(ui_default, {}, undefined, false, undefined, this);
 }
 
 // src/commands/ui.tsx
 var import_chalk5 = __toESM(require_source(), 1);
-var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
 var UIWrapper = () => {
   const { exit } = use_app_default();
   use_input_default((input) => {
@@ -69227,18 +69568,18 @@ var UIWrapper = () => {
       exit();
     }
   });
-  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(Text, {
         children: import_chalk5.default.cyanBright(`PostBoy \uD83D\uDC8C`)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(App2, {}, undefined, false, undefined, this)
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(App2, {}, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
 var uiCommand = () => {
-  render_default(/* @__PURE__ */ jsx_dev_runtime13.jsxDEV(UIWrapper, {}, undefined, false, undefined, this));
+  render_default(/* @__PURE__ */ jsx_dev_runtime14.jsxDEV(UIWrapper, {}, undefined, false, undefined, this));
 };
 
 // src/commands/test.ts
@@ -69407,7 +69748,7 @@ async function mockApis() {
 
 // src/index.ts
 var program2 = new Command;
-program2.version("1.3.5").description(import_chalk8.default.yellow("PostBoy CLI - Test your APIs with ease"));
+program2.version("1.3.6").description(import_chalk8.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.5",
+  "version": "1.3.6",
   "main": "dist/cli.js",
   "bin": {
     "postboy-tui": "dist/cli.js"