feat(report): show analysis progress timeline

web/app.js

@@ -1,6 +1,7 @@
 import React, {
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "https://esm.sh/react@18.2.0";
 import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
@@ -62,6 +63,103 @@ function percent(value) {
   return typeof value === "number" ? `${Math.round(value * 100)}%` : "n/a";
 }
 
+const runningProgressSteps = [
+  {
+    id: "quality",
+    text: "Tôi đang kiểm tra chất lượng video của bạn.",
+    delayMs: 0,
+  },
+  {
+    id: "pose",
+    text: "Tôi đang tiến hành phân tích dáng tập của bạn.",
+    delayMs: 900,
+  },
+  {
+    id: "exercise",
+    text: "Tôi đang nhận diện bài tập bạn đang thực hiện.",
+    delayMs: 1800,
+  },
+  {
+    id: "reps",
+    text: "Tôi đang đếm số reps trong video.",
+    delayMs: 2800,
+  },
+  {
+    id: "issues",
+    text: "Tôi đang phân tích các lỗi sai trong khi tập của bạn.",
+    delayMs: 3900,
+  },
+];
+
+function runningProgressState(activeIndex = 0) {
+  return runningProgressSteps.map((step, index) => ({
+    id: step.id,
+    text: step.text,
+    status:
+      index < activeIndex ? "done" : index === activeIndex ? "active" : "pending",
+  }));
+}
+
+function finalProgressState(result) {
+  const report = result.report;
+  const warnings = report.video_manifest?.quality_warnings || [];
+  const exercise = label(report.exercise?.exercise || "movement");
+  const repCount = report.reps?.reps?.length || 0;
+  const issues = report.issue_markers?.issues || [];
+  return [
+    {
+      id: "quality",
+      status: "done",
+      text: warnings.length
+        ? `Video có một vài điểm cần lưu ý: ${warnings.map(label).join(", ")}.`
+        : "Ồ, video của bạn có chất lượng quay tốt đó.",
+    },
+    {
+      id: "pose",
+      status: "done",
+      text: "Tôi đã phân tích xong dáng tập và các điểm landmark chính.",
+    },
+    {
+      id: "exercise",
+      status: "done",
+      text: `Chúng tôi nhận thấy bạn đang thực hiện ${exercise}.`,
+    },
+    {
+      id: "reps",
+      status: "done",
+      text: `Tôi đếm được bạn đã thực hiện ${repCount} reps ${exercise}.`,
+    },
+    {
+      id: "issues",
+      status: "done",
+      text: issues.length
+        ? `Tôi tìm thấy ${issues.length} điểm cần chú ý trong khi tập của bạn.`
+        : "Tôi không thấy lỗi kỹ thuật rõ ràng trong bài tập này.",
+    },
+  ];
+}
+
+function ProgressPanel({ steps }) {
+  if (!steps.length) return null;
+  return h(
+    "section",
+    { className: "progress-panel", "aria-live": "polite" },
+    h("h3", null, "Analysis progress"),
+    h(
+      "ol",
+      { className: "progress-list" },
+      steps.map((step) =>
+        h(
+          "li",
+          { className: `progress-step ${step.status}`, key: step.id },
+          h("span", { className: "progress-dot", "aria-hidden": "true" }),
+          h("span", null, step.text),
+        ),
+      ),
+    ),
+  );
+}
+
 function SummaryTab({ result }) {
   if (!result) {
     return h(
@@ -536,6 +634,8 @@ function App() {
   const [activeTab, setActiveTab] = useState("summary");
   const [status, setStatus] = useState("idle");
   const [error, setError] = useState("");
+  const [progressSteps, setProgressSteps] = useState([]);
+  const progressTimers = useRef([]);
 
   const previewUrl = useMemo(
     () => (file ? URL.createObjectURL(file) : ""),
@@ -555,6 +655,29 @@ function App() {
     };
   }, [previewUrl]);
 
+  useEffect(() => {
+    return () => {
+      progressTimers.current.forEach((timer) => clearTimeout(timer));
+    };
+  }, []);
+
+  function clearProgressTimers() {
+    progressTimers.current.forEach((timer) => clearTimeout(timer));
+    progressTimers.current = [];
+  }
+
+  function startProgressTimeline() {
+    clearProgressTimers();
+    setProgressSteps(runningProgressState(0));
+    progressTimers.current = runningProgressSteps
+      .slice(1)
+      .map((step, index) =>
+        setTimeout(() => {
+          setProgressSteps(runningProgressState(index + 1));
+        }, step.delayMs),
+      );
+  }
+
   function toggleLimitation(value) {
     setLimitations((current) =>
       current.includes(value)
@@ -568,6 +691,7 @@ function App() {
     setError("");
     setStatus("running");
     setResult(null);
+    startProgressTimeline();
 
     const payload = new FormData();
     if (file) payload.append("video", file);
@@ -585,10 +709,20 @@ function App() {
       });
       const body = await response.json();
       if (!response.ok) throw new Error(body.detail || "Analysis failed.");
+      clearProgressTimers();
       setResult(body);
+      setProgressSteps(finalProgressState(body));
       setStatus("complete");
     } catch (caught) {
+      clearProgressTimers();
       setError(caught.message || "Analysis failed.");
+      setProgressSteps([
+        {
+          id: "error",
+          status: "active",
+          text: "Phân tích chưa hoàn tất. Vui lòng thử lại với video khác hoặc kiểm tra kết nối.",
+        },
+      ]);
       setStatus("idle");
     }
   }
@@ -741,6 +875,7 @@ function App() {
           status === "running" ? "Analyzing..." : "Analyze Form",
         ),
         error ? h("div", { className: "error" }, error) : null,
+        h(ProgressPanel, { steps: progressSteps }),
       ),
       h(
         "section",

web/styles.css

@@ -339,6 +339,66 @@ input[type="text"]:focus,
   opacity: 0.72;
 }
 
+.progress-panel {
+  border: 1px solid rgba(37, 44, 31, 0.12);
+  border-radius: 8px;
+  margin-top: 14px;
+  padding: 14px;
+  background: rgba(255, 253, 247, 0.66);
+}
+
+.progress-panel h3 {
+  margin: 0 0 12px;
+  color: var(--forest);
+  font-size: 0.96rem;
+}
+
+.progress-list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.progress-step {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+.progress-step.done {
+  color: #304133;
+}
+
+.progress-step.active {
+  color: var(--forest-deep);
+  font-weight: 600;
+}
+
+.progress-dot {
+  width: 10px;
+  height: 10px;
+  border: 2px solid rgba(33, 79, 58, 0.3);
+  border-radius: 999px;
+  margin-top: 4px;
+  background: rgba(255, 253, 247, 0.9);
+}
+
+.progress-step.done .progress-dot {
+  border-color: var(--forest);
+  background: var(--forest);
+}
+
+.progress-step.active .progress-dot {
+  border-color: var(--clay);
+  background: var(--clay);
+  box-shadow: 0 0 0 5px rgba(190, 104, 75, 0.14);
+}
+
 .result-stage {
   display: grid;
   min-height: 470px;