MAESTRO: add ProgressIndicator component

frontend/src/components/ProgressIndicator.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+
+import type { AnalysisProgress } from "../types/analysis";
+import type { AnalysisStatus } from "../hooks/useAnalysis";
+
+type ProgressIndicatorProps = {
+  status: AnalysisStatus;
+  progress: AnalysisProgress | null;
+  timeoutSeconds: number;
+  incompleteTests?: string[];
+};
+
+type ProgressVariant = "normal" | "warning" | "timeout";
+
+const formatSeconds = (seconds: number): string => `${seconds}s`;
+
+const getVariant = (
+  status: AnalysisStatus,
+  remainingSeconds: number,
+  timeoutSeconds: number,
+): ProgressVariant => {
+  if (status === "timeout") {
+    return "timeout";
+  }
+
+  if (status !== "analysing") {
+    return "normal";
+  }
+
+  const warningThreshold = Math.max(5, Math.round(timeoutSeconds * 0.15));
+  return remainingSeconds <= warningThreshold ? "warning" : "normal";
+};
+
+const variantStyles: Record<ProgressVariant, {
+  bar: string;
+  badge: string;
+  track: string;
+}> = {
+  normal: {
+    bar: "bg-clean",
+    badge: "text-clean border-clean/40",
+    track: "bg-clean/10",
+  },
+  warning: {
+    bar: "bg-suspicious",
+    badge: "text-suspicious border-suspicious/40",
+    track: "bg-suspicious/10",
+  },
+  timeout: {
+    bar: "bg-spam",
+    badge: "text-spam border-spam/40",
+    track: "bg-spam/10",
+  },
+};
+
+export default function ProgressIndicator({
+  status,
+  progress,
+  timeoutSeconds,
+  incompleteTests = [],
+}: ProgressIndicatorProps) {
+  const elapsedSeconds = progress ? Math.floor(progress.elapsedMs / 1000) : 0;
+  const remainingSeconds = Math.max(0, timeoutSeconds - elapsedSeconds);
+  const percentage = progress ? Math.round(progress.percentage) : 0;
+  const variant = getVariant(status, remainingSeconds, timeoutSeconds);
+  const styles = variantStyles[variant];
+
+  return (
+    <section
+      data-testid="progress-indicator"
+      data-status={status}
+      data-variant={variant}
+      className="rounded-2xl border border-info/10 bg-surface p-6 shadow-[0_0_40px_rgba(15,23,42,0.35)]"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <span
+            className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[11px] uppercase tracking-[0.2em] ${styles.badge}`}
+          >
+            {status === "analysing" ? "Analysing" : status}
+          </span>
+          {status === "analysing" ? (
+            <FontAwesomeIcon
+              icon={faSpinner}
+              spin
+              data-testid="progress-spinner"
+              className="text-info"
+            />
+          ) : null}
+        </div>
+        <div className="flex items-center gap-4 text-xs text-text/60">
+          <span data-testid="progress-elapsed">{formatSeconds(elapsedSeconds)}</span>
+          <span className="text-text/30">/</span>
+          <span data-testid="progress-remaining">{formatSeconds(remainingSeconds)}</span>
+        </div>
+      </div>
+
+      <div className="mt-4 space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <span
+            data-testid="progress-current-test"
+            className="text-sm font-semibold text-text/80"
+          >
+            {progress?.currentTest ?? "Preparing analysis"}
+          </span>
+          <span
+            data-testid="progress-percentage"
+            className="text-sm font-semibold text-text/70"
+          >
+            {percentage}%
+          </span>
+        </div>
+        <div
+          role="progressbar"
+          aria-valuenow={percentage}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          className={`h-2 w-full overflow-hidden rounded-full ${styles.track}`}
+        >
+          <div
+            className={`h-full transition-all ${styles.bar}`}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+      </div>
+
+      {status === "timeout" ? (
+        <div
+          role="alert"
+          className="mt-4 rounded-xl border border-spam/30 bg-spam/10 p-4 text-xs text-text/80"
+        >
+          <p className="font-semibold text-spam">
+            Timeout reached at {timeoutSeconds} seconds.
+          </p>
+          <p className="mt-2 text-text/70">Incomplete tests:</p>
+          <p data-testid="timeout-tests" className="mt-1 font-mono text-text/70">
+            {incompleteTests.length > 0 ? incompleteTests.join(", ") : "None"}
+          </p>
+        </div>
+      ) : null}
+    </section>
+  );
+}