fix(editor): kill empty band + first-frame preview + polish

Layout repair:
- Empty band above the editor topbar was caused by .editor-topbar
being position:sticky;top:72px while inside .editor-shell.nle
(overflow:hidden, no scroll context). The 72px offset rendered as
a 72px gap. Override to position:relative;top:auto in NLE mode.
- Compact AppHeader (56px) when in editor view; hide subtitle line.
Reclaim ~50px of vertical real estate for the timeline.

Preview stability:
- Add playsInline + preload=metadata + muted to the preview <video>.
- video.load() + currentTime=0.05 on clip change forces the first
frame to render so the canvas isn't blank before user interaction.

Trim handles:
- Widen drag handles from 10px to 14px and bump z-index to 4.
- Switch to amber/black for higher contrast against the indigo clip.
- Hover scales the handle 1.06x for clearer affordance.

AI Assistant copy:
- Subtitles were redundant ("ทำใหม่" / "—"). Replace with platform-
specific guidance ("Best for Reels & Shorts", "Best for TikTok
storytelling") so each tile communicates a distinct intent.
- Rename Tighten/Emphasize labels to explicit durations (30s/60s).
- Add aiDeleteClip + four ai*Sub keys across all 5 languages.

Inspector cleanup:
- Drop the duplicate inner "Inspector" h4 (panel head already labels it).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -282,9 +282,14 @@ const en = {
   mediaBin: "Clips",
   aiAssistant: "AI Assistant",
   aiReason: "AI hasn't explained yet — try regenerating.",
-  aiTighten: "Tighten the cut",
-  aiEmphasize: "Emphasize the peak",
-  aiRedoAll: "Regenerate this clip",
+  aiTighten: "Tighten to 30s",
+  aiEmphasize: "Extend to 60s",
+  aiRedoAll: "Regenerate clip",
+  aiDeleteClip: "Remove clip",
+  aiActionRedoSub: "Let AI pick a new moment",
+  aiActionTightenSub: "Best for Reels & Shorts",
+  aiActionEmphasizeSub: "Best for TikTok storytelling",
+  aiActionDeleteSub: "Drop from this batch",
   dragToTrim: "Drag edges to trim · drag body to move",
   dragToPosition: "Drag caption to reposition",
 };
@@ -451,9 +456,14 @@ const translations = {
     mediaBin: "คลิปทั้งหมด",
     aiAssistant: "ผู้ช่วย AI",
     aiReason: "AI ยังไม่ได้อธิบาย ลองสร้างใหม่ดูสิ",
-    aiTighten: "ตัดให้กระชับ",
-    aiEmphasize: "เน้นจุดเด่น",
+    aiTighten: "ตัดเหลือ 30 วิ",
+    aiEmphasize: "ขยายเป็น 60 วิ",
     aiRedoAll: "สร้างคลิปนี้ใหม่",
+    aiDeleteClip: "ลบคลิปนี้",
+    aiActionRedoSub: "ให้ AI หาช่วงใหม่",
+    aiActionTightenSub: "เหมาะกับ Reels และ Shorts",
+    aiActionEmphasizeSub: "เหมาะกับ TikTok แบบเล่าเรื่อง",
+    aiActionDeleteSub: "เอาออกจากชุดนี้",
     dragToTrim: "ลากขอบเพื่อ trim · ลากกลางเพื่อย้าย",
     dragToPosition: "ลากข้อความเพื่อย้ายตำแหน่ง",
   },
@@ -618,9 +628,14 @@ const translations = {
     mediaBin: "クリップ一覧",
     aiAssistant: "AIアシスタント",
     aiReason: "AIの説明はまだありません。再生成してみてください。",
-    aiTighten: "短くまとめる",
-    aiEmphasize: "ハイライトを強調",
+    aiTighten: "30秒に短縮",
+    aiEmphasize: "60秒に延長",
     aiRedoAll: "このクリップを再生成",
+    aiDeleteClip: "クリップを削除",
+    aiActionRedoSub: "AIに別の場面を選ばせる",
+    aiActionTightenSub: "Reels・Shortsに最適",
+    aiActionEmphasizeSub: "TikTokのストーリーテリングに最適",
+    aiActionDeleteSub: "このバッチから外す",
     dragToTrim: "端をドラッグでトリム · 中央をドラッグで移動",
     dragToPosition: "字幕をドラッグして移動",
   },
@@ -784,9 +799,14 @@ const translations = {
     mediaBin: "片段列表",
     aiAssistant: "AI 助手",
     aiReason: "AI 还没解释，试试重新生成。",
-    aiTighten: "更紧凑",
-    aiEmphasize: "突出高潮",
+    aiTighten: "压缩到 30 秒",
+    aiEmphasize: "延长到 60 秒",
     aiRedoAll: "重新生成此片段",
+    aiDeleteClip: "删除此片段",
+    aiActionRedoSub: "让 AI 找新的精彩瞬间",
+    aiActionTightenSub: "适合 Reels 和 Shorts",
+    aiActionEmphasizeSub: "适合 TikTok 故事化内容",
+    aiActionDeleteSub: "从本批次移除",
     dragToTrim: "拖动边缘修剪 · 拖动中央移动",
     dragToPosition: "拖动字幕移动位置",
   },
@@ -951,9 +971,14 @@ const translations = {
     mediaBin: "클립 목록",
     aiAssistant: "AI 어시스턴트",
     aiReason: "AI가 아직 설명하지 않았습니다. 다시 만들어 보세요.",
-    aiTighten: "더 타이트하게",
-    aiEmphasize: "하이라이트 강조",
+    aiTighten: "30초로 줄이기",
+    aiEmphasize: "60초로 늘리기",
     aiRedoAll: "이 클립 다시 만들기",
+    aiDeleteClip: "클립 삭제",
+    aiActionRedoSub: "AI가 다른 장면을 찾도록",
+    aiActionTightenSub: "Reels와 Shorts에 적합",
+    aiActionEmphasizeSub: "TikTok 스토리텔링에 적합",
+    aiActionDeleteSub: "이번 배치에서 제외",
     dragToTrim: "끝을 드래그해 트림 · 가운데를 드래그해 이동",
     dragToPosition: "자막을 드래그해 이동",
   },
@@ -1137,6 +1162,7 @@ function App() {
         theme={theme}
         setTheme={setTheme}
         t={t}
+        compact={view === "editor"}
       />
 
       {view === "editor" && editorClipId && editorClip ? (
@@ -1254,20 +1280,20 @@ function Dashboard({
 // ============================================================
 // App Header
 // ============================================================
-function AppHeader({ job, health, language, setLanguage, theme, setTheme, t }) {
+function AppHeader({ job, health, language, setLanguage, theme, setTheme, t, compact }) {
   const status = job?.status || "idle";
   const modeLabel = health ? (health.demo_mode ? t("demoMode") : t("productionMode")) : "API";
   const modeClass = health ? (health.demo_mode ? "demo" : "prod") : "";
 
   return (
-    <header className="app-header">
+    <header className={`app-header ${compact ? "compact" : ""}`}>
       <div className="brand-block">
         <div className="brand-mark">
           <Scissors size={20} />
         </div>
         <div>
           <h1>ElevenClip.AI</h1>
-          <p>{t("appSubtitle")}</p>
+          {!compact && <p>{t("appSubtitle")}</p>}
         </div>
       </div>
 
@@ -1750,7 +1776,7 @@ function ClipEditorPage({
     1
   );
 
-  // Sync playhead with video element
+  // Sync playhead with video element + force first-frame render
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -1763,15 +1789,26 @@ function ClipEditorPage({
     function onPause() {
       setIsPlaying(false);
     }
+    function onLoadedMetadata() {
+      // Seek 0.05s in to force first frame to render in <video>
+      try {
+        video.currentTime = 0.05;
+      } catch {
+        /* ignore */
+      }
+    }
     video.addEventListener("timeupdate", onTimeUpdate);
     video.addEventListener("play", onPlay);
     video.addEventListener("pause", onPause);
+    video.addEventListener("loadedmetadata", onLoadedMetadata);
+    video.load();
     return () => {
       video.removeEventListener("timeupdate", onTimeUpdate);
       video.removeEventListener("play", onPlay);
       video.removeEventListener("pause", onPause);
+      video.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
-  }, [clip.id, clip.start_seconds]);
+  }, [clip.id, clip.start_seconds, clip.video_url]);
 
   // Reset playhead when clip changes
   useEffect(() => {
@@ -2026,7 +2063,13 @@ function PreviewStage({
       <div className="preview-stage" ref={stageRef}>
         <div className="preview-stage-canvas">
           {clip.video_url ? (
-            <video ref={videoRef} src={`${API_BASE}${clip.video_url}`} />
+            <video
+              ref={videoRef}
+              src={`${API_BASE}${clip.video_url}`}
+              playsInline
+              preload="metadata"
+              muted
+            />
           ) : (
             <Film size={56} style={{ color: "var(--text-soft)" }} />
           )}
@@ -2361,7 +2404,7 @@ function AIAssistantPanel({ clip, t, onRegenerate, onTighten, onFitLength, onDel
             </span>
             <span className="ai-action-text">
               <strong>{t("aiRedoAll")}</strong>
-              <small>{t("regenerate")}</small>
+              <small>{t("aiActionRedoSub")}</small>
             </span>
           </button>
           <button type="button" className="ai-action" onClick={onTighten}>
@@ -2370,7 +2413,7 @@ function AIAssistantPanel({ clip, t, onRegenerate, onTighten, onFitLength, onDel
             </span>
             <span className="ai-action-text">
               <strong>{t("aiTighten")}</strong>
-              <small>30s</small>
+              <small>{t("aiActionTightenSub")}</small>
             </span>
           </button>
           <button
@@ -2383,7 +2426,7 @@ function AIAssistantPanel({ clip, t, onRegenerate, onTighten, onFitLength, onDel
             </span>
             <span className="ai-action-text">
               <strong>{t("aiEmphasize")}</strong>
-              <small>60s</small>
+              <small>{t("aiActionEmphasizeSub")}</small>
             </span>
           </button>
           <button
@@ -2398,8 +2441,8 @@ function AIAssistantPanel({ clip, t, onRegenerate, onTighten, onFitLength, onDel
               <Trash2 size={14} />
             </span>
             <span className="ai-action-text">
-              <strong>{t("delete")}</strong>
-              <small>—</small>
+              <strong>{t("aiDeleteClip")}</strong>
+              <small>{t("aiActionDeleteSub")}</small>
             </span>
           </button>
         </div>
@@ -2433,7 +2476,6 @@ function EditorInspector({
       <div className="nle-panel-body">
         <div className="inspector-stack">
           <section>
-            <h4>{t("inspector")}</h4>
             <dl className="inspector-meta">
               <div>
                 <dt>{t("score")}</dt>

frontend/src/styles.css

@@ -183,6 +183,22 @@ button:disabled {
   -webkit-backdrop-filter: blur(20px);
 }
 
+.app-header.compact {
+  min-height: 56px;
+  height: 56px;
+  padding: 0 clamp(12px, 3vw, 32px);
+  gap: 14px;
+}
+
+.app-header.compact .brand-mark {
+  width: 32px;
+  height: 32px;
+}
+
+.app-header.compact h1 {
+  font-size: 0.95rem;
+}
+
 :root[data-theme="light"] .app-header {
   background: rgba(255, 255, 255, 0.88);
 }
@@ -1128,11 +1144,28 @@ textarea:focus,
    NLE 4-panel editor (Premiere-style)
    ============================================================ */
 .editor-shell.nle {
-  height: calc(100vh - 72px);
-  min-height: calc(100vh - 72px);
+  height: calc(100vh - 56px);
+  min-height: calc(100vh - 56px);
   overflow: hidden;
 }
 
+.editor-shell.nle .editor-topbar {
+  position: relative;
+  top: auto;
+  z-index: auto;
+  padding: 10px clamp(14px, 2vw, 28px);
+  flex: 0 0 auto;
+}
+
+.editor-shell.nle .editor-topbar-info h2 {
+  font-size: 0.86rem;
+}
+
+.editor-shell.nle .editor-topbar-info p {
+  font-size: 0.72rem;
+  margin-top: 2px;
+}
+
 .editor-grid-nle {
   display: grid;
   grid-template-columns: 240px minmax(0, 1fr) 340px;
@@ -1558,41 +1591,49 @@ textarea:focus,
 
 .timeline-handle {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 10px;
-  background: var(--primary);
+  top: -2px;
+  bottom: -2px;
+  width: 14px;
+  background: var(--accent);
   cursor: ew-resize;
-  z-index: 2;
+  z-index: 4;
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0.8;
-  transition: opacity 140ms ease, background 140ms ease;
+  opacity: 0.95;
+  transition: opacity 140ms ease, background 140ms ease, transform 140ms ease;
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
 }
 
 .timeline-handle::before {
   content: "";
-  width: 2px;
-  height: 14px;
-  background: rgba(255, 255, 255, 0.85);
-  border-radius: 1px;
+  width: 3px;
+  height: 18px;
+  background: #1a1300;
+  border-radius: 1.5px;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
 }
 
 .timeline-handle:hover,
 .timeline-handle.dragging {
   opacity: 1;
-  background: var(--accent);
+  background: #fbbf24;
+  transform: scaleY(1.06);
 }
 
 .timeline-handle.left {
   left: 0;
-  border-radius: 6px 0 0 6px;
+  border-radius: 4px 0 0 4px;
 }
 
 .timeline-handle.right {
   right: 0;
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 4px 4px 0;
+}
+
+.timeline-clip {
+  padding: 0 22px;
 }
 
 .timeline-caption-block {