feat(frontend): Remittances + ActivityLog wire live tail

src/pages/ActivityLog.tsx

@@ -1,4 +1,7 @@
 import { useActivity } from "@/hooks/useActivity";
+import { useTailStream } from "@/hooks/useTailStream";
+import { useMergedTail } from "@/hooks/useMergedTail";
+import { TailStatusPill } from "@/components/TailStatusPill";
 import { ActivityFeed } from "@/components/ActivityFeed";
 import { Skeleton } from "@/components/ui/skeleton";
 import { EmptyState } from "@/components/ui/empty-state";
@@ -6,7 +9,16 @@ import { ErrorState } from "@/components/ui/error-state";
 
 export function ActivityLog() {
   const { data, isLoading, isError, error, refetch } = useActivity({ limit: 200 });
-  const items = data?.items ?? [];
+
+  // SP5 live-tail wiring (sub-project 5, Phase 5 Task 23). The page has
+  // no existing kind filter UI (the plan calls out "filters by activity
+  // kind" but the current ActivityLog renders all events unfiltered),
+  // so we pass no `filterFn` to `useMergedTail` — every live-arriving
+  // activity event is shown. If a kind filter is added later, this is
+  // the place to thread it through.
+  const { status: tailStatus, lastEventAt: tailLastEventAt, forceReconnect } =
+    useTailStream("activity");
+  const items = useMergedTail("activity", data?.items ?? []);
 
   return (
     <div className="space-y-8 animate-fade-in">
@@ -31,6 +43,16 @@ export function ActivityLog() {
       ) : null}
 
       <div className="surface rounded-xl p-6">
+        <div className="flex flex-wrap items-center gap-3 mb-4">
+          {/* SP5: live-tail status pill, right-aligned in the toolbar. */}
+          <div className="ml-auto">
+            <TailStatusPill
+              status={tailStatus}
+              lastEventAt={tailLastEventAt}
+              onReconnect={forceReconnect}
+            />
+          </div>
+        </div>
         {isLoading ? (
           <div className="space-y-2">
             {Array.from({ length: 5 }).map((_, i) => (