From 106ca49f6f06abfcc962d1e228169f84b6db9aba Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Mon, 12 Jan 2026 14:50:44 -0600
Subject: [PATCH] fix: allow free-form editing of pause point timestamp input

The input was reformatting with .toFixed(3) on every keystroke, causing
backspace to appear to insert random digits. Changed to string-based
input state with conversion/validation only on blur or save.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../TimelinePreview/PausePointEditor.tsx      | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/TimelinePreview/PausePointEditor.tsx b/frontend/src/components/TimelinePreview/PausePointEditor.tsx
index a0cd5a2..157296d 100644
--- a/frontend/src/components/TimelinePreview/PausePointEditor.tsx
+++ b/frontend/src/components/TimelinePreview/PausePointEditor.tsx
@@ -20,11 +20,14 @@ export function PausePointEditor({
 }: PausePointEditorProps) {
   const effectiveMs = pausePoint.adjusted_ms ?? pausePoint.original_ms;
   const [value, setValue] = useState(effectiveMs);
+  const [inputValue, setInputValue] = useState((effectiveMs / 1000).toFixed(3));
   const [error, setError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    setValue(pausePoint.adjusted_ms ?? pausePoint.original_ms);
+    const ms = pausePoint.adjusted_ms ?? pausePoint.original_ms;
+    setValue(ms);
+    setInputValue((ms / 1000).toFixed(3));
   }, [pausePoint]);
 
   useEffect(() => {
@@ -43,18 +46,19 @@ export function PausePointEditor({
     return null;
   };
 
-  const handleValueChange = (newValue: number) => {
-    setValue(newValue);
-    setError(validateValue(newValue));
-  };
-
   const handleSave = () => {
-    const validationError = validateValue(value);
+    const parsed = parseFloat(inputValue);
+    if (isNaN(parsed)) {
+      setError('Invalid number');
+      return;
+    }
+    const ms = Math.round(parsed * 1000);
+    const validationError = validateValue(ms);
     if (validationError) {
       setError(validationError);
       return;
     }
-    onSave(value);
+    onSave(ms);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -65,6 +69,18 @@ export function PausePointEditor({
     }
   };
 
+  const handleBlur = () => {
+    const parsed = parseFloat(inputValue);
+    if (isNaN(parsed)) {
+      // Revert to previous valid value
+      setInputValue((value / 1000).toFixed(3));
+      return;
+    }
+    const ms = Math.round(parsed * 1000);
+    setValue(ms);
+    setError(validateValue(ms));
+  };
+
   const formatMs = (ms: number) => {
     const totalSeconds = Math.floor(ms / 1000);
     const minutes = Math.floor(totalSeconds / 60);
@@ -101,11 +117,12 @@ export function PausePointEditor({
           <div className="flex items-center gap-2">
             <input
               ref={inputRef}
-              type="number"
-              value={(value / 1000).toFixed(3)}
-              onChange={(e) => handleValueChange(Math.round(Number(e.target.value) * 1000))}
+              type="text"
+              inputMode="decimal"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onBlur={handleBlur}
               onKeyDown={handleKeyDown}
-              step="0.001"
               className={`flex-1 px-2 py-1 text-sm border rounded ${
                 error ? 'border-red-500' : 'border-gray-300'
               } focus:outline-none focus:ring-2 focus:ring-blue-500`}