postboy-tui 1.3.3 → 1.3.5

package/dist/cli.js

@@ -67534,7 +67534,7 @@ var useFocusManager = () => {
 };
 var use_focus_manager_default = useFocusManager;
 // src/ui/app/ui.tsx
-var import_react31 = __toESM(require_react(), 1);
+var import_react32 = __toESM(require_react(), 1);
 
 // src/utils/history.ts
 import { promises as fs2 } from "fs";
@@ -67831,24 +67831,31 @@ 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 = [] }) => {
-  const { isFocused } = use_focus_default();
+var InputDialog = ({ label, value, onChange, onClose, theme, suggestions = [] }) => {
+  const [localValue, setLocalValue] = import_react24.useState(value);
   const [showSuggestions, setShowSuggestions] = import_react24.useState(false);
   const [filteredSuggestions, setFilteredSuggestions] = import_react24.useState([]);
   const [highlightedIndex, setHighlightedIndex] = import_react24.useState(0);
   import_react24.useEffect(() => {
-    if (isFocused && suggestions.length > 0 && value) {
-      const filtered = suggestions.filter((s) => s.toLowerCase().startsWith(value.toLowerCase()));
+    if (suggestions.length > 0 && localValue) {
+      const filtered = suggestions.filter((s) => s.toLowerCase().startsWith(localValue.toLowerCase()));
       setFilteredSuggestions(filtered);
       setShowSuggestions(filtered.length > 0);
       setHighlightedIndex(0);
     } else {
       setShowSuggestions(false);
     }
-  }, [value, isFocused, suggestions]);
+  }, [localValue, suggestions]);
   use_input_default((input, key) => {
-    if (!isFocused)
+    if (key.escape) {
+      onClose();
+      return;
+    }
+    if (key.return && !showSuggestions) {
+      onChange(localValue);
+      onClose();
       return;
+    }
     if (showSuggestions && (key.upArrow || key.downArrow)) {
       setHighlightedIndex((idx) => {
         if (key.upArrow)
@@ -67861,88 +67868,411 @@ var FormField = ({ label, value, onChange, placeholder, theme, suggestions = []
     }
     if (showSuggestions && (key.return || key.tab)) {
       if (filteredSuggestions.length > 0 && typeof filteredSuggestions[highlightedIndex] === "string") {
-        onChange(filteredSuggestions[highlightedIndex]);
+        setLocalValue(filteredSuggestions[highlightedIndex]);
         setShowSuggestions(false);
       }
       return;
     }
     if (key.backspace || key.delete) {
-      onChange(value.slice(0, -1));
+      setLocalValue((v) => v.slice(0, -1));
       return;
     }
     if (!key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow && !key.return && !key.tab) {
-      onChange(value + input);
+      setLocalValue((v) => v + input);
     }
-  }, { isActive: isFocused });
+  });
   return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
     flexDirection: "column",
+    borderStyle: "double",
+    borderColor: theme.accent,
+    padding: 1,
+    marginY: 1,
     children: [
       /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+        marginBottom: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
-            width: 8,
-            children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
-              color: isFocused ? theme.accent : theme.muted,
-              children: [
-                label,
-                ":"
-              ]
-            }, undefined, true, undefined, this)
+          /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+            color: theme.accent,
+            bold: true,
+            children: [
+              "Edit ",
+              label
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+            color: theme.muted,
+            children: " (Enter to save, Esc to cancel)"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+        borderStyle: "round",
+        borderColor: theme.primary,
+        paddingX: 1,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+            color: theme.white,
+            children: localValue
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
-            borderStyle: "round",
-            borderColor: isFocused ? theme.primary : theme.muted,
-            paddingX: 1,
-            flexGrow: 1,
-            children: value ? /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
-              color: isFocused ? theme.white : theme.primary,
-              children: value
-            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
-              color: theme.muted,
-              children: placeholder
-            }, undefined, false, undefined, this)
+          /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+            color: theme.accent,
+            children: "▌"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
       showSuggestions && /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
         flexDirection: "column",
-        marginLeft: 8,
+        marginTop: 1,
         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, {
-            color: idx === highlightedIndex ? theme.white : theme.primary,
-            children: typeof s === "string" ? s : "[invalid]"
-          }, undefined, false, undefined, this)
+            color: idx === highlightedIndex ? theme.accent : theme.primary,
+            children: [
+              idx === highlightedIndex ? "▸ " : "  ",
+              typeof s === "string" ? s : "[invalid]"
+            ]
+          }, undefined, true, undefined, this)
         }, s || idx, false, undefined, this))
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
+var FormField = ({ label, value, onChange, placeholder, theme, suggestions = [], onFocusChange }) => {
+  const { isFocused } = use_focus_default();
+  const [showDialog, setShowDialog] = import_react24.useState(false);
+  import_react24.useEffect(() => {
+    onFocusChange?.(isFocused || showDialog);
+  }, [isFocused, showDialog, onFocusChange]);
+  use_input_default((_, key) => {
+    if (isFocused && key.return && !showDialog) {
+      setShowDialog(true);
+    }
+  }, { isActive: isFocused && !showDialog });
+  const handleDialogClose = () => {
+    setShowDialog(false);
+  };
+  const handleDialogSave = (newValue) => {
+    onChange(newValue);
+  };
+  if (showDialog) {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(InputDialog, {
+      label,
+      value,
+      onChange: handleDialogSave,
+      onClose: handleDialogClose,
+      theme,
+      suggestions
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+    flexDirection: "column",
+    children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+          width: 8,
+          children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+            color: isFocused ? theme.accent : theme.muted,
+            children: [
+              label,
+              ":"
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Box_default, {
+          borderStyle: "round",
+          borderColor: isFocused ? theme.primary : theme.muted,
+          paddingX: 1,
+          flexGrow: 1,
+          children: [
+            value ? /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+              color: isFocused ? theme.white : theme.primary,
+              children: value
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+              color: theme.muted,
+              children: placeholder
+            }, undefined, false, undefined, this),
+            isFocused && /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(Text, {
+              color: theme.muted,
+              children: " (Press Enter to edit)"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
 
-// src/ui/app/components/tabcomps.tsx
+// src/ui/app/components/keyvaluefield.tsx
+var import_react25 = __toESM(require_react(), 1);
 var jsx_dev_runtime3 = __toESM(require_jsx_dev_runtime(), 1);
+var KeyValueDialog = ({ label, pairs, onSave, onClose, theme }) => {
+  const [localPairs, setLocalPairs] = import_react25.useState(pairs.length > 0 ? pairs : [{ key: "", value: "" }]);
+  const [activeField, setActiveField] = import_react25.useState("key");
+  const [activeRow, setActiveRow] = import_react25.useState(0);
+  use_input_default((input, key) => {
+    if (key.escape) {
+      onClose();
+      return;
+    }
+    if (key.ctrl && key.return) {
+      onSave(localPairs.filter((p) => p.key.trim() !== ""));
+      onClose();
+      return;
+    }
+    if (key.tab) {
+      if (activeField === "key") {
+        setActiveField("value");
+      } else {
+        setActiveField("key");
+        if (activeRow < localPairs.length - 1) {
+          setActiveRow((r) => r + 1);
+        }
+      }
+      return;
+    }
+    if (key.upArrow) {
+      if (activeRow > 0)
+        setActiveRow((r) => r - 1);
+      return;
+    }
+    if (key.downArrow) {
+      if (activeRow < localPairs.length - 1)
+        setActiveRow((r) => r + 1);
+      return;
+    }
+    if (key.return) {
+      setLocalPairs((p) => [...p, { key: "", value: "" }]);
+      setActiveRow(localPairs.length);
+      setActiveField("key");
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setLocalPairs((p) => {
+        const newPairs = [...p];
+        const current = newPairs[activeRow];
+        if (!current)
+          return newPairs;
+        if (activeField === "key") {
+          if (current.key === "" && newPairs.length > 1) {
+            newPairs.splice(activeRow, 1);
+            setActiveRow(Math.max(0, activeRow - 1));
+          } else {
+            newPairs[activeRow] = { key: current.key.slice(0, -1), value: current.value };
+          }
+        } else {
+          newPairs[activeRow] = { key: current.key, value: current.value.slice(0, -1) };
+        }
+        return newPairs;
+      });
+      return;
+    }
+    if (!key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow && !key.return && !key.tab) {
+      setLocalPairs((p) => {
+        const newPairs = [...p];
+        const current = newPairs[activeRow];
+        if (!current)
+          return newPairs;
+        if (activeField === "key") {
+          newPairs[activeRow] = { key: current.key + input, value: current.value };
+        } else {
+          newPairs[activeRow] = { key: current.key, value: current.value + input };
+        }
+        return newPairs;
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+    flexDirection: "column",
+    borderStyle: "double",
+    borderColor: theme.accent,
+    padding: 1,
+    marginY: 1,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+        marginBottom: 1,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+            color: theme.accent,
+            bold: true,
+            children: [
+              "Edit ",
+              label
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+            color: theme.muted,
+            children: " (Tab: switch field, Enter: new row, Ctrl+Enter: save, Esc: cancel)"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+        flexDirection: "column",
+        gap: 1,
+        children: localPairs.map((pair, idx) => /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+          gap: 1,
+          children: [
+            /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+              width: 4,
+              children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+                color: theme.muted,
+                children: [
+                  idx + 1,
+                  "."
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+              borderStyle: "round",
+              borderColor: idx === activeRow && activeField === "key" ? theme.accent : theme.muted,
+              paddingX: 1,
+              width: "40%",
+              children: [
+                /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+                  color: theme.muted,
+                  children: "Key: "
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+                  color: idx === activeRow && activeField === "key" ? theme.white : theme.primary,
+                  children: pair.key
+                }, undefined, false, undefined, this),
+                idx === activeRow && activeField === "key" && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+                  color: theme.accent,
+                  children: "▌"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+              borderStyle: "round",
+              borderColor: idx === activeRow && activeField === "value" ? theme.accent : theme.muted,
+              paddingX: 1,
+              flexGrow: 1,
+              children: [
+                /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+                  color: theme.muted,
+                  children: "Value: "
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+                  color: idx === activeRow && activeField === "value" ? theme.white : theme.primary,
+                  children: pair.value
+                }, undefined, false, undefined, this),
+                idx === activeRow && activeField === "value" && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+                  color: theme.accent,
+                  children: "▌"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, idx, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var KeyValueField = ({ label, value, onChange, placeholder, theme, onFocusChange }) => {
+  const { isFocused } = use_focus_default();
+  const [showDialog, setShowDialog] = import_react25.useState(false);
+  import_react25.useEffect(() => {
+    onFocusChange?.(isFocused || showDialog);
+  }, [isFocused, showDialog, onFocusChange]);
+  const parseJsonToPairs = (json) => {
+    try {
+      const obj = JSON.parse(json || "{}");
+      return Object.entries(obj).map(([key, val]) => ({ key, value: String(val) }));
+    } catch {
+      return [];
+    }
+  };
+  const pairsToJson = (pairs2) => {
+    const obj = {};
+    pairs2.forEach((p) => {
+      if (p.key.trim())
+        obj[p.key] = p.value;
+    });
+    return Object.keys(obj).length > 0 ? JSON.stringify(obj) : "";
+  };
+  use_input_default((_, key) => {
+    if (isFocused && key.return && !showDialog) {
+      setShowDialog(true);
+    }
+  }, { isActive: isFocused && !showDialog });
+  const handleDialogClose = () => {
+    setShowDialog(false);
+  };
+  const handleDialogSave = (pairs2) => {
+    onChange(pairsToJson(pairs2));
+  };
+  const pairs = parseJsonToPairs(value);
+  const displayValue = pairs.length > 0 ? pairs.map((p) => `${p.key}: ${p.value}`).join(", ") : "";
+  if (showDialog) {
+    return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(KeyValueDialog, {
+      label,
+      pairs,
+      onSave: handleDialogSave,
+      onClose: handleDialogClose,
+      theme
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+    flexDirection: "column",
+    children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+          width: 8,
+          children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+            color: isFocused ? theme.accent : theme.muted,
+            children: [
+              label,
+              ":"
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+          borderStyle: "round",
+          borderColor: isFocused ? theme.primary : theme.muted,
+          paddingX: 1,
+          flexGrow: 1,
+          children: [
+            displayValue ? /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+              color: isFocused ? theme.white : theme.primary,
+              children: displayValue
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+              color: theme.muted,
+              children: placeholder
+            }, undefined, false, undefined, this),
+            isFocused && /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+              color: theme.muted,
+              children: " (Press Enter to edit)"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
+
+// src/ui/app/components/tabcomps.tsx
+var jsx_dev_runtime4 = __toESM(require_jsx_dev_runtime(), 1);
 var TabItem = ({ name, label, isActive, onChange, theme }) => {
   const { isFocused } = use_focus_default();
   use_input_default((_, key) => {
     if (isFocused && key.return)
       onChange(name);
   });
-  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
     borderStyle: "round",
     borderTopColor: "grey",
     borderColor: isActive ? theme.colors.accent : isFocused ? theme.colors.primary : "transparent",
     paddingX: 1,
     marginRight: 1,
-    children: /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Text, {
+    children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
       color: isActive ? theme.colors.accent : isFocused ? theme.colors.primary : theme.colors.white,
       bold: isActive || isFocused,
       children: label
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 };
-var Tabs = ({ tabs, activeTab, onChange, theme }) => /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(Box_default, {
-  children: tabs.map((tab2) => /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(TabItem, {
+var Tabs = ({ tabs, activeTab, onChange, theme }) => /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+  children: tabs.map((tab2) => /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(TabItem, {
     ...tab2,
     isActive: activeTab === tab2.name,
     onChange,
@@ -67951,7 +68281,7 @@ var Tabs = ({ tabs, activeTab, onChange, theme }) => /* @__PURE__ */ jsx_dev_run
 }, undefined, false, undefined, this);
 
 // src/ui/app/components/historylist.tsx
-var import_react25 = __toESM(require_react(), 1);
+var import_react26 = __toESM(require_react(), 1);
 
 // src/utils/colors.ts
 var getStatusColor = (status, theme) => {
@@ -67965,7 +68295,7 @@ var getStatusColor = (status, theme) => {
 };
 
 // src/ui/app/components/historylist.tsx
-var jsx_dev_runtime4 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
 var HistoryListItem = ({ item, isSelected, theme }) => {
   const shortenUrl = (url) => {
     try {
@@ -67977,43 +68307,43 @@ var HistoryListItem = ({ item, isSelected, theme }) => {
     }
   };
   const statusColor = item.responseStatus ? getStatusColor(item.responseStatus.toString(), theme) : theme.colors.muted;
-  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
     paddingX: 1,
     borderColor: isSelected ? theme.colors.accent : "transparent",
-    children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+    children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
       flexDirection: "column",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
           children: [
-            /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+            /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
               marginRight: 1,
               width: 5,
-              children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
+              children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Text, {
                 color: statusColor,
                 bold: isSelected,
                 children: String(item.responseStatus || "---").padStart(3, " ")
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+            /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
               width: 7,
-              children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
+              children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Text, {
                 color: isSelected ? theme.colors.accent : theme.colors.primary,
                 bold: isSelected,
                 children: item.method.padEnd(7)
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+            /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
               flexGrow: 1,
-              children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
+              children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Text, {
                 color: isSelected ? theme.colors.white : theme.colors.muted,
                 children: shortenUrl(item.url)
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
           paddingLeft: 13,
-          children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Text, {
+          children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Text, {
             color: theme.colors.muted,
             dimColor: !isSelected,
             children: [
@@ -68030,9 +68360,9 @@ var HistoryList = ({ history, onItemClick, theme }) => {
   const { stdout } = use_stdout_default();
   const { isFocused } = use_focus_default();
   const { focusNext } = use_focus_manager_default();
-  const [selectedIndex, setSelectedIndex] = import_react25.useState(0);
-  const [scrollPosition, setScrollPosition] = import_react25.useState(0);
-  const listRef = import_react25.useRef(null);
+  const [selectedIndex, setSelectedIndex] = import_react26.useState(0);
+  const [scrollPosition, setScrollPosition] = import_react26.useState(0);
+  const listRef = import_react26.useRef(null);
   const maxHeight = stdout.rows - 8;
   use_input_default((_, key) => {
     if (key.upArrow) {
@@ -68054,20 +68384,20 @@ var HistoryList = ({ history, onItemClick, theme }) => {
       setScrollPosition((prev) => Math.min(history.length - maxHeight, prev + maxHeight));
     }
   }, { isActive: isFocused });
-  import_react25.useEffect(() => {
+  import_react26.useEffect(() => {
     if (selectedIndex < scrollPosition) {
       setScrollPosition(selectedIndex);
     } else if (selectedIndex >= scrollPosition + maxHeight) {
       setScrollPosition(selectedIndex - maxHeight + 1);
     }
   }, [selectedIndex, maxHeight, scrollPosition]);
-  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
     flexDirection: "column",
     flexGrow: 1,
-    children: /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Box_default, {
+    children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
       flexDirection: "column",
       ref: listRef,
-      children: history.slice(scrollPosition, scrollPosition + maxHeight).map((item, index) => /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(HistoryListItem, {
+      children: history.slice(scrollPosition, scrollPosition + maxHeight).map((item, index) => /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(HistoryListItem, {
         item,
         isSelected: isFocused && selectedIndex === scrollPosition + index,
         theme
@@ -68077,19 +68407,19 @@ var HistoryList = ({ history, onItemClick, theme }) => {
 };
 
 // src/ui/app/components/footer.tsx
-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, {
+var import_react27 = __toESM(require_react(), 1);
+var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
+var Footer = import_react27.default.memo(({ theme }) => {
+  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Box_default, {
     borderStyle: "round",
     borderTopColor: theme.muted,
     marginTop: 1,
     paddingX: 1,
-    children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Text, {
+    children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
       color: theme.cool,
       children: [
         "╰─ \uD83D\uDE80 ",
-        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Text, {
+        /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
           color: theme.primary,
           children: "PostBoy"
         }, undefined, false, undefined, this),
@@ -68100,8 +68430,8 @@ var Footer = import_react26.default.memo(({ theme }) => {
 });
 
 // src/ui/app/components/themeselector.tsx
-var import_react27 = __toESM(require_react(), 1);
-var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react28 = __toESM(require_react(), 1);
+var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
 var getIndex = (theme) => {
   let index = 0;
   switch (theme) {
@@ -68141,9 +68471,9 @@ var getIndex = (theme) => {
   return index;
 };
 var ThemeSelector = ({ onThemeChange, theme }) => {
-  const [selectedIndex, setSelectedIndex] = import_react27.useState(getIndex(theme.name));
+  const [selectedIndex, setSelectedIndex] = import_react28.useState(getIndex(theme.name));
   const themeNames = Object.keys(themes);
-  import_react27.useEffect(() => {
+  import_react28.useEffect(() => {
     const currentThemeIndex = themeNames.findIndex((name) => {
       const themeColors = themes[name].colors;
       return Object.entries(themeColors).every(([key, value]) => theme[key] === value);
@@ -68168,7 +68498,7 @@ var ThemeSelector = ({ onThemeChange, theme }) => {
       }
     }
   }, { isActive: true });
-  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
     flexDirection: "column",
     padding: 1,
     borderStyle: "round",
@@ -68176,17 +68506,17 @@ var ThemeSelector = ({ onThemeChange, theme }) => {
     width: "50%",
     alignSelf: "center",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
           color: theme.colors.primary,
           bold: true,
           children: "Theme Menu (↑/↓ to change, Esc to close)"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      themeNames.map((name, idx) => /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Box_default, {
+      themeNames.map((name, idx) => /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
         paddingX: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
           color: idx === selectedIndex ? theme.colors.accent : theme.colors.muted,
           children: [
             idx === selectedIndex ? "▶ " : "  ",
@@ -68199,20 +68529,20 @@ var ThemeSelector = ({ onThemeChange, theme }) => {
 };
 
 // src/ui/app/components/scrollablebox.tsx
-var import_react28 = __toESM(require_react(), 1);
-var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react29 = __toESM(require_react(), 1);
+var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
 var ScrollableBox = ({ children }) => {
   const { stdout } = use_stdout_default();
-  const [scrollPosition, setScrollPosition] = import_react28.useState(0);
+  const [scrollPosition, setScrollPosition] = import_react29.useState(0);
   const maxHeight = stdout.rows - 10;
-  const [contentHeight, setContentHeight] = import_react28.useState(0);
+  const [contentHeight, setContentHeight] = import_react29.useState(0);
   use_input_default((_, key) => {
     if (key.pageUp)
       setScrollPosition((prev) => Math.max(0, prev - maxHeight));
     if (key.pageDown)
       setScrollPosition((prev) => Math.min(contentHeight - maxHeight, prev + maxHeight));
   });
-  import_react28.useEffect(() => {
+  import_react29.useEffect(() => {
     const estimateHeight = (node) => {
       if (!node)
         return 0;
@@ -68221,29 +68551,29 @@ var ScrollableBox = ({ children }) => {
 `).length;
       if (Array.isArray(node))
         return node.reduce((acc, child) => acc + estimateHeight(child), 0);
-      if (import_react28.default.isValidElement(node))
+      if (import_react29.default.isValidElement(node))
         return estimateHeight(node.props.children);
       return 1;
     };
     setContentHeight(estimateHeight(children));
   }, [children]);
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
     flexDirection: "column",
     overflow: "hidden",
     flexGrow: 1,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
         flexGrow: 1,
         flexDirection: "column",
-        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+        children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
           marginTop: -scrollPosition,
           flexDirection: "column",
-          children: import_react28.default.Children.map(children, (child) => import_react28.default.isValidElement(child) ? import_react28.default.cloneElement(child) : child)
+          children: import_react29.default.Children.map(children, (child) => import_react29.default.isValidElement(child) ? import_react29.default.cloneElement(child) : child)
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      contentHeight > maxHeight && /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Box_default, {
+      contentHeight > maxHeight && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
         justifyContent: "center",
-        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
           color: "gray",
           children: `Scroll (PgUp/PgDn) ${scrollPosition + 1}-${Math.min(scrollPosition + maxHeight, contentHeight)}/${contentHeight}`
         }, undefined, false, undefined, this)
@@ -68253,13 +68583,13 @@ var ScrollableBox = ({ children }) => {
 };
 
 // src/ui/app/components/syntaxhighlighter.tsx
-var import_react29 = __toESM(require_react(), 1);
-var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
-var JsonSyntaxHighlight = import_react29.default.memo(({ jsonString, theme }) => {
+var import_react30 = __toESM(require_react(), 1);
+var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
+var JsonSyntaxHighlight = import_react30.default.memo(({ jsonString, theme }) => {
   try {
     const json = JSON.parse(jsonString);
     const prettyJson = JSON.stringify(json, null, 2);
-    return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
+    return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
       flexDirection: "column",
       children: prettyJson.split(`
 `).map((line, i) => {
@@ -68272,37 +68602,37 @@ var JsonSyntaxHighlight = import_react29.default.memo(({ jsonString, theme }) =>
           const hasComma2 = (keyMatch[2] || "").endsWith(",");
           let valueNode;
           if (valueString.startsWith('"')) {
-            valueNode = /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            valueNode = /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               color: theme.colors.success,
               children: valueString
             }, undefined, false, undefined, this);
           } else if (valueString === "true" || valueString === "false") {
-            valueNode = /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            valueNode = /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               color: theme.colors.accent,
               children: valueString
             }, undefined, false, undefined, this);
           } else if (valueString === "null") {
-            valueNode = /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            valueNode = /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               color: theme.colors.muted,
               children: valueString
             }, undefined, false, undefined, this);
           } else if (["{", "["].includes(valueString)) {
-            valueNode = /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            valueNode = /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               color: theme.colors.muted,
               children: valueString
             }, undefined, false, undefined, this);
           } else {
-            valueNode = /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            valueNode = /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               color: theme.colors.secondary,
               children: valueString
             }, undefined, false, undefined, this);
           }
-          return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+          return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
                 children: indent
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
                 color: theme.colors.primary,
                 children: [
                   '"',
@@ -68310,11 +68640,11 @@ var JsonSyntaxHighlight = import_react29.default.memo(({ jsonString, theme }) =>
                   '"'
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
                 children: ": "
               }, undefined, false, undefined, this),
               valueNode,
-              hasComma2 && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+              hasComma2 && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
                 children: ","
               }, undefined, false, undefined, this)
             ]
@@ -68333,16 +68663,16 @@ var JsonSyntaxHighlight = import_react29.default.memo(({ jsonString, theme }) =>
           color = "muted";
         else if (!isNaN(Number(value)))
           color = "secondary";
-        return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+        return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
           children: [
-            /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               children: indent
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               color: theme.colors[color],
               children: value
             }, undefined, false, undefined, this),
-            hasComma && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+            hasComma && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
               children: ","
             }, undefined, false, undefined, this)
           ]
@@ -68350,7 +68680,7 @@ var JsonSyntaxHighlight = import_react29.default.memo(({ jsonString, theme }) =>
       })
     }, undefined, false, undefined, this);
   } catch (e) {
-    return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
+    return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
       color: theme.colors.error,
       children: jsonString
     }, undefined, false, undefined, this);
@@ -68358,26 +68688,26 @@ 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 }) => {
-  const [activeTab, setActiveTab] = import_react30.useState("body");
+var import_react31 = __toESM(require_react(), 1);
+var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+var ResponsePanel = import_react31.default.memo(({ response, theme }) => {
+  const [activeTab, setActiveTab] = import_react31.useState("body");
   const tabs = [{ name: "headers", label: "Headers" }, { name: "body", label: "Body" }];
-  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
     flexDirection: "column",
     flexGrow: 1,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
         marginBottom: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
             width: 8,
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
               color: theme.colors.primary,
               children: "STATUS:"
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
             color: getStatusColor(response.status, theme),
             bold: true,
             children: [
@@ -68388,30 +68718,30 @@ var ResponsePanel = import_react30.default.memo(({ response, theme }) => {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Tabs, {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Tabs, {
         tabs,
         activeTab,
         onChange: setActiveTab,
         theme
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
         marginTop: 1,
         flexGrow: 1,
         children: [
-          activeTab === "headers" && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(ScrollableBox, {
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          activeTab === "headers" && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ScrollableBox, {
+            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
               flexDirection: "column",
-              children: Object.entries(JSON.parse(response.headers || "{}")).map(([key, value]) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+              children: Object.entries(JSON.parse(response.headers || "{}")).map(([key, value]) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     color: theme.colors.accent,
                     children: key
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     color: theme.colors.muted,
                     children: ": "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Text, {
+                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
                     color: theme.colors.success,
                     children: String(value)
                   }, undefined, false, undefined, this)
@@ -68419,11 +68749,11 @@ var ResponsePanel = import_react30.default.memo(({ response, theme }) => {
               }, key, true, undefined, this))
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          activeTab === "body" && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(ScrollableBox, {
-            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(Box_default, {
+          activeTab === "body" && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ScrollableBox, {
+            children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
               flexDirection: "column",
               flexGrow: 1,
-              children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(JsonSyntaxHighlight, {
+              children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(JsonSyntaxHighlight, {
                 jsonString: response.body,
                 theme
               }, undefined, false, undefined, this)
@@ -68538,21 +68868,21 @@ class ThemeManager {
 var themeManager = new ThemeManager;
 
 // src/ui/app/ui.tsx
-var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime11 = __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_runtime10.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
     borderStyle: "round",
     paddingX: 2,
     borderTopDimColor: true,
     borderColor: isFocused ? theme.accent : theme.primary,
-    children: loading ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Spinner, {
+    children: loading ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Spinner, {
       theme
-    }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+    }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
       bold: true,
       color: isFocused ? theme.accent : theme.white,
       children: "\uD83D\uDE80 Send"
@@ -68560,45 +68890,49 @@ 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_react32.default.memo(({ request, onMethodChange, onUrlChange, onHeadersChange, onBodyChange, onSend, loading, theme, historyUrls = [], onInputFocus }) => /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
   flexDirection: "column",
   gap: 1,
   flexGrow: 1,
   children: [
-    /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(FormField, {
+    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(FormField, {
       label: "Method",
       value: request.method,
       onChange: onMethodChange,
       placeholder: "GET",
       theme,
-      suggestions: HTTP_METHODS
+      suggestions: HTTP_METHODS,
+      onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(FormField, {
+    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(FormField, {
       label: "URL",
       value: request.url,
       onChange: onUrlChange,
       placeholder: "https://api.example.com",
       theme,
-      suggestions: historyUrls
+      suggestions: historyUrls,
+      onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(FormField, {
+    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(KeyValueField, {
       label: "Headers",
       value: request.headers,
       onChange: onHeadersChange,
-      placeholder: '{ "key": "value" }',
-      theme
+      placeholder: "Press Enter to add headers",
+      theme,
+      onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(FormField, {
+    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(KeyValueField, {
       label: "Body",
       value: request.body,
       onChange: onBodyChange,
-      placeholder: '{ "key": "value" }',
-      theme
+      placeholder: "Press Enter to add body",
+      theme,
+      onFocusChange: onInputFocus
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+    /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
       marginTop: 1,
       justifyContent: "center",
-      children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(SendButton, {
+      children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(SendButton, {
         onPress: onSend,
         loading,
         theme
@@ -68607,27 +68941,27 @@ var RequestPanel = import_react31.default.memo(({ request, onMethodChange, onUrl
   ]
 }, undefined, true, undefined, this));
 var UI = () => {
-  const [theme, setTheme] = import_react31.useState(themes.catppuccin);
+  const [theme, setTheme] = import_react32.useState(themes.catppuccin);
   const { exit } = use_app_default();
-  const [activeTab, setActiveTab] = import_react31.useState("request");
-  const [request, setRequest] = import_react31.useState({ method: "GET", url: "", headers: "", body: "" });
-  const [response, setResponse] = import_react31.useState({ statustext: "", status: "", headers: "", body: "", error: "" });
-  const [history, setHistory] = import_react31.useState([]);
-  const [loading, setLoading] = import_react31.useState(false);
-  const requestRef = import_react31.useRef(request);
+  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);
   requestRef.current = request;
-  import_react31.useEffect(() => {
+  import_react32.useEffect(() => {
     const loadHistory = async () => setHistory((await historyManager.loadHistory()).entries);
     loadHistory();
   }, []);
-  import_react31.useEffect(() => {
+  import_react32.useEffect(() => {
     const loadTheme = async () => {
       const loadedTheme = await themeManager.loadCurrTheme();
       setTheme(loadedTheme);
     };
     loadTheme();
   }, []);
-  const handleSend = import_react31.useCallback(async () => {
+  const handleSend = import_react32.useCallback(async () => {
     setLoading(true);
     const startTime = Date.now();
     const currentRequest = requestRef.current;
@@ -68668,7 +69002,7 @@ var UI = () => {
     themeManager.ChangeTheme(theme2);
     setTheme(theme2);
   };
-  const handleHistoryClick = import_react31.useCallback((item) => {
+  const handleHistoryClick = import_react32.useCallback((item) => {
     setRequest({
       method: item.method,
       url: item.url,
@@ -68679,7 +69013,8 @@ 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 [showThemeSelector, setShowThemeSelector] = import_react32.useState(false);
+  const [inputFocused, setInputFocused] = import_react32.useState(false);
   use_input_default((input, key) => {
     if (input === "q")
       exit();
@@ -68691,87 +69026,87 @@ 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 })), []);
-  const onUrlChange = import_react31.useCallback((url) => setRequest((r) => ({ ...r, url })), []);
-  const onHeadersChange = import_react31.useCallback((headers) => setRequest((r) => ({ ...r, headers })), []);
-  const onBodyChange = import_react31.useCallback((body) => setRequest((r) => ({ ...r, body })), []);
+  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 })), []);
   const historyUrls = Array.from(new Set(history.map((h) => h.url))).filter(Boolean);
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
     padding: 1,
     flexDirection: "column",
     flexGrow: 1,
     children: [
-      showThemeSelector && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+      showThemeSelector && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
         flexDirection: "row",
         justifyContent: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ThemeSelector, {
+        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(ThemeSelector, {
           theme,
           onThemeChange: (themeName) => {
             handleThemeChange(themes[themeName]);
           }
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
           color: theme.colors.accent,
           bold: true,
           children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime11.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_runtime10.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
         alignSelf: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
           color: theme.colors.accent,
           bold: true,
           children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
         flexGrow: 1,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
             width: "40%",
             borderColor: theme.colors.muted,
             flexDirection: "column",
             marginRight: 1,
             children: [
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                 borderTopColor: "grey",
                 borderColor: theme.colors.secondary,
                 paddingX: 1,
                 alignSelf: "center",
-                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: "\uD83D\uDCDC History"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                 flexDirection: "column",
                 flexGrow: 1,
                 borderRightColor: "grey",
@@ -68780,22 +69115,22 @@ var UI = () => {
                 borderLeft: false,
                 borderBottom: false,
                 paddingY: 1,
-                children: history.length === 0 ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+                children: history.length === 0 ? /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                   padding: 1,
-                  children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                  children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
                     color: theme.colors.muted,
                     children: "No requests yet..."
                   }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(HistoryList, {
+                }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(HistoryList, {
                   history,
                   onItemClick: handleHistoryClick,
                   theme
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
@@ -68803,36 +69138,36 @@ var UI = () => {
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
             width: "60%",
             borderColor: theme.colors.muted,
             padding: 1,
             flexDirection: "column",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓`
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Tabs, {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Tabs, {
                 tabs,
                 activeTab,
                 onChange: setActiveTab,
                 theme
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                 marginTop: 1,
                 flexDirection: "column",
                 flexGrow: 1,
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                     display: activeTab === "request" ? "flex" : "none",
                     flexGrow: 1,
-                    children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(RequestPanel, {
+                    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(RequestPanel, {
                       request,
                       onMethodChange,
                       onUrlChange,
@@ -68841,23 +69176,24 @@ 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, {
+                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                     display: activeTab === "response" ? "flex" : "none",
                     flexGrow: 1,
-                    children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ResponsePanel, {
+                    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(ResponsePanel, {
                       response,
                       theme
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Box_default, {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Box_default, {
                 alignSelf: "center",
                 marginBottom: 1,
-                children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Text, {
+                children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Text, {
                   color: theme.colors.accent,
                   bold: true,
                   children: `┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`
@@ -68867,7 +69203,7 @@ var UI = () => {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(Footer, {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(Footer, {
         theme: theme.colors
       }, undefined, false, undefined, this)
     ]
@@ -68876,14 +69212,14 @@ var UI = () => {
 var ui_default = UI;
 
 // src/ui/app/app.tsx
-var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
 function App2() {
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(ui_default, {}, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ui_default, {}, undefined, false, undefined, this);
 }
 
 // src/commands/ui.tsx
 var import_chalk5 = __toESM(require_source(), 1);
-var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
 var UIWrapper = () => {
   const { exit } = use_app_default();
   use_input_default((input) => {
@@ -68891,18 +69227,18 @@ var UIWrapper = () => {
       exit();
     }
   });
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Box_default, {
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(Text, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
         children: import_chalk5.default.cyanBright(`PostBoy \uD83D\uDC8C`)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(App2, {}, undefined, false, undefined, this)
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(App2, {}, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
 var uiCommand = () => {
-  render_default(/* @__PURE__ */ jsx_dev_runtime12.jsxDEV(UIWrapper, {}, undefined, false, undefined, this));
+  render_default(/* @__PURE__ */ jsx_dev_runtime13.jsxDEV(UIWrapper, {}, undefined, false, undefined, this));
 };
 
 // src/commands/test.ts
@@ -69071,7 +69407,7 @@ async function mockApis() {
 
 // src/index.ts
 var program2 = new Command;
-program2.version("1.3.3").description(import_chalk8.default.yellow("PostBoy CLI - Test your APIs with ease"));
+program2.version("1.3.5").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);