1 files changed, 80 insertions, 0 deletions
diff --git a/makima/frontend/src/components/history/TimelineList.tsx b/makima/frontend/src/components/history/TimelineList.tsx
new file mode 100644
index 0000000..b0348c0
--- /dev/null
+++ b/makima/frontend/src/components/history/TimelineList.tsx
@@ -0,0 +1,80 @@
+import type { HistoryEvent } from "../../lib/api";
+import { TimelineEventCard } from "./TimelineEventCard";
+
+interface TimelineListProps {
+  events: HistoryEvent[];
+  loading: boolean;
+  error: string | null;
+  selectedEvent: HistoryEvent | null;
+  onSelectEvent: (event: HistoryEvent) => void;
+  onRefresh: () => void;
+}
+
+export function TimelineList({
+  events,
+  loading,
+  error,
+  selectedEvent,
+  onSelectEvent,
+  onRefresh,
+}: TimelineListProps) {
+  return (
+    <div className="panel flex flex-col h-full">
+      {/* Header */}
+      <div className="shrink-0 p-3 border-b border-[rgba(117,170,252,0.15)] flex items-center justify-between">
+        <h2 className="font-mono text-xs text-[#9bc3ff] uppercase tracking-wide">
+          Timeline
+        </h2>
+        <button
+          onClick={onRefresh}
+          disabled={loading}
+          className="text-[#7788aa] hover:text-[#9bc3ff] transition-colors disabled:opacity-50"
+          title="Refresh timeline"
+        >
+          <svg
+            className={`w-4 h-4 ${loading ? "animate-spin" : ""}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto">
+        {loading && events.length === 0 ? (
+          <div className="flex items-center justify-center h-32">
+            <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
+          </div>
+        ) : error ? (
+          <div className="p-4">
+            <div className="font-mono text-red-400 text-xs mb-2">Error loading timeline</div>
+            <div className="font-mono text-[#7788aa] text-[10px]">{error}</div>
+          </div>
+        ) : events.length === 0 ? (
+          <div className="flex items-center justify-center h-32">
+            <div className="font-mono text-[#7788aa] text-xs">No events found</div>
+          </div>
+        ) : (
+          <div className="divide-y divide-[rgba(117,170,252,0.1)]">
+            {events.map((event) => (
+              <TimelineEventCard
+                key={event.id}
+                event={event}
+                isSelected={selectedEvent?.id === event.id}
+                onClick={() => onSelectEvent(event)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}