feat(frontend): add event type filter pills to ActivityHistory

frontend/src/components/dashboard/ActivityHistory.test.tsx

@@ -141,3 +141,71 @@ describe("ActivityHistory malformed metadata", () => {
     ).toBeInTheDocument();
   });
 });
+
+describe("ActivityHistory event type filter pills", () => {
+  const sampleEvents = [
+    makeEvent({ id: "evt-created", streamId: 10, eventType: "CREATED" }),
+    makeEvent({
+      id: "evt-withdrawn",
+      streamId: 11,
+      eventType: "WITHDRAWN",
+      amount: "250000000",
+    }),
+    makeEvent({
+      id: "evt-topped",
+      streamId: 12,
+      eventType: "TOPPED_UP",
+      amount: "500000000",
+    }),
+    makeEvent({ id: "evt-paused", streamId: 13, eventType: "PAUSED" }),
+  ];
+
+  it("selects 'All' by default and displays all activity items", () => {
+    render(<ActivityHistory events={sampleEvents} />);
+
+    const allButton = screen.getByRole("button", { name: /^All$/i });
+    expect(allButton).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getAllByRole("listitem")).toHaveLength(4);
+  });
+
+  it("filters displayed items immediately when clicking Created, Withdrawn, Topped Up, or Paused", () => {
+    render(<ActivityHistory events={sampleEvents} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /^Withdrawn$/i }));
+    expect(screen.getByRole("button", { name: /^Withdrawn$/i })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(screen.getByRole("button", { name: /^All$/i })).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
+    expect(screen.getAllByRole("listitem")).toHaveLength(1);
+    expect(screen.getByText(/Withdrew 25 tokens from Stream/i)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /^Topped Up$/i }));
+    expect(screen.getAllByRole("listitem")).toHaveLength(1);
+    expect(screen.getByText(/Topped up Stream/i)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /^Paused$/i }));
+    expect(screen.getAllByRole("listitem")).toHaveLength(1);
+    expect(screen.getByText(/was paused/i)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /^Created$/i }));
+    expect(screen.getAllByRole("listitem")).toHaveLength(1);
+    expect(screen.getByText(/New stream created/i)).toBeInTheDocument();
+  });
+
+  it("shows empty state message when no events match the selected filter", () => {
+    render(<ActivityHistory events={sampleEvents} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /^Cancelled$/i }));
+    expect(screen.queryAllByRole("listitem")).toHaveLength(0);
+    expect(
+      screen.getByText("No activity found for this filter."),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /^All$/i }));
+    expect(screen.getAllByRole("listitem")).toHaveLength(4);
+  });
+});

frontend/src/components/dashboard/ActivityHistory.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useRef, useState, useCallback } from "react";
+import React, { useRef, useState, useCallback, useMemo } from "react";
 import Link from "next/link";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { BackendStreamEvent } from "@/lib/api-types";
@@ -13,6 +13,26 @@ import { Button } from "../ui/Button";
 
 const VIRTUALIZATION_THRESHOLD = 50;
 
+export type ActivityEventFilter =
+  | "ALL"
+  | "CREATED"
+  | "WITHDRAWN"
+  | "TOPPED_UP"
+  | "PAUSED"
+  | "CANCELLED";
+
+export const ACTIVITY_FILTER_OPTIONS: ReadonlyArray<{
+  id: ActivityEventFilter;
+  label: string;
+}> = [
+  { id: "ALL", label: "All" },
+  { id: "CREATED", label: "Created" },
+  { id: "WITHDRAWN", label: "Withdrawn" },
+  { id: "TOPPED_UP", label: "Topped Up" },
+  { id: "PAUSED", label: "Paused" },
+  { id: "CANCELLED", label: "Cancelled" },
+];
+
 /**
  * Safely parse a StreamEvent metadata JSON string. Malformed metadata
  * (truncated/partial writes, migration artifacts) must never throw during
@@ -38,10 +58,20 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
   isLoading,
 }) => {
   const parentRef = useRef<HTMLDivElement>(null);
-  const shouldVirtualize = events.length > VIRTUALIZATION_THRESHOLD;
+  const [selectedFilter, setSelectedFilter] = useState<ActivityEventFilter>("ALL");
+
+  const filteredEvents = useMemo(
+    () =>
+      selectedFilter === "ALL"
+        ? events
+        : events.filter((event) => event.eventType === selectedFilter),
+    [events, selectedFilter],
+  );
+
+  const shouldVirtualize = filteredEvents.length > VIRTUALIZATION_THRESHOLD;
 
   const virtualizer = useVirtualizer({
-    count: events.length,
+    count: filteredEvents.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 120,
     overscan: 5,
@@ -157,7 +187,32 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
         {exportStatus === "complete" && "Export complete."}
       </div>
 
-      <div className="flex justify-end">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div
+          className="flex flex-wrap items-center gap-2"
+          role="group"
+          aria-label="Filter activity by event type"
+        >
+          {ACTIVITY_FILTER_OPTIONS.map((option) => {
+            const isSelected = selectedFilter === option.id;
+            return (
+              <button
+                key={option.id}
+                type="button"
+                aria-pressed={isSelected}
+                onClick={() => setSelectedFilter(option.id)}
+                className={`px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ${
+                  isSelected
+                    ? "bg-accent text-white border-accent"
+                    : "bg-white/5 text-slate-300 border-glass-border hover:border-accent/50 hover:text-white"
+                }`}
+              >
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+
         <Button
           onClick={exportToCSV}
           variant="outline"
@@ -182,7 +237,7 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
             className="relative w-full"
           >
             {virtualizer.getVirtualItems().map((virtualRow) => {
-              const event = events[virtualRow.index];
+              const event = filteredEvents[virtualRow.index];
               if (!event) return null;
               return (
                 <div
@@ -248,7 +303,7 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
         </div>
       ) : (
         <div role="list" aria-label="Activity timeline" className="relative space-y-4 before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-700 before:to-transparent">
-          {events.map((event, index) => (
+          {filteredEvents.map((event, index) => (
             <div
               key={`${event.id}-${index}`}
               role="listitem"
@@ -301,7 +356,7 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
         </div>
       )}
 
-      {events.length === 0 && !isLoading && (
+      {filteredEvents.length === 0 && !isLoading && (
         <div className="text-center py-12 text-slate-400 bg-white/5 rounded-xl border border-dashed border-slate-700">
           No activity found for this filter.
         </div>