fix: draw and hit-test segments by unique region to prevent overlap highlight bleed

Segment color blocks and click targets were drawn using each segment's full
[start, end] span. Since windows overlap (e.g. seg0=0-8s, seg1=6-14s), this
caused adjacent segment colors to visually bleed into each other, and clicking
in an overlap zone would ambiguously match multiple segments.

Fix: each segment now owns only [start, nextSeg.start) visually and for click
detection, with the final segment owning [start, end]. This means exactly one
colored block is highlighted during regen and clicks always target precisely
the visible segment the user clicked on.

app.py

@@ -1123,8 +1123,14 @@ def _build_regen_pending_html(segments: list, regen_seg_idx: int, slot_id: str,
 
     seg_divs = ""
     for i, seg in enumerate(segments):
-        left_pct  = seg[0] / duration * 100
-        width_pct = (seg[1] - seg[0]) / duration * 100
+        # Draw only the non-overlapping (unique) portion of each segment so that
+        # overlapping windows don't visually bleed into adjacent segments.
+        # Each segment owns the region from its own start up to the next segment's
+        # start (or its own end for the final segment).
+        seg_start = seg[0]
+        seg_end   = segments[i + 1][0] if i + 1 < len(segments) else seg[1]
+        left_pct  = seg_start / duration * 100
+        width_pct = (seg_end - seg_start) / duration * 100
         color     = active_color if i == regen_seg_idx else seg_colors[i % len(seg_colors)]
         extra     = "border:2px solid #ffb300;animation:wf_pulse 0.8s ease-in-out infinite alternate;" if i == regen_seg_idx else ""
         seg_divs += (
@@ -1262,10 +1268,14 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
     ctx.fillRect(0, 0, W, H);
 
     segments.forEach(function(seg, idx) {{
+      // Draw only each segment's unique (non-overlapping) region:
+      // from its start up to the next segment's start, or its own end if last.
       const x1 = (seg[0] / duration) * W;
-      const x2 = (seg[1] / duration) * W;
+      const xEnd = idx + 1 < segments.length
+        ? (segments[idx + 1][0] / duration) * W
+        : (seg[1] / duration) * W;
       ctx.fillStyle = segColors[idx % segColors.length];
-      ctx.fillRect(x1, 0, x2-x1, H);
+      ctx.fillRect(x1, 0, xEnd - x1, H);
       ctx.fillStyle = 'rgba(255,255,255,0.6)';
       ctx.font = '10px sans-serif';
       ctx.fillText('Seg '+(idx+1), x1+3, 12);
@@ -1300,8 +1310,13 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
       const r=cv.getBoundingClientRect();
       const xRel=(e.clientX-r.left)/r.width;
       const tClick=xRel*duration;
+      // Pick the segment whose unique (non-overlapping) region contains the click.
+      // Each segment owns [seg[0], nextSeg[0]) visually; last segment owns [seg[0], seg[1]].
       let hit=-1;
-      segments.forEach(function(seg,idx){{ if(tClick>=seg[0]&&tClick<=seg[1]) hit=idx; }});
+      segments.forEach(function(seg,idx){{
+        const uniqueEnd = idx + 1 < segments.length ? segments[idx+1][0] : seg[1];
+        if (tClick >= seg[0] && tClick < uniqueEnd) hit = idx;
+      }});
       console.log('[wf click] tClick='+tClick.toFixed(2)+' hit='+hit+' audioDuration='+audioDuration+' segments='+JSON.stringify(segments));
       if (hit>=0) showPopup(hit, e.clientX, e.clientY);
       else hidePopup();