From 48bcea349e8a8e1d11a5c0ea306426f2624ac04f Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Mon, 12 Jan 2026 10:28:48 -0600
Subject: [PATCH] feat: add cue numbering to AD cues in VttEditor

Display 0-based cue index badges in the editable AD cue list to match
the numbering shown on the timeline preview, helping users associate
timeline markers with their corresponding editable cues.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/VttEditor/VttEditor.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/components/VttEditor/VttEditor.tsx b/frontend/src/components/VttEditor/VttEditor.tsx
index dbbb96e..7716fae 100644
--- a/frontend/src/components/VttEditor/VttEditor.tsx
+++ b/frontend/src/components/VttEditor/VttEditor.tsx
@@ -231,6 +231,10 @@ export function VttEditor({ vttContent, onChange, onCueSave, title, readOnly = f
                 {/* Timing Row */}
                 <div className="flex items-center justify-between mb-2">
                   <div className="flex items-center gap-1">
+                    {/* Cue Number */}
+                    <span className="inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-orange-400 rounded-full mr-2">
+                      {index}
+                    </span>
                     {readOnly ? (
                       <span className="text-sm text-gray-500 font-mono">
                         {formatTime(cue.startTime)} → {formatTime(cue.endTime)}