feat(17-01): create ProgressBar component

- Percentage-based horizontal bar with completed/total props
- Gray track (bg-muted), blue fill for partial, green fill for 100%
- Text label showing percentage
- Handles 0/0 total gracefully (empty bar)

packages/web/src/components/ProgressBar.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+
+interface ProgressBarProps {
+  completed: number;
+  total: number;
+  className?: string;
+}
+
+export function ProgressBar({ completed, total, className }: ProgressBarProps) {
+  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  const fillColor =
+    percentage === 0
+      ? ""
+      : percentage === 100
+        ? "bg-green-500"
+        : "bg-primary";
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <div className="h-2 flex-1 rounded-full bg-muted">
+        {percentage > 0 && (
+          <div
+            className={cn("h-2 rounded-full transition-all", fillColor)}
+            style={{ width: `${percentage}%` }}
+          />
+        )}
+      </div>
+      <span className="text-xs font-medium text-muted-foreground">
+        {percentage}%
+      </span>
+    </div>
+  );
+}