fix(editor): real-time drag via draft state + range-locked playback

The previous editor fired an API patch on every mousemove during V1
trim/move and caption drag. The result was UI flicker, race conditions,
and the impression that the editor "didn't work."

Real-time editing now works through a clean two-state model:

- trimDraft: { start_seconds, end_seconds } | null
- captionDraft: { x, y } | null
- Effective values (effStart/effEnd/effCaptionStyle) prefer drafts when
present, fall back to committed clip/captionStyle.

Drag flow:
- mousedown captures initial state and registers window mousemove/mouseup.
- mousemove → setTrimDraft (or setCaptionDraft) — local React state only,
no network. Sub-millisecond updates with no thrashing.
- mouseup → onTrimCommit (or onCaptionCommit) fires exactly one onPatch
(or one onCaptionStyleChange), then clears the draft.

Video playback is now range-locked:
- On clip change: video.load() + seek to clip.start_seconds.
- timeupdate listener: pauses + rewinds to effStart when currentTime
reaches effEnd - 0.05; auto-corrects if currentTime drifts below
effStart.
- togglePlay seeks back to effStart if the playhead was outside the
range, so Play always plays the clip range, not the source video.
- Preview time displays clip-local position (0:00 at clip start),
matching how a creator thinks about a short.

V1 timeline visibility:
- Solid indigo gradient (was washed-out 0.18 alpha, nearly invisible
on dark theme — likely cause of the user's "where is V1?" report).
- Clip text wrapped in a .timeline-clip-label span with text-shadow
for legibility against the gradient.
- V1 lane height bumped 64→72px; clip box-shadow + hover/dragging
states give clear depth.
- Waveform doubled to 80 bars with id-based seeded heights.

Caption overlay reads from effCaptionStyle so dragging shows live
position; commits run through onCaptionStyleChange which persists to
localStorage.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -1761,27 +1761,58 @@ function ClipEditorPage({
   const [isPlaying, setIsPlaying] = useState(false);
   const [selectedCueIndex, setSelectedCueIndex] = useState(0);
 
-  const duration = Math.max(1, clip.end_seconds - clip.start_seconds);
+  // DRAFT state for in-flight drag (no API calls during mousemove)
+  const [trimDraft, setTrimDraft] = useState(null); // null | { start_seconds, end_seconds }
+  const [captionDraft, setCaptionDraft] = useState(null); // null | { x, y }
+
+  // Effective values: drafts override committed clip values until release
+  const effStart = trimDraft ? trimDraft.start_seconds : clip.start_seconds;
+  const effEnd = trimDraft ? trimDraft.end_seconds : clip.end_seconds;
+  const duration = Math.max(0.5, effEnd - effStart);
+  const effCaptionStyle = captionDraft
+    ? { ...captionStyle, ...captionDraft }
+    : captionStyle;
+
   const cues = useMemo(
-    () => getSubtitleCues(clip, duration, captionStyle),
-    [clip, duration, captionStyle]
+    () =>
+      getSubtitleCues(
+        { ...clip, start_seconds: effStart, end_seconds: effEnd },
+        duration,
+        captionStyle
+      ),
+    [clip, effStart, effEnd, duration, captionStyle]
   );
   const metadataModel = clip.metadata?.model || "unknown";
   const sourceKind = job?.source?.kind || "video";
 
   const timelineDuration = Math.max(
-    clip.end_seconds + 5,
+    effEnd + 5,
     ...(clips || []).map((c) => Number(c.end_seconds || 0)),
     ...(job?.transcript || []).map((segment) => Number(segment.end_seconds || 0)),
     1
   );
 
-  // Sync playhead with video element + force first-frame render
+  // Range-locked playback: video plays only within [effStart, effEnd]
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     function onTimeUpdate() {
-      setPlayhead(clip.start_seconds + video.currentTime);
+      const ct = video.currentTime;
+      if (ct >= effEnd - 0.05) {
+        video.pause();
+        try {
+          video.currentTime = effStart;
+        } catch {
+          /* ignore */
+        }
+      } else if (ct < effStart - 0.5) {
+        try {
+          video.currentTime = effStart;
+        } catch {
+          /* ignore */
+        }
+      }
+      setPlayhead(video.currentTime);
     }
     function onPlay() {
       setIsPlaying(true);
@@ -1789,62 +1820,63 @@ function ClipEditorPage({
     function onPause() {
       setIsPlaying(false);
     }
-    function onLoadedMetadata() {
-      // Seek 0.05s in to force first frame to render in <video>
-      try {
-        video.currentTime = 0.05;
-      } catch {
-        /* ignore */
-      }
-    }
     video.addEventListener("timeupdate", onTimeUpdate);
     video.addEventListener("play", onPlay);
     video.addEventListener("pause", onPause);
-    video.addEventListener("loadedmetadata", onLoadedMetadata);
-    video.load();
     return () => {
       video.removeEventListener("timeupdate", onTimeUpdate);
       video.removeEventListener("play", onPlay);
       video.removeEventListener("pause", onPause);
-      video.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
-  }, [clip.id, clip.start_seconds, clip.video_url]);
+  }, [effStart, effEnd]);
 
-  // Reset playhead when clip changes
+  // When the clip itself changes (selected from bin), seek to its start
   useEffect(() => {
-    setPlayhead(clip.start_seconds);
-  }, [clip.id, clip.start_seconds]);
+    const video = videoRef.current;
+    if (!video) return;
+    function onLoaded() {
+      try {
+        video.currentTime = clip.start_seconds;
+      } catch {
+        /* ignore */
+      }
+      setPlayhead(clip.start_seconds);
+    }
+    if (video.readyState >= 1) onLoaded();
+    else video.addEventListener("loadedmetadata", onLoaded, { once: true });
+    video.load();
+    return () => video.removeEventListener("loadedmetadata", onLoaded);
+  }, [clip.id, clip.video_url, clip.start_seconds]);
 
-  // Determine the active cue at the playhead
-  const playheadInClip = clamp(playhead - clip.start_seconds, 0, duration);
-  const activeCueAuto = cues.findIndex(
+  // Active cue at current playhead
+  const playheadInClip = clamp(playhead - effStart, 0, duration);
+  const autoActive = cues.findIndex(
     (cue) => playheadInClip >= cue.start_seconds && playheadInClip < cue.end_seconds
   );
   const activeIndex =
     selectedCueIndex >= 0 && selectedCueIndex < cues.length
       ? selectedCueIndex
-      : Math.max(0, activeCueAuto);
+      : Math.max(0, autoActive);
   const activeCueText = cues[activeIndex]?.text || clip.subtitle_text || clip.title || "";
 
-  function patchCue(index, text) {
-    const next = cues.map((cue, cueIndex) => (cueIndex === index ? { ...cue, text } : cue));
-    onPatch(clip.id, { subtitle_text: next.map((cue) => cue.text).join(" ") });
-  }
-
-  function setStart(value) {
-    const start = clamp(Number(value), 0, Math.max(0, clip.end_seconds - 0.5));
-    onPatch(clip.id, { start_seconds: roundTime(start) });
-  }
-  function setEnd(value) {
-    const end = clamp(Number(value), clip.start_seconds + 0.5, timelineDuration);
-    onPatch(clip.id, { end_seconds: roundTime(end) });
-  }
-  function setRange(start, end) {
+  // ─── Mutations ──────────────────────────────────────────────
+  function commitTrim(start, end) {
+    setTrimDraft(null);
     onPatch(clip.id, {
       start_seconds: roundTime(start),
       end_seconds: roundTime(end),
     });
   }
+  function commitCaption(patch) {
+    setCaptionDraft(null);
+    onCaptionStyleChange(patch);
+  }
+  function patchCue(index, text) {
+    const next = cues.map((cue, cueIndex) =>
+      cueIndex === index ? { ...cue, text } : cue
+    );
+    onPatch(clip.id, { subtitle_text: next.map((cue) => cue.text).join(" ") });
+  }
   function setClipLength(seconds) {
     onPatch(clip.id, {
       end_seconds: roundTime(
@@ -1852,19 +1884,33 @@ function ClipEditorPage({
       ),
     });
   }
-
   function seekTo(seconds) {
     const video = videoRef.current;
-    const target = clamp(seconds - clip.start_seconds, 0, duration);
-    if (video) video.currentTime = target;
-    setPlayhead(clip.start_seconds + target);
+    const target = clamp(seconds, effStart, effEnd);
+    if (video) {
+      try {
+        video.currentTime = target;
+      } catch {
+        /* ignore */
+      }
+    }
+    setPlayhead(target);
   }
-
   function togglePlay() {
     const video = videoRef.current;
     if (!video) return;
-    if (video.paused) video.play();
-    else video.pause();
+    if (video.paused) {
+      if (video.currentTime < effStart || video.currentTime >= effEnd - 0.05) {
+        try {
+          video.currentTime = effStart;
+        } catch {
+          /* ignore */
+        }
+      }
+      video.play();
+    } else {
+      video.pause();
+    }
   }
 
   return (
@@ -1878,7 +1924,7 @@ function ClipEditorPage({
         <div className="editor-topbar-info">
           <h2>{clip.title}</h2>
           <p>
-            {formatTime(clip.start_seconds)} – {formatTime(clip.end_seconds)} &nbsp;·&nbsp;{" "}
+            {formatTime(effStart)} – {formatTime(effEnd)} &nbsp;·&nbsp;{" "}
             {duration.toFixed(1)}s &nbsp;·&nbsp; {Math.round(clip.score)} {t("score")}
           </p>
         </div>
@@ -1916,13 +1962,16 @@ function ClipEditorPage({
         <PreviewStage
           clip={clip}
           videoRef={videoRef}
-          captionStyle={captionStyle}
+          captionStyle={effCaptionStyle}
           activeCueText={activeCueText}
           isPlaying={isPlaying}
           playhead={playhead}
+          effStart={effStart}
+          effEnd={effEnd}
           onTogglePlay={togglePlay}
           onSeekDelta={(delta) => seekTo(playhead + delta)}
-          onCaptionStyleChange={onCaptionStyleChange}
+          onCaptionDraftChange={setCaptionDraft}
+          onCaptionCommit={commitCaption}
           t={t}
         />
 
@@ -1941,12 +1990,14 @@ function ClipEditorPage({
           duration={duration}
           timelineDuration={timelineDuration}
           playhead={playhead}
+          effStart={effStart}
+          effEnd={effEnd}
+          isDragging={trimDraft !== null}
           selectedCueIndex={activeIndex}
           onSelectCue={setSelectedCueIndex}
           onSeek={seekTo}
-          onSetStart={setStart}
-          onSetEnd={setEnd}
-          onSetRange={setRange}
+          onTrimDraftChange={setTrimDraft}
+          onTrimCommit={commitTrim}
           t={t}
         />
 
@@ -2027,9 +2078,12 @@ function PreviewStage({
   activeCueText,
   isPlaying,
   playhead,
+  effStart,
+  effEnd,
   onTogglePlay,
   onSeekDelta,
-  onCaptionStyleChange,
+  onCaptionDraftChange,
+  onCaptionCommit,
   t,
 }) {
   const stageRef = useRef(null);
@@ -2039,12 +2093,16 @@ function PreviewStage({
     const stage = stageRef.current;
     if (!stage) return;
     const rect = stage.getBoundingClientRect();
-    function onMove(ev) {
+    function compute(ev) {
       const x = clamp(((ev.clientX - rect.left) / rect.width) * 100, 4, 96);
       const y = clamp(((ev.clientY - rect.top) / rect.height) * 100, 6, 94);
-      onCaptionStyleChange({ x: Math.round(x), y: Math.round(y) });
+      return { x: Math.round(x), y: Math.round(y) };
     }
-    function onUp() {
+    function onMove(ev) {
+      onCaptionDraftChange(compute(ev));
+    }
+    function onUp(ev) {
+      onCaptionCommit(compute(ev));
       window.removeEventListener("mousemove", onMove);
       window.removeEventListener("mouseup", onUp);
     }
@@ -2052,6 +2110,9 @@ function PreviewStage({
     window.addEventListener("mouseup", onUp);
   }
 
+  const playheadInClip = clamp(playhead - effStart, 0, Math.max(0.5, effEnd - effStart));
+  const clipDuration = Math.max(0.5, effEnd - effStart);
+
   return (
     <section className="nle-panel nle-preview">
       <div className="nle-panel-head">
@@ -2094,7 +2155,6 @@ function PreviewStage({
             className="btn btn-icon btn-primary"
             type="button"
             onClick={onTogglePlay}
-            title={isPlaying ? t("preview") : t("preview")}
           >
             {isPlaying ? <Pause size={14} /> : <Play size={14} />}
           </button>
@@ -2108,7 +2168,7 @@ function PreviewStage({
           </button>
         </div>
         <div className="preview-time">
-          <strong>{formatTime(playhead)}</strong> / {formatTime(clip.end_seconds)}
+          <strong>{formatTime(playheadInClip)}</strong> / {formatTime(clipDuration)}
         </div>
         <div className="preview-toolbar-right">
           <span style={{ fontSize: "0.7rem", color: "var(--text-muted)" }}>
@@ -2168,12 +2228,14 @@ function TimelineEditor({
   duration,
   timelineDuration,
   playhead,
+  effStart,
+  effEnd,
+  isDragging,
   selectedCueIndex,
   onSelectCue,
   onSeek,
-  onSetStart,
-  onSetEnd,
-  onSetRange,
+  onTrimDraftChange,
+  onTrimCommit,
   t,
 }) {
   const laneRef = useRef(null);
@@ -2187,8 +2249,8 @@ function TimelineEditor({
     return result;
   }, [timelineDuration]);
 
-  const clipLeftPct = (clip.start_seconds / timelineDuration) * 100;
-  const clipWidthPct = ((clip.end_seconds - clip.start_seconds) / timelineDuration) * 100;
+  const clipLeftPct = (effStart / timelineDuration) * 100;
+  const clipWidthPct = ((effEnd - effStart) / timelineDuration) * 100;
   const playheadPct = clamp((playhead / timelineDuration) * 100, 0, 100);
 
   function laneRect() {
@@ -2202,16 +2264,29 @@ function TimelineEditor({
       event.stopPropagation();
       const rect = laneRect();
       if (!rect) return;
-      function onMove(ev) {
+      // Snapshot at mousedown — drag uses these as the reference
+      const initialStart = clip.start_seconds;
+      const initialEnd = clip.end_seconds;
+      function compute(ev) {
         const ratio = clamp((ev.clientX - rect.left) / rect.width, 0, 1);
         const seconds = roundTime(ratio * timelineDuration);
         if (edge === "left") {
-          onSetStart(clamp(seconds, 0, clip.end_seconds - 0.5));
-        } else {
-          onSetEnd(clamp(seconds, clip.start_seconds + 0.5, timelineDuration));
+          return {
+            start_seconds: clamp(seconds, 0, initialEnd - 0.5),
+            end_seconds: initialEnd,
+          };
         }
+        return {
+          start_seconds: initialStart,
+          end_seconds: clamp(seconds, initialStart + 0.5, timelineDuration),
+        };
       }
-      function onUp() {
+      function onMove(ev) {
+        onTrimDraftChange(compute(ev));
+      }
+      function onUp(ev) {
+        const final = compute(ev);
+        onTrimCommit(final.start_seconds, final.end_seconds);
         window.removeEventListener("mousemove", onMove);
         window.removeEventListener("mouseup", onUp);
       }
@@ -2221,6 +2296,7 @@ function TimelineEditor({
   }
 
   function startBodyDrag(event) {
+    // Ignore clicks that originated on a handle (handles stop propagation)
     event.preventDefault();
     const rect = laneRect();
     if (!rect) return;
@@ -2228,13 +2304,21 @@ function TimelineEditor({
     const initialStart = clip.start_seconds;
     const initialEnd = clip.end_seconds;
     const length = initialEnd - initialStart;
-    function onMove(ev) {
+    function compute(ev) {
       const dx = ev.clientX - startX;
       const deltaSeconds = (dx / rect.width) * timelineDuration;
       const newStart = clamp(initialStart + deltaSeconds, 0, timelineDuration - length);
-      onSetRange(newStart, newStart + length);
+      return {
+        start_seconds: newStart,
+        end_seconds: newStart + length,
+      };
+    }
+    function onMove(ev) {
+      onTrimDraftChange(compute(ev));
     }
-    function onUp() {
+    function onUp(ev) {
+      const final = compute(ev);
+      onTrimCommit(final.start_seconds, final.end_seconds);
       window.removeEventListener("mousemove", onMove);
       window.removeEventListener("mouseup", onUp);
     }
@@ -2299,7 +2383,7 @@ function TimelineEditor({
             <div className="timeline-track-label">V1</div>
             <div className="timeline-track-lane video" ref={laneRef}>
               <div
-                className="timeline-clip"
+                className={`timeline-clip ${isDragging ? "dragging" : ""}`}
                 style={{
                   left: `${clipLeftPct}%`,
                   width: `${clipWidthPct}%`,
@@ -2311,7 +2395,7 @@ function TimelineEditor({
                   className="timeline-handle left"
                   onMouseDown={startEdgeDrag("left")}
                 />
-                {clip.title}
+                <span className="timeline-clip-label">{clip.title}</span>
                 <span
                   className="timeline-handle right"
                   onMouseDown={startEdgeDrag("right")}
@@ -2328,7 +2412,7 @@ function TimelineEditor({
             <div className="timeline-track-lane">
               {cues.map((cue, index) => {
                 const cueLeft =
-                  ((clip.start_seconds + cue.start_seconds) / timelineDuration) * 100;
+                  ((effStart + cue.start_seconds) / timelineDuration) * 100;
                 const cueWidth =
                   ((cue.end_seconds - cue.start_seconds) / timelineDuration) * 100;
                 return (
@@ -2358,11 +2442,11 @@ function TimelineEditor({
             <div className="timeline-track-label">A1</div>
             <div className="timeline-track-lane audio">
               <div className="timeline-waveform">
-                {Array.from({ length: 60 }).map((_, index) => (
+                {Array.from({ length: 80 }).map((_, index) => (
                   <span
                     key={index}
                     style={{
-                      height: `${30 + ((index * 19 + clip.id.length * 7) % 60)}%`,
+                      height: `${24 + ((index * 17 + clip.id.length * 11) % 70)}%`,
                     }}
                   />
                 ))}

frontend/src/styles.css

@@ -1550,7 +1550,7 @@ textarea:focus,
 }
 
 .timeline-track-lane.video {
-  height: 64px;
+  height: 72px;
 }
 
 .timeline-track-lane.audio {
@@ -1563,30 +1563,42 @@ textarea:focus,
   top: 6px;
   bottom: 6px;
   border-radius: 6px;
-  border: 1px solid var(--primary-dim);
-  background: linear-gradient(180deg, rgba(129, 140, 248, 0.32), rgba(129, 140, 248, 0.18));
-  color: var(--text);
+  border: 1px solid #6366f1;
+  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
+  color: #ffffff;
   display: flex;
   align-items: center;
-  padding: 0 28px;
-  font-size: 0.74rem;
-  font-weight: 600;
+  padding: 0 22px;
+  font-size: 0.78rem;
+  font-weight: 700;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
   cursor: grab;
   user-select: none;
-  transition: filter 140ms ease;
+  transition: filter 140ms ease, box-shadow 140ms ease, transform 100ms ease;
+  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
 }
 
 .timeline-clip:hover {
-  filter: brightness(1.12);
+  filter: brightness(1.1);
+  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
 }
 
 .timeline-clip.dragging {
   cursor: grabbing;
-  filter: brightness(1.2);
-  box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
+  filter: brightness(1.18);
+  box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(79, 70, 229, 0.6);
+  transform: scale(1.005);
+}
+
+.timeline-clip-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+  padding: 0 4px;
 }
 
 .timeline-handle {