Add visual YOLO bounding boxes for all ball candidates

- draw_yolo_detections_on_frame(): Draws boxes with labels on preview
- Selected candidate: Green thick box with checkmark
- Kicked candidates: Orange box with soccer ball emoji
- Other candidates: Yellow thin box
- Each labeled 'Ball N (conf%)' with center crosshair
- Updated _auto_detect_ball to draw boxes immediately after detection
- Updated _track_ball_yolo to draw boxes after tracking (with kick info)
- Updated radio button handler to redraw preview when selection changes

This provides clear visual feedback of what YOLO is detecting.

app.py

@@ -1114,6 +1114,100 @@ def _apply_selected_ball_to_yolo_state(state: AppState) -> None:
         state.yolo_status = f"⚠️ Ball {idx+1} tracked ({coverage:.0%} coverage) but no kick detected."
 
 
+def draw_yolo_detections_on_frame(
+    frame: Image.Image,
+    candidates: list[dict],
+    selected_idx: int = 0,
+    show_all: bool = True,
+) -> Image.Image:
+    """
+    Draw YOLO bounding boxes for all ball candidates on the frame.
+    
+    - Selected candidate: Green box with thick border
+    - Other candidates: Yellow/orange boxes with thinner border
+    - Each box labeled with "Ball N (conf%)"
+    """
+    from PIL import ImageDraw, ImageFont
+    
+    result = frame.copy()
+    draw = ImageDraw.Draw(result)
+    
+    # Try to get a font, fallback to default
+    try:
+        font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 16)
+        small_font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 12)
+    except:
+        font = ImageFont.load_default()
+        small_font = font
+    
+    for i, candidate in enumerate(candidates):
+        box = candidate.get("box")
+        if not box:
+            continue
+        
+        x_min, y_min, x_max, y_max = box
+        conf = candidate.get("conf", 0)
+        is_selected = (i == selected_idx)
+        has_kick = candidate.get("has_kick", False)
+        
+        # Colors and styles
+        if is_selected:
+            box_color = (0, 255, 0)  # Green for selected
+            text_color = (0, 255, 0)
+            width = 4
+        elif has_kick:
+            box_color = (255, 165, 0)  # Orange for kicked but not selected
+            text_color = (255, 165, 0)
+            width = 3
+        else:
+            box_color = (255, 255, 0)  # Yellow for others
+            text_color = (255, 255, 0)
+            width = 2
+        
+        # Draw bounding box
+        for offset in range(width):
+            draw.rectangle(
+                [x_min - offset, y_min - offset, x_max + offset, y_max + offset],
+                outline=box_color,
+            )
+        
+        # Draw dark outline for visibility
+        draw.rectangle(
+            [x_min - width - 1, y_min - width - 1, x_max + width + 1, y_max + width + 1],
+            outline=(0, 0, 0),
+        )
+        
+        # Label
+        label = f"Ball {i + 1} ({conf:.0%})"
+        if is_selected:
+            label = f"✓ {label}"
+        if has_kick:
+            label += " ⚽"
+        
+        # Draw label background
+        text_bbox = draw.textbbox((x_min, y_min - 22), label, font=font)
+        padding = 3
+        bg_box = [
+            text_bbox[0] - padding,
+            text_bbox[1] - padding,
+            text_bbox[2] + padding,
+            text_bbox[3] + padding,
+        ]
+        draw.rectangle(bg_box, fill=(0, 0, 0, 200))
+        
+        # Draw label text
+        draw.text((x_min, y_min - 22), label, fill=text_color, font=font)
+        
+        # Draw center crosshair
+        cx, cy = candidate.get("center", (0, 0))
+        cx, cy = int(cx), int(cy)
+        cross_size = 8
+        draw.line([(cx - cross_size, cy), (cx + cross_size, cy)], fill=box_color, width=2)
+        draw.line([(cx, cy - cross_size), (cx, cy + cross_size)], fill=box_color, width=2)
+    
+    return result
+
+
 def _format_ball_candidates_for_radio(candidates: list[dict]) -> list[str]:
     """Format ball candidates as radio button choices."""
     choices = []
@@ -4893,6 +4987,15 @@ with gr.Blocks(title="SAM2 Video (Transformers) - Interactive Segmentation", the
 
         state_in.is_ball_detected = True
         num_candidates = len(getattr(state_in, 'ball_candidates', []))
+        
+        # Draw YOLO bounding boxes on preview if we have candidates
+        if num_candidates > 0 and isinstance(preview_img, Image.Image):
+            preview_img = draw_yolo_detections_on_frame(
+                preview_img,
+                state_in.ball_candidates,
+                selected_idx=0,
+            )
+        
         if num_candidates > 1:
             status_text = f"⚠️ {num_candidates} balls found! Best at ({x_center}, {y_center}) (conf={conf:.2f}). Click 'Track Ball' to analyze all."
         else:
@@ -5003,6 +5106,16 @@ with gr.Blocks(title="SAM2 Video (Transformers) - Interactive Segmentation", the
             target_frame = int(np.clip(target_frame, 0, state_in.num_frames - 1))
         state_in.current_frame_idx = target_frame
         preview_img = update_frame_display(state_in, target_frame)
+        
+        # Draw YOLO bounding boxes on preview if we have candidates (after tracking, with kick info)
+        candidates = getattr(state_in, 'ball_candidates', [])
+        if len(candidates) > 0 and isinstance(preview_img, Image.Image):
+            preview_img = draw_yolo_detections_on_frame(
+                preview_img,
+                candidates,
+                selected_idx=state_in.selected_ball_idx,
+            )
+        
         kick_msg = _format_kick_status(state_in)
         status_text = f"{base_msg} | {kick_msg}" if base_msg else kick_msg
         state_in.is_yolo_tracked = True
@@ -5072,18 +5185,28 @@ with gr.Blocks(title="SAM2 Video (Transformers) - Interactive Segmentation", the
         
         state_in.selected_ball_idx = new_idx
         
+        # Update the preview to show the new selection highlighted
+        frame_idx = state_in.current_frame_idx
+        preview_img = update_frame_display(state_in, frame_idx)
+        if isinstance(preview_img, Image.Image):
+            preview_img = draw_yolo_detections_on_frame(
+                preview_img,
+                state_in.ball_candidates,
+                selected_idx=new_idx,
+            )
+        
         # Update the chart to highlight the new selection
         chart_update = gr.update(value=_build_multi_ball_chart(state_in))
         status_update = gr.update(
             value=_format_ball_candidates_markdown(state_in.ball_candidates, new_idx)
         )
         
-        return chart_update, status_update
+        return preview_img, chart_update, status_update
     
     ball_candidate_radio.change(
         _on_ball_candidate_change,
         inputs=[GLOBAL_STATE, ball_candidate_radio],
-        outputs=[multi_ball_chart, multi_ball_status_md],
+        outputs=[preview, multi_ball_chart, multi_ball_status_md],
     )
     
     def _on_confirm_ball_selection(state_in: AppState):