with open("frontend/src/App.tsx", "r", encoding="utf-8") as f:
    content = f.read()

old_export_progress = """                  {(job?.kind === "split" || job?.kind === "split_all") && job.status !== "completed" && (
                    <Box>
                      <LinearProgress variant="determinate" value={Math.round(job.progress * 100)} />
                      <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
                        {job.message || `Status: ${job.status}`}
                      </Typography>
                      {job.details && (
                        <Stack direction={{ xs: "column", sm: "row" }} spacing={1} sx={{ mt: 1 }}>
                          <Chip size="small" label={`Stage: ${job.details.stage ?? "working"}`} />
                          <Chip size="small" label={`Stage ETA: ${job.details.stage_eta ?? "calculating"}`} />
                          <Chip size="small" label={`Total ETA: ${job.details.total_eta ?? "calculating"}`} />
                        </Stack>
                      )}
                    </Box>
                  )}"""

new_export_progress = """                  {(job?.kind === "split" || job?.kind === "split_all") && job.status !== "completed" && (
                    <Box sx={{ p: 2, bgcolor: "background.paper", borderRadius: 4, border: "1px solid", borderColor: "divider" }}>
                      <Typography variant="h6" gutterBottom>
                        {job.kind === "split_all" ? "Bulk Export Progress" : "Export Progress"}
                      </Typography>
                      
                      {job.kind === "split_all" && job.details?.label && (() => {
                        const match = /^(\d+)\\/(\d+) (.+)$/.exec(job.details.label);
                        if (match) {
                          const index = Number(match[1]);
                          const total = Number(match[2]);
                          const filename = match[3];
                          const videoProgress = Math.max(0, Math.min(100, (job.progress - (index - 1) / total) * total * 100));
                          
                          return (
                            <Box sx={{ mb: 3 }}>
                              <Typography variant="body2" color="text.secondary" gutterBottom>
                                Overall Bulk Progress ({index}/{total} videos)
                              </Typography>
                              <LinearProgress 
                                variant="determinate" 
                                value={Math.round(job.progress * 100)} 
                                sx={{ height: 12, borderRadius: 6, mb: 2, bgcolor: "primary.light" }} 
                              />
                              
                              <Typography variant="body2" color="text.primary" sx={{ fontWeight: "bold" }}>
                                Current Video: {filename}
                              </Typography>
                              <LinearProgress 
                                variant="determinate" 
                                value={Math.round(videoProgress)} 
                                color="secondary"
                                sx={{ height: 8, borderRadius: 4, mb: 2 }} 
                              />
                              
                              <Typography variant="body2" color="text.secondary">
                                Current Stage: {job.details.stage || "working"}
                              </Typography>
                              <LinearProgress 
                                variant="determinate" 
                                value={job.details.stage_percent || 0} 
                                color="info"
                                sx={{ height: 4, borderRadius: 2 }} 
                              />
                            </Box>
                          );
                        }
                        return null;
                      })()}

                      {job.kind === "split" && (
                        <Box sx={{ mb: 2 }}>
                          <Typography variant="body2" color="text.primary" gutterBottom>
                            Video Progress
                          </Typography>
                          <LinearProgress 
                            variant="determinate" 
                            value={Math.round(job.progress * 100)} 
                            color="secondary"
                            sx={{ height: 8, borderRadius: 4, mb: 2 }} 
                          />
                          <Typography variant="body2" color="text.secondary">
                            Current Stage: {job.details?.stage || "working"}
                          </Typography>
                          <LinearProgress 
                            variant="determinate" 
                            value={job.details?.stage_percent || 0} 
                            color="info"
                            sx={{ height: 4, borderRadius: 2 }} 
                          />
                        </Box>
                      )}

                      <Stack direction={{ xs: "column", sm: "row" }} spacing={1} sx={{ mt: 2 }}>
                        {job.details?.stage_eta && <Chip size="small" label={`Stage ETA: ${job.details.stage_eta}`} />}
                        {job.details?.total_eta && <Chip size="small" label={`Total ETA: ${job.details.total_eta}`} />}
                        <Chip size="small" color={job.status === "running" ? "primary" : "default"} label={`Status: ${job.status}`} />
                      </Stack>

                      {job.kind === "split_all" && (
                        <Box sx={{ mt: 3, p: 2, bgcolor: "background.default", borderRadius: 2 }}>
                          <Typography variant="subtitle2" gutterBottom>
                            Queue Queue
                          </Typography>
                          <Stack spacing={0.5}>
                            {videoList.map((v, i) => {
                              const match = job.details?.label ? /^(\d+)\\/(\d+) (.+)$/.exec(job.details.label) : null;
                              const currentIndex = match ? Number(match[1]) - 1 : -1;
                              const status = i < currentIndex ? "completed" : i === currentIndex ? "running" : "pending";
                              return (
                                <Typography 
                                  key={v.id} 
                                  variant="body2" 
                                  color={status === "completed" ? "success.main" : status === "running" ? "primary.main" : "text.disabled"}
                                  sx={{ fontWeight: status === "running" ? "bold" : "normal" }}
                                >
                                  {status === "completed" ? "✓ " : status === "running" ? "▶ " : "• "}
                                  {v.filename}
                                </Typography>
                              );
                            })}
                          </Stack>
                        </Box>
                      )}
                    </Box>
                  )}"""

content = content.replace(old_export_progress, new_export_progress)

with open("frontend/src/App.tsx", "w", encoding="utf-8") as f:
    f.write(content)
print("App.tsx export UI patched")