feat(frontend): redesign editor workspace controls

frontend/src/App.jsx

@@ -50,6 +50,53 @@ const NICHES = [
 const CLIP_STYLES = ["informative", "funny", "dramatic", "educational", "commentary"];
 const LANGUAGE_OPTIONS = ["Thai", "English", "Japanese", "Chinese", "Korean", "Auto"];
 const PLATFORM_OPTIONS = ["tiktok", "youtube_shorts", "instagram_reels"];
+const FONT_OPTIONS = ["Inter", "Noto Sans Thai", "Poppins", "Montserrat", "Arial", "Impact"];
+const CUE_DENSITIES = ["word", "short", "medium", "long"];
+const CAPTION_ANIMATIONS = ["none", "highlight", "pop", "bounce"];
+
+const defaultCaptionStyle = {
+  fontFamily: "Inter",
+  fontSize: 38,
+  fillColor: "#ffffff",
+  strokeColor: "#080b12",
+  strokeWidth: 4,
+  position: 18,
+  cueDensity: "short",
+  animation: "highlight",
+};
+
+const captionPresets = {
+  clean: {
+    fontFamily: "Inter",
+    fontSize: 34,
+    fillColor: "#ffffff",
+    strokeColor: "#111827",
+    strokeWidth: 3,
+    position: 18,
+    cueDensity: "medium",
+    animation: "none",
+  },
+  bold: {
+    fontFamily: "Impact",
+    fontSize: 46,
+    fillColor: "#fef08a",
+    strokeColor: "#020617",
+    strokeWidth: 5,
+    position: 20,
+    cueDensity: "short",
+    animation: "pop",
+  },
+  karaoke: {
+    fontFamily: "Poppins",
+    fontSize: 40,
+    fillColor: "#ffffff",
+    strokeColor: "#020617",
+    strokeWidth: 4,
+    position: 22,
+    cueDensity: "word",
+    animation: "highlight",
+  },
+};
 
 const defaultProfile = {
   niche: "education",
@@ -132,6 +179,36 @@ const en = {
   clipRange: "Clip range",
   subtitleCues: "Subtitle cues",
   subtitleCueHelp: "Short cues read better on TikTok, Reels, and Shorts.",
+  timelineTracks: "Timeline tracks",
+  videoTrack: "Video",
+  subtitleTrack: "Subtitles",
+  audioTrack: "Audio",
+  toolSelect: "Select",
+  toolTrim: "Trim",
+  toolCaptions: "Captions",
+  toolStyle: "Style",
+  toolExport: "Export",
+  captionStyle: "Caption style",
+  captionPreset: "Preset",
+  presetClean: "Clean",
+  presetBold: "Bold",
+  presetKaraoke: "Karaoke",
+  font: "Font",
+  fontSize: "Size",
+  fillColor: "Fill",
+  strokeColor: "Outline",
+  strokeWidth: "Outline width",
+  captionPosition: "Caption height",
+  captionLength: "Caption length",
+  animation: "Animation",
+  density_word: "Word by word",
+  density_short: "Short phrases",
+  density_medium: "Medium phrases",
+  density_long: "Long lines",
+  animation_none: "None",
+  animation_highlight: "Color highlight",
+  animation_pop: "Pop",
+  animation_bounce: "Bounce",
   editorTools: "Editing tools",
   rangeStart: "Range start",
   rangeEnd: "Range end",
@@ -262,6 +339,36 @@ const translations = {
     clipRange: "ช่วงคลิป",
     subtitleCues: "จังหวะซับ",
     subtitleCueHelp: "ซับสั้น ๆ อ่านง่ายกว่าสำหรับ TikTok, Reels และ Shorts",
+    timelineTracks: "แทร็กตัดต่อ",
+    videoTrack: "วิดีโอ",
+    subtitleTrack: "ซับ",
+    audioTrack: "เสียง",
+    toolSelect: "เลือก",
+    toolTrim: "ตัด",
+    toolCaptions: "ซับ",
+    toolStyle: "สไตล์",
+    toolExport: "ส่งออก",
+    captionStyle: "สไตล์ซับ",
+    captionPreset: "พรีเซ็ต",
+    presetClean: "เรียบ",
+    presetBold: "เด่น",
+    presetKaraoke: "คาราโอเกะ",
+    font: "ฟอนต์",
+    fontSize: "ขนาด",
+    fillColor: "สีตัวอักษร",
+    strokeColor: "สีขอบ",
+    strokeWidth: "ความหนาขอบ",
+    captionPosition: "ตำแหน่งซับ",
+    captionLength: "ความยาวข้อความ",
+    animation: "อนิเมชัน",
+    density_word: "ทีละคำ",
+    density_short: "วลีสั้น",
+    density_medium: "วลีกลาง",
+    density_long: "บรรทัดยาว",
+    animation_none: "ไม่มี",
+    animation_highlight: "ไฮไลต์สี",
+    animation_pop: "เด้งเข้า",
+    animation_bounce: "เด้งตามจังหวะ",
     editorTools: "เครื่องมือตัดต่อ",
     rangeStart: "ตำแหน่งเริ่ม",
     rangeEnd: "ตำแหน่งจบ",
@@ -384,6 +491,36 @@ const translations = {
     subtitles: "字幕",
     subtitleCues: "字幕キュー",
     subtitleCueHelp: "短い字幕キューのほうがTikTok、Reels、Shortsで読みやすくなります。",
+    timelineTracks: "タイムライントラック",
+    videoTrack: "動画",
+    subtitleTrack: "字幕",
+    audioTrack: "音声",
+    toolSelect: "選択",
+    toolTrim: "トリム",
+    toolCaptions: "字幕",
+    toolStyle: "スタイル",
+    toolExport: "書き出し",
+    captionStyle: "字幕スタイル",
+    captionPreset: "プリセット",
+    presetClean: "クリーン",
+    presetBold: "太字",
+    presetKaraoke: "カラオケ",
+    font: "フォント",
+    fontSize: "サイズ",
+    fillColor: "塗り",
+    strokeColor: "縁取り",
+    strokeWidth: "縁取り幅",
+    captionPosition: "字幕位置",
+    captionLength: "字幕の長さ",
+    animation: "アニメーション",
+    density_word: "単語ごと",
+    density_short: "短いフレーズ",
+    density_medium: "中くらい",
+    density_long: "長い行",
+    animation_none: "なし",
+    animation_highlight: "色ハイライト",
+    animation_pop: "ポップ",
+    animation_bounce: "バウンス",
     editorTools: "編集ツール",
     rangeStart: "開始位置",
     rangeEnd: "終了位置",
@@ -511,6 +648,36 @@ const translations = {
     subtitles: "字幕",
     subtitleCues: "字幕片段",
     subtitleCueHelp: "短字幕片段更适合 TikTok、Reels 和 Shorts。",
+    timelineTracks: "时间线轨道",
+    videoTrack: "视频",
+    subtitleTrack: "字幕",
+    audioTrack: "音频",
+    toolSelect: "选择",
+    toolTrim: "裁剪",
+    toolCaptions: "字幕",
+    toolStyle: "样式",
+    toolExport: "导出",
+    captionStyle: "字幕样式",
+    captionPreset: "预设",
+    presetClean: "简洁",
+    presetBold: "醒目",
+    presetKaraoke: "卡拉 OK",
+    font: "字体",
+    fontSize: "大小",
+    fillColor: "填充",
+    strokeColor: "描边",
+    strokeWidth: "描边宽度",
+    captionPosition: "字幕高度",
+    captionLength: "字幕长度",
+    animation: "动画",
+    density_word: "逐词",
+    density_short: "短词组",
+    density_medium: "中等词组",
+    density_long: "长句",
+    animation_none: "无",
+    animation_highlight: "颜色高亮",
+    animation_pop: "弹出",
+    animation_bounce: "弹跳",
     editorTools: "编辑工具",
     rangeStart: "开始位置",
     rangeEnd: "结束位置",
@@ -639,6 +806,36 @@ const translations = {
     subtitles: "자막",
     subtitleCues: "자막 큐",
     subtitleCueHelp: "짧은 자막 큐가 TikTok, Reels, Shorts에서 더 읽기 쉽습니다.",
+    timelineTracks: "타임라인 트랙",
+    videoTrack: "비디오",
+    subtitleTrack: "자막",
+    audioTrack: "오디오",
+    toolSelect: "선택",
+    toolTrim: "자르기",
+    toolCaptions: "자막",
+    toolStyle: "스타일",
+    toolExport: "내보내기",
+    captionStyle: "자막 스타일",
+    captionPreset: "프리셋",
+    presetClean: "깔끔",
+    presetBold: "강조",
+    presetKaraoke: "노래방",
+    font: "글꼴",
+    fontSize: "크기",
+    fillColor: "채우기",
+    strokeColor: "외곽선",
+    strokeWidth: "외곽선 두께",
+    captionPosition: "자막 높이",
+    captionLength: "자막 길이",
+    animation: "애니메이션",
+    density_word: "단어별",
+    density_short: "짧은 구문",
+    density_medium: "중간 구문",
+    density_long: "긴 줄",
+    animation_none: "없음",
+    animation_highlight: "색상 강조",
+    animation_pop: "팝",
+    animation_bounce: "바운스",
     editorTools: "편집 도구",
     rangeStart: "시작 위치",
     rangeEnd: "종료 위치",
@@ -714,6 +911,13 @@ function App() {
   const [error, setError] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [editorClipId, setEditorClipId] = useState(null);
+  const [captionStyles, setCaptionStyles] = useState(() => {
+    try {
+      return JSON.parse(localStorage.getItem("elevenclip.captionStyles") || "{}");
+    } catch {
+      return {};
+    }
+  });
   const [language, setLanguage] = useState(() => localStorage.getItem("elevenclip.language") || "en");
   const [theme, setTheme] = useState(() => {
     const saved = localStorage.getItem("elevenclip.theme");
@@ -736,6 +940,9 @@ function App() {
     [job?.clips]
   );
   const editorClip = activeClips.find((clip) => clip.id === editorClipId);
+  const editorCaptionStyle = editorClip
+    ? { ...defaultCaptionStyle, ...(captionStyles[editorClip.id] || {}) }
+    : defaultCaptionStyle;
 
   useEffect(() => {
     document.documentElement.dataset.theme = theme;
@@ -746,6 +953,10 @@ function App() {
     localStorage.setItem("elevenclip.language", language);
   }, [language]);
 
+  useEffect(() => {
+    localStorage.setItem("elevenclip.captionStyles", JSON.stringify(captionStyles));
+  }, [captionStyles]);
+
   useEffect(() => {
     fetchJson("/health").then(setHealth).catch(() => setHealth(null));
   }, []);
@@ -791,15 +1002,23 @@ function App() {
   }
 
   async function patchClip(clipId, patch) {
-    const nextClip = await fetchJson(`/api/jobs/${job.id}/clips/${clipId}`, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(patch),
-    });
     setJob((current) => ({
       ...current,
-      clips: current.clips.map((clip) => (clip.id === clipId ? nextClip : clip)),
+      clips: current.clips.map((clip) => (clip.id === clipId ? { ...clip, ...patch } : clip)),
     }));
+    try {
+      const nextClip = await fetchJson(`/api/jobs/${job.id}/clips/${clipId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(patch),
+      });
+      setJob((current) => ({
+        ...current,
+        clips: current.clips.map((clip) => (clip.id === clipId ? nextClip : clip)),
+      }));
+    } catch (exc) {
+      setError(exc.message);
+    }
   }
 
   async function regenerateClip(clip) {
@@ -822,6 +1041,13 @@ function App() {
     return (value) => setProfile((current) => ({ ...current, [key]: value }));
   }
 
+  function updateCaptionStyle(clipId, patch) {
+    setCaptionStyles((current) => ({
+      ...current,
+      [clipId]: { ...defaultCaptionStyle, ...(current[clipId] || {}), ...patch },
+    }));
+  }
+
   return (
     <main className="app-shell">
       <AppHeader
@@ -844,6 +1070,8 @@ function App() {
           onDelete={(clip) => patchClip(clip.id, { deleted: true })}
           onApprove={(clip) => patchClip(clip.id, { approved: !clip.approved })}
           onRegenerate={regenerateClip}
+          captionStyle={editorCaptionStyle}
+          onCaptionStyleChange={(patch) => updateCaptionStyle(editorClip.id, patch)}
         />
       ) : (
         <div className="workspace-grid">
@@ -975,7 +1203,7 @@ function ProfileForm({
         value={profile.channel_description}
         onChange={setProfileValue("channel_description")}
         placeholder={t("channelDescriptionPlaceholder")}
-        rows={4}
+        rows={3}
       />
 
       <div className="form-grid-two">
@@ -1241,23 +1469,14 @@ function ClipCard({ clip, t, onOpenEditor, onPatch, onDelete, onApprove, onRegen
           </span>
         </div>
 
-        <textarea
-          defaultValue={clip.subtitle_text}
-          aria-label={t("subtitles")}
-          rows={3}
-          onBlur={(event) => {
-            if (event.target.value !== clip.subtitle_text) {
-              onPatch(clip.id, { subtitle_text: event.target.value });
-            }
-          }}
-        />
+        <p className="subtitle-snippet">{clip.subtitle_text}</p>
 
         <div className="clip-actions">
-          <button type="button" title={t("openEditor")} onClick={() => onOpenEditor(clip)}>
+          <button className="action-primary" type="button" title={t("openEditor")} onClick={() => onOpenEditor(clip)}>
             <PanelRightOpen size={16} />
             {t("openEditor")}
           </button>
-          <button type="button" title={t("approve")} onClick={() => onApprove(clip)}>
+          <button className="action-approve" type="button" title={t("approve")} onClick={() => onApprove(clip)}>
             <Check size={16} />
             {clip.approved ? t("approved") : t("approve")}
           </button>
@@ -1278,11 +1497,23 @@ function ClipCard({ clip, t, onOpenEditor, onPatch, onDelete, onApprove, onRegen
   );
 }
 
-function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, onRegenerate }) {
+function ClipEditorPage({
+  clip,
+  job,
+  t,
+  onBack,
+  onPatch,
+  onDelete,
+  onApprove,
+  onRegenerate,
+  captionStyle,
+  onCaptionStyleChange,
+}) {
   const duration = Math.max(1, clip.end_seconds - clip.start_seconds);
-  const cues = getSubtitleCues(clip, duration);
+  const cues = getSubtitleCues(clip, duration, captionStyle);
   const metadataModel = clip.metadata?.model || "unknown";
   const sourceKind = job?.source?.kind || "video";
+  const activeCue = cues[0]?.text || clip.subtitle_text || clip.title;
   const timelineDuration = Math.max(
     clip.end_seconds,
     ...(job?.transcript || []).map((segment) => Number(segment.end_seconds || 0)),
@@ -1332,6 +1563,29 @@ function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, on
       </div>
 
       <div className="editor-grid">
+        <aside className="tool-rail" aria-label={t("editorTools")}>
+          <button type="button" className="active" title={t("toolSelect")}>
+            <PanelRightOpen size={18} />
+            <span>{t("toolSelect")}</span>
+          </button>
+          <button type="button" title={t("toolTrim")}>
+            <Scissors size={18} />
+            <span>{t("toolTrim")}</span>
+          </button>
+          <button type="button" title={t("toolCaptions")}>
+            <Captions size={18} />
+            <span>{t("toolCaptions")}</span>
+          </button>
+          <button type="button" title={t("toolStyle")}>
+            <SlidersHorizontal size={18} />
+            <span>{t("toolStyle")}</span>
+          </button>
+          <button type="button" title={t("toolExport")}>
+            <Download size={18} />
+            <span>{t("toolExport")}</span>
+          </button>
+        </aside>
+
         <section className="panel editor-main">
           <div className="panel-heading compact">
             <div>
@@ -1344,6 +1598,7 @@ function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, on
           </div>
           <div className="editor-preview">
             {clip.video_url ? <video controls src={`${API_BASE}${clip.video_url}`} /> : <Film size={44} />}
+            <CaptionPreview text={activeCue} settings={captionStyle} />
           </div>
 
           <div className="range-editor">
@@ -1432,6 +1687,8 @@ function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, on
             </div>
           </div>
 
+          <TimelineTracks clip={clip} cues={cues} duration={timelineDuration} t={t} />
+
           <div className="subtitle-editor">
             <div className="panel-heading compact">
               <div>
@@ -1514,6 +1771,8 @@ function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, on
             </button>
           </div>
 
+          <CaptionStylePanel t={t} settings={captionStyle} onChange={onCaptionStyleChange} />
+
           <TranscriptMini transcript={job?.transcript || []} clip={clip} t={t} />
         </aside>
       </div>
@@ -1521,6 +1780,183 @@ function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, on
   );
 }
 
+function CaptionPreview({ text, settings }) {
+  const words = text.split(/\s+/).filter(Boolean);
+  const litCount = Math.max(1, Math.ceil(words.length * 0.45));
+  const style = {
+    bottom: `${settings.position}%`,
+    color: settings.fillColor,
+    fontFamily: `"${settings.fontFamily}", Inter, ui-sans-serif, system-ui, sans-serif`,
+    fontSize: `${settings.fontSize}px`,
+    WebkitTextStroke: `${settings.strokeWidth}px ${settings.strokeColor}`,
+    textShadow: `0 3px 12px ${settings.strokeColor}`,
+  };
+
+  return (
+    <div className={`caption-preview ${settings.animation}`} style={style}>
+      {settings.animation === "highlight"
+        ? words.map((word, index) => (
+            <span key={`${word}-${index}`} className={index < litCount ? "lit" : ""}>
+              {word}
+              {index < words.length - 1 ? " " : ""}
+            </span>
+          ))
+        : text}
+    </div>
+  );
+}
+
+function TimelineTracks({ clip, cues, duration, t }) {
+  const clipLeft = clamp((clip.start_seconds / duration) * 100, 0, 100);
+  const clipWidth = clamp(((clip.end_seconds - clip.start_seconds) / duration) * 100, 4, 100);
+  const subtitleItems = cues.slice(0, 8);
+  return (
+    <div className="timeline-workbench">
+      <div className="panel-heading compact">
+        <div>
+          <h2>{t("timelineTracks")}</h2>
+          <p>
+            {formatTime(clip.start_seconds)} - {formatTime(clip.end_seconds)}
+          </p>
+        </div>
+        <Film size={18} />
+      </div>
+      <div className="track-stack">
+        <TrackRow label={t("videoTrack")}>
+          <div className="track-clip video" style={{ left: `${clipLeft}%`, width: `${clipWidth}%` }}>
+            {clip.title}
+          </div>
+        </TrackRow>
+        <TrackRow label={t("subtitleTrack")}>
+          {subtitleItems.map((cue, index) => (
+            <div
+              className="track-clip subtitle"
+              key={`${cue.start_seconds}-${index}`}
+              style={{
+                left: `${clamp(((clip.start_seconds + cue.start_seconds) / duration) * 100, 0, 100)}%`,
+                width: `${clamp(((cue.end_seconds - cue.start_seconds) / duration) * 100, 3, 45)}%`,
+              }}
+            >
+              {cue.text}
+            </div>
+          ))}
+        </TrackRow>
+        <TrackRow label={t("audioTrack")}>
+          <div className="waveform">
+            {Array.from({ length: 42 }).map((_, index) => (
+              <span key={index} style={{ height: `${18 + ((index * 17) % 34)}%` }} />
+            ))}
+          </div>
+        </TrackRow>
+      </div>
+    </div>
+  );
+}
+
+function TrackRow({ label, children }) {
+  return (
+    <div className="track-row">
+      <span>{label}</span>
+      <div className="track-lane">{children}</div>
+    </div>
+  );
+}
+
+function CaptionStylePanel({ t, settings, onChange }) {
+  return (
+    <section className="caption-style-panel">
+      <div className="panel-heading compact">
+        <div>
+          <h2>{t("captionStyle")}</h2>
+        </div>
+        <Captions size={18} />
+      </div>
+
+      <div className="preset-row">
+        {Object.entries(captionPresets).map(([key, preset]) => (
+          <button type="button" key={key} onClick={() => onChange(preset)}>
+            {t(`preset${capitalize(key)}`)}
+          </button>
+        ))}
+      </div>
+
+      <div className="style-grid">
+        <SelectField
+          label={t("font")}
+          value={settings.fontFamily}
+          onChange={(value) => onChange({ fontFamily: value })}
+          options={FONT_OPTIONS.map((value) => ({ value, label: value }))}
+        />
+        <SelectField
+          label={t("captionLength")}
+          value={settings.cueDensity}
+          onChange={(value) => onChange({ cueDensity: value })}
+          options={CUE_DENSITIES.map((value) => ({ value, label: t(`density_${value}`) }))}
+        />
+        <SelectField
+          label={t("animation")}
+          value={settings.animation}
+          onChange={(value) => onChange({ animation: value })}
+          options={CAPTION_ANIMATIONS.map((value) => ({ value, label: t(`animation_${value}`) }))}
+        />
+      </div>
+
+      <div className="color-grid">
+        <ColorField label={t("fillColor")} value={settings.fillColor} onChange={(fillColor) => onChange({ fillColor })} />
+        <ColorField
+          label={t("strokeColor")}
+          value={settings.strokeColor}
+          onChange={(strokeColor) => onChange({ strokeColor })}
+        />
+      </div>
+
+      <RangeControl label={t("fontSize")} value={settings.fontSize} min={24} max={64} onChange={(fontSize) => onChange({ fontSize })} />
+      <RangeControl
+        label={t("strokeWidth")}
+        value={settings.strokeWidth}
+        min={0}
+        max={8}
+        onChange={(strokeWidth) => onChange({ strokeWidth })}
+      />
+      <RangeControl
+        label={t("captionPosition")}
+        value={settings.position}
+        min={8}
+        max={38}
+        onChange={(position) => onChange({ position })}
+      />
+    </section>
+  );
+}
+
+function ColorField({ label, value, onChange }) {
+  return (
+    <label className="color-field">
+      <span>{label}</span>
+      <input type="color" value={value} onChange={(event) => onChange(event.target.value)} />
+    </label>
+  );
+}
+
+function RangeControl({ label, value, min, max, onChange }) {
+  return (
+    <label className="range-control">
+      <span>
+        {label}
+        <strong>{value}</strong>
+      </span>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step="1"
+        value={value}
+        onChange={(event) => onChange(Number(event.target.value))}
+      />
+    </label>
+  );
+}
+
 function TranscriptMini({ transcript, clip, t }) {
   const rows = transcript.filter(
     (segment) => segment.end_seconds >= clip.start_seconds && segment.start_seconds <= clip.end_seconds
@@ -1616,16 +2052,8 @@ async function fetchJson(path, options) {
   return response.json();
 }
 
-function getSubtitleCues(clip, duration) {
-  const fromMetadata = clip.metadata?.subtitle_cues;
-  if (Array.isArray(fromMetadata) && fromMetadata.length > 0) {
-    return fromMetadata.map((cue) => ({
-      start_seconds: Number(cue.start_seconds || 0),
-      end_seconds: Number(cue.end_seconds || cue.start_seconds || 0),
-      text: cue.text || "",
-    }));
-  }
-  return splitSubtitleText(clip.subtitle_text || "").map((text, index, all) => {
+function getSubtitleCues(clip, duration, settings = defaultCaptionStyle) {
+  return splitSubtitleText(clip.subtitle_text || "", settings.cueDensity).map((text, index, all) => {
     const cueDuration = duration / Math.max(all.length, 1);
     return {
       start_seconds: roundTime(index * cueDuration),
@@ -1635,14 +2063,21 @@ function getSubtitleCues(clip, duration) {
   });
 }
 
-function splitSubtitleText(text) {
+function splitSubtitleText(text, density = "short") {
   const clean = text.trim().replace(/\s+/g, " ");
   if (!clean) return [""];
+  const limits = {
+    word: { words: 1, chars: 18 },
+    short: { words: 4, chars: 30 },
+    medium: { words: 7, chars: 46 },
+    long: { words: 12, chars: 78 },
+  };
+  const limit = limits[density] || limits.short;
   const words = clean.split(" ");
   if (words.length <= 1) {
     const chunks = [];
-    for (let index = 0; index < clean.length; index += 38) {
-      chunks.push(clean.slice(index, index + 38));
+    for (let index = 0; index < clean.length; index += limit.chars) {
+      chunks.push(clean.slice(index, index + limit.chars));
     }
     return chunks;
   }
@@ -1651,7 +2086,7 @@ function splitSubtitleText(text) {
   words.forEach((word) => {
     const candidate = [...current, word].join(" ");
     const punctuationBreak = current.length > 0 && /[,.!?;:]$/.test(current[current.length - 1]);
-    if (current.length > 0 && (candidate.length > 42 || current.length >= 7 || punctuationBreak)) {
+    if (current.length > 0 && (candidate.length > limit.chars || current.length >= limit.words || punctuationBreak)) {
       chunks.push(current.join(" "));
       current = [word];
     } else {
@@ -1670,6 +2105,10 @@ function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 
+function capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
 function formatTime(value) {
   const safeValue = Number.isFinite(Number(value)) ? Number(value) : 0;
   const minutes = Math.floor(safeValue / 60);

frontend/src/styles.css

@@ -249,10 +249,10 @@ button:disabled {
 
 .workspace-grid {
   display: grid;
-  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
-  gap: 18px;
+  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  gap: 14px;
   align-items: start;
-  padding: 20px clamp(16px, 4vw, 44px) 44px;
+  padding: 18px clamp(16px, 3vw, 40px) 36px;
 }
 
 .center-column,
@@ -280,10 +280,8 @@ button:disabled {
 }
 
 .input-panel {
-  position: sticky;
-  top: 96px;
-  max-height: calc(100vh - 120px);
-  overflow: auto;
+  position: static;
+  overflow: visible;
 }
 
 .results-column {
@@ -555,7 +553,7 @@ textarea:focus,
 
 .clip-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 14px;
   align-items: start;
 }
@@ -565,12 +563,13 @@ textarea:focus,
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface-muted);
+  min-width: 0;
 }
 
 .clip-video {
   display: grid;
   aspect-ratio: 9 / 16;
-  max-height: 340px;
+  max-height: 300px;
   place-items: center;
   background: #050b16;
   color: white;
@@ -639,13 +638,42 @@ textarea:focus,
 }
 
 .clip-actions {
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
   gap: 8px;
 }
 
 .clip-actions button,
 .download-button {
+  min-width: 38px;
   padding: 0 10px;
+  white-space: nowrap;
+}
+
+.clip-actions button:not(.action-primary):not(.action-approve),
+.download-button {
+  width: 38px;
+  padding: 0;
+}
+
+.clip-actions .action-approve {
+  min-width: 92px;
+}
+
+.subtitle-snippet {
+  display: -webkit-box;
+  min-height: 54px;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 0.84rem;
+  line-height: 1.45;
+  padding: 10px;
 }
 
 .download-button {
@@ -661,8 +689,8 @@ textarea:focus,
 
 .editor-shell {
   display: grid;
-  gap: 18px;
-  padding: 20px clamp(16px, 4vw, 44px) 44px;
+  gap: 14px;
+  padding: 18px clamp(16px, 3vw, 40px) 32px;
 }
 
 .editor-topbar {
@@ -685,11 +713,43 @@ textarea:focus,
 
 .editor-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
-  gap: 18px;
+  grid-template-columns: 74px minmax(0, 1fr) minmax(330px, 420px);
+  gap: 14px;
   align-items: start;
 }
 
+.tool-rail {
+  position: sticky;
+  top: 96px;
+  display: grid;
+  gap: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--surface) 96%, transparent);
+  padding: 8px;
+  box-shadow: var(--shadow);
+}
+
+.tool-rail button {
+  display: grid;
+  min-height: 58px;
+  place-items: center;
+  gap: 4px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 0.68rem;
+  font-weight: 800;
+}
+
+.tool-rail button.active,
+.tool-rail button:hover {
+  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
+  background: var(--primary-soft);
+  color: var(--primary-strong);
+}
+
 .editor-main,
 .inspector-panel {
   display: grid;
@@ -698,8 +758,10 @@ textarea:focus,
 
 .editor-preview {
   display: grid;
+  position: relative;
   min-height: 520px;
   max-height: 68vh;
+  overflow: hidden;
   place-items: center;
   border-radius: var(--radius);
   background: #050b16;
@@ -713,8 +775,54 @@ textarea:focus,
   object-fit: contain;
 }
 
+.caption-preview {
+  position: absolute;
+  left: 50%;
+  width: min(82%, 760px);
+  transform: translateX(-50%);
+  color: white;
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1.08;
+  text-align: center;
+  text-transform: none;
+  pointer-events: none;
+}
+
+.caption-preview .lit {
+  color: var(--accent);
+}
+
+.caption-preview.pop {
+  animation: caption-pop 900ms ease-in-out infinite alternate;
+}
+
+.caption-preview.bounce {
+  animation: caption-bounce 760ms ease-in-out infinite alternate;
+}
+
+@keyframes caption-pop {
+  from {
+    transform: translateX(-50%) scale(0.98);
+  }
+  to {
+    transform: translateX(-50%) scale(1.04);
+  }
+}
+
+@keyframes caption-bounce {
+  from {
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    transform: translateX(-50%) translateY(-8px);
+  }
+}
+
 .range-editor,
-.subtitle-editor {
+.subtitle-editor,
+.timeline-workbench,
+.caption-style-panel {
   display: grid;
   gap: 12px;
   border: 1px solid var(--border);
@@ -854,6 +962,81 @@ textarea:focus,
   font-variant-numeric: tabular-nums;
 }
 
+.track-stack {
+  display: grid;
+  gap: 8px;
+}
+
+.track-row {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+
+.track-row > span {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 850;
+}
+
+.track-lane {
+  position: relative;
+  min-height: 42px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      transparent 0,
+      transparent 11.8%,
+      color-mix(in srgb, var(--border) 70%, transparent) 12%,
+      transparent 12.2%
+    ),
+    var(--surface);
+}
+
+.track-clip {
+  position: absolute;
+  top: 7px;
+  bottom: 7px;
+  display: flex;
+  min-width: 54px;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 6px;
+  color: #042f2e;
+  font-size: 0.72rem;
+  font-weight: 850;
+  padding: 0 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.track-clip.video {
+  background: linear-gradient(90deg, #5eead4, #22c55e);
+}
+
+.track-clip.subtitle {
+  background: #fde68a;
+  color: #422006;
+}
+
+.waveform {
+  position: absolute;
+  inset: 8px 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.waveform span {
+  width: 4px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 70%, var(--text-soft));
+}
+
 .cue-list {
   display: grid;
   gap: 10px;
@@ -900,6 +1083,69 @@ textarea:focus,
   color: var(--danger);
 }
 
+.caption-style-panel {
+  background: color-mix(in srgb, var(--surface-muted) 92%, var(--surface));
+}
+
+.preset-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.preset-row button {
+  min-height: 36px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface);
+  color: var(--text);
+  font-weight: 800;
+}
+
+.style-grid,
+.color-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.color-grid {
+  grid-template-columns: 1fr 1fr;
+}
+
+.color-field,
+.range-control {
+  display: grid;
+  gap: 7px;
+}
+
+.color-field span,
+.range-control span {
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  font-weight: 800;
+}
+
+.range-control strong {
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.color-field input {
+  width: 100%;
+  height: 38px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface);
+  padding: 4px;
+}
+
+.range-control input {
+  width: 100%;
+  accent-color: var(--primary);
+}
+
 .mini-transcript {
   display: grid;
   gap: 10px;
@@ -937,6 +1183,14 @@ textarea:focus,
     grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
   }
 
+  .editor-grid {
+    grid-template-columns: 64px minmax(0, 1fr);
+  }
+
+  .inspector-panel {
+    grid-column: 1 / -1;
+  }
+
   .results-column {
     grid-column: 1 / -1;
   }
@@ -958,6 +1212,16 @@ textarea:focus,
     grid-template-columns: 1fr;
   }
 
+  .tool-rail {
+    position: static;
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .tool-rail button {
+    min-width: 72px;
+  }
+
   .input-panel {
     position: static;
     max-height: none;
@@ -981,10 +1245,16 @@ textarea:focus,
   .range-sliders,
   .timeline,
   .cue-row,
+  .track-row,
   .transcript-row {
     grid-template-columns: 1fr;
   }
 
+  .color-grid,
+  .preset-row {
+    grid-template-columns: 1fr;
+  }
+
   .progress-percent {
     font-size: 1.5rem;
   }