feat(18-01): create ProgressPanel component

- Card with Progress heading using CardHeader/CardContent pattern
- Reuses existing ProgressBar for task completion percentage
- Displays phase and task completion counts
- Handles 0/0 gracefully via ProgressBar's built-in guard

packages/web/src/components/ProgressPanel.tsx

@@ -0,0 +1,35 @@
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { ProgressBar } from "@/components/ProgressBar";
+
+export interface ProgressPanelProps {
+  phasesComplete: number;
+  phasesTotal: number;
+  tasksComplete: number;
+  tasksTotal: number;
+}
+
+export function ProgressPanel({
+  phasesComplete,
+  phasesTotal,
+  tasksComplete,
+  tasksTotal,
+}: ProgressPanelProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <h2 className="text-lg font-semibold">Progress</h2>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <ProgressBar completed={tasksComplete} total={tasksTotal} />
+        <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+          <span>
+            Phases: {phasesComplete}/{phasesTotal} complete
+          </span>
+          <span>
+            Tasks: {tasksComplete}/{tasksTotal} complete
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}