feat(frontend): rewrite editor as Premiere-style NLE + fix card overflow

Replace the two-column editor with a 4-panel NLE shell that frames the AI
as if it were operating Premiere Pro on the user's behalf:

- Media Bin (left): all clips in the job, click to switch the editor target
- Preview Stage (center top): video + draggable caption overlay
positionable anywhere on the canvas via drag (captionStyle.x/y)
- Timeline (center bottom): ruler with playhead, V1 with drag-to-trim
edge handles + drag-to-move body, T1 caption blocks (clickable to
select), A1 deterministic faux-waveform
- AI Assistant (right top): clip.reason as the AI's explanation + quick
actions (regenerate, tighten to 30s, fit to 60s, delete)
- Inspector (right bottom): score/status/source/model + active cue
textarea + caption style controls

Dashboard fix: split .clip-actions into a primary CTA row + flex-wrap
icon row so action buttons no longer overflow the card on narrow grids.
.clip-grid bumped to minmax(280px, 1fr).

NLE translation keys added across all 5 languages (en/th/ja/zh/ko).

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

frontend/src/App.jsx

@@ -5,22 +5,34 @@ import {
   Clock3,
   Download,
   Film,
+  FolderOpen,
   Gauge,
   Languages,
+  Layers,
   Link as LinkIcon,
   Loader2,
+  Maximize2,
   Moon,
+  Move,
+  Music2,
   PanelRightOpen,
+  Pause,
+  Play,
   RefreshCcw,
   Scissors,
+  SkipBack,
+  SkipForward,
   SlidersHorizontal,
   Sparkles,
   Sun,
   Trash2,
+  Type,
   Upload,
+  Volume2,
   Wand2,
+  Zap,
 } from "lucide-react";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 
 const API_BASE = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
 
@@ -61,6 +73,8 @@ const defaultCaptionStyle = {
   strokeColor: "#080b12",
   strokeWidth: 4,
   position: 18,
+  x: 50, // horizontal % of preview stage
+  y: 82, // vertical % of preview stage (default near bottom)
   cueDensity: "short",
   animation: "highlight",
 };
@@ -264,6 +278,15 @@ const en = {
   languageOption_Chinese: "Chinese",
   languageOption_Korean: "Korean",
   languageOption_Auto: "Auto-detect",
+  // NLE editor
+  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",
+  dragToTrim: "Drag edges to trim · drag body to move",
+  dragToPosition: "Drag caption to reposition",
 };
 
 const translations = {
@@ -424,6 +447,15 @@ const translations = {
     languageOption_Chinese: "จีน",
     languageOption_Korean: "เกาหลี",
     languageOption_Auto: "ตรวจจับอัตโนมัติ",
+    // NLE editor
+    mediaBin: "คลิปทั้งหมด",
+    aiAssistant: "ผู้ช่วย AI",
+    aiReason: "AI ยังไม่ได้อธิบาย ลองสร้างใหม่ดูสิ",
+    aiTighten: "ตัดให้กระชับ",
+    aiEmphasize: "เน้นจุดเด่น",
+    aiRedoAll: "สร้างคลิปนี้ใหม่",
+    dragToTrim: "ลากขอบเพื่อ trim · ลากกลางเพื่อย้าย",
+    dragToPosition: "ลากข้อความเพื่อย้ายตำแหน่ง",
   },
   ja: {
     ...en,
@@ -582,6 +614,15 @@ const translations = {
     languageOption_Chinese: "中国語",
     languageOption_Korean: "韓国語",
     languageOption_Auto: "自動検出",
+    // NLE editor
+    mediaBin: "クリップ一覧",
+    aiAssistant: "AIアシスタント",
+    aiReason: "AIの説明はまだありません。再生成してみてください。",
+    aiTighten: "短くまとめる",
+    aiEmphasize: "ハイライトを強調",
+    aiRedoAll: "このクリップを再生成",
+    dragToTrim: "端をドラッグでトリム · 中央をドラッグで移動",
+    dragToPosition: "字幕をドラッグして移動",
   },
   zh: {
     ...en,
@@ -739,6 +780,15 @@ const translations = {
     languageOption_Chinese: "中文",
     languageOption_Korean: "韩语",
     languageOption_Auto: "自动检测",
+    // NLE editor
+    mediaBin: "片段列表",
+    aiAssistant: "AI 助手",
+    aiReason: "AI 还没解释，试试重新生成。",
+    aiTighten: "更紧凑",
+    aiEmphasize: "突出高潮",
+    aiRedoAll: "重新生成此片段",
+    dragToTrim: "拖动边缘修剪 · 拖动中央移动",
+    dragToPosition: "拖动字幕移动位置",
   },
   ko: {
     ...en,
@@ -897,6 +947,15 @@ const translations = {
     languageOption_Chinese: "중국어",
     languageOption_Korean: "한국어",
     languageOption_Auto: "자동 감지",
+    // NLE editor
+    mediaBin: "클립 목록",
+    aiAssistant: "AI 어시스턴트",
+    aiReason: "AI가 아직 설명하지 않았습니다. 다시 만들어 보세요.",
+    aiTighten: "더 타이트하게",
+    aiEmphasize: "하이라이트 강조",
+    aiRedoAll: "이 클립 다시 만들기",
+    dragToTrim: "끝을 드래그해 트림 · 가운데를 드래그해 이동",
+    dragToPosition: "자막을 드래그해 이동",
   },
 };
 
@@ -1083,9 +1142,11 @@ function App() {
       {view === "editor" && editorClipId && editorClip ? (
         <ClipEditorPage
           clip={editorClip}
+          clips={activeClips}
           job={job}
           t={t}
           onBack={closeEditor}
+          onSelectClip={openEditor}
           onPatch={patchClip}
           onDelete={(clip) => {
             patchClip(clip.id, { deleted: true });
@@ -1595,61 +1656,57 @@ function ClipCard({ clip, t, onOpenEditor, onPatch, onDelete, onApprove, onRegen
           <p className="subtitle-snippet">{clip.subtitle_text}</p>
         )}
 
-        {/* Action row */}
+        {/* Action row — primary CTA on top, icon group below */}
         <div className="clip-actions">
-          {/* Edit — primary style, full label */}
           <button
             className="btn btn-primary"
             type="button"
             title={t("openEditor")}
             onClick={() => onOpenEditor(clip)}
-            style={{ justifyContent: "center" }}
           >
             <PanelRightOpen size={14} />
             {t("openEditor")}
           </button>
 
-          {/* Approve toggle */}
-          <button
-            className={`btn btn-icon ${clip.approved ? "btn-success" : ""}`}
-            type="button"
-            title={clip.approved ? t("approved") : t("approve")}
-            onClick={() => onApprove(clip)}
-          >
-            <Check size={14} />
-          </button>
-
-          {/* Regenerate */}
-          <button
-            className="btn btn-icon"
-            type="button"
-            title={t("regenerate")}
-            onClick={() => onRegenerate(clip)}
-          >
-            <RefreshCcw size={14} />
-          </button>
-
-          {/* Delete */}
-          <button
-            className="btn btn-icon btn-danger"
-            type="button"
-            title={t("delete")}
-            onClick={() => onDelete(clip)}
-          >
-            <Trash2 size={14} />
-          </button>
+          <div className="clip-actions-icons">
+            <button
+              className={`btn btn-icon ${clip.approved ? "btn-success" : ""}`}
+              type="button"
+              title={clip.approved ? t("approved") : t("approve")}
+              onClick={() => onApprove(clip)}
+            >
+              <Check size={14} />
+            </button>
 
-          {/* Download */}
-          {clip.download_url && (
-            <a
+            <button
               className="btn btn-icon"
-              href={`${API_BASE}${clip.download_url}`}
-              title={t("download")}
-              style={{ borderColor: "var(--primary-dim)", background: "var(--primary-glow)", color: "var(--primary)" }}
+              type="button"
+              title={t("regenerate")}
+              onClick={() => onRegenerate(clip)}
             >
-              <Download size={14} />
-            </a>
-          )}
+              <RefreshCcw size={14} />
+            </button>
+
+            <button
+              className="btn btn-icon btn-danger"
+              type="button"
+              title={t("delete")}
+              onClick={() => onDelete(clip)}
+            >
+              <Trash2 size={14} />
+            </button>
+
+            {clip.download_url && (
+              <a
+                className="btn btn-icon"
+                href={`${API_BASE}${clip.download_url}`}
+                title={t("download")}
+                style={{ borderColor: "var(--primary-dim)", background: "var(--primary-glow)", color: "var(--primary)" }}
+              >
+                <Download size={14} />
+              </a>
+            )}
+          </div>
         </div>
       </div>
     </article>
@@ -1657,13 +1714,15 @@ function ClipCard({ clip, t, onOpenEditor, onPatch, onDelete, onApprove, onRegen
 }
 
 // ============================================================
-// Clip editor page — full page replacement
+// Clip editor page — NLE 4-panel layout (Premiere-style)
 // ============================================================
 function ClipEditorPage({
   clip,
+  clips,
   job,
   t,
   onBack,
+  onSelectClip,
   onPatch,
   onDelete,
   onApprove,
@@ -1671,47 +1730,84 @@ function ClipEditorPage({
   captionStyle,
   onCaptionStyleChange,
 }) {
+  const videoRef = useRef(null);
+  const [playhead, setPlayhead] = useState(clip.start_seconds);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [selectedCueIndex, setSelectedCueIndex] = useState(0);
+
   const duration = Math.max(1, clip.end_seconds - clip.start_seconds);
-  const cues = getSubtitleCues(clip, duration, captionStyle);
+  const cues = useMemo(
+    () => getSubtitleCues(clip, duration, captionStyle),
+    [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,
+    clip.end_seconds + 5,
+    ...(clips || []).map((c) => Number(c.end_seconds || 0)),
     ...(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
+
+  // Sync playhead with video element
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    function onTimeUpdate() {
+      setPlayhead(clip.start_seconds + video.currentTime);
+    }
+    function onPlay() {
+      setIsPlaying(true);
+    }
+    function onPause() {
+      setIsPlaying(false);
+    }
+    video.addEventListener("timeupdate", onTimeUpdate);
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    return () => {
+      video.removeEventListener("timeupdate", onTimeUpdate);
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+    };
+  }, [clip.id, clip.start_seconds]);
+
+  // Reset playhead when clip changes
+  useEffect(() => {
+    setPlayhead(clip.start_seconds);
+  }, [clip.id, clip.start_seconds]);
+
+  // Determine the active cue at the playhead
+  const playheadInClip = clamp(playhead - clip.start_seconds, 0, duration);
+  const activeCueAuto = cues.findIndex(
+    (cue) => playheadInClip >= cue.start_seconds && playheadInClip < cue.end_seconds
   );
+  const activeIndex =
+    selectedCueIndex >= 0 && selectedCueIndex < cues.length
+      ? selectedCueIndex
+      : Math.max(0, activeCueAuto);
+  const activeCueText = cues[activeIndex]?.text || clip.subtitle_text || clip.title || "";
 
   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));
+  function setStart(value) {
+    const start = clamp(Number(value), 0, Math.max(0, clip.end_seconds - 0.5));
     onPatch(clip.id, { start_seconds: roundTime(start) });
   }
-
-  function updateEnd(value) {
-    const end = clamp(Number(value), clip.start_seconds + 1, timelineDuration);
+  function setEnd(value) {
+    const end = clamp(Number(value), clip.start_seconds + 0.5, timelineDuration);
     onPatch(clip.id, { end_seconds: roundTime(end) });
   }
-
-  function moveClip(delta) {
-    const safeDelta = clamp(delta, -clip.start_seconds, timelineDuration - clip.end_seconds);
+  function setRange(start, end) {
     onPatch(clip.id, {
-      start_seconds: roundTime(clip.start_seconds + safeDelta),
-      end_seconds: roundTime(clip.end_seconds + safeDelta),
+      start_seconds: roundTime(start),
+      end_seconds: roundTime(end),
     });
   }
-
   function setClipLength(seconds) {
     onPatch(clip.id, {
       end_seconds: roundTime(
@@ -1720,9 +1816,22 @@ function ClipEditorPage({
     });
   }
 
+  function seekTo(seconds) {
+    const video = videoRef.current;
+    const target = clamp(seconds - clip.start_seconds, 0, duration);
+    if (video) video.currentTime = target;
+    setPlayhead(clip.start_seconds + target);
+  }
+
+  function togglePlay() {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) video.play();
+    else video.pause();
+  }
+
   return (
-    <div className="editor-shell">
-      {/* Sticky top bar */}
+    <div className="editor-shell nle">
       <div className="editor-topbar">
         <button className="ghost-button" type="button" onClick={onBack}>
           <ArrowLeft size={16} />
@@ -1732,8 +1841,8 @@ function ClipEditorPage({
         <div className="editor-topbar-info">
           <h2>{clip.title}</h2>
           <p>
-            {t("editorText")} &nbsp;&middot;&nbsp; {formatTime(clip.start_seconds)} –{" "}
-            {formatTime(clip.end_seconds)}
+            {formatTime(clip.start_seconds)} – {formatTime(clip.end_seconds)} &nbsp;·&nbsp;{" "}
+            {duration.toFixed(1)}s &nbsp;·&nbsp; {Math.round(clip.score)} {t("score")}
           </p>
         </div>
 
@@ -1759,411 +1868,646 @@ function ClipEditorPage({
         </div>
       </div>
 
-      {/* Two-column body */}
-      <div className="editor-body">
-        {/* Left: video + controls */}
-        <div className="editor-left">
-          {/* Video preview */}
-          <div className="editor-preview">
-            {clip.video_url ? (
-              <video controls src={`${API_BASE}${clip.video_url}`} />
-            ) : (
-              <Film size={40} />
-            )}
-            <CaptionPreview text={activeCue} settings={captionStyle} />
-          </div>
-
-          {/* Clip range section */}
-          <div className="section-panel">
-            <div className="panel-heading compact">
-              <div>
-                <h2>{t("clipRange")}</h2>
-                <p>
-                  {formatTime(clip.start_seconds)} – {formatTime(clip.end_seconds)} &nbsp;·&nbsp;{" "}
-                  {duration.toFixed(1)}s
-                </p>
-              </div>
-              <div className="panel-heading-icon">
-                <Scissors size={14} />
-              </div>
-            </div>
-
-            {/* Quick-trim toolbox */}
-            <div className="editor-toolbox">
-              <span className="editor-toolbox-label">{t("editorTools")}</span>
-              {[
-                [t("trimStartBack"), () => updateStart(clip.start_seconds - 0.5)],
-                [t("trimStartForward"), () => updateStart(clip.start_seconds + 0.5)],
-                [t("trimEndBack"), () => updateEnd(clip.end_seconds - 0.5)],
-                [t("trimEndForward"), () => updateEnd(clip.end_seconds + 0.5)],
-                [t("moveClipLeft"), () => moveClip(-1)],
-                [t("moveClipRight"), () => moveClip(1)],
-                [t("setClipLength30"), () => setClipLength(30)],
-                [t("setClipLength60"), () => setClipLength(60)],
-                [t("setClipLength90"), () => setClipLength(90)],
-              ].map(([label, handler]) => (
-                <button key={label} className="btn" type="button" onClick={handler}>
-                  {label}
-                </button>
-              ))}
-            </div>
+      <div className="editor-grid-nle">
+        <MediaBinPanel
+          clips={clips || []}
+          activeId={clip.id}
+          onSelect={onSelectClip}
+          t={t}
+        />
 
-            {/* Timeline visual */}
-            <div className="timeline-visual">
-              <div className="timeline-fill" />
-              <div
-                className="timeline-window"
-                style={{ left: `${rangeLeft}%`, width: `${rangeWidth}%` }}
-              />
-              {Array.from({ length: 9 }).map((_, index) => (
-                <span key={index} style={{ left: `${index * 12.5}%` }} />
-              ))}
-            </div>
+        <PreviewStage
+          clip={clip}
+          videoRef={videoRef}
+          captionStyle={captionStyle}
+          activeCueText={activeCueText}
+          isPlaying={isPlaying}
+          playhead={playhead}
+          onTogglePlay={togglePlay}
+          onSeekDelta={(delta) => seekTo(playhead + delta)}
+          onCaptionStyleChange={onCaptionStyleChange}
+          t={t}
+        />
 
-            {/* Range sliders */}
-            <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>
+        <AIAssistantPanel
+          clip={clip}
+          t={t}
+          onRegenerate={onRegenerate}
+          onTighten={() => setClipLength(30)}
+          onFitLength={(secs) => setClipLength(secs)}
+          onDelete={onDelete}
+        />
 
-            {/* Numeric inputs */}
-            <div className="timeline">
-              <NumberField
-                label={t("start")}
-                value={Number(clip.start_seconds).toFixed(1)}
-                onChange={updateStart}
-              />
-              <NumberField
-                label={t("end")}
-                value={Number(clip.end_seconds).toFixed(1)}
-                onChange={updateEnd}
-              />
-              <strong>{duration.toFixed(1)}s</strong>
-            </div>
-          </div>
+        <TimelineEditor
+          clip={clip}
+          cues={cues}
+          duration={duration}
+          timelineDuration={timelineDuration}
+          playhead={playhead}
+          selectedCueIndex={activeIndex}
+          onSelectCue={setSelectedCueIndex}
+          onSeek={seekTo}
+          onSetStart={setStart}
+          onSetEnd={setEnd}
+          onSetRange={setRange}
+          t={t}
+        />
 
-          {/* Timeline tracks */}
-          <TimelineTracks clip={clip} cues={cues} duration={timelineDuration} t={t} />
+        <EditorInspector
+          clip={clip}
+          metadataModel={metadataModel}
+          sourceKind={sourceKind}
+          captionStyle={captionStyle}
+          onCaptionStyleChange={onCaptionStyleChange}
+          cues={cues}
+          activeIndex={activeIndex}
+          onPatchCue={patchCue}
+          t={t}
+        />
+      </div>
+    </div>
+  );
+}
 
-          {/* Subtitle cue editor */}
-          <div className="section-panel">
-            <div className="panel-heading compact">
-              <div>
-                <h2>{t("subtitleCues")}</h2>
-                <p>{t("subtitleCueHelp")}</p>
-              </div>
-              <div className="panel-heading-icon">
-                <Captions size={14} />
+// ============================================================
+// Media Bin (left column)
+// ============================================================
+function MediaBinPanel({ clips, activeId, onSelect, t }) {
+  return (
+    <aside className="nle-panel nle-bin">
+      <div className="nle-panel-head">
+        <h3>
+          {t("mediaBin")} <span style={{ color: "var(--text-soft)", fontWeight: 500, marginLeft: 6 }}>· {clips.length}</span>
+        </h3>
+        <span className="nle-panel-icon">
+          <FolderOpen size={12} />
+        </span>
+      </div>
+      <div className="nle-panel-body">
+        <div className="nle-bin-list">
+          {clips.map((c) => (
+            <button
+              type="button"
+              key={c.id}
+              className={`nle-bin-item ${c.id === activeId ? "active" : ""}`}
+              onClick={() => onSelect && onSelect(c)}
+            >
+              <div className="nle-bin-thumb">
+                {c.video_url ? (
+                  <video src={`${API_BASE}${c.video_url}`} muted preload="metadata" />
+                ) : (
+                  <Film size={18} />
+                )}
               </div>
-            </div>
-            <div className="cue-list">
-              {cues.map((cue, index) => (
-                <div className="cue-row" key={`${cue.start_seconds}-${index}`}>
-                  <span>
-                    {formatTime(cue.start_seconds)} – {formatTime(cue.end_seconds)}
+              <div className="nle-bin-meta">
+                <span className="nle-bin-title">{c.title}</span>
+                <span className="nle-bin-sub">
+                  {formatTime(c.start_seconds)}–{formatTime(c.end_seconds)}
+                  <span className="nle-bin-score">
+                    <Gauge size={10} />
+                    {Math.round(c.score)}
                   </span>
-                  <textarea
-                    defaultValue={cue.text}
-                    rows={2}
-                    onBlur={(event) => {
-                      if (event.target.value !== cue.text) patchCue(index, event.target.value);
-                    }}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Right: inspector + caption style + mini transcript */}
-        <div className="editor-right">
-          {/* Inspector */}
-          <div className="section-panel">
-            <div className="panel-heading compact">
-              <div>
-                <h2>{t("inspector")}</h2>
-              </div>
-              <div className="panel-heading-icon">
-                <Sparkles size={14} />
-              </div>
-            </div>
-
-            <dl className="inspector-list">
-              <div>
-                <dt>{t("title")}</dt>
-                <dd>{clip.title}</dd>
+                  {c.approved && (
+                    <Check size={10} style={{ color: "var(--success)" }} />
+                  )}
+                </span>
               </div>
-              <div>
-                <dt>{t("reason")}</dt>
-                <dd>{clip.reason}</dd>
-              </div>
-              <div>
-                <dt>{t("score")}</dt>
-                <dd>{Math.round(clip.score)}</dd>
-              </div>
-              <div>
-                <dt>{t("status")}</dt>
-                <dd>{clip.approved ? t("approved") : t("notApproved")}</dd>
-              </div>
-              <div>
-                <dt>{t("model")}</dt>
-                <dd>{metadataModel}</dd>
-              </div>
-              <div>
-                <dt>{t("source")}</dt>
-                <dd>{t(`source_${sourceKind}`)}</dd>
-              </div>
-            </dl>
-
-            <div className="inspector-actions" style={{ marginTop: 12 }}>
-              <button
-                className={`btn-primary ${clip.approved ? "btn-success" : "btn-primary"}`}
-                style={{
-                  display: "inline-flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: 7,
-                  minHeight: 38,
-                  padding: "0 14px",
-                  border: "1px solid",
-                  borderRadius: "var(--radius-sm)",
-                  fontSize: "0.84rem",
-                  fontWeight: 600,
-                  cursor: "pointer",
-                  transition: "all 150ms ease",
-                  borderColor: clip.approved
-                    ? "rgba(52,211,153,0.35)"
-                    : "var(--primary-dim)",
-                  background: clip.approved ? "var(--success-soft)" : "var(--primary-glow)",
-                  color: clip.approved ? "var(--success)" : "var(--primary)",
-                }}
-                type="button"
-                onClick={() => onApprove(clip)}
-              >
-                <Check size={14} />
-                {clip.approved ? t("approved") : t("approve")}
-              </button>
+            </button>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}
 
-              <button
-                className="inspector-actions"
-                style={{
-                  display: "inline-flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: 7,
-                  minHeight: 38,
-                  padding: "0 14px",
-                  border: "1px solid var(--border)",
-                  borderRadius: "var(--radius-sm)",
-                  background: "var(--surface2)",
-                  color: "var(--text-muted)",
-                  fontSize: "0.84rem",
-                  fontWeight: 600,
-                  cursor: "pointer",
-                  transition: "all 150ms ease",
-                  width: "100%",
-                }}
-                type="button"
-                onClick={() => onRegenerate(clip)}
-              >
-                <RefreshCcw size={14} />
-                {t("regenerate")}
-              </button>
-
-              {clip.download_url && (
-                <a
-                  style={{
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: 7,
-                    minHeight: 38,
-                    padding: "0 14px",
-                    border: "1px solid var(--primary-dim)",
-                    borderRadius: "var(--radius-sm)",
-                    background: "var(--primary-glow)",
-                    color: "var(--primary)",
-                    fontSize: "0.84rem",
-                    fontWeight: 600,
-                    textDecoration: "none",
-                    transition: "all 150ms ease",
-                  }}
-                  href={`${API_BASE}${clip.download_url}`}
-                >
-                  <Download size={14} />
-                  {t("download")}
-                </a>
-              )}
-
-              <button
-                style={{
-                  display: "inline-flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: 7,
-                  minHeight: 38,
-                  padding: "0 14px",
-                  border: "1px solid rgba(248,113,113,0.3)",
-                  borderRadius: "var(--radius-sm)",
-                  background: "var(--danger-soft)",
-                  color: "var(--danger)",
-                  fontSize: "0.84rem",
-                  fontWeight: 600,
-                  cursor: "pointer",
-                  transition: "all 150ms ease",
-                  width: "100%",
-                }}
-                type="button"
-                onClick={() => onDelete(clip)}
-              >
-                <Trash2 size={14} />
-                {t("delete")}
-              </button>
-            </div>
-          </div>
+// ============================================================
+// Preview Stage (center top) — video + draggable caption
+// ============================================================
+function PreviewStage({
+  clip,
+  videoRef,
+  captionStyle,
+  activeCueText,
+  isPlaying,
+  playhead,
+  onTogglePlay,
+  onSeekDelta,
+  onCaptionStyleChange,
+  t,
+}) {
+  const stageRef = useRef(null);
 
-          {/* Caption style panel */}
-          <div className="section-panel">
-            <div className="panel-heading compact">
-              <div>
-                <h2>{t("captionStyle")}</h2>
-              </div>
-              <div className="panel-heading-icon">
-                <Captions size={14} />
-              </div>
-            </div>
-            <CaptionStylePanel t={t} settings={captionStyle} onChange={onCaptionStyleChange} />
-          </div>
+  function handleCaptionDragStart(event) {
+    event.preventDefault();
+    const stage = stageRef.current;
+    if (!stage) return;
+    const rect = stage.getBoundingClientRect();
+    function onMove(ev) {
+      const x = clamp(((ev.clientX - rect.left) / rect.width) * 100, 4, 96);
+      const y = clamp(((ev.clientY - rect.top) / rect.height) * 100, 6, 94);
+      onCaptionStyleChange({ x: Math.round(x), y: Math.round(y) });
+    }
+    function onUp() {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    }
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }
 
-          {/* Mini transcript */}
-          <div className="section-panel">
-            <TranscriptMini transcript={job?.transcript || []} clip={clip} t={t} />
-          </div>
+  return (
+    <section className="nle-panel nle-preview">
+      <div className="nle-panel-head">
+        <h3>{t("preview")}</h3>
+        <span className="nle-panel-icon">
+          <Maximize2 size={12} />
+        </span>
+      </div>
+      <div className="preview-stage" ref={stageRef}>
+        <div className="preview-stage-canvas">
+          {clip.video_url ? (
+            <video ref={videoRef} src={`${API_BASE}${clip.video_url}`} />
+          ) : (
+            <Film size={56} style={{ color: "var(--text-soft)" }} />
+          )}
+          <CaptionOverlay
+            text={activeCueText}
+            settings={captionStyle}
+            onMouseDown={handleCaptionDragStart}
+          />
         </div>
       </div>
-    </div>
+      <div className="preview-toolbar">
+        <div className="preview-toolbar-left">
+          <button
+            className="btn btn-icon"
+            type="button"
+            onClick={() => onSeekDelta(-1)}
+            title={t("trimStartBack")}
+          >
+            <SkipBack size={14} />
+          </button>
+          <button
+            className="btn btn-icon btn-primary"
+            type="button"
+            onClick={onTogglePlay}
+            title={isPlaying ? t("preview") : t("preview")}
+          >
+            {isPlaying ? <Pause size={14} /> : <Play size={14} />}
+          </button>
+          <button
+            className="btn btn-icon"
+            type="button"
+            onClick={() => onSeekDelta(1)}
+            title={t("trimStartForward")}
+          >
+            <SkipForward size={14} />
+          </button>
+        </div>
+        <div className="preview-time">
+          <strong>{formatTime(playhead)}</strong> / {formatTime(clip.end_seconds)}
+        </div>
+        <div className="preview-toolbar-right">
+          <span style={{ fontSize: "0.7rem", color: "var(--text-muted)" }}>
+            <Move size={11} style={{ verticalAlign: "-2px", marginRight: 4 }} />
+            {t("dragToPosition")}
+          </span>
+        </div>
+      </div>
+    </section>
   );
 }
 
 // ============================================================
-// Caption preview (overlay on video)
+// Caption Overlay — draggable, positioned by captionStyle.x/y
 // ============================================================
-function CaptionPreview({ text, settings }) {
-  const words = text.split(/\s+/).filter(Boolean);
+function CaptionOverlay({ text, settings, onMouseDown }) {
+  const words = (text || "").split(/\s+/).filter(Boolean);
   const litCount = Math.max(1, Math.ceil(words.length * 0.45));
+  const x = typeof settings.x === "number" ? settings.x : 50;
+  const y =
+    typeof settings.y === "number"
+      ? settings.y
+      : 100 - (typeof settings.position === "number" ? settings.position : 18);
   const style = {
-    bottom: `${settings.position}%`,
+    left: `${x}%`,
+    top: `${y}%`,
     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"
+    <div
+      className={`caption-overlay ${settings.animation}`}
+      style={style}
+      onMouseDown={onMouseDown}
+    >
+      {settings.animation === "highlight" && words.length
         ? words.map((word, index) => (
             <span key={`${word}-${index}`} className={index < litCount ? "lit" : ""}>
               {word}
               {index < words.length - 1 ? " " : ""}
             </span>
           ))
-        : text}
+        : text || "—"}
     </div>
   );
 }
 
 // ============================================================
-// Timeline tracks
+// Timeline Editor (center bottom) — drag-to-trim V1 + ruler + tracks
 // ============================================================
-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);
+function TimelineEditor({
+  clip,
+  cues,
+  duration,
+  timelineDuration,
+  playhead,
+  selectedCueIndex,
+  onSelectCue,
+  onSeek,
+  onSetStart,
+  onSetEnd,
+  onSetRange,
+  t,
+}) {
+  const laneRef = useRef(null);
+
+  const ticks = useMemo(() => {
+    const result = [];
+    const step = Math.max(5, Math.ceil(timelineDuration / 12 / 5) * 5);
+    for (let s = 0; s <= timelineDuration; s += step) {
+      result.push(s);
+    }
+    return result;
+  }, [timelineDuration]);
+
+  const clipLeftPct = (clip.start_seconds / timelineDuration) * 100;
+  const clipWidthPct = ((clip.end_seconds - clip.start_seconds) / timelineDuration) * 100;
+  const playheadPct = clamp((playhead / timelineDuration) * 100, 0, 100);
+
+  function laneRect() {
+    const lane = laneRef.current;
+    return lane ? lane.getBoundingClientRect() : null;
+  }
+
+  function startEdgeDrag(edge) {
+    return (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const rect = laneRect();
+      if (!rect) return;
+      function onMove(ev) {
+        const ratio = clamp((ev.clientX - rect.left) / rect.width, 0, 1);
+        const seconds = roundTime(ratio * timelineDuration);
+        if (edge === "left") {
+          onSetStart(clamp(seconds, 0, clip.end_seconds - 0.5));
+        } else {
+          onSetEnd(clamp(seconds, clip.start_seconds + 0.5, timelineDuration));
+        }
+      }
+      function onUp() {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      }
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    };
+  }
+
+  function startBodyDrag(event) {
+    event.preventDefault();
+    const rect = laneRect();
+    if (!rect) return;
+    const startX = event.clientX;
+    const initialStart = clip.start_seconds;
+    const initialEnd = clip.end_seconds;
+    const length = initialEnd - initialStart;
+    function onMove(ev) {
+      const dx = ev.clientX - startX;
+      const deltaSeconds = (dx / rect.width) * timelineDuration;
+      const newStart = clamp(initialStart + deltaSeconds, 0, timelineDuration - length);
+      onSetRange(newStart, newStart + length);
+    }
+    function onUp() {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    }
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }
+
+  function handleRulerClick(event) {
+    const rect = laneRect();
+    if (!rect) return;
+    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+    onSeek(ratio * timelineDuration);
+  }
 
   return (
-    <div className="section-panel">
-      <div className="panel-heading compact">
-        <div>
-          <h2>{t("timelineTracks")}</h2>
-          <p>
-            {formatTime(clip.start_seconds)} – {formatTime(clip.end_seconds)}
-          </p>
-        </div>
-        <div className="panel-heading-icon">
-          <Film size={14} />
-        </div>
+    <section className="nle-panel nle-timeline">
+      <div className="nle-panel-head">
+        <h3>{t("timelineTracks")}</h3>
+        <span className="nle-panel-icon">
+          <Layers size={12} />
+        </span>
+      </div>
+      <div className="timeline-toolbar">
+        <span>
+          <Scissors size={11} style={{ verticalAlign: "-2px", marginRight: 4 }} />
+          {t("dragToTrim")}
+        </span>
       </div>
-      <div className="track-stack">
-        <TrackRow label={t("videoTrack")}>
+      <div className="timeline-area">
+        <div
+          className="timeline-ruler"
+          onClick={handleRulerClick}
+          style={{ cursor: "pointer" }}
+        >
+          {ticks.map((tick) => {
+            const left = (tick / timelineDuration) * 100;
+            const isMajor = tick % 30 === 0;
+            return (
+              <React.Fragment key={tick}>
+                <span
+                  className={`timeline-tick ${isMajor ? "major" : ""}`}
+                  style={{ left: `${left}%` }}
+                />
+                {isMajor && (
+                  <span
+                    className="timeline-tick-label"
+                    style={{ left: `${left}%` }}
+                  >
+                    {formatTime(tick)}
+                  </span>
+                )}
+              </React.Fragment>
+            );
+          })}
           <div
-            className="track-clip video"
-            style={{ left: `${clipLeft}%`, width: `${clipWidth}%` }}
-          >
-            {clip.title}
+            className="timeline-playhead"
+            style={{ left: `${playheadPct}%` }}
+          />
+        </div>
+        <div className="timeline-stack">
+          <div className="timeline-track">
+            <div className="timeline-track-label">V1</div>
+            <div className="timeline-track-lane video" ref={laneRef}>
+              <div
+                className="timeline-clip"
+                style={{
+                  left: `${clipLeftPct}%`,
+                  width: `${clipWidthPct}%`,
+                }}
+                onMouseDown={startBodyDrag}
+                title={clip.title}
+              >
+                <span
+                  className="timeline-handle left"
+                  onMouseDown={startEdgeDrag("left")}
+                />
+                {clip.title}
+                <span
+                  className="timeline-handle right"
+                  onMouseDown={startEdgeDrag("right")}
+                />
+              </div>
+              <div
+                className="timeline-playhead"
+                style={{ left: `${playheadPct}%` }}
+              />
+            </div>
           </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 className="timeline-track">
+            <div className="timeline-track-label">T1</div>
+            <div className="timeline-track-lane">
+              {cues.map((cue, index) => {
+                const cueLeft =
+                  ((clip.start_seconds + cue.start_seconds) / timelineDuration) * 100;
+                const cueWidth =
+                  ((cue.end_seconds - cue.start_seconds) / timelineDuration) * 100;
+                return (
+                  <div
+                    key={`cue-${index}`}
+                    className={`timeline-caption-block ${
+                      index === selectedCueIndex ? "selected" : ""
+                    }`}
+                    style={{
+                      left: `${clamp(cueLeft, 0, 100)}%`,
+                      width: `${clamp(cueWidth, 1.4, 100 - cueLeft)}%`,
+                    }}
+                    onClick={() => onSelectCue(index)}
+                    title={cue.text}
+                  >
+                    {cue.text}
+                  </div>
+                );
+              })}
+              <div
+                className="timeline-playhead"
+                style={{ left: `${playheadPct}%` }}
+              />
             </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 className="timeline-track">
+            <div className="timeline-track-label">A1</div>
+            <div className="timeline-track-lane audio">
+              <div className="timeline-waveform">
+                {Array.from({ length: 60 }).map((_, index) => (
+                  <span
+                    key={index}
+                    style={{
+                      height: `${30 + ((index * 19 + clip.id.length * 7) % 60)}%`,
+                    }}
+                  />
+                ))}
+              </div>
+              <div
+                className="timeline-playhead"
+                style={{ left: `${playheadPct}%` }}
+              />
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
   );
 }
 
-function TrackRow({ label, children }) {
+// ============================================================
+// AI Assistant Panel (right top)
+// ============================================================
+function AIAssistantPanel({ clip, t, onRegenerate, onTighten, onFitLength, onDelete }) {
   return (
-    <div className="track-row">
-      <span>{label}</span>
-      <div className="track-lane">{children}</div>
-    </div>
+    <aside className="nle-panel nle-ai">
+      <div className="nle-panel-head">
+        <h3>{t("aiAssistant")}</h3>
+        <span className="nle-panel-icon">
+          <Sparkles size={12} />
+        </span>
+      </div>
+      <div className="nle-panel-body">
+        <p className="ai-reason">{clip.reason || t("aiReason")}</p>
+        <div className="ai-actions">
+          <button
+            type="button"
+            className="ai-action"
+            onClick={() => onRegenerate(clip)}
+          >
+            <span className="ai-action-icon">
+              <RefreshCcw size={14} />
+            </span>
+            <span className="ai-action-text">
+              <strong>{t("aiRedoAll")}</strong>
+              <small>{t("regenerate")}</small>
+            </span>
+          </button>
+          <button type="button" className="ai-action" onClick={onTighten}>
+            <span className="ai-action-icon">
+              <Scissors size={14} />
+            </span>
+            <span className="ai-action-text">
+              <strong>{t("aiTighten")}</strong>
+              <small>30s</small>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="ai-action"
+            onClick={() => onFitLength(60)}
+          >
+            <span className="ai-action-icon">
+              <Zap size={14} />
+            </span>
+            <span className="ai-action-text">
+              <strong>{t("aiEmphasize")}</strong>
+              <small>60s</small>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="ai-action"
+            onClick={() => onDelete(clip)}
+          >
+            <span
+              className="ai-action-icon"
+              style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
+            >
+              <Trash2 size={14} />
+            </span>
+            <span className="ai-action-text">
+              <strong>{t("delete")}</strong>
+              <small>—</small>
+            </span>
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+// ============================================================
+// Editor Inspector (right bottom) — metadata + caption + active cue
+// ============================================================
+function EditorInspector({
+  clip,
+  metadataModel,
+  sourceKind,
+  captionStyle,
+  onCaptionStyleChange,
+  cues,
+  activeIndex,
+  onPatchCue,
+  t,
+}) {
+  return (
+    <aside className="nle-panel nle-inspector">
+      <div className="nle-panel-head">
+        <h3>{t("inspector")}</h3>
+        <span className="nle-panel-icon">
+          <SlidersHorizontal size={12} />
+        </span>
+      </div>
+      <div className="nle-panel-body">
+        <div className="inspector-stack">
+          <section>
+            <h4>{t("inspector")}</h4>
+            <dl className="inspector-meta">
+              <div>
+                <dt>{t("score")}</dt>
+                <dd className="score-value">{Math.round(clip.score)}</dd>
+              </div>
+              <div>
+                <dt>{t("status")}</dt>
+                <dd>{clip.approved ? t("approved") : t("notApproved")}</dd>
+              </div>
+              <div>
+                <dt>{t("source")}</dt>
+                <dd>{t(`source_${sourceKind}`)}</dd>
+              </div>
+              <div>
+                <dt>{t("model")}</dt>
+                <dd style={{ fontSize: "0.74rem" }}>{metadataModel}</dd>
+              </div>
+            </dl>
+          </section>
+
+          <section>
+            <h4>
+              <Type size={11} style={{ verticalAlign: "-2px", marginRight: 5 }} />
+              {t("subtitleCues")}
+            </h4>
+            {cues.length > 0 && (
+              <textarea
+                key={`cue-${clip.id}-${activeIndex}`}
+                rows={3}
+                defaultValue={cues[activeIndex]?.text || ""}
+                onBlur={(event) => {
+                  if (event.target.value !== cues[activeIndex]?.text) {
+                    onPatchCue(activeIndex, event.target.value);
+                  }
+                }}
+                style={{
+                  width: "100%",
+                  minHeight: 70,
+                  padding: 10,
+                  borderRadius: "var(--radius-sm)",
+                  border: "1px solid var(--border)",
+                  background: "var(--surface2)",
+                  color: "var(--text)",
+                  fontFamily: "inherit",
+                  fontSize: "0.84rem",
+                  resize: "vertical",
+                }}
+              />
+            )}
+            <p
+              style={{
+                margin: "8px 0 0",
+                fontSize: "0.72rem",
+                color: "var(--text-muted)",
+              }}
+            >
+              {t("subtitleCueHelp")}
+            </p>
+          </section>
+
+          <section>
+            <h4>
+              <Captions size={11} style={{ verticalAlign: "-2px", marginRight: 5 }} />
+              {t("captionStyle")}
+            </h4>
+            <CaptionStylePanel
+              t={t}
+              settings={captionStyle}
+              onChange={onCaptionStyleChange}
+            />
+          </section>
+        </div>
+      </div>
+    </aside>
   );
 }
 

frontend/src/styles.css

@@ -899,8 +899,8 @@ textarea:focus,
    ============================================================ */
 .clip-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
   align-items: start;
 }
 
@@ -1020,12 +1020,29 @@ textarea:focus,
   min-height: 46px;
 }
 
-/* Clip action row */
+/* Clip action row — primary CTA full-width on top, icon row below */
 .clip-actions {
   display: grid;
-  grid-template-columns: 1fr auto auto auto auto;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+  align-items: stretch;
+}
+
+.clip-actions > .btn-primary {
+  width: 100%;
+  justify-content: center;
+}
+
+.clip-actions-icons {
+  display: flex;
+  flex-wrap: wrap;
   gap: 6px;
-  align-items: center;
+}
+
+.clip-actions-icons > .btn {
+  flex: 1 1 auto;
+  min-width: 40px;
+  justify-content: center;
 }
 
 /* ============================================================
@@ -1107,6 +1124,744 @@ textarea:focus,
   top: 132px;
 }
 
+/* ============================================================
+   NLE 4-panel editor (Premiere-style)
+   ============================================================ */
+.editor-shell.nle {
+  height: calc(100vh - 72px);
+  min-height: calc(100vh - 72px);
+  overflow: hidden;
+}
+
+.editor-grid-nle {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr) 340px;
+  grid-template-rows: minmax(0, 1fr) minmax(220px, 38%);
+  grid-template-areas:
+    "bin    preview  ai"
+    "bin    timeline inspector";
+  gap: 1px;
+  background: var(--border);
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.nle-panel {
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.nle-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface2);
+  flex: 0 0 auto;
+}
+
+.nle-panel-head h3 {
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.nle-panel-head .nle-panel-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+}
+
+.nle-panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+/* Media bin (left column) */
+.nle-bin {
+  grid-area: bin;
+  border-right: 1px solid var(--border);
+}
+
+.nle-bin-list {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 6px;
+}
+
+.nle-bin-item {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 10px;
+  padding: 8px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  background: var(--surface);
+  cursor: pointer;
+  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+}
+
+.nle-bin-item:hover {
+  background: var(--surface2);
+  border-color: var(--border);
+  transform: translateX(2px);
+}
+
+.nle-bin-item.active {
+  background: var(--primary-glow);
+  border-color: var(--primary-dim);
+  box-shadow: var(--shadow-glow);
+}
+
+.nle-bin-thumb {
+  width: 48px;
+  height: 64px;
+  border-radius: 4px;
+  background: #050810;
+  display: grid;
+  place-items: center;
+  color: var(--text-soft);
+  overflow: hidden;
+  position: relative;
+}
+
+.nle-bin-thumb video,
+.nle-bin-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.nle-bin-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.nle-bin-title {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nle-bin-sub {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.nle-bin-sub .nle-bin-score {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 0.66rem;
+}
+
+/* Preview stage (center top) */
+.nle-preview {
+  grid-area: preview;
+  border-bottom: 1px solid var(--border);
+}
+
+.preview-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  background: #04060c;
+  overflow: hidden;
+}
+
+.preview-stage-canvas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.preview-stage video {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.caption-overlay {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1.15;
+  text-align: center;
+  white-space: pre-wrap;
+  cursor: grab;
+  user-select: none;
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: 1px dashed transparent;
+  transition: border-color 140ms ease, background 140ms ease;
+  max-width: 80%;
+}
+
+.caption-overlay:hover {
+  border-color: var(--primary-ring);
+  background: rgba(129, 140, 248, 0.06);
+}
+
+.caption-overlay:active,
+.caption-overlay.dragging {
+  cursor: grabbing;
+  border-color: var(--primary);
+  background: rgba(129, 140, 248, 0.14);
+}
+
+.caption-overlay .lit {
+  color: var(--accent);
+}
+
+.caption-overlay.pop {
+  animation: caption-pop 900ms ease-in-out infinite alternate;
+}
+
+.caption-overlay.bounce {
+  animation: caption-bounce 760ms ease-in-out infinite alternate;
+}
+
+.preview-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  background: var(--surface2);
+  border-top: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+
+.preview-toolbar-left,
+.preview-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.preview-time {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
+}
+
+.preview-time strong {
+  color: var(--text);
+  font-weight: 700;
+}
+
+/* Timeline editor (center bottom) */
+.nle-timeline {
+  grid-area: timeline;
+}
+
+.timeline-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+  background: var(--surface);
+  font-size: 0.74rem;
+  color: var(--text-muted);
+}
+
+.timeline-toolbar .timeline-zoom {
+  margin-left: auto;
+  display: inline-flex;
+  gap: 4px;
+}
+
+.timeline-zoom button {
+  width: 24px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  background: var(--surface2);
+  color: var(--text-muted);
+  border-radius: 4px;
+  font-size: 0.72rem;
+  cursor: pointer;
+}
+
+.timeline-zoom button:hover {
+  background: var(--surface);
+  color: var(--text);
+}
+
+.timeline-area {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.timeline-ruler {
+  position: relative;
+  height: 22px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface2);
+  cursor: pointer;
+  flex: 0 0 auto;
+  overflow: hidden;
+}
+
+.timeline-tick {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--border);
+}
+
+.timeline-tick.major {
+  background: var(--border-strong);
+}
+
+.timeline-tick-label {
+  position: absolute;
+  top: 4px;
+  font-size: 0.62rem;
+  color: var(--text-muted);
+  font-family: ui-monospace, monospace;
+  pointer-events: none;
+  transform: translateX(2px);
+}
+
+.timeline-stack {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.timeline-track {
+  position: relative;
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+
+.timeline-track-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  border-right: 1px solid var(--border);
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  user-select: none;
+}
+
+.timeline-track-lane {
+  position: relative;
+  background: var(--bg);
+  height: 56px;
+  overflow: hidden;
+}
+
+.timeline-track-lane.video {
+  height: 64px;
+}
+
+.timeline-track-lane.audio {
+  height: 48px;
+  background: linear-gradient(180deg, var(--bg), var(--surface2));
+}
+
+.timeline-clip {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  border-radius: 6px;
+  border: 1px solid var(--primary-dim);
+  background: linear-gradient(180deg, rgba(129, 140, 248, 0.32), rgba(129, 140, 248, 0.18));
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  padding: 0 28px;
+  font-size: 0.74rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: grab;
+  user-select: none;
+  transition: filter 140ms ease;
+}
+
+.timeline-clip:hover {
+  filter: brightness(1.12);
+}
+
+.timeline-clip.dragging {
+  cursor: grabbing;
+  filter: brightness(1.2);
+  box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
+}
+
+.timeline-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  background: var(--primary);
+  cursor: ew-resize;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  transition: opacity 140ms ease, background 140ms ease;
+}
+
+.timeline-handle::before {
+  content: "";
+  width: 2px;
+  height: 14px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 1px;
+}
+
+.timeline-handle:hover,
+.timeline-handle.dragging {
+  opacity: 1;
+  background: var(--accent);
+}
+
+.timeline-handle.left {
+  left: 0;
+  border-radius: 6px 0 0 6px;
+}
+
+.timeline-handle.right {
+  right: 0;
+  border-radius: 0 6px 6px 0;
+}
+
+.timeline-caption-block {
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  border-radius: 4px;
+  background: rgba(245, 158, 11, 0.22);
+  border: 1px solid rgba(245, 158, 11, 0.55);
+  color: var(--accent);
+  font-size: 0.68rem;
+  font-weight: 600;
+  padding: 0 6px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.timeline-caption-block:hover {
+  background: rgba(245, 158, 11, 0.35);
+}
+
+.timeline-caption-block.selected {
+  background: var(--accent);
+  color: #1a1300;
+  border-color: var(--accent);
+}
+
+.timeline-waveform {
+  position: absolute;
+  inset: 4px 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+}
+
+.timeline-waveform span {
+  flex: 1 1 0;
+  background: var(--text-muted);
+  opacity: 0.55;
+  border-radius: 1px;
+  min-width: 2px;
+}
+
+.timeline-playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--danger);
+  pointer-events: none;
+  z-index: 5;
+  box-shadow: 0 0 8px rgba(248, 113, 113, 0.65);
+}
+
+.timeline-playhead::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -5px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 8px solid var(--danger);
+}
+
+/* AI Assistant (right top) */
+.nle-ai {
+  grid-area: ai;
+  border-left: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.ai-reason {
+  margin: 0;
+  padding: 14px 16px;
+  font-size: 0.86rem;
+  color: var(--text);
+  line-height: 1.55;
+  border-bottom: 1px solid var(--border);
+  background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), transparent);
+}
+
+.ai-reason::before {
+  content: "";
+  display: inline-block;
+  width: 4px;
+  height: 14px;
+  background: var(--primary);
+  border-radius: 2px;
+  margin-right: 10px;
+  vertical-align: -2px;
+}
+
+.ai-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+}
+
+.ai-action {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--surface2);
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
+}
+
+.ai-action:hover {
+  background: var(--surface);
+  border-color: var(--primary-dim);
+  transform: translateX(2px);
+}
+
+.ai-action:active {
+  transform: translateX(2px) scale(0.98);
+}
+
+.ai-action-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--primary-glow);
+  color: var(--primary);
+  flex: 0 0 auto;
+}
+
+.ai-action-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ai-action-text strong {
+  font-size: 0.84rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.ai-action-text small {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+/* Inspector (right bottom) */
+.nle-inspector {
+  grid-area: inspector;
+  border-left: 1px solid var(--border);
+}
+
+.inspector-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.inspector-stack > section {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.inspector-stack > section:last-child {
+  border-bottom: none;
+}
+
+.inspector-stack h4 {
+  margin: 0 0 10px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.inspector-meta {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px 16px;
+  margin: 0;
+}
+
+.inspector-meta dt {
+  font-size: 0.66rem;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.inspector-meta dd {
+  margin: 2px 0 0;
+  font-size: 0.84rem;
+  color: var(--text);
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.inspector-meta dd.score-value {
+  color: var(--accent);
+  font-size: 1.1rem;
+}
+
+/* NLE responsive collapse */
+@media (max-width: 1280px) {
+  .editor-grid-nle {
+    grid-template-columns: 200px minmax(0, 1fr) 300px;
+  }
+}
+
+@media (max-width: 1080px) {
+  .editor-shell.nle {
+    height: auto;
+    min-height: calc(100vh - 72px);
+    overflow: visible;
+  }
+
+  .editor-grid-nle {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto auto auto auto;
+    grid-template-areas:
+      "preview"
+      "timeline"
+      "ai"
+      "inspector"
+      "bin";
+    overflow: visible;
+  }
+
+  .nle-panel {
+    overflow: visible;
+  }
+
+  .nle-bin,
+  .nle-ai,
+  .nle-inspector {
+    border-left: none;
+    border-right: none;
+  }
+
+  .nle-preview {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .preview-stage {
+    min-height: 320px;
+  }
+
+  .timeline-area {
+    min-height: 240px;
+  }
+}
+
 /* ============================================================
    Editor preview
    ============================================================ */