feat: show backend optimization progress

src/components/progress-panel.tsx

@@ -17,19 +17,37 @@ interface TimingSummary {
   steps: TimingStep[];
 }
 
+interface ProgressStep {
+  label: string;
+  status: "running" | "completed" | "failed";
+  duration_ms?: number;
+}
+
+interface WorkflowProgress {
+  current_step: string | null;
+  status: "idle" | "running" | "completed" | "failed";
+  steps: ProgressStep[];
+}
+
 interface ProgressPanelProps {
   action: ProgressAction | null;
   elapsedSeconds: number;
   lastTiming: TimingSummary | null;
+  liveProgress: WorkflowProgress | null;
 }
 
 export function ProgressPanel({
   action,
   elapsedSeconds,
   lastTiming,
+  liveProgress,
 }: ProgressPanelProps) {
   if (!action && !lastTiming) return null;
   const completedTiming = lastTiming;
+  const liveSteps =
+    action === "optimize" && liveProgress?.steps.length
+      ? liveProgress.steps
+      : null;
 
   return (
     <section className="progress-panel" aria-live="polite">
@@ -41,9 +59,18 @@ export function ProgressPanel({
           </div>
           <p>{getElapsedNotice(elapsedSeconds)}</p>
           <ol className="progress-steps">
-            {getProgressStages(action).map((stage) => (
-              <li key={stage.label}>{stage.label}</li>
-            ))}
+            {liveSteps
+              ? liveSteps.map((step) => (
+                  <li key={step.label}>
+                    {formatStepStatus(step.status)} {step.label}
+                    {typeof step.duration_ms === "number"
+                      ? `: ${formatMilliseconds(step.duration_ms)}`
+                      : ""}
+                  </li>
+                ))
+              : getProgressStages(action).map((stage) => (
+                  <li key={stage.label}>{stage.label}</li>
+                ))}
           </ol>
         </>
       ) : completedTiming ? (
@@ -73,6 +100,12 @@ function getActionLabel(action: ProgressAction) {
   return "正在优化文章";
 }
 
+function formatStepStatus(status: ProgressStep["status"]) {
+  if (status === "running") return "进行中";
+  if (status === "failed") return "失败";
+  return "完成";
+}
+
 function formatMilliseconds(milliseconds: number) {
   const seconds = Math.round(milliseconds / 1000);
   if (seconds < 60) return `${seconds} 秒`;