1 files changed, 51 insertions, 0 deletions
diff --git a/makima/frontend/src/components/history/CheckpointList.tsx b/makima/frontend/src/components/history/CheckpointList.tsx
new file mode 100644
index 0000000..a12c155
--- /dev/null
+++ b/makima/frontend/src/components/history/CheckpointList.tsx
@@ -0,0 +1,51 @@
+import type { TaskCheckpoint } from "../../lib/api";
+import { CheckpointCard } from "./CheckpointCard";
+
+interface CheckpointListProps {
+  checkpoints: TaskCheckpoint[];
+  taskId: string;
+  onActionComplete: () => void;
+}
+
+export function CheckpointList({ checkpoints, taskId, onActionComplete }: CheckpointListProps) {
+  // Sort checkpoints by number descending (most recent first)
+  const sortedCheckpoints = [...checkpoints].sort(
+    (a, b) => b.checkpointNumber - a.checkpointNumber
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="shrink-0 p-3 border-b border-[rgba(117,170,252,0.1)] bg-[rgba(0,0,0,0.2)]">
+        <div className="flex items-center justify-between">
+          <div className="font-mono text-xs text-[#9bc3ff]">
+            {checkpoints.length} checkpoint{checkpoints.length !== 1 ? "s" : ""}
+          </div>
+          <div className="font-mono text-[10px] text-[#556677]">
+            Fork or resume from any checkpoint
+          </div>
+        </div>
+      </div>
+
+      {/* Checkpoint list */}
+      <div className="flex-1 overflow-y-auto">
+        {sortedCheckpoints.length === 0 ? (
+          <div className="flex items-center justify-center h-32">
+            <div className="font-mono text-[#7788aa] text-xs">No checkpoints</div>
+          </div>
+        ) : (
+          <div className="divide-y divide-[rgba(117,170,252,0.1)]">
+            {sortedCheckpoints.map((checkpoint) => (
+              <CheckpointCard
+                key={checkpoint.id}
+                checkpoint={checkpoint}
+                taskId={taskId}
+                onActionComplete={onActionComplete}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}