feat(invoice): implement live sse activity feed panel with view tracking

src/__tests__/ActivityFeed.test.tsx

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ActivityFeed from "@/components/ActivityFeed";
+import type { ActivityEvent } from "@/types/activity";
+
+class MockIntersectionObserver {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+}
+
+beforeEach(() => {
+  // @ts-expect-error - assigning to global
+  global.IntersectionObserver = MockIntersectionObserver;
+});
+
+vi.mock("@/hooks/useActivityFeed", () => ({
+  useActivityFeed: vi.fn(),
+}));
+
+import { useActivityFeed } from "@/hooks/useActivityFeed";
+
+const mockUseActivityFeed = vi.mocked(useActivityFeed);
+
+function makeEvent(overrides: Partial<ActivityEvent> = {}): ActivityEvent {
+  return {
+    eventId: "ae-1",
+    invoiceId: "1",
+    type: "payment_received",
+    actor: "GALICE",
+    timestamp: Date.now(),
+    meta: { amount: 10_000_000 },
+    ...overrides,
+  };
+}
+
+describe("ActivityFeed", () => {
+  it("renders nothing when closed", () => {
+    mockUseActivityFeed.mockReturnValue({
+      events: [],
+      readIds: new Set(),
+      unreadCount: 0,
+      isConnected: true,
+      markAsRead: vi.fn(),
+      markManyAsRead: vi.fn(),
+      activeFilters: [],
+      toggleFilter: vi.fn(),
+      clearFilters: vi.fn(),
+    });
+
+    const { container } = render(<ActivityFeed open={false} />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders empty state when no events", () => {
+    mockUseActivityFeed.mockReturnValue({
+      events: [],
+      readIds: new Set(),
+      unreadCount: 0,
+      isConnected: true,
+      markAsRead: vi.fn(),
+      markManyAsRead: vi.fn(),
+      activeFilters: [],
+      toggleFilter: vi.fn(),
+      clearFilters: vi.fn(),
+    });
+
+    render(<ActivityFeed open={true} />);
+    expect(screen.getByText("Activity")).toBeInTheDocument();
+    expect(screen.getByText("No activity yet")).toBeInTheDocument();
+  });
+
+  it("renders feed items with event descriptions", () => {
+    mockUseActivityFeed.mockReturnValue({
+      events: [
+        makeEvent({ type: "payment_received", meta: { amount: 10_000_000 } }),
+        makeEvent({
+          eventId: "ae-2",
+          type: "comment",
+          meta: { text: "Looks good" },
+        }),
+      ],
+      readIds: new Set(),
+      unreadCount: 2,
+      isConnected: true,
+      markAsRead: vi.fn(),
+      markManyAsRead: vi.fn(),
+      activeFilters: [],
+      toggleFilter: vi.fn(),
+      clearFilters: vi.fn(),
+    });
+
+    render(<ActivityFeed open={true} />);
+    expect(screen.getByText(/1\.00 USDC/)).toBeInTheDocument();
+    expect(screen.getByText(/Looks good/)).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument(); // unread badge
+  });
+
+  it("shows connection status indicator", () => {
+    mockUseActivityFeed.mockReturnValue({
+      events: [],
+      readIds: new Set(),
+      unreadCount: 0,
+      isConnected: false,
+      markAsRead: vi.fn(),
+      markManyAsRead: vi.fn(),
+      activeFilters: [],
+      toggleFilter: vi.fn(),
+      clearFilters: vi.fn(),
+    });
+
+    render(<ActivityFeed open={true} />);
+    const dot = screen.getByTitle("Disconnected");
+    expect(dot).toHaveClass("bg-red-400");
+  });
+
+  it("renders filter chips for all event types", () => {
+    mockUseActivityFeed.mockReturnValue({
+      events: [],
+      readIds: new Set(),
+      unreadCount: 0,
+      isConnected: true,
+      markAsRead: vi.fn(),
+      markManyAsRead: vi.fn(),
+      activeFilters: [],
+      toggleFilter: vi.fn(),
+      clearFilters: vi.fn(),
+    });
+
+    render(<ActivityFeed open={true} />);
+    expect(screen.getByText("Payment")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Comment")).toBeInTheDocument();
+    expect(screen.getByText("Co-creator")).toBeInTheDocument();
+  });
+
+  it("links feed items to correct invoice URLs", () => {
+    mockUseActivityFeed.mockReturnValue({
+      events: [
+        makeEvent({
+          invoiceId: "42",
+          type: "status_change",
+          meta: { from: "Pending", to: "Released" },
+        }),
+      ],
+      readIds: new Set(),
+      unreadCount: 1,
+      isConnected: true,
+      markAsRead: vi.fn(),
+      markManyAsRead: vi.fn(),
+      activeFilters: [],
+      toggleFilter: vi.fn(),
+      clearFilters: vi.fn(),
+    });
+
+    render(<ActivityFeed open={true} />);
+    const link = screen.getByText("Invoice moved from Pending to Released")
+      .closest("a");
+    expect(link).toHaveAttribute("href", "/invoice/42");
+  });
+
+  it("deep-links comments to anchor on invoice page", () => {
+    mockUseActivityFeed.mockReturnValue({
+      events: [
+        makeEvent({
+          eventId: "ae-10",
+          invoiceId: "5",
+          type: "comment",
+          meta: { commentId: "c-abc", text: "Nice work" },
+        }),
+      ],
+      readIds: new Set(),
+      unreadCount: 1,
+      isConnected: true,
+      markAsRead: vi.fn(),
+      markManyAsRead: vi.fn(),
+      activeFilters: [],
+      toggleFilter: vi.fn(),
+      clearFilters: vi.fn(),
+    });
+
+    render(<ActivityFeed open={true} />);
+    const link = screen.getByText(/Nice work/).closest("a");
+    expect(link).toHaveAttribute("href", "/invoice/5#comment-c-abc");
+  });
+});

src/__tests__/activityFeed.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import {
+  publishActivity,
+  getRecentEvents,
+  subscribe,
+  resetActivityStoreForTests,
+} from "@/lib/activityFeedStore";
+
+describe("activityFeedStore", () => {
+  beforeEach(() => {
+    resetActivityStoreForTests();
+  });
+
+  it("publishes an event and returns it", () => {
+    const event = publishActivity("1", "payment_received", "GALICE", {
+      amount: 10_000_000,
+    });
+
+    expect(event.eventId).toMatch(/^ae-/);
+    expect(event.invoiceId).toBe("1");
+    expect(event.type).toBe("payment_received");
+    expect(event.actor).toBe("GALICE");
+    expect(event.meta.amount).toBe(10_000_000);
+    expect(event.timestamp).toBeGreaterThan(0);
+  });
+
+  it("stores events retrievable via getRecentEvents", () => {
+    publishActivity("1", "payment_received", "GALICE");
+    publishActivity("2", "status_change", "GBOB", {
+      from: "Pending",
+      to: "Released",
+    });
+
+    const events = getRecentEvents(10);
+    expect(events).toHaveLength(2);
+    expect(events[0].invoiceId).toBe("1");
+    expect(events[1].invoiceId).toBe("2");
+  });
+
+  it("limits stored events to MAX_EVENTS", () => {
+    for (let i = 0; i < 250; i++) {
+      publishActivity(String(i), "comment", "GALICE", { text: `msg-${i}` });
+    }
+
+    const events = getRecentEvents(300);
+    expect(events.length).toBeLessThanOrEqual(200);
+    expect(events[events.length - 1].meta.text).toBe("msg-249");
+  });
+
+  it("subscribes to live events and unsubscribes cleanly", () => {
+    const received: unknown[] = [];
+    const unsubscribe = subscribe((event) => received.push(event));
+
+    publishActivity("1", "payment_received", "GALICE");
+    publishActivity("2", "comment", "GBOB", { text: "hi" });
+    unsubscribe();
+    publishActivity("3", "co_creator_action", "GCAROL");
+
+    expect(received).toHaveLength(2);
+  });
+
+  it("publishes all event types", () => {
+    const types = [
+      "payment_received",
+      "status_change",
+      "comment",
+      "co_creator_action",
+    ] as const;
+
+    for (const type of types) {
+      const event = publishActivity("1", type, "GALICE");
+      expect(event.type).toBe(type);
+    }
+
+    expect(getRecentEvents()).toHaveLength(4);
+  });
+});

src/app/api/activity-feed/route.ts

@@ -0,0 +1,59 @@
+import { NextRequest } from "next/server";
+import { subscribe, getRecentEvents } from "@/lib/activityFeedStore";
+
+function toSseChunk(data: Record<string, unknown>): string {
+  return `data: ${JSON.stringify(data)}\n\n`;
+}
+
+/**
+ * SSE stream that emits all invoice activity events (payments, status
+ * changes, comments, co-creator actions) to every connected dashboard client.
+ */
+export async function GET(request: NextRequest) {
+  const encoder = new TextEncoder();
+
+  let unsubscribe: (() => void) | null = null;
+
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      // Send snapshot of recent events on connect
+      const recent = getRecentEvents(50);
+      controller.enqueue(
+        encoder.encode(toSseChunk({ type: "snapshot", events: recent })),
+      );
+
+      // Subscribe to live events
+      unsubscribe = subscribe((event) => {
+        controller.enqueue(
+          encoder.encode(toSseChunk({ type: "event", event })),
+        );
+      });
+
+      // Keepalive ping every 25 seconds
+      const keepAlive = setInterval(() => {
+        controller.enqueue(encoder.encode(": ping\n\n"));
+      }, 25_000);
+
+      request.signal.addEventListener("abort", () => {
+        clearInterval(keepAlive);
+        unsubscribe?.();
+        try {
+          controller.close();
+        } catch {
+          // already closed
+        }
+      });
+    },
+    cancel() {
+      unsubscribe?.();
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  });
+}