Progress Tracker

1import { cn } from "./_adapter";
2import type {
3  ProgressStep,
4  ProgressTrackerChoice,
5  ProgressTrackerProps,
6} from "./schema";
7import { Check, X, Loader2, Timer, AlertCircle } from "lucide-react";
8import type { LucideIcon } from "lucide-react";
9 
10function formatElapsedTime(milliseconds: number): string {
11  const roundedSeconds = Math.round(Math.max(0, milliseconds) / 100) / 10;
12 
13  if (roundedSeconds < 60) {
14    return `${roundedSeconds.toFixed(1)}s`;
15  }
16 
17  const wholeSeconds = Math.floor(roundedSeconds);
18  const minutes = Math.floor(wholeSeconds / 60);
19  const remainingSeconds = wholeSeconds % 60;
20  return `${minutes}m ${remainingSeconds}s`;
21}
22 
23function formatElapsedTimeDateTime(milliseconds: number): string {
24  const roundedSeconds = Math.round(Math.max(0, milliseconds) / 100) / 10;
25 
26  if (roundedSeconds < 60) {
27    return `PT${Number(roundedSeconds.toFixed(1))}S`;
28  }
29 
30  const wholeSeconds = Math.floor(roundedSeconds);
31  const hours = Math.floor(wholeSeconds / 3600);
32  const minutes = Math.floor((wholeSeconds % 3600) / 60);
33  const seconds = wholeSeconds % 60;
34 
35  const hourPart = hours > 0 ? `${hours}H` : "";
36  const minutePart = minutes > 0 ? `${minutes}M` : "";
37  const secondPart = seconds > 0 ? `${seconds}S` : "";
38 
39  if (!hourPart && !minutePart && !secondPart) {
40    return "PT0S";
41  }
42 
43  return `PT${hourPart}${minutePart}${secondPart}`;
44}
45 
46function getCurrentStepId(steps: ProgressStep[]): string | null {
47  const inProgressStep = steps.find((s) => s.status === "in-progress");
48  if (inProgressStep) return inProgressStep.id;
49 
50  const failedStep = steps.find((s) => s.status === "failed");
51  if (failedStep) return failedStep.id;
52 
53  const firstPendingStep = steps.find((s) => s.status === "pending");
54  if (firstPendingStep) return firstPendingStep.id;
55 
56  return null;
57}
58 
59function getReceiptState(outcome: ProgressTrackerChoice["outcome"]): {
60  toneClassName: string;
61  icon: LucideIcon;
62} {
63  switch (outcome) {
64    case "success":
65      return {
66        toneClassName: "text-emerald-600 dark:text-emerald-500",
67        icon: Check,
68      };
69    case "partial":
70      return {
71        toneClassName: "text-amber-600 dark:text-amber-500",
72        icon: AlertCircle,
73      };
74    case "failed":
75      return {
76        toneClassName: "text-destructive",
77        icon: AlertCircle,
78      };
79    case "cancelled":
80      return {
81        toneClassName: "text-muted-foreground",
82        icon: X,
83      };
84  }
85}
86 
87interface StepIndicatorProps {
88// … truncated