From cf21a27995ca9cbce58d3a01b39e75f9fd6f686a Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Wed, 1 Apr 2026 19:20:42 -0400
Subject: [PATCH] fix(ui): add number input for sliders, use textarea for text
 inputs

- Allow typing numbers directly in slider inputs
- Use textarea for text parameters like say_text
---
 .../experiments/designer/PropertiesPanel.tsx  | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/experiments/designer/PropertiesPanel.tsx b/src/components/experiments/designer/PropertiesPanel.tsx
index 119968f..4ef7996 100755
--- a/src/components/experiments/designer/PropertiesPanel.tsx
+++ b/src/components/experiments/designer/PropertiesPanel.tsx
@@ -917,12 +917,13 @@ const ParameterEditor = React.memo(function ParameterEditor({
 
   if (param.type === "text") {
     control = (
-      <Input
+      <textarea
         value={(localValue as string) ?? ""}
         placeholder={param.placeholder}
         onChange={(e) => handleUpdate(e.target.value)}
         onBlur={handleCommit}
-        className="mt-1 h-7 w-full text-xs"
+        rows={3}
+        className="mt-1 w-full rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
       />
     );
   } else if (param.type === "select") {
@@ -982,14 +983,24 @@ const ParameterEditor = React.memo(function ParameterEditor({
               max={max}
               step={step}
               value={[Number(numericVal)]}
-              onValueChange={(vals) => setLocalValue(vals[0])} // Update only local visual
-              onPointerUp={() => handleUpdate(localValue)} // Commit on release
+              onValueChange={(vals) => setLocalValue(vals[0])}
+              onPointerUp={() => handleUpdate(localValue)}
+            />
+            <Input
+              type="number"
+              value={Number(numericVal)}
+              min={min}
+              max={max}
+              step={step}
+              onChange={(e) => {
+                const v = parseFloat(e.target.value);
+                if (!isNaN(v)) {
+                  setLocalValue(Math.max(min, Math.min(max, v)));
+                }
+              }}
+              onBlur={handleCommit}
+              className="h-7 w-16 text-xs tabular-nums"
             />
-            <span className="text-muted-foreground min-w-[2.5rem] text-right text-[10px] tabular-nums">
-              {step < 1
-                ? Number(numericVal).toFixed(2)
-                : Number(numericVal).toString()}
-            </span>
           </div>
           <div className="text-muted-foreground mt-1 flex justify-between text-[10px]">
             <span>{min}</span>