postboy-tui 1.3.1 → 1.3.3

package/README.md

@@ -67,7 +67,7 @@ bun i -g postboy-tui@latest
 
 ### 1. Intuitive TUI
 
-A clean, keyboard-driven interface designed for productivity. Navigate between panels, compose requests, and view responses without leaving your terminal.
+A clean, keyboard-driven interface designed for productivity. Navigate between panels, compose requests and view responses without leaving your terminal.
 
 <img width="1111" height="649" alt="image" src="https://github.com/user-attachments/assets/de940869-4bfe-4349-a1bd-2259d46f2fde" />
 
@@ -75,7 +75,7 @@ A clean, keyboard-driven interface designed for productivity. Navigate between p
 
 ### 2. Request Composer
 
-Create and edit HTTP requests with support for all major methods. Add headers, body, and query parameters with ease.
+Create and edit HTTP requests with support for all major methods. Add headers, body and query parameters with ease.
 
 <img width="643" height="428" alt="image" src="https://github.com/user-attachments/assets/304c5903-f3c1-4470-85d2-39eebb184c63" />
 
@@ -84,7 +84,7 @@ Create and edit HTTP requests with support for all major methods. Add headers, b
 
 ### 3. History Management
 
-Automatically saves every request you make. Browse, search, and re-run previous requests.
+Automatically saves every request you make. Browse, search and re-run previous requests.
 
 
 <img width="427" height="440" alt="image" src="https://github.com/user-attachments/assets/cf055710-5701-490c-bfc6-a9afbbea223d" />
@@ -94,7 +94,7 @@ Automatically saves every request you make. Browse, search, and re-run previous
 
 ### 4. Response Viewer
 
-View responses in a pretty-printed format. Supports JSON, XML, and raw text. Syntax highlighting for easy reading.
+View responses in a pretty-printed format. Supports JSON, XML and raw text. Syntax highlighting for easy reading.
 
 <img width="646" height="692" alt="image" src="https://github.com/user-attachments/assets/d5c60702-c71e-410c-bfbd-2643f78403f3" />
 

package/dist/cli.js

@@ -4428,7 +4428,7 @@ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix
 
 // node_modules/react/index.js
 var require_react = __commonJS((exports, module) => {
-  var react_development = __toESM(require_react_development(), 1);
+  var react_development = __toESM(require_react_development());
   if (false) {} else {
     module.exports = react_development;
   }
@@ -4873,7 +4873,7 @@ var require_scheduler_development = __commonJS((exports) => {
 
 // node_modules/react-reconciler/node_modules/scheduler/index.js
 var require_scheduler = __commonJS((exports, module) => {
-  var scheduler_development = __toESM(require_scheduler_development(), 1);
+  var scheduler_development = __toESM(require_scheduler_development());
   if (false) {} else {
     module.exports = scheduler_development;
   }
@@ -4881,8 +4881,8 @@ var require_scheduler = __commonJS((exports, module) => {
 
 // node_modules/react-reconciler/cjs/react-reconciler.development.js
 var require_react_reconciler_development = __commonJS((exports, module) => {
-  var React = __toESM(require_react(), 1);
-  var Scheduler = __toESM(require_scheduler(), 1);
+  var React = __toESM(require_react());
+  var Scheduler = __toESM(require_scheduler());
   module.exports = function($$$config) {
     function findHook(fiber, id) {
       for (fiber = fiber.memoizedState;fiber !== null && 0 < id; )
@@ -31695,7 +31695,7 @@ var require_stack_utils = __commonJS((exports, module) => {
 
 // node_modules/react/cjs/react-jsx-dev-runtime.development.js
 var require_react_jsx_dev_runtime_development = __commonJS((exports) => {
-  var React10 = __toESM(require_react(), 1);
+  var React10 = __toESM(require_react());
   (function() {
     function getComponentNameFromType(type) {
       if (type == null)
@@ -31909,7 +31909,7 @@ React keys must be passed directly to JSX without using spread:
 
 // node_modules/react/jsx-dev-runtime.js
 var require_jsx_dev_runtime = __commonJS((exports, module) => {
-  var react_jsx_dev_runtime_development = __toESM(require_react_jsx_dev_runtime_development(), 1);
+  var react_jsx_dev_runtime_development = __toESM(require_react_jsx_dev_runtime_development());
   if (false) {} else {
     module.exports = react_jsx_dev_runtime_development;
   }
@@ -67644,17 +67644,26 @@ function sendRequest({ method, url, headers = {}, body }) {
         data += chunk;
       });
       res.on("end", () => {
-        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
-        });
+        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);
+        }
       });
     });
     req.on("error", reject);
-    if (body)
-      req.write(body);
+    if (body) {
+      try {
+        req.write(body);
+      } catch (err) {
+        reject(err);
+      }
+    }
     req.end();
   });
 }
@@ -67881,7 +67890,7 @@ var FormField = ({ label, value, onChange, placeholder, theme, suggestions = []
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
-            borderStyle: "classic",
+            borderStyle: "round",
             borderColor: isFocused ? theme.primary : theme.muted,
             paddingX: 1,
             flexGrow: 1,
@@ -67898,7 +67907,7 @@ var FormField = ({ label, value, onChange, placeholder, theme, suggestions = []
       showSuggestions && /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
         flexDirection: "column",
         marginLeft: 8,
-        borderStyle: "classic",
+        borderStyle: "round",
         borderColor: theme.muted,
         children: filteredSuggestions.filter((s) => typeof s === "string" && s.trim().length > 0).map((s, idx) => /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
           children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
@@ -67920,7 +67929,7 @@ var TabItem = ({ name, label, isActive, onChange, theme }) => {
       onChange(name);
   });
   return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
-    borderStyle: "classic",
+    borderStyle: "round",
     borderTopColor: "grey",
     borderColor: isActive ? theme.colors.accent : isFocused ? theme.colors.primary : "transparent",
     paddingX: 1,
@@ -68072,7 +68081,7 @@ var import_react26 = __toESM(require_react(), 1);
 var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
 var Footer = import_react26.default.memo(({ theme }) => {
   return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
-    borderStyle: "classic",
+    borderStyle: "round",
     borderTopColor: theme.muted,
     marginTop: 1,
     paddingX: 1,
@@ -68162,7 +68171,7 @@ var ThemeSelector = ({ onThemeChange, theme }) => {
   return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Box_default, {
     flexDirection: "column",
     padding: 1,
-    borderStyle: "classic",
+    borderStyle: "round",
     borderColor: theme.colors.accent,
     width: "50%",
     alignSelf: "center",
@@ -68351,12 +68360,15 @@ var JsonSyntaxHighlight = import_react29.default.memo(({ jsonString, theme }) =>
 // src/ui/app/components/responsepanel.tsx
 var import_react30 = __toESM(require_react(), 1);
 var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
-var ResponsePanel = import_react30.default.memo(({ response, theme }) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(ScrollableBox, {
-  children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+var ResponsePanel = import_react30.default.memo(({ response, theme }) => {
+  const [activeTab, setActiveTab] = import_react30.useState("body");
+  const tabs = [{ name: "headers", label: "Headers" }, { name: "body", label: "Body" }];
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
     flexDirection: "column",
-    gap: 1,
+    flexGrow: 1,
     children: [
       /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+        marginBottom: 1,
         children: [
           /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
             width: 8,
@@ -68376,58 +68388,52 @@ var ResponsePanel = import_react30.default.memo(({ response, theme }) => /* @__P
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Tabs, {
+        tabs,
+        activeTab,
+        onChange: setActiveTab,
+        theme
+      }, undefined, false, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+        marginTop: 1,
+        flexGrow: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
-            width: 8,
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
-              color: theme.colors.primary,
-              children: "HEADERS:"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
-            flexDirection: "column",
-            children: Object.entries(JSON.parse(response.headers || "{}")).map(([key, value]) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
-              children: [
-                /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
-                  color: theme.colors.accent,
-                  children: key
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
-                  color: theme.colors.muted,
-                  children: ": "
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
-                  color: theme.colors.success,
-                  children: String(value)
-                }, undefined, false, undefined, this)
-              ]
-            }, key, true, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
-            width: 8,
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
-              color: theme.colors.primary,
-              children: "PAYLOAD:"
+          activeTab === "headers" && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(ScrollableBox, {
+            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+              flexDirection: "column",
+              children: Object.entries(JSON.parse(response.headers || "{}")).map(([key, value]) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                children: [
+                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                    color: theme.colors.accent,
+                    children: key
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                    color: theme.colors.muted,
+                    children: ": "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                    color: theme.colors.success,
+                    children: String(value)
+                  }, undefined, false, undefined, this)
+                ]
+              }, key, true, undefined, this))
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
-            flexDirection: "column",
-            flexGrow: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(JsonSyntaxHighlight, {
-              jsonString: response.body,
-              theme
+          activeTab === "body" && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(ScrollableBox, {
+            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+              flexDirection: "column",
+              flexGrow: 1,
+              children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(JsonSyntaxHighlight, {
+                jsonString: response.body,
+                theme
+              }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
     ]
-  }, undefined, true, undefined, this)
-}, undefined, false, undefined, this));
+  }, undefined, true, undefined, this);
+});
 
 // src/utils/themeManager.ts
 import { promises as fs3 } from "fs";
@@ -68540,8 +68546,9 @@ var SendButton = ({ onPress, loading, theme }) => {
       onPress();
   });
   return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
-    borderStyle: "classic",
+    borderStyle: "round",
     paddingX: 2,
+    borderTopDimColor: true,
     borderColor: isFocused ? theme.accent : theme.primary,
     children: loading ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Spinner, {
       theme
@@ -68740,13 +68747,20 @@ var UI = () => {
         children: [
           /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             width: "40%",
-            borderStyle: "classic",
             borderColor: theme.colors.muted,
             flexDirection: "column",
             marginRight: 1,
             children: [
               /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
-                borderStyle: "classic",
+                alignSelf: "center",
+                marginBottom: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                  color: theme.colors.accent,
+                  bold: true,
+                  children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
                 borderTopColor: "grey",
                 borderColor: theme.colors.secondary,
                 paddingX: 1,
@@ -68760,6 +68774,12 @@ var UI = () => {
               /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
                 flexDirection: "column",
                 flexGrow: 1,
+                borderRightColor: "grey",
+                borderTop: false,
+                borderStyle: "round",
+                borderLeft: false,
+                borderBottom: false,
+                paddingY: 1,
                 children: history.length === 0 ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
                   padding: 1,
                   children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
@@ -68771,16 +68791,33 @@ var UI = () => {
                   onItemClick: handleHistoryClick,
                   theme
                 }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+                alignSelf: "center",
+                marginBottom: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                  color: theme.colors.accent,
+                  bold: true,
+                  children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
+                }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             width: "60%",
-            borderStyle: "classic",
             borderColor: theme.colors.muted,
             padding: 1,
             flexDirection: "column",
             children: [
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+                alignSelf: "center",
+                marginBottom: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                  color: theme.colors.accent,
+                  bold: true,
+                  children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Tabs, {
                 tabs,
                 activeTab,
@@ -68816,7 +68853,16 @@ var UI = () => {
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this)
                 ]
-              }, undefined, true, undefined, this)
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+                alignSelf: "center",
+                marginBottom: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                  color: theme.colors.accent,
+                  bold: true,
+                  children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this)
         ]
@@ -69025,7 +69071,7 @@ async function mockApis() {
 
 // src/index.ts
 var program2 = new Command;
-program2.version("1.3.1").description(import_chalk8.default.yellow("PostBoy CLI - Test your APIs with ease"));
+program2.version("1.3.3").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.1",
+  "version": "1.3.3",
   "main": "dist/cli.js",
   "bin": {
     "postboy-tui": "dist/cli.js"
@@ -8,22 +8,22 @@
   "files": [
     "dist"
   ],
-	"keywords": [
-		"postboy",
-		"tui",
-		"cli",
-		"terminal",
-		"interface",
-		"developer-tool",
-		"api-testing"
-	],
+  "keywords": [
+    "postboy",
+    "tui",
+    "cli",
+    "terminal",
+    "interface",
+    "developer-tool",
+    "api-testing"
+  ],
   "scripts": {
     "start": "bun run src/index.ts",
     "build": "bun build src/index.ts --outfile=dist/cli.js --target node",
     "dev": "bun run --watch src/index.ts"
   },
-	"repository": "https://github.com/Postboy-tui/app",
-	"homepage": "httsps://github.com/Postboy-tui/app#readme",
+  "repository": "https://github.com/Postboy-tui/app",
+  "homepage": "httsps://github.com/Postboy-tui/app#readme",
   "module": "src/index.ts",
   "type": "module",
   "private": false,