feat(frontend): refactor ActivityLog page to useActivity + primitives

src/pages/ActivityLog.tsx

@@ -1,8 +1,12 @@
-import { useAppStore } from "@/store";
+import { useActivity } from "@/hooks/useActivity";
 import { ActivityFeed } from "@/components/ActivityFeed";
+import { Skeleton } from "@/components/ui/skeleton";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ErrorState } from "@/components/ui/error-state";
 
 export function ActivityLog() {
-  const activity = useAppStore((s) => s.activity);
+  const { data, isLoading, isError, error, refetch } = useActivity({ limit: 200 });
+  const items = data?.items ?? [];
 
   return (
     <div className="space-y-8 animate-fade-in">
@@ -14,12 +18,33 @@ export function ActivityLog() {
         <h1 className="text-[22px] font-semibold tracking-tight">Activity log</h1>
         <p className="text-muted-foreground mt-1.5 text-[14px]">
           Every claim submission, denial, payment, and provider event, in
-          reverse chronological order.
+          reverse chronological order. Auto-refreshes every 30s.
         </p>
       </header>
 
+      {isError ? (
+        <ErrorState
+          message="Couldn't load activity from the backend."
+          detail={error instanceof Error ? error.message : String(error)}
+          onRetry={() => refetch()}
+        />
+      ) : null}
+
       <div className="surface rounded-xl p-6">
-        <ActivityFeed items={activity} emptyMessage="No activity recorded yet." />
+        {isLoading ? (
+          <div className="space-y-2">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} variant="row" />
+            ))}
+          </div>
+        ) : items.length === 0 ? (
+          <EmptyState
+            eyebrow="Activity · log idle"
+            message="Activity will appear here after the first parse."
+          />
+        ) : (
+          <ActivityFeed items={items} emptyMessage="No activity recorded yet." />
+        )}
       </div>
     </div>
   );