fix(frontend): polish locale controls and editor layout

frontend/src/App.jsx

@@ -101,6 +101,12 @@ const en = {
   progressNote: "Progress is updated by backend steps. Rendering shows clip-by-clip status.",
   currentStep: "Current step",
   timing: "Timing",
+  timing_input: "Input",
+  timing_transcription: "Transcription",
+  timing_highlight_detection: "Highlight detection",
+  timing_multimodal_analysis: "Multimodal analysis",
+  timing_clip_generation: "Clip generation",
+  timing_total: "Total",
   transcript: "Transcript",
   transcriptEmpty: "Transcript will appear after transcription finishes.",
   clips: "Clips",
@@ -126,12 +132,27 @@ const en = {
   clipRange: "Clip range",
   subtitleCues: "Subtitle cues",
   subtitleCueHelp: "Short cues read better on TikTok, Reels, and Shorts.",
+  editorTools: "Editing tools",
+  rangeStart: "Range start",
+  rangeEnd: "Range end",
+  trimStartBack: "Start -0.5s",
+  trimStartForward: "Start +0.5s",
+  trimEndBack: "End -0.5s",
+  trimEndForward: "End +0.5s",
+  moveClipLeft: "Move -1s",
+  moveClipRight: "Move +1s",
+  setClipLength30: "30s cut",
+  setClipLength60: "60s cut",
+  setClipLength90: "90s cut",
   inspector: "Inspector",
   title: "Title",
   status: "Status",
   notApproved: "Not approved",
   model: "Model",
   source: "Source",
+  source_upload: "Upload",
+  source_youtube: "YouTube",
+  source_video: "Video",
   settings: "Settings",
   stepInput: "Input",
   stepTranscription: "Transcription",
@@ -210,6 +231,12 @@ const translations = {
     progressNote: "แถบนี้อัปเดตตามขั้นตอน backend และตอน render จะแสดงทีละคลิป",
     currentStep: "ขั้นตอนปัจจุบัน",
     timing: "เวลา",
+    timing_input: "รับวิดีโอ",
+    timing_transcription: "ถอดเสียง",
+    timing_highlight_detection: "หาไฮไลต์",
+    timing_multimodal_analysis: "วิเคราะห์ภาพ",
+    timing_clip_generation: "สร้างคลิป",
+    timing_total: "รวม",
     transcript: "ถอดเสียง",
     transcriptEmpty: "ข้อความถอดเสียงจะแสดงหลังประมวลผลเสร็จ",
     clips: "คลิป",
@@ -235,12 +262,27 @@ const translations = {
     clipRange: "ช่วงคลิป",
     subtitleCues: "จังหวะซับ",
     subtitleCueHelp: "ซับสั้น ๆ อ่านง่ายกว่าสำหรับ TikTok, Reels และ Shorts",
+    editorTools: "เครื่องมือตัดต่อ",
+    rangeStart: "ตำแหน่งเริ่ม",
+    rangeEnd: "ตำแหน่งจบ",
+    trimStartBack: "เริ่ม -0.5 วิ",
+    trimStartForward: "เริ่ม +0.5 วิ",
+    trimEndBack: "จบ -0.5 วิ",
+    trimEndForward: "จบ +0.5 วิ",
+    moveClipLeft: "เลื่อนคลิป -1 วิ",
+    moveClipRight: "เลื่อนคลิป +1 วิ",
+    setClipLength30: "ตัด 30 วิ",
+    setClipLength60: "ตัด 60 วิ",
+    setClipLength90: "ตัด 90 วิ",
     inspector: "รายละเอียด",
     title: "ชื่อคลิป",
     status: "สถานะ",
     notApproved: "ยังไม่อนุมัติ",
     model: "โมเดล",
     source: "แหล่งที่มา",
+    source_upload: "อัปโหลด",
+    source_youtube: "YouTube",
+    source_video: "วิดีโอ",
     settings: "ตั้งค่า",
     stepInput: "รับวิดีโอ",
     stepTranscription: "ถอดเสียง",
@@ -317,6 +359,12 @@ const translations = {
     progressNote: "進捗はバックエンドの各工程で更新され、レンダリング中はクリップ単位で表示されます。",
     currentStep: "現在の工程",
     timing: "処理時間",
+    timing_input: "入力",
+    timing_transcription: "文字起こし",
+    timing_highlight_detection: "ハイライト検出",
+    timing_multimodal_analysis: "マルチモーダル分析",
+    timing_clip_generation: "クリップ生成",
+    timing_total: "合計",
     transcript: "文字起こし",
     transcriptEmpty: "文字起こしが完了するとここに表示されます。",
     clips: "クリップ",
@@ -336,12 +384,27 @@ const translations = {
     subtitles: "字幕",
     subtitleCues: "字幕キュー",
     subtitleCueHelp: "短い字幕キューのほうがTikTok、Reels、Shortsで読みやすくなります。",
+    editorTools: "編集ツール",
+    rangeStart: "開始位置",
+    rangeEnd: "終了位置",
+    trimStartBack: "開始 -0.5秒",
+    trimStartForward: "開始 +0.5秒",
+    trimEndBack: "終了 -0.5秒",
+    trimEndForward: "終了 +0.5秒",
+    moveClipLeft: "クリップ -1秒",
+    moveClipRight: "クリップ +1秒",
+    setClipLength30: "30秒カット",
+    setClipLength60: "60秒カット",
+    setClipLength90: "90秒カット",
     inspector: "詳細",
     title: "タイトル",
     status: "状態",
     notApproved: "未承認",
     model: "モデル",
     source: "ソース",
+    source_upload: "アップロード",
+    source_youtube: "YouTube",
+    source_video: "動画",
     settings: "設定",
     stepInput: "入力",
     stepTranscription: "文字起こし",
@@ -423,6 +486,12 @@ const translations = {
     progressNote: "进度会按后端步骤更新，渲染阶段会显示每个剪辑的状态。",
     currentStep: "当前步骤",
     timing: "耗时",
+    timing_input: "输入",
+    timing_transcription: "转录",
+    timing_highlight_detection: "高光检测",
+    timing_multimodal_analysis: "多模态分析",
+    timing_clip_generation: "剪辑生成",
+    timing_total: "总计",
     transcript: "转录文本",
     transcriptEmpty: "转录完成后会显示在这里。",
     clips: "剪辑",
@@ -442,12 +511,27 @@ const translations = {
     subtitles: "字幕",
     subtitleCues: "字幕片段",
     subtitleCueHelp: "短字幕片段更适合 TikTok、Reels 和 Shorts。",
+    editorTools: "编辑工具",
+    rangeStart: "开始位置",
+    rangeEnd: "结束位置",
+    trimStartBack: "开始 -0.5 秒",
+    trimStartForward: "开始 +0.5 秒",
+    trimEndBack: "结束 -0.5 秒",
+    trimEndForward: "结束 +0.5 秒",
+    moveClipLeft: "剪辑 -1 秒",
+    moveClipRight: "剪辑 +1 秒",
+    setClipLength30: "30 秒剪辑",
+    setClipLength60: "60 秒剪辑",
+    setClipLength90: "90 秒剪辑",
     inspector: "检查器",
     title: "标题",
     status: "状态",
     notApproved: "未批准",
     model: "模型",
     source: "来源",
+    source_upload: "上传",
+    source_youtube: "YouTube",
+    source_video: "视频",
     settings: "设置",
     stepInput: "输入",
     stepTranscription: "转录",
@@ -530,6 +614,12 @@ const translations = {
     progressNote: "진행률은 백엔드 단계별로 갱신되며, 렌더링 중에는 클립별 상태가 표시됩니다.",
     currentStep: "현재 단계",
     timing: "소요 시간",
+    timing_input: "입력",
+    timing_transcription: "전사",
+    timing_highlight_detection: "하이라이트 감지",
+    timing_multimodal_analysis: "멀티모달 분석",
+    timing_clip_generation: "클립 생성",
+    timing_total: "합계",
     transcript: "전사",
     transcriptEmpty: "전사가 끝나면 여기에 표시됩니다.",
     clips: "클립",
@@ -549,12 +639,27 @@ const translations = {
     subtitles: "자막",
     subtitleCues: "자막 큐",
     subtitleCueHelp: "짧은 자막 큐가 TikTok, Reels, Shorts에서 더 읽기 쉽습니다.",
+    editorTools: "편집 도구",
+    rangeStart: "시작 위치",
+    rangeEnd: "종료 위치",
+    trimStartBack: "시작 -0.5초",
+    trimStartForward: "시작 +0.5초",
+    trimEndBack: "종료 -0.5초",
+    trimEndForward: "종료 +0.5초",
+    moveClipLeft: "클립 -1초",
+    moveClipRight: "클립 +1초",
+    setClipLength30: "30초 컷",
+    setClipLength60: "60초 컷",
+    setClipLength90: "90초 컷",
     inspector: "검사 패널",
     title: "제목",
     status: "상태",
     notApproved: "미승인",
     model: "모델",
     source: "소스",
+    source_upload: "업로드",
+    source_youtube: "YouTube",
+    source_video: "비디오",
     settings: "설정",
     stepInput: "입력",
     stepTranscription: "전사",
@@ -1031,7 +1136,7 @@ function ProgressPanel({ job, t }) {
         <div className="timing-grid">
           {Object.entries(job.timings).map(([name, value]) => (
             <div key={name}>
-              <span>{name.replaceAll("_", " ")}</span>
+              <span>{t(`timing_${name}`)}</span>
               <strong>{value}s</strong>
             </div>
           ))}
@@ -1177,12 +1282,42 @@ function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, on
   const duration = Math.max(1, clip.end_seconds - clip.start_seconds);
   const cues = getSubtitleCues(clip, duration);
   const metadataModel = clip.metadata?.model || "unknown";
+  const sourceKind = job?.source?.kind || "video";
+  const timelineDuration = Math.max(
+    clip.end_seconds,
+    ...(job?.transcript || []).map((segment) => Number(segment.end_seconds || 0)),
+    1
+  );
+  const rangeLeft = clamp((clip.start_seconds / timelineDuration) * 100, 0, 100);
+  const rangeWidth = clamp(((clip.end_seconds - clip.start_seconds) / timelineDuration) * 100, 1, 100);
 
   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 updateStart(value) {
+    const start = clamp(Number(value), 0, Math.max(0, clip.end_seconds - 1));
+    onPatch(clip.id, { start_seconds: roundTime(start) });
+  }
+
+  function updateEnd(value) {
+    const end = clamp(Number(value), clip.start_seconds + 1, timelineDuration);
+    onPatch(clip.id, { end_seconds: roundTime(end) });
+  }
+
+  function moveClip(delta) {
+    const safeDelta = clamp(delta, -clip.start_seconds, timelineDuration - clip.end_seconds);
+    onPatch(clip.id, {
+      start_seconds: roundTime(clip.start_seconds + safeDelta),
+      end_seconds: roundTime(clip.end_seconds + safeDelta),
+    });
+  }
+
+  function setClipLength(seconds) {
+    onPatch(clip.id, { end_seconds: roundTime(clamp(clip.start_seconds + seconds, clip.start_seconds + 1, timelineDuration)) });
+  }
+
   return (
     <div className="editor-shell">
       <div className="editor-topbar">
@@ -1212,23 +1347,86 @@ function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, on
           </div>
 
           <div className="range-editor">
+            <div className="panel-heading compact">
+              <div>
+                <h2>{t("clipRange")}</h2>
+                <p>
+                  {formatTime(clip.start_seconds)} - {formatTime(clip.end_seconds)}
+                </p>
+              </div>
+              <Scissors size={18} />
+            </div>
+            <div className="editor-toolbox">
+              <span>{t("editorTools")}</span>
+              <button type="button" onClick={() => updateStart(clip.start_seconds - 0.5)}>
+                {t("trimStartBack")}
+              </button>
+              <button type="button" onClick={() => updateStart(clip.start_seconds + 0.5)}>
+                {t("trimStartForward")}
+              </button>
+              <button type="button" onClick={() => updateEnd(clip.end_seconds - 0.5)}>
+                {t("trimEndBack")}
+              </button>
+              <button type="button" onClick={() => updateEnd(clip.end_seconds + 0.5)}>
+                {t("trimEndForward")}
+              </button>
+              <button type="button" onClick={() => moveClip(-1)}>
+                {t("moveClipLeft")}
+              </button>
+              <button type="button" onClick={() => moveClip(1)}>
+                {t("moveClipRight")}
+              </button>
+              <button type="button" onClick={() => setClipLength(30)}>
+                {t("setClipLength30")}
+              </button>
+              <button type="button" onClick={() => setClipLength(60)}>
+                {t("setClipLength60")}
+              </button>
+              <button type="button" onClick={() => setClipLength(90)}>
+                {t("setClipLength90")}
+              </button>
+            </div>
             <div className="timeline-visual">
               <div className="timeline-fill" />
-              <div className="timeline-window" style={{ left: "18%", width: "46%" }} />
+              <div className="timeline-window" style={{ left: `${rangeLeft}%`, width: `${rangeWidth}%` }} />
               {Array.from({ length: 9 }).map((_, index) => (
                 <span key={index} style={{ left: `${index * 12.5}%` }} />
               ))}
             </div>
+            <div className="range-sliders">
+              <label>
+                <span>{t("rangeStart")}</span>
+                <input
+                  type="range"
+                  min="0"
+                  max={timelineDuration}
+                  step="0.5"
+                  value={clip.start_seconds}
+                  onChange={(event) => updateStart(event.target.value)}
+                />
+              </label>
+              <label>
+                <span>{t("rangeEnd")}</span>
+                <input
+                  type="range"
+                  min="1"
+                  max={timelineDuration}
+                  step="0.5"
+                  value={clip.end_seconds}
+                  onChange={(event) => updateEnd(event.target.value)}
+                />
+              </label>
+            </div>
             <div className="timeline">
               <NumberField
                 label={t("start")}
                 value={Number(clip.start_seconds).toFixed(1)}
-                onChange={(value) => onPatch(clip.id, { start_seconds: Number(value) })}
+                onChange={updateStart}
               />
               <NumberField
                 label={t("end")}
                 value={Number(clip.end_seconds).toFixed(1)}
-                onChange={(value) => onPatch(clip.id, { end_seconds: Number(value) })}
+                onChange={updateEnd}
               />
               <strong>{duration.toFixed(1)}s</strong>
             </div>
@@ -1291,7 +1489,7 @@ function ClipEditorPage({ clip, job, t, onBack, onPatch, onDelete, onApprove, on
             </div>
             <div>
               <dt>{t("source")}</dt>
-              <dd>{job?.source?.kind || "video"}</dd>
+              <dd>{t(`source_${sourceKind}`)}</dd>
             </div>
           </dl>
 
@@ -1468,6 +1666,10 @@ function roundTime(value) {
   return Math.round(value * 10) / 10;
 }
 
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
 function formatTime(value) {
   const safeValue = Number.isFinite(Number(value)) ? Number(value) : 0;
   const minutes = Math.floor(safeValue / 60);

frontend/src/styles.css

@@ -218,15 +218,30 @@ button:disabled {
 
 .toolbar-select {
   padding: 0 8px;
+  background: var(--surface);
 }
 
 .toolbar-select select {
+  min-width: 52px;
   border: 0;
-  background: transparent;
+  background: var(--surface);
   color: var(--text);
+  -webkit-text-fill-color: var(--text);
   outline: none;
 }
 
+.toolbar-select select option,
+.text-input option {
+  background: #ffffff;
+  color: #111827;
+}
+
+:root[data-theme="dark"] .toolbar-select select option,
+:root[data-theme="dark"] .text-input option {
+  background: #111827;
+  color: #f8fafc;
+}
+
 .icon-button {
   width: 36px;
   padding: 0;
@@ -234,8 +249,9 @@ button:disabled {
 
 .workspace-grid {
   display: grid;
-  grid-template-columns: minmax(300px, 360px) minmax(360px, 1fr) minmax(340px, 460px);
+  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
   gap: 18px;
+  align-items: start;
   padding: 20px clamp(16px, 4vw, 44px) 44px;
 }
 
@@ -266,6 +282,12 @@ button:disabled {
 .input-panel {
   position: sticky;
   top: 96px;
+  max-height: calc(100vh - 120px);
+  overflow: auto;
+}
+
+.results-column {
+  grid-column: 1 / -1;
 }
 
 .panel-heading {
@@ -533,7 +555,9 @@ textarea:focus,
 
 .clip-grid {
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 14px;
+  align-items: start;
 }
 
 .clip-card {
@@ -546,7 +570,7 @@ textarea:focus,
 .clip-video {
   display: grid;
   aspect-ratio: 9 / 16;
-  max-height: 390px;
+  max-height: 340px;
   place-items: center;
   background: #050b16;
   color: white;
@@ -722,6 +746,26 @@ textarea:focus,
   border: 2px solid var(--primary);
   border-radius: 999px;
   background: color-mix(in srgb, var(--primary) 24%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
+}
+
+.timeline-window::before,
+.timeline-window::after {
+  position: absolute;
+  top: 4px;
+  width: 2px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--primary-strong);
+  content: "";
+}
+
+.timeline-window::before {
+  left: 8px;
+}
+
+.timeline-window::after {
+  right: 8px;
 }
 
 .timeline-visual span {
@@ -739,6 +783,54 @@ textarea:focus,
   gap: 10px;
 }
 
+.editor-toolbox {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.editor-toolbox span {
+  margin-right: 2px;
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 850;
+}
+
+.editor-toolbox button {
+  min-height: 34px;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface);
+  color: var(--text);
+  padding: 0 10px;
+  font-size: 0.82rem;
+  font-weight: 750;
+}
+
+.editor-toolbox button:hover {
+  border-color: var(--primary);
+}
+
+.range-sliders {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.range-sliders label {
+  display: grid;
+  gap: 6px;
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  font-weight: 800;
+}
+
+.range-sliders input[type="range"] {
+  width: 100%;
+  accent-color: var(--primary);
+}
+
 .timeline label {
   display: grid;
   gap: 5px;
@@ -868,6 +960,7 @@ textarea:focus,
 
   .input-panel {
     position: static;
+    max-height: none;
   }
 
   .clip-grid {
@@ -885,6 +978,7 @@ textarea:focus,
 
 @media (max-width: 620px) {
   .form-grid-two,
+  .range-sliders,
   .timeline,
   .cue-row,
   .transcript-row {