diff --git a/src/clipper/cache_manager.py b/src/clipper/cache_manager.py
index e224ebe..b23b4b7 100644
--- a/src/clipper/cache_manager.py
+++ b/src/clipper/cache_manager.py
@@ -6,6 +6,7 @@
 import hashlib
 import sqlite3
 import subprocess
+import sys
 import threading
 import time
 from datetime import datetime, timedelta
@@ -253,6 +254,20 @@ def _build_clipper_state(self, video_id: str, url: str,
         cache_path_template = self.cache_dir / cache_filename
 
         clipper_paths = ClipperPaths()
+        # In frozen (PyInstaller) builds, point to bundled binaries by default
+        if getattr(sys, "frozen", False):
+            bin_dir = "./bin"
+            ext = ".exe" if sys.platform == "win32" else ""
+            clipper_paths.ffmpegPath = f"{bin_dir}/ffmpeg{ext}"
+            clipper_paths.ffprobePath = f"{bin_dir}/ffprobe{ext}"
+            clipper_paths.ffplayPath = f"{bin_dir}/ffplay{ext}"
+            clipper_paths.ytdlPath = f"{bin_dir}/yt-dlp{ext}"
+            # Normalize slashes for subprocess readability
+            clipper_paths.ffmpegPath = clipper_paths.ffmpegPath.replace("\\", "/")
+            clipper_paths.ffprobePath = clipper_paths.ffprobePath.replace("\\", "/")
+            clipper_paths.ffplayPath = clipper_paths.ffplayPath.replace("\\", "/")
+            clipper_paths.ytdlPath = clipper_paths.ytdlPath.replace("\\", "/")
+
         if ytdl_location:
             clipper_paths.ytdlPath = ytdl_location
             logger.info(f"Using custom yt-dlp location: {ytdl_location}")
diff --git a/src/clipper/clip_maker.py b/src/clipper/clip_maker.py
index 328c480..91504ab 100644
--- a/src/clipper/clip_maker.py
+++ b/src/clipper/clip_maker.py
@@ -1468,37 +1468,37 @@ def getDefaultEncodeSettings(videobr: int) -> DictStrAny:
         }
     elif videobr <= 4000:
         encodeSettings = {
-            "crf": 24,
+            "crf": 22,
             "autoTargetMaxBitrate": int(1.6 * videobr),
             "twoPass": False,
         }
     elif videobr <= 6000:
         encodeSettings = {
-            "crf": 26,
+            "crf": 24,
             "autoTargetMaxBitrate": int(1.4 * videobr),
             "twoPass": False,
         }
     elif videobr <= 10000:
         encodeSettings = {
-            "crf": 28,
+            "crf": 26,
             "autoTargetMaxBitrate": int(1.2 * videobr),
             "twoPass": False,
         }
     elif videobr <= 14000:
         encodeSettings = {
-            "crf": 30,
+            "crf": 26,
             "autoTargetMaxBitrate": int(1.1 * videobr),
             "twoPass": False,
         }
     elif videobr <= 18000:
         encodeSettings = {
-            "crf": 30,
+            "crf": 26,
             "autoTargetMaxBitrate": int(1.0 * videobr),
             "twoPass": False,
         }
     elif videobr <= 25000:
         encodeSettings = {
-            "crf": 32,
+            "crf": 30,
             "autoTargetMaxBitrate": int(0.9 * videobr),
             "twoPass": False,
         }
diff --git a/src/clipper/gui/engine.py b/src/clipper/gui/engine.py
index 8677763..2b2c374 100644
--- a/src/clipper/gui/engine.py
+++ b/src/clipper/gui/engine.py
@@ -49,8 +49,6 @@ def process_files(self, markup_path: Optional[str] = None, video_path: Optional[
             return {"status": "error", "message": "Either markup_path or markup_data must be provided"}
 
         try:
-            print(f"DEBUG: Starting file processing with CLI-identical logic and GUI settings...")
-
             # Validate inputs - either markup_path OR markup_data must be provided
             if markup_path:
                 markup_file = Path(markup_path)
@@ -64,13 +62,11 @@ def process_files(self, markup_path: Optional[str] = None, video_path: Optional[
 
             # Create a fresh clipper state for this processing session
             self.cs = clipper_types.ClipperState()
-            print("DEBUG: Created fresh ClipperState for processing")
 
             # Get comprehensive GUI settings
             from clipper.gui.settings_manager import SettingsManager
             settings_manager = SettingsManager()
             gui_settings = settings_manager.get_combined_settings()
-            print(f"DEBUG: Loaded GUI settings: {len(gui_settings)} settings")
 
             # Build minimal argv for required arguments only (no settings)
             simulated_argv = ["yt_clipper"]
@@ -171,8 +167,6 @@ def process_files(self, markup_path: Optional[str] = None, video_path: Optional[
                 ytc_settings.getInputVideo(self.cs)
                 ytc_settings.getGlobalSettings(self.cs)
 
-                print("DEBUG: Starting clip processing...")
-
                 # Process clips exactly like CLI
                 if not self.cs.settings.get("preview", False):
                     clip_maker.makeClips(self.cs)
diff --git a/src/clipper/ytc_logger.py b/src/clipper/ytc_logger.py
index 715a0cb..025e166 100644
--- a/src/clipper/ytc_logger.py
+++ b/src/clipper/ytc_logger.py
@@ -2,7 +2,7 @@
 import logging
 from pathlib import Path
 from types import TracebackType
-from typing import IO, Dict
+from typing import IO, Mapping
 
 import coloredlogs
 import verboselogs
@@ -63,15 +63,36 @@ def log(
         | BaseException = None,
         stack_info: bool = False,
         stacklevel: int = 1,
-        extra: Dict[str, object] | None = None,
+    extra: Mapping[str, object] | None = None,
     ) -> None:
         if not self.no_rich_logs:
-            level_name = logging.getLevelName(level)
-            color = self.console.get_style(f"logging.level.{level_name.lower()}")
-
-            msg = f"[{color}]{msg}"
-            if extra is None:
-                extra = {}
+            # Map numeric levels to known Rich theme style keys to avoid invalid style names
+            # that can occur with custom levels (e.g., "Level 34").
+            style_by_level = {
+                logging.DEBUG: "logging.level.debug",
+                verboselogs.VERBOSE: "logging.level.verbose",
+                logging.INFO: "logging.level.info",
+                # Some code paths use 'success' level via verboselogs
+                getattr(verboselogs, "SUCCESS", 25): "logging.level.success",
+                IMPORTANT: "logging.level.important",
+                NOTICE: "logging.level.notice",
+                HEADER: "logging.level.header",
+                REPORT: "logging.level.report",
+                logging.WARNING: "logging.level.warning",
+                logging.ERROR: "logging.level.error",
+                logging.CRITICAL: "logging.level.error",
+            }
+
+            style_key = style_by_level.get(level)
+            if style_key is None:
+                # Fall back to a best-effort mapping based on the level name
+                level_name = str(logging.getLevelName(level)).lower().replace(" ", "_")
+                candidate = f"logging.level.{level_name}"
+                style_key = candidate if candidate in THEME_COLORS_LOG_LEVELS else "logging.level.info"
+
+            # Wrap the message with the resolved style name; Rich will pick it from the theme
+            msg = f"[{style_key}]{msg}"
+            extra = {} if extra is None else dict(extra)
             extra["markup"] = True
 
         return super().log(
diff --git a/src/clipper/ytdl.py b/src/clipper/ytdl.py
index 962d99a..d0c35b1 100644
--- a/src/clipper/ytdl.py
+++ b/src/clipper/ytdl.py
@@ -2,6 +2,7 @@
 import shlex
 import subprocess
 import sys
+from pathlib import Path
 from typing import Dict, List, Tuple
 
 from clipper.clipper_types import ClipperPaths, ClipperState
@@ -44,7 +45,18 @@ def ytdl_bin_get_args_base(cs: ClipperState) -> List[str]:
     ytdl_args.extend(["--output", shlex.quote(f'{settings["downloadVideoPath"]}')])
 
     if getattr(sys, "frozen", False):
-        ytdl_args.extend(["--ffmpeg-location", shlex.quote(cp.ffmpegPath)])
+        # Only pass --ffmpeg-location if it points to an existing executable
+        ffmpeg_path = cp.ffmpegPath
+        try:
+            exists = Path(ffmpeg_path).is_file()
+        except Exception:
+            exists = False
+        if exists:
+            ytdl_args.extend(["--ffmpeg-location", shlex.quote(ffmpeg_path)])
+        else:
+            logger.debug(
+                f"Skipping --ffmpeg-location: path not found -> {ffmpeg_path!r}",
+            )
 
     cookies = settings["cookiefile"]
 
diff --git a/src/gui-frontend/src/components/ColorControls.vue b/src/gui-frontend/src/components/ColorControls.vue
new file mode 100644
index 0000000..bca5baa
--- /dev/null
+++ b/src/gui-frontend/src/components/ColorControls.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="color-controls">
+    <el-scrollbar height="100%">
+      <div class="color-controls-content">
+        <el-tabs v-model="activeTab" type="border-card">
+          <el-tab-pane label="Color Adjustments" name="basic">
+            <div class="control-group">
+              <div class="control-label">Brightness</div>
+              <el-slider v-model="brightness" :min="-0.5" :max="0.5" :step="0.01" @change="emitFilter" show-input input-size="small" />
+            </div>
+            <div class="control-group">
+              <div class="control-label">Contrast</div>
+              <el-slider v-model="contrast" :min="0" :max="3" :step="0.01" @change="emitFilter" show-input input-size="small" />
+            </div>
+            <div class="control-group">
+              <div class="control-label">Saturation</div>
+              <el-slider v-model="saturation" :min="0" :max="3" :step="0.01" @change="emitFilter" show-input input-size="small" />
+            </div>
+            <div class="control-group">
+              <div class="control-label">Hue</div>
+              <el-slider v-model="hue" :min="-180" :max="180" :step="1" @change="emitFilter" show-input input-size="small" />
+            </div>
+            <div class="control-group">
+              <div class="control-label">Gamma</div>
+              <el-slider v-model="gamma" :min="0.1" :max="3" :step="0.01" @change="emitFilter" show-input input-size="small" />
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="Advanced (Lift/Gamma/Gain)" name="advanced">
+            <LiftGammaGainWheels @advanced-filter-changed="handleAdvancedFilterChanged" />
+          </el-tab-pane>
+        </el-tabs>
+
+        <div class="filter-output-card">
+          <div class="filter-card-header">
+            <h5>Generated Filter</h5>
+            <div class="filter-header-controls">
+              <el-checkbox v-model="previewEnabledLocal" @change="$emit('toggle-preview', previewEnabledLocal)" size="small">Preview</el-checkbox>
+            </div>
+          </div>
+          <div class="filter-display">
+            <el-input v-model="generatedFilter" type="textarea" :rows="2" readonly placeholder="Color grading filter will appear here" class="filter-textarea" />
+          </div>
+          <div class="filter-actions">
+            <div class="action-group primary-actions">
+              <el-button size="small" type="primary" @click="copyFilter" :disabled="!generatedFilter" plain>
+                <el-icon><DocumentCopy /></el-icon>
+                Copy Filter
+              </el-button>
+              <el-button size="small" @click="showPasteDialog" plain>
+                <el-icon><Document /></el-icon>
+                Paste Filter
+              </el-button>
+            </div>
+            <div class="action-group secondary-actions">
+              <el-button size="small" type="success" @click="$emit('copy-to-all-clips', generatedFilter)" :disabled="!generatedFilter || isMockMarkup" plain v-if="!isMockMarkup">
+                <el-icon><CopyDocument /></el-icon>
+                Copy to All Clips
+              </el-button>
+              <el-button size="small" type="warning" @click="reset" plain>
+                <el-icon><RefreshLeft /></el-icon>
+                Reset
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { DocumentCopy, Document, CopyDocument, RefreshLeft } from '@element-plus/icons-vue'
+import LiftGammaGainWheels from './LiftGammaGainWheels.vue'
+import { buildBasicFilter } from '@/utils/colorBasics'
+import { parseFilterString, joinFilters } from '@/utils/filterString'
+import { debounce } from '@/utils/debounce'
+
+
+interface Props {
+  isMockMarkup?: boolean
+  previewEnabled?: boolean
+  initialFilter?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isMockMarkup: false,
+  previewEnabled: true,
+  initialFilter: null
+})
+
+const emit = defineEmits<{
+  (e: 'filter-changed', filter: string): void
+  (e: 'toggle-preview', enabled: boolean): void
+  (e: 'copy-to-all-clips', filter: string): void
+}>()
+
+const activeTab = ref<'basic' | 'advanced'>('basic')
+const brightness = ref(0)
+const contrast = ref(1)
+const saturation = ref(1)
+const hue = ref(0)
+const gamma = ref(1)
+const advancedFilterState = ref('')
+const previewEnabledLocal = ref<boolean>(props.previewEnabled)
+
+const basicFilter = computed(() => buildBasicFilter({ brightness: brightness.value, contrast: contrast.value, saturation: saturation.value, hue: hue.value, gamma: gamma.value }))
+const advancedFilter = computed(() => advancedFilterState.value)
+const generatedFilter = computed(() => joinFilters(basicFilter.value, advancedFilter.value))
+
+const debouncedFilterEmit = debounce(() => emit('filter-changed', generatedFilter.value), 180)
+const emitFilter = () => { debouncedFilterEmit() }
+const debouncedAdvancedHandler = debounce((filter: string) => { advancedFilterState.value = filter; emitFilter() }, 120)
+const handleAdvancedFilterChanged = (filter: string) => { debouncedAdvancedHandler(filter) }
+
+const reset = () => {
+  brightness.value = 0; contrast.value = 1; saturation.value = 1; hue.value = 0; gamma.value = 1; advancedFilterState.value = ''
+  emitFilter()
+}
+
+const copyFilter = async () => {
+  try { await navigator.clipboard.writeText(generatedFilter.value); ElMessage.success('Filter copied to clipboard') }
+  catch (e) { console.error('Failed to copy filter:', e); ElMessage.error('Failed to copy filter to clipboard') }
+}
+
+const showPasteDialog = async () => {
+  try {
+    const clipboardText = await navigator.clipboard.readText()
+    if (clipboardText.trim()) { pasteFilter(clipboardText.trim()) }
+    else { ElMessage.warning('Clipboard is empty') }
+  } catch (e) { ElMessage.error('Failed to access clipboard. Please check permissions.'); console.error('Clipboard access failed:', e) }
+}
+
+const pasteFilter = (text: string) => {
+  try { parseAndApplyFilter(text); emitFilter() }
+  catch (e) { ElMessage.error(`Failed to apply filter: ${String(e)}`) }
+}
+
+const parseAndApplyFilter = (filterString: string) => {
+  reset()
+  const parsed = parseFilterString(filterString)
+  brightness.value = parsed.brightness
+  contrast.value = parsed.contrast
+  saturation.value = parsed.saturation
+  hue.value = parsed.hue
+  gamma.value = parsed.gamma
+  if (parsed.advanced) advancedFilterState.value = parsed.advanced
+}
+
+watch(
+  () => props.initialFilter,
+  (f) => {
+    if (f != null) {
+      parseAndApplyFilter(f)
+      emitFilter()
+    }
+  },
+  { immediate: true }
+)
+
+defineExpose({ generatedFilter })
+
+const isMockMarkup = computed(() => props.isMockMarkup)
+</script>
+
+<style scoped>
+.color-controls { height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
+.control-group { margin-bottom: 16px; }
+.control-label { font-size: 13px; color: var(--el-text-color-regular); margin-bottom: 8px; font-weight: 500; }
+.filter-display { border-top: 1px solid var(--el-border-color); padding-top: 16px; }
+.filter-output-card { border: 1px solid var(--el-border-color); border-radius: 8px; padding: 16px; background: var(--el-bg-color); margin-top: 16px; }
+.filter-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.filter-card-header h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--el-text-color-primary); }
+.filter-header-controls { display: flex; align-items: center; gap: 8px; }
+.filter-textarea { margin-bottom: 16px; }
+.filter-textarea :deep(.el-textarea__inner) { font-family: monospace; font-size: 12px; line-height: 1.4; background: var(--el-fill-color-lighter); }
+.filter-actions { display: flex; flex-direction: column; gap: 12px; }
+.action-group { display: flex; gap: 8px; flex-wrap: wrap; }
+.primary-actions .el-button { flex: 1; min-width: 120px; }
+.secondary-actions .el-button { flex: 1; min-width: 100px; }
+</style>
diff --git a/src/gui-frontend/src/components/ColorGradingPanel.vue b/src/gui-frontend/src/components/ColorGradingPanel.vue
index bd2e862..2da672e 100644
--- a/src/gui-frontend/src/components/ColorGradingPanel.vue
+++ b/src/gui-frontend/src/components/ColorGradingPanel.vue
@@ -1,284 +1,37 @@
 <template>
   <div class="color-grading-panel">
     <div class="panel-content">
-  <div class="color-grading-content">
+      <div class="color-grading-content">
           <!-- Left Column: Preview + Timeline -->
-          <div class="preview-timeline-column">
-            <!-- Preview Controls -->
-            <div class="preview-section">
-            <div class="preview-header">
-              <h4>Preview</h4>
-              <div class="preview-header-right">
-                <div v-if="videoInfoDisplay" class="video-info">
-                  {{ videoInfoDisplay }}
-                </div>
-                <div class="preview-controls">
-                  <el-select
-                    v-model="previewResolution"
-                    size="small"
-                    style="width: 100px"
-                    @change="updatePreview"
-                  >
-                    <el-option label="10%" :value="0.1" />
-                    <el-option label="25%" :value="0.25" />
-                    <el-option label="50%" :value="0.5" />
-                    <el-option label="100%" :value="1.0" />
-                  </el-select>
-                  <el-button
-                    size="small"
-                    @click="updatePreview"
-                    :loading="isGeneratingPreview"
-                  >
-                    Refresh
-                  </el-button>
-                  <el-button
-                    v-if="!props.videoPath && canGenerateFromUrl"
-                    size="small"
-                    type="primary"
-                    :loading="isGeneratingPreview"
-                    @click="generatePreviewFromUrl"
-                  >
-                    Generate from VideoUrl
-                  </el-button>
-                </div>
-              </div>
-            </div>
-
-            <div class="preview-container">
-              <div v-if="!props.videoPath && canGenerateFromUrl && !previewImageUrl && !isGeneratingPreview" class="preview-hint">
-                <el-alert
-                  type="info"
-                  title="No local video selected. You can generate a preview using the VideoUrl from the markup."
-                  :closable="false"
-                  show-icon
-                />
-              </div>
-              <div v-else-if="isGeneratingPreview" class="preview-loading">
-                <el-icon class="is-loading" :size="24">
-                  <Loading />
-                </el-icon>
-                <p>Generating preview...</p>
-              </div>
-              <div v-else-if="previewError" class="preview-error">
-                <el-alert
-                  type="error"
-                  :title="previewError"
-                  show-icon
-                  :closable="false"
-                />
-              </div>
-              <div v-else-if="previewImageUrl" class="preview-image">
-                <img
-                  :src="previewImageUrl"
-                  alt="Color grading preview"
-                  @error="handleImageError"
-                />
-              </div>
-              <div v-else class="no-preview">
-                <el-empty description="Click refresh to generate preview" />
-              </div>
-            </div>
-          </div>
-
-          <!-- Timeline Scrubber -->
-          <div class="timeline-section" v-if="hasSomeTimeline">
-            <div class="timeline-controls">
-              <span class="time-display">{{ formatTime(previewTimestamp) }}</span>
-              <el-slider
-                v-model="previewTimestamp"
-                :min="effectiveTimestampRange.min"
-                :max="effectiveTimestampRange.max"
-                :step="0.1"
-                :show-tooltip="false"
-                @input="handleTimelineInput"
-                class="timeline-slider"
-              />
-              <span class="time-range">
-                  {{ formatTime(effectiveTimestampRange.start) }} - {{ formatTime(effectiveTimestampRange.end) }}
-                </span>
-              </div>
-          </div>
-          </div>
+          <ColorPreview
+            :selected-clip="props.selectedClip"
+            :video-path="props.videoPath"
+            :video-duration="props.videoDuration"
+            :video-info="props.videoInfo"
+            :markup-video-url="props.markupVideoUrl"
+            :filter="generatedFilter"
+            :preview-enabled="previewEnabled"
+          />
 
           <!-- Color Controls -->
-          <div class="color-controls">
-            <el-scrollbar height="100%">
-              <div class="color-controls-content">
-                <el-tabs v-model="activeTab" type="border-card">
-                  <el-tab-pane label="Color Adjustments" name="basic">
-                    <!-- Brightness -->
-                    <div class="control-group">
-                      <div class="control-label">Brightness</div>
-                      <el-slider
-                        v-model="brightness"
-                        :min="-0.5"
-                        :max="0.5"
-                        :step="0.01"
-                        @change="updateColorGrading"
-                        show-input
-                        input-size="small"
-                      />
-                    </div>
-
-                    <!-- Contrast -->
-                    <div class="control-group">
-                      <div class="control-label">Contrast</div>
-                      <el-slider
-                        v-model="contrast"
-                        :min="0"
-                        :max="3"
-                        :step="0.01"
-                        @change="updateColorGrading"
-                        show-input
-                        input-size="small"
-                      />
-                    </div>
-
-                    <!-- Saturation -->
-                    <div class="control-group">
-                      <div class="control-label">Saturation</div>
-                      <el-slider
-                        v-model="saturation"
-                        :min="0"
-                        :max="3"
-                        :step="0.01"
-                        @change="updateColorGrading"
-                        show-input
-                        input-size="small"
-                      />
-                    </div>
-
-                    <!-- Hue -->
-                    <div class="control-group">
-                      <div class="control-label">Hue</div>
-                      <el-slider
-                        v-model="hue"
-                        :min="-180"
-                        :max="180"
-                        :step="1"
-                        @change="updateColorGrading"
-                        show-input
-                        input-size="small"
-                      />
-                    </div>
-
-                    <!-- Gamma -->
-                    <div class="control-group">
-                      <div class="control-label">Gamma</div>
-                      <el-slider
-                        v-model="gamma"
-                        :min="0.1"
-                        :max="3"
-                        :step="0.01"
-                        @change="updateColorGrading"
-                        show-input
-                        input-size="small"
-                      />
-                    </div>
-                  </el-tab-pane>
-
-                  <el-tab-pane label="Advanced (Lift/Gamma/Gain)" name="advanced">
-                    <LiftGammaGainWheels @advanced-filter-changed="handleAdvancedFilterChanged" />
-                  </el-tab-pane>
-                </el-tabs>
-
-                <!-- Filter Output & Controls Card (always visible) -->
-                <div class="filter-output-card">
-                  <div class="filter-card-header">
-                    <h5>Generated Filter</h5>
-                    <div class="filter-header-controls">
-                      <el-checkbox
-                        v-model="previewEnabled"
-                        @change="updatePreview"
-                        size="small"
-                      >
-                        Preview
-                      </el-checkbox>
-                    </div>
-                  </div>
-
-                  <div class="filter-display">
-                    <el-input
-                      v-model="generatedFilter"
-                      type="textarea"
-                      :rows="2"
-                      readonly
-                      placeholder="Color grading filter will appear here"
-                      class="filter-textarea"
-                    />
-                  </div>
-
-                  <div class="filter-actions">
-                    <div class="action-group primary-actions">
-                      <el-button
-                        size="small"
-                        type="primary"
-                        @click="copyFilter"
-                        :disabled="!generatedFilter"
-                        plain
-                      >
-                        <el-icon><DocumentCopy /></el-icon>
-                        Copy Filter
-                      </el-button>
-                      <el-button
-                        size="small"
-                        @click="showPasteDialog"
-                        plain
-                      >
-                        <el-icon><Document /></el-icon>
-                        Paste Filter
-                      </el-button>
-                    </div>
-
-                    <div class="action-group secondary-actions">
-                      <el-button
-                        size="small"
-                        type="success"
-                        @click="copyToAllClips"
-                        :disabled="!generatedFilter || isMockMarkup"
-                        plain
-                        v-if="!isMockMarkup"
-                      >
-                        <el-icon><CopyDocument /></el-icon>
-                        Copy to All Clips
-                      </el-button>
-                      <el-button
-                        size="small"
-                        type="warning"
-                        @click="handleReset"
-                        plain
-                      >
-                        <el-icon><RefreshLeft /></el-icon>
-                        Reset
-                      </el-button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </el-scrollbar>
-          </div>
+          <ColorControls
+            :is-mock-markup="props.isMockMarkup"
+            :preview-enabled="previewEnabled"
+            :initial-filter="initialFilterForClip"
+            @filter-changed="onFilterChanged"
+            @toggle-preview="onTogglePreview"
+            @copy-to-all-clips="(f:string)=>emit('copy-to-all-clips', f)"
+          />
         </div>
       </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Loading, DocumentCopy, Document, CopyDocument, RefreshLeft } from '@element-plus/icons-vue'
+import { ref, computed } from 'vue'
 import type { ClipInfo, VideoInfo } from '@/types/api'
-import LiftGammaGainWheels from './LiftGammaGainWheels.vue'
-import { buildBasicFilter } from '@/utils/colorBasics'
-import { parseFilterString, joinFilters } from '@/utils/filterString'
-
-// Simple debounce function
-function debounce<T extends (...args: unknown[]) => unknown>(func: T, wait: number): T {
-  let timeout: ReturnType<typeof setTimeout>
-  return ((...args: Parameters<T>) => {
-    clearTimeout(timeout)
-    timeout = setTimeout(() => func(...args), wait)
-  }) as T
-}
+import ColorPreview from './ColorPreview.vue'
+import ColorControls from './ColorControls.vue'
 
 interface Props {
   selectedClip?: ClipInfo | null
@@ -310,478 +63,27 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 // State
-const activeTab = ref<'basic' | 'advanced'>('basic')
-const previewResolution = ref(0.5)
-const previewTimestamp = ref(0)
-const isGeneratingPreview = ref(false)
-const previewImageUrl = ref('')
-const previewError = ref('')
 const previewEnabled = ref(true)
-// Guard to suppress preview during re-init on video change
-const isInitializing = ref(false)
-// Guard to ignore stale preview responses
-let previewOpId = 0
-
-// Color parameters
-const brightness = ref(0)
-const contrast = ref(1)
-const saturation = ref(1)
-const hue = ref(0)
-const gamma = ref(1)
-
-// Advanced filter state provided by wheels component
-const advancedFilterState = ref('')
-const handleAdvancedFilterChanged = (filter: string) => {
-  advancedFilterState.value = filter
-  updateColorGrading()
-}
 
 // Computed properties
 // const hasVideo = computed(() => !!props.videoPath)
-const hasSomeTimeline = computed(() => !!props.selectedClip)
-const canGenerateFromUrl = computed(() => !!props.markupVideoUrl && !!props.selectedClip)
-
-// Get the effective timestamp range considering video duration limits
-const effectiveTimestampRange = computed(() => {
-  if (!props.selectedClip) return { min: 0, max: 60, start: 0, end: 60 }
-
-  const clip = props.selectedClip
-  const videoDuration = props.videoDuration
-
-  if (videoDuration && videoDuration > 0) {
-    // Constrain clip times to video duration
-    const effectiveStart = Math.min(clip.start, videoDuration - 0.1)
-    const effectiveEnd = Math.min(clip.end, videoDuration)
-
-    return {
-      min: Math.max(0, effectiveStart),
-      max: effectiveEnd,
-      start: effectiveStart,
-      end: effectiveEnd
-    }
-  }
-
-  // No video duration info - use clip times as-is
-  return {
-    min: clip.start,
-    max: clip.end,
-    start: clip.start,
-    end: clip.end
-  }
-})
-
-const basicFilter = computed(() =>
-  buildBasicFilter({
-    brightness: brightness.value,
-    contrast: contrast.value,
-    saturation: saturation.value,
-    hue: hue.value,
-    gamma: gamma.value,
-  })
-)
-
-const advancedFilter = computed(() => advancedFilterState.value)
-
-const generatedFilter = computed(() => joinFilters(basicFilter.value, advancedFilter.value))
-
-// Video information display
-const videoInfoDisplay = computed(() => {
-  if (!props.videoInfo) return null
-
-  const info = props.videoInfo
-  const parts = []
-
-  // Original resolution
-  if (info.width && info.height) {
-    parts.push(`${info.width}×${info.height}`)
-  }
-
-  // Preview resolution (if not 100%)
-  if (previewResolution.value !== 1.0 && info.width && info.height) {
-    const previewWidth = Math.round(info.width * previewResolution.value)
-    const previewHeight = Math.round(info.height * previewResolution.value)
-    parts.push(`Preview: ${previewWidth}×${previewHeight}`)
-  }
-
-  // Frame rate
-  if (info.frame_rate) {
-    const frameRateStr = formatFrameRate(info.frame_rate)
-    parts.push(frameRateStr)
-  }
-
-  return parts.length > 0 ? parts.join(' • ') : null
-})
-
-const formatFrameRate = (frameRate: string): string => {
-  try {
-    // Handle common frame rate formats
-    if (frameRate.includes('/')) {
-      // Fractional format like "30000/1001" or "24/1"
-      const [num, den] = frameRate.split('/').map(Number)
-      if (den === 1) {
-        return `${num}fps`
-      } else {
-        const fps = num / den
-        // Check for common NTSC rates
-        if (Math.abs(fps - 23.976) < 0.01) return '23.98fps'
-        if (Math.abs(fps - 29.970) < 0.01) return '29.97fps'
-        if (Math.abs(fps - 59.940) < 0.01) return '59.94fps'
-
-        // For other fractional rates, show with decimal
-        return fps % 1 === 0 ? `${fps}fps` : `${fps.toFixed(2)}fps`
-      }
-    } else {
-      // Simple decimal format
-      const fps = parseFloat(frameRate)
-      return fps % 1 === 0 ? `${fps}fps` : `${fps.toFixed(2)}fps`
-    }
-  } catch {
-    // If parsing fails, return as-is with fps suffix
-    return `${frameRate}fps`
-  }
-}
-
-// Methods
-const handleReset = () => {
-  resetToDefaults()
-  updateColorGrading()
-  updatePreview()
-}
-
-const loadClipColorGrading = () => {
-  if (!props.selectedClip) {
-    resetToDefaults()
-    return
-  }
-
-  // Get existing color grading filter for this clip
-  let existingFilter: string | undefined
-
-  // Use the provided method if available, otherwise fall back to clip data
-  if (props.getClipColorGrading) {
-    existingFilter = props.getClipColorGrading(props.selectedClip.number)
-  } else {
-    existingFilter = props.selectedClip.overrides?.colorGrading as string | undefined
-  }
-
-  if (existingFilter && existingFilter.trim()) {
-    // Parse the existing filter to populate controls (without triggering updates)
-    try {
-      parseFilterToControls(existingFilter)
-    } catch (error) {
-      console.error('Failed to parse existing color grading filter:', error)
-      resetToDefaults()
-    }
-  } else {
-    // No existing filter - reset to defaults
-    resetToDefaults()
-  }
-}
-
-const resetToDefaults = () => {
-  brightness.value = 0
-  contrast.value = 1
-  saturation.value = 1
-  hue.value = 0
-  gamma.value = 1
-  advancedFilterState.value = ''
-  // Don't call updateColorGrading() here to avoid unnecessary updates
-}
-
-// Debounced function for timeline scrubbing
-const debouncedUpdatePreview = debounce(() => {
-  updatePreview()
-}, 300) // 300ms delay
-
-const handleTimelineInput = (value: number) => {
-  previewTimestamp.value = value
-  debouncedUpdatePreview()
-}
-
-const initializeTimestamp = () => {
-  if (props.selectedClip) {
-    const clip = props.selectedClip
-    const videoDuration = props.videoDuration
-
-    // Check if timestamps are valid for the video duration
-    if (videoDuration && videoDuration > 0) {
-      if (clip.start >= videoDuration) {
-        previewTimestamp.value = Math.max(0, videoDuration - 1) // Go to near the end
-        previewError.value = `Clip start time (${Math.round(clip.start)}s) exceeds video duration (${Math.round(videoDuration)}s). Using fallback timestamp.`
-        return
-      }
-
-      if (clip.end > videoDuration) {
-        // Start is valid but end exceeds duration - use start time
-        previewTimestamp.value = clip.start
-        previewError.value = `Clip end time (${Math.round(clip.end)}s) exceeds video duration (${Math.round(videoDuration)}s). Using clip start time.`
-        return
-      }
-    }
-
-    // Normal case - timestamps are within bounds or no duration info
-    const clipDuration = clip.end - clip.start
-    previewTimestamp.value = clip.start + clipDuration / 2
-    previewError.value = '' // Clear any previous errors
-  }
-}
-
-const updateColorGrading = () => {
-  if (!props.selectedClip) return
-
-  const filter = generatedFilter.value
-  emit('color-grading-changed', props.selectedClip.number, filter)
-
-  // Auto-update preview with a small delay to debounce rapid changes
-  if (updateColorGrading.debounceTimer) {
-    clearTimeout(updateColorGrading.debounceTimer)
-  }
-  updateColorGrading.debounceTimer = setTimeout(() => {
-    updatePreview()
-  }, 500)
-}
-
-// Add debounce timer property to the function
-updateColorGrading.debounceTimer = null as number | null
-
-const updatePreview = async () => {
-  if (!hasSomeTimeline.value || !window.pywebview?.api) return
-  if (isInitializing.value) return
-
-  // Start a new preview operation
-  const opId = ++previewOpId
-  isGeneratingPreview.value = true
-  previewError.value = ''
-
-  try {
-    // Use filter only if preview is enabled
-    const filterToApply = previewEnabled.value ? generatedFilter.value || undefined : undefined
-
-    const videoSource = props.videoPath || tempVideoUrlRef.value
-    if (!videoSource) {
-      // No source to preview
-      isGeneratingPreview.value = false
-      return
-    }
-
-    const result = await window.pywebview.api.generate_frame_preview(
-      videoSource,
-      previewTimestamp.value,
-      filterToApply,
-      previewResolution.value
-    )
-
-    // Ignore if a newer operation started
-    if (opId !== previewOpId) return
-
-    if (result.status === 'success') {
-      // Create data URL from base64 image
-      if (result.base64_image && result.mime_type) {
-        previewImageUrl.value = `data:${result.mime_type};base64,${result.base64_image}`
-      } else {
-        previewImageUrl.value = ''
-      }
-    } else {
-      previewError.value = result.message || 'Failed to generate preview'
-    }
-  } catch (err) {
-    // Ignore errors from stale ops
-    if (opId !== previewOpId) return
-    previewError.value = `Preview generation error: ${String(err)}`
-    console.error('Preview generation failed:', err)
-  } finally {
-    // Only end loading state if this is the latest op
-    if (opId === previewOpId) {
-      isGeneratingPreview.value = false
-    }
-  }
-}
-
-const handleImageError = () => {
-  previewError.value = 'Failed to load preview image'
-}
-
-const copyFilter = async () => {
-  try {
-    await navigator.clipboard.writeText(generatedFilter.value)
-    ElMessage.success('Filter copied to clipboard')
-  } catch (e) {
-    console.error('Failed to copy filter:', e)
-    ElMessage.error('Failed to copy filter to clipboard')
-  }
-}
-
-const showPasteDialog = async () => {
-  try {
-    const clipboardText = await navigator.clipboard.readText()
-    if (clipboardText.trim()) {
-      pasteFilter(clipboardText.trim())
-    } else {
-      ElMessage.warning('Clipboard is empty')
-    }
-  } catch (e) {
-    ElMessage.error('Failed to access clipboard. Please check permissions.')
-    console.error('Clipboard access failed:', e)
-  }
-}
-
-const copyToAllClips = () => {
-  if (!generatedFilter.value || props.isMockMarkup) {
-    return
-  }
-
-  emit('copy-to-all-clips', generatedFilter.value)
-}
-
-const pasteFilter = async (filterText?: string) => {
-  let textToPaste = filterText
-
-  if (!textToPaste) {
-    try {
-      textToPaste = await navigator.clipboard.readText()
-    } catch {
-      ElMessage.error('Failed to access clipboard. Please check permissions.')
-      return
-    }
-  }
-
-  const trimmedText = textToPaste.trim()
-  if (!trimmedText) {
-    ElMessage.warning('No filter text to paste')
-    return
-  }
-
-  // Try to parse and apply the filter to the current clip
-  try {
-    parseAndApplyFilter(trimmedText)
-    updatePreview()
-  } catch (e) {
-    ElMessage.error(`Failed to apply filter: ${String(e)}`)
-  }
-}
-
-// Support: preview via VideoUrl when no local video
-const tempVideoUrlRef = ref<string | null>(null)
-const generatePreviewFromUrl = async () => {
-  if (!props.markupVideoUrl || !window.pywebview?.api) return
-  try {
-  const opId = ++previewOpId
-  isGeneratingPreview.value = true
-    previewError.value = ''
-    const res = await window.pywebview.api.get_direct_video_url(props.markupVideoUrl)
-  if (opId !== previewOpId) return
-  if (res.status === 'success' && res.url) {
-      tempVideoUrlRef.value = res.url as string
-      await updatePreview()
-    } else {
-      previewError.value = res.message || 'Failed to resolve VideoUrl via yt-dlp'
-    }
-  } catch (e) {
-  // Ignore if stale
-  if (/* c8 ignore next */ false) {}
-  previewError.value = `Failed to fetch direct video URL: ${e}`
-  } finally {
-  // Only clear loading if still current
-  isGeneratingPreview.value = false
-  }
-}
-
-
-const parseFilterToControls = (filterString: string) => {
-  resetToDefaults()
-  const parsed = parseFilterString(filterString)
-  brightness.value = parsed.brightness
-  contrast.value = parsed.contrast
-  saturation.value = parsed.saturation
-  hue.value = parsed.hue
-  gamma.value = parsed.gamma
-  if (parsed.advanced) advancedFilterState.value = parsed.advanced
-}
-
-const parseAndApplyFilter = (filterString: string) => {
-  parseFilterToControls(filterString)
-  updateColorGrading()
+// Keep a generated filter for passing to preview, but filter is owned by ColorControls
+const generatedFilter = ref('')
+const onFilterChanged = (f: string) => {
+  generatedFilter.value = f
+  if (props.selectedClip) emit('color-grading-changed', props.selectedClip.number, f)
 }
 
-const formatTime = (seconds: number): string => {
-  const minutes = Math.floor(seconds / 60)
-  const secs = seconds % 60
-  return `${minutes}:${secs.toFixed(1).padStart(4, '0')}`
+const onTogglePreview = (enabled: boolean) => {
+  previewEnabled.value = enabled
 }
 
-// (Removed separate watchers for selectedClip and videoPath; using consolidated watcher below)
-
-// Watch for video info changes
-watch(() => props.videoInfo, () => {
-  // Video info display will automatically update via computed property
-})
-
-// Watch for preview resolution changes to update video info display
-watch(() => previewResolution.value, () => {
-  // Video info display will automatically update via computed property
+// Provide the initial filter for the current clip to controls
+const initialFilterForClip = computed(() => {
+  if (!props.selectedClip) return ''
+  if (props.getClipColorGrading) return props.getClipColorGrading(props.selectedClip.number) || ''
+  return (props.selectedClip.overrides?.colorGrading as string) || ''
 })
-
-// Consolidated watcher to avoid duplicate preview generation when clip/video changes
-let initTimer: number | null = null
-watch(
-  () => ({
-    clipNumber: props.selectedClip?.number ?? null,
-    videoPath: props.videoPath ?? null,
-    duration: props.videoDuration ?? null
-  }),
-  async (curr, prev) => {
-    // If video path changed, reset UI state and wait for clip/duration to settle
-    if (prev && curr.videoPath !== prev.videoPath) {
-      isInitializing.value = true
-      // Cancel/ignore any in-flight preview operations
-      previewOpId++
-      // Clear controls to defaults; avoid emitting changes
-      resetToDefaults()
-      // Cancel any pending color-grading preview debounce
-      if (updateColorGrading.debounceTimer) {
-        clearTimeout(updateColorGrading.debounceTimer)
-        updateColorGrading.debounceTimer = null
-      }
-      // Cancel pending init timer
-      if (initTimer) {
-        clearTimeout(initTimer)
-        initTimer = null
-      }
-      previewImageUrl.value = ''
-      previewError.value = ''
-      previewTimestamp.value = 0
-      isGeneratingPreview.value = false
-      // Don't generate preview here; wait for next clip/duration update
-      return
-    }
-
-    // Only proceed when both video and clip exist
-  if (!hasSomeTimeline.value) {
-    // Cancel any in-flight preview and clear UI
-    previewOpId++
-    isGeneratingPreview.value = false
-    previewImageUrl.value = ''
-    previewError.value = ''
-    return
-  }
-
-    // Debounce to coalesce rapid duration/clip changes (e.g., mock markup init)
-    if (initTimer) {
-      clearTimeout(initTimer)
-    }
-    initTimer = window.setTimeout(async () => {
-      await nextTick()
-      loadClipColorGrading()
-      initializeTimestamp()
-      // End init and render once with settled state
-      isInitializing.value = false
-      updatePreview()
-    }, 100)
-  },
-  { immediate: true, deep: false }
-)
-
-// Remove separate watchers and rely on the consolidated watcher above
 </script>
 
 <style scoped>
@@ -853,188 +155,6 @@ watch(
   gap: 20px;
 }
 
-.preview-section {
-  border: 1px solid var(--el-border-color);
-  border-radius: 4px;
-  padding: 16px;
-}
-
-.preview-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.preview-header h4 {
-  margin: 0;
-}
-
-.preview-header-right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-}
-
-.video-info {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  font-family: monospace;
-  white-space: nowrap;
-}
-
-.preview-controls {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.preview-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--el-fill-color-lighter);
-  border-radius: 4px;
-  overflow: hidden;
-  height: 100%;
-}
-
-.preview-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-
-.preview-image {
-  display: contents;
-}
-
-.preview-image img {
-  max-width: 100%;
-  max-height: 100%;
-  height: auto;
-  width: auto;
-  object-fit: contain;
-  border-radius: 4px;
-}
-
-.timeline-section {
-  border: 1px solid var(--el-border-color);
-  border-radius: 4px;
-  padding: 16px;
-}
-
-.timeline-controls {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-}
-
-.time-display {
-  font-weight: 600;
-  min-width: 60px;
-  text-align: center;
-  font-family: monospace;
-}
-
-.timeline-slider {
-  flex: 1;
-}
-
-.time-range {
-  color: var(--el-text-color-secondary);
-  font-size: 12px;
-  min-width: 120px;
-  text-align: right;
-  font-family: monospace;
-}
-
-.color-controls h4 {
-  margin: 0 0 16px 0;
-  border-bottom: 1px solid var(--el-border-color);
-  padding-bottom: 8px;
-}
-
-.control-group {
-  margin-bottom: 16px;
-}
-
-.control-label {
-  font-size: 13px;
-  color: var(--el-text-color-regular);
-  margin-bottom: 8px;
-  font-weight: 500;
-}
-
-.filter-display {
-  border-top: 1px solid var(--el-border-color);
-  padding-top: 16px;
-}
-
-.filter-output-card {
-  border: 1px solid var(--el-border-color);
-  border-radius: 8px;
-  padding: 16px;
-  background: var(--el-bg-color);
-  margin-top: 16px;
-}
-
-.filter-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.filter-card-header h5 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.filter-header-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.filter-textarea {
-  margin-bottom: 16px;
-}
-
-.filter-textarea :deep(.el-textarea__inner) {
-  font-family: monospace;
-  font-size: 12px;
-  line-height: 1.4;
-  background: var(--el-fill-color-lighter);
-}
-
-.filter-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.action-group {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.primary-actions .el-button {
-  flex: 1;
-  min-width: 120px;
-}
-
-.secondary-actions .el-button {
-  flex: 1;
-  min-width: 100px;
-}
-
 .copy-paste-controls {
   display: flex;
   gap: 8px;
diff --git a/src/gui-frontend/src/components/ColorPreview.vue b/src/gui-frontend/src/components/ColorPreview.vue
new file mode 100644
index 0000000..91bdafb
--- /dev/null
+++ b/src/gui-frontend/src/components/ColorPreview.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="preview-timeline-column">
+    <div class="preview-section">
+      <div class="preview-header">
+        <h4>Preview</h4>
+        <div class="preview-header-right">
+          <div v-if="videoInfoDisplay" class="video-info">{{ videoInfoDisplay }}</div>
+          <div class="preview-controls">
+            <el-select v-model="previewResolution" size="small" style="width: 100px" @change="updatePreview">
+              <el-option label="10%" :value="0.1" />
+              <el-option label="25%" :value="0.25" />
+              <el-option label="50%" :value="0.5" />
+              <el-option label="100%" :value="1.0" />
+            </el-select>
+            <el-button size="small" @click="updatePreview" :loading="isGeneratingPreview">Refresh</el-button>
+            <el-button v-if="!videoPath && canGenerateFromUrl" size="small" type="primary" :loading="isGeneratingPreview" @click="generatePreviewFromUrl">
+              Generate from VideoUrl
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="preview-container">
+        <div v-if="!videoPath && canGenerateFromUrl && !previewImageUrl && !isGeneratingPreview" class="preview-hint">
+          <el-alert type="info" title="No local video selected. You can generate a preview using the VideoUrl from the markup." :closable="false" show-icon />
+        </div>
+        <div v-else-if="isGeneratingPreview" class="preview-loading">
+          <el-icon class="is-loading" :size="24"><Loading /></el-icon>
+          <p>Generating preview...</p>
+        </div>
+        <div v-else-if="previewError" class="preview-error">
+          <el-alert type="error" :title="previewError" show-icon :closable="false" />
+        </div>
+        <div v-else-if="previewImageUrl" class="preview-image">
+          <img :src="previewImageUrl" alt="Color grading preview" @error="handleImageError" />
+        </div>
+        <div v-else class="no-preview">
+          <el-empty description="Click refresh to generate preview" />
+        </div>
+      </div>
+    </div>
+
+    <div class="timeline-section" v-if="hasSomeTimeline">
+      <div class="timeline-controls">
+        <span class="time-display">{{ formatTime(previewTimestamp) }}</span>
+        <el-slider v-model="previewTimestamp" :min="effectiveTimestampRange.min" :max="effectiveTimestampRange.max" :step="0.1" :show-tooltip="false" @input="handleTimelineInput" class="timeline-slider" />
+        <span class="time-range">{{ formatTime(effectiveTimestampRange.start) }} - {{ formatTime(effectiveTimestampRange.end) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { ElAlert, ElButton, ElEmpty, ElIcon, ElSelect, ElOption, ElSlider } from 'element-plus'
+import { Loading } from '@element-plus/icons-vue'
+import type { ClipInfo, VideoInfo } from '@/types/api'
+import { debounce } from '@/utils/debounce'
+
+
+interface Props {
+  selectedClip?: ClipInfo | null
+  videoPath?: string | null
+  videoDuration?: number | null
+  videoInfo?: VideoInfo | null
+  markupVideoUrl?: string | null
+  filter?: string | null
+  previewEnabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedClip: null,
+  videoPath: null,
+  videoDuration: null,
+  videoInfo: null,
+  markupVideoUrl: null,
+  filter: null,
+  previewEnabled: true
+})
+
+// State
+const previewResolution = ref(0.5)
+const previewTimestamp = ref(0)
+const isGeneratingPreview = ref(false)
+const previewImageUrl = ref('')
+const previewError = ref('')
+const previewOpId = ref(0)
+const isInitializing = ref(false)
+let inFlightKey: string | null = null
+
+const hasSomeTimeline = computed(() => !!props.selectedClip)
+const canGenerateFromUrl = computed(() => !!props.markupVideoUrl && !!props.selectedClip)
+
+const effectiveTimestampRange = computed(() => {
+  if (!props.selectedClip) return { min: 0, max: 60, start: 0, end: 60 }
+  const clip = props.selectedClip
+  const videoDuration = props.videoDuration
+  if (videoDuration && videoDuration > 0) {
+    const effectiveStart = Math.min(clip.start, videoDuration - 0.1)
+    const effectiveEnd = Math.min(clip.end, videoDuration)
+    return { min: Math.max(0, effectiveStart), max: effectiveEnd, start: effectiveStart, end: effectiveEnd }
+  }
+  return { min: clip.start, max: clip.end, start: clip.start, end: clip.end }
+})
+
+const videoInfoDisplay = computed(() => {
+  if (!props.videoInfo) return null
+  const info = props.videoInfo
+  const parts: string[] = []
+  if (info.width && info.height) parts.push(`${info.width}×${info.height}`)
+  if (previewResolution.value !== 1.0 && info.width && info.height) {
+    const pw = Math.round(info.width * previewResolution.value)
+    const ph = Math.round(info.height * previewResolution.value)
+    parts.push(`Preview: ${pw}×${ph}`)
+  }
+  if (info.frame_rate) parts.push(formatFrameRate(info.frame_rate))
+  return parts.length ? parts.join(' • ') : null
+})
+
+const formatFrameRate = (frameRate: string): string => {
+  try {
+    if (frameRate.includes('/')) {
+      const [n, d] = frameRate.split('/').map(Number)
+      if (d === 1) return `${n}fps`
+      const fps = n / d
+      if (Math.abs(fps - 23.976) < 0.01) return '23.98fps'
+      if (Math.abs(fps - 29.970) < 0.01) return '29.97fps'
+      if (Math.abs(fps - 59.940) < 0.01) return '59.94fps'
+      return fps % 1 === 0 ? `${fps}fps` : `${fps.toFixed(2)}fps`
+    }
+    const fps = parseFloat(frameRate)
+    return fps % 1 === 0 ? `${fps}fps` : `${fps.toFixed(2)}fps`
+  } catch { return `${frameRate}fps` }
+}
+
+const formatTime = (seconds: number): string => {
+  const minutes = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  return `${minutes}:${secs.toFixed(1).padStart(4, '0')}`
+}
+
+// Debounced timeline preview
+const debouncedUpdatePreview = debounce(() => updatePreview(), 300)
+const handleTimelineInput = (v: number | number[]) => {
+  const n = Array.isArray(v) ? (v[0] ?? 0) : v
+  previewTimestamp.value = n
+  debouncedUpdatePreview()
+}
+
+const initializeTimestamp = () => {
+  if (!props.selectedClip) return
+  const clip = props.selectedClip
+  const vd = props.videoDuration
+  if (vd && vd > 0) {
+    if (clip.start >= vd) { previewTimestamp.value = Math.max(0, vd - 1); previewError.value = `Clip start time (${Math.round(clip.start)}s) exceeds video duration (${Math.round(vd)}s). Using fallback timestamp.`; return }
+    if (clip.end > vd) { previewTimestamp.value = clip.start; previewError.value = `Clip end time (${Math.round(clip.end)}s) exceeds video duration (${Math.round(vd)}s). Using clip start time.`; return }
+  }
+  const clipDuration = clip.end - clip.start
+  previewTimestamp.value = clip.start + clipDuration / 2
+  previewError.value = ''
+}
+
+const updatePreview = async () => {
+  if (!hasSomeTimeline.value || !window.pywebview?.api) return
+  if (isInitializing.value) return
+  const opId = ++previewOpId.value
+  isGeneratingPreview.value = true
+  previewError.value = ''
+
+  try {
+    const filterToApply = props.previewEnabled ? (props.filter || undefined) : undefined
+    const videoSource = props.videoPath || tempVideoUrlRef.value
+    if (!videoSource) { isGeneratingPreview.value = false; return }
+
+    const tsKey = Number(previewTimestamp.value.toFixed(3))
+    const filterKey = props.previewEnabled ? (props.filter || '') : 'nofilter'
+    const key = [videoSource, tsKey, previewResolution.value, filterKey].join('|')
+    if (inFlightKey === key) { isGeneratingPreview.value = false; return }
+    inFlightKey = key
+
+    const result = await window.pywebview.api.generate_frame_preview(
+      videoSource, previewTimestamp.value, filterToApply, previewResolution.value
+    )
+
+    if (opId !== previewOpId.value) return
+    if (result.status === 'success') {
+      if (result.base64_image && result.mime_type) previewImageUrl.value = `data:${result.mime_type};base64,${result.base64_image}`
+      else previewImageUrl.value = ''
+    } else {
+      previewError.value = result.message || 'Failed to generate preview'
+    }
+  } catch (e) {
+    if (opId !== previewOpId.value) return
+    previewError.value = `Preview generation error: ${String(e)}`
+    console.error('Preview generation failed:', e)
+  } finally {
+    if (opId === previewOpId.value) { inFlightKey = null; isGeneratingPreview.value = false }
+  }
+}
+
+const handleImageError = () => { previewError.value = 'Failed to load preview image' }
+
+const tempVideoUrlRef = ref<string | null>(null)
+const generatePreviewFromUrl = async () => {
+  if (!props.markupVideoUrl || !window.pywebview?.api) return
+  try {
+    const opId = ++previewOpId.value
+    isGeneratingPreview.value = true
+    previewError.value = ''
+    const res = await window.pywebview.api.get_direct_video_url(props.markupVideoUrl)
+    if (opId !== previewOpId.value) return
+    if (res.status === 'success' && res.url) {
+      tempVideoUrlRef.value = res.url as string
+      await updatePreview()
+    } else {
+      previewError.value = res.message || 'Failed to resolve VideoUrl via yt-dlp'
+    }
+  } catch (e) {
+    previewError.value = `Failed to fetch direct video URL: ${String(e)}`
+  } finally {
+    isGeneratingPreview.value = false
+  }
+}
+
+// Consolidated watcher for clip/video/duration
+let initTimer: number | null = null
+watch(
+  () => ({ clipNumber: props.selectedClip?.number ?? null, videoPath: props.videoPath ?? null, duration: props.videoDuration ?? null }),
+  async (curr, prev) => {
+    if (prev && curr.videoPath !== prev.videoPath) {
+      isInitializing.value = true
+      previewOpId.value++
+      if (initTimer) { clearTimeout(initTimer); initTimer = null }
+      previewImageUrl.value = ''
+      previewError.value = ''
+      previewTimestamp.value = 0
+      isGeneratingPreview.value = false
+      return
+    }
+    if (!hasSomeTimeline.value) {
+      previewOpId.value++
+      isGeneratingPreview.value = false
+      previewImageUrl.value = ''
+      previewError.value = ''
+      return
+    }
+    if (initTimer) clearTimeout(initTimer)
+    initTimer = window.setTimeout(async () => {
+      await nextTick()
+      initializeTimestamp()
+      isInitializing.value = false
+      updatePreview()
+    }, 200)
+  },
+  { immediate: true, deep: false }
+)
+
+// React to filter changes with debounce to avoid spamming during drag
+const debouncedFilterPreview = debounce(() => { if (!isInitializing.value) updatePreview() }, 150)
+watch(() => [props.filter, props.previewEnabled, previewResolution.value], () => {
+  debouncedFilterPreview()
+})
+</script>
+
+<style scoped>
+.preview-timeline-column { display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 0; overflow: hidden; }
+.preview-section { flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--el-border-color); border-radius: 4px; padding: 16px; }
+.preview-container { display: flex; align-items: center; justify-content: center; background: var(--el-fill-color-lighter); border-radius: 4px; overflow: hidden; height: 100%; }
+.preview-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.preview-image { display: contents; }
+.preview-image img { max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit: contain; border-radius: 4px; }
+.timeline-section { border: 1px solid var(--el-border-color); border-radius: 4px; padding: 16px; }
+.timeline-controls { display: flex; align-items: center; gap: 12px; width: 100%; }
+.time-display { font-weight: 600; min-width: 60px; text-align: center; font-family: monospace; }
+.timeline-slider { flex: 1; }
+.time-range { color: var(--el-text-color-secondary); font-size: 12px; min-width: 120px; text-align: right; font-family: monospace; }
+.preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.preview-header-right { display: flex; flex-direction: row; align-items: center; gap: 8px; }
+.video-info { font-size: 12px; color: var(--el-text-color-secondary); font-family: monospace; white-space: nowrap; }
+</style>
diff --git a/src/gui-frontend/src/components/SettingsPanel.vue b/src/gui-frontend/src/components/SettingsPanel.vue
index cc373d4..8c625be 100644
--- a/src/gui-frontend/src/components/SettingsPanel.vue
+++ b/src/gui-frontend/src/components/SettingsPanel.vue
@@ -138,7 +138,7 @@
             </el-form-item>
             <el-form-item label="Target FPS">
               <el-input-number
-                :model-value="props.settings?.target_fps || null"
+                :model-value="props.settings?.target_fps ?? null"
                 @change="(value) => handleNumberChange('target_fps', value)"
                 :min="1"
                 :max="300"
@@ -150,7 +150,7 @@
             </el-form-item>
             <el-form-item label="CRF (0-51)">
               <el-input-number
-                :model-value="props.settings?.crf || null"
+                :model-value="props.settings?.crf ?? null"
                 @change="(value) => handleNumberChange('crf', value)"
                 :min="0"
                 :max="51"
diff --git a/src/gui-frontend/src/composables/useFileHandler.ts b/src/gui-frontend/src/composables/useFileHandler.ts
index 29336e2..08a33dc 100644
--- a/src/gui-frontend/src/composables/useFileHandler.ts
+++ b/src/gui-frontend/src/composables/useFileHandler.ts
@@ -146,7 +146,7 @@ export function useFileHandler(
     selectionOpId++
     clipperStore.setVideoFile(null)
     clearVideoState()
-    resetMarkupState()
+  // Do NOT reset markup state; allow color grading with markup-only
   }
 
   /**
diff --git a/src/gui-frontend/src/utils/debounce.ts b/src/gui-frontend/src/utils/debounce.ts
new file mode 100644
index 0000000..295d2a0
--- /dev/null
+++ b/src/gui-frontend/src/utils/debounce.ts
@@ -0,0 +1,7 @@
+export function debounce<A extends unknown[]>(fn: (...args: A) => void, wait = 200) {
+  let t: ReturnType<typeof setTimeout>
+  return (...args: A): void => {
+    clearTimeout(t)
+    t = setTimeout(() => fn(...args), wait)
+  }
+}