feat(frontend): Remittances + ActivityLog wire live tail

src/pages/Remittances.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import { ChevronDown, ChevronRight, Receipt } from "lucide-react";
 import {
   Table,
@@ -15,9 +15,12 @@ import { ErrorState } from "@/components/ui/error-state";
 import { FilterChips, type FilterChipOption } from "@/components/ui/filter-chips";
 import { Pagination } from "@/components/ui/pagination";
 import { useRemittances } from "@/hooks/useRemittances";
+import { useTailStream } from "@/hooks/useTailStream";
+import { useMergedTail } from "@/hooks/useMergedTail";
+import { TailStatusPill } from "@/components/TailStatusPill";
 import { fmt } from "@/lib/format";
 import { cn } from "@/lib/utils";
-import type { CasAdjustment, RemittanceStatus } from "@/types";
+import type { CasAdjustment, Remittance, RemittanceStatus } from "@/types";
 
 const PAGE_SIZE = 25;
 
@@ -64,7 +67,25 @@ export function Remittances() {
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
   });
-  const items = data?.items ?? [];
+
+  // SP5 live-tail wiring (sub-project 5, Phase 5 Task 23). The tail
+  // stream emits every remittance that lands — including ones that
+  // don't match the user's current `status` filter chip. Drop those
+  // tail items so a newly-arrived remit that wouldn't match the page's
+  // intent doesn't flash into the table. Base items are NOT filtered
+  // here (they reflect whatever the list query returned, matching the
+  // existing page behavior).
+  const tailFilterFn = useMemo(
+    () => (r: Remittance) => {
+      if (status && r.status !== status) return false;
+      return true;
+    },
+    [status],
+  );
+
+  const { status: tailStatus, lastEventAt: tailLastEventAt, forceReconnect } =
+    useTailStream("remittances");
+  const items = useMergedTail("remittances", data?.items ?? [], tailFilterFn);
 
   const total = items.reduce(
     (acc, r) => ({
@@ -126,15 +147,25 @@ export function Remittances() {
       </div>
 
       <div className="surface rounded-xl p-4">
-        <FilterChips
-          options={STATUS_OPTIONS}
-          value={status}
-          onChange={(v) => {
-            setStatus((v as RemittanceStatus | null) ?? null);
-            setPage(1);
-          }}
-          eyebrow="Status"
-        />
+        <div className="flex flex-wrap items-center gap-3">
+          <FilterChips
+            options={STATUS_OPTIONS}
+            value={status}
+            onChange={(v) => {
+              setStatus((v as RemittanceStatus | null) ?? null);
+              setPage(1);
+            }}
+            eyebrow="Status"
+          />
+          {/* SP5: live-tail status pill, right-aligned in the toolbar. */}
+          <div className="ml-auto">
+            <TailStatusPill
+              status={tailStatus}
+              lastEventAt={tailLastEventAt}
+              onReconnect={forceReconnect}
+            />
+          </div>
+        </div>
       </div>
 
       <div className="surface rounded-xl overflow-hidden">