Frontend and backend work together fine, complete workflow is implemented

web/frontend/src/components/OptionsPanel.tsx

@@ -62,6 +62,20 @@ export const OptionsPanel: React.FC = () => {
         ⚙️ Options
       </Typography>
 
+      {/* Tracklist Section */}
+      <Section title="Tracklist Settings" defaultExpanded>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <TextField
+            label="Tracklist Format"
+            value={options.tracklist_format}
+            onChange={(e) => handleChange('tracklist_format', e.target.value)}
+            fullWidth
+            size="small"
+            helperText="Placeholders: %ts (timestamp), %tn (track name), %an (author), %al (album), %date, %ext"
+          />
+        </Box>
+      </Section>
+
       {/* Output Section */}
       <Section title="Output Settings" defaultExpanded>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
@@ -232,4 +246,6 @@ export const OptionsPanel: React.FC = () => {
       </Section>
     </Paper>
   )
-}
+}
+
+