Tracs validation added. A warning is thrown if the input contains a video strem, but the requested output format doesn't support it

web/frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ThemeProvider, createTheme, CssBaseline } from '@mui/material'
-import { Box, Grid, Button, CircularProgress } from '@mui/material'
+import { Box, Grid, Button, CircularProgress, Typography } from '@mui/material'
 import { PlayArrow } from '@mui/icons-material'
 import { Layout } from './components/Layout'
 import { UploadZone } from './components/UploadZone'
@@ -13,6 +13,7 @@ import { useTracklistStore } from './stores/tracklistStore'
 import { useOptionsStore } from './stores/optionsStore'
 import { useTaskStore } from './stores/taskStore'
 import { useUIStore } from './stores/uiStore'
+import { useValidationStore } from './stores/validationStore'
 import { useWebSocket } from './hooks/useWebSocket'
 import { startSplit } from './api/client'
 
@@ -23,14 +24,14 @@ const App: React.FC = () => {
   const { options } = useOptionsStore()
   const {
     isProcessing,
-    setTaskId,          // <-- Add this
+    setTaskId,
     setError,
     setIsProcessing,
     addLog,
     reset,
   } = useTaskStore()
+  const { formatError } = useValidationStore()
 
-  // Connect WebSocket when taskId is available and processing
   useWebSocket(taskId && isProcessing ? taskId : null)
 
   const handleSplit = async () => {
@@ -50,7 +51,6 @@ const App: React.FC = () => {
     }
 
     try {
-      // Set taskId in taskStore so DownloadSection can use it
       setTaskId(taskId)
       setIsProcessing(true)
       addLog('🚀 Starting split...')
@@ -68,7 +68,7 @@ const App: React.FC = () => {
     reset()
   }
 
-  const isSplitDisabled = !taskId || !isValid || entries.length === 0 || isProcessing
+  const isSplitDisabled = !taskId || !isValid || entries.length === 0 || isProcessing || !!formatError
 
   return (
     <ThemeProvider
@@ -81,22 +81,15 @@ const App: React.FC = () => {
       <CssBaseline />
       <Layout>
         <Grid container spacing={3}>
-          {/* Upload Section */}
           <Grid item xs={12} md={6}>
             <UploadZone />
           </Grid>
-
-          {/* Tracklist Editor */}
           <Grid item xs={12} md={6}>
             <TracklistEditor />
           </Grid>
-
-          {/* Options Panel */}
           <Grid item xs={12} md={4}>
             <OptionsPanel />
           </Grid>
-
-          {/* Progress / Split Controls */}
           <Grid item xs={12} md={8}>
             <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
               <Button
@@ -114,6 +107,14 @@ const App: React.FC = () => {
               </Button>
             </Box>
 
+            {formatError && (
+              <Box sx={{ mb: 2, p: 2, bgcolor: 'warning.light', borderRadius: 1 }}>
+                <Typography color="warning.dark" variant="body2">
+                  ⚠️ {formatError}
+                </Typography>
+              </Box>
+            )}
+
             <ProgressDisplay />
             <DownloadSection />
           </Grid>