postboy-tui 1.3.2 → 1.3.4

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();
   });
 }
@@ -67822,8 +67831,11 @@ var Spinner = ({ theme }) => {
 // src/ui/app/components/Formfield.tsx
 var import_react24 = __toESM(require_react(), 1);
 var jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
-var FormField = ({ label, value, onChange, placeholder, theme, suggestions = [] }) => {
+var FormField = ({ label, value, onChange, placeholder, theme, suggestions = [], onFocusChange }) => {
   const { isFocused } = use_focus_default();
+  import_react24.useEffect(() => {
+    onFocusChange?.(isFocused);
+  }, [isFocused, onFocusChange]);
   const [showSuggestions, setShowSuggestions] = import_react24.useState(false);
   const [filteredSuggestions, setFilteredSuggestions] = import_react24.useState([]);
   const [highlightedIndex, setHighlightedIndex] = import_react24.useState(0);
@@ -68351,12 +68363,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 +68391,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";
@@ -68554,7 +68563,7 @@ var SendButton = ({ onPress, loading, theme }) => {
   }, undefined, false, undefined, this);
 };
 var HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS", "HEAD"];
-var RequestPanel = import_react31.default.memo(({ request, onMethodChange, onUrlChange, onHeadersChange, onBodyChange, onSend, loading, theme, historyUrls = [] }) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+var RequestPanel = import_react31.default.memo(({ request, onMethodChange, onUrlChange, onHeadersChange, onBodyChange, onSend, loading, theme, historyUrls = [], onInputFocus }) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
   flexDirection: "column",
   gap: 1,
   flexGrow: 1,
@@ -68565,7 +68574,8 @@ var RequestPanel = import_react31.default.memo(({ request, onMethodChange, onUrl
       onChange: onMethodChange,
       placeholder: "GET",
       theme,
-      suggestions: HTTP_METHODS
+      suggestions: HTTP_METHODS,
+      onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
     /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(FormField, {
       label: "URL",
@@ -68573,21 +68583,24 @@ var RequestPanel = import_react31.default.memo(({ request, onMethodChange, onUrl
       onChange: onUrlChange,
       placeholder: "https://api.example.com",
       theme,
-      suggestions: historyUrls
+      suggestions: historyUrls,
+      onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
     /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(FormField, {
       label: "Headers",
       value: request.headers,
       onChange: onHeadersChange,
       placeholder: '{ "key": "value" }',
-      theme
+      theme,
+      onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
     /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(FormField, {
       label: "Body",
       value: request.body,
       onChange: onBodyChange,
       placeholder: '{ "key": "value" }',
-      theme
+      theme,
+      onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
     /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
       marginTop: 1,
@@ -68674,6 +68687,7 @@ var UI = () => {
   const tabs = [{ name: "request", label: "Request" }, { name: "response", label: "Response" }];
   const activeIndex = tabs.findIndex((t) => t.name === activeTab);
   const [showThemeSelector, setShowThemeSelector] = import_react31.useState(false);
+  const [inputFocused, setInputFocused] = import_react31.useState(false);
   use_input_default((input, key) => {
     if (input === "q")
       exit();
@@ -68685,7 +68699,7 @@ 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)
+    if ((input === "t" || input === "T") && !key.ctrl && !key.meta && !inputFocused)
       setShowThemeSelector((prev) => !prev);
   }, { isActive: true });
   const onMethodChange = import_react31.useCallback((method) => setRequest((r) => ({ ...r, method })), []);
@@ -68835,7 +68849,8 @@ var UI = () => {
                       onSend: handleSend,
                       loading,
                       theme: theme.colors,
-                      historyUrls
+                      historyUrls,
+                      onInputFocus: setInputFocused
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
@@ -69065,7 +69080,7 @@ async function mockApis() {
 
 // src/index.ts
 var program2 = new Command;
-program2.version("1.3.2").description(import_chalk8.default.yellow("PostBoy CLI - Test your APIs with ease"));
+program2.version("1.3.4").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.2",
+  "version": "1.3.4",
   "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,