From f5dba84051f4ae61d7bf8c121cea1ed09b55be98 Mon Sep 17 00:00:00 2001
From: Mark Anthony Cianfrani <mark@cianfrani.me>
Date: Sat, 21 Jun 2025 11:57:42 -0400
Subject: [PATCH] fix: allow typing negative numbers in tool parameter inputs

Number inputs were immediately converting values to Number() on every
keystroke, which prevented users from typing negative numbers since
the intermediate "-" character cannot be converted to a valid number.

Now the input stores the raw string value and only converts to Number
when the value is non-empty, allowing proper negative number entry.
---
 client/src/components/ToolsTab.tsx            |  9 ++++----
 .../components/__tests__/ToolsTab.test.tsx    | 21 +++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 8a7f6578..2b139ed6 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -163,12 +163,13 @@ const ToolsTab = ({
                             name={key}
                             placeholder={prop.description}
                             value={(params[key] as string) ?? ""}
-                            onChange={(e) =>
+                            onChange={(e) => {
+                              const value = e.target.value;
                               setParams({
                                 ...params,
-                                [key]: Number(e.target.value),
-                              })
-                            }
+                                [key]: value === "" ? "" : Number(value),
+                              });
+                            }}
                             className="mt-1"
                           />
                         ) : (
diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index c9f9b315..dc353ba5 100644
--- a/client/src/components/__tests__/ToolsTab.test.tsx
+++ b/client/src/components/__tests__/ToolsTab.test.tsx
@@ -111,6 +111,27 @@ describe("ToolsTab", () => {
     });
   });
 
+  it("should allow typing negative numbers", async () => {
+    renderToolsTab({
+      selectedTool: mockTools[0],
+    });
+
+    const input = screen.getByRole("spinbutton") as HTMLInputElement;
+
+    // Complete the negative number
+    fireEvent.change(input, { target: { value: "-42" } });
+    expect(input.value).toBe("-42");
+
+    const submitButton = screen.getByRole("button", { name: /run tool/i });
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+
+    expect(defaultProps.callTool).toHaveBeenCalledWith(mockTools[0].name, {
+      num: -42,
+    });
+  });
+
   it("should disable button and change text while tool is running", async () => {
     // Create a promise that we can resolve later
     let resolvePromise: ((value: unknown) => void) | undefined;